nocode-js · b4rtaz · Oct 14, 2025 · Oct 14, 2025 · Oct 14, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.31.0
+
+This version introduces a new feature: you can now add a custom icon to placeholders that appear while dragging a step.
+
 # 0.30.5
 
 This version fixes the configuration usage in the `RectPlaceholderDesignerExtension` class.

diff --git a/README.md b/README.md
@@ -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.30.5/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.5/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.5/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.5/dist/index.umd.js"></script>
+<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>
 ```
 
 Call the designer by:

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.30.5",
+	"version": "0.31.0",
 	"author": {
 		"name": "NoCode JS",
 		"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
 	"peerDependencies": {
 		"@angular/common": "12 - 19",
 		"@angular/core": "12 - 19",
-		"sequential-workflow-designer": "^0.30.5"
+		"sequential-workflow-designer": "^0.31.0"
 	},
 	"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.30.5",
-		"sequential-workflow-designer-angular": "^0.30.5",
+		"sequential-workflow-designer": "^0.31.0",
+		"sequential-workflow-designer-angular": "^0.31.0",
 		"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.30.0:
-  version "0.30.0"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.30.0.tgz#94cf034281c6e3409a0fef921d132b67e3562fcd"
-  integrity sha512-7eRPzyZkEF65nhBMmNS4O3u9S0tuWBo07QxJsNjAijQMpkDE3BgMmNDssvjeUwFdKPR1oQdH5H1LzsBAIyXN3Q==
+sequential-workflow-designer-angular@^0.31.0:
+  version "0.31.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.31.0.tgz#c8cabbcd1efa54ad546419a06c2e06c896a21995"
+  integrity sha512-BM3MxNmca5l0tGp7ILWkXbXZPRhPdCDWEiqAtQ8YQ17PCM1SC+A9NXnKqS/Wy3hspDyF8x30TAe6RNbdd45TsQ==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.30.0:
-  version "0.30.0"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.30.0.tgz#98a11796ab3323030048965f8849d1b93a79e8c4"
-  integrity sha512-SwjlRMhO6auFpB9DiYm+1Lb1KHbLL7h66GgOEs60Ej4n0Y5yDTN9ifDLGOiMvUSWqTe3xkfEEsVQ/WLuW9Lz8Q==
+sequential-workflow-designer@^0.31.0:
+  version "0.31.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.31.0.tgz#0caf70148c99425fe1fdfd1f59af0727f472337c"
+  integrity sha512-M1mPf79u5swztIbUf+Pjln4Jro8iUHA0mZc9EUwsZPi9o/MFz3w/YYiYndf385U1kqTrlXHrhB8NkugVthonBg==
   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.30.5",
-		"sequential-workflow-designer-react": "^0.30.5"
+		"sequential-workflow-designer": "^0.31.0",
+		"sequential-workflow-designer-react": "^0.31.0"
 	},
 	"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.30.5",
-		"sequential-workflow-designer-svelte": "^0.30.5"
+		"sequential-workflow-designer": "^0.31.0",
+		"sequential-workflow-designer-svelte": "^0.31.0"
 	},
 	"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.30.5",
+	"version": "0.31.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/src/designer-extension.ts b/designer/src/designer-extension.ts
@@ -222,7 +222,13 @@ export enum PlaceholderGapOrientation {
 export interface PlaceholderExtension {
 	getGapSize(orientation: PlaceholderGapOrientation): Vector;
 	createForGap(parentElement: SVGElement, sequence: Sequence, index: number, orientation: PlaceholderGapOrientation): Placeholder;
-	createForArea(parentElement: SVGElement, size: Vector, direction: PlaceholderDirection, sequence: Sequence, index: number): Placeholder;
+	createForArea(
+		parentElement: SVGElement,
+		size: Vector,
+		direction: PlaceholderDirection | null,
+		sequence: Sequence,
+		index: number
+	): Placeholder;
 }
 
 // ViewportControllerExtension

diff --git a/designer/src/workspace/component.ts b/designer/src/workspace/component.ts
@@ -120,7 +120,6 @@ export interface Placeholder {
 }
 
 export enum PlaceholderDirection {
-	gap = 0,
 	in = 1,
 	out = 2
 }

diff --git a/designer/src/workspace/placeholder/rect-placeholder-configuration.ts b/designer/src/workspace/placeholder/rect-placeholder-configuration.ts
@@ -2,5 +2,6 @@ export interface RectPlaceholderConfiguration {
 	gapWidth: number;
 	gapHeight: number;
 	radius: number;
+	iconD?: string;
 	iconSize: number;
 }
diff --git a/designer/src/workspace/placeholder/rect-placeholder-extension.ts b/designer/src/workspace/placeholder/rect-placeholder-extension.ts
@@ -1,5 +1,5 @@
 import { Sequence } from '../../definition';
-import { Vector } from '../../core';
+import { Icons, Vector } from '../../core';
 import { PlaceholderExtension, PlaceholderGapOrientation } from '../../designer-extension';
 import { PlaceholderDirection, Placeholder } from '../component';
 import { RectPlaceholder } from './rect-placeholder';
@@ -31,29 +31,27 @@ export class RectPlaceholderExtension implements PlaceholderExtension {
 		return RectPlaceholder.create(
 			parent,
 			gapSize,
-			PlaceholderDirection.gap,
 			parentSequence,
 			index,
 			this.configuration.radius,
+			this.configuration.iconD,
 			this.configuration.iconSize
 		);
 	}
 
 	public createForArea(
 		parent: SVGElement,
 		size: Vector,
-		direction: PlaceholderDirection,
+		direction: PlaceholderDirection | null,
 		parentSequence: Sequence,
 		index: number
 	): Placeholder {
-		return RectPlaceholder.create(
-			parent,
-			size,
-			direction,
-			parentSequence,
-			index,
-			this.configuration.radius,
-			this.configuration.iconSize
-		);
+		let iconD: string | undefined;
+		if (direction === PlaceholderDirection.in) {
+			iconD = Icons.folderIn;
+		} else if (direction === PlaceholderDirection.out) {
+			iconD = Icons.folderOut;
+		}
+		return RectPlaceholder.create(parent, size, parentSequence, index, this.configuration.radius, iconD, this.configuration.iconSize);
 	}
 }
diff --git a/designer/src/workspace/placeholder/rect-placeholder-view.ts b/designer/src/workspace/placeholder/rect-placeholder-view.ts
@@ -1,15 +1,15 @@
 import { Dom } from '../../core';
 import { Icons } from '../../core/icons';
-import { PlaceholderDirection, PlaceholderView } from '../component';
+import { PlaceholderView } from '../component';
 
 export class RectPlaceholderView implements PlaceholderView {
 	public static create(
 		parent: SVGElement,
 		width: number,
 		height: number,
 		radius: number,
-		iconSize: number,
-		direction: PlaceholderDirection
+		iconD: string | undefined,
+		iconSize: number
 	): RectPlaceholderView {
 		const g = Dom.svg('g', {
 			visibility: 'hidden',
@@ -26,8 +26,7 @@ export class RectPlaceholderView implements PlaceholderView {
 		});
 		g.appendChild(rect);
 
-		if (direction) {
-			const iconD = direction === PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
+		if (iconD) {
 			const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
 			Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
 		}

diff --git a/designer/src/workspace/placeholder/rect-placeholder.ts b/designer/src/workspace/placeholder/rect-placeholder.ts
@@ -1,20 +1,20 @@
 import { Vector } from '../../core';
 import { Sequence } from '../../definition';
-import { Placeholder, PlaceholderDirection } from '../component';
+import { Placeholder } from '../component';
 import { RectPlaceholderView } from './rect-placeholder-view';
 
 export class RectPlaceholder implements Placeholder {
 	public static create(
 		parent: SVGElement,
 		size: Vector,
-		direction: PlaceholderDirection,
-		sequence: Sequence,
+		parentSequence: Sequence,
 		index: number,
 		radius: number,
+		iconD: string | undefined,
 		iconSize: number
 	): RectPlaceholder {
-		const view = RectPlaceholderView.create(parent, size.x, size.y, radius, iconSize, direction);
-		return new RectPlaceholder(view, sequence, index);
+		const view = RectPlaceholderView.create(parent, size.x, size.y, radius, iconD, iconSize);
+		return new RectPlaceholder(view, parentSequence, index);
 	}
 
 	public constructor(

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.30.5';
+const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.31.0';
 
 embedScript(`${baseUrl}/dist/index.umd.js`);
 embedStylesheet(`${baseUrl}/css/designer.css`);

diff --git a/examples/assets/triggers.js b/examples/assets/triggers.js
@@ -127,6 +127,13 @@ const configuration = {
 			view: {
 				start: null
 			}
+		}),
+		sequentialWorkflowDesigner.RectPlaceholderDesignerExtension.create({
+			gapWidth: 88,
+			gapHeight: 24,
+			radius: 6,
+			iconD: 'M21.2 27.04H5.6v-5.19h15.6V6.29h5.2v15.56H42v5.19H26.4V42.6h-5.2V27.04z',
+			iconSize: 16
 		})
 	]
 };

diff --git a/react/package.json b/react/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-react",
 	"description": "React wrapper for Sequential Workflow Designer component.",
-	"version": "0.30.5",
+	"version": "0.31.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -47,7 +47,7 @@
 	"peerDependencies": {
 		"react": ">=18.2.0",
 		"react-dom": ">=18.2.0",
-		"sequential-workflow-designer": "^0.30.5"
+		"sequential-workflow-designer": "^0.31.0"
 	},
 	"devDependencies": {
 		"@rollup/plugin-node-resolve": "^16.0.1",
@@ -63,7 +63,7 @@
 		"prettier": "^3.2.5",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.30.5",
+		"sequential-workflow-designer": "^0.31.0",
 		"rollup": "^4.40.0",
 		"rollup-plugin-dts": "^6.2.1",
 		"rollup-plugin-typescript2": "^0.36.0",

diff --git a/svelte/package.json b/svelte/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-svelte",
 	"description": "Svelte wrapper for Sequential Workflow Designer component.",
-	"version": "0.30.5",
+	"version": "0.31.0",
 	"license": "MIT",
 	"scripts": {
 		"prepare": "cp ../LICENSE LICENSE",
@@ -28,10 +28,10 @@
 	],
 	"peerDependencies": {
 		"svelte": "^4.0.0",
-		"sequential-workflow-designer": "^0.30.5"
+		"sequential-workflow-designer": "^0.31.0"
 	},
 	"devDependencies": {
-		"sequential-workflow-designer": "^0.30.5",
+		"sequential-workflow-designer": "^0.31.0",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@sveltejs/package": "^2.0.0",
-Original file line number
+Diff line change
@@ Expand Up / @@ -120,7 +120,6 @@ export interface Placeholder { @@
     }
     export enum PlaceholderDirection {
-    	gap = 0,
     	in = 1,
     	out = 2
     }
@@ Expand Down @@