0.19.2. (#127)

b4rtaz · web-flow · commit 0a8439061c67 · 2024-02-25T18:52:31.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.19.2
+
+This version adds the `alt` key support. Now when you hold the `alt` key and click on the canvas, the drag and drop is disabled [#126](https://github.com/nocode-js/sequential-workflow-designer/issues/126).
+
 ## 0.19.1
 
 Fixed the bug with refreshing the state modifier dependencies.
diff --git a/README.md b/README.md
@@ -99,10 +99,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.19.1/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.1/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.1/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.1/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/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.19.1",
+	"version": "0.19.2",
 	"author": {
 		"name": "NoCode JS",
 		"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
 	"peerDependencies": {
 		"@angular/common": "12 - 16",
 		"@angular/core": "12 - 16",
-		"sequential-workflow-designer": "^0.19.1"
+		"sequential-workflow-designer": "^0.19.2"
 	},
 	"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": "^15.2.9",
 		"@angular/router": "^15.2.9",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.19.1",
-		"sequential-workflow-designer-angular": "^0.19.1",
+		"sequential-workflow-designer": "^0.19.2",
+		"sequential-workflow-designer-angular": "^0.19.2",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.13.0"
 	},
diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock
@@ -5956,17 +5956,17 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.19.0:
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.19.0.tgz#3ec9bd1584e69615ae293baa987560125e374751"
-  integrity sha512-nvUWQevPaS/FOzaDlDZk43pL4A+b0CjZOKGziMmdlBXzS1dBAhK3HlImM8sg7ZXfgDuvBn3FuLUJp/M24VmjhA==
+sequential-workflow-designer-angular@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.19.2.tgz#367e51b985c27ea58bf2f824dbc5b94a130f55b2"
+  integrity sha512-hSZlLyBSRXOtsEZIwh92NODta8GznS8vBUHh7vgv4+33WCyip+wL8cDB/QqtFYDs/fSvCsxYsNUEgjlOrkLYCw==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.19.0:
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.19.0.tgz#988eac7b97ee7dedd23db4d3d324ee7e6366dbcb"
-  integrity sha512-p0Cipp+4URv8Fo4i4t/nscVbIoNO0NmxF6w/siv64eRe3Vm4+6Rewn+UApBiamnhYwmyqYl97U830f89+OfuqA==
+sequential-workflow-designer@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.19.2.tgz#885e0062d42cb325806273e7637a1407a29de7c7"
+  integrity sha512-bAJae/ZTLj5wvCv5+l7ZKWRruy7lgDjYaDAaTLapPrHtf46H4pfXXe5aeSv6mNRcQaKtQ9/MsygxnC/Onlkdng==
   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.19.1",
-		"sequential-workflow-designer-react": "^0.19.1"
+		"sequential-workflow-designer": "^0.19.2",
+		"sequential-workflow-designer-react": "^0.19.2"
 	},
 	"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.19.1",
-		"sequential-workflow-designer-svelte": "^0.19.1"
+		"sequential-workflow-designer": "^0.19.2",
+		"sequential-workflow-designer-svelte": "^0.19.2"
 	},
 	"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.19.1",
+	"version": "0.19.2",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
diff --git a/designer/src/behaviors/click-behavior-resolver.ts b/designer/src/behaviors/click-behavior-resolver.ts
@@ -11,14 +11,14 @@ import { TriggerCustomActionPressingBehaviorHandler } from './pressing-behaviors
 export class ClickBehaviorResolver {
 	public constructor(private readonly context: DesignerContext) {}
 
-	public resolve(commandOrNull: ClickCommand | null, element: Element, isMiddleButton: boolean): Behavior {
+	public resolve(commandOrNull: ClickCommand | null, element: Element, forceMove: boolean): Behavior {
 		if (!commandOrNull) {
-			return MoveViewportBehavior.create(!isMiddleButton, this.context);
+			return MoveViewportBehavior.create(!forceMove, this.context);
 		}
 
 		switch (commandOrNull.type) {
 			case ClickCommandType.selectStep:
-				return SelectStepBehavior.create(commandOrNull.component, isMiddleButton, this.context);
+				return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
 
 			case ClickCommandType.rerenderStep:
 				return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.context));
diff --git a/designer/src/behaviors/select-step-behavior.ts b/designer/src/behaviors/select-step-behavior.ts
@@ -8,9 +8,9 @@ import { DragStepBehavior } from './drag-step-behavior';
 import { MoveViewportBehavior } from './move-viewport-behavior';
 
 export class SelectStepBehavior implements Behavior {
-	public static create(pressedStepComponent: StepComponent, isMiddleButton: boolean, context: DesignerContext): SelectStepBehavior {
+	public static create(pressedStepComponent: StepComponent, forceMove: boolean, context: DesignerContext): SelectStepBehavior {
 		const isDragDisabled =
-			isMiddleButton ||
+			forceMove ||
 			context.state.isDragDisabled ||
 			!context.stateModifier.isDraggable(pressedStepComponent.step, pressedStepComponent.parentSequence);
 		return new SelectStepBehavior(pressedStepComponent, isDragDisabled, context.state, context.stateModifier, context);
diff --git a/designer/src/core/designer-configuration-validator.ts b/designer/src/core/designer-configuration-validator.ts
@@ -1,23 +1,18 @@
 import { DesignerConfiguration } from '../designer-configuration';
 
-function throwDepreciatedError(propertyName: string, groupName: string) {
-	throw new Error(`The "${propertyName}" property in the "${groupName}" configuration is depreciated`);
-}
-
 export function validateConfiguration(configuration: DesignerConfiguration) {
-	if (configuration.controlBar === undefined) {
-		throw new Error('The "controlBar" property is not defined in the configuration');
-	}
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	if (configuration.toolbox && (configuration.toolbox as any).isHidden !== undefined) {
-		throwDepreciatedError('isHidden', 'toolbox');
-	}
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	if (configuration.editors && (configuration.editors as any).isHidden !== undefined) {
-		throwDepreciatedError('isHidden', 'editors');
-	}
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	if ((configuration.steps as any).validator) {
-		throwDepreciatedError('validator', 'steps');
+	const validateProperty = (key: keyof DesignerConfiguration) => {
+		if (configuration[key] === undefined) {
+			throw new Error(`The "${key}" property is not defined in the configuration`);
+		}
+	};
+
+	if (!configuration) {
+		throw new Error('Configuration is not defined');
 	}
+
+	validateProperty('steps');
+	validateProperty('toolbox');
+	validateProperty('editors');
+	validateProperty('controlBar');
 }
diff --git a/designer/src/designer.ts b/designer/src/designer.ts
@@ -27,19 +27,15 @@ export class Designer<TDefinition extends Definition = Definition> {
 		configuration: DesignerConfiguration<TDef>
 	): Designer<TDef> {
 		if (!placeholder) {
-			throw new Error('Placeholder is not set');
+			throw new Error('Placeholder is not defined');
 		}
 		if (!isElementAttached(placeholder)) {
 			throw new Error('Placeholder is not attached to the DOM');
 		}
 		if (!startDefinition) {
-			throw new Error('Start definition is not set');
-		}
-		if (!configuration) {
-			throw new Error('Configuration is not set');
+			throw new Error('Start definition is not defined');
 		}
 		const config = configuration as DesignerConfiguration;
-
 		validateConfiguration(config);
 
 		const services = ServicesResolver.resolve(configuration.extensions, config);
diff --git a/designer/src/workspace/workspace-view.ts b/designer/src/workspace/workspace-view.ts
@@ -98,12 +98,12 @@ export class WorkspaceView {
 		return new Vector(this.canvas.clientWidth, this.canvas.clientHeight);
 	}
 
-	public bindClick(handler: (position: Vector, target: Element, buttonIndex: number) => void) {
+	public bindClick(handler: (position: Vector, target: Element, buttonIndex: number, altKey: boolean) => void) {
 		this.canvas.addEventListener(
 			'mousedown',
 			e => {
 				e.preventDefault();
-				handler(readMousePosition(e), e.target as Element, e.button);
+				handler(readMousePosition(e), e.target as Element, e.button, e.altKey);
 			},
 			false
 		);
@@ -116,7 +116,7 @@ export class WorkspaceView {
 				const element = document.elementFromPoint(clientPosition.x, clientPosition.y);
 				if (element) {
 					const position = readTouchPosition(e);
-					handler(position, element, 0);
+					handler(position, element, 0, false);
 				}
 			},
 			listenerOptions
diff --git a/designer/src/workspace/workspace.ts b/designer/src/workspace/workspace.ts
@@ -70,9 +70,9 @@ export class Workspace implements WorkspaceController {
 			workspace.onStateChanged(r[0], r[1], r[2]);
 		});
 
-		view.bindClick((p, t, b) => workspace.onClick(p, t, b));
-		view.bindWheel(e => workspace.onWheel(e));
-		view.bindContextMenu((p, t) => workspace.onContextMenu(p, t));
+		view.bindClick(workspace.onClick);
+		view.bindWheel(workspace.onWheel);
+		view.bindContextMenu(workspace.onContextMenu);
 		return workspace;
 	}
 
@@ -171,28 +171,30 @@ export class Workspace implements WorkspaceController {
 		this.view.destroy();
 	}
 
-	private onClick(position: Vector, target: Element, buttonIndex: number) {
+	private readonly onClick = (position: Vector, target: Element, buttonIndex: number, altKey: boolean) => {
 		const isPrimaryButton = buttonIndex === 0;
 		const isMiddleButton = buttonIndex === 1;
 
 		if (isPrimaryButton || isMiddleButton) {
+			const forceMove = isMiddleButton || altKey;
+
 			const commandOrNull = this.resolveClick(target, position);
-			const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, isMiddleButton);
+			const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, forceMove);
 			this.behaviorController.start(position, behavior);
 		}
-	}
+	};
 
-	private onWheel(e: WheelEvent) {
+	private readonly onWheel = (e: WheelEvent) => {
 		e.preventDefault();
 		e.stopPropagation();
 
 		this.wheelController.onWheel(e);
-	}
+	};
 
-	private onContextMenu(position: Vector, target: Element) {
+	private readonly onContextMenu = (position: Vector, target: Element) => {
 		const commandOrNull = this.resolveClick(target, position);
 		this.contextMenuController.tryOpen(position, commandOrNull);
-	}
+	};
 
 	private onIsDraggingChanged(isDragging: boolean) {
 		this.getRootComponent().setIsDragging(isDragging);
diff --git a/examples/assets/editing-restrictions.js b/examples/assets/editing-restrictions.js
@@ -7,6 +7,7 @@ function createStep(name, properties) {
 		type: 'task',
 		name,
 		properties: Object.assign({
+			selectable: true,
 			draggable: true,
 			deletable: true
 		}, properties)
@@ -20,6 +21,7 @@ function createLoopStep() {
 		type: 'loop',
 		name: 'Loop',
 		properties: {
+			selectable: true,
 			draggable: true,
 			deletable: true
 		},
@@ -41,10 +43,12 @@ function load() {
 	const placeholder = document.getElementById('designer');
 	const definition = {
 		sequence: [
-			createStep('Draggable=true', { draggable: true }),
-			createStep('Draggable=false', { draggable: false }),
-			createStep('Deletable=true', { deletable: true }),
-			createStep('Deletable=false', { deletable: false }),
+			createStep('isSelectable=true', { selectable: true }),
+			createStep('isSelectable=false', { selectable: false }),
+			createStep('isDraggable=true', { draggable: true }),
+			createStep('isDraggable=false', { draggable: false }),
+			createStep('isDeletable=true', { deletable: true }),
+			createStep('isDeletable=false', { deletable: false }),
 		],
 		properties: {}
 	};
@@ -65,6 +69,9 @@ function load() {
 		},
 
 		steps: {
+			isSelectable: (step) => {
+				return step.properties.selectable;
+			},
 			canInsertStep: (step, _, targetIndex) => {
 				return window.confirm(`Can insert "${step.name}" (${targetIndex})?`);
 			},
diff --git a/examples/assets/image-filter.js b/examples/assets/image-filter.js
@@ -113,6 +113,7 @@ const configuration = {
 		},
 	},
 
+	editors: false,
 	controlBar: true,
 };
 
diff --git a/examples/assets/lib.js b/examples/assets/lib.js
@@ -19,7 +19,7 @@ function embedStylesheet(url) {
 
 const baseUrl = isTestEnv()
 	? '../designer'
-	: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.1';
+	: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2';
 
 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.19.1",
+	"version": "0.19.2",
 	"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.19.1"
+		"sequential-workflow-designer": "^0.19.2"
 	},
 	"devDependencies": {
 		"@rollup/plugin-node-resolve": "^15.0.1",
@@ -63,7 +63,7 @@
 		"prettier": "^2.8.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.19.1",
+		"sequential-workflow-designer": "^0.19.2",
 		"rollup": "^3.18.0",
 		"rollup-plugin-dts": "^5.2.0",
 		"rollup-plugin-typescript2": "^0.34.1",
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.19.1",
+	"version": "0.19.2",
 	"license": "MIT",
 	"scripts": {
 		"prepare": "cp ../LICENSE LICENSE",
@@ -28,10 +28,10 @@
 	],
 	"peerDependencies": {
 		"svelte": "^4.0.0",
-		"sequential-workflow-designer": "^0.19.1"
+		"sequential-workflow-designer": "^0.19.2"
 	},
 	"devDependencies": {
-		"sequential-workflow-designer": "^0.19.1",
+		"sequential-workflow-designer": "^0.19.2",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@sveltejs/package": "^2.0.0",

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.19.1",`
	`4`	`+ "version": "0.19.2",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "./lib/esm/index.js",`
`7`	`7`	`"types": "./lib/index.d.ts",`