diff --git a/CHANGELOG.md b/CHANGELOG.md index eaca795..d52ef9e 100644 --- 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 index ba37fd0..d8675cf 100644 --- a/README.md +++ b/README.md @@ -104,10 +104,10 @@ Add the below code to your head section in HTML document. ```html ... - - - - + + + + ``` Call the designer by: diff --git a/angular/designer/package.json b/angular/designer/package.json index 06c4589..c1345ef 100644 --- 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 index 17147bf..50a0f64 100644 --- 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 index 82fef3a..6ba98ba 100644 --- 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 index 83feab1..2dd7ea6 100644 --- 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 index 3be861c..4316be6 100644 --- 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 index 60353a2..74a5dc6 100644 --- 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 index 6b9c9e5..0b02eb0 100644 --- a/designer/src/workspace/common-views/join-view.ts +++ b/designer/src/workspace/common-views/join-view.ts @@ -1,14 +1,17 @@ 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); } @@ -16,50 +19,51 @@ export class JoinView { 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 index c97400f..fbfc44a 100644 --- 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 index 72d8808..f3e1c09 100644 --- a/examples/assets/lib.js +++ b/examples/assets/lib.js @@ -13,7 +13,7 @@ function embedStylesheet(url) { document.write(``); } -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 index 047c0ba..0047add 100644 --- 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 index ff22178..947292d 100644 --- 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",