Переход на новые версии

5.0 -> 6.0

Структура Diagram Editor

Основные части Diagram Editor переименованы:

Левая панель -> Shapebar
Правая панель -> Editbar снабжён гибкой конфигурацией

Структура Toolbar по умолчанию была изменена. Она также стала гибко настраиваемой, поэтому вы можете добавлять собственные элементы Toolbar.

API Diagram Editor

Для настройки панелей Diagram Editor введён объект view:

view?: {
    toolbar?: boolean | obj,
    shapebar?: boolean | obj,
    editbar?: boolean | obj
}

Изучите соответствующие обзорные руководства по API, чтобы узнать о новых возможностях управления панелями:

Устаревшие методы

Метод setViewMode() компонента Diagram Editor устарел и больше не поддерживается. Вместо него используйте методы show()/hide() объекта view.

До v6.0
const editor = new dhx.DiagramEditor("editor_container");
editor.parse(data);

editor.setViewMode("preview"); // "preview" или "edit"

С v6.0
const editor = new dhx.DiagramEditor("editor_container");
editor.parse(data);

editor.view.hide("shapebar");
editor.view.hide("editbar");

Устаревшие свойства

Свойство reservedWidth компонента Diagram Editor устарело и больше не поддерживается.

До v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    reservedWidth: 150
});

Вместо него используйте следующий синтаксис:

С v6.0
editor.diagram.config.margin.x = 40;

Свойство editMode компонента Diagram Editor устарело и больше не поддерживается. Вместо него используйте соответствующее свойство объекта view (toolbar, shapebar, editbar).

До v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    editMode: false
});

С v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    view: {
        toolbar: false,
        shapebar: false, // только для режима "default"
        editbar: false
    }
});

Свойство controls компонента Diagram Editor устарело и больше не поддерживается. Вместо него используйте свойство items конфигурации view.toolbar.

До v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    controls: {
        // ...
    }
});

С v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    view: {
        toolbar: {
            items: []
        }
    }
});

Свойство shapeBarWidth компонента Diagram Editor устарело и больше не поддерживается. Вместо него используйте свойство width конфигурации view.shapebar.

До v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    shapeBarWidth: 190
});

С v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        shapebar: {
            width: 400 // 300 по умолчанию
        }
    }
});

Свойство shapeSections компонента Diagram Editor устарело и больше не поддерживается. Вместо него используйте свойство sections конфигурации view.shapebar.

До v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    shapeSections: {
        "Swimlane": [{ swimlane: true }],
        "Groups": [{ group: true }],
        "Flowchart shapes": [{ flowShapes: true }],
        "Org shapes, text, topic": [{ org: true }, "text", "topic"]
    }
});

С v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        shapebar: {
            sections: {
                "Swimlane": [{ swimlane: true }],
                "Groups": [{ group: true }],
                "Flowchart shapes": [{ flowShapes: true }],
                "Org shapes, text, topic": [{ org: true }, "text", "topic"]
            }
        }
    }
});

Свойство gapPreview компонента Diagram Editor устарело и больше не поддерживается. Вместо него используйте свойство gap объекта preview конфигурации view.shapebar.

До v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    gapPreview: 10
});

С v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        shapebar: {
            preview: {
               scale: 0.65,
               gap: 8
            }
        }
    }
});

Свойство scalePreview компонента Diagram Editor устарело и больше не поддерживается. Вместо него используйте свойство scale объекта preview конфигурации view.shapebar.

До v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    gapPreview: 10
});

С v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        shapebar: {
            preview: {
               scale: 0.65,
               gap: 8
            }
        }
    }
});

Устаревшие события

Следующие события компонента Diagram Editor устарели и больше не поддерживаются, так как в toolbar отсутствуют соответствующие кнопки: resetButton, applyButton, visibility, exportData, importData, autoLayout. Вместо них вы можете отслеживать событие click объекта toolbar компонента Diagram Editor:

editor.toolbar.events.on("click", id => console.log(id));

Примечание

Идентификаторы служебных элементов начинаются с символа $.

Событие changeGridStep компонента Diagram Editor устарело и больше не поддерживается.

API Diagram

Свойство properties метода addShape устарело и больше не используется. Настройка пользовательской фигуры в editbar компонента Editor выполняется через свойство properties панели Editbar:

До v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default"
});
editor.parse(data);

editor.diagram.addShape("network", {
    template: config => (
        `<section className='template'>
            <h3>${config.title}</h3>
            <ul><li>${config.text.join("</li><li>")}</li></ul>
        </section>`
    ),
    properties:[
        { type:"arrange" },
        { type:"size" }
    ]
});

С v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        shapebar: {
            sections: {
                "Network shapes": [
                    { type: "network", text: "Core", img: src + "core.svg" },
                    { type: "network", text: "Server", img: src + "server.svg" }
                ],
                "Flow shapes": [{ flowShapes: true }]
            }
        },
        editbar: {
            properties: {
                network: [
                    { type: "arrange" },
                    {
                        type: "fieldset",
                        label: "Network information",
                        rows: [
                            { type: "avatar", key: "img", circle: true, readOnly: true },
                            { type: "textarea", key: "text", label: "Description" },
                            { type: "input", key: "ip", label: "IP" }
                        ]
                    }
                ]
            }
        }
    }
});

editor.parse(data);

editor.diagram.addShape("network", {
    template: ({ img, text, ip }) => {
        return `
            <section className="dhx_diagram_template_d">
                <img className="dhx_diagram_template_d__image" src="${img}" alt="${text}"/></img>
                <span className="dhx_diagram_template_d__title">${text}</span>
                <span className="dhx_diagram_template_d__text">${ip}</span>
            </section>
        `;
    },
    defaults: {
        width: 160, height: 160,
        preview: { scale: 0.7 },
        ip: "127.0.0.1"
    }
});

API Diagram Selection

Метод getId() объекта Selection компонента Diagram устарел и больше не поддерживается. Вместо него используйте методы getIds() и getItem() объекта Selection. Ознакомьтесь с примерами ниже:

До v6.0
// diagram должен быть создан с опцией "select:true"
const diagram = new dhx.Diagram("diagram_container", {
    select: true
});
diagram.data.parse(data);

const id = diagram.selection.getId(); // -> "2"

С v6.0
// diagram должен быть создан с опцией "select:true"
const diagram = new dhx.Diagram("diagram_container", {
    select: true
});
diagram.data.parse(data);

// возвращает последний выбранный элемент
let id = diagram.selection.getIds().at(-1);
id = diagram.selection.getItem().id;

Свойства фигур

Использование свойства text объекта конфигурации фигуры теперь ограничено только строковым значением. Использование его в виде массива строковых значений при настройке пользовательской фигуры устарело и больше не поддерживается.

Заголовки линий

Заголовки линий перенесены из объектов line в общую структуру данных на том же уровне, что и линии, и определяются как объекты lineTitles.

До v6.0 заголовки линий указывались внутри объекта line следующим образом:

До v6.0
const data = [
    // объект линии
    {
        // свойства объекта линии
        title?: {
            fontSize?: number | string, // по умолчанию 14
            lineHeight?: number | string, // по умолчанию 14
            textAlign?: "center" | "left" | "right", // по умолчанию "center"
            textVerticalAlign?: string,
            fontStyle?: "normal" | "italic" | "oblique", // по умолчанию "normal"
            fontColor?: string, // по умолчанию "#4C4C4C"
            fontWeight?: string, // по умолчанию "500"
            fill?: string,
            editable?: boolean, // по умолчанию true
            hidden?: boolean,
            draggable?: boolean,
            autoPosition?: boolean,
            text?: [
                {
                    id?: string | number,
                    type?: "$linetext",
                    width?: number,
                    height?: number,
                    distance?: number,
                    autoPosition?: boolean,
                    hidden?: boolean,
                    editable?: boolean, // по умолчанию true
                    draggable?: boolean,
                    fill?: string,
                    text?: string,
                    fontSize?: number | string, // по умолчанию 14
                    lineHeight?: number | string, // по умолчанию 14
                    fontStyle?: "normal" | "italic" | "oblique", // по умолчанию "normal"
                    fontColor?: string, // по умолчанию "#4C4C4C"
                    fontWeight?: string, // по умолчанию "500"
                    textAlign?: "center" | "left" | "right", // по умолчанию "center"
                    textVerticalAlign?: "center" | "top" | "bottom" // по умолчанию "center"
                },
                // другие объекты для текстовых элементов линии
            ]
        }
    },
    // другие объекты линий
]

Начиная с v6.0 заголовки линий определяются в отдельных объектах с типом "lineTitle". Объект lineTitle имеет следующие свойства конфигурации:

С v6.0
const data = [
    // объект заголовка линии
    {
        type: "lineTitle",
        id?: string | number,
        text: string,
        parent: string | number,

        distance?: number, // по умолчанию 50
        autoPosition?: boolean, // по умолчанию true
        editable?: boolean, // по умолчанию true
        fixed?: boolean, // по умолчанию false
        hidden?: boolean, // по умолчанию false

        fill?: string,
        fontSize?: string | number, // по умолчанию 14
        lineHeight?: string | number, // по умолчанию 14
        fontStyle?: "normal" | "italic" | "oblique", // по умолчанию "normal"
        fontColor?: string, // по умолчанию "#4C4C4C"
        fontWeight?: string, // по умолчанию "500"
        textAlign?: "center" | "left" | "right" // по умолчанию "center"
    },
    // другие объекты
];

Подробнее см. в API и руководствах по LineTitles.

Локализация

В связи с изменениями в интерфейсе Diagram Editor настройки локализации были обновлены. Подробности см. в руководствах по локализации.

4.2 -> 5.0

API Diagram

Свойство lineGap компонента Diagram устарело и больше не поддерживается. Вместо него используйте параметр lineGap свойства lineConfig.

До v5.0
const diagram = new dhx.Diagram("diagram_container", {
    type: "default",
    lineGap: 30
});

С v5.0
const diagram = new dhx.Diagram("diagram_container", {
    type: "default",
    lineConfig: {
        lineGap: 30
    },
    // другие параметры конфигурации
});

API Editor

Свойство lineGap компонента Diagram Editor устарело и больше не поддерживается. Вместо него используйте параметр lineGap внутри свойства lineConfig.

До v5.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    lineGap: 30
});

С v5.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    lineConfig: {
        lineGap: 30
    },
    // другие параметры конфигурации
});

4.1 -> 4.2

API Diagram

В v4.2 свойство defaultLinkType было объявлено устаревшим.

Начиная с v4.2, для указания типа соединительных линий по умолчанию необходимо использовать новое свойство lineConfig.

До v4.2
const diagram = new dhx.Diagram("diagram_container", {
    defaultLinkType: "dash"
});

С v4.2
const diagram = new dhx.Diagram("diagram_container", {
    lineConfig: {
        lineType: "dash",
    },
    // другие параметры конфигурации
});

API Editor

Синтаксис указания базовых наборов элементов для секций левой панели редактора был изменён.

До v4.2 можно было указать логическое значение true в массиве элементов секции, чтобы отобразить все доступные фигуры блок-схемы в этой секции:

До v4.2
const editor = new dhx.DiagramEditor("editor_container", {
    shapeSections: {
        "flowchart shapes": [true],
        "text": ["text"],
        "mind map shape": ["topic"]
    },
});

Начиная с v4.2, для этого необходимо использовать другой синтаксис:

С v4.2
const editor = new dhx.DiagramEditor("editor_container", {
    shapeSections: {
        "flowchart shapes": [{ flowShapes: true }],
        "text": ["text"],
        "mind map shape": ["topic"]
    },
});

Кроме того, появилась возможность указывать другие базовые наборы элементов с помощью соответствующих пар key:value. Подробнее см. в статье о shapeSections.

3.1 -> 4.0

API

Событие shapeHover объявлено устаревшим в v4.0. Начиная с v4.0, вместо него используйте новое событие itemMouseOver.

До v4.0
diagram.events.on("shapeHover", (id,e) => {
    console.log("An item"+ diagram.data.getItem(id).text +"has been hovered over");
});

С v4.0
diagram.events.on("itemMouseOver", (id, event) => {
    console.log(id, event);
});
// Для Diagram Editor
editor.diagram.events.on("itemMouseOver", (id, event) => {
    console.log(id, event);
});

3.0 -> 3.1

API Editor

Событие shapeMove объекта editor объявлено устаревшим в v3.1. Начиная с v3.1, вместо него используйте новые события BeforeShapeMove и AfterShapeMove.

До v3.1
editor.events.on("shapeMove", () => {
    console.log("The shape is moved");
});

С v3.1
// событие BeforeShapeMove
editor.events.on("BeforeShapeMove", (e) => {
    console.log("Before the shape is moved:", e);
    return true;
});

// событие AfterShapeMove
editor.events.on("AfterShapeMove", (e) => {
    console.log("After the shape is moved:", e);
});

2.2 -> 3.0

Создание пользовательских фигур

Способ создания пользовательских фигур был изменён, упрощён и улучшен.

Начиная с v3.0, для создания собственных типов фигур вместо объекта diagram.flowShapes следует использовать новый метод addShape. Этот метод позволяет создавать HTML-шаблоны, которые будут работать в разных браузерах. Кроме того, он позволяет создавать и редактировать пользовательские фигуры в Diagram Editor.

Хотя объект diagram.flowShapes объявлен устаревшим, он продолжит работать.

До версии 3.0 вы могли показывать/скрывать кнопки toolbar в Diagram Editor с помощью соответствующих свойств конфигурации showApply, showReset, showExport компонента Editor.

В версии 3.0 эти свойства объявлены устаревшими и удалены. Вместо них добавлено свойство конфигурации controls, содержащее набор пар control_name:value. Таким образом, свойства заменены следующим образом:

showApply -> controls.apply
showReset -> controls.reset
showExport -> controls.export

const editor = new dhx.DiagramEditor("editor_container", {
    controls: {
        apply: false,
        reset: false,
        export: true
    }
});

Чтобы включить/отключить кнопку toolbar, необходимо задать значению элемента управления true (по умолчанию) или false.

Полный список доступных элементов управления см. в статье Toolbar.

1.1 -> 2.0

Удалённое API

diagram.eachChild

Изменённое API

diagram.addItem -> diagram.data.add
diagram.attachEvent -> diagram.events.on
diagram.callEvent -> diagram.events.fire
diagram.clearAll -> diagram.data.removeAll
diagram.deleteItem -> diagram.data.remove
diagram.detachEvent -> diagram.events.detach
diagram.eachItem -> diagram.data.map
diagram.getItem -> diagram.data.getItem
diagram.getSelectedId -> diagram.selection.getId
diagram.load -> diagram.data.load
diagram.parse -> diagram.data.parse
diagram.selectItem -> diagram.selection.add
diagram.serialize -> diagram.data.serialize
diagram.unselectItem -> diagram.selection.remove
diagram.updateItem -> diagram.data.update

5.0 -> 6.0​

Структура Diagram Editor​

API Diagram Editor​

Устаревшие методы​

Устаревшие свойства​

Устаревшие события​

API Diagram​

API Diagram Selection​

Свойства фигур​

Заголовки линий​

Локализация​

4.2 -> 5.0​

API Diagram​

API Editor​

4.1 -> 4.2​

API Diagram​

API Editor​

3.1 -> 4.0​

API​

3.0 -> 3.1​

API Editor​

2.2 -> 3.0​

Создание пользовательских фигур​

Кнопки Toolbar в Editor​

1.1 -> 2.0​

Удалённое API​

Изменённое API​

5.0 -> 6.0

Структура Diagram Editor

API Diagram Editor

Устаревшие методы

Устаревшие свойства

Устаревшие события

API Diagram

API Diagram Selection

Свойства фигур

Заголовки линий

Локализация

4.2 -> 5.0

API Diagram

API Editor

4.1 -> 4.2

API Diagram

API Editor

3.1 -> 4.0

API

3.0 -> 3.1

API Editor

2.2 -> 3.0

Создание пользовательских фигур

Кнопки Toolbar в Editor

1.1 -> 2.0

Удалённое API

Изменённое API