nocode-js · b4rtaz · May 31, 2026 · May 31, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.37.4
+
+This version adds a new event: `onIsDraggingChanged`. This event is triggered when the dragging state of the designer changes. Additionally, the `Designer` class now includes the `isDragging()` method, which allows you to check if the designer is currently in a dragging state.
+
 # 0.37.3
 
 Added support for Angular 21.

diff --git a/README.md b/README.md
@@ -107,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.3/css/designer.css" rel="stylesheet" />
-  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.3/css/designer-light.css" rel="stylesheet" />
-  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.3/css/designer-dark.css" rel="stylesheet" />
-  <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.3/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>
 ```
 

diff --git a/angular/designer/package.json b/angular/designer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-angular",
 	"description": "Angular wrapper for Sequential Workflow Designer component.",
-	"version": "0.37.3",
+	"version": "0.37.4",
 	"author": {
 		"name": "NoCode JS",
 		"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
 	"peerDependencies": {
 		"@angular/common": "12 - 21",
 		"@angular/core": "12 - 21",
-		"sequential-workflow-designer": "^0.37.3"
+		"sequential-workflow-designer": "^0.37.4"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"

diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json
@@ -26,8 +26,8 @@
 		"@angular/platform-browser-dynamic": "^17.3.9",
 		"@angular/router": "^17.3.9",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.37.3",
-		"sequential-workflow-designer-angular": "^0.37.3",
+		"sequential-workflow-designer": "^0.37.4",
+		"sequential-workflow-designer-angular": "^0.37.4",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.14.6"
 	},

diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock
@@ -6744,17 +6744,17 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.37.2:
-  version "0.37.2"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.37.2.tgz#a40d34f6f869358101b9d46e3c7d10580ef4936e"
-  integrity sha512-TFz+3qVjIFpQxk0O9su2EpcnebpohmZsdMTag76+7AP6GPD1pLQbTRVuXDATmlj5S+1aVil7VFqE0GNQ0IxSWg==
+sequential-workflow-designer-angular@^0.37.4:
+  version "0.37.4"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.37.4.tgz#453290f1ec02fa5d22a75a044713a5c33bd6d27c"
+  integrity sha512-Q4rQi2vhDQK/wVkmTBNX6ldLkT8GN9qdyYTnvgsGVjtZxcF9qqwToLeMoAXidDP0qjvd0In27K6TDMfjgMsYyw==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.37.2:
-  version "0.37.2"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.37.2.tgz#d311d769f58ed1b2a1627f29ad0538707e3d0451"
-  integrity sha512-AGtv8GJ9SF+mIGtDzyEZTn1X3VkcgMIZzV15WCAOweMGec/NTS9zw8qraWPoSBkLdNDQtuK4/jbUxLnwJS4N9g==
+sequential-workflow-designer@^0.37.4:
+  version "0.37.4"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.37.4.tgz#6a6abfa56b1cec7e07bc748da448c2f944f185e4"
+  integrity sha512-sjQy7yl265Ei4Pd3uX7CxJ2BICtPA73b3T7hpn1jQGqDlBqHofHw8BZvnM5UB0re5/vAuvsGnhldeAxjprJT7g==
   dependencies:
     sequential-workflow-model "^0.2.0"
 

diff --git a/demos/react-app/package.json b/demos/react-app/package.json
@@ -6,8 +6,8 @@
 	"dependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.37.3",
-		"sequential-workflow-designer-react": "^0.37.3"
+		"sequential-workflow-designer": "^0.37.4",
+		"sequential-workflow-designer-react": "^0.37.4"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",

diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json
@@ -16,8 +16,8 @@
 		"eslint": "eslint ./src --ext .ts"
 	},
 	"dependencies": {
-		"sequential-workflow-designer": "^0.37.3",
-		"sequential-workflow-designer-svelte": "^0.37.3"
+		"sequential-workflow-designer": "^0.37.4",
+		"sequential-workflow-designer-svelte": "^0.37.4"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^2.0.3",

diff --git a/designer/package.json b/designer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer",
 	"description": "Customizable no-code component for building flow-based programming applications.",
-	"version": "0.37.3",
+	"version": "0.37.4",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/src/api/control-bar-api.ts b/designer/src/api/control-bar-api.ts
@@ -17,7 +17,7 @@ export class ControlBarApi {
 			state.onSelectedStepIdChanged,
 			state.onIsDragDisabledChanged,
 			api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined
-		).subscribe(api.onStateChanged.forward);
+		).subscribe(api.onStateChanged.emit);
 		return api;
 	}
 

diff --git a/designer/src/core/simple-event-race.spec.ts b/designer/src/core/simple-event-race.spec.ts
@@ -17,8 +17,8 @@ describe('race', () => {
 			done();
 		});
 
-		a.forward(0x128);
-		b.forward(0x256);
+		a.emit(0x128);
+		b.emit(0x256);
 	});
 
 	it('forwards first event only', done => {
@@ -28,7 +28,7 @@ describe('race', () => {
 			done();
 		});
 
-		a.forward(0x128);
+		a.emit(0x128);
 	});
 
 	it('forwards second event only', done => {
@@ -38,6 +38,6 @@ describe('race', () => {
 			done();
 		});
 
-		b.forward(0x256);
+		b.emit(0x256);
 	});
 });
diff --git a/designer/src/core/simple-event-race.ts b/designer/src/core/simple-event-race.ts
@@ -11,14 +11,14 @@ export function race<A, B, C, D>(
 	const result = new SimpleEvent<[A?, B?, C?, D?]>();
 	let scheduled = false;
 
-	function forward() {
+	function emit() {
 		if (scheduled) {
 			return;
 		}
 		scheduled = true;
 		setTimeout(() => {
 			try {
-				result.forward(value);
+				result.emit(value);
 			} finally {
 				scheduled = false;
 				value.fill(undefined);
@@ -29,7 +29,7 @@ export function race<A, B, C, D>(
 	function subscribe<T extends A | B | C | D>(event: SimpleEvent<T>, index: number) {
 		event.subscribe(v => {
 			value[index] = v;
-			forward();
+			emit();
 		});
 	}
 

diff --git a/designer/src/core/simple-event.spec.ts b/designer/src/core/simple-event.spec.ts
@@ -10,13 +10,13 @@ describe('SimpleEvent', () => {
 		}
 
 		e.subscribe(listener);
-		e.forward();
+		e.emit();
 
 		expect(counter).toEqual(1);
 		expect(e.count()).toEqual(1);
 
 		e.unsubscribe(listener);
-		e.forward();
+		e.emit();
 
 		expect(counter).toEqual(1);
 		expect(e.count()).toEqual(0);
@@ -28,10 +28,10 @@ describe('SimpleEvent', () => {
 
 		e.once().then(v => (lastValue = v));
 
-		e.forward(1);
-		e.forward(2);
-		e.forward(3);
-		e.forward(4);
+		e.emit(1);
+		e.emit(2);
+		e.emit(3);
+		e.emit(4);
 
 		setTimeout(() => {
 			expect(lastValue).toEqual(1);

diff --git a/designer/src/core/simple-event.ts b/designer/src/core/simple-event.ts
@@ -14,12 +14,17 @@ export class SimpleEvent<T> {
 		}
 	}
 
-	public readonly forward = (value: T) => {
-		if (this.listeners.length > 0) {
-			this.listeners.forEach(listener => listener(value));
+	public readonly emit = (value: T) => {
+		for (const listener of this.listeners) {
+			listener(value);
 		}
 	};
 
+	/**
+	 * @deprecated Use `emit` method instead.
+	 */
+	public readonly forward = this.emit;
+
 	public count(): number {
 		return this.listeners.length;
 	}

diff --git a/designer/src/designer-state.ts b/designer/src/designer-state.ts
@@ -45,18 +45,18 @@ export class DesignerState {
 	public setSelectedStepId(stepId: string | null) {
 		if (this.selectedStepId !== stepId) {
 			this.selectedStepId = stepId;
-			this.onSelectedStepIdChanged.forward(stepId);
+			this.onSelectedStepIdChanged.emit(stepId);
 		}
 	}
 
 	public pushStepIdToFolderPath(stepId: string) {
 		this.folderPath.push(stepId);
-		this.onFolderPathChanged.forward(this.folderPath);
+		this.onFolderPathChanged.emit(this.folderPath);
 	}
 
 	public setFolderPath(path: string[]) {
 		this.folderPath = path;
-		this.onFolderPathChanged.forward(path);
+		this.onFolderPathChanged.emit(path);
 	}
 
 	public tryGetLastStepIdFromFolderPath(): string | null {
@@ -77,58 +77,58 @@ export class DesignerState {
 		if (details) {
 			Object.assign(event, details);
 		}
-		this.onDefinitionChanged.forward(event);
+		this.onDefinitionChanged.emit(event);
 	}
 
 	public notifyStepUnselectionBlocked(stepId: string | null) {
-		this.onStepUnselectionBlocked.forward(stepId);
+		this.onStepUnselectionBlocked.emit(stepId);
 	}
 
 	public setViewport(viewport: Viewport) {
 		this.viewport = viewport;
-		this.onViewportChanged.forward(viewport);
+		this.onViewportChanged.emit(viewport);
 	}
 
 	public setIsReadonly(isReadonly: boolean) {
 		if (this.isReadonly !== isReadonly) {
 			this.isReadonly = isReadonly;
-			this.onIsReadonlyChanged.forward(isReadonly);
+			this.onIsReadonlyChanged.emit(isReadonly);
 		}
 	}
 
 	public setIsDragging(isDragging: boolean) {
 		if (this.isDragging !== isDragging) {
 			this.isDragging = isDragging;
-			this.onIsDraggingChanged.forward(isDragging);
+			this.onIsDraggingChanged.emit(isDragging);
 		}
 	}
 
 	public setIsDragDisabled(isDragDisabled: boolean) {
 		if (this.isDragDisabled !== isDragDisabled) {
 			this.isDragDisabled = isDragDisabled;
-			this.onIsDragDisabledChanged.forward(isDragDisabled);
+			this.onIsDragDisabledChanged.emit(isDragDisabled);
 		}
 	}
 
 	public setIsToolboxCollapsed(isCollapsed: boolean) {
 		if (this.isToolboxCollapsed !== isCollapsed) {
 			this.isToolboxCollapsed = isCollapsed;
-			this.onIsToolboxCollapsedChanged.forward(isCollapsed);
+			this.onIsToolboxCollapsedChanged.emit(isCollapsed);
 		}
 	}
 
 	public setIsEditorCollapsed(isCollapsed: boolean) {
 		if (this.isEditorCollapsed !== isCollapsed) {
 			this.isEditorCollapsed = isCollapsed;
-			this.onIsEditorCollapsedChanged.forward(isCollapsed);
+			this.onIsEditorCollapsedChanged.emit(isCollapsed);
 		}
 	}
 
 	public setPreferences(changes: PreferenceChange[], stepId: string) {
 		for (const change of changes) {
 			this.preferenceStorage.setItem(change.key, change.value);
 		}
-		this.onPreferencesChanged.forward({ changes, stepId });
+		this.onPreferencesChanged.emit({ changes, stepId });
 	}
 
 	public getPreference(key: string): string | null {

diff --git a/designer/src/designer.ts b/designer/src/designer.ts
@@ -51,25 +51,26 @@ export class Designer<TDefinition extends Definition = Definition> {
 			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 as DefinitionChangedEvent<TDef>);
+					designer.onDefinitionChanged.emit(definition as DefinitionChangedEvent<TDef>);
 				}
 				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;
 	}
 
@@ -121,6 +122,11 @@ export class Designer<TDefinition extends Definition = Definition> {
 	 */
 	public readonly onRootComponentUpdated = new SimpleEvent<void>();
 
+	/**
+	 * @description Fires when the dragging state has changed. `true` if the step is being dragged, otherwise `false`.
+	 */
+	public readonly onIsDraggingChanged = new SimpleEvent<boolean>();
+
 	/**
 	 * @description Fires when any of the designer preferences has changed.
 	 */
@@ -247,6 +253,13 @@ export class Designer<TDefinition extends Definition = Definition> {
 		return this.state.isEditorCollapsed;
 	}
 
+	/**
+	 * @returns a flag that indicates whether the step is being dragged.
+	 */
+	public isDragging(): boolean {
+		return this.state.isDragging;
+	}
+
 	/**
 	 * @description Sets a flag that indicates whether the editor is collapsed.
 	 */

diff --git a/designer/src/workspace/workspace.ts b/designer/src/workspace/workspace.ts
@@ -127,7 +127,7 @@ export class Workspace implements WorkspaceController {
 		this.trySelectStepComponent(this.state.selectedStepId);
 		this.updateBadges();
 
-		this.onRootComponentUpdated.forward();
+		this.onRootComponentUpdated.emit();
 	};
 
 	public updateBadges() {

diff --git a/examples/assets/lib.js b/examples/assets/lib.js
@@ -13,7 +13,7 @@ function embedStylesheet(url) {
 	document.write(`<link href="${url}" rel="stylesheet">`);
 }
 
-const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.3';
+const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.4';
 
 embedScript(`${baseUrl}/dist/index.umd.js`);
 embedStylesheet(`${baseUrl}/css/designer.css`);