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

sequential-workflow-designer 0.31.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.31.0/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.31.0/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.31.0/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.31.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));
 	    }
 	}
@@ -397,14 +396,14 @@
 	}
 	class DragStepView {
-	    static create(step, theme, componentContext) {
+	    static create(step, isAttached, theme, componentContext) {
 	        var _a;
 	        const body = (_a = componentContext.shadowRoot) !== null && _a !== void 0 ? _a : document.body;
 	        const layer = Dom.element('div', {
 	            class: `sqd-drag sqd-theme-${theme}`
 	        });
 	        body.appendChild(layer);
-	        const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
+	        const component = componentContext.services.draggedComponent.create(layer, step, isAttached, componentContext);
 	        return new DragStepView(component, layer, body);
 	    }
 	    constructor(component, layer, body) {
@@ -466,29 +465,30 @@
 	}
 	class DragStepBehavior {
-	    static create(designerContext, step, draggedStepComponent) {
-	        const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
-	        return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
+	    static create(designerContext, step, attachedStepComponent) {
+	        const isAttached = Boolean(attachedStepComponent);
+	        const view = DragStepView.create(step, isAttached, designerContext.theme, designerContext.componentContext);
+	        return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, attachedStepComponent);
 	    }
-	    constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, draggedStepComponent) {
+	    constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, attachedStepComponent) {
 	        this.view = view;
 	        this.workspaceController = workspaceController;
 	        this.placeholderController = placeholderController;
 	        this.designerState = designerState;
 	        this.step = step;
 	        this.stateModifier = stateModifier;
-	        this.draggedStepComponent = draggedStepComponent;
+	        this.attachedStepComponent = attachedStepComponent;
 	    }
 	    onStart(position) {
 	        let offset = null;
-	        if (this.draggedStepComponent) {
-	            this.draggedStepComponent.setIsDisabled(true);
-	            this.draggedStepComponent.setIsDragging(true);
-	            const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
-	                this.draggedStepComponent.view.height === this.view.component.height;
+	        if (this.attachedStepComponent) {
+	            this.attachedStepComponent.setIsDisabled(true);
+	            this.attachedStepComponent.setIsDragging(true);
+	            const hasSameSize = this.attachedStepComponent.view.width === this.view.component.width &&
+	                this.attachedStepComponent.view.height === this.view.component.height;
 	            if (hasSameSize) {
 	                // Mouse cursor will be positioned on the same place as the source component.
-	                const pagePosition = this.draggedStepComponent.view.getClientPosition();
+	                const pagePosition = this.attachedStepComponent.view.getClientPosition();
 	                offset = position.subtract(pagePosition);
 	            }
 	        }
@@ -498,7 +498,7 @@
 	        }
 	        this.view.setPosition(position.subtract(offset));
 	        this.designerState.setIsDragging(true);
-	        const { placeholders, components } = this.resolvePlaceholders(this.draggedStepComponent);
+	        const { placeholders, components } = this.resolvePlaceholders(this.attachedStepComponent);
 	        this.state = {
 	            placeholders,
 	            components,
@@ -537,17 +537,17 @@
 	        this.designerState.setIsDragging(false);
 	        let modified = false;
 	        if (!interrupt && this.currentPlaceholder) {
-	            if (this.draggedStepComponent) {
-	                modified = this.stateModifier.tryMove(this.draggedStepComponent.parentSequence, this.draggedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
+	            if (this.attachedStepComponent) {
+	                modified = this.stateModifier.tryMove(this.attachedStepComponent.parentSequence, this.attachedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
 	            }
 	            else {
 	                modified = this.stateModifier.tryInsert(this.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
 	            }
 	        }
 	        if (!modified) {
-	            if (this.draggedStepComponent) {
-	                this.draggedStepComponent.setIsDisabled(false);
-	                this.draggedStepComponent.setIsDragging(false);
+	            if (this.attachedStepComponent) {
+	                this.attachedStepComponent.setIsDisabled(false);
+	                this.attachedStepComponent.setIsDragging(false);
 	            }
 	            if (this.currentPlaceholder) {
 	                this.currentPlaceholder.setIsHover(false);
@@ -3096,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)
@@ -3139,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;
@@ -3160,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);
@@ -3194,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();
@@ -3234,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);
@@ -3625,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();
+	        }
 	    }
 	}
@@ -3667,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 {
@@ -3679,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());
 	    }
@@ -3916,7 +3951,7 @@
 	                        label: this.i18n('contextMenu.unselect', 'Unselect'),
 	                        order: 10,
 	                        callback: () => {
-	                            this.state.setSelectedStepId(null);
+	                            this.stateModifier.tryResetSelectedStep();
 	                        }
 	                    });
 	                }
@@ -3931,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);
 	                        }
 	                    });
 	                }
@@ -4276,7 +4311,7 @@
 	const SAFE_OFFSET = 10;
 	class DefaultDraggedComponent {
-	    static create(parent, step, componentContext) {
+	    static create(parent, step, _, componentContext) {
 	        const canvas = Dom.svg('svg');
 	        canvas.style.marginLeft = -10 + 'px';
 	        canvas.style.marginTop = -10 + 'px';
@@ -5179,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) {
@@ -5204,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.
 	         */
@@ -5247,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.
@@ -5268,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));
     }
 }
@@ -395,14 +394,14 @@ class PathBarApi {
 }
 class DragStepView {
-    static create(step, theme, componentContext) {
+    static create(step, isAttached, theme, componentContext) {
         var _a;
         const body = (_a = componentContext.shadowRoot) !== null && _a !== void 0 ? _a : document.body;
         const layer = Dom.element('div', {
             class: `sqd-drag sqd-theme-${theme}`
         });
         body.appendChild(layer);
-        const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
+        const component = componentContext.services.draggedComponent.create(layer, step, isAttached, componentContext);
         return new DragStepView(component, layer, body);
     }
     constructor(component, layer, body) {
@@ -464,29 +463,30 @@ class PlaceholderFinder {
 }
 class DragStepBehavior {
-    static create(designerContext, step, draggedStepComponent) {
-        const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
-        return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
+    static create(designerContext, step, attachedStepComponent) {
+        const isAttached = Boolean(attachedStepComponent);
+        const view = DragStepView.create(step, isAttached, designerContext.theme, designerContext.componentContext);
+        return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, attachedStepComponent);
     }
-    constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, draggedStepComponent) {
+    constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, attachedStepComponent) {
         this.view = view;
         this.workspaceController = workspaceController;
         this.placeholderController = placeholderController;
         this.designerState = designerState;
         this.step = step;
         this.stateModifier = stateModifier;
-        this.draggedStepComponent = draggedStepComponent;
+        this.attachedStepComponent = attachedStepComponent;
     }
     onStart(position) {
         let offset = null;
-        if (this.draggedStepComponent) {
-            this.draggedStepComponent.setIsDisabled(true);
-            this.draggedStepComponent.setIsDragging(true);
-            const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
-                this.draggedStepComponent.view.height === this.view.component.height;
+        if (this.attachedStepComponent) {
+            this.attachedStepComponent.setIsDisabled(true);
+            this.attachedStepComponent.setIsDragging(true);
+            const hasSameSize = this.attachedStepComponent.view.width === this.view.component.width &&
+                this.attachedStepComponent.view.height === this.view.component.height;
             if (hasSameSize) {
                 // Mouse cursor will be positioned on the same place as the source component.
-                const pagePosition = this.draggedStepComponent.view.getClientPosition();
+                const pagePosition = this.attachedStepComponent.view.getClientPosition();
                 offset = position.subtract(pagePosition);
             }
         }
@@ -496,7 +496,7 @@ class DragStepBehavior {
         }
         this.view.setPosition(position.subtract(offset));
         this.designerState.setIsDragging(true);
-        const { placeholders, components } = this.resolvePlaceholders(this.draggedStepComponent);
+        const { placeholders, components } = this.resolvePlaceholders(this.attachedStepComponent);
         this.state = {
             placeholders,
             components,
@@ -535,17 +535,17 @@ class DragStepBehavior {
         this.designerState.setIsDragging(false);
         let modified = false;
         if (!interrupt && this.currentPlaceholder) {
-            if (this.draggedStepComponent) {
-                modified = this.stateModifier.tryMove(this.draggedStepComponent.parentSequence, this.draggedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
+            if (this.attachedStepComponent) {
+                modified = this.stateModifier.tryMove(this.attachedStepComponent.parentSequence, this.attachedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
             }
             else {
                 modified = this.stateModifier.tryInsert(this.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
             }
         }
         if (!modified) {
-            if (this.draggedStepComponent) {
-                this.draggedStepComponent.setIsDisabled(false);
-                this.draggedStepComponent.setIsDragging(false);
+            if (this.attachedStepComponent) {
+                this.attachedStepComponent.setIsDisabled(false);
+                this.attachedStepComponent.setIsDragging(false);
             }
             if (this.currentPlaceholder) {
                 this.currentPlaceholder.setIsHover(false);
@@ -2911,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)
@@ -2954,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;
@@ -2975,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);
@@ -3009,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();
@@ -3049,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);
@@ -3440,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();
+        }
     }
 }
@@ -3482,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 {
@@ -3494,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());
     }
@@ -3731,7 +3766,7 @@ class ContextMenuItemsBuilder {
                         label: this.i18n('contextMenu.unselect', 'Unselect'),
                         order: 10,
                         callback: () => {
-                            this.state.setSelectedStepId(null);
+                            this.stateModifier.tryResetSelectedStep();
                         }
                     });
                 }
@@ -3746,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);
                         }
                     });
                 }
@@ -4091,7 +4126,7 @@ class DesignerView {
 const SAFE_OFFSET = 10;
 class DefaultDraggedComponent {
-    static create(parent, step, componentContext) {
+    static create(parent, step, _, componentContext) {
         const canvas = Dom.svg('svg');
         canvas.style.marginLeft = -10 + 'px';
         canvas.style.marginTop = -10 + 'px';
@@ -4994,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) {
@@ -5019,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.
          */
@@ -5062,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.
@@ -5083,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));
     }
 }
@@ -394,14 +393,14 @@ class PathBarApi {
 }
 class DragStepView {
-    static create(step, theme, componentContext) {
+    static create(step, isAttached, theme, componentContext) {
         var _a;
         const body = (_a = componentContext.shadowRoot) !== null && _a !== void 0 ? _a : document.body;
         const layer = Dom.element('div', {
             class: `sqd-drag sqd-theme-${theme}`
         });
         body.appendChild(layer);
-        const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
+        const component = componentContext.services.draggedComponent.create(layer, step, isAttached, componentContext);
         return new DragStepView(component, layer, body);
     }
     constructor(component, layer, body) {
@@ -463,29 +462,30 @@ class PlaceholderFinder {
 }
 class DragStepBehavior {
-    static create(designerContext, step, draggedStepComponent) {
-        const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
-        return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
+    static create(designerContext, step, attachedStepComponent) {
+        const isAttached = Boolean(attachedStepComponent);
+        const view = DragStepView.create(step, isAttached, designerContext.theme, designerContext.componentContext);
+        return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, attachedStepComponent);
     }
-    constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, draggedStepComponent) {
+    constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, attachedStepComponent) {
         this.view = view;
         this.workspaceController = workspaceController;
         this.placeholderController = placeholderController;
         this.designerState = designerState;
         this.step = step;
         this.stateModifier = stateModifier;
-        this.draggedStepComponent = draggedStepComponent;
+        this.attachedStepComponent = attachedStepComponent;
     }
     onStart(position) {
         let offset = null;
-        if (this.draggedStepComponent) {
-            this.draggedStepComponent.setIsDisabled(true);
-            this.draggedStepComponent.setIsDragging(true);
-            const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
-                this.draggedStepComponent.view.height === this.view.component.height;
+        if (this.attachedStepComponent) {
+            this.attachedStepComponent.setIsDisabled(true);
+            this.attachedStepComponent.setIsDragging(true);
+            const hasSameSize = this.attachedStepComponent.view.width === this.view.component.width &&
+                this.attachedStepComponent.view.height === this.view.component.height;
             if (hasSameSize) {
                 // Mouse cursor will be positioned on the same place as the source component.
-                const pagePosition = this.draggedStepComponent.view.getClientPosition();
+                const pagePosition = this.attachedStepComponent.view.getClientPosition();
                 offset = position.subtract(pagePosition);
             }
         }
@@ -495,7 +495,7 @@ class DragStepBehavior {
         }
         this.view.setPosition(position.subtract(offset));
         this.designerState.setIsDragging(true);
-        const { placeholders, components } = this.resolvePlaceholders(this.draggedStepComponent);
+        const { placeholders, components } = this.resolvePlaceholders(this.attachedStepComponent);
         this.state = {
             placeholders,
             components,
@@ -534,17 +534,17 @@ class DragStepBehavior {
         this.designerState.setIsDragging(false);
         let modified = false;
         if (!interrupt && this.currentPlaceholder) {
-            if (this.draggedStepComponent) {
-                modified = this.stateModifier.tryMove(this.draggedStepComponent.parentSequence, this.draggedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
+            if (this.attachedStepComponent) {
+                modified = this.stateModifier.tryMove(this.attachedStepComponent.parentSequence, this.attachedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
             }
             else {
                 modified = this.stateModifier.tryInsert(this.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
             }
         }
         if (!modified) {
-            if (this.draggedStepComponent) {
-                this.draggedStepComponent.setIsDisabled(false);
-                this.draggedStepComponent.setIsDragging(false);
+            if (this.attachedStepComponent) {
+                this.attachedStepComponent.setIsDisabled(false);
+                this.attachedStepComponent.setIsDragging(false);
             }
             if (this.currentPlaceholder) {
                 this.currentPlaceholder.setIsHover(false);
@@ -2910,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)
@@ -2953,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;
@@ -2974,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);
@@ -3008,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();
@@ -3048,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);
@@ -3439,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();
+        }
     }
 }
@@ -3481,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 {
@@ -3493,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());
     }
@@ -3730,7 +3765,7 @@ class ContextMenuItemsBuilder {
                         label: this.i18n('contextMenu.unselect', 'Unselect'),
                         order: 10,
                         callback: () => {
-                            this.state.setSelectedStepId(null);
+                            this.stateModifier.tryResetSelectedStep();
                         }
                     });
                 }
@@ -3745,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);
                         }
                     });
                 }
@@ -4090,7 +4125,7 @@ class DesignerView {
 const SAFE_OFFSET = 10;
 class DefaultDraggedComponent {
-    static create(parent, step, componentContext) {
+    static create(parent, step, _, componentContext) {
         const canvas = Dom.svg('svg');
         canvas.style.marginLeft = -10 + 'px';
         canvas.style.marginTop = -10 + 'px';
@@ -4993,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) {
@@ -5018,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.
          */
@@ -5061,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.
@@ -5082,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;
@@ -910,7 +912,7 @@ interface UiComponent {
     destroy(): void;
 }
 interface DraggedComponentExtension {
-    create(parentElement: HTMLElement, step: Step, componentContext: ComponentContext): DraggedComponent;
+    create(parentElement: HTMLElement, step: Step, isAttached: boolean, componentContext: ComponentContext): DraggedComponent;
 }
 interface DraggedComponent {
     width: number;
@@ -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.31.0",
+	"version": "0.33.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",