Customizing Diagram Editor

Diagram Editor is a complex widget created with Webix Jet, the MV* framework for Webix Library. It is a ready-to-use application with minimum configuration settings but has API for redefining the logic of inner modules.

Jet App and Inner Modules

Diagram Editor is built as a Jet App and wrapped into a Webix view, so you can initialize Diagram Editor in either of the ways.

Views

The interface of Diagram Editor is split into parts (views). Each view is a class that extends the JetView class and has own handlers for setting the configuration and logic.

The sources for interface parts (Jet Views) are located in the sources/views folder.

views
  windows
    context.js
  editor.js
  ...

Go to the Class Map page to see the list of all Jet views in Diagram Editor and where they are in the interface.

Models/Services

Diagram Editor models contain the logic for working with blocks and shapes. They are defined as Jet Services.

The sources for models (Jet Services) are located in the sources/models folder.

models
  Local.js
  Style.js
  History.js

1. Local - inits and provides an access to the collection of shapes

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

2. Styles

• provides method for getting style and form defaults
• provides methods for getting blocks and links settings

const styles = $$("editor").getService("styles");
// get link config
styles.getLinkValues(link);

3. History - handles the "undo" and "redo" functionality

Service methods are called by the UI and can be called by a programmer as:

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

Customizing Views

• you can override the config() method for changes in the UI
• you can override the init() for changes in the UI and behavior
• you can override any existing method but with a caution
• you can add and call your own methods

Firstly, create you own view class and inherit it from one of the default views or from diagram.views.JetView:

class LimitedShapes extends diagram.views["shapes"] {
  config(){
    //get JSON object with configuration
    const ui = super.config();
    //exact changes depend on a particular view
    ui.width = 200;
    return ui;
  }
  init() {
    // call default logic
    super.init();
    // custom logic below
    this.doSomething();
  }
  doSomething(){
    // do something on init
  }

Secondly, replace the default view via the override map:

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

Limiting default shapes

To exclude some shapes from the default list of shapes, you need to change its JSON configuration. Namely, filter out the desired shapes:

class LimitedShapes extends diagram.views["shapes"] {
    init() {
        super.init();
 
        // exclude basic shapes from Block group: octagon, triangle, etc.
        this.$$("blockView").filter((obj) => {
            return obj.id.indexOf("gon") === -1 && obj.id.indexOf("angle") === -1;
        });
    }
}

Related sample:  Diagram Editor: Limited Shapes

In the shapes view, the localIds of the Dataviews with the shape groups correspond to group ids:

• group:"block" - this.$$("blockView")
• group:"flow" - this.$$("flowView")
• group:"common" - this.$$("commonView").
• group:"extra" (created automatically for shapes that do not belong to any group) - this.$$("ExtraView").

You can find more use cases in the How-tos article.

Notes

1. We do not recommend to remove any component from the interface as the inner logic might still try accessing it. Instead, hide the components.

class CustomShapes extends diagram.views["shapes"] {
    init(view) {
        // default logic
        super.init(view);
        // get the collapsible panel that contains a group of shapes (view name is "accordionitem")
        const block = this.$$("blockView");
        const panel = block.getParentView();
        // hide "Block" group
        panel.hide();
    }
}

2. You can access component instances within a Jet view by:

• using the $$(id) method of JetView.

It works for an inner component that is assigned the localId setting.

init() {
    // default logic
    super.init();
    // get instance of the component with "ExtraView" localId
    const form = this.$$("ExtraView");
}

• using queryView if localId is not defined.

init(view) {
    // default logic
    super.init();
    // get instance of the first button
    const button = view.queryView("button");
}

3. You can get state properties from any view or service method as:

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

Backward Compatibility

Diagram Editor is extremely flexible when it comes to customizations: you can change almost anything in it. However, keep in mind the following:

• The inner logic of Diagram Editor modules may change in future releases.
• We will try to maintain method signatures, but breaking changes might happen if they are necessary for further development of the widget.

Back to top