addShape()

Описание

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

Метод addShape() можно использовать как в диаграмме, так и в редакторе. Смотрите примеры ниже

Использование

addShape(
    type: string,
    parameters: object
): void;

Параметры

type - (обязательный) уникальное имя для типа пользовательской фигуры. Имя должно отличаться от имён фигур по умолчанию
parameters - (обязательный) объект с дополнительными параметрами метода addShape(). Здесь можно указать следующие атрибуты:
- template: function - (обязательный) функция, которая принимает объект конфигурации фигуры в качестве параметра и возвращает HTML- или SVG-шаблон
- defaults: object - (необязательный) конфигурация по умолчанию для создаваемой фигуры. См. полный список свойств конфигурации фигуры
- eventHandlers: object - (необязательный) добавляет пользовательские обработчики событий к HTML-элементам шаблона фигуры. Объект eventHandlers включает набор пар key:value, где:
  - key: string - имя события. Обратите внимание, что в начале имени события используется префикс 'on' (onclick, onmouseover)
  - value: object - объект, содержащий пару key:value, где
    - key — имя CSS-класса, к которому будет применён обработчик
    - value — функция, принимающая два параметра:
      - event: object - (обязательный) объект события
      - shape: object - (обязательный) объект фигуры
  Подсказка
  Рекомендуем использовать разные CSS-классы для разных пользовательских фигур при инициализации пользовательских обработчиков событий.

Пример

Добавление фигуры в Diagram
const diagram = new dhx.Diagram("diagram_container", {
    type: "org", //  или type: "default", или type: "mindmap"
    defaultShapeType: "personal",
});

diagram.data.parse(data);

diagram.addShape("personal", {
    template: ({ name, photo, post }) => (`
        <div className="dhx_diagram_template_a_box dhx_diagram_template_a">
            <div className="dhx_diagram_template_a__inside">
                <div className="dhx_diagram_template_a__picture" style={{backgroundImage: 'url(${photo})'}}></div>
                <div className="dhx_diagram_template_a__body">
                    <div className="dhx_diagram_template_a__title">${name}</div>
                    <div className="dhx_diagram_template_a__row">
                        <span className="dhx_diagram_template_a__text">${post}</span>
                    </div>
                </div>
                <div className="toggle--open-menu">
                    <span className="dhx_diagram_template_a__icon mdi mdi-dots-vertical"></span>
                </div>
            </div>
        </div>
    `),
    defaults: {
        height: 115, width: 330,
        name: "Name and First name",
        post: "Resident",
        photo: "",
    },
    eventHandlers: {
        onclick: {
            "toggle--open-menu": () => console.log("open menu")
        }
    }
});

Связанный пример: Diagram с редактором. Режим организационной диаграммы. Настройка карточек, editbar и панели инструментов

В примере ниже показано, как добавить пользовательскую фигуру в Diagram Editor, а также настроить панели Shapebar и Editbar редактора. Настройка пользовательской фигуры в editbar редактора реализована через свойство properties панели Editbar.

Добавление фигуры в Diagram Editor
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"
    }
});

Журнал изменений: атрибут properties удалён в v6.0.

Полезная статья: Пользовательская фигура

Связанные примеры:

Описание​

Использование​

Параметры​

Пример​

Описание

Использование

Параметры

Пример