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

sequential-workflow-designer 0.23.0 → 0.24.1

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.1/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.1/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.1/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.1/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();
 	    }
@@ -4558,14 +4571,14 @@
 	        if (!placeholder) {
 	            throw new Error('Placeholder is not defined');
 	        }
-	        if (!isElementAttached(placeholder)) {
-	            throw new Error('Placeholder is not attached to the DOM');
-	        }
 	        if (!startDefinition) {
 	            throw new Error('Start definition is not defined');
 	        }
 	        const config = configuration;
 	        validateConfiguration(config);
+	        if (!config.disableDomAttachmentCheck && !isElementAttached(placeholder)) {
+	            throw new Error('Placeholder is not attached to the DOM');
+	        }
 	        const services = ServicesResolver.resolve(configuration.extensions, config);
 	        const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
 	        const designerApi = DesignerApi.create(designerContext);
@@ -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();
     }
@@ -4373,14 +4386,14 @@ class Designer {
         if (!placeholder) {
             throw new Error('Placeholder is not defined');
         }
-        if (!isElementAttached(placeholder)) {
-            throw new Error('Placeholder is not attached to the DOM');
-        }
         if (!startDefinition) {
             throw new Error('Start definition is not defined');
         }
         const config = configuration;
         validateConfiguration(config);
+        if (!config.disableDomAttachmentCheck && !isElementAttached(placeholder)) {
+            throw new Error('Placeholder is not attached to the DOM');
+        }
         const services = ServicesResolver.resolve(configuration.extensions, config);
         const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
         const designerApi = DesignerApi.create(designerContext);
@@ -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();
     }
@@ -4372,14 +4385,14 @@ class Designer {
         if (!placeholder) {
             throw new Error('Placeholder is not defined');
         }
-        if (!isElementAttached(placeholder)) {
-            throw new Error('Placeholder is not attached to the DOM');
-        }
         if (!startDefinition) {
             throw new Error('Start definition is not defined');
         }
         const config = configuration;
         validateConfiguration(config);
+        if (!config.disableDomAttachmentCheck && !isElementAttached(placeholder)) {
+            throw new Error('Placeholder is not attached to the DOM');
+        }
         const services = ServicesResolver.resolve(configuration.extensions, config);
         const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
         const designerApi = DesignerApi.create(designerContext);
@@ -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 {
@@ -934,6 +935,10 @@ interface DesignerConfiguration<TDefinition extends Definition = Definition> {
      * @description Custom translation function.
      */
     i18n?: I18n;
+    /**
+     * @description By default, the designer checks if the placeholder is attached to the DOM. This flag may disable this check.
+     */
+    disableDomAttachmentCheck?: boolean;
 }
 type UidGenerator = () => string;
 type I18n = (key: string, defaultValue: string) => string;
@@ -1184,6 +1189,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.1",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",