npm - sequential-workflow-designer - Versions diffs - 0.37.2 → 0.37.4 - Mend

sequential-workflow-designer 0.37.2 → 0.37.4

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

@@ -35,6 +35,7 @@ Features:
 - [📜 Scrollable Page](https://nocode-js.github.io/sequential-workflow-designer/examples/scrollable-page.html)
 - [🌵 Multi-Conditional Switch](https://nocode-js.github.io/sequential-workflow-designer/examples/multi-conditional-switch.html)
 - [🌀 Auto-Select](https://nocode-js.github.io/sequential-workflow-designer/examples/auto-select.html)
+- [🔄 Step Changes Detection](https://nocode-js.github.io/sequential-workflow-designer/examples/step-changes-detection.html)
 - [Angular Demo](https://nocode-js.github.io/sequential-workflow-designer/angular-app/)
 - [React Demo](https://nocode-js.github.io/sequential-workflow-designer/react-app/)
 - [Svelte Demo](https://nocode-js.github.io/sequential-workflow-designer/svelte-app/)
@@ -106,10 +107,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.37.2/css/designer.css" rel="stylesheet" />
-  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.2/css/designer-light.css" rel="stylesheet" />
-  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.2/css/designer-dark.css" rel="stylesheet" />
-  <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.2/dist/index.umd.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.4/css/designer.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.4/css/designer-light.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.4/css/designer-dark.css" rel="stylesheet" />
+  <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.4/dist/index.umd.js"></script>
 </head>
 ```

package/dist/index.umd.js CHANGED Viewed

@@ -133,11 +133,15 @@
 	class SimpleEvent {
 	    constructor() {
 	        this.listeners = [];
-	        this.forward = (value) => {
-	            if (this.listeners.length > 0) {
-	                this.listeners.forEach(listener => listener(value));
+	        this.emit = (value) => {
+	            for (const listener of this.listeners) {
+	                listener(value);
 	            }
 	        };
+	        /**
+	         * @deprecated Use `emit` method instead.
+	         */
+	        this.forward = this.emit;
 	    }
 	    subscribe(listener) {
 	        this.listeners.push(listener);
@@ -169,14 +173,14 @@
 	    const value = [undefined, undefined, undefined, undefined];
 	    const result = new SimpleEvent();
 	    let scheduled = false;
-	    function forward() {
+	    function emit() {
 	        if (scheduled) {
 	            return;
 	        }
 	        scheduled = true;
 	        setTimeout(() => {
 	            try {
-	                result.forward(value);
+	                result.emit(value);
 	            }
 	            finally {
 	                scheduled = false;
@@ -187,7 +191,7 @@
 	    function subscribe(event, index) {
 	        event.subscribe(v => {
 	            value[index] = v;
-	            forward();
+	            emit();
 	        });
 	    }
 	    subscribe(a, 0);
@@ -204,7 +208,7 @@
 	class ControlBarApi {
 	    static create(state, historyController, stateModifier) {
 	        const api = new ControlBarApi(state, historyController, stateModifier);
-	        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.forward);
+	        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.emit);
 	        return api;
 	    }
 	    constructor(state, historyController, stateModifier) {
@@ -3283,16 +3287,16 @@
 	    setSelectedStepId(stepId) {
 	        if (this.selectedStepId !== stepId) {
 	            this.selectedStepId = stepId;
-	            this.onSelectedStepIdChanged.forward(stepId);
+	            this.onSelectedStepIdChanged.emit(stepId);
 	        }
 	    }
 	    pushStepIdToFolderPath(stepId) {
 	        this.folderPath.push(stepId);
-	        this.onFolderPathChanged.forward(this.folderPath);
+	        this.onFolderPathChanged.emit(this.folderPath);
 	    }
 	    setFolderPath(path) {
 	        this.folderPath = path;
-	        this.onFolderPathChanged.forward(path);
+	        this.onFolderPathChanged.emit(path);
 	    }
 	    tryGetLastStepIdFromFolderPath() {
 	        return this.folderPath.length > 0 ? this.folderPath[this.folderPath.length - 1] : null;
@@ -3310,50 +3314,50 @@
 	        if (details) {
 	            Object.assign(event, details);
 	        }
-	        this.onDefinitionChanged.forward(event);
+	        this.onDefinitionChanged.emit(event);
 	    }
 	    notifyStepUnselectionBlocked(stepId) {
-	        this.onStepUnselectionBlocked.forward(stepId);
+	        this.onStepUnselectionBlocked.emit(stepId);
 	    }
 	    setViewport(viewport) {
 	        this.viewport = viewport;
-	        this.onViewportChanged.forward(viewport);
+	        this.onViewportChanged.emit(viewport);
 	    }
 	    setIsReadonly(isReadonly) {
 	        if (this.isReadonly !== isReadonly) {
 	            this.isReadonly = isReadonly;
-	            this.onIsReadonlyChanged.forward(isReadonly);
+	            this.onIsReadonlyChanged.emit(isReadonly);
 	        }
 	    }
 	    setIsDragging(isDragging) {
 	        if (this.isDragging !== isDragging) {
 	            this.isDragging = isDragging;
-	            this.onIsDraggingChanged.forward(isDragging);
+	            this.onIsDraggingChanged.emit(isDragging);
 	        }
 	    }
 	    setIsDragDisabled(isDragDisabled) {
 	        if (this.isDragDisabled !== isDragDisabled) {
 	            this.isDragDisabled = isDragDisabled;
-	            this.onIsDragDisabledChanged.forward(isDragDisabled);
+	            this.onIsDragDisabledChanged.emit(isDragDisabled);
 	        }
 	    }
 	    setIsToolboxCollapsed(isCollapsed) {
 	        if (this.isToolboxCollapsed !== isCollapsed) {
 	            this.isToolboxCollapsed = isCollapsed;
-	            this.onIsToolboxCollapsedChanged.forward(isCollapsed);
+	            this.onIsToolboxCollapsedChanged.emit(isCollapsed);
 	        }
 	    }
 	    setIsEditorCollapsed(isCollapsed) {
 	        if (this.isEditorCollapsed !== isCollapsed) {
 	            this.isEditorCollapsed = isCollapsed;
-	            this.onIsEditorCollapsedChanged.forward(isCollapsed);
+	            this.onIsEditorCollapsedChanged.emit(isCollapsed);
 	        }
 	    }
 	    setPreferences(changes, stepId) {
 	        for (const change of changes) {
 	            this.preferenceStorage.setItem(change.key, change.value);
 	        }
-	        this.onPreferencesChanged.forward({ changes, stepId });
+	        this.onPreferencesChanged.emit({ changes, stepId });
 	    }
 	    getPreference(key) {
 	        return this.preferenceStorage.getItem(key);
@@ -4194,7 +4198,7 @@
 	            this.view.render(rootSequence.sequence, parentPlaceIndicator);
 	            this.trySelectStepComponent(this.state.selectedStepId);
 	            this.updateBadges();
-	            this.onRootComponentUpdated.forward();
+	            this.onRootComponentUpdated.emit();
 	        };
 	        this.onClick = (position, target, buttonIndex, altKey) => {
 	            const isPrimaryButton = buttonIndex === 0;
@@ -5262,21 +5266,22 @@
 	        const designerApi = DesignerApi.create(designerContext);
 	        const view = DesignerView.create(placeholder, designerContext, designerApi);
 	        const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
-	        view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.forward);
-	        view.workspace.onRootComponentUpdated.once().then(designer.onReady.forward);
+	        view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.emit);
+	        view.workspace.onRootComponentUpdated.once().then(designer.onReady.emit);
 	        race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
 	            if (definition !== undefined) {
-	                designer.onDefinitionChanged.forward(definition);
+	                designer.onDefinitionChanged.emit(definition);
 	            }
 	            if (selectedStepId !== undefined) {
-	                designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
+	                designer.onSelectedStepIdChanged.emit(designerContext.state.selectedStepId);
 	            }
 	        });
-	        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);
-	        designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.forward);
+	        designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.emit);
+	        designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.emit);
+	        designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.emit);
+	        designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.emit);
+	        designerContext.state.onIsDraggingChanged.subscribe(designer.onIsDraggingChanged.emit);
+	        designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.emit);
 	        return designer;
 	    }
 	    constructor(view, state, walker, historyController, api) {
@@ -5317,6 +5322,10 @@
 	         * @description Fires when the root component and all its children are rerendered.
 	         */
 	        this.onRootComponentUpdated = new SimpleEvent();
+	        /**
+	         * @description Fires when the dragging state has changed. `true` if the step is being dragged, otherwise `false`.
+	         */
+	        this.onIsDraggingChanged = new SimpleEvent();
 	        /**
 	         * @description Fires when any of the designer preferences has changed.
 	         */
@@ -5426,6 +5435,12 @@
 	    isEditorCollapsed() {
 	        return this.state.isEditorCollapsed;
 	    }
+	    /**
+	     * @returns a flag that indicates whether the step is being dragged.
+	     */
+	    isDragging() {
+	        return this.state.isDragging;
+	    }
 	    /**
 	     * @description Sets a flag that indicates whether the editor is collapsed.
 	     */

package/lib/cjs/index.cjs CHANGED Viewed

@@ -131,11 +131,15 @@ class Uid {
 class SimpleEvent {
     constructor() {
         this.listeners = [];
-        this.forward = (value) => {
-            if (this.listeners.length > 0) {
-                this.listeners.forEach(listener => listener(value));
+        this.emit = (value) => {
+            for (const listener of this.listeners) {
+                listener(value);
             }
         };
+        /**
+         * @deprecated Use `emit` method instead.
+         */
+        this.forward = this.emit;
     }
     subscribe(listener) {
         this.listeners.push(listener);
@@ -167,14 +171,14 @@ function race(timeout, a, b, c, d) {
     const value = [undefined, undefined, undefined, undefined];
     const result = new SimpleEvent();
     let scheduled = false;
-    function forward() {
+    function emit() {
         if (scheduled) {
             return;
         }
         scheduled = true;
         setTimeout(() => {
             try {
-                result.forward(value);
+                result.emit(value);
             }
             finally {
                 scheduled = false;
@@ -185,7 +189,7 @@ function race(timeout, a, b, c, d) {
     function subscribe(event, index) {
         event.subscribe(v => {
             value[index] = v;
-            forward();
+            emit();
         });
     }
     subscribe(a, 0);
@@ -202,7 +206,7 @@ function race(timeout, a, b, c, d) {
 class ControlBarApi {
     static create(state, historyController, stateModifier) {
         const api = new ControlBarApi(state, historyController, stateModifier);
-        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.forward);
+        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.emit);
         return api;
     }
     constructor(state, historyController, stateModifier) {
@@ -3098,16 +3102,16 @@ class DesignerState {
     setSelectedStepId(stepId) {
         if (this.selectedStepId !== stepId) {
             this.selectedStepId = stepId;
-            this.onSelectedStepIdChanged.forward(stepId);
+            this.onSelectedStepIdChanged.emit(stepId);
         }
     }
     pushStepIdToFolderPath(stepId) {
         this.folderPath.push(stepId);
-        this.onFolderPathChanged.forward(this.folderPath);
+        this.onFolderPathChanged.emit(this.folderPath);
     }
     setFolderPath(path) {
         this.folderPath = path;
-        this.onFolderPathChanged.forward(path);
+        this.onFolderPathChanged.emit(path);
     }
     tryGetLastStepIdFromFolderPath() {
         return this.folderPath.length > 0 ? this.folderPath[this.folderPath.length - 1] : null;
@@ -3125,50 +3129,50 @@ class DesignerState {
         if (details) {
             Object.assign(event, details);
         }
-        this.onDefinitionChanged.forward(event);
+        this.onDefinitionChanged.emit(event);
     }
     notifyStepUnselectionBlocked(stepId) {
-        this.onStepUnselectionBlocked.forward(stepId);
+        this.onStepUnselectionBlocked.emit(stepId);
     }
     setViewport(viewport) {
         this.viewport = viewport;
-        this.onViewportChanged.forward(viewport);
+        this.onViewportChanged.emit(viewport);
     }
     setIsReadonly(isReadonly) {
         if (this.isReadonly !== isReadonly) {
             this.isReadonly = isReadonly;
-            this.onIsReadonlyChanged.forward(isReadonly);
+            this.onIsReadonlyChanged.emit(isReadonly);
         }
     }
     setIsDragging(isDragging) {
         if (this.isDragging !== isDragging) {
             this.isDragging = isDragging;
-            this.onIsDraggingChanged.forward(isDragging);
+            this.onIsDraggingChanged.emit(isDragging);
         }
     }
     setIsDragDisabled(isDragDisabled) {
         if (this.isDragDisabled !== isDragDisabled) {
             this.isDragDisabled = isDragDisabled;
-            this.onIsDragDisabledChanged.forward(isDragDisabled);
+            this.onIsDragDisabledChanged.emit(isDragDisabled);
         }
     }
     setIsToolboxCollapsed(isCollapsed) {
         if (this.isToolboxCollapsed !== isCollapsed) {
             this.isToolboxCollapsed = isCollapsed;
-            this.onIsToolboxCollapsedChanged.forward(isCollapsed);
+            this.onIsToolboxCollapsedChanged.emit(isCollapsed);
         }
     }
     setIsEditorCollapsed(isCollapsed) {
         if (this.isEditorCollapsed !== isCollapsed) {
             this.isEditorCollapsed = isCollapsed;
-            this.onIsEditorCollapsedChanged.forward(isCollapsed);
+            this.onIsEditorCollapsedChanged.emit(isCollapsed);
         }
     }
     setPreferences(changes, stepId) {
         for (const change of changes) {
             this.preferenceStorage.setItem(change.key, change.value);
         }
-        this.onPreferencesChanged.forward({ changes, stepId });
+        this.onPreferencesChanged.emit({ changes, stepId });
     }
     getPreference(key) {
         return this.preferenceStorage.getItem(key);
@@ -4009,7 +4013,7 @@ class Workspace {
             this.view.render(rootSequence.sequence, parentPlaceIndicator);
             this.trySelectStepComponent(this.state.selectedStepId);
             this.updateBadges();
-            this.onRootComponentUpdated.forward();
+            this.onRootComponentUpdated.emit();
         };
         this.onClick = (position, target, buttonIndex, altKey) => {
             const isPrimaryButton = buttonIndex === 0;
@@ -5077,21 +5081,22 @@ class Designer {
         const designerApi = DesignerApi.create(designerContext);
         const view = DesignerView.create(placeholder, designerContext, designerApi);
         const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
-        view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.forward);
-        view.workspace.onRootComponentUpdated.once().then(designer.onReady.forward);
+        view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.emit);
+        view.workspace.onRootComponentUpdated.once().then(designer.onReady.emit);
         race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
             if (definition !== undefined) {
-                designer.onDefinitionChanged.forward(definition);
+                designer.onDefinitionChanged.emit(definition);
             }
             if (selectedStepId !== undefined) {
-                designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
+                designer.onSelectedStepIdChanged.emit(designerContext.state.selectedStepId);
             }
         });
-        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);
-        designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.forward);
+        designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.emit);
+        designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.emit);
+        designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.emit);
+        designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.emit);
+        designerContext.state.onIsDraggingChanged.subscribe(designer.onIsDraggingChanged.emit);
+        designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.emit);
         return designer;
     }
     constructor(view, state, walker, historyController, api) {
@@ -5132,6 +5137,10 @@ class Designer {
          * @description Fires when the root component and all its children are rerendered.
          */
         this.onRootComponentUpdated = new SimpleEvent();
+        /**
+         * @description Fires when the dragging state has changed. `true` if the step is being dragged, otherwise `false`.
+         */
+        this.onIsDraggingChanged = new SimpleEvent();
         /**
          * @description Fires when any of the designer preferences has changed.
          */
@@ -5241,6 +5250,12 @@ class Designer {
     isEditorCollapsed() {
         return this.state.isEditorCollapsed;
     }
+    /**
+     * @returns a flag that indicates whether the step is being dragged.
+     */
+    isDragging() {
+        return this.state.isDragging;
+    }
     /**
      * @description Sets a flag that indicates whether the editor is collapsed.
      */

package/lib/esm/index.js CHANGED Viewed

@@ -130,11 +130,15 @@ class Uid {
 class SimpleEvent {
     constructor() {
         this.listeners = [];
-        this.forward = (value) => {
-            if (this.listeners.length > 0) {
-                this.listeners.forEach(listener => listener(value));
+        this.emit = (value) => {
+            for (const listener of this.listeners) {
+                listener(value);
             }
         };
+        /**
+         * @deprecated Use `emit` method instead.
+         */
+        this.forward = this.emit;
     }
     subscribe(listener) {
         this.listeners.push(listener);
@@ -166,14 +170,14 @@ function race(timeout, a, b, c, d) {
     const value = [undefined, undefined, undefined, undefined];
     const result = new SimpleEvent();
     let scheduled = false;
-    function forward() {
+    function emit() {
         if (scheduled) {
             return;
         }
         scheduled = true;
         setTimeout(() => {
             try {
-                result.forward(value);
+                result.emit(value);
             }
             finally {
                 scheduled = false;
@@ -184,7 +188,7 @@ function race(timeout, a, b, c, d) {
     function subscribe(event, index) {
         event.subscribe(v => {
             value[index] = v;
-            forward();
+            emit();
         });
     }
     subscribe(a, 0);
@@ -201,7 +205,7 @@ function race(timeout, a, b, c, d) {
 class ControlBarApi {
     static create(state, historyController, stateModifier) {
         const api = new ControlBarApi(state, historyController, stateModifier);
-        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.forward);
+        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.emit);
         return api;
     }
     constructor(state, historyController, stateModifier) {
@@ -3097,16 +3101,16 @@ class DesignerState {
     setSelectedStepId(stepId) {
         if (this.selectedStepId !== stepId) {
             this.selectedStepId = stepId;
-            this.onSelectedStepIdChanged.forward(stepId);
+            this.onSelectedStepIdChanged.emit(stepId);
         }
     }
     pushStepIdToFolderPath(stepId) {
         this.folderPath.push(stepId);
-        this.onFolderPathChanged.forward(this.folderPath);
+        this.onFolderPathChanged.emit(this.folderPath);
     }
     setFolderPath(path) {
         this.folderPath = path;
-        this.onFolderPathChanged.forward(path);
+        this.onFolderPathChanged.emit(path);
     }
     tryGetLastStepIdFromFolderPath() {
         return this.folderPath.length > 0 ? this.folderPath[this.folderPath.length - 1] : null;
@@ -3124,50 +3128,50 @@ class DesignerState {
         if (details) {
             Object.assign(event, details);
         }
-        this.onDefinitionChanged.forward(event);
+        this.onDefinitionChanged.emit(event);
     }
     notifyStepUnselectionBlocked(stepId) {
-        this.onStepUnselectionBlocked.forward(stepId);
+        this.onStepUnselectionBlocked.emit(stepId);
     }
     setViewport(viewport) {
         this.viewport = viewport;
-        this.onViewportChanged.forward(viewport);
+        this.onViewportChanged.emit(viewport);
     }
     setIsReadonly(isReadonly) {
         if (this.isReadonly !== isReadonly) {
             this.isReadonly = isReadonly;
-            this.onIsReadonlyChanged.forward(isReadonly);
+            this.onIsReadonlyChanged.emit(isReadonly);
         }
     }
     setIsDragging(isDragging) {
         if (this.isDragging !== isDragging) {
             this.isDragging = isDragging;
-            this.onIsDraggingChanged.forward(isDragging);
+            this.onIsDraggingChanged.emit(isDragging);
         }
     }
     setIsDragDisabled(isDragDisabled) {
         if (this.isDragDisabled !== isDragDisabled) {
             this.isDragDisabled = isDragDisabled;
-            this.onIsDragDisabledChanged.forward(isDragDisabled);
+            this.onIsDragDisabledChanged.emit(isDragDisabled);
         }
     }
     setIsToolboxCollapsed(isCollapsed) {
         if (this.isToolboxCollapsed !== isCollapsed) {
             this.isToolboxCollapsed = isCollapsed;
-            this.onIsToolboxCollapsedChanged.forward(isCollapsed);
+            this.onIsToolboxCollapsedChanged.emit(isCollapsed);
         }
     }
     setIsEditorCollapsed(isCollapsed) {
         if (this.isEditorCollapsed !== isCollapsed) {
             this.isEditorCollapsed = isCollapsed;
-            this.onIsEditorCollapsedChanged.forward(isCollapsed);
+            this.onIsEditorCollapsedChanged.emit(isCollapsed);
         }
     }
     setPreferences(changes, stepId) {
         for (const change of changes) {
             this.preferenceStorage.setItem(change.key, change.value);
         }
-        this.onPreferencesChanged.forward({ changes, stepId });
+        this.onPreferencesChanged.emit({ changes, stepId });
     }
     getPreference(key) {
         return this.preferenceStorage.getItem(key);
@@ -4008,7 +4012,7 @@ class Workspace {
             this.view.render(rootSequence.sequence, parentPlaceIndicator);
             this.trySelectStepComponent(this.state.selectedStepId);
             this.updateBadges();
-            this.onRootComponentUpdated.forward();
+            this.onRootComponentUpdated.emit();
         };
         this.onClick = (position, target, buttonIndex, altKey) => {
             const isPrimaryButton = buttonIndex === 0;
@@ -5076,21 +5080,22 @@ class Designer {
         const designerApi = DesignerApi.create(designerContext);
         const view = DesignerView.create(placeholder, designerContext, designerApi);
         const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
-        view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.forward);
-        view.workspace.onRootComponentUpdated.once().then(designer.onReady.forward);
+        view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.emit);
+        view.workspace.onRootComponentUpdated.once().then(designer.onReady.emit);
         race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
             if (definition !== undefined) {
-                designer.onDefinitionChanged.forward(definition);
+                designer.onDefinitionChanged.emit(definition);
             }
             if (selectedStepId !== undefined) {
-                designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
+                designer.onSelectedStepIdChanged.emit(designerContext.state.selectedStepId);
             }
         });
-        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);
-        designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.forward);
+        designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.emit);
+        designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.emit);
+        designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.emit);
+        designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.emit);
+        designerContext.state.onIsDraggingChanged.subscribe(designer.onIsDraggingChanged.emit);
+        designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.emit);
         return designer;
     }
     constructor(view, state, walker, historyController, api) {
@@ -5131,6 +5136,10 @@ class Designer {
          * @description Fires when the root component and all its children are rerendered.
          */
         this.onRootComponentUpdated = new SimpleEvent();
+        /**
+         * @description Fires when the dragging state has changed. `true` if the step is being dragged, otherwise `false`.
+         */
+        this.onIsDraggingChanged = new SimpleEvent();
         /**
          * @description Fires when any of the designer preferences has changed.
          */
@@ -5240,6 +5249,12 @@ class Designer {
     isEditorCollapsed() {
         return this.state.isEditorCollapsed;
     }
+    /**
+     * @returns a flag that indicates whether the step is being dragged.
+     */
+    isDragging() {
+        return this.state.isDragging;
+    }
     /**
      * @description Sets a flag that indicates whether the editor is collapsed.
      */

package/lib/index.d.ts CHANGED Viewed

@@ -61,6 +61,10 @@ declare class SimpleEvent<T> {
     private readonly listeners;
     subscribe(listener: SimpleEventListener<T>): void;
     unsubscribe(listener: SimpleEventListener<T>): void;
+    readonly emit: (value: T) => void;
+    /**
+     * @deprecated Use `emit` method instead.
+     */
     readonly forward: (value: T) => void;
     count(): number;
     once(): Promise<T>;
@@ -1391,6 +1395,10 @@ declare class Designer<TDefinition extends Definition = Definition> {
      * @description Fires when the root component and all its children are rerendered.
      */
     readonly onRootComponentUpdated: SimpleEvent<void>;
+    /**
+     * @description Fires when the dragging state has changed. `true` if the step is being dragged, otherwise `false`.
+     */
+    readonly onIsDraggingChanged: SimpleEvent<boolean>;
     /**
      * @description Fires when any of the designer preferences has changed.
      */
@@ -1464,6 +1472,10 @@ declare class Designer<TDefinition extends Definition = Definition> {
      * @returns a flag that indicates whether the editor is collapsed.
      */
     isEditorCollapsed(): boolean;
+    /**
+     * @returns a flag that indicates whether the step is being dragged.
+     */
+    isDragging(): boolean;
     /**
      * @description Sets a flag that indicates whether the editor is collapsed.
      */

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