npm - sequential-workflow-designer - Versions diffs - 0.19.0 → 0.19.2 - Mend

sequential-workflow-designer 0.19.0 → 0.19.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -42,6 +42,7 @@ Pro:
 * [🤩 Pro Components](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/pro-components.html)
 * [🍬 Custom Theme Flat](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-theme-flat.html)
 * [🌹 Custom Step Types](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-step-types.html)
+* [📺 Popup Editor](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/popup-editor.html)
 * [👈 Goto](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/goto.html)
 * [📁 Folders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/folders.html)
 * [⭕ Wheel Mode](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/wheel-mode.html)
@@ -98,10 +99,10 @@ Add the below code to your head section in HTML document.
 ```html
 <head>
 ...
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.0/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.0/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.0/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.0/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/dist/index.umd.js"></script>
 ```
 Call the designer by:

package/dist/index.umd.js CHANGED Viewed

@@ -964,9 +964,10 @@
 	}
 	class CustomActionController {
-	    constructor(configuration, state) {
+	    constructor(configuration, state, stateModifier) {
 	        this.configuration = configuration;
 	        this.state = state;
+	        this.stateModifier = stateModifier;
 	    }
 	    trigger(action, step, sequence) {
 	        const handler = this.configuration.customActionHandler;
@@ -974,20 +975,26 @@
 	            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)
-	        };
+	        const context = this.createCustomActionHandlerContext();
 	        handler(action, step, sequence, context);
 	    }
-	    notifyStepChanged(changeType, stepId) {
+	    createCustomActionHandlerContext() {
+	        return {
+	            notifyStepNameChanged: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepNameChanged, stepId, false),
+	            notifyStepPropertiesChanged: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepPropertyChanged, stepId, false),
+	            notifyStepInserted: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepInserted, stepId, true),
+	            notifyStepMoved: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepMoved, stepId, true),
+	            notifyStepDeleted: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepDeleted, stepId, true)
+	        };
+	    }
+	    notifyStepChanged(changeType, stepId, updateDependencies) {
 	        if (!stepId) {
 	            throw new Error('Step id is empty');
 	        }
 	        this.state.notifyDefinitionChanged(changeType, stepId);
+	        if (updateDependencies) {
+	            this.stateModifier.updateDependencies();
+	        }
 	    }
 	}
@@ -2656,10 +2663,10 @@
 	        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 stateModifier = StateModifier.create(definitionWalker, state, configuration);
+	        const customActionController = new CustomActionController(configuration, state, stateModifier);
 	        let historyController = undefined;
 	        if (configuration.undoStackSize) {
 	            historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
@@ -2788,7 +2795,7 @@
 	    bindClick(handler) {
 	        this.canvas.addEventListener('mousedown', e => {
 	            e.preventDefault();
-	            handler(readMousePosition(e), e.target, e.button);
+	            handler(readMousePosition(e), e.target, e.button, e.altKey);
 	        }, false);
 	        this.canvas.addEventListener('touchstart', e => {
 	            e.preventDefault();
@@ -2796,7 +2803,7 @@
 	            const element = document.elementFromPoint(clientPosition.x, clientPosition.y);
 	            if (element) {
 	                const position = readTouchPosition(e);
-	                handler(position, element, 0);
+	                handler(position, element, 0, false);
 	            }
 	        }, listenerOptions$1);
 	    }
@@ -2856,8 +2863,8 @@
 	}
 	class SelectStepBehavior {
-	    static create(pressedStepComponent, isMiddleButton, context) {
-	        const isDragDisabled = isMiddleButton ||
+	    static create(pressedStepComponent, forceMove, context) {
+	        const isDragDisabled = forceMove ||
 	            context.state.isDragDisabled ||
 	            !context.stateModifier.isDraggable(pressedStepComponent.step, pressedStepComponent.parentSequence);
 	        return new SelectStepBehavior(pressedStepComponent, isDragDisabled, context.state, context.stateModifier, context);
@@ -2946,13 +2953,13 @@
 	    constructor(context) {
 	        this.context = context;
 	    }
-	    resolve(commandOrNull, element, isMiddleButton) {
+	    resolve(commandOrNull, element, forceMove) {
 	        if (!commandOrNull) {
-	            return MoveViewportBehavior.create(!isMiddleButton, this.context);
+	            return MoveViewportBehavior.create(!forceMove, this.context);
 	        }
 	        switch (commandOrNull.type) {
 	            case exports.ClickCommandType.selectStep:
-	                return SelectStepBehavior.create(commandOrNull.component, isMiddleButton, this.context);
+	                return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
 	            case exports.ClickCommandType.rerenderStep:
 	                return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.context));
 	            case exports.ClickCommandType.openFolder:
@@ -3188,9 +3195,9 @@
 	        race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
 	            workspace.onStateChanged(r[0], r[1], r[2]);
 	        });
-	        view.bindClick((p, t, b) => workspace.onClick(p, t, b));
-	        view.bindWheel(e => workspace.onWheel(e));
-	        view.bindContextMenu((p, t) => workspace.onContextMenu(p, t));
+	        view.bindClick(workspace.onClick);
+	        view.bindWheel(workspace.onWheel);
+	        view.bindContextMenu(workspace.onContextMenu);
 	        return workspace;
 	    }
 	    constructor(view, definitionWalker, state, behaviorController, wheelController, contextMenuController, clickBehaviorResolver, viewportApi, services) {
@@ -3207,6 +3214,25 @@
 	        this.isValid = false;
 	        this.selectedStepComponent = null;
 	        this.validationErrorBadgeIndex = null;
+	        this.onClick = (position, target, buttonIndex, altKey) => {
+	            const isPrimaryButton = buttonIndex === 0;
+	            const isMiddleButton = buttonIndex === 1;
+	            if (isPrimaryButton || isMiddleButton) {
+	                const forceMove = isMiddleButton || altKey;
+	                const commandOrNull = this.resolveClick(target, position);
+	                const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, forceMove);
+	                this.behaviorController.start(position, behavior);
+	            }
+	        };
+	        this.onWheel = (e) => {
+	            e.preventDefault();
+	            e.stopPropagation();
+	            this.wheelController.onWheel(e);
+	        };
+	        this.onContextMenu = (position, target) => {
+	            const commandOrNull = this.resolveClick(target, position);
+	            this.contextMenuController.tryOpen(position, commandOrNull);
+	        };
 	    }
 	    updateRootComponent() {
 	        this.selectedStepComponent = null;
@@ -3271,24 +3297,6 @@
 	        this.contextMenuController.destroy();
 	        this.view.destroy();
 	    }
-	    onClick(position, target, buttonIndex) {
-	        const isPrimaryButton = buttonIndex === 0;
-	        const isMiddleButton = buttonIndex === 1;
-	        if (isPrimaryButton || isMiddleButton) {
-	            const commandOrNull = this.resolveClick(target, position);
-	            const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, isMiddleButton);
-	            this.behaviorController.start(position, behavior);
-	        }
-	    }
-	    onWheel(e) {
-	        e.preventDefault();
-	        e.stopPropagation();
-	        this.wheelController.onWheel(e);
-	    }
-	    onContextMenu(position, target) {
-	        const commandOrNull = this.resolveClick(target, position);
-	        this.contextMenuController.tryOpen(position, commandOrNull);
-	    }
 	    onIsDraggingChanged(isDragging) {
 	        this.getRootComponent().setIsDragging(isDragging);
 	    }
@@ -4437,25 +4445,19 @@
 	    }
 	}
-	function throwDepreciatedError(propertyName, groupName) {
-	    throw new Error(`The "${propertyName}" property in the "${groupName}" configuration is depreciated`);
-	}
 	function validateConfiguration(configuration) {
-	    if (configuration.controlBar === undefined) {
-	        throw new Error('The "controlBar" property is not defined in the configuration');
-	    }
-	    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-	    if (configuration.toolbox && configuration.toolbox.isHidden !== undefined) {
-	        throwDepreciatedError('isHidden', 'toolbox');
-	    }
-	    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-	    if (configuration.editors && configuration.editors.isHidden !== undefined) {
-	        throwDepreciatedError('isHidden', 'editors');
-	    }
-	    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-	    if (configuration.steps.validator) {
-	        throwDepreciatedError('validator', 'steps');
+	    const validateProperty = (key) => {
+	        if (configuration[key] === undefined) {
+	            throw new Error(`The "${key}" property is not defined in the configuration`);
+	        }
+	    };
+	    if (!configuration) {
+	        throw new Error('Configuration is not defined');
 	    }
+	    validateProperty('steps');
+	    validateProperty('toolbox');
+	    validateProperty('editors');
+	    validateProperty('controlBar');
 	}
 	class Designer {
@@ -4468,16 +4470,13 @@
 	     */
 	    static create(placeholder, startDefinition, configuration) {
 	        if (!placeholder) {
-	            throw new Error('Placeholder is not set');
+	            throw new Error('Placeholder is not defined');
 	        }
 	        if (!isElementAttached(placeholder)) {
 	            throw new Error('Placeholder is not attached to the DOM');
 	        }
 	        if (!startDefinition) {
-	            throw new Error('Start definition is not set');
-	        }
-	        if (!configuration) {
-	            throw new Error('Configuration is not set');
+	            throw new Error('Start definition is not defined');
 	        }
 	        const config = configuration;
 	        validateConfiguration(config);

package/lib/cjs/index.cjs CHANGED Viewed

@@ -962,9 +962,10 @@ class ComponentContext {
 }
 class CustomActionController {
-    constructor(configuration, state) {
+    constructor(configuration, state, stateModifier) {
         this.configuration = configuration;
         this.state = state;
+        this.stateModifier = stateModifier;
     }
     trigger(action, step, sequence) {
         const handler = this.configuration.customActionHandler;
@@ -972,20 +973,26 @@ class CustomActionController {
             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)
-        };
+        const context = this.createCustomActionHandlerContext();
         handler(action, step, sequence, context);
     }
-    notifyStepChanged(changeType, stepId) {
+    createCustomActionHandlerContext() {
+        return {
+            notifyStepNameChanged: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepNameChanged, stepId, false),
+            notifyStepPropertiesChanged: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepPropertyChanged, stepId, false),
+            notifyStepInserted: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepInserted, stepId, true),
+            notifyStepMoved: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepMoved, stepId, true),
+            notifyStepDeleted: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepDeleted, stepId, true)
+        };
+    }
+    notifyStepChanged(changeType, stepId, updateDependencies) {
         if (!stepId) {
             throw new Error('Step id is empty');
         }
         this.state.notifyDefinitionChanged(changeType, stepId);
+        if (updateDependencies) {
+            this.stateModifier.updateDependencies();
+        }
     }
 }
@@ -2471,10 +2478,10 @@ 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 sequentialWorkflowModel.DefinitionWalker();
         const stateModifier = StateModifier.create(definitionWalker, state, configuration);
+        const customActionController = new CustomActionController(configuration, state, stateModifier);
         let historyController = undefined;
         if (configuration.undoStackSize) {
             historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
@@ -2603,7 +2610,7 @@ class WorkspaceView {
     bindClick(handler) {
         this.canvas.addEventListener('mousedown', e => {
             e.preventDefault();
-            handler(readMousePosition(e), e.target, e.button);
+            handler(readMousePosition(e), e.target, e.button, e.altKey);
         }, false);
         this.canvas.addEventListener('touchstart', e => {
             e.preventDefault();
@@ -2611,7 +2618,7 @@ class WorkspaceView {
             const element = document.elementFromPoint(clientPosition.x, clientPosition.y);
             if (element) {
                 const position = readTouchPosition(e);
-                handler(position, element, 0);
+                handler(position, element, 0, false);
             }
         }, listenerOptions$1);
     }
@@ -2671,8 +2678,8 @@ class MoveViewportBehavior {
 }
 class SelectStepBehavior {
-    static create(pressedStepComponent, isMiddleButton, context) {
-        const isDragDisabled = isMiddleButton ||
+    static create(pressedStepComponent, forceMove, context) {
+        const isDragDisabled = forceMove ||
             context.state.isDragDisabled ||
             !context.stateModifier.isDraggable(pressedStepComponent.step, pressedStepComponent.parentSequence);
         return new SelectStepBehavior(pressedStepComponent, isDragDisabled, context.state, context.stateModifier, context);
@@ -2761,13 +2768,13 @@ class ClickBehaviorResolver {
     constructor(context) {
         this.context = context;
     }
-    resolve(commandOrNull, element, isMiddleButton) {
+    resolve(commandOrNull, element, forceMove) {
         if (!commandOrNull) {
-            return MoveViewportBehavior.create(!isMiddleButton, this.context);
+            return MoveViewportBehavior.create(!forceMove, this.context);
         }
         switch (commandOrNull.type) {
             case exports.ClickCommandType.selectStep:
-                return SelectStepBehavior.create(commandOrNull.component, isMiddleButton, this.context);
+                return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
             case exports.ClickCommandType.rerenderStep:
                 return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.context));
             case exports.ClickCommandType.openFolder:
@@ -3003,9 +3010,9 @@ class Workspace {
         race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
             workspace.onStateChanged(r[0], r[1], r[2]);
         });
-        view.bindClick((p, t, b) => workspace.onClick(p, t, b));
-        view.bindWheel(e => workspace.onWheel(e));
-        view.bindContextMenu((p, t) => workspace.onContextMenu(p, t));
+        view.bindClick(workspace.onClick);
+        view.bindWheel(workspace.onWheel);
+        view.bindContextMenu(workspace.onContextMenu);
         return workspace;
     }
     constructor(view, definitionWalker, state, behaviorController, wheelController, contextMenuController, clickBehaviorResolver, viewportApi, services) {
@@ -3022,6 +3029,25 @@ class Workspace {
         this.isValid = false;
         this.selectedStepComponent = null;
         this.validationErrorBadgeIndex = null;
+        this.onClick = (position, target, buttonIndex, altKey) => {
+            const isPrimaryButton = buttonIndex === 0;
+            const isMiddleButton = buttonIndex === 1;
+            if (isPrimaryButton || isMiddleButton) {
+                const forceMove = isMiddleButton || altKey;
+                const commandOrNull = this.resolveClick(target, position);
+                const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, forceMove);
+                this.behaviorController.start(position, behavior);
+            }
+        };
+        this.onWheel = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.wheelController.onWheel(e);
+        };
+        this.onContextMenu = (position, target) => {
+            const commandOrNull = this.resolveClick(target, position);
+            this.contextMenuController.tryOpen(position, commandOrNull);
+        };
     }
     updateRootComponent() {
         this.selectedStepComponent = null;
@@ -3086,24 +3112,6 @@ class Workspace {
         this.contextMenuController.destroy();
         this.view.destroy();
     }
-    onClick(position, target, buttonIndex) {
-        const isPrimaryButton = buttonIndex === 0;
-        const isMiddleButton = buttonIndex === 1;
-        if (isPrimaryButton || isMiddleButton) {
-            const commandOrNull = this.resolveClick(target, position);
-            const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, isMiddleButton);
-            this.behaviorController.start(position, behavior);
-        }
-    }
-    onWheel(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.wheelController.onWheel(e);
-    }
-    onContextMenu(position, target) {
-        const commandOrNull = this.resolveClick(target, position);
-        this.contextMenuController.tryOpen(position, commandOrNull);
-    }
     onIsDraggingChanged(isDragging) {
         this.getRootComponent().setIsDragging(isDragging);
     }
@@ -4252,25 +4260,19 @@ function setDefaults(services, configuration) {
     }
 }
-function throwDepreciatedError(propertyName, groupName) {
-    throw new Error(`The "${propertyName}" property in the "${groupName}" configuration is depreciated`);
-}
 function validateConfiguration(configuration) {
-    if (configuration.controlBar === undefined) {
-        throw new Error('The "controlBar" property is not defined in the configuration');
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if (configuration.toolbox && configuration.toolbox.isHidden !== undefined) {
-        throwDepreciatedError('isHidden', 'toolbox');
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if (configuration.editors && configuration.editors.isHidden !== undefined) {
-        throwDepreciatedError('isHidden', 'editors');
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if (configuration.steps.validator) {
-        throwDepreciatedError('validator', 'steps');
+    const validateProperty = (key) => {
+        if (configuration[key] === undefined) {
+            throw new Error(`The "${key}" property is not defined in the configuration`);
+        }
+    };
+    if (!configuration) {
+        throw new Error('Configuration is not defined');
     }
+    validateProperty('steps');
+    validateProperty('toolbox');
+    validateProperty('editors');
+    validateProperty('controlBar');
 }
 class Designer {
@@ -4283,16 +4285,13 @@ class Designer {
      */
     static create(placeholder, startDefinition, configuration) {
         if (!placeholder) {
-            throw new Error('Placeholder is not set');
+            throw new Error('Placeholder is not defined');
         }
         if (!isElementAttached(placeholder)) {
             throw new Error('Placeholder is not attached to the DOM');
         }
         if (!startDefinition) {
-            throw new Error('Start definition is not set');
-        }
-        if (!configuration) {
-            throw new Error('Configuration is not set');
+            throw new Error('Start definition is not defined');
         }
         const config = configuration;
         validateConfiguration(config);

package/lib/esm/index.js CHANGED Viewed

@@ -961,9 +961,10 @@ class ComponentContext {
 }
 class CustomActionController {
-    constructor(configuration, state) {
+    constructor(configuration, state, stateModifier) {
         this.configuration = configuration;
         this.state = state;
+        this.stateModifier = stateModifier;
     }
     trigger(action, step, sequence) {
         const handler = this.configuration.customActionHandler;
@@ -971,20 +972,26 @@ class CustomActionController {
             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)
-        };
+        const context = this.createCustomActionHandlerContext();
         handler(action, step, sequence, context);
     }
-    notifyStepChanged(changeType, stepId) {
+    createCustomActionHandlerContext() {
+        return {
+            notifyStepNameChanged: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepNameChanged, stepId, false),
+            notifyStepPropertiesChanged: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepPropertyChanged, stepId, false),
+            notifyStepInserted: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepInserted, stepId, true),
+            notifyStepMoved: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepMoved, stepId, true),
+            notifyStepDeleted: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepDeleted, stepId, true)
+        };
+    }
+    notifyStepChanged(changeType, stepId, updateDependencies) {
         if (!stepId) {
             throw new Error('Step id is empty');
         }
         this.state.notifyDefinitionChanged(changeType, stepId);
+        if (updateDependencies) {
+            this.stateModifier.updateDependencies();
+        }
     }
 }
@@ -2470,10 +2477,10 @@ 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 stateModifier = StateModifier.create(definitionWalker, state, configuration);
+        const customActionController = new CustomActionController(configuration, state, stateModifier);
         let historyController = undefined;
         if (configuration.undoStackSize) {
             historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
@@ -2602,7 +2609,7 @@ class WorkspaceView {
     bindClick(handler) {
         this.canvas.addEventListener('mousedown', e => {
             e.preventDefault();
-            handler(readMousePosition(e), e.target, e.button);
+            handler(readMousePosition(e), e.target, e.button, e.altKey);
         }, false);
         this.canvas.addEventListener('touchstart', e => {
             e.preventDefault();
@@ -2610,7 +2617,7 @@ class WorkspaceView {
             const element = document.elementFromPoint(clientPosition.x, clientPosition.y);
             if (element) {
                 const position = readTouchPosition(e);
-                handler(position, element, 0);
+                handler(position, element, 0, false);
             }
         }, listenerOptions$1);
     }
@@ -2670,8 +2677,8 @@ class MoveViewportBehavior {
 }
 class SelectStepBehavior {
-    static create(pressedStepComponent, isMiddleButton, context) {
-        const isDragDisabled = isMiddleButton ||
+    static create(pressedStepComponent, forceMove, context) {
+        const isDragDisabled = forceMove ||
             context.state.isDragDisabled ||
             !context.stateModifier.isDraggable(pressedStepComponent.step, pressedStepComponent.parentSequence);
         return new SelectStepBehavior(pressedStepComponent, isDragDisabled, context.state, context.stateModifier, context);
@@ -2760,13 +2767,13 @@ class ClickBehaviorResolver {
     constructor(context) {
         this.context = context;
     }
-    resolve(commandOrNull, element, isMiddleButton) {
+    resolve(commandOrNull, element, forceMove) {
         if (!commandOrNull) {
-            return MoveViewportBehavior.create(!isMiddleButton, this.context);
+            return MoveViewportBehavior.create(!forceMove, this.context);
         }
         switch (commandOrNull.type) {
             case ClickCommandType.selectStep:
-                return SelectStepBehavior.create(commandOrNull.component, isMiddleButton, this.context);
+                return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
             case ClickCommandType.rerenderStep:
                 return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.context));
             case ClickCommandType.openFolder:
@@ -3002,9 +3009,9 @@ class Workspace {
         race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
             workspace.onStateChanged(r[0], r[1], r[2]);
         });
-        view.bindClick((p, t, b) => workspace.onClick(p, t, b));
-        view.bindWheel(e => workspace.onWheel(e));
-        view.bindContextMenu((p, t) => workspace.onContextMenu(p, t));
+        view.bindClick(workspace.onClick);
+        view.bindWheel(workspace.onWheel);
+        view.bindContextMenu(workspace.onContextMenu);
         return workspace;
     }
     constructor(view, definitionWalker, state, behaviorController, wheelController, contextMenuController, clickBehaviorResolver, viewportApi, services) {
@@ -3021,6 +3028,25 @@ class Workspace {
         this.isValid = false;
         this.selectedStepComponent = null;
         this.validationErrorBadgeIndex = null;
+        this.onClick = (position, target, buttonIndex, altKey) => {
+            const isPrimaryButton = buttonIndex === 0;
+            const isMiddleButton = buttonIndex === 1;
+            if (isPrimaryButton || isMiddleButton) {
+                const forceMove = isMiddleButton || altKey;
+                const commandOrNull = this.resolveClick(target, position);
+                const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, forceMove);
+                this.behaviorController.start(position, behavior);
+            }
+        };
+        this.onWheel = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.wheelController.onWheel(e);
+        };
+        this.onContextMenu = (position, target) => {
+            const commandOrNull = this.resolveClick(target, position);
+            this.contextMenuController.tryOpen(position, commandOrNull);
+        };
     }
     updateRootComponent() {
         this.selectedStepComponent = null;
@@ -3085,24 +3111,6 @@ class Workspace {
         this.contextMenuController.destroy();
         this.view.destroy();
     }
-    onClick(position, target, buttonIndex) {
-        const isPrimaryButton = buttonIndex === 0;
-        const isMiddleButton = buttonIndex === 1;
-        if (isPrimaryButton || isMiddleButton) {
-            const commandOrNull = this.resolveClick(target, position);
-            const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, isMiddleButton);
-            this.behaviorController.start(position, behavior);
-        }
-    }
-    onWheel(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.wheelController.onWheel(e);
-    }
-    onContextMenu(position, target) {
-        const commandOrNull = this.resolveClick(target, position);
-        this.contextMenuController.tryOpen(position, commandOrNull);
-    }
     onIsDraggingChanged(isDragging) {
         this.getRootComponent().setIsDragging(isDragging);
     }
@@ -4251,25 +4259,19 @@ function setDefaults(services, configuration) {
     }
 }
-function throwDepreciatedError(propertyName, groupName) {
-    throw new Error(`The "${propertyName}" property in the "${groupName}" configuration is depreciated`);
-}
 function validateConfiguration(configuration) {
-    if (configuration.controlBar === undefined) {
-        throw new Error('The "controlBar" property is not defined in the configuration');
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if (configuration.toolbox && configuration.toolbox.isHidden !== undefined) {
-        throwDepreciatedError('isHidden', 'toolbox');
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if (configuration.editors && configuration.editors.isHidden !== undefined) {
-        throwDepreciatedError('isHidden', 'editors');
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if (configuration.steps.validator) {
-        throwDepreciatedError('validator', 'steps');
+    const validateProperty = (key) => {
+        if (configuration[key] === undefined) {
+            throw new Error(`The "${key}" property is not defined in the configuration`);
+        }
+    };
+    if (!configuration) {
+        throw new Error('Configuration is not defined');
     }
+    validateProperty('steps');
+    validateProperty('toolbox');
+    validateProperty('editors');
+    validateProperty('controlBar');
 }
 class Designer {
@@ -4282,16 +4284,13 @@ class Designer {
      */
     static create(placeholder, startDefinition, configuration) {
         if (!placeholder) {
-            throw new Error('Placeholder is not set');
+            throw new Error('Placeholder is not defined');
         }
         if (!isElementAttached(placeholder)) {
             throw new Error('Placeholder is not attached to the DOM');
         }
         if (!startDefinition) {
-            throw new Error('Start definition is not set');
-        }
-        if (!configuration) {
-            throw new Error('Configuration is not set');
+            throw new Error('Start definition is not defined');
         }
         const config = configuration;
         validateConfiguration(config);

package/lib/index.d.ts CHANGED Viewed

@@ -280,8 +280,10 @@ declare class ComponentContext {
 declare class CustomActionController {
     private readonly configuration;
     private readonly state;
-    constructor(configuration: DesignerConfiguration, state: DesignerState);
+    private readonly stateModifier;
+    constructor(configuration: DesignerConfiguration, state: DesignerState, stateModifier: StateModifier);
     trigger(action: CustomAction, step: Step | null, sequence: Sequence): void;
+    private createCustomActionHandlerContext;
     private notifyStepChanged;
 }

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer",
 	"description": "Customizable no-code component for building flow-based programming applications.",
-	"version": "0.19.0",
+	"version": "0.19.2",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",