nocode-js · b4rtaz · Nov 14, 2024 · Nov 14, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.26.1
+
+This version fixes the bug with scaling in the pinch-to-zoom feature. Additionally, this version improves the rendering of lines that join steps.
+
 # 0.26.0
 
 This version introduces a few internal changes to support the double-click feature in the pro version.

diff --git a/README.md b/README.md
@@ -104,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.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>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1/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.26.0",
+	"version": "0.26.1",
 	"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.26.0"
+		"sequential-workflow-designer": "^0.26.1"
 	},
 	"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.26.0",
-		"sequential-workflow-designer-angular": "^0.26.0",
+		"sequential-workflow-designer": "^0.26.1",
+		"sequential-workflow-designer-angular": "^0.26.1",
 		"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.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==
+sequential-workflow-designer-angular@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.26.1.tgz#a7958048852b1fad66e2dde71a7cc6c740f8ccdc"
+  integrity sha512-eggkWg0FIxhAC4Awuee3ysTcSQUerRj14+G802QpzIFblYqgElK0TQBEjRgEjRnjoljaZIf4RipMQhFIIQZS7w==
   dependencies:
     tslib "^2.3.0"
 
-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==
+sequential-workflow-designer@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.26.1.tgz#5a3fc4e992f76c46bc746547cf040fef8768dc29"
+  integrity sha512-R3zqYzZrj3wJ7zPgn9+7bvtNTB2kaTP31wW9MJD3ZgOUrTfvfpz+voIwKhknT9t4/cL7YH+TJF//QkwSp6BUlw==
   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.26.0",
-		"sequential-workflow-designer-react": "^0.26.0"
+		"sequential-workflow-designer": "^0.26.1",
+		"sequential-workflow-designer-react": "^0.26.1"
 	},
 	"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.26.0",
-		"sequential-workflow-designer-svelte": "^0.26.0"
+		"sequential-workflow-designer": "^0.26.1",
+		"sequential-workflow-designer-svelte": "^0.26.1"
 	},
 	"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.26.0",
+	"version": "0.26.1",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/src/workspace/common-views/join-view.ts b/designer/src/workspace/common-views/join-view.ts
@@ -1,65 +1,69 @@
 import { Dom } from '../../core/dom';
 import { Vector } from '../../core/vector';
 
+const EPS = 0.5; // Epsilon, a tiny offset to avoid rendering issues
+
 export class JoinView {
 	public static createStraightJoin(parent: SVGElement, start: Vector, height: number) {
+		const dy = Math.sign(height);
 		const join = Dom.svg('line', {
 			class: 'sqd-join',
 			x1: start.x,
-			y1: start.y,
+			y1: start.y - EPS * dy,
 			x2: start.x,
-			y2: start.y + height
+			y2: start.y + height + EPS * dy
 		});
 		parent.insertBefore(join, parent.firstChild);
 	}
 
 	public static createJoins(parent: SVGElement, start: Vector, targets: Vector[]) {
 		const firstTarget = targets[0];
 		const h = Math.abs(firstTarget.y - start.y) / 2; // half height
-		const y = Math.sign(firstTarget.y - start.y); // y direction
+		const dy = Math.sign(firstTarget.y - start.y); // direction y
 
 		switch (targets.length) {
 			case 1:
 				if (start.x === targets[0].x) {
-					JoinView.createStraightJoin(parent, start, firstTarget.y * y);
+					JoinView.createStraightJoin(parent, start, firstTarget.y * dy);
 				} else {
-					appendCurvedJoins(parent, start, targets, h, y);
+					appendCurvedJoins(parent, start, targets, h, dy);
 				}
 				break;
 
 			case 2:
-				appendCurvedJoins(parent, start, targets, h, y);
+				appendCurvedJoins(parent, start, targets, h, dy);
 				break;
 
 			default:
 				{
 					const f = targets[0]; // first
 					const l = targets[targets.length - 1]; // last
+					const eps = EPS * dy;
 					appendJoin(
 						parent,
-						`M ${f.x} ${f.y} q ${h * 0.3} ${h * -y * 0.8} ${h} ${h * -y} ` +
-							`l ${l.x - f.x - h * 2} 0 q ${h * 0.8} ${-h * -y * 0.3} ${h} ${-h * -y}`
+						`M ${f.x} ${f.y + eps} l 0 ${-eps} q ${h * 0.3} ${h * -dy * 0.8} ${h} ${h * -dy} ` +
+							`l ${l.x - f.x - h * 2} 0 q ${h * 0.8} ${-h * -dy * 0.3} ${h} ${-h * -dy} l 0 ${eps}`
 					);
 
 					for (let i = 1; i < targets.length - 1; i++) {
-						JoinView.createStraightJoin(parent, targets[i], h * -y);
+						JoinView.createStraightJoin(parent, targets[i], h * -dy);
 					}
-					JoinView.createStraightJoin(parent, start, h * y);
+					JoinView.createStraightJoin(parent, start, h * dy);
 				}
 				break;
 		}
 	}
 }
 
-function appendCurvedJoins(parent: SVGElement, start: Vector, targets: Vector[], h: number, y: number) {
+function appendCurvedJoins(parent: SVGElement, start: Vector, targets: Vector[], h: number, dy: number) {
+	const eps = EPS * dy;
 	for (const target of targets) {
-		const l = Math.abs(target.x - start.x) - h * 2; // line size
-		const x = Math.sign(target.x - start.x); // x direction
-
+		const l = Math.abs(target.x - start.x) - h * 2; // straight line length
+		const dx = Math.sign(target.x - start.x); // direction x
 		appendJoin(
 			parent,
-			`M ${start.x} ${start.y} q ${x * h * 0.3} ${y * h * 0.8} ${x * h} ${y * h} ` +
-				`l ${x * l} 0 q ${x * h * 0.7} ${y * h * 0.2} ${x * h} ${y * h}`
+			`M ${start.x} ${start.y - eps} l 0 ${eps} q ${dx * h * 0.3} ${dy * h * 0.8} ${dx * h} ${dy * h} ` +
+				`l ${dx * l} 0 q ${dx * h * 0.7} ${dy * h * 0.2} ${dx * h} ${dy * h} l 0 ${eps}`
 		);
 	}
 }

diff --git a/designer/src/workspace/viewport/pinch-to-zoom-controller.ts b/designer/src/workspace/viewport/pinch-to-zoom-controller.ts
@@ -77,10 +77,7 @@ export class PinchToZoomController {
 			.divideByScalar(this.state.lastViewport.scale)
 			.subtract(this.state.lastViewport.position.divideByScalar(this.state.lastViewport.scale));
 
-		const position = zoomRealPoint
-			.multiplyByScalar(-scale)
-			.add(zoomPoint)
-			.add(deltaCenterPoint.divideByScalar(this.state.lastViewport.scale));
+		const position = zoomRealPoint.multiplyByScalar(-scale).add(zoomPoint).add(deltaCenterPoint);
 
 		const newViewport: Viewport = {
 			position,

diff --git a/examples/assets/lib.js b/examples/assets/lib.js
@@ -13,7 +13,7 @@ function embedStylesheet(url) {
 	document.write(`<link href="${url}" rel="stylesheet">`);
 }
 
-const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.0';
+const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1';
 
 embedScript(`${baseUrl}/dist/index.umd.js`);
 embedStylesheet(`${baseUrl}/css/designer.css`);

diff --git a/react/package.json b/react/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-react",
 	"description": "React wrapper for Sequential Workflow Designer component.",
-	"version": "0.26.0",
+	"version": "0.26.1",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -47,7 +47,7 @@
 	"peerDependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.26.0"
+		"sequential-workflow-designer": "^0.26.1"
 	},
 	"devDependencies": {
 		"@rollup/plugin-node-resolve": "^15.0.1",
@@ -63,7 +63,7 @@
 		"prettier": "^3.2.5",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.26.0",
+		"sequential-workflow-designer": "^0.26.1",
 		"rollup": "^3.18.0",
 		"rollup-plugin-dts": "^5.2.0",
 		"rollup-plugin-typescript2": "^0.34.1",

diff --git a/svelte/package.json b/svelte/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-svelte",
 	"description": "Svelte wrapper for Sequential Workflow Designer component.",
-	"version": "0.26.0",
+	"version": "0.26.1",
 	"license": "MIT",
 	"scripts": {
 		"prepare": "cp ../LICENSE LICENSE",
@@ -28,10 +28,10 @@
 	],
 	"peerDependencies": {
 		"svelte": "^4.0.0",
-		"sequential-workflow-designer": "^0.26.0"
+		"sequential-workflow-designer": "^0.26.1"
 	},
 	"devDependencies": {
-		"sequential-workflow-designer": "^0.26.0",
+		"sequential-workflow-designer": "^0.26.1",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@sveltejs/package": "^2.0.0",