0.24.6. (#167)

nocode-js · Sep 25, 2024 · ca02ee7 · ca02ee7
1 parent 56c53d8
commit ca02ee7
Show file tree

Hide file tree

Showing 14 changed files with 67 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.24.6
+
+Fixed a bug where the designer remained in an invalid state when rendered inside a placeholder with a width or height of 0px.
+
 # 0.24.5
 
 Fixed another bug with event handling when the designer is placed in a shadow DOM.

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/[email protected].5/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/[email protected].5/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/[email protected].5/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/[email protected].5/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/[email protected].6/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/[email protected].6/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/[email protected].6/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/[email protected].6/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.5",
+	"version": "0.24.6",
 	"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.5"
+		"sequential-workflow-designer": "^0.24.6"
 	},
 	"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.5",
-		"sequential-workflow-designer-angular": "^0.24.5",
+		"sequential-workflow-designer": "^0.24.6",
+		"sequential-workflow-designer-angular": "^0.24.6",
 		"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.24.4:
-  version "0.24.4"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.4.tgz#50842a31c9ac5c6d45733ba5ffd0704dda4cfe9a"
-  integrity sha512-kiIhcoOzpaRNGK4ii1rotZHu49/zosdTodD71mQRXIqDNbpqVHMS4CktWwEWdQ13LIsSQxEbfMnpZJJ5+eIW3w==
+sequential-workflow-designer-angular@^0.24.6:
+  version "0.24.6"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.6.tgz#342e7b3aa75b5bd021ddd3fa8b7271001f2b14ac"
+  integrity sha512-USyB8FXHEIZ6IXBzHe31jPovMtfqjHCsAhOeWQ6qAZCjVVRe1ymCIdAoixVK7TvKONursMqlcGoQ2O+iAdMABw==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.24.4:
-  version "0.24.4"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.4.tgz#68db6ec198ec7941a5e87994156f15ec91e83cc5"
-  integrity sha512-fIdZDT6nozMAuIXvJ6uOVVy4h9XA+DMTfIO63bM6+vi/5BmQlxyUJ+4uVFKOiHJ7Tx5MQI8eBchcWDtknBA8nQ==
+sequential-workflow-designer@^0.24.6:
+  version "0.24.6"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.6.tgz#0be6112837177db19c2e5e69e15e5a827243097d"
+  integrity sha512-zjv60NrWKYZY8ZiL+PAG3DZK3lJX/cjBkgQ/IYElsk2rwHl6+srOFWSRKx2cEfHHNueTovNQLFVsFIWRvAtVNg==
   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.5",
-		"sequential-workflow-designer-react": "^0.24.5"
+		"sequential-workflow-designer": "^0.24.6",
+		"sequential-workflow-designer-react": "^0.24.6"
 	},
 	"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.5",
-		"sequential-workflow-designer-svelte": "^0.24.5"
+		"sequential-workflow-designer": "^0.24.6",
+		"sequential-workflow-designer-svelte": "^0.24.6"
 	},
 	"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.5",
+	"version": "0.24.6",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/src/designer.ts b/designer/src/designer.ts
@@ -168,6 +168,13 @@ export class Designer<TDefinition extends Definition = Definition> {
 		this.state.setViewport(viewport);
 	}
 
+	/**
+	 * @description Resets the viewport.
+	 */
+	public resetViewport() {
+		this.api.viewport.resetViewport();
+	}
+
 	/**
 	 * @description Unselects the selected step.
 	 */

diff --git a/designer/src/workspace/viewport/centered-viewport-calculator.spec.ts b/designer/src/workspace/viewport/centered-viewport-calculator.spec.ts
@@ -3,38 +3,54 @@ import { CenteredViewportCalculator } from './centered-viewport-calculator';
 
 describe('CenteredViewportCalculator', () => {
 	describe('center()', () => {
-		const c100x100 = new Vector(100, 100);
+		const v100x100 = new Vector(100, 100);
 
 		it('root component fills 100% of canvas (margin = 0)', () => {
-			const vp = CenteredViewportCalculator.center(0, c100x100, new Vector(100, 100));
+			const vp = CenteredViewportCalculator.center(0, v100x100, new Vector(100, 100));
 
 			expect(vp.position.x).toBe(0);
 			expect(vp.position.y).toBe(0);
 			expect(vp.scale).toBe(1);
 		});
 
 		it('root component fills 100% of canvas (margin = 20)', () => {
-			const vp = CenteredViewportCalculator.center(20, c100x100, new Vector(100, 100));
+			const vp = CenteredViewportCalculator.center(20, v100x100, new Vector(100, 100));
 
 			expect(vp.position.x).toBe(20);
 			expect(vp.position.y).toBe(20);
 			expect(vp.scale).toBe(0.6);
 		});
 
 		it('root component is smaller than canvas (margin = 20)', () => {
-			const vp = CenteredViewportCalculator.center(20, c100x100, new Vector(10, 20));
+			const vp = CenteredViewportCalculator.center(20, v100x100, new Vector(10, 20));
 
 			expect(vp.position.x).toBe(45);
 			expect(vp.position.y).toBe(40);
 			expect(vp.scale).toBe(1);
 		});
 
 		it('root component is bigger than canvas (margin = 20)', () => {
-			const vp = CenteredViewportCalculator.center(20, c100x100, new Vector(200, 200));
+			const vp = CenteredViewportCalculator.center(20, v100x100, new Vector(200, 200));
 
 			expect(vp.position.x).toBe(20);
 			expect(vp.position.y).toBe(20);
 			expect(vp.scale).toBe(0.3);
 		});
+
+		it('returns scale=1 when canvas size is 0x(1+)', () => {
+			const vp = CenteredViewportCalculator.center(20, new Vector(0, 100), v100x100);
+
+			expect(vp.position.x).toBe(0);
+			expect(vp.position.y).toBe(0);
+			expect(vp.scale).toBe(1);
+		});
+
+		it('returns scale=1 when canvas size is (1+)x0', () => {
+			const vp = CenteredViewportCalculator.center(20, new Vector(100, 0), v100x100);
+
+			expect(vp.position.x).toBe(0);
+			expect(vp.position.y).toBe(0);
+			expect(vp.scale).toBe(1);
+		});
 	});
 });
diff --git a/designer/src/workspace/viewport/centered-viewport-calculator.ts b/designer/src/workspace/viewport/centered-viewport-calculator.ts
@@ -3,6 +3,13 @@ import { Viewport } from '../../designer-extension';
 
 export class CenteredViewportCalculator {
 	public static center(margin: 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);
 

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/[email protected].5';
+const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/[email protected].6';
 
 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.24.5",
+	"version": "0.24.6",
 	"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.24.5"
+		"sequential-workflow-designer": "^0.24.6"
 	},
 	"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.24.5",
+		"sequential-workflow-designer": "^0.24.6",
 		"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.24.5",
+	"version": "0.24.6",
 	"license": "MIT",
 	"scripts": {
 		"prepare": "cp ../LICENSE LICENSE",
@@ -28,10 +28,10 @@
 	],
 	"peerDependencies": {
 		"svelte": "^4.0.0",
-		"sequential-workflow-designer": "^0.24.5"
+		"sequential-workflow-designer": "^0.24.6"
 	},
 	"devDependencies": {
-		"sequential-workflow-designer": "^0.24.5",
+		"sequential-workflow-designer": "^0.24.6",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@sveltejs/package": "^2.0.0",