Перейти к основному содержимому

Инициализация Diagram Editor

В этой статье рассматривается процесс отображения Diagram Editor на странице. Чтобы инициализировать редактор, необходимо подключить исходные файлы, специфичные для Editor, и использовать экземпляр DiagramEditor. Во всех остальных аспектах этап инициализации совпадает с инициализацией компонента Diagram:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="../codebase/diagramWithEditor.js"></script>
    <link rel="stylesheet" href="../codebase/diagramWithEditor.css">
</head>

<body>
    <div id="editor_container"></div>
    <script>
        // подготовка данных
        const data = [
            { id: 1, x: 100, y: 40, text: "Start", type: "start", height: 50 },
            { id: 2, x: 100, y: 170, text: "Operation 1", type: "output" },
            { id: 3, x: 100, y: 300, text: "Operation 2", type: "input" },
            { from: 1, to: 2 },
            { from: 2, to: 3 }
            // другие объекты
        ];

        // создание Diagram Editor
        const editor = new dhx.DiagramEditor("editor_container", {
            // параметры конфигурации
        });

        // загрузка данных в редактор
        editor.parse(data);
    </script>
</body>
</html>

Подключение необходимых файлов кода​

Чтобы создать Diagram Editor, необходимо подключить на странице 2 исходных файла:

  • diagramWithEditor.js
  • diagramWithEditor.css

Убедитесь, что вы указали правильные относительные пути к этим файлам:

<script type="text/javascript" src="../codebase/diagramWithEditor.js"></script>
<link rel="stylesheet" href="../codebase/diagramWithEditor.css">

Установка Diagram Editor через npm или yarn​

Вы можете импортировать JavaScript Diagram Editor в свой проект с помощью пакетного менеджера yarn или npm.

Установка пробной версии Diagram Editor через npm или yarn​

К сведению

Если вы хотите использовать пробную версию Diagram Editor, скачайте пробный пакет Diagram и выполните шаги, описанные в файле README. Обратите внимание, что пробная версия Diagram Editor доступна только 30 дней.

Установка PRO-версии Diagram Editor через npm или yarn​

К сведению

Вы можете получить доступ к приватному npm DHTMLX напрямую в Личном кабинете, сгенерировав логин и пароль для npm. Там же доступно подробное руководство по установке. Обратите внимание, что доступ к приватному npm предоставляется только при активной проприетарной лицензии на Diagram.

Инициализация Diagram Editor​

Вы можете инициализировать Diagram Editor в контейнере, в теле документа или в ячейке Layout.

Инициализация в контейнере​

Чтобы инициализировать Diagram Editor в контейнере, используйте конструктор dhx.DiagramEditor и передайте функции-конструктору следующие два параметра:

  • контейнер, в который будет помещён Diagram Editor; присвоим ему id "editor_container":
index.html
<div id="editor_container"></div>
index.js
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default" // "default" | "org" | "mindmap"
});

Инициализация в теле документа​

Вы также можете не задавать контейнер для Diagram Editor и добавить его непосредственно в тело документа:

const editor = new dhx.DiagramEditor(document.body, {
    type: "default" // "default" | "org" | "mindmap"
});

Инициализация в ячейке Layout​

Вы также можете инициализировать редактор внутри ячейки Layout. В этом случае используйте null вместо контейнера:

const editor = new dhx.DiagramEditor(null, {
    type: "default" // "default" | "org" | "mindmap"
});
const layout = new dhx.Layout("layout", {
    cols: [
        {
            id: "diagram_editor"
        }
    ]
});

layout.getCell("diagram_editor").attach(editor);

Параметры конфигурации​

Чтобы изменить конфигурацию редактора, укажите нужное свойство в объекте конфигурации, передаваемом вторым параметром функции-конструктору.

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default", // "default" | "org" | "mindmap"
    shapeBarWidth: 320,
    lineGap: 20
});

Свойства​

Ознакомьтесь с полным списком параметров конфигурации Editor.

Загрузка данных в Diagram Editor​

Вы можете загрузить подходящий набор данных в редактор с помощью метода parse() редактора.

Need more help?Contact Support