npm - sequential-workflow-designer - Versions diffs - 0.32.0 → 0.33.0 - Mend

sequential-workflow-designer 0.32.0 → 0.33.0

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

@@ -106,10 +106,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.32.0/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.0/dist/index.umd.js"></script>
 ```
 Call the designer by:

package/dist/index.umd.js CHANGED Viewed

@@ -247,8 +247,7 @@
 	    }
 	    tryDelete() {
 	        if (this.canDelete() && this.state.selectedStepId) {
-	            this.stateModifier.tryDelete(this.state.selectedStepId);
-	            return true;
+	            return this.stateModifier.tryDeleteById(this.state.selectedStepId);
 	        }
 	        return false;
 	    }
@@ -256,7 +255,7 @@
 	        return (!!this.state.selectedStepId &&
 	            !this.state.isReadonly &&
 	            !this.state.isDragging &&
-	            this.stateModifier.isDeletable(this.state.selectedStepId));
+	            this.stateModifier.isDeletableById(this.state.selectedStepId));
 	    }
 	}
@@ -3097,30 +3096,56 @@
 	    isSelectable(step, parentSequence) {
 	        return this.configuration.isSelectable ? this.configuration.isSelectable(step, parentSequence) : true;
 	    }
-	    trySelectStep(step, parentSequence) {
-	        if (this.isSelectable(step, parentSequence)) {
-	            this.state.setSelectedStepId(step.id);
+	    isSelectableById(stepId) {
+	        if (this.configuration.isSelectable) {
+	            const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
+	            return this.configuration.isSelectable(result.step, result.parentSequence);
+	        }
+	        return true;
+	    }
+	    canUnselectSelectedStep() {
+	        if (this.state.selectedStepId) {
+	            if (this.configuration.canUnselectStep) {
+	                const result = this.definitionWalker.getParentSequence(this.state.definition, this.state.selectedStepId);
+	                return this.configuration.canUnselectStep(result.step, result.parentSequence);
+	            }
 	            return true;
 	        }
-	        return false;
+	        return null;
 	    }
-	    trySelectStepById(stepId) {
-	        if (this.configuration.isSelectable) {
-	            const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
-	            this.trySelectStep(result.step, result.parentSequence);
+	    /**
+	     * @description Check the `isSelectable` callback before calling this method.
+	     */
+	    trySelectStepById(stepIdOrNull) {
+	        const can = this.canUnselectSelectedStep();
+	        if (can === true || can === null) {
+	            this.state.setSelectedStepId(stepIdOrNull);
+	            return true;
 	        }
-	        else {
-	            this.state.setSelectedStepId(stepId);
+	        this.state.notifyStepUnselectionBlocked(stepIdOrNull);
+	        return false;
+	    }
+	    tryResetSelectedStep() {
+	        let stepIdOrNull = this.state.tryGetLastStepIdFromFolderPath();
+	        if (stepIdOrNull && !this.isSelectableById(stepIdOrNull)) {
+	            stepIdOrNull = null;
 	        }
+	        this.trySelectStepById(stepIdOrNull);
 	    }
-	    isDeletable(stepId) {
+	    isDeletable(step, parentSequence) {
+	        return this.configuration.isDeletable ? this.configuration.isDeletable(step, parentSequence) : true;
+	    }
+	    isDeletableById(stepId) {
 	        if (this.configuration.isDeletable) {
 	            const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
 	            return this.configuration.isDeletable(result.step, result.parentSequence);
 	        }
 	        return true;
 	    }
-	    tryDelete(stepId) {
+	    /**
+	     * @description Check the `isDeletable` callback before calling this method.
+	     */
+	    tryDeleteById(stepId) {
 	        const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
 	        const canDeleteStep = this.configuration.canDeleteStep
 	            ? this.configuration.canDeleteStep(result.step, result.parentSequence)
@@ -3140,7 +3165,7 @@
 	        }
 	        SequenceModifier.insertStep(step, targetSequence, targetIndex);
 	        this.state.notifyDefinitionChanged(exports.DefinitionChangeType.stepInserted, step.id);
-	        if (!this.configuration.isAutoSelectDisabled) {
+	        if (!this.configuration.isAutoSelectDisabled && this.isSelectable(step, targetSequence)) {
 	            this.trySelectStepById(step.id);
 	        }
 	        return true;
@@ -3161,14 +3186,17 @@
 	        }
 	        apply();
 	        this.state.notifyDefinitionChanged(exports.DefinitionChangeType.stepMoved, step.id);
-	        if (!this.configuration.isAutoSelectDisabled) {
-	            this.trySelectStep(step, targetSequence);
+	        if (!this.configuration.isAutoSelectDisabled && this.isSelectable(step, targetSequence)) {
+	            this.trySelectStepById(step.id);
 	        }
 	        return true;
 	    }
 	    isDuplicable(step, parentSequence) {
 	        return this.configuration.isDuplicable ? this.configuration.isDuplicable(step, parentSequence) : false;
 	    }
+	    /**
+	     * @description Check the `isDuplicable` callback before calling this method.
+	     */
 	    tryDuplicate(step, parentSequence) {
 	        const duplicator = new StepDuplicator(this.uidGenerator, this.definitionWalker);
 	        const index = parentSequence.indexOf(step);
@@ -3195,6 +3223,7 @@
 	        this.isEditorCollapsed = isEditorCollapsed;
 	        this.onViewportChanged = new SimpleEvent();
 	        this.onSelectedStepIdChanged = new SimpleEvent();
+	        this.onStepUnselectionBlocked = new SimpleEvent();
 	        this.onFolderPathChanged = new SimpleEvent();
 	        this.onIsReadonlyChanged = new SimpleEvent();
 	        this.onIsDraggingChanged = new SimpleEvent();
@@ -3235,6 +3264,9 @@
 	    notifyDefinitionChanged(changeType, stepId) {
 	        this.onDefinitionChanged.forward({ changeType, stepId });
 	    }
+	    notifyStepUnselectionBlocked(stepId) {
+	        this.onStepUnselectionBlocked.forward(stepId);
+	    }
 	    setViewport(viewport) {
 	        this.viewport = viewport;
 	        this.onViewportChanged.forward(viewport);
@@ -3626,24 +3658,23 @@
 	        this.stateModifier = stateModifier;
 	    }
 	    onStart() {
-	        if (this.resetSelectedStep) {
-	            const stepIdOrNull = this.state.tryGetLastStepIdFromFolderPath();
-	            if (stepIdOrNull) {
-	                this.stateModifier.trySelectStepById(stepIdOrNull);
-	            }
-	            else {
-	                this.state.setSelectedStepId(null);
-	            }
-	        }
+	        // Nothing to do.
 	    }
 	    onMove(delta) {
+	        this.lastDelta = delta;
 	        this.state.setViewport({
 	            position: this.startPosition.subtract(delta),
 	            scale: this.state.viewport.scale
 	        });
 	    }
 	    onEnd() {
-	        // Nothing to do.
+	        if (this.resetSelectedStep) {
+	            const distance = this.lastDelta ? this.lastDelta.distance() : 0;
+	            if (distance > 2) {
+	                return;
+	            }
+	            this.stateModifier.tryResetSelectedStep();
+	        }
 	    }
 	}
@@ -3668,7 +3699,7 @@
 	        if (delta.distance() > 2) {
 	            const canDrag = !this.state.isReadonly && !this.isDragDisabled;
 	            if (canDrag) {
-	                this.state.setSelectedStepId(null);
+	                this.stateModifier.tryResetSelectedStep();
 	                return DragStepBehavior.create(this.context, this.pressedStepComponent.step, this.pressedStepComponent);
 	            }
 	            else {
@@ -3680,9 +3711,12 @@
 	        if (interrupt) {
 	            return;
 	        }
-	        if (!this.stateModifier.trySelectStep(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence)) {
-	            // If we cannot select the step, we clear the selection.
-	            this.state.setSelectedStepId(null);
+	        if (this.stateModifier.isSelectable(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence)) {
+	            this.stateModifier.trySelectStepById(this.pressedStepComponent.step.id);
+	        }
+	        else {
+	            // If the step is not selectable, we try to reset the selection.
+	            this.stateModifier.tryResetSelectedStep();
 	        }
 	        return new SelectStepBehaviorEndToken(this.pressedStepComponent.step.id, Date.now());
 	    }
@@ -3917,7 +3951,7 @@
 	                        label: this.i18n('contextMenu.unselect', 'Unselect'),
 	                        order: 10,
 	                        callback: () => {
-	                            this.state.setSelectedStepId(null);
+	                            this.stateModifier.tryResetSelectedStep();
 	                        }
 	                    });
 	                }
@@ -3932,12 +3966,12 @@
 	                }
 	            }
 	            if (!this.state.isReadonly) {
-	                if (this.stateModifier.isDeletable(step.id)) {
+	                if (this.stateModifier.isDeletable(step, parentSequence)) {
 	                    items.push({
 	                        label: this.i18n('contextMenu.delete', 'Delete'),
 	                        order: 30,
 	                        callback: () => {
-	                            this.stateModifier.tryDelete(step.id);
+	                            this.stateModifier.tryDeleteById(step.id);
 	                        }
 	                    });
 	                }
@@ -5180,6 +5214,7 @@
 	        designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.forward);
 	        designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.forward);
 	        designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.forward);
+	        designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.forward);
 	        return designer;
 	    }
 	    constructor(view, state, stateModifier, walker, historyController, api) {
@@ -5205,6 +5240,10 @@
 	         * @description Fires when the selected step has changed.
 	         */
 	        this.onSelectedStepIdChanged = new SimpleEvent();
+	        /**
+	         * @description Fires when the designer could not unselect the currently selected step due to restrictions.
+	         */
+	        this.onStepUnselectionBlocked = new SimpleEvent();
 	        /**
 	         * @description Fires when the toolbox is collapsed or expanded.
 	         */
@@ -5248,7 +5287,13 @@
 	     * @description Selects a step by the id.
 	     */
 	    selectStepById(stepId) {
-	        this.stateModifier.trySelectStepById(stepId);
+	        this.state.setSelectedStepId(stepId);
+	    }
+	    /**
+	     * @description Unselects the selected step.
+	     */
+	    clearSelectedStep() {
+	        this.state.setSelectedStepId(null);
 	    }
 	    /**
 	     * @returns the current viewport.
@@ -5269,12 +5314,6 @@
 	    resetViewport() {
 	        this.api.viewport.resetViewport();
 	    }
-	    /**
-	     * @description Unselects the selected step.
-	     */
-	    clearSelectedStep() {
-	        this.state.setSelectedStepId(null);
-	    }
 	    /**
 	     * @description Moves the viewport to the step with the animation.
 	     */

package/lib/cjs/index.cjs CHANGED Viewed

@@ -245,8 +245,7 @@ class ControlBarApi {
     }
     tryDelete() {
         if (this.canDelete() && this.state.selectedStepId) {
-            this.stateModifier.tryDelete(this.state.selectedStepId);
-            return true;
+            return this.stateModifier.tryDeleteById(this.state.selectedStepId);
         }
         return false;
     }
@@ -254,7 +253,7 @@ class ControlBarApi {
         return (!!this.state.selectedStepId &&
             !this.state.isReadonly &&
             !this.state.isDragging &&
-            this.stateModifier.isDeletable(this.state.selectedStepId));
+            this.stateModifier.isDeletableById(this.state.selectedStepId));
     }
 }
@@ -2912,30 +2911,56 @@ class StateModifier {
     isSelectable(step, parentSequence) {
         return this.configuration.isSelectable ? this.configuration.isSelectable(step, parentSequence) : true;
     }
-    trySelectStep(step, parentSequence) {
-        if (this.isSelectable(step, parentSequence)) {
-            this.state.setSelectedStepId(step.id);
+    isSelectableById(stepId) {
+        if (this.configuration.isSelectable) {
+            const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
+            return this.configuration.isSelectable(result.step, result.parentSequence);
+        }
+        return true;
+    }
+    canUnselectSelectedStep() {
+        if (this.state.selectedStepId) {
+            if (this.configuration.canUnselectStep) {
+                const result = this.definitionWalker.getParentSequence(this.state.definition, this.state.selectedStepId);
+                return this.configuration.canUnselectStep(result.step, result.parentSequence);
+            }
             return true;
         }
-        return false;
+        return null;
     }
-    trySelectStepById(stepId) {
-        if (this.configuration.isSelectable) {
-            const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
-            this.trySelectStep(result.step, result.parentSequence);
+    /**
+     * @description Check the `isSelectable` callback before calling this method.
+     */
+    trySelectStepById(stepIdOrNull) {
+        const can = this.canUnselectSelectedStep();
+        if (can === true || can === null) {
+            this.state.setSelectedStepId(stepIdOrNull);
+            return true;
         }
-        else {
-            this.state.setSelectedStepId(stepId);
+        this.state.notifyStepUnselectionBlocked(stepIdOrNull);
+        return false;
+    }
+    tryResetSelectedStep() {
+        let stepIdOrNull = this.state.tryGetLastStepIdFromFolderPath();
+        if (stepIdOrNull && !this.isSelectableById(stepIdOrNull)) {
+            stepIdOrNull = null;
         }
+        this.trySelectStepById(stepIdOrNull);
     }
-    isDeletable(stepId) {
+    isDeletable(step, parentSequence) {
+        return this.configuration.isDeletable ? this.configuration.isDeletable(step, parentSequence) : true;
+    }
+    isDeletableById(stepId) {
         if (this.configuration.isDeletable) {
             const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
             return this.configuration.isDeletable(result.step, result.parentSequence);
         }
         return true;
     }
-    tryDelete(stepId) {
+    /**
+     * @description Check the `isDeletable` callback before calling this method.
+     */
+    tryDeleteById(stepId) {
         const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
         const canDeleteStep = this.configuration.canDeleteStep
             ? this.configuration.canDeleteStep(result.step, result.parentSequence)
@@ -2955,7 +2980,7 @@ class StateModifier {
         }
         SequenceModifier.insertStep(step, targetSequence, targetIndex);
         this.state.notifyDefinitionChanged(exports.DefinitionChangeType.stepInserted, step.id);
-        if (!this.configuration.isAutoSelectDisabled) {
+        if (!this.configuration.isAutoSelectDisabled && this.isSelectable(step, targetSequence)) {
             this.trySelectStepById(step.id);
         }
         return true;
@@ -2976,14 +3001,17 @@ class StateModifier {
         }
         apply();
         this.state.notifyDefinitionChanged(exports.DefinitionChangeType.stepMoved, step.id);
-        if (!this.configuration.isAutoSelectDisabled) {
-            this.trySelectStep(step, targetSequence);
+        if (!this.configuration.isAutoSelectDisabled && this.isSelectable(step, targetSequence)) {
+            this.trySelectStepById(step.id);
         }
         return true;
     }
     isDuplicable(step, parentSequence) {
         return this.configuration.isDuplicable ? this.configuration.isDuplicable(step, parentSequence) : false;
     }
+    /**
+     * @description Check the `isDuplicable` callback before calling this method.
+     */
     tryDuplicate(step, parentSequence) {
         const duplicator = new StepDuplicator(this.uidGenerator, this.definitionWalker);
         const index = parentSequence.indexOf(step);
@@ -3010,6 +3038,7 @@ class DesignerState {
         this.isEditorCollapsed = isEditorCollapsed;
         this.onViewportChanged = new SimpleEvent();
         this.onSelectedStepIdChanged = new SimpleEvent();
+        this.onStepUnselectionBlocked = new SimpleEvent();
         this.onFolderPathChanged = new SimpleEvent();
         this.onIsReadonlyChanged = new SimpleEvent();
         this.onIsDraggingChanged = new SimpleEvent();
@@ -3050,6 +3079,9 @@ class DesignerState {
     notifyDefinitionChanged(changeType, stepId) {
         this.onDefinitionChanged.forward({ changeType, stepId });
     }
+    notifyStepUnselectionBlocked(stepId) {
+        this.onStepUnselectionBlocked.forward(stepId);
+    }
     setViewport(viewport) {
         this.viewport = viewport;
         this.onViewportChanged.forward(viewport);
@@ -3441,24 +3473,23 @@ class MoveViewportBehavior {
         this.stateModifier = stateModifier;
     }
     onStart() {
-        if (this.resetSelectedStep) {
-            const stepIdOrNull = this.state.tryGetLastStepIdFromFolderPath();
-            if (stepIdOrNull) {
-                this.stateModifier.trySelectStepById(stepIdOrNull);
-            }
-            else {
-                this.state.setSelectedStepId(null);
-            }
-        }
+        // Nothing to do.
     }
     onMove(delta) {
+        this.lastDelta = delta;
         this.state.setViewport({
             position: this.startPosition.subtract(delta),
             scale: this.state.viewport.scale
         });
     }
     onEnd() {
-        // Nothing to do.
+        if (this.resetSelectedStep) {
+            const distance = this.lastDelta ? this.lastDelta.distance() : 0;
+            if (distance > 2) {
+                return;
+            }
+            this.stateModifier.tryResetSelectedStep();
+        }
     }
 }
@@ -3483,7 +3514,7 @@ class SelectStepBehavior {
         if (delta.distance() > 2) {
             const canDrag = !this.state.isReadonly && !this.isDragDisabled;
             if (canDrag) {
-                this.state.setSelectedStepId(null);
+                this.stateModifier.tryResetSelectedStep();
                 return DragStepBehavior.create(this.context, this.pressedStepComponent.step, this.pressedStepComponent);
             }
             else {
@@ -3495,9 +3526,12 @@ class SelectStepBehavior {
         if (interrupt) {
             return;
         }
-        if (!this.stateModifier.trySelectStep(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence)) {
-            // If we cannot select the step, we clear the selection.
-            this.state.setSelectedStepId(null);
+        if (this.stateModifier.isSelectable(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence)) {
+            this.stateModifier.trySelectStepById(this.pressedStepComponent.step.id);
+        }
+        else {
+            // If the step is not selectable, we try to reset the selection.
+            this.stateModifier.tryResetSelectedStep();
         }
         return new SelectStepBehaviorEndToken(this.pressedStepComponent.step.id, Date.now());
     }
@@ -3732,7 +3766,7 @@ class ContextMenuItemsBuilder {
                         label: this.i18n('contextMenu.unselect', 'Unselect'),
                         order: 10,
                         callback: () => {
-                            this.state.setSelectedStepId(null);
+                            this.stateModifier.tryResetSelectedStep();
                         }
                     });
                 }
@@ -3747,12 +3781,12 @@ class ContextMenuItemsBuilder {
                 }
             }
             if (!this.state.isReadonly) {
-                if (this.stateModifier.isDeletable(step.id)) {
+                if (this.stateModifier.isDeletable(step, parentSequence)) {
                     items.push({
                         label: this.i18n('contextMenu.delete', 'Delete'),
                         order: 30,
                         callback: () => {
-                            this.stateModifier.tryDelete(step.id);
+                            this.stateModifier.tryDeleteById(step.id);
                         }
                     });
                 }
@@ -4995,6 +5029,7 @@ class Designer {
         designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.forward);
         designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.forward);
         designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.forward);
+        designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.forward);
         return designer;
     }
     constructor(view, state, stateModifier, walker, historyController, api) {
@@ -5020,6 +5055,10 @@ class Designer {
          * @description Fires when the selected step has changed.
          */
         this.onSelectedStepIdChanged = new SimpleEvent();
+        /**
+         * @description Fires when the designer could not unselect the currently selected step due to restrictions.
+         */
+        this.onStepUnselectionBlocked = new SimpleEvent();
         /**
          * @description Fires when the toolbox is collapsed or expanded.
          */
@@ -5063,7 +5102,13 @@ class Designer {
      * @description Selects a step by the id.
      */
     selectStepById(stepId) {
-        this.stateModifier.trySelectStepById(stepId);
+        this.state.setSelectedStepId(stepId);
+    }
+    /**
+     * @description Unselects the selected step.
+     */
+    clearSelectedStep() {
+        this.state.setSelectedStepId(null);
     }
     /**
      * @returns the current viewport.
@@ -5084,12 +5129,6 @@ class Designer {
     resetViewport() {
         this.api.viewport.resetViewport();
     }
-    /**
-     * @description Unselects the selected step.
-     */
-    clearSelectedStep() {
-        this.state.setSelectedStepId(null);
-    }
     /**
      * @description Moves the viewport to the step with the animation.
      */

package/lib/esm/index.js CHANGED Viewed

@@ -244,8 +244,7 @@ class ControlBarApi {
     }
     tryDelete() {
         if (this.canDelete() && this.state.selectedStepId) {
-            this.stateModifier.tryDelete(this.state.selectedStepId);
-            return true;
+            return this.stateModifier.tryDeleteById(this.state.selectedStepId);
         }
         return false;
     }
@@ -253,7 +252,7 @@ class ControlBarApi {
         return (!!this.state.selectedStepId &&
             !this.state.isReadonly &&
             !this.state.isDragging &&
-            this.stateModifier.isDeletable(this.state.selectedStepId));
+            this.stateModifier.isDeletableById(this.state.selectedStepId));
     }
 }
@@ -2911,30 +2910,56 @@ class StateModifier {
     isSelectable(step, parentSequence) {
         return this.configuration.isSelectable ? this.configuration.isSelectable(step, parentSequence) : true;
     }
-    trySelectStep(step, parentSequence) {
-        if (this.isSelectable(step, parentSequence)) {
-            this.state.setSelectedStepId(step.id);
+    isSelectableById(stepId) {
+        if (this.configuration.isSelectable) {
+            const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
+            return this.configuration.isSelectable(result.step, result.parentSequence);
+        }
+        return true;
+    }
+    canUnselectSelectedStep() {
+        if (this.state.selectedStepId) {
+            if (this.configuration.canUnselectStep) {
+                const result = this.definitionWalker.getParentSequence(this.state.definition, this.state.selectedStepId);
+                return this.configuration.canUnselectStep(result.step, result.parentSequence);
+            }
             return true;
         }
-        return false;
+        return null;
     }
-    trySelectStepById(stepId) {
-        if (this.configuration.isSelectable) {
-            const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
-            this.trySelectStep(result.step, result.parentSequence);
+    /**
+     * @description Check the `isSelectable` callback before calling this method.
+     */
+    trySelectStepById(stepIdOrNull) {
+        const can = this.canUnselectSelectedStep();
+        if (can === true || can === null) {
+            this.state.setSelectedStepId(stepIdOrNull);
+            return true;
         }
-        else {
-            this.state.setSelectedStepId(stepId);
+        this.state.notifyStepUnselectionBlocked(stepIdOrNull);
+        return false;
+    }
+    tryResetSelectedStep() {
+        let stepIdOrNull = this.state.tryGetLastStepIdFromFolderPath();
+        if (stepIdOrNull && !this.isSelectableById(stepIdOrNull)) {
+            stepIdOrNull = null;
         }
+        this.trySelectStepById(stepIdOrNull);
     }
-    isDeletable(stepId) {
+    isDeletable(step, parentSequence) {
+        return this.configuration.isDeletable ? this.configuration.isDeletable(step, parentSequence) : true;
+    }
+    isDeletableById(stepId) {
         if (this.configuration.isDeletable) {
             const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
             return this.configuration.isDeletable(result.step, result.parentSequence);
         }
         return true;
     }
-    tryDelete(stepId) {
+    /**
+     * @description Check the `isDeletable` callback before calling this method.
+     */
+    tryDeleteById(stepId) {
         const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
         const canDeleteStep = this.configuration.canDeleteStep
             ? this.configuration.canDeleteStep(result.step, result.parentSequence)
@@ -2954,7 +2979,7 @@ class StateModifier {
         }
         SequenceModifier.insertStep(step, targetSequence, targetIndex);
         this.state.notifyDefinitionChanged(DefinitionChangeType.stepInserted, step.id);
-        if (!this.configuration.isAutoSelectDisabled) {
+        if (!this.configuration.isAutoSelectDisabled && this.isSelectable(step, targetSequence)) {
             this.trySelectStepById(step.id);
         }
         return true;
@@ -2975,14 +3000,17 @@ class StateModifier {
         }
         apply();
         this.state.notifyDefinitionChanged(DefinitionChangeType.stepMoved, step.id);
-        if (!this.configuration.isAutoSelectDisabled) {
-            this.trySelectStep(step, targetSequence);
+        if (!this.configuration.isAutoSelectDisabled && this.isSelectable(step, targetSequence)) {
+            this.trySelectStepById(step.id);
         }
         return true;
     }
     isDuplicable(step, parentSequence) {
         return this.configuration.isDuplicable ? this.configuration.isDuplicable(step, parentSequence) : false;
     }
+    /**
+     * @description Check the `isDuplicable` callback before calling this method.
+     */
     tryDuplicate(step, parentSequence) {
         const duplicator = new StepDuplicator(this.uidGenerator, this.definitionWalker);
         const index = parentSequence.indexOf(step);
@@ -3009,6 +3037,7 @@ class DesignerState {
         this.isEditorCollapsed = isEditorCollapsed;
         this.onViewportChanged = new SimpleEvent();
         this.onSelectedStepIdChanged = new SimpleEvent();
+        this.onStepUnselectionBlocked = new SimpleEvent();
         this.onFolderPathChanged = new SimpleEvent();
         this.onIsReadonlyChanged = new SimpleEvent();
         this.onIsDraggingChanged = new SimpleEvent();
@@ -3049,6 +3078,9 @@ class DesignerState {
     notifyDefinitionChanged(changeType, stepId) {
         this.onDefinitionChanged.forward({ changeType, stepId });
     }
+    notifyStepUnselectionBlocked(stepId) {
+        this.onStepUnselectionBlocked.forward(stepId);
+    }
     setViewport(viewport) {
         this.viewport = viewport;
         this.onViewportChanged.forward(viewport);
@@ -3440,24 +3472,23 @@ class MoveViewportBehavior {
         this.stateModifier = stateModifier;
     }
     onStart() {
-        if (this.resetSelectedStep) {
-            const stepIdOrNull = this.state.tryGetLastStepIdFromFolderPath();
-            if (stepIdOrNull) {
-                this.stateModifier.trySelectStepById(stepIdOrNull);
-            }
-            else {
-                this.state.setSelectedStepId(null);
-            }
-        }
+        // Nothing to do.
     }
     onMove(delta) {
+        this.lastDelta = delta;
         this.state.setViewport({
             position: this.startPosition.subtract(delta),
             scale: this.state.viewport.scale
         });
     }
     onEnd() {
-        // Nothing to do.
+        if (this.resetSelectedStep) {
+            const distance = this.lastDelta ? this.lastDelta.distance() : 0;
+            if (distance > 2) {
+                return;
+            }
+            this.stateModifier.tryResetSelectedStep();
+        }
     }
 }
@@ -3482,7 +3513,7 @@ class SelectStepBehavior {
         if (delta.distance() > 2) {
             const canDrag = !this.state.isReadonly && !this.isDragDisabled;
             if (canDrag) {
-                this.state.setSelectedStepId(null);
+                this.stateModifier.tryResetSelectedStep();
                 return DragStepBehavior.create(this.context, this.pressedStepComponent.step, this.pressedStepComponent);
             }
             else {
@@ -3494,9 +3525,12 @@ class SelectStepBehavior {
         if (interrupt) {
             return;
         }
-        if (!this.stateModifier.trySelectStep(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence)) {
-            // If we cannot select the step, we clear the selection.
-            this.state.setSelectedStepId(null);
+        if (this.stateModifier.isSelectable(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence)) {
+            this.stateModifier.trySelectStepById(this.pressedStepComponent.step.id);
+        }
+        else {
+            // If the step is not selectable, we try to reset the selection.
+            this.stateModifier.tryResetSelectedStep();
         }
         return new SelectStepBehaviorEndToken(this.pressedStepComponent.step.id, Date.now());
     }
@@ -3731,7 +3765,7 @@ class ContextMenuItemsBuilder {
                         label: this.i18n('contextMenu.unselect', 'Unselect'),
                         order: 10,
                         callback: () => {
-                            this.state.setSelectedStepId(null);
+                            this.stateModifier.tryResetSelectedStep();
                         }
                     });
                 }
@@ -3746,12 +3780,12 @@ class ContextMenuItemsBuilder {
                 }
             }
             if (!this.state.isReadonly) {
-                if (this.stateModifier.isDeletable(step.id)) {
+                if (this.stateModifier.isDeletable(step, parentSequence)) {
                     items.push({
                         label: this.i18n('contextMenu.delete', 'Delete'),
                         order: 30,
                         callback: () => {
-                            this.stateModifier.tryDelete(step.id);
+                            this.stateModifier.tryDeleteById(step.id);
                         }
                     });
                 }
@@ -4994,6 +5028,7 @@ class Designer {
         designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.forward);
         designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.forward);
         designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.forward);
+        designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.forward);
         return designer;
     }
     constructor(view, state, stateModifier, walker, historyController, api) {
@@ -5019,6 +5054,10 @@ class Designer {
          * @description Fires when the selected step has changed.
          */
         this.onSelectedStepIdChanged = new SimpleEvent();
+        /**
+         * @description Fires when the designer could not unselect the currently selected step due to restrictions.
+         */
+        this.onStepUnselectionBlocked = new SimpleEvent();
         /**
          * @description Fires when the toolbox is collapsed or expanded.
          */
@@ -5062,7 +5101,13 @@ class Designer {
      * @description Selects a step by the id.
      */
     selectStepById(stepId) {
-        this.stateModifier.trySelectStepById(stepId);
+        this.state.setSelectedStepId(stepId);
+    }
+    /**
+     * @description Unselects the selected step.
+     */
+    clearSelectedStep() {
+        this.state.setSelectedStepId(null);
     }
     /**
      * @returns the current viewport.
@@ -5083,12 +5128,6 @@ class Designer {
     resetViewport() {
         this.api.viewport.resetViewport();
     }
-    /**
-     * @description Unselects the selected step.
-     */
-    clearSelectedStep() {
-        this.state.setSelectedStepId(null);
-    }
     /**
      * @description Moves the viewport to the step with the animation.
      */

package/lib/index.d.ts CHANGED Viewed

@@ -107,6 +107,7 @@ declare class DesignerState {
     isEditorCollapsed: boolean;
     readonly onViewportChanged: SimpleEvent<Viewport>;
     readonly onSelectedStepIdChanged: SimpleEvent<string | null>;
+    readonly onStepUnselectionBlocked: SimpleEvent<string | null>;
     readonly onFolderPathChanged: SimpleEvent<string[]>;
     readonly onIsReadonlyChanged: SimpleEvent<boolean>;
     readonly onIsDraggingChanged: SimpleEvent<boolean>;
@@ -126,6 +127,7 @@ declare class DesignerState {
     tryGetLastStepIdFromFolderPath(): string | null;
     setDefinition(definition: Definition): void;
     notifyDefinitionChanged(changeType: DefinitionChangeType, stepId: string | null): void;
+    notifyStepUnselectionBlocked(stepId: string | null): void;
     setViewport(viewport: Viewport): void;
     setIsReadonly(isReadonly: boolean): void;
     setIsDragging(isDragging: boolean): void;
@@ -1125,12 +1127,13 @@ interface PreferenceStorage {
 }
 interface StepsConfiguration {
     isSelectable?: (step: Step, parentSequence: Sequence) => boolean;
-    canInsertStep?: (step: Step, targetSequence: Sequence, targetIndex: number) => boolean;
     isDraggable?: (step: Step, parentSequence: Sequence) => boolean;
-    canMoveStep?: (sourceSequence: Sequence, step: Step, targetSequence: Sequence, targetIndex: number) => boolean;
     isDeletable?: (step: Step, parentSequence: Sequence) => boolean;
-    canDeleteStep?: (step: Step, parentSequence: Sequence) => boolean;
     isDuplicable?: (step: Step, parentSequence: Sequence) => boolean;
+    canUnselectStep?: (step: Step, parentSequence: Sequence) => boolean;
+    canInsertStep?: (step: Step, targetSequence: Sequence, targetIndex: number) => boolean;
+    canMoveStep?: (sourceSequence: Sequence, step: Step, targetSequence: Sequence, targetIndex: number) => boolean;
+    canDeleteStep?: (step: Step, parentSequence: Sequence) => boolean;
     /**
      * @description The designer automatically selects the step after it is dropped. If true, the step will not be selected.
      */
@@ -1199,14 +1202,26 @@ declare class StateModifier {
     constructor(definitionWalker: DefinitionWalker, uidGenerator: UidGenerator, state: DesignerState, configuration: StepsConfiguration, dependencies: StateModifierDependency[]);
     addDependency(dependency: StateModifierDependency): void;
     isSelectable(step: Step, parentSequence: Sequence): boolean;
-    trySelectStep(step: Step, parentSequence: Sequence): boolean;
-    trySelectStepById(stepId: string): void;
-    isDeletable(stepId: string): boolean;
-    tryDelete(stepId: string): boolean;
+    isSelectableById(stepId: string): boolean;
+    private canUnselectSelectedStep;
+    /**
+     * @description Check the `isSelectable` callback before calling this method.
+     */
+    trySelectStepById(stepIdOrNull: string | null): boolean;
+    tryResetSelectedStep(): void;
+    isDeletable(step: Step, parentSequence: Sequence): boolean;
+    isDeletableById(stepId: string): boolean;
+    /**
+     * @description Check the `isDeletable` callback before calling this method.
+     */
+    tryDeleteById(stepId: string): boolean;
     tryInsert(step: Step, targetSequence: Sequence, targetIndex: number): boolean;
     isDraggable(step: Step, parentSequence: Sequence): boolean;
     tryMove(sourceSequence: Sequence, step: Step, targetSequence: Sequence, targetIndex: number): boolean;
     isDuplicable(step: Step, parentSequence: Sequence): boolean;
+    /**
+     * @description Check the `isDuplicable` callback before calling this method.
+     */
     tryDuplicate(step: Step, parentSequence: Sequence): boolean;
     replaceDefinition(definition: Definition): void;
     updateDependencies(): void;
@@ -1322,6 +1337,10 @@ declare class Designer<TDefinition extends Definition = Definition> {
      * @description Fires when the selected step has changed.
      */
     readonly onSelectedStepIdChanged: SimpleEvent<string | null>;
+    /**
+     * @description Fires when the designer could not unselect the currently selected step due to restrictions.
+     */
+    readonly onStepUnselectionBlocked: SimpleEvent<string | null>;
     /**
      * @description Fires when the toolbox is collapsed or expanded.
      */
@@ -1354,6 +1373,10 @@ declare class Designer<TDefinition extends Definition = Definition> {
      * @description Selects a step by the id.
      */
     selectStepById(stepId: string): void;
+    /**
+     * @description Unselects the selected step.
+     */
+    clearSelectedStep(): void;
     /**
      * @returns the current viewport.
      */
@@ -1367,10 +1390,6 @@ declare class Designer<TDefinition extends Definition = Definition> {
      * @description Resets the viewport.
      */
     resetViewport(): void;
-    /**
-     * @description Unselects the selected step.
-     */
-    clearSelectedStep(): void;
     /**
      * @description Moves the viewport to the step with the animation.
      */

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.32.0",
+	"version": "0.33.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",