nocode-js · b4rtaz · Oct 25, 2025 · Oct 25, 2025 · Oct 25, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.34.1
+
+This version adds the ability to configure whether the regions of the switch step component and the container step component are clickable. By default, these regions are clickable; when disabled, the components can only be dragged by their labels or icons.
+
 # 0.33.1
 
 This version fixes a bug with the rendering of the `drop-shadow` filter in some browsers.

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.33.1/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.1/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.1/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.1/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/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.33.1",
+	"version": "0.34.1",
 	"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.33.1"
+		"sequential-workflow-designer": "^0.34.1"
 	},
 	"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.33.1",
-		"sequential-workflow-designer-angular": "^0.33.1",
+		"sequential-workflow-designer": "^0.34.1",
+		"sequential-workflow-designer-angular": "^0.34.1",
 		"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.33.1:
-  version "0.33.1"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.33.1.tgz#7f2db4a4cd510c2ed75607442cb86bc046f8ec17"
-  integrity sha512-3rYJtKZJ9V/JFOxZ8r22L7wFE2ZuiX/rlE+wguzTyrqxCI+fjRQyLT1NKDnuFU2pxbCyz0mMVfOpBN2DBb59UQ==
+sequential-workflow-designer-angular@^0.34.1:
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.34.1.tgz#f10aa52db9be0268cb869cb582165292a78e5af3"
+  integrity sha512-0nOuT4L7k1PPeFQP2XMZxq7XKNDumqSEj3natQfaB/+PuOPE4Dy2hfD552sw7MNTdPRkMzlIPA7JmYdpq5AZbw==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.33.1:
-  version "0.33.1"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.33.1.tgz#227e99cf468d8ecc315d8e200f8ebba3c790c494"
-  integrity sha512-snozputiOUFuv3Zw2ilpksqjI5rSvEVk/8Y704u7K2uKL7q5xpXCcxkBUQCzQIrDMa9/3jwqgKhKPG9PzJk20w==
+sequential-workflow-designer@^0.34.1:
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.34.1.tgz#08f9d15ac467f743a5ccae3ef64dea99922b86ea"
+  integrity sha512-pvb3sBh1ARNtB+jjeVfrH98QtKXhgff91lPkkJkwlyMHTVoKly1CJxtUb3ADCcY5mze0Zv88GI3Eoz8jATyg2Q==
   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.33.1",
-		"sequential-workflow-designer-react": "^0.33.1"
+		"sequential-workflow-designer": "^0.34.1",
+		"sequential-workflow-designer-react": "^0.34.1"
 	},
 	"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.33.1",
-		"sequential-workflow-designer-svelte": "^0.33.1"
+		"sequential-workflow-designer": "^0.34.1",
+		"sequential-workflow-designer-svelte": "^0.34.1"
 	},
 	"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.33.1",
+	"version": "0.34.1",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/src/api/viewport-api.ts b/designer/src/api/viewport-api.ts
@@ -38,7 +38,12 @@ export class ViewportApi {
 		const componentPosition = clientPosition.subtract(canvasPosition);
 
 		const componentSize = new Vector(component.view.width, component.view.height);
-		const viewport = this.viewportController.getFocusedOnComponent(componentPosition, componentSize);
+		const viewport = this.viewportController.getFocusedOnComponent(
+			componentPosition,
+			componentSize,
+			component.step.componentType,
+			component.view.g
+		);
 		this.animator.execute(viewport);
 	}
 

diff --git a/designer/src/designer-extension.ts b/designer/src/designer-extension.ts
@@ -241,7 +241,7 @@ export interface ViewportController {
 	smoothDeltaYLimit: number;
 	getDefault(): Viewport;
 	getZoomed(direction: boolean): Viewport | null;
-	getFocusedOnComponent(componentPosition: Vector, componentSize: Vector): Viewport;
+	getFocusedOnComponent(componentPosition: Vector, componentSize: Vector, componentType: string, componentElement: SVGElement): Viewport;
 	getNextScale(scale: number, direction: boolean): NextScale;
 	limitScale(scale: number): number;
 }

diff --git a/designer/src/workspace/container-step/container-step-component-view-configuration.ts b/designer/src/workspace/container-step/container-step-component-view-configuration.ts
@@ -8,4 +8,9 @@ export interface ContainerStepComponentViewConfiguration {
 	inputIconSize: number;
 	autoHideInputOnDrag: boolean;
 	label: LabelViewConfiguration;
+
+	/**
+	 * If `true`, the entire region of the switch step is clickable; otherwise, only the labels and icon are clickable.
+	 */
+	isRegionClickable: boolean;
 }
diff --git a/designer/src/workspace/container-step/container-step-component-view.spec.ts b/designer/src/workspace/container-step/container-step-component-view.spec.ts
@@ -34,6 +34,7 @@ describe('ContainerStepComponentView', () => {
 			inputSize: 14,
 			inputRadius: 4,
 			autoHideInputOnDrag: true,
+			isRegionClickable: true,
 			paddingTop: 20,
 			paddingX: 20,
 			label: {

diff --git a/designer/src/workspace/container-step/container-step-component-view.ts b/designer/src/workspace/container-step/container-step-component-view.ts
@@ -54,11 +54,16 @@ export const createContainerStepComponentViewFactory =
 					return regionView.getClientPosition();
 				},
 				resolveClick(click: ClickDetails): true | ClickCommand | null {
-					const result = regionView.resolveClick(click);
-					return result === true || (result === null && g.contains(click.element)) ? true : result;
+					if (cfg.isRegionClickable) {
+						const result = regionView.resolveClick(click);
+						if (result !== null) {
+							return result;
+						}
+					}
+					return labelView.g.contains(click.element) || (inputView && inputView.g.contains(click.element)) ? true : null;
 				},
 				setIsDragging(isDragging: boolean) {
-					if (cfg.autoHideInputOnDrag && inputView) {
+					if (inputView && cfg.autoHideInputOnDrag) {
 						inputView.setIsHidden(isDragging);
 					}
 				},

diff --git a/designer/src/workspace/container-step/container-step-extension.ts b/designer/src/workspace/container-step/container-step-extension.ts
@@ -11,6 +11,7 @@ const defaultConfiguration: ContainerStepExtensionConfiguration = {
 		inputRadius: 4,
 		inputIconSize: 14,
 		autoHideInputOnDrag: true,
+		isRegionClickable: true,
 		label: {
 			height: 22,
 			paddingX: 10,

diff --git a/designer/src/workspace/switch-step/switch-step-component-view-configuration.ts b/designer/src/workspace/switch-step/switch-step-component-view-configuration.ts
@@ -18,6 +18,10 @@ export interface SwitchStepComponentViewConfiguration {
 	noBranchPaddingBottom: number;
 	inputSize: number;
 	inputIconSize: number;
+	/**
+	 * If `true`, the entire region of the switch step is clickable; otherwise, only the labels and icon are clickable.
+	 */
+	isRegionClickable: boolean;
 	autoHideInputOnDrag: boolean;
 	inputRadius: number;
 	nameLabel: LabelViewConfiguration;

diff --git a/designer/src/workspace/switch-step/switch-step-component-view.spec.ts b/designer/src/workspace/switch-step/switch-step-component-view.spec.ts
@@ -50,6 +50,7 @@ describe('SwitchStepComponentView', () => {
 				inputIconSize: 14,
 				inputRadius: 4,
 				autoHideInputOnDrag: true,
+				isRegionClickable: true,
 				branchNameLabel: labelViewCfg,
 				nameLabel: labelViewCfg
 			},

diff --git a/designer/src/workspace/switch-step/switch-step-component-view.ts b/designer/src/workspace/switch-step/switch-step-component-view.ts
@@ -18,6 +18,7 @@ function createView(
 	joinX: number,
 	viewContext: StepComponentViewContext,
 	sequenceComponents: SequenceComponent[] | null,
+	labelViews: LabelView[],
 	regionView: RegionView,
 	cfg: SwitchStepComponentViewConfiguration
 ): StepComponentView {
@@ -40,11 +41,16 @@ function createView(
 			return regionView.getClientPosition();
 		},
 		resolveClick(click: ClickDetails): true | ClickCommand | null {
-			const result = regionView.resolveClick(click);
-			return result === true || (result === null && g.contains(click.element)) ? true : result;
+			if (cfg.isRegionClickable) {
+				const result = regionView.resolveClick(click);
+				if (result !== null) {
+					return result;
+				}
+			}
+			return labelViews.some(v => v.g.contains(click.element) || (inputView && inputView.g.contains(click.element))) ? true : null;
 		},
 		setIsDragging(isDragging: boolean) {
-			if (cfg.autoHideInputOnDrag && inputView) {
+			if (inputView && cfg.autoHideInputOnDrag) {
 				inputView.setIsHidden(isDragging);
 			}
 		},
@@ -77,16 +83,18 @@ export const createSwitchStepComponentViewFactory =
 				Dom.translate(nameLabelView.g, joinX, 0);
 				JoinView.createStraightJoin(g, new Vector(joinX, 0), height);
 
-				return createView(g, width, height, joinX, viewContext, null, regionView, cfg);
+				return createView(g, width, height, joinX, viewContext, null, [nameLabelView], regionView, cfg);
 			}
 
-			const branchComponents: SequenceComponent[] = [];
-			const branchLabelViews: LabelView[] = [];
-			const branchSizes: BranchSize[] = [];
+			const branchComponents = new Array<SequenceComponent>(branchNames.length);
+			const branchSizes = new Array<BranchSize>(branchNames.length);
+			const labelViews = new Array<LabelView>(branchNames.length + 1);
+			labelViews[branchNames.length] = nameLabelView;
+
 			let totalBranchesWidth = 0;
 			let maxBranchesHeight = 0;
 
-			branchNames.forEach(branchName => {
+			branchNames.forEach((branchName, i) => {
 				const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
 				const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
 				const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
@@ -106,9 +114,9 @@ export const createSwitchStepComponentViewFactory =
 				totalBranchesWidth += width;
 				maxBranchesHeight = Math.max(maxBranchesHeight, component.view.height);
 
-				branchComponents.push(component);
-				branchLabelViews.push(labelView);
-				branchSizes.push({ width, branchOffsetLeft, offsetX, joinX });
+				branchComponents[i] = component;
+				branchSizes[i] = { width, branchOffsetLeft, offsetX, joinX };
+				labelViews[i] = labelView;
 			});
 
 			const centerBranchIndex = Math.floor(branchNames.length / 2);
@@ -135,7 +143,7 @@ export const createSwitchStepComponentViewFactory =
 				const branchSize = branchSizes[i];
 				const branchOffsetLeft = switchOffsetLeft + branchSize.offsetX + branchSize.branchOffsetLeft;
 
-				Dom.translate(branchLabelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
+				Dom.translate(labelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
 				Dom.translate(component.view.g, branchOffsetLeft, branchOffsetTop);
 
 				if (component.hasOutput && stepContext.isOutputConnected) {
@@ -183,7 +191,7 @@ export const createSwitchStepComponentViewFactory =
 			regions[regions.length - 1] += switchOffsetRight;
 			const regionView = regionViewBuilder(g, regions, viewHeight);
 
-			return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, regionView, cfg);
+			return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, labelViews, regionView, cfg);
 		});
 	};
 

diff --git a/designer/src/workspace/switch-step/switch-step-extension.ts b/designer/src/workspace/switch-step/switch-step-extension.ts
@@ -15,6 +15,7 @@ const defaultViewConfiguration: SwitchStepComponentViewConfiguration = {
 	inputIconSize: 14,
 	inputRadius: 4,
 	autoHideInputOnDrag: true,
+	isRegionClickable: true,
 	branchNameLabel: {
 		height: 22,
 		paddingX: 10,

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

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.33.1",
+	"version": "0.34.1",
 	"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.33.1"
+		"sequential-workflow-designer": "^0.34.1"
 	},
 	"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.33.1",
+		"sequential-workflow-designer": "^0.34.1",
 		"rollup": "^4.40.0",
 		"rollup-plugin-dts": "^6.2.1",
 		"rollup-plugin-typescript2": "^0.36.0",

diff --git a/scripts/publish.sh b/scripts/publish.sh
@@ -1,5 +1,7 @@
 #!/bin/bash
 
+set -e
+
 cd "$(dirname "${BASH_SOURCE[0]}")"
 
 cd ../designer

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.33.1",
+	"version": "0.34.1",
 	"license": "MIT",
 	"scripts": {
 		"prepare": "cp ../LICENSE LICENSE",
@@ -28,10 +28,10 @@
 	],
 	"peerDependencies": {
 		"svelte": "^4.0.0",
-		"sequential-workflow-designer": "^0.33.1"
+		"sequential-workflow-designer": "^0.34.1"
 	},
 	"devDependencies": {
-		"sequential-workflow-designer": "^0.33.1",
+		"sequential-workflow-designer": "^0.34.1",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@sveltejs/package": "^2.0.0",