0.26.0. (#171)

nocode-js · Nov 8, 2024 · ec65dac · ec65dac
1 parent 65cc31c
commit ec65dac
Show file tree

Hide file tree

Showing 35 changed files with 250 additions and 102 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.26.0
+
+This version introduces a few internal changes to support the double-click feature in the pro version.
+
 # 0.25.0
 
 This version introduces the pinch-to-zoom feature. Now you can zoom in and out using the pinch gesture on touch devices.

diff --git a/README.md b/README.md
@@ -55,6 +55,7 @@ Pro:
 * [👋 Custom Dragged Component](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-dragged-component.html)
 * [🔰 Badges](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/badges.html)
 * [🎩 Custom Viewport](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-viewport.html)
+* [👊 Double Click](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/double-click.html)
 * [🛎 Clickable Placeholder](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/clickable-placeholder.html)
 * [📮 Conditional Placeholders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/conditional-placeholders.html)
 * [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.
 ```html
 <head>
 ...
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.25.0/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.25.0/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.25.0/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.25.0/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.0/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.25.0",
+	"version": "0.26.0",
 	"author": {
 		"name": "NoCode JS",
 		"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
 	"peerDependencies": {
 		"@angular/common": "12 - 18",
 		"@angular/core": "12 - 18",
-		"sequential-workflow-designer": "^0.25.0"
+		"sequential-workflow-designer": "^0.26.0"
 	},
 	"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": "^17.3.9",
 		"@angular/router": "^17.3.9",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.25.0",
-		"sequential-workflow-designer-angular": "^0.25.0",
+		"sequential-workflow-designer": "^0.26.0",
+		"sequential-workflow-designer-angular": "^0.26.0",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.14.6"
 	},

diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock
@@ -6744,17 +6744,17 @@ [email protected]:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.25.0:
-  version "0.25.0"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.25.0.tgz#eb65370283a408c10eeb7b71b67dae2af9d6196b"
-  integrity sha512-E100P2es8Gn5th0f0ErfjRr9TWWcgocz16kZocWvCHeOn5/iLo+oCuvSSZjewpnYTVA6oDcHH//KJnq5sPN69g==
+sequential-workflow-designer-angular@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.26.0.tgz#f27885071efaf6e20e6884129f0666aefcb66ba6"
+  integrity sha512-UkWmksYIXggsDGWTHcjDW6RVpEpi3gKkBKBtMsyYTtZsE8PtMm0W5PF6gTHL3t1JBDw40jHCVLeEFNfjOp6jKg==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.25.0:
-  version "0.25.0"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.25.0.tgz#db8d35441a68f0b05f169e458f12f5457f9beca9"
-  integrity sha512-KNOTA4zx/TkpL0LHQFvNe2S07vejA4YjRcl6UNpLjG4fODQKfiZ8zj5RypcG54O6TArBU8eDEUwtXgnuopGEYQ==
+sequential-workflow-designer@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.26.0.tgz#6ea3148d663e8fda9939b50af575568a19d2c157"
+  integrity sha512-PIHiMBti6TWhou5gz7DXMe6HF7AEX9ZkRvXOBLhn07hZn+rk9MPFkV83h7sZDdiTrH6VoMw7rZ7f/th/knm/0A==
   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.25.0",
-		"sequential-workflow-designer-react": "^0.25.0"
+		"sequential-workflow-designer": "^0.26.0",
+		"sequential-workflow-designer-react": "^0.26.0"
 	},
 	"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.25.0",
-		"sequential-workflow-designer-svelte": "^0.25.0"
+		"sequential-workflow-designer": "^0.26.0",
+		"sequential-workflow-designer-svelte": "^0.26.0"
 	},
 	"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.25.0",
+	"version": "0.26.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/src/api/control-bar-api.ts b/designer/src/api/control-bar-api.ts
@@ -2,16 +2,14 @@ import { race, SimpleEvent } from '../core';
 import { StateModifier } from '../modifier/state-modifier';
 import { DesignerState } from '../designer-state';
 import { HistoryController } from '../history-controller';
-import { ViewportApi } from './viewport-api';
 
 export class ControlBarApi {
 	public static create(
 		state: DesignerState,
 		historyController: HistoryController | undefined,
-		stateModifier: StateModifier,
-		viewportApi: ViewportApi
+		stateModifier: StateModifier
 	): ControlBarApi {
-		const api = new ControlBarApi(state, historyController, stateModifier, viewportApi);
+		const api = new ControlBarApi(state, historyController, stateModifier);
 
 		race(
 			0,
@@ -26,24 +24,11 @@ export class ControlBarApi {
 	private constructor(
 		private readonly state: DesignerState,
 		private readonly historyController: HistoryController | undefined,
-		private readonly stateModifier: StateModifier,
-		private readonly viewportApi: ViewportApi
+		private readonly stateModifier: StateModifier
 	) {}
 
 	public readonly onStateChanged = new SimpleEvent<unknown>();
 
-	public resetViewport() {
-		this.viewportApi.resetViewport();
-	}
-
-	public zoomIn() {
-		this.viewportApi.zoom(true);
-	}
-
-	public zoomOut() {
-		this.viewportApi.zoom(false);
-	}
-
 	public isDragDisabled(): boolean {
 		return this.state.isDragDisabled;
 	}

diff --git a/designer/src/api/designer-api.ts b/designer/src/api/designer-api.ts
@@ -13,7 +13,6 @@ export class DesignerApi {
 	public static create(context: DesignerContext): DesignerApi {
 		const workspace = new WorkspaceApi(context.state, context.workspaceController);
 		const viewportController = context.services.viewportController.create(workspace);
-		const viewport = new ViewportApi(context.workspaceController, viewportController, workspace);
 		const toolboxDataProvider = new ToolboxDataProvider(
 			context.componentContext.iconProvider,
 			context.i18n,
@@ -22,11 +21,11 @@ export class DesignerApi {
 
 		return new DesignerApi(
 			context.configuration.shadowRoot,
-			ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport),
+			ControlBarApi.create(context.state, context.historyController, context.stateModifier),
 			new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator),
 			new EditorApi(context.state, context.definitionWalker, context.stateModifier),
 			workspace,
-			viewport,
+			new ViewportApi(context.state, context.workspaceController, viewportController),
 			new PathBarApi(context.state, context.definitionWalker),
 			context.definitionWalker,
 			context.i18n

diff --git a/designer/src/api/viewport-api.ts b/designer/src/api/viewport-api.ts
@@ -1,17 +1,17 @@
 import { Vector } from '../core';
 import { ViewportController } from '../designer-extension';
+import { DesignerState } from '../designer-state';
 import { ViewportAnimator } from '../workspace/viewport/viewport-animator';
 import { ZoomByWheelCalculator } from '../workspace/viewport/zoom-by-wheel-calculator';
 import { WorkspaceControllerWrapper } from '../workspace/workspace-controller';
-import { WorkspaceApi } from './workspace-api';
 
 export class ViewportApi {
-	private readonly animator = new ViewportAnimator(this.api);
+	private readonly animator = new ViewportAnimator(this.state);
 
 	public constructor(
+		private readonly state: DesignerState,
 		private readonly workspaceController: WorkspaceControllerWrapper,
-		private readonly viewportController: ViewportController,
-		private readonly api: WorkspaceApi
+		private readonly viewportController: ViewportController
 	) {}
 
 	public limitScale(scale: number): number {
@@ -20,13 +20,13 @@ export class ViewportApi {
 
 	public resetViewport() {
 		const defaultViewport = this.viewportController.getDefault();
-		this.api.setViewport(defaultViewport);
+		this.state.setViewport(defaultViewport);
 	}
 
 	public zoom(direction: boolean) {
 		const viewport = this.viewportController.getZoomed(direction);
 		if (viewport) {
-			this.api.setViewport(viewport);
+			this.state.setViewport(viewport);
 		}
 	}
 
@@ -43,12 +43,11 @@ export class ViewportApi {
 	}
 
 	public handleWheelEvent(e: WheelEvent) {
-		const viewport = this.api.getViewport();
-		const canvasPosition = this.api.getCanvasPosition();
+		const canvasPosition = this.workspaceController.getCanvasPosition();
 
-		const newViewport = ZoomByWheelCalculator.calculate(this.viewportController, viewport, canvasPosition, e);
+		const newViewport = ZoomByWheelCalculator.calculate(this.viewportController, this.state.viewport, canvasPosition, e);
 		if (newViewport) {
-			this.api.setViewport(newViewport);
+			this.state.setViewport(newViewport);
 		}
 	}
 }
diff --git a/designer/src/api/workspace-api.ts b/designer/src/api/workspace-api.ts
@@ -9,6 +9,14 @@ export class WorkspaceApi {
 		private readonly workspaceController: WorkspaceControllerWrapper
 	) {}
 
+	public getViewport(): Viewport {
+		return this.state.viewport;
+	}
+
+	public setViewport(viewport: Viewport) {
+		this.state.setViewport(viewport);
+	}
+
 	public getCanvasPosition(): Vector {
 		return this.workspaceController.getCanvasPosition();
 	}
@@ -21,14 +29,6 @@ export class WorkspaceApi {
 		return this.workspaceController.getRootComponentSize();
 	}
 
-	public getViewport(): Viewport {
-		return this.state.viewport;
-	}
-
-	public setViewport(viewport: Viewport) {
-		this.state.setViewport(viewport);
-	}
-
 	public updateRootComponent() {
 		this.workspaceController.updateRootComponent();
 	}

diff --git a/designer/src/behaviors/behavior-controller.spec.ts b/designer/src/behaviors/behavior-controller.spec.ts
@@ -0,0 +1,51 @@
+import { Vector } from '../core';
+import { Behavior } from './behavior';
+import { BehaviorController } from './behavior-controller';
+import { SelectStepBehaviorEndToken } from './select-step-behavior-end-token';
+
+describe('BehaviorController', () => {
+	it('passes the last end token to a next behavior', done => {
+		const controller = BehaviorController.create(undefined);
+		const baseBehavior = {
+			onStart(position: Vector) {
+				expect(position.x).toBe(1);
+				expect(position.y).toBe(2);
+			},
+			onMove() {
+				/* ... */
+			}
+		};
+
+		function stage0() {
+			const behavior0: Behavior = {
+				...baseBehavior,
+				onEnd() {
+					setTimeout(stage1);
+					return new SelectStepBehaviorEndToken('step-id', 12345);
+				}
+			};
+
+			controller.start(new Vector(1, 2), behavior0);
+			window.dispatchEvent(new MouseEvent('mouseup'));
+		}
+
+		function stage1() {
+			const behavior1: Behavior = {
+				...baseBehavior,
+				onEnd(_0, _1, previousEndToken) {
+					if (SelectStepBehaviorEndToken.is(previousEndToken)) {
+						expect(previousEndToken.stepId).toBe('step-id');
+						expect(previousEndToken.time).toBe(12345);
+						done();
+						return;
+					}
+					fail('Invalid end token');
+				}
+			};
+			controller.start(new Vector(1, 2), behavior1);
+			window.dispatchEvent(new MouseEvent('mouseup'));
+		}
+
+		stage0();
+	});
+});
diff --git a/designer/src/behaviors/behavior-controller.ts b/designer/src/behaviors/behavior-controller.ts
@@ -1,5 +1,5 @@
 import { Vector } from '../core/vector';
-import { Behavior } from './behavior';
+import { Behavior, BehaviorEndToken } from './behavior';
 import { readMousePosition, readTouchPosition } from '../core/event-readers';
 
 const notInitializedError = 'State is not initialized';
@@ -13,11 +13,12 @@ export class BehaviorController {
 		return new BehaviorController(shadowRoot ?? document, shadowRoot);
 	}
 
-	private state?: {
+	private previousEndToken: BehaviorEndToken | null = null;
+	private state: {
 		startPosition: Vector;
 		behavior: Behavior;
 		lastPosition?: Vector;
-	};
+	} | null = null;
 
 	private constructor(
 		private readonly dom: Document | ShadowRoot,
@@ -106,7 +107,7 @@ export class BehaviorController {
 		const delta = this.state.startPosition.subtract(position);
 		const newBehavior = this.state.behavior.onMove(delta);
 		if (newBehavior) {
-			this.state.behavior.onEnd(true, null);
+			this.state.behavior.onEnd(true, null, null);
 
 			this.state.behavior = newBehavior;
 			this.state.startPosition = position;
@@ -124,7 +125,8 @@ export class BehaviorController {
 		}
 		this.unbind(window);
 
-		this.state.behavior.onEnd(interrupt, element);
-		this.state = undefined;
+		const endToken = this.state.behavior.onEnd(interrupt, element, this.previousEndToken);
+		this.state = null;
+		this.previousEndToken = endToken || null;
 	}
 }
diff --git a/designer/src/behaviors/behavior.ts b/designer/src/behaviors/behavior.ts
@@ -3,5 +3,9 @@ import { Vector } from '../core/vector';
 export interface Behavior {
 	onStart(position: Vector): void;
 	onMove(delta: Vector): Behavior | void;
-	onEnd(interrupt: boolean, element: Element | null): void;
+	onEnd(interrupt: boolean, element: Element | null, previousEndToken: BehaviorEndToken | null): BehaviorEndToken | void;
+}
+
+export interface BehaviorEndToken {
+	type: string;
 }
diff --git a/designer/src/behaviors/default-click-behavior-wrapper-extension.ts b/designer/src/behaviors/default-click-behavior-wrapper-extension.ts
@@ -0,0 +1,8 @@
+import { ClickBehaviorWrapper, ClickBehaviorWrapperExtension } from '../designer-extension';
+import { DefaultClickBehaviorWrapper } from './default-click-behavior-wrapper';
+
+export class DefaultClickBehaviorWrapperExtension implements ClickBehaviorWrapperExtension {
+	public create(): ClickBehaviorWrapper {
+		return new DefaultClickBehaviorWrapper();
+	}
+}
diff --git a/designer/src/behaviors/default-click-behavior-wrapper.ts b/designer/src/behaviors/default-click-behavior-wrapper.ts
@@ -0,0 +1,6 @@
+import { ClickBehaviorWrapper } from '../designer-extension';
+import { Behavior } from './behavior';
+
+export class DefaultClickBehaviorWrapper implements ClickBehaviorWrapper {
+	public readonly wrap = (behavior: Behavior) => behavior;
+}
diff --git a/designer/src/behaviors/index.ts b/designer/src/behaviors/index.ts
@@ -0,0 +1,2 @@
+export * from './behavior';
+export * from './select-step-behavior-end-token';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './behavior';
		export * from './select-step-behavior-end-token';