Интеграция с Angular
Чтобы использовать эту документацию, вы должны быть знакомы с основными концепциями и шаблонами Angular. Чтобы освежить знания, обратитесь к документации Angular.
DHTMLX Diagram Editor совместим с Angular. Мы подготовили примеры кода, показывающие, как использовать DHTMLX Diagram Editor с Angular. Дополнительную информацию можно найти в соответствующем примере н а GitHub.
Создание проекта
Прежде чем создавать новый проект, установите Angular CLI и Node.js.
Создайте новый проект my-angular-diagram-app с помощью Angular CLI. Для этого выполните следующую команду:
ng new my-angular-diagram-app
Если вы хотите следовать этому руководству, отключите серверный рендеринг (SSR) и статическую генерацию сайта (SSG/Prerendering) при создании нового приложения Angular!
Приведённая выше команда устанавливает все необходимые инструменты, поэтому вам не нужно выполнять дополнительные команды.
Установка зависимостей
После этого перейдите в каталог приложения:
cd my-angular-diagram-app
Установите зависимости и запустите сервер разработки. Для этого используйте менеджер пакетов yarn:
yarn
yarn start
Приложение должно запуститься на локальном хосте (например, http://localhost:3000).
Создание Diagram Editor
Теперь вам нужно получить исходный код DHTMLX Diagram Editor. Сначала остановите приложение и переходите к установке пакета Diagram Editor.
Шаг 1. Установка пакета
Скачайте пробный пакет Diagram и выполните шаги, описанные в файле README. Обратите внимание, что пробная версия Diagram Editor доступна только в течение 30 дней.
Шаг 2. Создание компонента
Теперь вам нужно создать компонент Angular, чтобы добавить Diagram Editor в приложение. Создайте папку diagram-editor в каталоге src/app/, добавьте в неё новый файл и назовите его diagram-editor.component.ts. Затем выполните шаги, описанные ниже.
Импорт исходных файлов
Откройте файл и импортируйте исходные файлы Diagram Editor. Обратите внимание:
- если вы используете PRO-версию и устанавливаете пакет Diagram Editor из локальной папки, путь импорта выглядит следующим образом:
import { DiagramEditor } from 'dhx-diagram-package';
- если вы используете пробную версию Diagram, укажите следующий путь:
import { DiagramEditor } from '@dhx/trial-diagram';
В этом руководстве показано, как настроить пробную версию Diagram.
Настройка контейнера и инициализация Diagram Editor
Чтобы отобразить Diagram Editor на странице, нужно задать контейнер, внутри которого будет отрисовываться компонент, и инициализировать Diagram Editor с помощью соответствующего конструктора:
import { DiagramEditor } from "@dhx/trial-diagram";
import { IDefaultEditorConfig } from "@dhx/trial-diagram/codebase/types/ts-diagram-editor";
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
selector: 'diagram-editor', // имя шаблона, используемое в файле "app.component.ts" как <diagram-editor/>
styleUrls: ['./diagram-editor.component.css'], // подключение файла css
template: `<div #container class = "widget"></div>`
})
export class DiagramEditorComponent implements OnInit, OnDestroy {
// инициализация контейнера для Diagram Editor
@ViewChild('container', { static: true }) editor_container!: ElementRef;
private _diagram_editor!: DiagramEditor;
ngOnInit() {
// инициализация компонента Diagram Editor
this._diagram_editor = new DiagramEditor( this.editor_container.nativeElement, { type: "default" } as IDefaultEditorConfig);
}
ngOnDestroy() {
this._diagram_editor.destructor(); // уничтожение Diagram Editor
}
}
Добавление стилей
Чтобы Diagram Editor отображался корректно, нужно указать соответствующие стили. Для этого можно создать файл diagram-editor.component.css в каталоге src/app/diagram-editor/ и задать важные стили для Diagram Editor и его контейнера:
/* импорт стилей Diagram Editor */
@import "@dhx/trial-diagram/codebase/diagram.min.css";
/* стили для начальной страницы */
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
/* стили для контейнера Diagram Editor */
.widget {
height: 100%;
width: 100%;
}
Загрузка данных
Чтобы добавить данные в Diagram Editor, нужно предоставить набор данных. Вы можете создать файл data.ts в каталоге src/app/diagram-editor/ и добавить в него данные:
export function getData() {
return [
{ id: 1, x: 880, y: 105, text: "Does user remember his password?", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
{ id: 2, x: 1080, y: 125, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" },
{ id: 3, x: 1160, y: 40, text: "User forgets his password", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
{ id: 3.1, x: 1340, y: 40, text: "Send an E-mail with new password", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
{ id: 3.2, x: 1520, y: 40, text: "E-mail sent", type: "preparation", fontColor: "#fff", lineHeight: 18, fill: "#33B579", stroke: "#33B579" },
{ id: 4, x: 1160, y: 180, text: "User remembers his password", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
{ id: 5, x: 1340, y: 180, text: "User types in login and password", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
// другие данные
{ from: 1, to: 2, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
{ from: 2, to: 3, type: "dash", toSide: "bottom", forwardArrow: "filled", stroke: "#7D8495" },
{ from: 2, to: 7.5, type: "dash", fromSide: "bottom", toSide: "top", backArrow: "filled", stroke: "#7D8495" },
{ from: 2, to: 3.2, type: "dash", fromSide: "top", toSide: "top", stroke: "#7D8495" },
{ from: 3, to: 3.1, type: "line", forwardArrow: "filled", stroke: "#7D8495" },
{ from: 3.1, to: 3.2, type: "line", forwardArrow: "filled", stroke: "#7D8495" },
{ from: 2, to: 4, type: "dash", toSide: "top", forwardArrow: "filled", stroke: "#7D8495" },
{ from: 4, to: 5, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
{ from: 5, to: 6, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
// другие данные
]
}
Затем откройте файл diagram-editor.component.ts. Импортируйте файл с данными и примените их с помощью метода parse() внутри метода ngOnInit(), как показано ниже.
import { DiagramEditor } from "@dhx/trial-diagram";
import { IDefaultEditorConfig } from "@dhx/trial-diagram/codebase/types/ts-diagram-editor";
import { getData } from "./data"; // импорт данных
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
selector: 'diagram-editor',
styleUrls: ['./diagram-editor.component.css'],
template: `<div #container class = "widget"></div>`
})
export class DiagramEditorComponent implements OnInit, OnDestroy {
@ViewChild('container', { static: true }) editor_container!: ElementRef;
private _diagram_editor!: DiagramEditor;
ngOnInit() {
const data = getData(); // и нициализация свойства data
this._diagram_editor = new DiagramEditor( this.editor_container.nativeElement, { type: "default" } as IDefaultEditorConfig);
this._diagram_editor.parse(data);
}
ngOnDestroy() {
this._diagram_editor.destructor();
}
}
Теперь компонент Diagram Editor готов к использованию. Когда элемент будет добавлен на страницу, он инициализирует Diagram Editor с данными. Вы также можете указать необходимые настройки конфигурации. Посетите наш справочник API Diagram Editor, чтобы ознакомиться с полным списком доступных свойств.
Обработка событий
Когда пользователь выполняет какое-либо действие в Diagram Editor, возникает событие. Вы можете использовать эти события, чтобы отслеживать действие и запускать нужный код в ответ на него. См. полный список событий.
Откройте файл diagram-editor.component.ts и дополните метод ngOnInit() следующим образом:
// ...
ngOnInit() {
this._diagram_editor = new DiagramEditor(this.editor_container.nativeElement, { type: "default" } as IDefaultEditorConfig);
this._diagram_editor.events.on("zoomIn", (step) => {
console.log("The diagram in the editor is zoomed in. The step is" + step);
});
}
ngOnDestroy() {
this._diagram_editor.destructor();
}
Шаг 3. Добавление Diagram Editor в приложение
Чтобы добавить DiagramEditorComponent в приложение, откройте файл src/app/app.component.ts и замените код по умолчанию следующим:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `<diagram-editor/>` // шаблон, созданный в файле "diagram-editor.component.ts"
})
export class AppComponent {
name = "";
}
Затем создайте файл app.module.ts в каталоге src/app/ и укажите DiagramEditorComponent, как показано ниже:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { DiagramEditorComponent } from "./diagram-editor/diagram-editor.component";
@NgModule({
declarations: [AppComponent, DiagramEditorComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule {}
Последний шаг — открыть файл src/main.ts и заменить существующий код следующим:
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
После этого вы можете запустить приложение и увидеть Diagram Editor, загруженный с данными на странице.
Теперь вы знаете, как интегрировать DHTMLX Diagram Editor с Angular. Вы можете настроить код в соответствии со своими требованиями. Итоговый пример можно найти на GitHub.