npm - sequential-workflow-designer - Versions diffs - 0.23.0 → 0.24.0 - Mend

sequential-workflow-designer 0.23.0 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -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:

package/dist/index.umd.js CHANGED Viewed

@@ -3436,8 +3436,8 @@
 	        const uiComponents = designerContext.services.uiComponents.map(factory => factory.create(root, api));
 	        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;
 	    }
 	    constructor(root, layoutController, workspace, uiComponents, daemons) {
@@ -3446,20 +3446,25 @@
 	        this.workspace = workspace;
 	        this.uiComponents = uiComponents;
 	        this.daemons = daemons;
-	        this.onResizeHandler = () => this.onResize();
+	        this.onResize = () => {
+	            this.updateLayout();
+	        };
+	    }
+	    updateLayout() {
+	        this.applyLayout();
+	        for (const component of this.uiComponents) {
+	            component.updateLayout();
+	        }
 	    }
 	    destroy() {
 	        var _a;
-	        window.removeEventListener('resize', this.onResizeHandler, false);
+	        window.removeEventListener('resize', this.onResize, false);
 	        this.workspace.destroy();
 	        this.uiComponents.forEach(component => component.destroy());
 	        this.daemons.forEach(daemon => daemon.destroy());
 	        (_a = this.root.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.root);
 	    }
-	    onResize() {
-	        this.reloadLayout();
-	    }
-	    reloadLayout() {
+	    applyLayout() {
 	        const isMobile = this.layoutController.isMobile();
 	        Dom.toggleClass(this.root, !isMobile, 'sqd-layout-desktop');
 	        Dom.toggleClass(this.root, isMobile, 'sqd-layout-mobile');
@@ -3628,6 +3633,9 @@
 	        this.controlBarApi = controlBarApi;
 	        this.isUndoRedoSupported = isUndoRedoSupported;
 	    }
+	    updateLayout() {
+	        //
+	    }
 	    destroy() {
 	        //
 	    }
@@ -3803,6 +3811,9 @@
 	    updateVisibility() {
 	        this.setIsCollapsed(this.editorApi.isCollapsed());
 	    }
+	    updateLayout() {
+	        //
+	    }
 	    destroy() {
 	        this.view.destroy();
 	    }
@@ -3828,7 +3839,6 @@
 	        });
 	        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);
@@ -3837,9 +3847,6 @@
 	    constructor(root, viewport) {
 	        this.root = root;
 	        this.viewport = viewport;
-	        this.onResize = () => {
-	            this.refresh();
-	        };
 	        this.onTouchStart = (e) => {
 	            e.preventDefault();
 	            this.startScroll(readTouchPosition(e));
@@ -3873,13 +3880,13 @@
 	        this.root.appendChild(element);
 	        this.reload(element);
 	    }
-	    refresh() {
+	    updateLayout() {
 	        if (this.content) {
 	            this.reload(this.content.element);
 	        }
 	    }
 	    destroy() {
-	        window.removeEventListener('resize', this.onResize, false);
+	        //
 	    }
 	    reload(element) {
 	        const maxHeightPercent = 0.7;
@@ -4064,6 +4071,9 @@
 	        this.scrollBoxView = scrollBoxView;
 	        this.api = api;
 	    }
+	    updateLayout() {
+	        this.scrollBoxView.updateLayout();
+	    }
 	    bindToggleClick(handler) {
 	        function forward(e) {
 	            e.preventDefault();
@@ -4086,7 +4096,7 @@
 	        this.headerToggleIcon = Icons.createSvg('sqd-toolbox-toggle-icon', isCollapsed ? Icons.expand : Icons.close);
 	        this.header.appendChild(this.headerToggleIcon);
 	        if (!isCollapsed) {
-	            this.scrollBoxView.refresh();
+	            this.updateLayout();
 	        }
 	    }
 	    setGroups(groups) {
@@ -4123,6 +4133,9 @@
 	        this.api = api;
 	        this.allGroups = allGroups;
 	    }
+	    updateLayout() {
+	        this.view.updateLayout();
+	    }
 	    destroy() {
 	        this.view.destroy();
 	    }
@@ -4684,6 +4697,13 @@
 	    updateRootComponent() {
 	        this.api.workspace.updateRootComponent();
 	    }
+	    /**
+	     * @description Updates the layout of the designer.
+	     */
+	    updateLayout() {
+	        this.api.workspace.updateCanvasSize();
+	        this.view.updateLayout();
+	    }
 	    /**
 	     * @description Updates all badges.
 	     */

package/lib/cjs/index.cjs CHANGED Viewed

@@ -3251,8 +3251,8 @@ class DesignerView {
         const uiComponents = designerContext.services.uiComponents.map(factory => factory.create(root, api));
         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;
     }
     constructor(root, layoutController, workspace, uiComponents, daemons) {
@@ -3261,20 +3261,25 @@ class DesignerView {
         this.workspace = workspace;
         this.uiComponents = uiComponents;
         this.daemons = daemons;
-        this.onResizeHandler = () => this.onResize();
+        this.onResize = () => {
+            this.updateLayout();
+        };
+    }
+    updateLayout() {
+        this.applyLayout();
+        for (const component of this.uiComponents) {
+            component.updateLayout();
+        }
     }
     destroy() {
         var _a;
-        window.removeEventListener('resize', this.onResizeHandler, false);
+        window.removeEventListener('resize', this.onResize, false);
         this.workspace.destroy();
         this.uiComponents.forEach(component => component.destroy());
         this.daemons.forEach(daemon => daemon.destroy());
         (_a = this.root.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.root);
     }
-    onResize() {
-        this.reloadLayout();
-    }
-    reloadLayout() {
+    applyLayout() {
         const isMobile = this.layoutController.isMobile();
         Dom.toggleClass(this.root, !isMobile, 'sqd-layout-desktop');
         Dom.toggleClass(this.root, isMobile, 'sqd-layout-mobile');
@@ -3443,6 +3448,9 @@ class ControlBar {
         this.controlBarApi = controlBarApi;
         this.isUndoRedoSupported = isUndoRedoSupported;
     }
+    updateLayout() {
+        //
+    }
     destroy() {
         //
     }
@@ -3618,6 +3626,9 @@ class SmartEditor {
     updateVisibility() {
         this.setIsCollapsed(this.editorApi.isCollapsed());
     }
+    updateLayout() {
+        //
+    }
     destroy() {
         this.view.destroy();
     }
@@ -3643,7 +3654,6 @@ 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);
@@ -3652,9 +3662,6 @@ class ScrollBoxView {
     constructor(root, viewport) {
         this.root = root;
         this.viewport = viewport;
-        this.onResize = () => {
-            this.refresh();
-        };
         this.onTouchStart = (e) => {
             e.preventDefault();
             this.startScroll(readTouchPosition(e));
@@ -3688,13 +3695,13 @@ class ScrollBoxView {
         this.root.appendChild(element);
         this.reload(element);
     }
-    refresh() {
+    updateLayout() {
         if (this.content) {
             this.reload(this.content.element);
         }
     }
     destroy() {
-        window.removeEventListener('resize', this.onResize, false);
+        //
     }
     reload(element) {
         const maxHeightPercent = 0.7;
@@ -3879,6 +3886,9 @@ class ToolboxView {
         this.scrollBoxView = scrollBoxView;
         this.api = api;
     }
+    updateLayout() {
+        this.scrollBoxView.updateLayout();
+    }
     bindToggleClick(handler) {
         function forward(e) {
             e.preventDefault();
@@ -3901,7 +3911,7 @@ class ToolboxView {
         this.headerToggleIcon = Icons.createSvg('sqd-toolbox-toggle-icon', isCollapsed ? Icons.expand : Icons.close);
         this.header.appendChild(this.headerToggleIcon);
         if (!isCollapsed) {
-            this.scrollBoxView.refresh();
+            this.updateLayout();
         }
     }
     setGroups(groups) {
@@ -3938,6 +3948,9 @@ class Toolbox {
         this.api = api;
         this.allGroups = allGroups;
     }
+    updateLayout() {
+        this.view.updateLayout();
+    }
     destroy() {
         this.view.destroy();
     }
@@ -4499,6 +4512,13 @@ class Designer {
     updateRootComponent() {
         this.api.workspace.updateRootComponent();
     }
+    /**
+     * @description Updates the layout of the designer.
+     */
+    updateLayout() {
+        this.api.workspace.updateCanvasSize();
+        this.view.updateLayout();
+    }
     /**
      * @description Updates all badges.
      */

package/lib/esm/index.js CHANGED Viewed

@@ -3250,8 +3250,8 @@ class DesignerView {
         const uiComponents = designerContext.services.uiComponents.map(factory => factory.create(root, api));
         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;
     }
     constructor(root, layoutController, workspace, uiComponents, daemons) {
@@ -3260,20 +3260,25 @@ class DesignerView {
         this.workspace = workspace;
         this.uiComponents = uiComponents;
         this.daemons = daemons;
-        this.onResizeHandler = () => this.onResize();
+        this.onResize = () => {
+            this.updateLayout();
+        };
+    }
+    updateLayout() {
+        this.applyLayout();
+        for (const component of this.uiComponents) {
+            component.updateLayout();
+        }
     }
     destroy() {
         var _a;
-        window.removeEventListener('resize', this.onResizeHandler, false);
+        window.removeEventListener('resize', this.onResize, false);
         this.workspace.destroy();
         this.uiComponents.forEach(component => component.destroy());
         this.daemons.forEach(daemon => daemon.destroy());
         (_a = this.root.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.root);
     }
-    onResize() {
-        this.reloadLayout();
-    }
-    reloadLayout() {
+    applyLayout() {
         const isMobile = this.layoutController.isMobile();
         Dom.toggleClass(this.root, !isMobile, 'sqd-layout-desktop');
         Dom.toggleClass(this.root, isMobile, 'sqd-layout-mobile');
@@ -3442,6 +3447,9 @@ class ControlBar {
         this.controlBarApi = controlBarApi;
         this.isUndoRedoSupported = isUndoRedoSupported;
     }
+    updateLayout() {
+        //
+    }
     destroy() {
         //
     }
@@ -3617,6 +3625,9 @@ class SmartEditor {
     updateVisibility() {
         this.setIsCollapsed(this.editorApi.isCollapsed());
     }
+    updateLayout() {
+        //
+    }
     destroy() {
         this.view.destroy();
     }
@@ -3642,7 +3653,6 @@ 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);
@@ -3651,9 +3661,6 @@ class ScrollBoxView {
     constructor(root, viewport) {
         this.root = root;
         this.viewport = viewport;
-        this.onResize = () => {
-            this.refresh();
-        };
         this.onTouchStart = (e) => {
             e.preventDefault();
             this.startScroll(readTouchPosition(e));
@@ -3687,13 +3694,13 @@ class ScrollBoxView {
         this.root.appendChild(element);
         this.reload(element);
     }
-    refresh() {
+    updateLayout() {
         if (this.content) {
             this.reload(this.content.element);
         }
     }
     destroy() {
-        window.removeEventListener('resize', this.onResize, false);
+        //
     }
     reload(element) {
         const maxHeightPercent = 0.7;
@@ -3878,6 +3885,9 @@ class ToolboxView {
         this.scrollBoxView = scrollBoxView;
         this.api = api;
     }
+    updateLayout() {
+        this.scrollBoxView.updateLayout();
+    }
     bindToggleClick(handler) {
         function forward(e) {
             e.preventDefault();
@@ -3900,7 +3910,7 @@ class ToolboxView {
         this.headerToggleIcon = Icons.createSvg('sqd-toolbox-toggle-icon', isCollapsed ? Icons.expand : Icons.close);
         this.header.appendChild(this.headerToggleIcon);
         if (!isCollapsed) {
-            this.scrollBoxView.refresh();
+            this.updateLayout();
         }
     }
     setGroups(groups) {
@@ -3937,6 +3947,9 @@ class Toolbox {
         this.api = api;
         this.allGroups = allGroups;
     }
+    updateLayout() {
+        this.view.updateLayout();
+    }
     destroy() {
         this.view.destroy();
     }
@@ -4498,6 +4511,13 @@ class Designer {
     updateRootComponent() {
         this.api.workspace.updateRootComponent();
     }
+    /**
+     * @description Updates the layout of the designer.
+     */
+    updateLayout() {
+        this.api.workspace.updateCanvasSize();
+        this.view.updateLayout();
+    }
     /**
      * @description Updates all badges.
      */

package/lib/index.d.ts CHANGED Viewed

@@ -781,6 +781,7 @@ interface UiComponentExtension {
     create(root: HTMLElement, api: DesignerApi): UiComponent;
 }
 interface UiComponent {
+    updateLayout(): void;
     destroy(): void;
 }
 interface DraggedComponentExtension {
@@ -1184,6 +1185,10 @@ declare class Designer<TDefinition extends Definition = Definition> {
      * @description Rerender the root component and all its children.
      */
     updateRootComponent(): void;
+    /**
+     * @description Updates the layout of the designer.
+     */
+    updateLayout(): void;
     /**
      * @description Updates all badges.
      */

package/package.json CHANGED Viewed

@@ -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",