sequential-workflow-designer 0.18.5 → 0.19.0

package/dist/index.umd.js

@@ -196,8 +196,8 @@
 	}
 
 	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);
@@ -206,19 +206,13 @@
 	        }
 	        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();
 	    }
@@ -259,7 +253,7 @@
 	    }
 	    tryDelete() {
 	        if (this.canDelete() && this.state.selectedStepId) {
-	            this.definitionModifier.tryDelete(this.state.selectedStepId);
+	            this.stateModifier.tryDelete(this.state.selectedStepId);
 	            return true;
 	        }
 	        return false;
@@ -268,7 +262,7 @@
 	        return (!!this.state.selectedStepId &&
 	            !this.state.isReadonly &&
 	            !this.state.isDragging &&
-	            this.definitionModifier.isDeletable(this.state.selectedStepId));
+	            this.stateModifier.isDeletable(this.state.selectedStepId));
 	    }
 	}
 
@@ -289,29 +283,30 @@
 	})(exports.DefinitionChangeType || (exports.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 === exports.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) {
@@ -335,10 +330,10 @@
 	}
 
 	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;
@@ -355,8 +350,12 @@
 	    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) {
@@ -371,7 +370,7 @@
 	            },
 	            notifyChildrenChanged: () => {
 	                this.state.notifyDefinitionChanged(exports.DefinitionChangeType.stepChildrenChanged, stepId);
-	                this.definitionModifier.updateDependantFields();
+	                this.stateModifier.updateDependencies();
 	            }
 	        };
 	    }
@@ -390,12 +389,6 @@
 	        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);
 	    }
@@ -476,14 +469,14 @@
 	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) {
@@ -538,10 +531,10 @@
 	        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) {
@@ -714,15 +707,16 @@
 	        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;
 	    }
 	}
 
@@ -969,6 +963,34 @@
 	    }
 	}
 
+	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(exports.DefinitionChangeType.stepNameChanged, stepId),
+	            notifyStepPropertiesChanged: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepPropertyChanged, stepId),
+	            notifyStepInserted: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepInserted, stepId),
+	            notifyStepMoved: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepMoved, stepId),
+	            notifyStepDeleted: (stepId) => this.notifyStepChanged(exports.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);
@@ -996,7 +1018,7 @@
 	}
 
 	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();
@@ -1014,7 +1036,7 @@
 	            }
 	            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) {
@@ -2265,11 +2287,73 @@
 	    }
 	}
 
-	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) {
@@ -2288,7 +2372,7 @@
 	        }
 	        SequenceModifier.deleteStep(result.step, result.parentSequence);
 	        this.state.notifyDefinitionChanged(exports.DefinitionChangeType.stepDeleted, result.step.id);
-	        this.updateDependantFields();
+	        this.updateDependencies();
 	        return true;
 	    }
 	    tryInsert(step, targetSequence, targetIndex) {
@@ -2301,7 +2385,7 @@
 	        SequenceModifier.insertStep(step, targetSequence, targetIndex);
 	        this.state.notifyDefinitionChanged(exports.DefinitionChangeType.stepInserted, step.id);
 	        if (!this.configuration.steps.isAutoSelectDisabled) {
-	            this.state.setSelectedStepId(step.id);
+	            this.trySelectStepById(step.id);
 	        }
 	        return true;
 	    }
@@ -2322,7 +2406,7 @@
 	        apply();
 	        this.state.notifyDefinitionChanged(exports.DefinitionChangeType.stepMoved, step.id);
 	        if (!this.configuration.steps.isAutoSelectDisabled) {
-	            this.state.setSelectedStepId(step.id);
+	            this.trySelectStep(step, targetSequence);
 	        }
 	        return true;
 	    }
@@ -2341,26 +2425,10 @@
 	            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());
 	    }
 	}
 
@@ -2447,7 +2515,7 @@
 	}
 
 	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');
 	        }
@@ -2455,7 +2523,7 @@
 	            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(exports.DefinitionChangeType.rootReplaced, null);
 	        }
@@ -2466,10 +2534,10 @@
 	        });
 	        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() {
@@ -2521,7 +2589,7 @@
 	    }
 	    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) {
@@ -2588,27 +2656,29 @@
 	        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) {
@@ -2754,18 +2824,24 @@
 	}
 
 	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) {
@@ -2783,14 +2859,15 @@
 	    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.
@@ -2803,13 +2880,13 @@
 	                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);
 	        }
 	    }
 	}
@@ -2856,54 +2933,32 @@
 	}
 
 	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(exports.DefinitionChangeType.stepNameChanged, stepId),
-	            notifyStepPropertiesChanged: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepPropertyChanged, stepId),
-	            notifyStepInserted: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepInserted, stepId),
-	            notifyStepMoved: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepMoved, stepId),
-	            notifyStepDeleted: (stepId) => this.notifyStepChanged(exports.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 exports.ClickCommandType.selectStep:
-	                return SelectStepBehavior.create(commandOrNull.component, isMiddleButton, this.designerContext);
+	                return SelectStepBehavior.create(commandOrNull.component, isMiddleButton, this.context);
 	            case exports.ClickCommandType.rerenderStep:
-	                return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.designerContext));
+	                return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.context));
 	            case exports.ClickCommandType.openFolder:
-	                return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.designerContext));
+	                return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.context));
 	            case exports.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');
 	        }
@@ -2930,12 +2985,12 @@
 	        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);
@@ -2976,7 +3031,7 @@
 	                const index = this.findIndex(e.target);
 	                if (index !== null) {
 	                    const item = this.items[index];
-	                    if (typeof item !== 'string') {
+	                    if (item.callback) {
 	                        item.callback();
 	                    }
 	                }
@@ -3006,91 +3061,122 @@
 	    }
 	}
 
+	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 === exports.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();
@@ -3578,7 +3664,7 @@
 	        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) {
@@ -4241,7 +4327,7 @@
 	    static resolve(extensions, configuration) {
 	        const services = {};
 	        merge(services, extensions || []);
-	        setDefault(services, configuration);
+	        setDefaults(services, configuration);
 	        return services;
 	    }
 	}
@@ -4283,12 +4369,15 @@
 	        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 = [];
 	    }
@@ -4396,7 +4485,7 @@
 	        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) {
@@ -4411,9 +4500,10 @@
 	        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;
@@ -4476,7 +4566,7 @@
 	     * @description Selects a step by the id.
 	     */
 	    selectStepById(stepId) {
-	        this.state.setSelectedStepId(stepId);
+	        this.stateModifier.trySelectStepById(stepId);
 	    }
 	    /**
 	     * @returns the current viewport.
@@ -4503,12 +4593,6 @@
 	    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.
 	     */
@@ -4618,11 +4702,6 @@
 	    constructor(steps) {
 	        this.steps = steps;
 	    }
-	}
-	/**
-	 * @deprecated Use `StepsDesignerExtension` instead.
-	 */
-	class StepsExtension extends StepsDesignerExtension {
 	}
 
 	exports.Badges = Badges;
@@ -4630,6 +4709,7 @@
 	exports.ClassicWheelControllerExtension = ClassicWheelControllerExtension;
 	exports.ComponentContext = ComponentContext;
 	exports.ControlBarApi = ControlBarApi;
+	exports.CustomActionController = CustomActionController;
 	exports.DefaultSequenceComponent = DefaultSequenceComponent;
 	exports.DefaultSequenceComponentView = DefaultSequenceComponentView;
 	exports.DefaultViewportController = DefaultViewportController;
@@ -4659,7 +4739,6 @@
 	exports.StepComponent = StepComponent;
 	exports.StepExtensionResolver = StepExtensionResolver;
 	exports.StepsDesignerExtension = StepsDesignerExtension;
-	exports.StepsExtension = StepsExtension;
 	exports.ToolboxApi = ToolboxApi;
 	exports.Uid = Uid;
 	exports.ValidationErrorBadgeExtension = ValidationErrorBadgeExtension;