Skip to content

Commit ec65dac

Browse files
b4rtazb4rtaz
authored
0.26.0. (#171)
1 parent 65cc31c commit ec65dac

35 files changed

+250
-102
lines changed

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 0.26.0
2+
3+
This version introduces a few internal changes to support the double-click feature in the pro version.
4+
15
# 0.25.0
26

37
This version introduces the pinch-to-zoom feature. Now you can zoom in and out using the pinch gesture on touch devices.

‎README.md

+5-4
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ Pro:
5555
* [👋 Custom Dragged Component](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-dragged-component.html)
5656
* [🔰 Badges](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/badges.html)
5757
* [🎩 Custom Viewport](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-viewport.html)
58+
* [👊 Double Click](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/double-click.html)
5859
* [🛎 Clickable Placeholder](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/clickable-placeholder.html)
5960
* [📮 Conditional Placeholders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/conditional-placeholders.html)
6061
* [React Pro Demo](https://nocode-js.com/examples/sequential-workflow-designer-pro/react-pro-app/build/index.html)
@@ -103,10 +104,10 @@ Add the below code to your head section in HTML document.
103104
```html
104105
<head>
105106
...
106-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.25.0/css/designer.css" rel="stylesheet">
107-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.25.0/css/designer-light.css" rel="stylesheet">
108-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.25.0/css/designer-dark.css" rel="stylesheet">
109-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.25.0/dist/index.umd.js"></script>
107+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.0/css/designer.css" rel="stylesheet">
108+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.0/css/designer-light.css" rel="stylesheet">
109+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.0/css/designer-dark.css" rel="stylesheet">
110+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.0/dist/index.umd.js"></script>
110111
```
111112

112113
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.25.0",
4+
"version": "0.26.0",
55
"author": {
66
"name": "NoCode JS",
77
"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
1515
"peerDependencies": {
1616
"@angular/common": "12 - 18",
1717
"@angular/core": "12 - 18",
18-
"sequential-workflow-designer": "^0.25.0"
18+
"sequential-workflow-designer": "^0.26.0"
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": "^17.3.9",
2727
"@angular/router": "^17.3.9",
2828
"rxjs": "~7.8.0",
29-
"sequential-workflow-designer": "^0.25.0",
30-
"sequential-workflow-designer-angular": "^0.25.0",
29+
"sequential-workflow-designer": "^0.26.0",
30+
"sequential-workflow-designer-angular": "^0.26.0",
3131
"tslib": "^2.3.0",
3232
"zone.js": "~0.14.6"
3333
},

‎demos/angular-app/yarn.lock

+8-8
Original file line numberDiff line numberDiff line change
@@ -6744,17 +6744,17 @@ send@0.18.0:
67446744
range-parser "~1.2.1"
67456745
statuses "2.0.1"
67466746

6747-
sequential-workflow-designer-angular@^0.25.0:
6748-
version "0.25.0"
6749-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.25.0.tgz#eb65370283a408c10eeb7b71b67dae2af9d6196b"
6750-
integrity sha512-E100P2es8Gn5th0f0ErfjRr9TWWcgocz16kZocWvCHeOn5/iLo+oCuvSSZjewpnYTVA6oDcHH//KJnq5sPN69g==
6747+
sequential-workflow-designer-angular@^0.26.0:
6748+
version "0.26.0"
6749+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.26.0.tgz#f27885071efaf6e20e6884129f0666aefcb66ba6"
6750+
integrity sha512-UkWmksYIXggsDGWTHcjDW6RVpEpi3gKkBKBtMsyYTtZsE8PtMm0W5PF6gTHL3t1JBDw40jHCVLeEFNfjOp6jKg==
67516751
dependencies:
67526752
tslib "^2.3.0"
67536753

6754-
sequential-workflow-designer@^0.25.0:
6755-
version "0.25.0"
6756-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.25.0.tgz#db8d35441a68f0b05f169e458f12f5457f9beca9"
6757-
integrity sha512-KNOTA4zx/TkpL0LHQFvNe2S07vejA4YjRcl6UNpLjG4fODQKfiZ8zj5RypcG54O6TArBU8eDEUwtXgnuopGEYQ==
6754+
sequential-workflow-designer@^0.26.0:
6755+
version "0.26.0"
6756+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.26.0.tgz#6ea3148d663e8fda9939b50af575568a19d2c157"
6757+
integrity sha512-PIHiMBti6TWhou5gz7DXMe6HF7AEX9ZkRvXOBLhn07hZn+rk9MPFkV83h7sZDdiTrH6VoMw7rZ7f/th/knm/0A==
67586758
dependencies:
67596759
sequential-workflow-model "^0.2.0"
67606760

‎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.25.0",
10-
"sequential-workflow-designer-react": "^0.25.0"
9+
"sequential-workflow-designer": "^0.26.0",
10+
"sequential-workflow-designer-react": "^0.26.0"
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.25.0",
20-
"sequential-workflow-designer-svelte": "^0.25.0"
19+
"sequential-workflow-designer": "^0.26.0",
20+
"sequential-workflow-designer-svelte": "^0.26.0"
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.25.0",
4+
"version": "0.26.0",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

‎designer/src/api/control-bar-api.ts

+3-18
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,14 @@ import { race, SimpleEvent } from '../core';
22
import { StateModifier } from '../modifier/state-modifier';
33
import { DesignerState } from '../designer-state';
44
import { HistoryController } from '../history-controller';
5-
import { ViewportApi } from './viewport-api';
65

76
export class ControlBarApi {
87
public static create(
98
state: DesignerState,
109
historyController: HistoryController | undefined,
11-
stateModifier: StateModifier,
12-
viewportApi: ViewportApi
10+
stateModifier: StateModifier
1311
): ControlBarApi {
14-
const api = new ControlBarApi(state, historyController, stateModifier, viewportApi);
12+
const api = new ControlBarApi(state, historyController, stateModifier);
1513

1614
race(
1715
0,
@@ -26,24 +24,11 @@ export class ControlBarApi {
2624
private constructor(
2725
private readonly state: DesignerState,
2826
private readonly historyController: HistoryController | undefined,
29-
private readonly stateModifier: StateModifier,
30-
private readonly viewportApi: ViewportApi
27+
private readonly stateModifier: StateModifier
3128
) {}
3229

3330
public readonly onStateChanged = new SimpleEvent<unknown>();
3431

35-
public resetViewport() {
36-
this.viewportApi.resetViewport();
37-
}
38-
39-
public zoomIn() {
40-
this.viewportApi.zoom(true);
41-
}
42-
43-
public zoomOut() {
44-
this.viewportApi.zoom(false);
45-
}
46-
4732
public isDragDisabled(): boolean {
4833
return this.state.isDragDisabled;
4934
}

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

+2-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export class DesignerApi {
1313
public static create(context: DesignerContext): DesignerApi {
1414
const workspace = new WorkspaceApi(context.state, context.workspaceController);
1515
const viewportController = context.services.viewportController.create(workspace);
16-
const viewport = new ViewportApi(context.workspaceController, viewportController, workspace);
1716
const toolboxDataProvider = new ToolboxDataProvider(
1817
context.componentContext.iconProvider,
1918
context.i18n,
@@ -22,11 +21,11 @@ export class DesignerApi {
2221

2322
return new DesignerApi(
2423
context.configuration.shadowRoot,
25-
ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport),
24+
ControlBarApi.create(context.state, context.historyController, context.stateModifier),
2625
new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator),
2726
new EditorApi(context.state, context.definitionWalker, context.stateModifier),
2827
workspace,
29-
viewport,
28+
new ViewportApi(context.state, context.workspaceController, viewportController),
3029
new PathBarApi(context.state, context.definitionWalker),
3130
context.definitionWalker,
3231
context.i18n

‎designer/src/api/viewport-api.ts

+9-10
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { Vector } from '../core';
22
import { ViewportController } from '../designer-extension';
3+
import { DesignerState } from '../designer-state';
34
import { ViewportAnimator } from '../workspace/viewport/viewport-animator';
45
import { ZoomByWheelCalculator } from '../workspace/viewport/zoom-by-wheel-calculator';
56
import { WorkspaceControllerWrapper } from '../workspace/workspace-controller';
6-
import { WorkspaceApi } from './workspace-api';
77

88
export class ViewportApi {
9-
private readonly animator = new ViewportAnimator(this.api);
9+
private readonly animator = new ViewportAnimator(this.state);
1010

1111
public constructor(
12+
private readonly state: DesignerState,
1213
private readonly workspaceController: WorkspaceControllerWrapper,
13-
private readonly viewportController: ViewportController,
14-
private readonly api: WorkspaceApi
14+
private readonly viewportController: ViewportController
1515
) {}
1616

1717
public limitScale(scale: number): number {
@@ -20,13 +20,13 @@ export class ViewportApi {
2020

2121
public resetViewport() {
2222
const defaultViewport = this.viewportController.getDefault();
23-
this.api.setViewport(defaultViewport);
23+
this.state.setViewport(defaultViewport);
2424
}
2525

2626
public zoom(direction: boolean) {
2727
const viewport = this.viewportController.getZoomed(direction);
2828
if (viewport) {
29-
this.api.setViewport(viewport);
29+
this.state.setViewport(viewport);
3030
}
3131
}
3232

@@ -43,12 +43,11 @@ export class ViewportApi {
4343
}
4444

4545
public handleWheelEvent(e: WheelEvent) {
46-
const viewport = this.api.getViewport();
47-
const canvasPosition = this.api.getCanvasPosition();
46+
const canvasPosition = this.workspaceController.getCanvasPosition();
4847

49-
const newViewport = ZoomByWheelCalculator.calculate(this.viewportController, viewport, canvasPosition, e);
48+
const newViewport = ZoomByWheelCalculator.calculate(this.viewportController, this.state.viewport, canvasPosition, e);
5049
if (newViewport) {
51-
this.api.setViewport(newViewport);
50+
this.state.setViewport(newViewport);
5251
}
5352
}
5453
}

‎designer/src/api/workspace-api.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,14 @@ export class WorkspaceApi {
99
private readonly workspaceController: WorkspaceControllerWrapper
1010
) {}
1111

12+
public getViewport(): Viewport {
13+
return this.state.viewport;
14+
}
15+
16+
public setViewport(viewport: Viewport) {
17+
this.state.setViewport(viewport);
18+
}
19+
1220
public getCanvasPosition(): Vector {
1321
return this.workspaceController.getCanvasPosition();
1422
}
@@ -21,14 +29,6 @@ export class WorkspaceApi {
2129
return this.workspaceController.getRootComponentSize();
2230
}
2331

24-
public getViewport(): Viewport {
25-
return this.state.viewport;
26-
}
27-
28-
public setViewport(viewport: Viewport) {
29-
this.state.setViewport(viewport);
30-
}
31-
3232
public updateRootComponent() {
3333
this.workspaceController.updateRootComponent();
3434
}

‎designer/src/behaviors/behavior-controller.spec.ts

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Vector } from '../core';
2+
import { Behavior } from './behavior';
3+
import { BehaviorController } from './behavior-controller';
4+
import { SelectStepBehaviorEndToken } from './select-step-behavior-end-token';
5+
6+
describe('BehaviorController', () => {
7+
it('passes the last end token to a next behavior', done => {
8+
const controller = BehaviorController.create(undefined);
9+
const baseBehavior = {
10+
onStart(position: Vector) {
11+
expect(position.x).toBe(1);
12+
expect(position.y).toBe(2);
13+
},
14+
onMove() {
15+
/* ... */
16+
}
17+
};
18+
19+
function stage0() {
20+
const behavior0: Behavior = {
21+
...baseBehavior,
22+
onEnd() {
23+
setTimeout(stage1);
24+
return new SelectStepBehaviorEndToken('step-id', 12345);
25+
}
26+
};
27+
28+
controller.start(new Vector(1, 2), behavior0);
29+
window.dispatchEvent(new MouseEvent('mouseup'));
30+
}
31+
32+
function stage1() {
33+
const behavior1: Behavior = {
34+
...baseBehavior,
35+
onEnd(_0, _1, previousEndToken) {
36+
if (SelectStepBehaviorEndToken.is(previousEndToken)) {
37+
expect(previousEndToken.stepId).toBe('step-id');
38+
expect(previousEndToken.time).toBe(12345);
39+
done();
40+
return;
41+
}
42+
fail('Invalid end token');
43+
}
44+
};
45+
controller.start(new Vector(1, 2), behavior1);
46+
window.dispatchEvent(new MouseEvent('mouseup'));
47+
}
48+
49+
stage0();
50+
});
51+
});

‎designer/src/behaviors/behavior-controller.ts

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Vector } from '../core/vector';
2-
import { Behavior } from './behavior';
2+
import { Behavior, BehaviorEndToken } from './behavior';
33
import { readMousePosition, readTouchPosition } from '../core/event-readers';
44

55
const notInitializedError = 'State is not initialized';
@@ -13,11 +13,12 @@ export class BehaviorController {
1313
return new BehaviorController(shadowRoot ?? document, shadowRoot);
1414
}
1515

16-
private state?: {
16+
private previousEndToken: BehaviorEndToken | null = null;
17+
private state: {
1718
startPosition: Vector;
1819
behavior: Behavior;
1920
lastPosition?: Vector;
20-
};
21+
} | null = null;
2122

2223
private constructor(
2324
private readonly dom: Document | ShadowRoot,
@@ -106,7 +107,7 @@ export class BehaviorController {
106107
const delta = this.state.startPosition.subtract(position);
107108
const newBehavior = this.state.behavior.onMove(delta);
108109
if (newBehavior) {
109-
this.state.behavior.onEnd(true, null);
110+
this.state.behavior.onEnd(true, null, null);
110111

111112
this.state.behavior = newBehavior;
112113
this.state.startPosition = position;
@@ -124,7 +125,8 @@ export class BehaviorController {
124125
}
125126
this.unbind(window);
126127

127-
this.state.behavior.onEnd(interrupt, element);
128-
this.state = undefined;
128+
const endToken = this.state.behavior.onEnd(interrupt, element, this.previousEndToken);
129+
this.state = null;
130+
this.previousEndToken = endToken || null;
129131
}
130132
}

‎designer/src/behaviors/behavior.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,9 @@ import { Vector } from '../core/vector';
33
export interface Behavior {
44
onStart(position: Vector): void;
55
onMove(delta: Vector): Behavior | void;
6-
onEnd(interrupt: boolean, element: Element | null): void;
6+
onEnd(interrupt: boolean, element: Element | null, previousEndToken: BehaviorEndToken | null): BehaviorEndToken | void;
7+
}
8+
9+
export interface BehaviorEndToken {
10+
type: string;
711
}

‎designer/src/behaviors/default-click-behavior-wrapper-extension.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { ClickBehaviorWrapper, ClickBehaviorWrapperExtension } from '../designer-extension';
2+
import { DefaultClickBehaviorWrapper } from './default-click-behavior-wrapper';
3+
4+
export class DefaultClickBehaviorWrapperExtension implements ClickBehaviorWrapperExtension {
5+
public create(): ClickBehaviorWrapper {
6+
return new DefaultClickBehaviorWrapper();
7+
}
8+
}

‎designer/src/behaviors/default-click-behavior-wrapper.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { ClickBehaviorWrapper } from '../designer-extension';
2+
import { Behavior } from './behavior';
3+
4+
export class DefaultClickBehaviorWrapper implements ClickBehaviorWrapper {
5+
public readonly wrap = (behavior: Behavior) => behavior;
6+
}

‎designer/src/behaviors/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './behavior';
2+
export * from './select-step-behavior-end-token';

0 commit comments

Comments
 (0)