Editors

The designer doesn't provide editors for steps. Why? Because this part usually is strongly dependent on a project type. So you must create editors by your own and set them in the start configuration.

Example

Check the Live Testing Example.

The designer supports two types of editors.

• Root editor - it appears when no step is selected. This editor should configure a global settings of your definition. You should set your configuration to the definition.properties object.
• Step editor - it appears when some step is selected. This editor can change the step's name (step.name) and step's property values (step.properties). Also, it can change children, but you must be careful and don't mix responsibilities.

To create an editor you need to create a function that returns a DOM element. Depends on the editor type, the function will receive different arguments.

const editorsConfiguration = {
  rootEditorProvider: (definition, rootContext, isReadonly) => {
    const editor = document.createElement('div');
    // ...
    input.addEventListener('changed', () => {
      definition.properties['a'] = newA;
      rootContext.notifyPropertiesChanged();
    });
    // ...
    return editor;
  },

  stepEditorProvider: (step, stepContext, definition, isReadonly) => {
    const editor = document.createElement('div');
    // ...
    input.addEventListener('changed', () => {
      step.name = newName;
      stepContext.notifyNameChanged();

      step.properties['x'] = newX;
      stepContext.notifyPropertiesChanged();

      step.branches['newBranch'] = [];
      stepContext.notifyChildrenChanged();
    });
    // ...
    return editor;
  }
}

For the root editor the function will receive a definition object and a root context object. The context contains methods to notify the designer about changes.

interface RootEditorContext {
  notifyPropertiesChanged(): void;
}

For the step editor the function will receive a step object and a step context object. The context contains methods to notify the designer about changes.

interface StepEditorContext {
  notifyNameChanged(): void;
  notifyPropertiesChanged(): void;
  notifyChildrenChanged(): void;
}

Hide Editor

If you don't need the editor you can hide it by setting the editors property to false.

const configuration = {
  editors: false,
};