0.30.3. (#198)

b4rtaz · web-flow · commit fd03328ee21b · 2025-10-07T22:32:30.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.30.3
+
+This version adds a new argument to the `canCreate` and `canShow` callbacks in the placeholder configuration, providing access to the current definition.
+
 # 0.30.2
 
 This version fixes a bug related to identifying the touched element [#195](https://github.com/nocode-js/sequential-workflow-designer/issues/195).
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.2/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.2/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.2/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.2/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.3/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.3/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.3/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.3/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.2",
+	"version": "0.30.3",
 	"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.2"
+		"sequential-workflow-designer": "^0.30.3"
 	},
 	"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.2",
-		"sequential-workflow-designer-angular": "^0.30.2",
+		"sequential-workflow-designer": "^0.30.3",
+		"sequential-workflow-designer-angular": "^0.30.3",
 		"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.30.2",
-		"sequential-workflow-designer-react": "^0.30.2"
+		"sequential-workflow-designer": "^0.30.3",
+		"sequential-workflow-designer-react": "^0.30.3"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",
diff --git a/demos/react-app/src/playground/Playground.tsx b/demos/react-app/src/playground/Playground.tsx
@@ -1,5 +1,12 @@
 import { useEffect, useMemo, useState } from 'react';
-import { ObjectCloner, Step, StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration } from 'sequential-workflow-designer';
+import {
+	ObjectCloner,
+	PlaceholderConfiguration,
+	Step,
+	StepsConfiguration,
+	ToolboxConfiguration,
+	ValidatorConfiguration
+} from 'sequential-workflow-designer';
 import { SequentialWorkflowDesigner, wrapDefinition } from 'sequential-workflow-designer-react';
 import { RootEditor } from './RootEditor';
 import { StepEditor } from './StepEditor';
@@ -35,6 +42,14 @@ export function Playground() {
 		}),
 		[]
 	);
+	const placeholderConfiguration: PlaceholderConfiguration = useMemo(
+		() => ({
+			canShow() {
+				return true;
+			}
+		}),
+		[]
+	);
 
 	const [isVisible, setIsVisible] = useState(true);
 	const [isToolboxCollapsed, setIsToolboxCollapsed] = useState(false);
@@ -133,6 +148,7 @@ export function Playground() {
 					onIsToolboxCollapsedChanged={setIsToolboxCollapsed}
 					stepsConfiguration={stepsConfiguration}
 					validatorConfiguration={validatorConfiguration}
+					placeholderConfiguration={placeholderConfiguration}
 					controlBar={true}
 					rootEditor={<RootEditor />}
 					stepEditor={<StepEditor />}
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.2",
-		"sequential-workflow-designer-svelte": "^0.30.2"
+		"sequential-workflow-designer": "^0.30.3",
+		"sequential-workflow-designer-svelte": "^0.30.3"
 	},
 	"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.2",
+	"version": "0.30.3",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
diff --git a/designer/src/designer-configuration.ts b/designer/src/designer-configuration.ts
@@ -184,8 +184,14 @@ 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;
+	canCreate?: (sequence: Sequence, index: number, definition: Definition) => boolean;
+	canShow?: (
+		sequence: Sequence,
+		index: number,
+		draggingStepComponentType: ComponentType,
+		draggingStepType: string,
+		definition: Definition
+	) => boolean;
 }
 
 export interface ValidatorConfiguration {
diff --git a/designer/src/designer-context.ts b/designer/src/designer-context.ts
@@ -35,7 +35,7 @@ export class DesignerContext {
 		const workspaceController = new WorkspaceControllerWrapper();
 		const behaviorController = BehaviorController.create(configuration.shadowRoot);
 		const stepExtensionResolver = StepExtensionResolver.create(services);
-		const placeholderController = PlaceholderController.create(configuration.placeholder);
+		const placeholderController = PlaceholderController.create(state, configuration.placeholder);
 		const definitionWalker = configuration.definitionWalker ?? new DefinitionWalker();
 		const i18n: I18n = configuration.i18n ?? ((_, defaultValue) => defaultValue);
 		const uidGenerator = configuration.uidGenerator ?? Uid.next;
diff --git a/designer/src/workspace/placeholder/placeholder-controller.ts b/designer/src/workspace/placeholder/placeholder-controller.ts
@@ -1,15 +1,26 @@
 import { Sequence } from 'sequential-workflow-model';
 import { PlaceholderConfiguration } from '../../designer-configuration';
+import { DesignerState } from '../../designer-state';
 
 export class PlaceholderController {
-	public static create(configuration: PlaceholderConfiguration | undefined): PlaceholderController {
-		return new PlaceholderController(configuration);
+	public static create(state: DesignerState, configuration: PlaceholderConfiguration | undefined): PlaceholderController {
+		return new PlaceholderController(state, configuration);
 	}
 
-	private constructor(private readonly configuration: PlaceholderConfiguration | undefined) {}
+	public readonly canCreate: (sequence: Sequence, index: number) => boolean;
+	public readonly canShow: (sequence: Sequence, index: number, draggingStepComponentType: string, draggingStepType: string) => boolean;
 
-	public readonly canCreate: (sequence: Sequence, index: number) => boolean = this.configuration?.canCreate ?? (() => true);
+	private constructor(
+		state: DesignerState,
+		private readonly configuration: PlaceholderConfiguration | undefined
+	) {
+		const canCreate = this.configuration?.canCreate;
+		const canShow = this.configuration?.canShow;
 
-	public readonly canShow: (sequence: Sequence, index: number, draggingStepComponentType: string, draggingStepType: string) => boolean =
-		this.configuration?.canShow ?? (() => true);
+		this.canCreate = canCreate ? (sequence, index) => canCreate(sequence, index, state.definition) : () => true;
+		this.canShow = canShow
+			? (sequence, index, draggingStepComponentType, draggingStepType) =>
+					canShow(sequence, index, draggingStepComponentType, draggingStepType, state.definition)
+			: () => true;
+	}
 }
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.2';
+const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.3';
 
 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.30.2",
+	"version": "0.30.3",
 	"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.2"
+		"sequential-workflow-designer": "^0.30.3"
 	},
 	"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.2",
+		"sequential-workflow-designer": "^0.30.3",
 		"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.2",
+	"version": "0.30.3",
 	"license": "MIT",
 	"scripts": {
 		"prepare": "cp ../LICENSE LICENSE",
@@ -28,10 +28,10 @@
 	],
 	"peerDependencies": {
 		"svelte": "^4.0.0",
-		"sequential-workflow-designer": "^0.30.2"
+		"sequential-workflow-designer": "^0.30.3"
 	},
 	"devDependencies": {
-		"sequential-workflow-designer": "^0.30.2",
+		"sequential-workflow-designer": "^0.30.3",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@sveltejs/package": "^2.0.0",

-Original file line number
+Diff line change
 ```html
 <head>
 ...
 -<link href="https://cdn.jsdelivr.net/npm/[email protected].2/css/designer.css" rel="stylesheet">
 -<link href="https://cdn.jsdelivr.net/npm/[email protected].2/css/designer-light.css" rel="stylesheet">
 -<link href="https://cdn.jsdelivr.net/npm/[email protected].2/css/designer-dark.css" rel="stylesheet">
 -<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/index.umd.js"></script>
 +<link href="https://cdn.jsdelivr.net/npm/[email protected].3/css/designer.css" rel="stylesheet">
 +<link href="https://cdn.jsdelivr.net/npm/[email protected].3/css/designer-light.css" rel="stylesheet">
 +<link href="https://cdn.jsdelivr.net/npm/[email protected].3/css/designer-dark.css" rel="stylesheet">
 +<script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/index.umd.js"></script>
 ```
 Call the designer by:
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "sequential-workflow-designer",`
`3`	`3`	`"description": "Customizable no-code component for building flow-based programming applications.",`
`4`		`- "version": "0.30.2",`
	`4`	`+ "version": "0.30.3",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "./lib/esm/index.js",`
`7`	`7`	`"types": "./lib/index.d.ts",`