Кастомизация Diagram Editor

Diagram Editor это комплексный виджет, разработанный с помощью MV* фреймворка Webix Jet. Это готовое приложение с минимальной конфигурацией и специальным API для переопределения логики внутренних модулей.

Jet приложение и внутренние модули

Diagram Editor построен как Jet приложение в обёртке Webix компонента, поэтому вы можете инициализировать его любым из двух способов.

Компоненты

Интерфейс Diagram Editor разбит по частям (компонентам). Каждый компонент, это класс, который наследуется от класса JetView и имеет свои методы и конфигурацию.

Исходный код частей интерфейса (компонентов Jet) находится в папке sources/views.

views
  windows
   context.js
  editor.js
  ...

На странице карты классов представлен список используемых компонентов, а также их расположение в интерфейсе.

Модели/Сервисы

В моделях Diagram Editor описана логика для работы с блоками и фигурами. В Webix Jet модели называются сервисами.

Исходный код для моделей (сервисов Jet) находится в папке sources/models.

models
  Local.js
  Style.js
  History.js

1. Local - инициализирует сервис и обеспечивает доступ к коллекции фигур

const local = $$("editor").getService("local");
const shapes = local.shapes();

2. Styles

• предоставляет метод для получения стилей и фигур по умолчанию
• предоставляет методы для получения настроек блоков и связей

const styles = $$("editor").getService("styles");
// получаем настройки связи
styles.getLinkValues(link);

3. History - хранит логику кнопок "Undo" and "Redo"

Методы сервисов вызываются самим интерфейсом, но также могут быть вызваны программистом напрямую:

$$("editor").getService("local").shapes();

Кастомизация компонентов

• вы можете переопределять метод config() для изменений в UI
• вы можете переопределять метод init() для изменений в UI и поведении компонентов
• вы можете переопределять любой метод, но с осторожностью
• вы можете создавать и вызывать свои методы.

Для начала создайте класс, наследуя его от класса по умолчанию или от diagram.views.JetView:

class LimitedShapes extends diagram.views["shapes"] {
  config(){
    //получаем JSON объект с конфигурацией
    const ui = super.config();
    //изменения конкретного компонента
    ui.width = 200;
    return ui;
  }
  init() {
    //вызываем логику по умолчанию
    super.init();
    //а это уже пользовательский метод
    this.doSomething();
  }
  doSomething(){
    //делаем что-то при инициализации
  }
}

Затем переопределите компонент (класс) по умолчанию с помощью свойства override:

webix.ui({
    view: "diagram-editor",
    override: new Map([
      [diagram.views["shapes"], LimitedShapes]
    ]),
 
});

Как убрать встроенные фигуры

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

class LimitedShapes extends diagram.views["shapes"] {
  init() {
    super.init();
 
    // убирает основные фигуры из группы Block: octagon, triangle, и другие.
    this.$$("blockView").filter(obj => {
      return (
        obj.id.indexOf("gon") === -1 && obj.id.indexOf("angle") === -1
      );
    });
  }
}

Related sample:  Diagram Editor: Limited Shapes

Внутри компонента shapes, localId групп с фигурами совпадают с id самих групп:

• group:"block" - this.$$("blockView")
• group:"flow" - this.$$("flowView")
• group:"common" - this.$$("commonView").
• group:"extra" (по умолчанию для фигур, которые не принадлежат ни к одной из групп) - this.$$("ExtraView").

Больше примеров кастомизации смотрите в практических руководствах.

Рекомендации

1. Мы не рекомендуем удалять компоненты из интерфейса, т.к. внутренняя логика может всё ещё обращаться к ним. Вы можете скрывать компоненты.

class CustomShapes extends diagram.views["shapes"] {
  init(view) {
    //логика по умолчанию
    super.init(view);
    //получаем панель с группами фигур (компонент с именем "accordionitem")
    const block = this.$$("blockView");
    const panel = block.getParentView();
    //прячем группу "Block"
    panel.hide();
  }
}

2. Получить экземпляр компонента внутри Jet можно следующими способами:

• с помощью метода $$(id) у JetView

Метод работает для внутреннего компонента, у которого определён локальный ID (localId).

init() {
    //логика по умолчанию
    super.init();
    //получаем экземпляр компонента с localId = "ExtraView"
    const form = this.$$("ExtraView");
}

• с помощью queryView, если localId не определён

init(view) {
    //логика по умолчанию
    super.init();
    //получаем экземпляр первой кнопки
    const button = view.queryView("button");
}

3. Чтобы получить текущее состояние приложения и его реактивные свойства, воспользуйтесь одним из способов ниже:

const state = this.app.getState();
//или
const state = this.getParam("state");

Обратная совместимость

Diagram Editor - это очень гибкий виджет в отношении кастомизаций: вы можете менять в нём практически всё, что угодно. Однако следует помнить о следующих моментах:

• Внутренняя логика модулей Diagram Editor может меняться в последующих релизах.
• Мы сделаем всё, чтобы оставить сигнатуры методов без изменений, но в случае необходимости возможны критические изменения.

Наверх