nocode-js · b4rtaz · Jun 22, 2025 · Jun 19, 2025 · Jun 19, 2025 · Jun 20, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+# 0.30.0
+
+This version introduces a new step component: `launchPad`.
+
+The `launchPad` step component allows you to place multiple steps along a horizontal axis. Its design suggests that any of the contained steps can be executed independently or simultaneously. You can use it as a container for parallel execution or as a trigger hub-waiting for one or more embedded trigger steps to activate the workflow.
+
+The main goal of this addition is to enable the creation of workflows with multiple triggers in the standard version of the designer.
+
+To see how it looks, please check out [this example](https://nocode-js.github.io/sequential-workflow-designer/examples/triggers.html).
+
 # 0.29.2
 
 Added a new theme: `soft`.

diff --git a/README.md b/README.md
@@ -22,6 +22,7 @@ Features:
 ## 👀 Examples
 
 * [⏩ Live Testing](https://nocode-js.github.io/sequential-workflow-designer/examples/live-testing.html)
+* [💥 Triggers](https://nocode-js.github.io/sequential-workflow-designer/examples/triggers.html)
 * [❎ Fullscreen](https://nocode-js.github.io/sequential-workflow-designer/examples/fullscreen.html)
 * [🌅 Image Filter](https://nocode-js.github.io/sequential-workflow-designer/examples/image-filter.html)
 * [🔴 Particles](https://nocode-js.github.io/sequential-workflow-designer/examples/particles.html)
@@ -104,10 +105,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.29.2/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.2/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.2/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.29.2/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.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.29.2",
+	"version": "0.30.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.29.2"
+		"sequential-workflow-designer": "^0.30.0"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"

diff --git a/angular/designer/src/designer.component.ts b/angular/designer/src/designer.component.ts
@@ -29,6 +29,7 @@ import {
 	ToolboxConfiguration,
 	UidGenerator,
 	ValidatorConfiguration,
+	PlaceholderConfiguration,
 	I18n,
 	PreferenceStorage
 } from 'sequential-workflow-designer';
@@ -69,6 +70,8 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 	public stepsConfiguration?: StepsConfiguration;
 	@Input('validatorConfiguration')
 	public validatorConfiguration?: ValidatorConfiguration;
+	@Input('placeholderConfiguration')
+	public placeholderConfiguration?: PlaceholderConfiguration;
 	@Input('toolboxConfiguration')
 	public toolboxConfiguration?: AngularToolboxConfiguration | false;
 	@Input('controlBar')
@@ -214,6 +217,7 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 						},
 				steps: this.stepsConfiguration,
 				validator: this.validatorConfiguration,
+				placeholder: this.placeholderConfiguration,
 				toolbox: this.toolboxConfiguration
 					? {
 							isCollapsed: this.isToolboxCollapsed,

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.29.2",
-		"sequential-workflow-designer-angular": "^0.29.2",
+		"sequential-workflow-designer": "^0.30.0",
+		"sequential-workflow-designer-angular": "^0.30.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 @@ [email protected]:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.29.2:
-  version "0.29.2"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.29.2.tgz#04a12899ea6daf50e12bae286bd2d792519f55c2"
-  integrity sha512-IiOi46UrE31EUe4DL9ZT1MwswDIsmpq/qIgC5GBEeI5kKENXL09e4KbePhJQXurnpSJCzcX7cUCnRuoFsMsCdg==
+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==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.29.2:
-  version "0.29.2"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.29.2.tgz#bdb610325396baab5f5e91f95bb846159cb0cb0b"
-  integrity sha512-yPxMLLZUV529HQIAVSEWHEjOLDWn+abEZ+E7VIq3vIAs9ew3fG7U/StUz+mA8+zr7iTSp9wlGUXdZi8ZRtQ1Qw==
+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==
   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.29.2",
-		"sequential-workflow-designer-react": "^0.29.2"
+		"sequential-workflow-designer": "^0.30.0",
+		"sequential-workflow-designer-react": "^0.30.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.29.2",
-		"sequential-workflow-designer-svelte": "^0.29.2"
+		"sequential-workflow-designer": "^0.30.0",
+		"sequential-workflow-designer-svelte": "^0.30.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.29.2",
+	"version": "0.30.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/sass/designer-dark.scss b/designer/sass/designer-dark.scss
@@ -65,4 +65,10 @@
 	$outputFillColor: #707070
 );
 @include sqd-theme-switch-step-component('dark', $inputStrokeColor: #707070, $inputFillColor: #c6c6c6);
+@include sqd-theme-launch-pad-step-component(
+	'dark',
+	$emptyInputStrokeColor: #707070,
+	$emptyInputFillColor: #c6c6c6,
+	$emptyOutputFillColor: #707070
+);
 @include sqd-theme-container-step-component('dark', $inputStrokeColor: #707070, $inputFillColor: #c6c6c6);
diff --git a/designer/sass/designer-light.scss b/designer/sass/designer-light.scss
@@ -17,4 +17,5 @@
 
 @include sqd-theme-task-step-component('light');
 @include sqd-theme-switch-step-component('light');
+@include sqd-theme-launch-pad-step-component('light');
 @include sqd-theme-container-step-component('light');
diff --git a/designer/sass/designer-soft.scss b/designer/sass/designer-soft.scss
@@ -44,4 +44,5 @@ $joinColor: #2a2a2a;
 	$labelSecondaryFillColor: #e9e9e9,
 	$inputStrokeColor: $joinColor
 );
+@include sqd-theme-launch-pad-step-component('soft', $emptyInputStrokeColor: $joinColor, $emptyOutputFillColor: $joinColor);
 @include sqd-theme-container-step-component('soft', $labelFillColor: #3747dd, $inputStrokeColor: $joinColor);
diff --git a/designer/sass/designer-theme.scss b/designer/sass/designer-theme.scss
@@ -354,6 +354,32 @@
 	}
 }
 
+@mixin sqd-theme-launch-pad-step-component(
+	$theme,
+	$stepType: '',
+	$emptyInputStrokeWidth: 2,
+	$emptyInputStrokeColor: #000,
+	$emptyInputFillColor: #fff,
+	$emptyOutputFillColor: #000,
+	$emptyOutputStrokeWidth: 0,
+	$emptyOutputStrokeColor: #000
+) {
+	.sqd-theme-#{$theme} .sqd-step-launch-pad#{if($stepType != '', '.sqd-type-' + $stepType, '')} {
+		& > g > {
+			@include _sqd-input(
+				$inputFillColor: $emptyInputFillColor,
+				$inputStrokeWidth: $emptyInputStrokeWidth,
+				$inputStrokeColor: $emptyInputStrokeColor
+			);
+			@include _sqd-output(
+				$outputFillColor: $emptyOutputFillColor,
+				$outputStrokeWidth: $emptyOutputStrokeWidth,
+				$outputStrokeColor: $emptyOutputStrokeColor
+			);
+		}
+	}
+}
+
 @mixin sqd-theme-container-step-component(
 	$theme,
 	$stepType: '',

diff --git a/designer/src/api/designer-api.ts b/designer/src/api/designer-api.ts
@@ -14,15 +14,15 @@ export class DesignerApi {
 		const workspace = new WorkspaceApi(context.state, context.definitionWalker, context.workspaceController);
 		const viewportController = context.services.viewportController.create(workspace);
 		const toolboxDataProvider = new ToolboxDataProvider(
-			context.componentContext.iconProvider,
 			context.i18n,
+			context.componentContext.iconProvider,
 			context.configuration.toolbox
 		);
 
 		return new DesignerApi(
 			context.configuration.shadowRoot,
 			ControlBarApi.create(context.state, context.historyController, context.stateModifier),
-			new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator),
+			new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.uidGenerator),
 			new EditorApi(context.state, context.definitionWalker, context.stateModifier),
 			workspace,
 			new ViewportApi(context.state, context.workspaceController, viewportController),

diff --git a/designer/src/api/toolbox-api.ts b/designer/src/api/toolbox-api.ts
@@ -1,6 +1,6 @@
 import { Step } from '../definition';
 import { BehaviorController } from '../behaviors/behavior-controller';
-import { ObjectCloner, SimpleEventListener, Uid, Vector } from '../core';
+import { ObjectCloner, SimpleEventListener, Vector } from '../core';
 import { StepDefinition, UidGenerator } from '../designer-configuration';
 import { DesignerState } from '../designer-state';
 import { DragStepBehavior } from '../behaviors/drag-step-behavior';
@@ -13,7 +13,7 @@ export class ToolboxApi {
 		private readonly designerContext: DesignerContext,
 		private readonly behaviorController: BehaviorController,
 		private readonly toolboxDataProvider: ToolboxDataProvider,
-		private readonly uidGenerator: UidGenerator | undefined
+		private readonly uidGenerator: UidGenerator
 	) {}
 
 	public isCollapsed(): boolean {
@@ -52,7 +52,7 @@ export class ToolboxApi {
 
 	private activateStep(step: StepDefinition): Step {
 		const newStep = ObjectCloner.deepClone(step) as Step;
-		newStep.id = this.uidGenerator ? this.uidGenerator() : Uid.next();
+		newStep.id = this.uidGenerator();
 		return newStep;
 	}
 }
diff --git a/designer/src/behaviors/drag-step-behavior.ts b/designer/src/behaviors/drag-step-behavior.ts
@@ -9,7 +9,7 @@ import { DesignerState } from '../designer-state';
 import { StateModifier } from '../modifier/state-modifier';
 import { WorkspaceController } from '../workspace/workspace-controller';
 import { StepComponent } from '../workspace/step-component';
-import { PlaceholderController } from '../designer-extension';
+import { PlaceholderController } from '../workspace/placeholder/placeholder-controller';
 
 export class DragStepBehavior implements Behavior {
 	public static create(designerContext: DesignerContext, step: Step, draggedStepComponent?: StepComponent): DragStepBehavior {

diff --git a/designer/src/behaviors/placeholder-finder.ts b/designer/src/behaviors/placeholder-finder.ts
@@ -14,6 +14,7 @@ export class PlaceholderFinder {
 		placeholder: Placeholder;
 		lt: Vector; // left top
 		br: Vector; // bottom right
+		diagSq: number; // left top diagonal squared
 	}[];
 
 	private constructor(
@@ -27,15 +28,17 @@ export class PlaceholderFinder {
 
 			this.cache = this.placeholders.map(placeholder => {
 				const rect = placeholder.getClientRect();
+				const lt = new Vector(rect.x, rect.y).add(scroll);
+				const br = new Vector(rect.x + rect.width, rect.y + rect.height).add(scroll);
 				return {
 					placeholder,
-					lt: new Vector(rect.x, rect.y).add(scroll),
-					br: new Vector(rect.x + rect.width, rect.y + rect.height).add(scroll)
+					lt,
+					br,
+					diagSq: lt.x * lt.x + lt.y * lt.y
 				};
 			});
-			this.cache.sort((a, b) => a.lt.y - b.lt.y);
+			this.cache.sort((a, b) => a.diagSq - b.diagSq);
 		}
-
 		const vR = vLt.x + vWidth;
 		const vB = vLt.y + vHeight;
 		return this.cache.find(p => {

diff --git a/designer/src/behaviors/select-step-behavior.ts b/designer/src/behaviors/select-step-behavior.ts
@@ -46,7 +46,10 @@ export class SelectStepBehavior implements Behavior {
 			return;
 		}
 
-		this.stateModifier.trySelectStep(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence);
+		if (!this.stateModifier.trySelectStep(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence)) {
+			// If we cannot select the step, we clear the selection.
+			this.state.setSelectedStepId(null);
+		}
 		return new SelectStepBehaviorEndToken(this.pressedStepComponent.step.id, Date.now());
 	}
 }
diff --git a/designer/src/component-context.ts b/designer/src/component-context.ts
@@ -2,20 +2,20 @@ import { DefinitionWalker } from 'sequential-workflow-model';
 import { DefinitionValidator } from './core/definition-validator';
 import { IconProvider } from './core/icon-provider';
 import { DesignerConfiguration, I18n, PreferenceStorage } from './designer-configuration';
-import { PlaceholderController } from './designer-extension';
 import { DesignerState } from './designer-state';
 import { Services } from './services';
 import { StepComponentFactory } from './workspace/step-component-factory';
 import { StepExtensionResolver } from './workspace/step-extension-resolver';
+import { PlaceholderController } from './workspace/placeholder/placeholder-controller';
 
 export class ComponentContext {
 	public static create(
 		configuration: DesignerConfiguration,
 		state: DesignerState,
 		stepExtensionResolver: StepExtensionResolver,
+		placeholderController: PlaceholderController,
 		definitionWalker: DefinitionWalker,
 		preferenceStorage: PreferenceStorage,
-		placeholderController: PlaceholderController,
 		i18n: I18n,
 		services: Services
 	): ComponentContext {

diff --git a/designer/src/designer-configuration.ts b/designer/src/designer-configuration.ts
@@ -28,6 +28,11 @@ export interface DesignerConfiguration<TDefinition extends Definition = Definiti
 	 */
 	steps: StepsConfiguration;
 
+	/**
+	 * @description The configuration of the placeholders.
+	 */
+	placeholder?: PlaceholderConfiguration;
+
 	/**
 	 * @description The configuration of the toolbox. If not set, the toolbox will be hidden.
 	 */
@@ -178,6 +183,11 @@ export interface StepsConfiguration {
 
 export type StepIconUrlProvider = (componentType: ComponentType, type: string) => string | null;
 
+export interface PlaceholderConfiguration {
+	canCreate?: (sequence: Sequence, index: number) => boolean;
+	canShow?: (sequence: Sequence, index: number, draggingStepComponentType: ComponentType, draggingStepType: string) => boolean;
+}
+
 export interface ValidatorConfiguration {
 	step?: StepValidator;
 	root?: RootValidator;