0.16.9. (#99)

b4rtaz · web-flow · commit 1435fcad7859 · 2023-10-12T00:01:32.000+02:00
* 0.16.9.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,15 @@
+## 0.16.9
+
+This version adds a possibility to disable keyboard shortcuts. Additionally you may filter keyboard events handled by the designer.
+
+```js
+// Disabled shortcuts
+const configuration = {
+  keyboard: false,
+  // ...
+};
+```
+
 ## 0.16.8
 
 Svelte package supports now native editors. If you want to use JavaScript/TypeScript code to create editors, you can do it now. Of course, you can still use Svelte components as editors.
diff --git a/README.md b/README.md
@@ -96,10 +96,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.16.8/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.8/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.8/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.8/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.9/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.9/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.9/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.9/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.16.8",
+	"version": "0.16.9",
 	"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.16.8"
+		"sequential-workflow-designer": "^0.16.9"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"
diff --git a/angular/designer/src/designer.component.ts b/angular/designer/src/designer.component.ts
@@ -21,6 +21,7 @@ import {
 	DesignerExtension,
 	GlobalEditorContext,
 	GlobalEditorProvider,
+	KeyboardConfiguration,
 	Step,
 	StepEditorContext,
 	StepEditorProvider,
@@ -70,6 +71,8 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 	public controlBar?: boolean;
 	@Input('contextMenu')
 	public contextMenu?: boolean;
+	@Input('keyboard')
+	public keyboard?: boolean | KeyboardConfiguration;
 	@Input('extensions')
 	public extensions?: DesignerExtension[];
 	@Input('customActionHandler')
@@ -208,6 +211,7 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 					: false,
 				controlBar: this.controlBar,
 				contextMenu: this.contextMenu,
+				keyboard: this.keyboard,
 				extensions: this.extensions,
 				isReadonly: this.isReadonly,
 				uidGenerator: this.uidGenerator,
diff --git a/demos/angular-app/README.md b/demos/angular-app/README.md
@@ -2,7 +2,7 @@
 
 This project contains a simple demo of using the `sequential-workflow-designer-angular` package.
 
-## 🚀 How to Run?
+## 🚀 How to Run Locally
 
 1. Clone this repository.
 2. Install dependencies: `yarn install`
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.16.8",
-		"sequential-workflow-designer-angular": "^0.16.8",
+		"sequential-workflow-designer": "^0.16.9",
+		"sequential-workflow-designer-angular": "^0.16.9",
 		"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.16.8:
-  version "0.16.8"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.16.8.tgz#80fe67bda35e676c7823a86341a48ca318d92cc6"
-  integrity sha512-9ewvSBVQXQ9hnIilh+V8flCmF3ZjLmZgVrxEYGhJ5okYAOeAla8mbqr+c87YDacemPOd4FFRbgMDBptlcjtEmw==
+sequential-workflow-designer-angular@^0.16.9:
+  version "0.16.9"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.16.9.tgz#78d2ad7bd37435bc6c17845cab0f9f41629d4e5c"
+  integrity sha512-yxhTNoN5pXWpIRH2st0wv43ugsxUVgSZMy4zhHS7mOv5slDnOK2WByzJEsTRMteHk4FMFdjnSAX7+K2jTuX0mA==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.16.8:
-  version "0.16.8"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.16.8.tgz#75c0d10bda354b9f31c40c65bb61474e1a91de9f"
-  integrity sha512-YinakcQ5lvI+otxFlDkH+IRCijXJDav6IeCPesvWPb0vjFy0G8xtfMDVHzY3rL5l4uWwQmzUIZg/xLxnnp7BFw==
+sequential-workflow-designer@^0.16.9:
+  version "0.16.9"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.16.9.tgz#7fc328e131125945acd588d108d0b36c61a42293"
+  integrity sha512-OIktDfaA7NWVZ+AE27QrEXXDuAwrDzMP97dJAa9bUX3cH9EOVFVKg7OSz7qCuTaDDSkzfgX5PF1U6hMgo4CAmg==
   dependencies:
     sequential-workflow-model "^0.2.0"
 
diff --git a/demos/react-app/README.md b/demos/react-app/README.md
@@ -2,7 +2,7 @@
 
 This project contains a simple demo of using the `sequential-workflow-designer-react` package.
 
-## 🚀 How to Run?
+## 🚀 How to Run Locally
 
 1. Clone this repository.
 2. Install dependencies: `yarn install`
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.16.8",
-		"sequential-workflow-designer-react": "^0.16.8"
+		"sequential-workflow-designer": "^0.16.9",
+		"sequential-workflow-designer-react": "^0.16.9"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",
diff --git a/demos/svelte-app/README.md b/demos/svelte-app/README.md
@@ -2,7 +2,7 @@
 
 This project contains a simple demo of using the `sequential-workflow-designer-svelte` package.
 
-## 🚀 How to Run?
+## 🚀 How to Run Locally
 
 1. Clone this repository.
 2. Install dependencies: `yarn install`
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.16.8",
-		"sequential-workflow-designer-svelte": "^0.16.8"
+		"sequential-workflow-designer": "^0.16.9",
+		"sequential-workflow-designer-svelte": "^0.16.9"
 	},
 	"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.16.8",
+	"version": "0.16.9",
 	"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
@@ -53,6 +53,11 @@ export interface DesignerConfiguration<TDefinition extends Definition = Definiti
 	 */
 	validator?: ValidatorConfiguration;
 
+	/**
+	 * @description The configuration of the keyboard shortcuts. By default, the keyboard shortcuts are enabled (`true`). If `false`, the keyboard shortcuts are disabled.
+	 */
+	keyboard?: boolean | KeyboardConfiguration;
+
 	/**
 	 * @description The handler that handles custom actions.
 	 */
@@ -158,6 +163,14 @@ export interface ValidatorConfiguration {
 export type StepValidator = (step: Step, parentSequence: Sequence, definition: Definition) => boolean;
 export type RootValidator = (definition: Definition) => boolean;
 
+export interface KeyboardConfiguration {
+	canHandleKey?: (action: KeyboardAction, event: KeyboardEvent) => boolean;
+}
+
+export enum KeyboardAction {
+	delete = 'delete'
+}
+
 export interface EditorsConfiguration<TDefinition extends Definition = Definition> {
 	isCollapsed?: boolean;
 	stepEditorProvider: StepEditorProvider<TDefinition>;
diff --git a/designer/src/keyboard/keyboard-daemon-extension.ts b/designer/src/keyboard/keyboard-daemon-extension.ts
@@ -1,6 +1,19 @@
+import { DesignerApi } from '../api';
+import { KeyboardConfiguration } from '../designer-configuration';
 import { DaemonExtension } from '../designer-extension';
 import { KeyboardDaemon } from './keyboard-daemon';
 
 export class KeyboardDaemonExtension implements DaemonExtension {
-	public readonly create = KeyboardDaemon.create;
+	public static create(configuration: undefined | true | KeyboardConfiguration) {
+		if (configuration === undefined || configuration === true) {
+			configuration = {};
+		}
+		return new KeyboardDaemonExtension(configuration);
+	}
+
+	private constructor(private readonly configuration: KeyboardConfiguration) {}
+
+	public create(api: DesignerApi) {
+		return KeyboardDaemon.create(api, this.configuration);
+	}
 }
diff --git a/designer/src/keyboard/keyboard-daemon.ts b/designer/src/keyboard/keyboard-daemon.ts
@@ -1,26 +1,30 @@
 import { DesignerApi } from '../api/designer-api';
 import { ControlBarApi } from '../api/control-bar-api';
 import { Daemon } from '../designer-extension';
+import { KeyboardAction, KeyboardConfiguration } from '../designer-configuration';
 
-const supportedKeys = ['Backspace', 'Delete'];
-const ignoreTagNames = ['INPUT', 'TEXTAREA'];
+const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
 
 export class KeyboardDaemon implements Daemon {
-	public static create(api: DesignerApi): KeyboardDaemon {
-		const controller = new KeyboardDaemon(api.controlBar);
+	public static create(api: DesignerApi, configuration: KeyboardConfiguration): KeyboardDaemon {
+		const controller = new KeyboardDaemon(api.controlBar, configuration);
 		document.addEventListener('keyup', controller.onKeyUp, false);
 		return controller;
 	}
 
-	private constructor(private readonly controlBarApi: ControlBarApi) {}
+	private constructor(private readonly controlBarApi: ControlBarApi, private readonly configuration: KeyboardConfiguration) {}
 
 	private readonly onKeyUp = (e: KeyboardEvent) => {
-		if (!supportedKeys.includes(e.key)) {
+		const action = detectAction(e);
+		if (!action) {
 			return;
 		}
 		if (document.activeElement && ignoreTagNames.includes(document.activeElement.tagName)) {
 			return;
 		}
+		if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, e)) {
+			return;
+		}
 
 		const isDeletable = this.controlBarApi.canDelete();
 		if (isDeletable) {
@@ -35,3 +39,10 @@ export class KeyboardDaemon implements Daemon {
 		document.removeEventListener('keyup', this.onKeyUp, false);
 	}
 }
+
+function detectAction(e: KeyboardEvent): KeyboardAction | null {
+	if (e.key === 'Backspace' || e.key === 'Delete') {
+		return KeyboardAction.delete;
+	}
+	return null;
+}
diff --git a/designer/src/services.ts b/designer/src/services.ts
@@ -1,6 +1,6 @@
 import { DefaultDraggedComponentExtension } from './behaviors/default-dragged-component-extension';
 import { ControlBarExtension } from './control-bar/control-bar-extension';
-import { DesignerConfiguration } from './designer-configuration';
+import { DesignerConfiguration, KeyboardConfiguration } from './designer-configuration';
 import { DesignerExtension } from './designer-extension';
 import { KeyboardDaemonExtension } from './keyboard/keyboard-daemon-extension';
 import { SmartEditorExtension } from './smart-editor/smart-editor-extension';
@@ -134,5 +134,7 @@ function setDefault(services: Partial<Services>, configuration: DesignerConfigur
 	if (!services.daemons) {
 		services.daemons = [];
 	}
-	services.daemons.push(new KeyboardDaemonExtension());
+	if (configuration.keyboard === undefined || configuration.keyboard) {
+		services.daemons.push(KeyboardDaemonExtension.create(configuration.keyboard as true | undefined | KeyboardConfiguration));
+	}
 }
diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,14 @@
+# Examples of Sequential Workflow Designer
+
+This folder contains examples of Sequential Workflow Designer. All examples are written in pure JavaScript.
+
+You may run them locally or check them out [online](https://nocode-js.com/sequential-workflow-designer-examples).
+
+## 🚀 How to Run Locally
+
+If you want to run examples locally, you need to build the packages first.
+
+1. Go to the root folder of this repository and run `yarn install`.
+2. Build all packages by running `yarn build`.
+3. Run HTTP server by `yarn serve`.
+4. Open `http://127.0.0.1:8080/examples/` in your browser.
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.16.8';
+	: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.9';
 
 embedScript(`${baseUrl}/dist/index.umd.js`);
 embedStylesheet(`${baseUrl}/css/designer.css`);
diff --git a/examples/assets/scrollable-page.js b/examples/assets/scrollable-page.js
@@ -44,6 +44,7 @@ const configuration = {
 		}
 	},
 	controlBar: true,
+	keyboard: false,
 };
 
 function init(placeholder) {
diff --git a/examples/scrollable-page.html b/examples/scrollable-page.html
@@ -35,7 +35,7 @@ <h1>📜 Scrollable Page Example</h1>
 	<main>
 		<h2>This is a simple scrollable page</h2>
 
-		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ex augue, nec ultrices tellus feugiat vitae. Donec at commodo elit. Vestibulum imperdiet eget elit a feugiat. Fusce eros diam, laoreet id neque eu, molestie facilisis est. Sed tristique sollicitudin ultrices. Ut a nibh a erat euismod venenatis sit amet quis felis.</p>
+		<p>Here you can check how Sequential Workflow Designer works on a scrollable page. Additionally this example has disabled keyboard shortcuts.</p>
 
 		<div class="inline-designer"></div>
 
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.16.8",
+	"version": "0.16.9",
 	"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.16.8"
+		"sequential-workflow-designer": "^0.16.9"
 	},
 	"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.16.8",
+		"sequential-workflow-designer": "^0.16.9",
 		"rollup": "^3.18.0",
 		"rollup-plugin-dts": "^5.2.0",
 		"rollup-plugin-typescript2": "^0.34.1",
diff --git a/react/src/SequentialWorkflowDesigner.tsx b/react/src/SequentialWorkflowDesigner.tsx
@@ -15,7 +15,8 @@ import {
 	Sequence,
 	ValidatorConfiguration,
 	GlobalEditorProvider,
-	StepEditorProvider
+	StepEditorProvider,
+	KeyboardConfiguration
 } from 'sequential-workflow-designer';
 import { GlobalEditorWrapperContext } from './GlobalEditorWrapper';
 import { StepEditorWrapperContext } from './StepEditorWrapper';
@@ -51,6 +52,7 @@ export interface SequentialWorkflowDesignerProps<TDefinition extends Definition>
 	 */
 	controlBar: boolean;
 	contextMenu?: boolean;
+	keyboard?: boolean | KeyboardConfiguration;
 	controller?: SequentialWorkflowDesignerController;
 	customActionHandler?: CustomActionHandler;
 	extensions?: DesignerExtension[];
@@ -83,6 +85,7 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
 	const isToolboxCollapsed = props.isToolboxCollapsed;
 	const controlBar = props.controlBar;
 	const contextMenu = props.contextMenu;
+	const keyboard = props.keyboard;
 	const extensions = props.extensions;
 
 	if (props.controlBar === undefined) {
@@ -223,6 +226,7 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
 			validator,
 			controlBar,
 			contextMenu,
+			keyboard,
 			editors:
 				globalEditorRef.current && stepEditorRef.current
 					? {
@@ -274,6 +278,7 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
 		isToolboxCollapsed,
 		isEditorCollapsed,
 		contextMenu,
+		keyboard,
 		controlBar,
 		steps,
 		validator,
diff --git a/svelte/README.md b/svelte/README.md
diff --git a/svelte/package.json b/svelte/package.json
diff --git a/svelte/src/lib/SequentialWorkflowDesigner.svelte b/svelte/src/lib/SequentialWorkflowDesigner.svelte

-Original file line number
+Diff line change
 ```html
 <head>
 ...
 -<link href="https://cdn.jsdelivr.net/npm/[email protected].8/css/designer.css" rel="stylesheet">
 -<link href="https://cdn.jsdelivr.net/npm/[email protected].8/css/designer-light.css" rel="stylesheet">
 -<link href="https://cdn.jsdelivr.net/npm/[email protected].8/css/designer-dark.css" rel="stylesheet">
 -<script src="https://cdn.jsdelivr.net/npm/[email protected].8/dist/index.umd.js"></script>
 +<link href="https://cdn.jsdelivr.net/npm/[email protected].9/css/designer.css" rel="stylesheet">
 +<link href="https://cdn.jsdelivr.net/npm/[email protected].9/css/designer-light.css" rel="stylesheet">
 +<link href="https://cdn.jsdelivr.net/npm/[email protected].9/css/designer-dark.css" rel="stylesheet">
 +<script src="https://cdn.jsdelivr.net/npm/[email protected].9/dist/index.umd.js"></script>
 ```
 Call the designer by: