nocode-js · b4rtaz · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.24.0
+
+This version introduces a new function in the `Designer` class: `updateLayout()`. You can now manually update the layout of the designer, which is particularly useful when you change the size of the designer container. Previously, the layout was updated automatically only when the browser window was resized. However, if you changed the container size dynamically, there was no way to update the layout manually.
+
 # 0.23.0
 
 This release updates the CSS selectors for the toolbox, allowing you to adjust its width with a single CSS override.

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.23.0/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.23.0/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.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.23.0",
+	"version": "0.24.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.23.0"
+		"sequential-workflow-designer": "^0.24.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.23.0",
-		"sequential-workflow-designer-angular": "^0.23.0",
+		"sequential-workflow-designer": "^0.24.0",
+		"sequential-workflow-designer-angular": "^0.24.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.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.23.0.tgz#aa8a8f9f6e0332d1d3e37c9f973526858db47529"
-  integrity sha512-zLLDzDCY9YOjEpDBdKhYPmsaMIph8boZ9sHyCG8G3btDe5DxyQ0CWly83gn3JYn+ydEbxP8uKr79QOCx5qU86g==
+sequential-workflow-designer-angular@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.0.tgz#b7f93508228e309648597c17eb742ac0e437d62d"
+  integrity sha512-H137tfBzgB7ETQFWtgVwSIVPL9Spe47zSx1xTpClMQndVMEh2ueOstncHoZouF97NuxGenfogfPRQ1r2yX8rfg==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.23.0.tgz#8564eed552a75d5d6bca4aeb84e410add3fe431d"
-  integrity sha512-wySBYU+r8UoXeRaqThnH99NDgyAEek4QJSWZHGhKwgPfguH0Y9JZB+8DvV15iLFL9lMKPYiqWQHZvIhUtDz2LA==
+sequential-workflow-designer@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.0.tgz#33d1bba1ccbf33a1ba8b70c133d381faf2361536"
+  integrity sha512-o4wWHw4z2W2r5EqIKTmR3VUh+Cb6yMn+4nIcFWyA63J4XOKcEAEV32eBHtXnmxsjdlfkfRDcXMITp8zV4QbzUA==
   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.23.0",
-		"sequential-workflow-designer-react": "^0.23.0"
+		"sequential-workflow-designer": "^0.24.0",
+		"sequential-workflow-designer-react": "^0.24.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.23.0",
-		"sequential-workflow-designer-svelte": "^0.23.0"
+		"sequential-workflow-designer": "^0.24.0",
+		"sequential-workflow-designer-svelte": "^0.24.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.23.0",
+	"version": "0.24.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/src/control-bar/control-bar.ts b/designer/src/control-bar/control-bar.ts
@@ -31,6 +31,10 @@ export class ControlBar implements UiComponent {
 		private readonly isUndoRedoSupported: boolean
 	) {}
 
+	public updateLayout() {
+		//
+	}
+
 	public destroy() {
 		//
 	}

diff --git a/designer/src/designer-extension.ts b/designer/src/designer-extension.ts
@@ -112,6 +112,7 @@ export interface UiComponentExtension {
 }
 
 export interface UiComponent {
+	updateLayout(): void;
 	destroy(): void;
 }
 

diff --git a/designer/src/designer-view.ts b/designer/src/designer-view.ts
@@ -18,13 +18,11 @@ export class DesignerView {
 		const daemons = designerContext.services.daemons.map(factory => factory.create(api));
 
 		const view = new DesignerView(root, designerContext.layoutController, workspace, uiComponents, daemons);
-		view.reloadLayout();
-		window.addEventListener('resize', view.onResizeHandler, false);
+		view.applyLayout();
+		window.addEventListener('resize', view.onResize, false);
 		return view;
 	}
 
-	private readonly onResizeHandler = () => this.onResize();
-
 	public constructor(
 		private readonly root: HTMLElement,
 		private readonly layoutController: LayoutController,
@@ -33,8 +31,15 @@ export class DesignerView {
 		private readonly daemons: Daemon[]
 	) {}
 
+	public updateLayout() {
+		this.applyLayout();
+		for (const component of this.uiComponents) {
+			component.updateLayout();
+		}
+	}
+
 	public destroy() {
-		window.removeEventListener('resize', this.onResizeHandler, false);
+		window.removeEventListener('resize', this.onResize, false);
 
 		this.workspace.destroy();
 		this.uiComponents.forEach(component => component.destroy());
@@ -43,11 +48,11 @@ export class DesignerView {
 		this.root.parentElement?.removeChild(this.root);
 	}
 
-	private onResize() {
-		this.reloadLayout();
-	}
+	private readonly onResize = () => {
+		this.updateLayout();
+	};
 
-	private reloadLayout() {
+	private applyLayout() {
 		const isMobile = this.layoutController.isMobile();
 		Dom.toggleClass(this.root, !isMobile, 'sqd-layout-desktop');
 		Dom.toggleClass(this.root, isMobile, 'sqd-layout-mobile');

diff --git a/designer/src/designer.ts b/designer/src/designer.ts
@@ -187,6 +187,14 @@ export class Designer<TDefinition extends Definition = Definition> {
 		this.api.workspace.updateRootComponent();
 	}
 
+	/**
+	 * @description Updates the layout of the designer.
+	 */
+	public updateLayout() {
+		this.api.workspace.updateCanvasSize();
+		this.view.updateLayout();
+	}
+
 	/**
 	 * @description Updates all badges.
 	 */

diff --git a/designer/src/smart-editor/smart-editor.ts b/designer/src/smart-editor/smart-editor.ts
@@ -39,6 +39,10 @@ export class SmartEditor implements UiComponent {
 		this.setIsCollapsed(this.editorApi.isCollapsed());
 	}
 
+	public updateLayout() {
+		//
+	}
+
 	public destroy() {
 		this.view.destroy();
 	}

diff --git a/designer/src/toolbox/scrollbox-view.ts b/designer/src/toolbox/scrollbox-view.ts
@@ -16,7 +16,6 @@ export class ScrollBoxView {
 		parent.appendChild(root);
 
 		const view = new ScrollBoxView(root, viewport);
-		window.addEventListener('resize', view.onResize, false);
 		root.addEventListener('wheel', e => view.onWheel(e), listenerOptions);
 		root.addEventListener('touchstart', e => view.onTouchStart(e), listenerOptions);
 		root.addEventListener('mousedown', e => view.onMouseDown(e), false);
@@ -46,14 +45,14 @@ export class ScrollBoxView {
 		this.reload(element);
 	}
 
-	public refresh() {
+	public updateLayout() {
 		if (this.content) {
 			this.reload(this.content.element);
 		}
 	}
 
 	public destroy() {
-		window.removeEventListener('resize', this.onResize, false);
+		//
 	}
 
 	private reload(element: HTMLElement) {
@@ -72,10 +71,6 @@ export class ScrollBoxView {
 		};
 	}
 
-	private readonly onResize = () => {
-		this.refresh();
-	};
-
 	private onWheel(e: WheelEvent) {
 		e.preventDefault();
 		e.stopPropagation();

diff --git a/designer/src/toolbox/toolbox-view.ts b/designer/src/toolbox/toolbox-view.ts
@@ -54,6 +54,10 @@ export class ToolboxView {
 		private readonly api: ToolboxApi
 	) {}
 
+	public updateLayout() {
+		this.scrollBoxView.updateLayout();
+	}
+
 	public bindToggleClick(handler: () => void) {
 		function forward(e: Event) {
 			e.preventDefault();
@@ -80,7 +84,7 @@ export class ToolboxView {
 		this.header.appendChild(this.headerToggleIcon);
 
 		if (!isCollapsed) {
-			this.scrollBoxView.refresh();
+			this.updateLayout();
 		}
 	}
 

diff --git a/designer/src/toolbox/toolbox.ts b/designer/src/toolbox/toolbox.ts
@@ -27,6 +27,10 @@ export class Toolbox implements UiComponent {
 		private readonly allGroups: ToolboxGroupData[]
 	) {}
 
+	public updateLayout() {
+		this.view.updateLayout();
+	}
+
 	public destroy() {
 		this.view.destroy();
 	}

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.23.0';
+const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.0';
 
 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.23.0",
+	"version": "0.24.0",
 	"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.23.0"
+		"sequential-workflow-designer": "^0.24.0"
 	},
 	"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.23.0",
+		"sequential-workflow-designer": "^0.24.0",
 		"rollup": "^3.18.0",
 		"rollup-plugin-dts": "^5.2.0",
 		"rollup-plugin-typescript2": "^0.34.1",

diff --git a/react/src/SequentialWorkflowDesignerController.ts b/react/src/SequentialWorkflowDesignerController.ts
@@ -33,6 +33,13 @@ export class SequentialWorkflowDesignerController {
 		this.getDesigner().updateRootComponent();
 	};
 
+	/**
+	 * @description Updates the layout of the designer.
+	 */
+	public readonly updateLayout = () => {
+		this.getDesigner().updateLayout();
+	};
+
 	/**
 	 * Replaces the current definition with a new one and adds the previous definition to the undo stack.
 	 * @param definition A new definition.

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.23.0",
+	"version": "0.24.0",
 	"license": "MIT",
 	"scripts": {
 		"prepare": "cp ../LICENSE LICENSE",
@@ -28,10 +28,10 @@
 	],
 	"peerDependencies": {
 		"svelte": "^4.0.0",
-		"sequential-workflow-designer": "^0.23.0"
+		"sequential-workflow-designer": "^0.24.0"
 	},
 	"devDependencies": {
-		"sequential-workflow-designer": "^0.23.0",
+		"sequential-workflow-designer": "^0.24.0",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@sveltejs/package": "^2.0.0",
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,6 +31,10 @@ export class ControlBar implements UiComponent { @@
     		private readonly isUndoRedoSupported: boolean
     	) {}
+    	public updateLayout() {
+    		//
+    	}
     	public destroy() {
     		//
     	}
@@ Expand Down @@