Skip to content

Commit 1435fca

Browse files
b4rtazb4rtaz
authored
0.16.9. (#99)
* 0.16.9.
1 parent 48b4a4a commit 1435fca

25 files changed

+122
-44
lines changed

‎CHANGELOG.md

+12
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
## 0.16.9
2+
3+
This version adds a possibility to disable keyboard shortcuts. Additionally you may filter keyboard events handled by the designer.
4+
5+
```js
6+
// Disabled shortcuts
7+
const configuration = {
8+
keyboard: false,
9+
// ...
10+
};
11+
```
12+
113
## 0.16.8
214

315
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.

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -96,10 +96,10 @@ Add the below code to your head section in HTML document.
9696
```html
9797
<head>
9898
...
99-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.8/css/designer.css" rel="stylesheet">
100-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.8/css/designer-light.css" rel="stylesheet">
101-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.8/css/designer-dark.css" rel="stylesheet">
102-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.8/dist/index.umd.js"></script>
99+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.9/css/designer.css" rel="stylesheet">
100+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.9/css/designer-light.css" rel="stylesheet">
101+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.9/css/designer-dark.css" rel="stylesheet">
102+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.9/dist/index.umd.js"></script>
103103
```
104104

105105
Call the designer by:

‎angular/designer/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer-angular",
33
"description": "Angular wrapper for Sequential Workflow Designer component.",
4-
"version": "0.16.8",
4+
"version": "0.16.9",
55
"author": {
66
"name": "NoCode JS",
77
"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
1515
"peerDependencies": {
1616
"@angular/common": "12 - 16",
1717
"@angular/core": "12 - 16",
18-
"sequential-workflow-designer": "^0.16.8"
18+
"sequential-workflow-designer": "^0.16.9"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

‎angular/designer/src/designer.component.ts

+4
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
DesignerExtension,
2222
GlobalEditorContext,
2323
GlobalEditorProvider,
24+
KeyboardConfiguration,
2425
Step,
2526
StepEditorContext,
2627
StepEditorProvider,
@@ -70,6 +71,8 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
7071
public controlBar?: boolean;
7172
@Input('contextMenu')
7273
public contextMenu?: boolean;
74+
@Input('keyboard')
75+
public keyboard?: boolean | KeyboardConfiguration;
7376
@Input('extensions')
7477
public extensions?: DesignerExtension[];
7578
@Input('customActionHandler')
@@ -208,6 +211,7 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
208211
: false,
209212
controlBar: this.controlBar,
210213
contextMenu: this.contextMenu,
214+
keyboard: this.keyboard,
211215
extensions: this.extensions,
212216
isReadonly: this.isReadonly,
213217
uidGenerator: this.uidGenerator,

‎demos/angular-app/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
This project contains a simple demo of using the `sequential-workflow-designer-angular` package.
44

5-
## 🚀 How to Run?
5+
## 🚀 How to Run Locally
66

77
1. Clone this repository.
88
2. Install dependencies: `yarn install`

‎demos/angular-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
"@angular/platform-browser-dynamic": "^15.2.9",
2727
"@angular/router": "^15.2.9",
2828
"rxjs": "~7.8.0",
29-
"sequential-workflow-designer": "^0.16.8",
30-
"sequential-workflow-designer-angular": "^0.16.8",
29+
"sequential-workflow-designer": "^0.16.9",
30+
"sequential-workflow-designer-angular": "^0.16.9",
3131
"tslib": "^2.3.0",
3232
"zone.js": "~0.13.0"
3333
},

‎demos/angular-app/yarn.lock

+8-8
Original file line numberDiff line numberDiff line change
@@ -5956,17 +5956,17 @@ send@0.18.0:
59565956
range-parser "~1.2.1"
59575957
statuses "2.0.1"
59585958

5959-
sequential-workflow-designer-angular@^0.16.8:
5960-
version "0.16.8"
5961-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.16.8.tgz#80fe67bda35e676c7823a86341a48ca318d92cc6"
5962-
integrity sha512-9ewvSBVQXQ9hnIilh+V8flCmF3ZjLmZgVrxEYGhJ5okYAOeAla8mbqr+c87YDacemPOd4FFRbgMDBptlcjtEmw==
5959+
sequential-workflow-designer-angular@^0.16.9:
5960+
version "0.16.9"
5961+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.16.9.tgz#78d2ad7bd37435bc6c17845cab0f9f41629d4e5c"
5962+
integrity sha512-yxhTNoN5pXWpIRH2st0wv43ugsxUVgSZMy4zhHS7mOv5slDnOK2WByzJEsTRMteHk4FMFdjnSAX7+K2jTuX0mA==
59635963
dependencies:
59645964
tslib "^2.3.0"
59655965

5966-
sequential-workflow-designer@^0.16.8:
5967-
version "0.16.8"
5968-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.16.8.tgz#75c0d10bda354b9f31c40c65bb61474e1a91de9f"
5969-
integrity sha512-YinakcQ5lvI+otxFlDkH+IRCijXJDav6IeCPesvWPb0vjFy0G8xtfMDVHzY3rL5l4uWwQmzUIZg/xLxnnp7BFw==
5966+
sequential-workflow-designer@^0.16.9:
5967+
version "0.16.9"
5968+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.16.9.tgz#7fc328e131125945acd588d108d0b36c61a42293"
5969+
integrity sha512-OIktDfaA7NWVZ+AE27QrEXXDuAwrDzMP97dJAa9bUX3cH9EOVFVKg7OSz7qCuTaDDSkzfgX5PF1U6hMgo4CAmg==
59705970
dependencies:
59715971
sequential-workflow-model "^0.2.0"
59725972

‎demos/react-app/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
This project contains a simple demo of using the `sequential-workflow-designer-react` package.
44

5-
## 🚀 How to Run?
5+
## 🚀 How to Run Locally
66

77
1. Clone this repository.
88
2. Install dependencies: `yarn install`

‎demos/react-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
"dependencies": {
77
"react": "^18.2.0",
88
"react-dom": "^18.2.0",
9-
"sequential-workflow-designer": "^0.16.8",
10-
"sequential-workflow-designer-react": "^0.16.8"
9+
"sequential-workflow-designer": "^0.16.9",
10+
"sequential-workflow-designer-react": "^0.16.9"
1111
},
1212
"devDependencies": {
1313
"@types/jest": "^29.2.5",

‎demos/svelte-app/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
This project contains a simple demo of using the `sequential-workflow-designer-svelte` package.
44

5-
## 🚀 How to Run?
5+
## 🚀 How to Run Locally
66

77
1. Clone this repository.
88
2. Install dependencies: `yarn install`

‎demos/svelte-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
"eslint": "eslint ./src --ext .ts"
1717
},
1818
"dependencies": {
19-
"sequential-workflow-designer": "^0.16.8",
20-
"sequential-workflow-designer-svelte": "^0.16.8"
19+
"sequential-workflow-designer": "^0.16.9",
20+
"sequential-workflow-designer-svelte": "^0.16.9"
2121
},
2222
"devDependencies": {
2323
"@sveltejs/adapter-static": "^2.0.3",

‎designer/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer",
33
"description": "Customizable no-code component for building flow-based programming applications.",
4-
"version": "0.16.8",
4+
"version": "0.16.9",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

‎designer/src/designer-configuration.ts

+13
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,11 @@ export interface DesignerConfiguration<TDefinition extends Definition = Definiti
5353
*/
5454
validator?: ValidatorConfiguration;
5555

56+
/**
57+
* @description The configuration of the keyboard shortcuts. By default, the keyboard shortcuts are enabled (`true`). If `false`, the keyboard shortcuts are disabled.
58+
*/
59+
keyboard?: boolean | KeyboardConfiguration;
60+
5661
/**
5762
* @description The handler that handles custom actions.
5863
*/
@@ -158,6 +163,14 @@ export interface ValidatorConfiguration {
158163
export type StepValidator = (step: Step, parentSequence: Sequence, definition: Definition) => boolean;
159164
export type RootValidator = (definition: Definition) => boolean;
160165

166+
export interface KeyboardConfiguration {
167+
canHandleKey?: (action: KeyboardAction, event: KeyboardEvent) => boolean;
168+
}
169+
170+
export enum KeyboardAction {
171+
delete = 'delete'
172+
}
173+
161174
export interface EditorsConfiguration<TDefinition extends Definition = Definition> {
162175
isCollapsed?: boolean;
163176
stepEditorProvider: StepEditorProvider<TDefinition>;

‎designer/src/keyboard/keyboard-daemon-extension.ts

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
1+
import { DesignerApi } from '../api';
2+
import { KeyboardConfiguration } from '../designer-configuration';
13
import { DaemonExtension } from '../designer-extension';
24
import { KeyboardDaemon } from './keyboard-daemon';
35

46
export class KeyboardDaemonExtension implements DaemonExtension {
5-
public readonly create = KeyboardDaemon.create;
7+
public static create(configuration: undefined | true | KeyboardConfiguration) {
8+
if (configuration === undefined || configuration === true) {
9+
configuration = {};
10+
}
11+
return new KeyboardDaemonExtension(configuration);
12+
}
13+
14+
private constructor(private readonly configuration: KeyboardConfiguration) {}
15+
16+
public create(api: DesignerApi) {
17+
return KeyboardDaemon.create(api, this.configuration);
18+
}
619
}

‎designer/src/keyboard/keyboard-daemon.ts

+17-6
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
11
import { DesignerApi } from '../api/designer-api';
22
import { ControlBarApi } from '../api/control-bar-api';
33
import { Daemon } from '../designer-extension';
4+
import { KeyboardAction, KeyboardConfiguration } from '../designer-configuration';
45

5-
const supportedKeys = ['Backspace', 'Delete'];
6-
const ignoreTagNames = ['INPUT', 'TEXTAREA'];
6+
const ignoreTagNames = ['INPUT', 'TEXTAREA', 'SELECT'];
77

88
export class KeyboardDaemon implements Daemon {
9-
public static create(api: DesignerApi): KeyboardDaemon {
10-
const controller = new KeyboardDaemon(api.controlBar);
9+
public static create(api: DesignerApi, configuration: KeyboardConfiguration): KeyboardDaemon {
10+
const controller = new KeyboardDaemon(api.controlBar, configuration);
1111
document.addEventListener('keyup', controller.onKeyUp, false);
1212
return controller;
1313
}
1414

15-
private constructor(private readonly controlBarApi: ControlBarApi) {}
15+
private constructor(private readonly controlBarApi: ControlBarApi, private readonly configuration: KeyboardConfiguration) {}
1616

1717
private readonly onKeyUp = (e: KeyboardEvent) => {
18-
if (!supportedKeys.includes(e.key)) {
18+
const action = detectAction(e);
19+
if (!action) {
1920
return;
2021
}
2122
if (document.activeElement && ignoreTagNames.includes(document.activeElement.tagName)) {
2223
return;
2324
}
25+
if (this.configuration.canHandleKey && !this.configuration.canHandleKey(action, e)) {
26+
return;
27+
}
2428

2529
const isDeletable = this.controlBarApi.canDelete();
2630
if (isDeletable) {
@@ -35,3 +39,10 @@ export class KeyboardDaemon implements Daemon {
3539
document.removeEventListener('keyup', this.onKeyUp, false);
3640
}
3741
}
42+
43+
function detectAction(e: KeyboardEvent): KeyboardAction | null {
44+
if (e.key === 'Backspace' || e.key === 'Delete') {
45+
return KeyboardAction.delete;
46+
}
47+
return null;
48+
}

‎designer/src/services.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { DefaultDraggedComponentExtension } from './behaviors/default-dragged-component-extension';
22
import { ControlBarExtension } from './control-bar/control-bar-extension';
3-
import { DesignerConfiguration } from './designer-configuration';
3+
import { DesignerConfiguration, KeyboardConfiguration } from './designer-configuration';
44
import { DesignerExtension } from './designer-extension';
55
import { KeyboardDaemonExtension } from './keyboard/keyboard-daemon-extension';
66
import { SmartEditorExtension } from './smart-editor/smart-editor-extension';
@@ -134,5 +134,7 @@ function setDefault(services: Partial<Services>, configuration: DesignerConfigur
134134
if (!services.daemons) {
135135
services.daemons = [];
136136
}
137-
services.daemons.push(new KeyboardDaemonExtension());
137+
if (configuration.keyboard === undefined || configuration.keyboard) {
138+
services.daemons.push(KeyboardDaemonExtension.create(configuration.keyboard as true | undefined | KeyboardConfiguration));
139+
}
138140
}

‎examples/README.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Examples of Sequential Workflow Designer
2+
3+
This folder contains examples of Sequential Workflow Designer. All examples are written in pure JavaScript.
4+
5+
You may run them locally or check them out [online](https://nocode-js.com/sequential-workflow-designer-examples).
6+
7+
## 🚀 How to Run Locally
8+
9+
If you want to run examples locally, you need to build the packages first.
10+
11+
1. Go to the root folder of this repository and run `yarn install`.
12+
2. Build all packages by running `yarn build`.
13+
3. Run HTTP server by `yarn serve`.
14+
4. Open `http://127.0.0.1:8080/examples/` in your browser.

‎examples/assets/lib.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function embedStylesheet(url) {
1919

2020
const baseUrl = isTestEnv()
2121
? '../designer'
22-
: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.8';
22+
: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.9';
2323

2424
embedScript(`${baseUrl}/dist/index.umd.js`);
2525
embedStylesheet(`${baseUrl}/css/designer.css`);

‎examples/assets/scrollable-page.js

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ const configuration = {
4444
}
4545
},
4646
controlBar: true,
47+
keyboard: false,
4748
};
4849

4950
function init(placeholder) {

‎examples/scrollable-page.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ <h1>📜 Scrollable Page Example</h1>
3535
<main>
3636
<h2>This is a simple scrollable page</h2>
3737

38-
<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>
38+
<p>Here you can check how Sequential Workflow Designer works on a scrollable page. Additionally this example has disabled keyboard shortcuts.</p>
3939

4040
<div class="inline-designer"></div>
4141

‎react/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer-react",
33
"description": "React wrapper for Sequential Workflow Designer component.",
4-
"version": "0.16.8",
4+
"version": "0.16.9",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",
@@ -47,7 +47,7 @@
4747
"peerDependencies": {
4848
"react": "^18.2.0",
4949
"react-dom": "^18.2.0",
50-
"sequential-workflow-designer": "^0.16.8"
50+
"sequential-workflow-designer": "^0.16.9"
5151
},
5252
"devDependencies": {
5353
"@rollup/plugin-node-resolve": "^15.0.1",
@@ -63,7 +63,7 @@
6363
"prettier": "^2.8.2",
6464
"react": "^18.2.0",
6565
"react-dom": "^18.2.0",
66-
"sequential-workflow-designer": "^0.16.8",
66+
"sequential-workflow-designer": "^0.16.9",
6767
"rollup": "^3.18.0",
6868
"rollup-plugin-dts": "^5.2.0",
6969
"rollup-plugin-typescript2": "^0.34.1",

‎react/src/SequentialWorkflowDesigner.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import {
1515
Sequence,
1616
ValidatorConfiguration,
1717
GlobalEditorProvider,
18-
StepEditorProvider
18+
StepEditorProvider,
19+
KeyboardConfiguration
1920
} from 'sequential-workflow-designer';
2021
import { GlobalEditorWrapperContext } from './GlobalEditorWrapper';
2122
import { StepEditorWrapperContext } from './StepEditorWrapper';
@@ -51,6 +52,7 @@ export interface SequentialWorkflowDesignerProps<TDefinition extends Definition>
5152
*/
5253
controlBar: boolean;
5354
contextMenu?: boolean;
55+
keyboard?: boolean | KeyboardConfiguration;
5456
controller?: SequentialWorkflowDesignerController;
5557
customActionHandler?: CustomActionHandler;
5658
extensions?: DesignerExtension[];
@@ -83,6 +85,7 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
8385
const isToolboxCollapsed = props.isToolboxCollapsed;
8486
const controlBar = props.controlBar;
8587
const contextMenu = props.contextMenu;
88+
const keyboard = props.keyboard;
8689
const extensions = props.extensions;
8790

8891
if (props.controlBar === undefined) {
@@ -223,6 +226,7 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
223226
validator,
224227
controlBar,
225228
contextMenu,
229+
keyboard,
226230
editors:
227231
globalEditorRef.current && stepEditorRef.current
228232
? {
@@ -274,6 +278,7 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
274278
isToolboxCollapsed,
275279
isEditorCollapsed,
276280
contextMenu,
281+
keyboard,
277282
controlBar,
278283
steps,
279284
validator,

0 commit comments

Comments
 (0)