Skip to content

Commit b689399

Browse files
b4rtazb4rtaz
authored
0.16.10. (#101)
1 parent 1435fca commit b689399

File tree

17 files changed

+116
-54
lines changed

17 files changed

+116
-54
lines changed

‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## 0.16.10
2+
3+
This version fixes the error: `Failed to execute 'removeChild' on 'Node'` when a user uses the undo feature [#100](https://github.com/nocode-js/sequential-workflow-designer/issues/100).
4+
5+
Additionally, this version introduces `getViewport`, `setViewport` methods and `onViewportChanged` event in the `Designer` class.
6+
17
## 0.16.9
28

39
This version adds a possibility to disable keyboard shortcuts. Additionally you may filter keyboard events handled by the designer.

‎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.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>
99+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/css/designer.css" rel="stylesheet">
100+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/css/designer-light.css" rel="stylesheet">
101+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/css/designer-dark.css" rel="stylesheet">
102+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/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.9",
4+
"version": "0.16.10",
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.9"
18+
"sequential-workflow-designer": "^0.16.10"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

‎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.9",
30-
"sequential-workflow-designer-angular": "^0.16.9",
29+
"sequential-workflow-designer": "^0.16.10",
30+
"sequential-workflow-designer-angular": "^0.16.10",
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.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==
5959+
sequential-workflow-designer-angular@^0.16.10:
5960+
version "0.16.10"
5961+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.16.10.tgz#25094a86e9713c95008616c21425b796bf28f947"
5962+
integrity sha512-Cr7xABHuJwVNsDaU3dr0qOCOgRGLojQTFOZ2bXH1OpXRzwhxK4xEpmuKptnYhyl1piR5NuhWrfHAfODBJs21bQ==
59635963
dependencies:
59645964
tslib "^2.3.0"
59655965

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==
5966+
sequential-workflow-designer@^0.16.10:
5967+
version "0.16.10"
5968+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.16.10.tgz#a8c75397cdc1e87c7ca5d787983ee394811fa9d8"
5969+
integrity sha512-4r5eDOPuiTNUoCYPJr5wJXVvB7rFOVgCjk7tgLEoivvaiMXxdqP3PC/n3/JwKuwxsnJyf6skvjHerwdqV6/e4Q==
59705970
dependencies:
59715971
sequential-workflow-model "^0.2.0"
59725972

‎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.9",
10-
"sequential-workflow-designer-react": "^0.16.9"
9+
"sequential-workflow-designer": "^0.16.10",
10+
"sequential-workflow-designer-react": "^0.16.10"
1111
},
1212
"devDependencies": {
1313
"@types/jest": "^29.2.5",

‎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.9",
20-
"sequential-workflow-designer-svelte": "^0.16.9"
19+
"sequential-workflow-designer": "^0.16.10",
20+
"sequential-workflow-designer-svelte": "^0.16.10"
2121
},
2222
"devDependencies": {
2323
"@sveltejs/adapter-static": "^2.0.3",

‎demos/svelte-app/src/routes/+page.svelte

+1
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@
9292
</script>
9393

9494
<SequentialWorkflowDesigner
95+
undoStackSize={4}
9596
{definition}
9697
on:definitionChanged={onDefinitionChanged}
9798
{steps}

‎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.9",
4+
"version": "0.16.10",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

‎designer/src/api/editor-renderer.ts

+17-14
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import { DefinitionWalker, Step } from '../definition';
2-
import { race } from '../core';
2+
import { SimpleEvent, race } from '../core';
33
import { DefinitionChangedEvent, DesignerState } from '../designer-state';
44
import { DefinitionChangeType } from '../designer-configuration';
55

66
export type EditorRendererHandler = (step: Step | null) => void;
77

8+
type RaceEventArgs = [(DefinitionChangedEvent | undefined)?, (string | null | undefined)?, unknown?];
9+
810
export class EditorRenderer {
911
public static create(state: DesignerState, definitionWalker: DefinitionWalker, handler: EditorRendererHandler): EditorRenderer {
10-
const listener = new EditorRenderer(state, definitionWalker, handler);
11-
12-
race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged).subscribe(r => {
13-
const [definitionChanged, selectedStepId] = r;
14-
if (definitionChanged) {
15-
listener.onDefinitionChanged(definitionChanged);
16-
} else if (selectedStepId !== undefined) {
17-
listener.onSelectedStepIdChanged(selectedStepId);
18-
}
19-
});
20-
12+
const raceEvent = race(0, state.onDefinitionChanged, state.onSelectedStepIdChanged);
13+
const listener = new EditorRenderer(state, definitionWalker, handler, raceEvent);
14+
raceEvent.subscribe(listener.raceEventHandler);
2115
listener.tryRender(state.selectedStepId);
2216
return listener;
2317
}
@@ -27,11 +21,12 @@ export class EditorRenderer {
2721
private constructor(
2822
private readonly state: DesignerState,
2923
private readonly definitionWalker: DefinitionWalker,
30-
private readonly handler: EditorRendererHandler
24+
private readonly handler: EditorRendererHandler,
25+
private readonly raceEvent: SimpleEvent<RaceEventArgs>
3126
) {}
3227

3328
public destroy() {
34-
// TODO: unsubscribe from events
29+
this.raceEvent.unsubscribe(this.raceEventHandler);
3530
}
3631

3732
private render(stepId: string | null) {
@@ -46,6 +41,14 @@ export class EditorRenderer {
4641
}
4742
}
4843

44+
private readonly raceEventHandler = ([definitionChanged, selectedStepId]: RaceEventArgs) => {
45+
if (definitionChanged) {
46+
this.onDefinitionChanged(definitionChanged);
47+
} else if (selectedStepId !== undefined) {
48+
this.onSelectedStepIdChanged(selectedStepId);
49+
}
50+
};
51+
4952
private onDefinitionChanged(event: DefinitionChangedEvent) {
5053
if (event.changeType === DefinitionChangeType.rootReplaced) {
5154
this.render(this.state.selectedStepId);

‎designer/src/designer-extension.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -168,8 +168,8 @@ export interface ViewportController {
168168
}
169169

170170
export interface Viewport {
171-
position: Vector;
172-
scale: number;
171+
readonly position: Vector;
172+
readonly scale: number;
173173
}
174174

175175
// DaemonExtension

‎designer/src/designer.ts

+35-5
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { ServicesResolver } from './services';
99
import { validateConfiguration } from './core/designer-configuration-validator';
1010
import { DesignerApi } from './api';
1111
import { HistoryController } from './history-controller';
12+
import { Viewport } from './designer-extension';
13+
import { race } from './core';
1214

1315
export class Designer<TDefinition extends Definition = Definition> {
1416
/**
@@ -53,12 +55,20 @@ export class Designer<TDefinition extends Definition = Definition> {
5355
);
5456
view.workspace.onReady.subscribe(() => designer.onReady.forward());
5557

56-
designerContext.state.onDefinitionChanged.subscribe(() => {
57-
setTimeout(() => designer.onDefinitionChanged.forward(designerContext.state.definition as TDef));
58-
});
59-
designerContext.state.onSelectedStepIdChanged.subscribe(() =>
60-
designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId)
58+
race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(
59+
([definition, selectedStepId]) => {
60+
if (definition !== undefined) {
61+
designer.onDefinitionChanged.forward(designerContext.state.definition as TDef);
62+
}
63+
if (selectedStepId !== undefined) {
64+
designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
65+
}
66+
}
6167
);
68+
69+
designerContext.state.onViewportChanged.subscribe(viewPort => {
70+
designer.onViewportChanged.forward(viewPort);
71+
});
6272
designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
6373
designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
6474
});
@@ -86,6 +96,11 @@ export class Designer<TDefinition extends Definition = Definition> {
8696
*/
8797
public readonly onDefinitionChanged = new SimpleEvent<TDefinition>();
8898

99+
/**
100+
* @description Fires when the viewport has changed.
101+
*/
102+
public readonly onViewportChanged = new SimpleEvent<Viewport>();
103+
89104
/**
90105
* @description Fires when the selected step has changed.
91106
*/
@@ -143,6 +158,21 @@ export class Designer<TDefinition extends Definition = Definition> {
143158
this.state.setSelectedStepId(stepId);
144159
}
145160

161+
/**
162+
* @returns the current viewport.
163+
*/
164+
public getViewport(): Viewport {
165+
return this.state.viewport;
166+
}
167+
168+
/**
169+
* @description Sets the viewport.
170+
* @param viewport Viewport.
171+
*/
172+
public setViewport(viewport: Viewport) {
173+
this.state.setViewport(viewport);
174+
}
175+
146176
/**
147177
* @description Unselects the selected step.
148178
*/

‎examples/assets/auto-select.js

+24-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* global document, sequentialWorkflowDesigner */
22

3-
function init(placeholderId, isAutoSelectDisabled) {
3+
function init(id, isAutoSelectDisabled) {
44
const configuration = {
55
steps: {
66
iconUrlProvider: () => './assets/icon-task.svg',
@@ -30,9 +30,28 @@ function init(placeholderId, isAutoSelectDisabled) {
3030
sequence: []
3131
};
3232

33-
const placeholder = document.getElementById(placeholderId);
34-
sequentialWorkflowDesigner.Designer.create(placeholder, startDefinition, configuration);
33+
const placeholder = document.getElementById(`designer${id}`);
34+
const viewport = document.getElementById(`viewport${id}`);
35+
const designer = sequentialWorkflowDesigner.Designer.create(placeholder, startDefinition, configuration);
36+
37+
function set00Viewport() {
38+
designer.setViewport({
39+
scale: 1,
40+
position: new sequentialWorkflowDesigner.Vector(0, 0)
41+
});
42+
}
43+
44+
function reloadViewport(vp) {
45+
const x = Math.round(vp.position.x);
46+
const y = Math.round(vp.position.x);
47+
const scale = vp.scale.toFixed(2);
48+
viewport.innerText = `Viewport x: ${x}, y: ${y}, scale: ${scale}`
49+
}
50+
51+
designer.onViewportChanged.subscribe(reloadViewport);
52+
viewport.addEventListener('click', set00Viewport, false);
53+
reloadViewport(designer.getViewport());
3554
}
3655

37-
init('designer1', false);
38-
init('designer2', true);
56+
init('1', false);
57+
init('2', true);

‎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.9';
22+
: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10';
2323

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

‎examples/auto-select.html

+3
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
main .example {display: flex; flex: 1; margin: 10px; flex-direction: column;}
2222
main .example .title {text-align: center; padding: 5px 0 15px;}
2323
main .example .placeholder {flex: 1; border: 1px solid #e8e8e8;}
24+
main .example .viewport {text-align: center; padding: 15px 0 10px;}
2425
</style>
2526
</head>
2627
<body>
@@ -37,10 +38,12 @@ <h1>🌀 Auto-Select Example</h1>
3738
<div class="example">
3839
<div class="title">Auto-select after drop is <strong>✅ enabled</strong></div>
3940
<div class="placeholder" id="designer1"></div>
41+
<div class="viewport" id="viewport1"></div>
4042
</div>
4143
<div class="example">
4244
<div class="title">Auto-select after drop is <strong>❌ disabled</strong></div>
4345
<div class="placeholder" id="designer2"></div>
46+
<div class="viewport" id="viewport2"></div>
4447
</div>
4548
</main>
4649

‎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.9",
4+
"version": "0.16.10",
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.9"
50+
"sequential-workflow-designer": "^0.16.10"
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.9",
66+
"sequential-workflow-designer": "^0.16.10",
6767
"rollup": "^3.18.0",
6868
"rollup-plugin-dts": "^5.2.0",
6969
"rollup-plugin-typescript2": "^0.34.1",

‎svelte/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer-svelte",
33
"description": "Svelte wrapper for Sequential Workflow Designer component.",
4-
"version": "0.16.9",
4+
"version": "0.16.10",
55
"license": "MIT",
66
"scripts": {
77
"prepare": "cp ../LICENSE LICENSE",
@@ -28,10 +28,10 @@
2828
],
2929
"peerDependencies": {
3030
"svelte": "^4.0.0",
31-
"sequential-workflow-designer": "^0.16.9"
31+
"sequential-workflow-designer": "^0.16.10"
3232
},
3333
"devDependencies": {
34-
"sequential-workflow-designer": "^0.16.9",
34+
"sequential-workflow-designer": "^0.16.10",
3535
"@sveltejs/adapter-static": "^2.0.3",
3636
"@sveltejs/kit": "^1.20.4",
3737
"@sveltejs/package": "^2.0.0",

0 commit comments

Comments
 (0)