sequential-workflow-designer 0.18.4 → 0.19.0

package/lib/esm/index.js

@@ -193,8 +193,8 @@ function race(timeout, a, b, c) {
 }
 
 class ControlBarApi {
-    static create(state, historyController, definitionModifier, viewportApi) {
-        const api = new ControlBarApi(state, historyController, definitionModifier, viewportApi);
+    static create(state, historyController, stateModifier, viewportApi) {
+        const api = new ControlBarApi(state, historyController, stateModifier, viewportApi);
         state.onIsReadonlyChanged.subscribe(api.onStateChanged.forward);
         state.onSelectedStepIdChanged.subscribe(api.onStateChanged.forward);
         state.onIsDragDisabledChanged.subscribe(api.onStateChanged.forward);
@@ -203,19 +203,13 @@ class ControlBarApi {
         }
         return api;
     }
-    constructor(state, historyController, definitionModifier, viewportApi) {
+    constructor(state, historyController, stateModifier, viewportApi) {
         this.state = state;
         this.historyController = historyController;
-        this.definitionModifier = definitionModifier;
+        this.stateModifier = stateModifier;
         this.viewportApi = viewportApi;
         this.onStateChanged = new SimpleEvent();
     }
-    /**
-     * @deprecated Don't use this method
-     */
-    subscribe(handler) {
-        this.onStateChanged.subscribe(handler);
-    }
     resetViewport() {
         this.viewportApi.resetViewport();
     }
@@ -256,7 +250,7 @@ class ControlBarApi {
     }
     tryDelete() {
         if (this.canDelete() && this.state.selectedStepId) {
-            this.definitionModifier.tryDelete(this.state.selectedStepId);
+            this.stateModifier.tryDelete(this.state.selectedStepId);
             return true;
         }
         return false;
@@ -265,7 +259,7 @@ class ControlBarApi {
         return (!!this.state.selectedStepId &&
             !this.state.isReadonly &&
             !this.state.isDragging &&
-            this.definitionModifier.isDeletable(this.state.selectedStepId));
+            this.stateModifier.isDeletable(this.state.selectedStepId));
     }
 }
 
@@ -286,29 +280,30 @@ var DefinitionChangeType;
 })(DefinitionChangeType || (DefinitionChangeType = {}));
 
 class EditorRenderer {
-    static create(state, definitionWalker, handler) {
-        const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged, state.onIsReadonlyChanged);
-        const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
+    static create(state, selectedStepIdProvider, definitionWalker, handler) {
+        const raceEvent = race(0, state.onDefinitionChanged, selectedStepIdProvider.onSelectedStepIdChanged, state.onIsReadonlyChanged);
+        const listener = new EditorRenderer(state, selectedStepIdProvider, definitionWalker, handler, raceEvent);
         raceEvent.subscribe(listener.raceEventHandler);
-        listener.renderIfStepChanged(state.selectedStepId);
+        listener.renderIfStepChanged(selectedStepIdProvider.selectedStepId);
         return listener;
     }
-    constructor(state, definitionWalker, handler, raceEvent) {
+    constructor(state, selectedStepIdProvider, definitionWalker, handler, raceEvent) {
         this.state = state;
+        this.selectedStepIdProvider = selectedStepIdProvider;
         this.definitionWalker = definitionWalker;
         this.handler = handler;
         this.raceEvent = raceEvent;
         this.currentStepId = undefined;
         this.raceEventHandler = ([definitionChanged, selectedStepId, isReadonlyChanged]) => {
             if (isReadonlyChanged !== undefined) {
-                this.render(this.state.selectedStepId);
+                this.render(this.selectedStepIdProvider.selectedStepId);
             }
             else if (definitionChanged) {
                 if (definitionChanged.changeType === DefinitionChangeType.rootReplaced) {
-                    this.render(this.state.selectedStepId);
+                    this.render(this.selectedStepIdProvider.selectedStepId);
                 }
                 else {
-                    this.renderIfStepChanged(this.state.selectedStepId);
+                    this.renderIfStepChanged(this.selectedStepIdProvider.selectedStepId);
                 }
             }
             else if (selectedStepId !== undefined) {
@@ -332,10 +327,10 @@ class EditorRenderer {
 }
 
 class EditorApi {
-    constructor(state, definitionWalker, definitionModifier) {
+    constructor(state, definitionWalker, stateModifier) {
         this.state = state;
         this.definitionWalker = definitionWalker;
-        this.definitionModifier = definitionModifier;
+        this.stateModifier = stateModifier;
     }
     isCollapsed() {
         return this.state.isEditorCollapsed;
@@ -352,8 +347,12 @@ class EditorApi {
     getDefinition() {
         return this.state.definition;
     }
-    runRenderer(rendererHandler) {
-        return EditorRenderer.create(this.state, this.definitionWalker, rendererHandler);
+    addDefinitionModifierDependency(dependency) {
+        this.stateModifier.addDependency(dependency);
+    }
+    runRenderer(rendererHandler, customSelectedStepIdProvider) {
+        const selectedStepIdProvider = customSelectedStepIdProvider || this.state;
+        return EditorRenderer.create(this.state, selectedStepIdProvider, this.definitionWalker, rendererHandler);
     }
     createStepEditorContext(stepId) {
         if (!stepId) {
@@ -368,7 +367,7 @@ class EditorApi {
             },
             notifyChildrenChanged: () => {
                 this.state.notifyDefinitionChanged(DefinitionChangeType.stepChildrenChanged, stepId);
-                this.definitionModifier.updateDependantFields();
+                this.stateModifier.updateDependencies();
             }
         };
     }
@@ -387,12 +386,6 @@ class PathBarApi {
         this.definitionWalker = definitionWalker;
         this.onStateChanged = race(0, this.state.onFolderPathChanged, this.state.onDefinitionChanged);
     }
-    /**
-     * @deprecated Don't use this method
-     */
-    subscribe(handler) {
-        this.onStateChanged.subscribe(handler);
-    }
     setFolderPath(path) {
         this.state.setFolderPath(path);
     }
@@ -473,14 +466,14 @@ class PlaceholderFinder {
 class DragStepBehavior {
     static create(designerContext, step, draggedStepComponent) {
         const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
-        return new DragStepBehavior(view, designerContext.workspaceController, designerContext.state, step, designerContext.definitionModifier, draggedStepComponent);
+        return new DragStepBehavior(view, designerContext.workspaceController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
     }
-    constructor(view, workspaceController, designerState, step, definitionModifier, draggedStepComponent) {
+    constructor(view, workspaceController, designerState, step, stateModifier, draggedStepComponent) {
         this.view = view;
         this.workspaceController = workspaceController;
         this.designerState = designerState;
         this.step = step;
-        this.definitionModifier = definitionModifier;
+        this.stateModifier = stateModifier;
         this.draggedStepComponent = draggedStepComponent;
     }
     onStart(position) {
@@ -535,10 +528,10 @@ class DragStepBehavior {
         let modified = false;
         if (!interrupt && this.currentPlaceholder) {
             if (this.draggedStepComponent) {
-                modified = this.definitionModifier.tryMove(this.draggedStepComponent.parentSequence, this.draggedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
+                modified = this.stateModifier.tryMove(this.draggedStepComponent.parentSequence, this.draggedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
             }
             else {
-                modified = this.definitionModifier.tryInsert(this.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
+                modified = this.stateModifier.tryInsert(this.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
             }
         }
         if (!modified) {
@@ -711,15 +704,16 @@ class DesignerApi {
         const viewportController = context.services.viewportController.create(workspace);
         const viewport = new ViewportApi(context.workspaceController, viewportController);
         const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
-        return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
+        return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker);
     }
-    constructor(controlBar, toolbox, editor, workspace, viewport, pathBar) {
+    constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker) {
         this.controlBar = controlBar;
         this.toolbox = toolbox;
         this.editor = editor;
         this.workspace = workspace;
         this.viewport = viewport;
         this.pathBar = pathBar;
+        this.definitionWalker = definitionWalker;
     }
 }
 
@@ -966,6 +960,34 @@ class ComponentContext {
     }
 }
 
+class CustomActionController {
+    constructor(configuration, state) {
+        this.configuration = configuration;
+        this.state = state;
+    }
+    trigger(action, step, sequence) {
+        const handler = this.configuration.customActionHandler;
+        if (!handler) {
+            console.warn(`Custom action handler is not defined (action type: ${action.type})`);
+            return;
+        }
+        const context = {
+            notifyStepNameChanged: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepNameChanged, stepId),
+            notifyStepPropertiesChanged: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepPropertyChanged, stepId),
+            notifyStepInserted: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepInserted, stepId),
+            notifyStepMoved: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepMoved, stepId),
+            notifyStepDeleted: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepDeleted, stepId)
+        };
+        handler(action, step, sequence, context);
+    }
+    notifyStepChanged(changeType, stepId) {
+        if (!stepId) {
+            throw new Error('Step id is empty');
+        }
+        this.state.notifyDefinitionChanged(changeType, stepId);
+    }
+}
+
 class EditorView {
     static create(parent) {
         return new EditorView(parent);
@@ -993,7 +1015,7 @@ class EditorView {
 }
 
 class Editor {
-    static create(parent, api, stepEditorClassName, stepEditorProvider, rootEditorClassName, rootEditorProvider) {
+    static create(parent, api, stepEditorClassName, stepEditorProvider, rootEditorClassName, rootEditorProvider, customSelectedStepIdProvider) {
         const view = EditorView.create(parent);
         function render(step) {
             const definition = api.getDefinition();
@@ -1011,7 +1033,7 @@ class Editor {
             }
             view.setContent(content, className);
         }
-        const renderer = api.runRenderer(step => render(step));
+        const renderer = api.runRenderer(step => render(step), customSelectedStepIdProvider);
         return new Editor(view, renderer);
     }
     constructor(view, renderer) {
@@ -2079,11 +2101,73 @@ class StepDuplicator {
     }
 }
 
-class DefinitionModifier {
-    constructor(definitionWalker, state, configuration) {
+class FolderPathDefinitionModifierDependency {
+    constructor(state, definitionWalker) {
+        this.state = state;
+        this.definitionWalker = definitionWalker;
+    }
+    update() {
+        for (let index = 0; index < this.state.folderPath.length; index++) {
+            const stepId = this.state.folderPath[index];
+            const found = this.definitionWalker.findById(this.state.definition, stepId);
+            if (!found) {
+                // We need to update path if any folder is deleted.
+                const newPath = this.state.folderPath.slice(0, index);
+                this.state.setFolderPath(newPath);
+                break;
+            }
+        }
+    }
+}
+
+class SelectedStepIdDefinitionModifierDependency {
+    constructor(state, definitionWalker) {
+        this.state = state;
+        this.definitionWalker = definitionWalker;
+    }
+    update() {
+        if (this.state.selectedStepId) {
+            const found = this.definitionWalker.findById(this.state.definition, this.state.selectedStepId);
+            if (!found) {
+                // We need to unselect step when it's deleted.
+                this.state.setSelectedStepId(null);
+            }
+        }
+    }
+}
+
+class StateModifier {
+    static create(definitionWalker, state, configuration) {
+        const dependencies = [];
+        dependencies.push(new SelectedStepIdDefinitionModifierDependency(state, definitionWalker));
+        dependencies.push(new FolderPathDefinitionModifierDependency(state, definitionWalker));
+        return new StateModifier(definitionWalker, state, configuration, dependencies);
+    }
+    constructor(definitionWalker, state, configuration, dependencies) {
         this.definitionWalker = definitionWalker;
         this.state = state;
         this.configuration = configuration;
+        this.dependencies = dependencies;
+    }
+    addDependency(dependency) {
+        this.dependencies.push(dependency);
+    }
+    isSelectable(step, parentSequence) {
+        return this.configuration.steps.isSelectable ? this.configuration.steps.isSelectable(step, parentSequence) : true;
+    }
+    trySelectStep(step, parentSequence) {
+        if (this.isSelectable(step, parentSequence)) {
+            this.state.setSelectedStepId(step.id);
+        }
+    }
+    trySelectStepById(stepId) {
+        if (this.configuration.steps.isSelectable) {
+            const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
+            this.trySelectStep(result.step, result.parentSequence);
+        }
+        else {
+            this.state.setSelectedStepId(stepId);
+        }
     }
     isDeletable(stepId) {
         if (this.configuration.steps.isDeletable) {
@@ -2102,7 +2186,7 @@ class DefinitionModifier {
         }
         SequenceModifier.deleteStep(result.step, result.parentSequence);
         this.state.notifyDefinitionChanged(DefinitionChangeType.stepDeleted, result.step.id);
-        this.updateDependantFields();
+        this.updateDependencies();
         return true;
     }
     tryInsert(step, targetSequence, targetIndex) {
@@ -2115,7 +2199,7 @@ class DefinitionModifier {
         SequenceModifier.insertStep(step, targetSequence, targetIndex);
         this.state.notifyDefinitionChanged(DefinitionChangeType.stepInserted, step.id);
         if (!this.configuration.steps.isAutoSelectDisabled) {
-            this.state.setSelectedStepId(step.id);
+            this.trySelectStepById(step.id);
         }
         return true;
     }
@@ -2136,7 +2220,7 @@ class DefinitionModifier {
         apply();
         this.state.notifyDefinitionChanged(DefinitionChangeType.stepMoved, step.id);
         if (!this.configuration.steps.isAutoSelectDisabled) {
-            this.state.setSelectedStepId(step.id);
+            this.trySelectStep(step, targetSequence);
         }
         return true;
     }
@@ -2155,26 +2239,10 @@ class DefinitionModifier {
             throw new Error('Definition is empty');
         }
         this.state.setDefinition(definition);
-        this.updateDependantFields();
+        this.updateDependencies();
     }
-    updateDependantFields() {
-        if (this.state.selectedStepId) {
-            const found = this.definitionWalker.findById(this.state.definition, this.state.selectedStepId);
-            if (!found) {
-                // We need to unselect step when it's deleted.
-                this.state.setSelectedStepId(null);
-            }
-        }
-        for (let index = 0; index < this.state.folderPath.length; index++) {
-            const stepId = this.state.folderPath[index];
-            const found = this.definitionWalker.findById(this.state.definition, stepId);
-            if (!found) {
-                // We need to update path if any folder is deleted.
-                const newPath = this.state.folderPath.slice(0, index);
-                this.state.setFolderPath(newPath);
-                break;
-            }
-        }
+    updateDependencies() {
+        this.dependencies.forEach(dependency => dependency.update());
     }
 }
 
@@ -2261,7 +2329,7 @@ class DesignerState {
 }
 
 class HistoryController {
-    static create(initialStack, state, definitionModifier, configuration) {
+    static create(initialStack, state, stateModifier, configuration) {
         if (!configuration.undoStackSize || configuration.undoStackSize < 1) {
             throw new Error('Invalid undo stack size');
         }
@@ -2269,7 +2337,7 @@ class HistoryController {
             index: 0,
             items: []
         };
-        const controller = new HistoryController(stack, state, definitionModifier, configuration.undoStackSize);
+        const controller = new HistoryController(stack, state, stateModifier, configuration.undoStackSize);
         if (!initialStack) {
             controller.rememberCurrent(DefinitionChangeType.rootReplaced, null);
         }
@@ -2280,10 +2348,10 @@ class HistoryController {
         });
         return controller;
     }
-    constructor(stack, state, definitionModifier, stackSize) {
+    constructor(stack, state, stateModifier, stackSize) {
         this.stack = stack;
         this.state = state;
-        this.definitionModifier = definitionModifier;
+        this.stateModifier = stateModifier;
         this.stackSize = stackSize;
     }
     canUndo() {
@@ -2335,7 +2403,7 @@ class HistoryController {
     }
     commit() {
         const definition = ObjectCloner.deepClone(this.stack.items[this.stack.index - 1].definition);
-        this.definitionModifier.replaceDefinition(definition);
+        this.stateModifier.replaceDefinition(definition);
     }
 }
 function areItemsEqual(item, changeType, stepId) {
@@ -2402,27 +2470,29 @@ class DesignerContext {
         const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
         const workspaceController = new WorkspaceControllerWrapper();
         const behaviorController = new BehaviorController();
+        const customActionController = new CustomActionController(configuration, state);
         const stepExtensionResolver = StepExtensionResolver.create(services);
         const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
-        const definitionModifier = new DefinitionModifier(definitionWalker, state, configuration);
+        const stateModifier = StateModifier.create(definitionWalker, state, configuration);
         let historyController = undefined;
         if (configuration.undoStackSize) {
-            historyController = HistoryController.create(configuration.undoStack, state, definitionModifier, configuration);
+            historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
         }
         const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, services);
-        return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, definitionModifier, layoutController, workspaceController, behaviorController, historyController);
+        return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController);
     }
-    constructor(theme, state, configuration, services, componentContext, definitionWalker, definitionModifier, layoutController, workspaceController, behaviorController, historyController) {
+    constructor(theme, state, configuration, services, componentContext, definitionWalker, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
         this.theme = theme;
         this.state = state;
         this.configuration = configuration;
         this.services = services;
         this.componentContext = componentContext;
         this.definitionWalker = definitionWalker;
-        this.definitionModifier = definitionModifier;
+        this.stateModifier = stateModifier;
         this.layoutController = layoutController;
         this.workspaceController = workspaceController;
         this.behaviorController = behaviorController;
+        this.customActionController = customActionController;
         this.historyController = historyController;
     }
     setWorkspaceController(controller) {
@@ -2568,18 +2638,24 @@ class WorkspaceView {
 }
 
 class MoveViewportBehavior {
-    static create(state, resetSelectedStep) {
-        return new MoveViewportBehavior(state.viewport.position, resetSelectedStep, state);
+    static create(resetSelectedStep, context) {
+        return new MoveViewportBehavior(context.state.viewport.position, resetSelectedStep, context.state, context.stateModifier);
     }
-    constructor(startPosition, resetSelectedStep, state) {
+    constructor(startPosition, resetSelectedStep, state, stateModifier) {
         this.startPosition = startPosition;
         this.resetSelectedStep = resetSelectedStep;
         this.state = state;
+        this.stateModifier = stateModifier;
     }
     onStart() {
         if (this.resetSelectedStep) {
-            const stepId = this.state.tryGetLastStepIdFromFolderPath();
-            this.state.setSelectedStepId(stepId);
+            const stepIdOrNull = this.state.tryGetLastStepIdFromFolderPath();
+            if (stepIdOrNull) {
+                this.stateModifier.trySelectStepById(stepIdOrNull);
+            }
+            else {
+                this.state.setSelectedStepId(null);
+            }
         }
     }
     onMove(delta) {
@@ -2597,14 +2673,15 @@ class SelectStepBehavior {
     static create(pressedStepComponent, isMiddleButton, context) {
         const isDragDisabled = isMiddleButton ||
             context.state.isDragDisabled ||
-            !context.definitionModifier.isDraggable(pressedStepComponent.step, pressedStepComponent.parentSequence);
-        return new SelectStepBehavior(pressedStepComponent, isDragDisabled, context, context.state);
+            !context.stateModifier.isDraggable(pressedStepComponent.step, pressedStepComponent.parentSequence);
+        return new SelectStepBehavior(pressedStepComponent, isDragDisabled, context.state, context.stateModifier, context);
     }
-    constructor(pressedStepComponent, isDragDisabled, context, state) {
+    constructor(pressedStepComponent, isDragDisabled, state, stateModifier, context) {
         this.pressedStepComponent = pressedStepComponent;
         this.isDragDisabled = isDragDisabled;
-        this.context = context;
         this.state = state;
+        this.stateModifier = stateModifier;
+        this.context = context;
     }
     onStart() {
         // Nothing to do.
@@ -2617,13 +2694,13 @@ class SelectStepBehavior {
                 return DragStepBehavior.create(this.context, this.pressedStepComponent.step, this.pressedStepComponent);
             }
             else {
-                return MoveViewportBehavior.create(this.state, false);
+                return MoveViewportBehavior.create(false, this.context);
             }
         }
     }
     onEnd(interrupt) {
         if (!interrupt) {
-            this.state.setSelectedStepId(this.pressedStepComponent.step.id);
+            this.stateModifier.trySelectStep(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence);
         }
     }
 }
@@ -2670,54 +2747,32 @@ class OpenFolderPressingBehaviorHandler {
 }
 
 class TriggerCustomActionPressingBehaviorHandler {
-    constructor(command, designerContext) {
+    constructor(command, customActionController) {
         this.command = command;
-        this.designerContext = designerContext;
+        this.customActionController = customActionController;
     }
     handle() {
-        const customActionHandler = this.designerContext.configuration.customActionHandler;
-        if (!customActionHandler) {
-            console.warn(`Custom action handler is not defined (action type: ${this.command.action.type})`);
-            return;
-        }
-        const context = this.createContext();
-        customActionHandler(this.command.action, this.command.step, this.command.sequence, context);
-    }
-    createContext() {
-        return {
-            notifyStepNameChanged: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepNameChanged, stepId),
-            notifyStepPropertiesChanged: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepPropertyChanged, stepId),
-            notifyStepInserted: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepInserted, stepId),
-            notifyStepMoved: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepMoved, stepId),
-            notifyStepDeleted: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepDeleted, stepId)
-        };
-    }
-    notifyStepChanged(changeType, stepId) {
-        if (!stepId) {
-            throw new Error('Step id is empty');
-        }
-        this.designerContext.state.notifyDefinitionChanged(changeType, stepId);
+        this.customActionController.trigger(this.command.action, this.command.step, this.command.sequence);
     }
 }
 
 class ClickBehaviorResolver {
-    constructor(designerContext, state) {
-        this.designerContext = designerContext;
-        this.state = state;
+    constructor(context) {
+        this.context = context;
     }
     resolve(commandOrNull, element, isMiddleButton) {
         if (!commandOrNull) {
-            return MoveViewportBehavior.create(this.state, !isMiddleButton);
+            return MoveViewportBehavior.create(!isMiddleButton, this.context);
         }
         switch (commandOrNull.type) {
             case ClickCommandType.selectStep:
-                return SelectStepBehavior.create(commandOrNull.component, isMiddleButton, this.designerContext);
+                return SelectStepBehavior.create(commandOrNull.component, isMiddleButton, this.context);
             case ClickCommandType.rerenderStep:
-                return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.designerContext));
+                return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.context));
             case ClickCommandType.openFolder:
-                return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.designerContext));
+                return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.context));
             case ClickCommandType.triggerCustomAction:
-                return PressingBehavior.create(element, new TriggerCustomActionPressingBehaviorHandler(commandOrNull, this.designerContext));
+                return PressingBehavior.create(element, new TriggerCustomActionPressingBehaviorHandler(commandOrNull, this.context.customActionController));
             default:
                 throw new Error('Not supported behavior type');
         }
@@ -2744,12 +2799,12 @@ class ContextMenu {
         for (let index = 0; index < items.length; index++) {
             const item = items[index];
             const element = document.createElement('div');
-            if (typeof item === 'string') {
-                element.className = 'sqd-context-menu-group';
-                element.innerText = item;
+            if (item.callback) {
+                element.className = 'sqd-context-menu-item';
+                element.innerText = item.label;
             }
             else {
-                element.className = 'sqd-context-menu-item';
+                element.className = 'sqd-context-menu-group';
                 element.innerText = item.label;
             }
             elements.push(element);
@@ -2790,7 +2845,7 @@ class ContextMenu {
                 const index = this.findIndex(e.target);
                 if (index !== null) {
                     const item = this.items[index];
-                    if (typeof item !== 'string') {
+                    if (item.callback) {
                         item.callback();
                     }
                 }
@@ -2820,91 +2875,122 @@ class ContextMenu {
     }
 }
 
+class ContextMenuController {
+    constructor(theme, configuration, itemsBuilder) {
+        this.theme = theme;
+        this.configuration = configuration;
+        this.itemsBuilder = itemsBuilder;
+    }
+    tryOpen(position, commandOrNull) {
+        if (this.configuration.contextMenu === false) {
+            // Context menu is disabled.
+            return;
+        }
+        if (this.current) {
+            this.current.tryDestroy();
+        }
+        const items = this.itemsBuilder.build(commandOrNull);
+        this.current = ContextMenu.create(position, this.theme, items);
+    }
+    destroy() {
+        if (this.current) {
+            this.current.tryDestroy();
+        }
+    }
+}
+
 class ContextMenuItemsBuilder {
-    static build(commandOrNull, viewportApi, definitionModifier, state) {
+    constructor(viewportApi, stateModifier, state, customMenuItemsProvider) {
+        this.viewportApi = viewportApi;
+        this.stateModifier = stateModifier;
+        this.state = state;
+        this.customMenuItemsProvider = customMenuItemsProvider;
+    }
+    build(commandOrNull) {
         const items = [];
         if (commandOrNull && commandOrNull.type === ClickCommandType.selectStep) {
             const ssc = commandOrNull;
             const step = ssc.component.step;
             const parentSequence = ssc.component.parentSequence;
-            items.push(step.name);
-            if (state.selectedStepId === step.id) {
-                items.push({
-                    label: `Unselect`,
-                    callback: () => {
-                        state.setSelectedStepId(null);
-                    }
-                });
-            }
-            else {
-                items.push({
-                    label: 'Select',
-                    callback: () => {
-                        state.setSelectedStepId(step.id);
-                    }
-                });
+            items.push({
+                label: step.name,
+                order: 0
+            });
+            this.tryAppendCustomItems(items, step, parentSequence);
+            if (this.stateModifier.isSelectable(step, parentSequence)) {
+                if (this.state.selectedStepId === step.id) {
+                    items.push({
+                        label: `Unselect`,
+                        order: 10,
+                        callback: () => {
+                            this.state.setSelectedStepId(null);
+                        }
+                    });
+                }
+                else {
+                    items.push({
+                        label: 'Select',
+                        order: 20,
+                        callback: () => {
+                            this.stateModifier.trySelectStepById(step.id);
+                        }
+                    });
+                }
             }
-            if (!state.isReadonly) {
-                if (definitionModifier.isDeletable(step.id)) {
+            if (!this.state.isReadonly) {
+                if (this.stateModifier.isDeletable(step.id)) {
                     items.push({
                         label: 'Delete',
+                        order: 30,
                         callback: () => {
-                            definitionModifier.tryDelete(step.id);
+                            this.stateModifier.tryDelete(step.id);
                         }
                     });
                 }
-                if (definitionModifier.isDuplicable(step, parentSequence)) {
+                if (this.stateModifier.isDuplicable(step, parentSequence)) {
                     items.push({
                         label: 'Duplicate',
+                        order: 40,
                         callback: () => {
-                            definitionModifier.tryDuplicate(step, parentSequence);
+                            this.stateModifier.tryDuplicate(step, parentSequence);
                         }
                     });
                 }
             }
         }
+        else {
+            this.tryAppendCustomItems(items, null, this.state.definition.sequence);
+        }
         items.push({
             label: 'Reset view',
+            order: 50,
             callback: () => {
-                viewportApi.resetViewport();
+                this.viewportApi.resetViewport();
             }
         });
+        items.sort((a, b) => a.order - b.order);
         return items;
     }
-}
-
-class ContextMenuController {
-    constructor(theme, viewportApi, definitionModifier, state, configuration) {
-        this.theme = theme;
-        this.viewportApi = viewportApi;
-        this.definitionModifier = definitionModifier;
-        this.state = state;
-        this.configuration = configuration;
-    }
-    tryOpen(position, commandOrNull) {
-        if (this.configuration.contextMenu === false) {
-            // Context menu is disabled.
-            return;
-        }
-        if (this.last) {
-            this.last.tryDestroy();
-        }
-        const items = ContextMenuItemsBuilder.build(commandOrNull, this.viewportApi, this.definitionModifier, this.state);
-        this.last = ContextMenu.create(position, this.theme, items);
-    }
-    destroy() {
-        if (this.last) {
-            this.last.tryDestroy();
+    tryAppendCustomItems(items, step, parentSequence) {
+        if (this.customMenuItemsProvider) {
+            const customItems = this.customMenuItemsProvider.getItems(step, parentSequence);
+            for (const customItem of customItems) {
+                items.push(customItem);
+            }
         }
     }
 }
 
 class Workspace {
     static create(parent, designerContext, api) {
+        var _a;
         const view = WorkspaceView.create(parent, designerContext.componentContext);
-        const clickBehaviorResolver = new ClickBehaviorResolver(designerContext, designerContext.state);
+        const clickBehaviorResolver = new ClickBehaviorResolver(designerContext);
         const wheelController = designerContext.services.wheelController.create(api.workspace);
-        const contextMenuController = new ContextMenuController(designerContext.theme, api.viewport, designerContext.definitionModifier, designerContext.state, designerContext.configuration);
+        const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
+            ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
+            : undefined);
+        const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
         const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, contextMenuController, clickBehaviorResolver, api.viewport, designerContext.services);
         setTimeout(() => {
             workspace.updateRootComponent();
@@ -3392,7 +3478,7 @@ class SmartEditorView {
         if (configuration.globalEditorProvider) {
             throw new Error('globalEditorProvider is renamed to rootEditorProvider');
         }
-        const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-root-editor', configuration.rootEditorProvider);
+        const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-root-editor', configuration.rootEditorProvider, null);
         return new SmartEditorView(root, toggle, editor);
     }
     constructor(root, toggle, editor) {
@@ -4055,7 +4141,7 @@ class ServicesResolver {
     static resolve(extensions, configuration) {
         const services = {};
         merge(services, extensions || []);
-        setDefault(services, configuration);
+        setDefaults(services, configuration);
         return services;
     }
 }
@@ -4097,12 +4183,15 @@ function merge(services, extensions) {
         if (ext.sequenceComponent) {
             services.sequenceComponent = ext.sequenceComponent;
         }
+        if (ext.contextMenu) {
+            services.contextMenu = ext.contextMenu;
+        }
         if (ext.daemons) {
             services.daemons = (services.daemons || []).concat(ext.daemons);
         }
     }
 }
-function setDefault(services, configuration) {
+function setDefaults(services, configuration) {
     if (!services.steps) {
         services.steps = [];
     }
@@ -4210,7 +4299,7 @@ class Designer {
         const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
         const designerApi = DesignerApi.create(designerContext);
         const view = DesignerView.create(placeholder, designerContext, designerApi);
-        const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
+        const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);
         view.workspace.onRendered.first().then(designer.onReady.forward);
         race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
             if (definition !== undefined) {
@@ -4225,9 +4314,10 @@ class Designer {
         designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.forward);
         return designer;
     }
-    constructor(view, state, walker, historyController, api) {
+    constructor(view, state, stateModifier, walker, historyController, api) {
         this.view = view;
         this.state = state;
+        this.stateModifier = stateModifier;
         this.walker = walker;
         this.historyController = historyController;
         this.api = api;
@@ -4290,7 +4380,7 @@ class Designer {
      * @description Selects a step by the id.
      */
     selectStepById(stepId) {
-        this.state.setSelectedStepId(stepId);
+        this.stateModifier.trySelectStepById(stepId);
     }
     /**
      * @returns the current viewport.
@@ -4317,12 +4407,6 @@ class Designer {
     moveViewportToStep(stepId) {
         this.api.viewport.moveViewportToStep(stepId);
     }
-    /**
-     * @deprecated Use `moveViewportToStep` instead.
-     */
-    moveViewPortToStep(stepId) {
-        this.moveViewportToStep(stepId);
-    }
     /**
      * @description Rerender the root component and all its children.
      */
@@ -4432,11 +4516,6 @@ class StepsDesignerExtension {
     constructor(steps) {
         this.steps = steps;
     }
-}
-/**
- * @deprecated Use `StepsDesignerExtension` instead.
- */
-class StepsExtension extends StepsDesignerExtension {
 }
 
-export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ControlBarApi, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderView, RegionView, ServicesResolver, SimpleEvent, StepComponent, StepExtensionResolver, StepsDesignerExtension, StepsExtension, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
+export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ControlBarApi, CustomActionController, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderView, RegionView, ServicesResolver, SimpleEvent, StepComponent, StepExtensionResolver, StepsDesignerExtension, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };