nocode-js · b4rtaz · Nov 6, 2024 · Nov 6, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 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.
+
 # 0.24.8
 
 This version adds new classes to the start-stop root component.

diff --git a/README.md b/README.md
@@ -103,10 +103,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.24.8/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.8/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.8/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.8/dist/index.umd.js"></script>
+<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>
 ```
 
 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.24.8",
+	"version": "0.25.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.24.8"
+		"sequential-workflow-designer": "^0.25.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.24.8",
-		"sequential-workflow-designer-angular": "^0.24.8",
+		"sequential-workflow-designer": "^0.25.0",
+		"sequential-workflow-designer-angular": "^0.25.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 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.24.8:
-  version "0.24.8"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.8.tgz#9ec487a72e1ea9ce470c30629e43778558074909"
-  integrity sha512-62fQrgVb7yOF+vA5RdSEoositp5AQ8iG8gV4KNSLPE3kf8rk8els8kiLDwtlH4H03UnAtamXTbNXMs6Xt7quGQ==
+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==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.24.8:
-  version "0.24.8"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.8.tgz#10deceece8133a8f7781e9ba36ad219b412a2e40"
-  integrity sha512-DkLwdtkP2F8AnvrICtrgzTS4TfCpDHRTpN71G3OQSL1zky5T8I5GTm7iqnMmQkwfjRi1Xx8b8e5miW687/6jYw==
+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==
   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.24.8",
-		"sequential-workflow-designer-react": "^0.24.8"
+		"sequential-workflow-designer": "^0.25.0",
+		"sequential-workflow-designer-react": "^0.25.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.24.8",
-		"sequential-workflow-designer-svelte": "^0.24.8"
+		"sequential-workflow-designer": "^0.25.0",
+		"sequential-workflow-designer-svelte": "^0.25.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.24.8",
+	"version": "0.25.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/src/api/designer-api.ts b/designer/src/api/designer-api.ts
@@ -13,7 +13,7 @@ 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);
+		const viewport = new ViewportApi(context.workspaceController, viewportController, workspace);
 		const toolboxDataProvider = new ToolboxDataProvider(
 			context.componentContext.iconProvider,
 			context.i18n,

diff --git a/designer/src/api/index.ts b/designer/src/api/index.ts
@@ -3,4 +3,5 @@ export * from './designer-api';
 export * from './editor-api';
 export * from './path-bar-api';
 export * from './toolbox-api';
+export * from './viewport-api';
 export * from './workspace-api';
diff --git a/designer/src/api/viewport-api.ts b/designer/src/api/viewport-api.ts
@@ -1,19 +1,33 @@
 import { Vector } from '../core';
 import { ViewportController } from '../designer-extension';
+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);
+
 	public constructor(
 		private readonly workspaceController: WorkspaceControllerWrapper,
-		private readonly viewportController: ViewportController
+		private readonly viewportController: ViewportController,
+		private readonly api: WorkspaceApi
 	) {}
 
+	public limitScale(scale: number): number {
+		return this.viewportController.limitScale(scale);
+	}
+
 	public resetViewport() {
-		this.viewportController.setDefault();
+		const defaultViewport = this.viewportController.getDefault();
+		this.api.setViewport(defaultViewport);
 	}
 
 	public zoom(direction: boolean) {
-		this.viewportController.zoom(direction);
+		const viewport = this.viewportController.getZoomed(direction);
+		if (viewport) {
+			this.api.setViewport(viewport);
+		}
 	}
 
 	public moveViewportToStep(stepId: string) {
@@ -24,6 +38,17 @@ export class ViewportApi {
 		const componentPosition = clientPosition.subtract(canvasPosition);
 
 		const componentSize = new Vector(component.view.width, component.view.height);
-		this.viewportController.focusOnComponent(componentPosition, componentSize);
+		const viewport = this.viewportController.getFocusedOnComponent(componentPosition, componentSize);
+		this.animator.execute(viewport);
+	}
+
+	public handleWheelEvent(e: WheelEvent) {
+		const viewport = this.api.getViewport();
+		const canvasPosition = this.api.getCanvasPosition();
+
+		const newViewport = ZoomByWheelCalculator.calculate(this.viewportController, viewport, canvasPosition, e);
+		if (newViewport) {
+			this.api.setViewport(newViewport);
+		}
 	}
 }
diff --git a/designer/src/behaviors/behavior-controller.ts b/designer/src/behaviors/behavior-controller.ts
@@ -9,16 +9,16 @@ const nonPassiveOptions: AddEventListenerOptions & EventListenerOptions = {
 };
 
 export class BehaviorController {
+	public static create(shadowRoot: ShadowRoot | undefined) {
+		return new BehaviorController(shadowRoot ?? document, shadowRoot);
+	}
+
 	private state?: {
 		startPosition: Vector;
 		behavior: Behavior;
 		lastPosition?: Vector;
 	};
 
-	public static create(shadowRoot: ShadowRoot | undefined) {
-		return new BehaviorController(shadowRoot ?? document, shadowRoot);
-	}
-
 	private constructor(
 		private readonly dom: Document | ShadowRoot,
 		private readonly shadowRoot: ShadowRoot | undefined

diff --git a/designer/src/core/event-readers.ts b/designer/src/core/event-readers.ts
@@ -19,3 +19,21 @@ export function readTouchPosition(e: TouchEvent): Vector {
 	}
 	throw new Error('Unknown touch position');
 }
+
+export function calculateFingerDistance(e: TouchEvent): number {
+	if (e.touches.length === 2) {
+		const t0 = e.touches[0];
+		const t1 = e.touches[1];
+		return Math.hypot(t0.clientX - t1.clientX, t0.clientY - t1.clientY);
+	}
+	throw new Error('Cannot calculate finger distance');
+}
+
+export function readFingerCenterPoint(e: TouchEvent): Vector {
+	if (e.touches.length === 2) {
+		const t0 = e.touches[0];
+		const t1 = e.touches[1];
+		return new Vector((t0.pageX + t1.pageX) / 2, (t0.pageY + t1.pageY) / 2);
+	}
+	throw new Error('Cannot calculate finger center point');
+}
diff --git a/designer/src/designer-extension.ts b/designer/src/designer-extension.ts
@@ -1,5 +1,6 @@
 import { WorkspaceApi } from './api';
 import { DesignerApi } from './api/designer-api';
+import { ViewportApi } from './api/viewport-api';
 import { ComponentContext } from './component-context';
 import { Vector } from './core';
 import { CustomActionController } from './custom-action-controller';
@@ -98,7 +99,7 @@ export interface BadgeExtension {
 // WheelControllerExtension
 
 export interface WheelControllerExtension {
-	create(api: WorkspaceApi): WheelController;
+	create(viewportApi: ViewportApi, workspaceApi: WorkspaceApi): WheelController;
 }
 
 export interface WheelController {
@@ -204,9 +205,17 @@ export interface ViewportControllerExtension {
 }
 
 export interface ViewportController {
-	setDefault(): void;
-	zoom(direction: boolean): void;
-	focusOnComponent(componentPosition: Vector, componentSize: Vector): void;
+	smoothDeltaYLimit: number;
+	getDefault(): Viewport;
+	getZoomed(direction: boolean): Viewport | null;
+	getFocusedOnComponent(componentPosition: Vector, componentSize: Vector): Viewport;
+	getNextScale(scale: number, direction: boolean): NextScale;
+	limitScale(scale: number): number;
+}
+
+export interface NextScale {
+	current: number;
+	next: number;
 }
 
 export interface Viewport {

diff --git a/designer/src/services.ts b/designer/src/services.ts
@@ -129,7 +129,7 @@ function setDefaults(services: Partial<Services>, configuration: DesignerConfigu
 		services.regionComponentView = new DefaultRegionComponentViewExtension();
 	}
 	if (!services.viewportController) {
-		services.viewportController = new DefaultViewportControllerExtension();
+		services.viewportController = DefaultViewportControllerExtension.create();
 	}
 	if (!services.grid) {
 		services.grid = LineGridExtension.create();

diff --git a/designer/src/workspace/viewport/centered-viewport-calculator.ts b/designer/src/workspace/viewport/centered-viewport-calculator.ts
@@ -2,16 +2,16 @@ import { Vector } from '../../core';
 import { Viewport } from '../../designer-extension';
 
 export class CenteredViewportCalculator {
-	public static center(margin: number, canvasSize: Vector, rootComponentSize: Vector): Viewport {
+	public static center(padding: number, canvasSize: Vector, rootComponentSize: Vector): Viewport {
 		if (canvasSize.x === 0 || canvasSize.y === 0) {
 			return {
 				position: new Vector(0, 0),
 				scale: 1
 			};
 		}
 
-		const canvasSafeWidth = Math.max(canvasSize.x - margin * 2, 0);
-		const canvasSafeHeight = Math.max(canvasSize.y - margin * 2, 0);
+		const canvasSafeWidth = Math.max(canvasSize.x - padding * 2, 0);
+		const canvasSafeHeight = Math.max(canvasSize.y - padding * 2, 0);
 
 		const scale = Math.min(Math.min(canvasSafeWidth / rootComponentSize.x, canvasSafeHeight / rootComponentSize.y), 1);
 		const width = rootComponentSize.x * scale;
@@ -26,7 +26,12 @@ export class CenteredViewportCalculator {
 		};
 	}
 
-	public static focusOnComponent(canvasSize: Vector, viewport: Viewport, componentPosition: Vector, componentSize: Vector): Viewport {
+	public static getFocusedOnComponent(
+		canvasSize: Vector,
+		viewport: Viewport,
+		componentPosition: Vector,
+		componentSize: Vector
+	): Viewport {
 		const realPosition = viewport.position.divideByScalar(viewport.scale).subtract(componentPosition.divideByScalar(viewport.scale));
 		const componentOffset = componentSize.divideByScalar(2);
 

diff --git a/designer/src/workspace/viewport/classic-wheel-controller.ts b/designer/src/workspace/viewport/classic-wheel-controller.ts
@@ -1,20 +1,14 @@
-import { WorkspaceApi } from '../../api/workspace-api';
+import { ViewportApi } from '../../api/viewport-api';
 import { WheelController } from '../../designer-extension';
-import { QuantifiedScaleViewportCalculator } from './quantified-scale-viewport-calculator';
 
 export class ClassicWheelController implements WheelController {
-	public static create(api: WorkspaceApi) {
+	public static create(api: ViewportApi) {
 		return new ClassicWheelController(api);
 	}
 
-	private constructor(private readonly api: WorkspaceApi) {}
+	private constructor(private readonly api: ViewportApi) {}
 
 	public onWheel(e: WheelEvent) {
-		const viewport = this.api.getViewport();
-		const canvasPosition = this.api.getCanvasPosition();
-		const newViewport = QuantifiedScaleViewportCalculator.zoomByWheel(viewport, e, canvasPosition);
-		if (newViewport) {
-			this.api.setViewport(newViewport);
-		}
+		this.api.handleWheelEvent(e);
 	}
 }
diff --git a/designer/src/workspace/viewport/default-viewport-controller-configuration.ts b/designer/src/workspace/viewport/default-viewport-controller-configuration.ts
@@ -0,0 +1,5 @@
+export interface DefaultViewportControllerConfiguration {
+	scales: number[];
+	smoothDeltaYLimit: number;
+	padding: number;
+}
diff --git a/designer/src/workspace/viewport/default-viewport-controller-extension.ts b/designer/src/workspace/viewport/default-viewport-controller-extension.ts
@@ -1,6 +1,18 @@
+import { WorkspaceApi } from '../../api';
 import { ViewportControllerExtension } from '../../designer-extension';
 import { DefaultViewportController } from './default-viewport-controller';
+import { DefaultViewportControllerConfiguration } from './default-viewport-controller-configuration';
+
+export type DefaultViewportControllerExtensionConfiguration = DefaultViewportControllerConfiguration;
 
 export class DefaultViewportControllerExtension implements ViewportControllerExtension {
-	public readonly create = DefaultViewportController.create;
+	public static create(configuration?: DefaultViewportControllerExtensionConfiguration): DefaultViewportControllerExtension {
+		return new DefaultViewportControllerExtension(configuration);
+	}
+
+	private constructor(private readonly configuration: DefaultViewportControllerExtensionConfiguration | undefined) {}
+
+	public create(api: WorkspaceApi): DefaultViewportController {
+		return DefaultViewportController.create(api, this.configuration);
+	}
 }