0.29.0.

b4rtaz · b4rtaz · commit 3098bda2a5fd · 2025-04-19T10:36:46.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.29.0
+
+This version adds support for 0 branches to the switch step. The switch step can now have 0 branches.
+
 # 0.28.0
 
 This update modifies the custom context menu in the pro version. The context menu items provider now retrieves the parent sequence of the selected workspace root sequence. If the root sequence is a folder sequence, the parent sequence is the folder sequence.
diff --git a/README.md b/README.md
@@ -104,10 +104,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.28.0/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.28.0/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.28.0/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.28.0/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.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.28.0",
+	"version": "0.29.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.28.0"
+		"sequential-workflow-designer": "^0.29.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.28.0",
-		"sequential-workflow-designer-angular": "^0.28.0",
+		"sequential-workflow-designer": "^0.29.0",
+		"sequential-workflow-designer-angular": "^0.29.0",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.14.6"
 	},
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.28.0",
-		"sequential-workflow-designer-react": "^0.28.0"
+		"sequential-workflow-designer": "^0.29.0",
+		"sequential-workflow-designer-react": "^0.29.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.28.0",
-		"sequential-workflow-designer-svelte": "^0.28.0"
+		"sequential-workflow-designer": "^0.29.0",
+		"sequential-workflow-designer-svelte": "^0.29.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.28.0",
+	"version": "0.29.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -78,7 +78,7 @@
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"devDependencies": {
-		"@rollup/plugin-node-resolve": "^15.0.1",
+		"@rollup/plugin-node-resolve": "^16.0.1",
 		"@types/jasmine": "^4.3.1",
 		"@typescript-eslint/eslint-plugin": "^5.47.0",
 		"@typescript-eslint/parser": "^5.47.0",
@@ -90,9 +90,9 @@
 		"karma-typescript": "^5.5.3",
 		"karma-typescript-es6-transform": "^5.5.3",
 		"prettier": "^3.2.5",
-		"rollup": "^3.18.0",
-		"rollup-plugin-dts": "^5.2.0",
-		"rollup-plugin-typescript2": "^0.34.1",
+		"rollup": "^4.40.0",
+		"rollup-plugin-dts": "^6.2.1",
+		"rollup-plugin-typescript2": "^0.36.0",
 		"typescript": "^4.9.5",
 		"sass": "^1.66.1"
 	},
diff --git a/designer/src/workspace/common-views/input-view.ts b/designer/src/workspace/common-views/input-view.ts
@@ -49,10 +49,10 @@ export class InputView {
 		return new InputView(circle);
 	}
 
-	private constructor(private readonly root: SVGElement) {}
+	private constructor(public readonly g: SVGElement) {}
 
 	public setIsHidden(isHidden: boolean) {
-		Dom.attrs(this.root, {
+		Dom.attrs(this.g, {
 			visibility: isHidden ? 'hidden' : 'visible'
 		});
 	}
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
@@ -1,7 +1,7 @@
 import { LabelViewConfiguration } from '../common-views/label-view-configuration';
 
 export interface SwitchStepComponentViewConfiguration {
-	minContainerWidth: number;
+	minBranchWidth: number;
 	paddingX: number;
 	/**
 	 * The distance between the top of the container and the center point of the input.
@@ -12,6 +12,10 @@ export interface SwitchStepComponentViewConfiguration {
 	 */
 	paddingTop2: number;
 	connectionHeight: number;
+	/**
+	 * The distance between the end of the label and the bottom of the container when there are no branches.
+	 */
+	noBranchPaddingBottom: number;
 	inputSize: number;
 	inputIconSize: number;
 	autoHideInputOnDrag: boolean;
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
@@ -39,11 +39,12 @@ describe('SwitchStepComponentView', () => {
 			radius: 10
 		};
 		const factory = createSwitchStepComponentViewFactory({
-			minContainerWidth: 40,
+			minBranchWidth: 40,
 			paddingX: 20,
 			paddingTop1: 0,
 			paddingTop2: 20,
 			connectionHeight: 16,
+			noBranchPaddingBottom: 24,
 			inputSize: 18,
 			inputIconSize: 14,
 			inputRadius: 4,
diff --git a/designer/src/workspace/switch-step/switch-step-component-view.ts b/designer/src/workspace/switch-step/switch-step-component-view.ts
@@ -4,36 +4,95 @@ import { BranchedStep } from '../../definition';
 import { JoinView } from '../common-views/join-view';
 import { LabelView } from '../common-views/label-view';
 import { InputView } from '../common-views/input-view';
-import { ClickDetails, StepComponentView, ClickCommand } from '../component';
-import { StepComponentViewContext, StepComponentViewFactory, StepContext } from '../../designer-extension';
+import { ClickDetails, StepComponentView, ClickCommand, SequenceComponent } from '../component';
+import { RegionView, StepComponentViewContext, StepComponentViewFactory, StepContext } from '../../designer-extension';
 import { SwitchStepComponentViewConfiguration } from './switch-step-component-view-configuration';
 
 const COMPONENT_CLASS_NAME = 'switch';
 
+function createView(
+	g: SVGGElement,
+	width: number,
+	height: number,
+	joinX: number,
+	viewContext: StepComponentViewContext,
+	sequenceComponents: SequenceComponent[] | null,
+	regionView: RegionView,
+	cfg: SwitchStepComponentViewConfiguration
+): StepComponentView {
+	let inputView: InputView | null = null;
+	if (cfg.inputSize > 0) {
+		const iconUrl = viewContext.getStepIconUrl();
+		inputView = InputView.createRectInput(g, joinX, cfg.paddingTop1, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
+	}
+
+	return {
+		g,
+		width,
+		height,
+		joinX,
+		placeholders: null,
+		sequenceComponents,
+		hasOutput: sequenceComponents ? sequenceComponents.some(c => c.hasOutput) : true,
+
+		getClientPosition(): Vector {
+			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;
+		},
+		setIsDragging(isDragging: boolean) {
+			if (cfg.autoHideInputOnDrag && inputView) {
+				inputView.setIsHidden(isDragging);
+			}
+		},
+		setIsSelected(isSelected: boolean) {
+			regionView.setIsSelected(isSelected);
+		},
+		setIsDisabled(isDisabled: boolean) {
+			Dom.toggleClass(g, isDisabled, 'sqd-disabled');
+		}
+	};
+}
+
 export const createSwitchStepComponentViewFactory =
 	(cfg: SwitchStepComponentViewConfiguration): StepComponentViewFactory =>
 	(parent: SVGElement, stepContext: StepContext<BranchedStep>, viewContext: StepComponentViewContext): StepComponentView => {
 		return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME, (g, regionViewBuilder) => {
 			const step = stepContext.step;
 			const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
 
+			const name = viewContext.getStepName();
+			const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
 			const branchNames = Object.keys(step.branches);
-			const branchComponents = branchNames.map(branchName => {
-				return viewContext.createSequenceComponent(g, step.branches[branchName]);
-			});
 
-			const branchLabelViews = branchNames.map(branchName => {
+			if (branchNames.length === 0) {
+				const width = Math.max(nameLabelView.width, cfg.minBranchWidth) + cfg.paddingX * 2;
+				const height = nameLabelView.height + paddingTop + cfg.noBranchPaddingBottom;
+				const joinX = width / 2;
+				const regionView = regionViewBuilder(g, [width], height);
+
+				Dom.translate(nameLabelView.g, joinX, 0);
+				JoinView.createStraightJoin(g, new Vector(joinX, 0), height);
+
+				return createView(g, width, height, joinX, viewContext, null, regionView, cfg);
+			}
+
+			const branchComponents: SequenceComponent[] = [];
+			const branchLabelViews: LabelView[] = [];
+			const branchSizes: BranchSize[] = [];
+			let totalBranchesWidth = 0;
+			let maxBranchesHeight = 0;
+
+			branchNames.forEach(branchName => {
+				const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
+
 				const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
 				const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
-				return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
-			});
+				const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
 
-			const name = viewContext.getStepName();
-			const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
-
-			let prevOffsetX = 0;
-			const branchSizes = branchComponents.map((component, i) => {
-				const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
+				const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
 
 				const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
 				const branchOffsetRight =
@@ -42,9 +101,13 @@ export const createSwitchStepComponentViewFactory =
 				const width: number = component.view.width + branchOffsetLeft + branchOffsetRight;
 				const joinX = component.view.joinX + branchOffsetLeft;
 
-				const offsetX = prevOffsetX;
-				prevOffsetX += width;
-				return { width, branchOffsetLeft, offsetX, joinX };
+				const offsetX = totalBranchesWidth;
+				totalBranchesWidth += width;
+				maxBranchesHeight = Math.max(maxBranchesHeight, component.view.height);
+
+				branchComponents.push(component);
+				branchLabelViews.push(labelView);
+				branchSizes.push({ width, branchOffsetLeft, offsetX, joinX });
 			});
 
 			const centerBranchIndex = Math.floor(branchNames.length / 2);
@@ -54,9 +117,6 @@ export const createSwitchStepComponentViewFactory =
 				joinX += centerBranchSize.joinX;
 			}
 
-			const totalBranchesWidth = branchSizes.reduce((result, s) => result + s.width, 0);
-			const maxBranchesHeight = Math.max(...branchComponents.map(s => s.view.height));
-
 			const halfOfWidestSwitchElement = nameLabelView.width / 2 + cfg.paddingX;
 			const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
 			const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
@@ -91,41 +151,27 @@ export const createSwitchStepComponentViewFactory =
 				}
 			});
 
-			let inputView: InputView | null = null;
-			if (cfg.inputSize > 0) {
-				const iconUrl = viewContext.getStepIconUrl();
-				inputView = InputView.createRectInput(
-					g,
-					shiftedJoinX,
-					cfg.paddingTop1,
-					cfg.inputSize,
-					cfg.inputRadius,
-					cfg.inputIconSize,
-					iconUrl
-				);
-			}
-
 			JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), paddingTop);
 
 			JoinView.createJoins(
 				g,
 				new Vector(shiftedJoinX, paddingTop + cfg.nameLabel.height),
 				branchSizes.map(
-					o => new Vector(switchOffsetLeft + o.offsetX + o.joinX, paddingTop + cfg.nameLabel.height + cfg.connectionHeight)
+					s => new Vector(switchOffsetLeft + s.offsetX + s.joinX, paddingTop + cfg.nameLabel.height + cfg.connectionHeight)
 				)
 			);
 
 			if (stepContext.isOutputConnected) {
 				const ongoingSequenceIndexes = branchComponents
 					.map((component, index) => (component.hasOutput ? index : null))
 					.filter(index => index !== null) as number[];
-				const ongoingJoinTargets = ongoingSequenceIndexes.map(
-					(i: number) =>
-						new Vector(
-							switchOffsetLeft + branchSizes[i].offsetX + branchSizes[i].joinX,
-							paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight
-						)
-				);
+				const ongoingJoinTargets = ongoingSequenceIndexes.map((i: number) => {
+					const branchSize = branchSizes[i];
+					return new Vector(
+						switchOffsetLeft + branchSize.offsetX + branchSize.joinX,
+						paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight
+					);
+				});
 				if (ongoingJoinTargets.length > 0) {
 					JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
 				}
@@ -136,37 +182,13 @@ export const createSwitchStepComponentViewFactory =
 			regions[regions.length - 1] += switchOffsetRight;
 			const regionView = regionViewBuilder(g, regions, viewHeight);
 
-			return {
-				g,
-				width: viewWidth,
-				height: viewHeight,
-				joinX: shiftedJoinX,
-				placeholders: null,
-				sequenceComponents: branchComponents,
-				hasOutput: branchComponents.some(c => c.hasOutput),
-
-				getClientPosition(): Vector {
-					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;
-				},
-
-				setIsDragging(isDragging: boolean) {
-					if (cfg.autoHideInputOnDrag && inputView) {
-						inputView.setIsHidden(isDragging);
-					}
-				},
-
-				setIsSelected(isSelected: boolean) {
-					regionView.setIsSelected(isSelected);
-				},
-
-				setIsDisabled(isDisabled: boolean) {
-					Dom.toggleClass(g, isDisabled, 'sqd-disabled');
-				}
-			};
+			return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, regionView, cfg);
 		});
 	};
+
+interface BranchSize {
+	width: number;
+	branchOffsetLeft: number;
+	offsetX: number;
+	joinX: number;
+}
diff --git a/designer/src/workspace/switch-step/switch-step-extension.ts b/designer/src/workspace/switch-step/switch-step-extension.ts
@@ -5,11 +5,12 @@ import { SwitchStepExtensionConfiguration } from './switch-step-extension-config
 
 const defaultConfiguration: SwitchStepExtensionConfiguration = {
 	view: {
-		minContainerWidth: 40,
+		minBranchWidth: 88,
 		paddingX: 20,
 		paddingTop1: 0,
 		paddingTop2: 22,
-		connectionHeight: 16,
+		connectionHeight: 20,
+		noBranchPaddingBottom: 24,
 		inputSize: 18,
 		inputIconSize: 14,
 		inputRadius: 4,
diff --git a/designer/src/workspace/workspace.ts b/designer/src/workspace/workspace.ts
diff --git a/examples/assets/lib.js b/examples/assets/lib.js
diff --git a/examples/assets/multi-conditional-switch.js b/examples/assets/multi-conditional-switch.js
diff --git a/react/package.json b/react/package.json
diff --git a/svelte/package.json b/svelte/package.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -49,10 +49,10 @@ export class InputView {`
`49`	`49`	`return new InputView(circle);`
`50`	`50`	`}`
`51`	`51`
`52`		`- private constructor(private readonly root: SVGElement) {}`
	`52`	`+ private constructor(public readonly g: SVGElement) {}`
`53`	`53`
`54`	`54`	`public setIsHidden(isHidden: boolean) {`
`55`		`- Dom.attrs(this.root, {`
	`55`	`+ Dom.attrs(this.g, {`
`56`	`56`	`visibility: isHidden ? 'hidden' : 'visible'`
`57`	`57`	`});`
`58`	`58`	`}`