Интеграция с Svelte
Прежде чем читать эту документацию, вы должны быть знакомы с основными концепциями и шаблонами Svelte. Чтобы освежить знания, обратитесь к документации Svelte.
DHTMLX Diagram Editor совместим со Svelte. Мы подготовили примеры кода, показывающие, как использовать DHTMLX Diagram Editor со Svelte. Дополнительную информацию можно найти в соответствующем примере на GitHub.
Создание проекта
Чтобы создать проект Svelte на JS, выполните следующую команду:
npm create vite@latest
При создании проекта выберите варианты Svelte и JavaScript. Назовём проект my-svelte-diagram-app.
Установка зависимостей
Перейдите в каталог приложения:
cd my-svelte-diagram-app
Затем вам нужно установить зависимости и запустить приложение. Для этого используйте менеджер пакетов:
- если вы используете yarn, выполните следующие команды:
yarn
yarn start // или yarn dev
- если вы используете npm, выполните следующие команды:
npm install
npm run dev
Приложение должно запуститься на локальном хосте (например, http://localhost:3000).
Создание Diagram Editor
Теперь вам нужно получить исходный код DHTMLX Diagram Editor. Сначала остановите приложение и переходите к установке пакета Diagram Editor.
Шаг 1. Установка пакета
Скачайте пробный пакет Diagram Editor и выполните шаги, описанные в файле README. Обратите внимание, что пробная версия Diagram Editor доступна только в течение 30 дней.
Шаг 2. Создание компонента
Теперь вам нужно создать компонент Svelte, чтобы добавить Diagram Editor в приложение. Создадим новый файл в каталоге src/ и назовём его DiagramEditor.svelte.
Импорт исходных файлов
Откройте файл DiagramEditor.svelte и импортируйте исходные файлы Diagram Editor. Обратите внимание:
- если вы используете PRO-версию и устанавливаете пакет Diagram Editor из локальной папки, пути импорта выглядят следующим образом:
<script>
import { DiagramEditor } from 'dhx-diagram-package';
import 'dhx-diagram-package/codebase/diagram.css';
</script>
Обратите внимание, что в зависимости от используемого пакета исходные файлы могут быть минифицированы. В этом случае убедитесь, что вы импортируете файл CSS как diagram.min.css.
- если вы используете пробную версию Diagram Editor, укажите следующие пути:
<script>
import { DiagramEditor } from '@dhx/trial-diagram';
import '@dhx/trial-diagram/codebase/diagram.min.css';
</script>
В этом руководстве показано, как настроить пробную версию Diagram Editor.
Настройка контейнера и инициализация Diagram Editor
Чтобы отобразить Diagram Editor на странице, нужно создать контейнер для Diagram Editor и инициализировать этот компонент с помощью соответствующего конструктора:
<script>
import { onMount, onDestroy } from "svelte";
import { DiagramEditor } from "@dhx/trial-diagram";
import "@dhx/trial-diagram/codebase/diagram.min.css"
let container; // инициализация контейнера для Diagram Editor
let diagram_editor;
onMount(() => {
// инициализация компонента Diagram Editor
diagram_editor = new DiagramEditor(container, {});
});
onDestroy(() => {
diagram_editor.destructor(); // уничтожение Diagram Editor
});
</script>
<div bind:this={container} class="widget"></div>
Добавление стилей
Чтобы Diagram Editor отображался корректно, укажите важные стили для Diagram Editor и его контейнера в CSS-файле проекта:
/* стили для начальной страницы */
html,
body,
#app { /* убедитесь, что используете корневой контейнер #app */
height: 100%;
padding: 0;
margin: 0;
}
/* стили для контейнера Diagram Editor */
.widget {
height: 100%;
width: 100%;
}
Загрузка данных
Чтобы добавить данные в Diagram Editor, нужно предоставить набор данных. Создадим файл data.js в каталоге src/ и добавим в него данные:
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" },
// другие данные
]
}
Затем откройте файл App.svelte, импортируйте данные и передайте их в только что созданный компонент <DiagramEditor/> в качестве props:
<script>
import DiagramEditor from "./DiagramEditor.svelte";
import { getData } from "./data.js";
const data = getData();
</script>
<DiagramEditor data={data} />
Перейдите в файл DiagramEditor.svelte и примените переданные props к Diagram Editor с помощью метода parse():
<script>
import { onMount, onDestroy } from "svelte";
import { DiagramEditor } from "@dhx/trial-diagram";
import "@dhx/trial-diagram/codebase/diagram.min.css"
export let data;
let container;
let diagram_editor;
onMount(() => {
diagram_editor = new DiagramEditor(container, {});
diagram_editor.parse(data);
});
onDestroy(() => {
diagram_editor.destructor();
});
</script>
<div bind:this={container} class="widget"></div>
Теперь компонент Diagram Editor готов к использованию. Когда элемент будет добавлен на с траницу, он инициализирует Diagram Editor с данными. Вы также можете указать необходимые настройки конфигурации. Посетите наш справочник API Diagram Editor, чтобы ознакомиться с полным списком доступных свойств.
Обработка событий
Когда пользователь выполняет какое-либо действие в Diagram Editor, возникает событие. Вы можете использовать эти события, чтобы отслеживать действие и запускать нужный код в ответ на него. См. полный список событий.
Откройте DiagramEditor.svelte и дополните метод onMount() следующим образом:
<script>
// ...
let diagram_editor;
onMount(() => {
diagram_editor = new DiagramEditor(container, {})
diagram_editor.events.on("afterFocusSet", function(cell){
console.log("Focus is set on a cell " + diagram_editor.selection.getSelectedCell());
console.log(cell);
});
});
onDestroy(() => {
diagram_editor.destructor();
});
</script>
// ...
После этого, когда мы запустим приложение, мы должны увидеть Diagram Editor, загруженный с данными на странице.
Теперь у вас должна быть базовая настройка для интеграции DHTMLX Diagram Editor со Svelte. Вы можете настроить код в соответствии со своими требованиями. Итоговый пример можно найти на GitHub.