npm - sequential-workflow-designer - Versions diffs - 0.33.1 → 0.34.1 - Mend

sequential-workflow-designer 0.33.1 → 0.34.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

@@ -106,10 +106,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.33.1/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.1/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.1/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.1/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/dist/index.umd.js"></script>
 ```
 Call the designer by:

package/dist/index.umd.js CHANGED Viewed

@@ -759,7 +759,7 @@
 	        const clientPosition = component.view.getClientPosition();
 	        const componentPosition = clientPosition.subtract(canvasPosition);
 	        const componentSize = new Vector(component.view.width, component.view.height);
-	        const viewport = this.viewportController.getFocusedOnComponent(componentPosition, componentSize);
+	        const viewport = this.viewportController.getFocusedOnComponent(componentPosition, componentSize, component.step.componentType, component.view.g);
 	        this.animator.execute(viewport);
 	    }
 	    handleWheelEvent(e) {
@@ -1684,11 +1684,16 @@
 	                return regionView.getClientPosition();
 	            },
 	            resolveClick(click) {
-	                const result = regionView.resolveClick(click);
-	                return result === true || (result === null && g.contains(click.element)) ? true : result;
+	                if (cfg.isRegionClickable) {
+	                    const result = regionView.resolveClick(click);
+	                    if (result !== null) {
+	                        return result;
+	                    }
+	                }
+	                return labelView.g.contains(click.element) || (inputView && inputView.g.contains(click.element)) ? true : null;
 	            },
 	            setIsDragging(isDragging) {
-	                if (cfg.autoHideInputOnDrag && inputView) {
+	                if (inputView && cfg.autoHideInputOnDrag) {
 	                    inputView.setIsHidden(isDragging);
 	                }
 	            },
@@ -1846,7 +1851,7 @@
 	};
 	const COMPONENT_CLASS_NAME$1 = 'switch';
-	function createView(g, width, height, joinX, viewContext, sequenceComponents, regionView, cfg) {
+	function createView(g, width, height, joinX, viewContext, sequenceComponents, labelViews, regionView, cfg) {
 	    let inputView = null;
 	    if (cfg.inputSize > 0) {
 	        const iconUrl = viewContext.getStepIconUrl();
@@ -1864,11 +1869,16 @@
 	            return regionView.getClientPosition();
 	        },
 	        resolveClick(click) {
-	            const result = regionView.resolveClick(click);
-	            return result === true || (result === null && g.contains(click.element)) ? true : result;
+	            if (cfg.isRegionClickable) {
+	                const result = regionView.resolveClick(click);
+	                if (result !== null) {
+	                    return result;
+	                }
+	            }
+	            return labelViews.some(v => v.g.contains(click.element) || (inputView && inputView.g.contains(click.element))) ? true : null;
 	        },
 	        setIsDragging(isDragging) {
-	            if (cfg.autoHideInputOnDrag && inputView) {
+	            if (inputView && cfg.autoHideInputOnDrag) {
 	                inputView.setIsHidden(isDragging);
 	            }
 	        },
@@ -1894,14 +1904,15 @@
 	            const regionView = regionViewBuilder(g, [width], height);
 	            Dom.translate(nameLabelView.g, joinX, 0);
 	            JoinView.createStraightJoin(g, new Vector(joinX, 0), height);
-	            return createView(g, width, height, joinX, viewContext, null, regionView, cfg);
+	            return createView(g, width, height, joinX, viewContext, null, [nameLabelView], regionView, cfg);
 	        }
-	        const branchComponents = [];
-	        const branchLabelViews = [];
-	        const branchSizes = [];
+	        const branchComponents = new Array(branchNames.length);
+	        const branchSizes = new Array(branchNames.length);
+	        const labelViews = new Array(branchNames.length + 1);
+	        labelViews[branchNames.length] = nameLabelView;
 	        let totalBranchesWidth = 0;
 	        let maxBranchesHeight = 0;
-	        branchNames.forEach(branchName => {
+	        branchNames.forEach((branchName, i) => {
 	            const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
 	            const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
 	            const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
@@ -1914,9 +1925,9 @@
 	            const offsetX = totalBranchesWidth;
 	            totalBranchesWidth += width;
 	            maxBranchesHeight = Math.max(maxBranchesHeight, component.view.height);
-	            branchComponents.push(component);
-	            branchLabelViews.push(labelView);
-	            branchSizes.push({ width, branchOffsetLeft, offsetX, joinX });
+	            branchComponents[i] = component;
+	            branchSizes[i] = { width, branchOffsetLeft, offsetX, joinX };
+	            labelViews[i] = labelView;
 	        });
 	        const centerBranchIndex = Math.floor(branchNames.length / 2);
 	        const centerBranchSize = branchSizes[centerBranchIndex];
@@ -1935,7 +1946,7 @@
 	        branchComponents.forEach((component, i) => {
 	            const branchSize = branchSizes[i];
 	            const branchOffsetLeft = switchOffsetLeft + branchSize.offsetX + branchSize.branchOffsetLeft;
-	            Dom.translate(branchLabelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
+	            Dom.translate(labelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
 	            Dom.translate(component.view.g, branchOffsetLeft, branchOffsetTop);
 	            if (component.hasOutput && stepContext.isOutputConnected) {
 	                const endOffsetTopOfComponent = paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight + component.view.height;
@@ -1963,7 +1974,7 @@
 	        regions[0] += switchOffsetLeft;
 	        regions[regions.length - 1] += switchOffsetRight;
 	        const regionView = regionViewBuilder(g, regions, viewHeight);
-	        return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, regionView, cfg);
+	        return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, labelViews, regionView, cfg);
 	    });
 	};
@@ -2533,6 +2544,7 @@
 	        inputRadius: 4,
 	        inputIconSize: 14,
 	        autoHideInputOnDrag: true,
+	        isRegionClickable: true,
 	        label: {
 	            height: 22,
 	            paddingX: 10,
@@ -2563,6 +2575,7 @@
 	    inputIconSize: 14,
 	    inputRadius: 4,
 	    autoHideInputOnDrag: true,
+	    isRegionClickable: true,
 	    branchNameLabel: {
 	        height: 22,
 	        paddingX: 10,

package/lib/cjs/index.cjs CHANGED Viewed

@@ -757,7 +757,7 @@ class ViewportApi {
         const clientPosition = component.view.getClientPosition();
         const componentPosition = clientPosition.subtract(canvasPosition);
         const componentSize = new Vector(component.view.width, component.view.height);
-        const viewport = this.viewportController.getFocusedOnComponent(componentPosition, componentSize);
+        const viewport = this.viewportController.getFocusedOnComponent(componentPosition, componentSize, component.step.componentType, component.view.g);
         this.animator.execute(viewport);
     }
     handleWheelEvent(e) {
@@ -1499,11 +1499,16 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
                 return regionView.getClientPosition();
             },
             resolveClick(click) {
-                const result = regionView.resolveClick(click);
-                return result === true || (result === null && g.contains(click.element)) ? true : result;
+                if (cfg.isRegionClickable) {
+                    const result = regionView.resolveClick(click);
+                    if (result !== null) {
+                        return result;
+                    }
+                }
+                return labelView.g.contains(click.element) || (inputView && inputView.g.contains(click.element)) ? true : null;
             },
             setIsDragging(isDragging) {
-                if (cfg.autoHideInputOnDrag && inputView) {
+                if (inputView && cfg.autoHideInputOnDrag) {
                     inputView.setIsHidden(isDragging);
                 }
             },
@@ -1661,7 +1666,7 @@ const createLaunchPadStepComponentViewFactory = (isInterruptedIfEmpty, cfg) => (
 };
 const COMPONENT_CLASS_NAME$1 = 'switch';
-function createView(g, width, height, joinX, viewContext, sequenceComponents, regionView, cfg) {
+function createView(g, width, height, joinX, viewContext, sequenceComponents, labelViews, regionView, cfg) {
     let inputView = null;
     if (cfg.inputSize > 0) {
         const iconUrl = viewContext.getStepIconUrl();
@@ -1679,11 +1684,16 @@ function createView(g, width, height, joinX, viewContext, sequenceComponents, re
             return regionView.getClientPosition();
         },
         resolveClick(click) {
-            const result = regionView.resolveClick(click);
-            return result === true || (result === null && g.contains(click.element)) ? true : result;
+            if (cfg.isRegionClickable) {
+                const result = regionView.resolveClick(click);
+                if (result !== null) {
+                    return result;
+                }
+            }
+            return labelViews.some(v => v.g.contains(click.element) || (inputView && inputView.g.contains(click.element))) ? true : null;
         },
         setIsDragging(isDragging) {
-            if (cfg.autoHideInputOnDrag && inputView) {
+            if (inputView && cfg.autoHideInputOnDrag) {
                 inputView.setIsHidden(isDragging);
             }
         },
@@ -1709,14 +1719,15 @@ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver) => (paren
             const regionView = regionViewBuilder(g, [width], height);
             Dom.translate(nameLabelView.g, joinX, 0);
             JoinView.createStraightJoin(g, new Vector(joinX, 0), height);
-            return createView(g, width, height, joinX, viewContext, null, regionView, cfg);
+            return createView(g, width, height, joinX, viewContext, null, [nameLabelView], regionView, cfg);
         }
-        const branchComponents = [];
-        const branchLabelViews = [];
-        const branchSizes = [];
+        const branchComponents = new Array(branchNames.length);
+        const branchSizes = new Array(branchNames.length);
+        const labelViews = new Array(branchNames.length + 1);
+        labelViews[branchNames.length] = nameLabelView;
         let totalBranchesWidth = 0;
         let maxBranchesHeight = 0;
-        branchNames.forEach(branchName => {
+        branchNames.forEach((branchName, i) => {
             const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
             const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
             const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
@@ -1729,9 +1740,9 @@ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver) => (paren
             const offsetX = totalBranchesWidth;
             totalBranchesWidth += width;
             maxBranchesHeight = Math.max(maxBranchesHeight, component.view.height);
-            branchComponents.push(component);
-            branchLabelViews.push(labelView);
-            branchSizes.push({ width, branchOffsetLeft, offsetX, joinX });
+            branchComponents[i] = component;
+            branchSizes[i] = { width, branchOffsetLeft, offsetX, joinX };
+            labelViews[i] = labelView;
         });
         const centerBranchIndex = Math.floor(branchNames.length / 2);
         const centerBranchSize = branchSizes[centerBranchIndex];
@@ -1750,7 +1761,7 @@ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver) => (paren
         branchComponents.forEach((component, i) => {
             const branchSize = branchSizes[i];
             const branchOffsetLeft = switchOffsetLeft + branchSize.offsetX + branchSize.branchOffsetLeft;
-            Dom.translate(branchLabelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
+            Dom.translate(labelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
             Dom.translate(component.view.g, branchOffsetLeft, branchOffsetTop);
             if (component.hasOutput && stepContext.isOutputConnected) {
                 const endOffsetTopOfComponent = paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight + component.view.height;
@@ -1778,7 +1789,7 @@ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver) => (paren
         regions[0] += switchOffsetLeft;
         regions[regions.length - 1] += switchOffsetRight;
         const regionView = regionViewBuilder(g, regions, viewHeight);
-        return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, regionView, cfg);
+        return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, labelViews, regionView, cfg);
     });
 };
@@ -2348,6 +2359,7 @@ const defaultConfiguration$1 = {
         inputRadius: 4,
         inputIconSize: 14,
         autoHideInputOnDrag: true,
+        isRegionClickable: true,
         label: {
             height: 22,
             paddingX: 10,
@@ -2378,6 +2390,7 @@ const defaultViewConfiguration$1 = {
     inputIconSize: 14,
     inputRadius: 4,
     autoHideInputOnDrag: true,
+    isRegionClickable: true,
     branchNameLabel: {
         height: 22,
         paddingX: 10,

package/lib/esm/index.js CHANGED Viewed

@@ -756,7 +756,7 @@ class ViewportApi {
         const clientPosition = component.view.getClientPosition();
         const componentPosition = clientPosition.subtract(canvasPosition);
         const componentSize = new Vector(component.view.width, component.view.height);
-        const viewport = this.viewportController.getFocusedOnComponent(componentPosition, componentSize);
+        const viewport = this.viewportController.getFocusedOnComponent(componentPosition, componentSize, component.step.componentType, component.view.g);
         this.animator.execute(viewport);
     }
     handleWheelEvent(e) {
@@ -1498,11 +1498,16 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
                 return regionView.getClientPosition();
             },
             resolveClick(click) {
-                const result = regionView.resolveClick(click);
-                return result === true || (result === null && g.contains(click.element)) ? true : result;
+                if (cfg.isRegionClickable) {
+                    const result = regionView.resolveClick(click);
+                    if (result !== null) {
+                        return result;
+                    }
+                }
+                return labelView.g.contains(click.element) || (inputView && inputView.g.contains(click.element)) ? true : null;
             },
             setIsDragging(isDragging) {
-                if (cfg.autoHideInputOnDrag && inputView) {
+                if (inputView && cfg.autoHideInputOnDrag) {
                     inputView.setIsHidden(isDragging);
                 }
             },
@@ -1660,7 +1665,7 @@ const createLaunchPadStepComponentViewFactory = (isInterruptedIfEmpty, cfg) => (
 };
 const COMPONENT_CLASS_NAME$1 = 'switch';
-function createView(g, width, height, joinX, viewContext, sequenceComponents, regionView, cfg) {
+function createView(g, width, height, joinX, viewContext, sequenceComponents, labelViews, regionView, cfg) {
     let inputView = null;
     if (cfg.inputSize > 0) {
         const iconUrl = viewContext.getStepIconUrl();
@@ -1678,11 +1683,16 @@ function createView(g, width, height, joinX, viewContext, sequenceComponents, re
             return regionView.getClientPosition();
         },
         resolveClick(click) {
-            const result = regionView.resolveClick(click);
-            return result === true || (result === null && g.contains(click.element)) ? true : result;
+            if (cfg.isRegionClickable) {
+                const result = regionView.resolveClick(click);
+                if (result !== null) {
+                    return result;
+                }
+            }
+            return labelViews.some(v => v.g.contains(click.element) || (inputView && inputView.g.contains(click.element))) ? true : null;
         },
         setIsDragging(isDragging) {
-            if (cfg.autoHideInputOnDrag && inputView) {
+            if (inputView && cfg.autoHideInputOnDrag) {
                 inputView.setIsHidden(isDragging);
             }
         },
@@ -1708,14 +1718,15 @@ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver) => (paren
             const regionView = regionViewBuilder(g, [width], height);
             Dom.translate(nameLabelView.g, joinX, 0);
             JoinView.createStraightJoin(g, new Vector(joinX, 0), height);
-            return createView(g, width, height, joinX, viewContext, null, regionView, cfg);
+            return createView(g, width, height, joinX, viewContext, null, [nameLabelView], regionView, cfg);
         }
-        const branchComponents = [];
-        const branchLabelViews = [];
-        const branchSizes = [];
+        const branchComponents = new Array(branchNames.length);
+        const branchSizes = new Array(branchNames.length);
+        const labelViews = new Array(branchNames.length + 1);
+        labelViews[branchNames.length] = nameLabelView;
         let totalBranchesWidth = 0;
         let maxBranchesHeight = 0;
-        branchNames.forEach(branchName => {
+        branchNames.forEach((branchName, i) => {
             const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
             const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
             const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
@@ -1728,9 +1739,9 @@ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver) => (paren
             const offsetX = totalBranchesWidth;
             totalBranchesWidth += width;
             maxBranchesHeight = Math.max(maxBranchesHeight, component.view.height);
-            branchComponents.push(component);
-            branchLabelViews.push(labelView);
-            branchSizes.push({ width, branchOffsetLeft, offsetX, joinX });
+            branchComponents[i] = component;
+            branchSizes[i] = { width, branchOffsetLeft, offsetX, joinX };
+            labelViews[i] = labelView;
         });
         const centerBranchIndex = Math.floor(branchNames.length / 2);
         const centerBranchSize = branchSizes[centerBranchIndex];
@@ -1749,7 +1760,7 @@ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver) => (paren
         branchComponents.forEach((component, i) => {
             const branchSize = branchSizes[i];
             const branchOffsetLeft = switchOffsetLeft + branchSize.offsetX + branchSize.branchOffsetLeft;
-            Dom.translate(branchLabelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
+            Dom.translate(labelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
             Dom.translate(component.view.g, branchOffsetLeft, branchOffsetTop);
             if (component.hasOutput && stepContext.isOutputConnected) {
                 const endOffsetTopOfComponent = paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight + component.view.height;
@@ -1777,7 +1788,7 @@ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver) => (paren
         regions[0] += switchOffsetLeft;
         regions[regions.length - 1] += switchOffsetRight;
         const regionView = regionViewBuilder(g, regions, viewHeight);
-        return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, regionView, cfg);
+        return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, labelViews, regionView, cfg);
     });
 };
@@ -2347,6 +2358,7 @@ const defaultConfiguration$1 = {
         inputRadius: 4,
         inputIconSize: 14,
         autoHideInputOnDrag: true,
+        isRegionClickable: true,
         label: {
             height: 22,
             paddingX: 10,
@@ -2377,6 +2389,7 @@ const defaultViewConfiguration$1 = {
     inputIconSize: 14,
     inputRadius: 4,
     autoHideInputOnDrag: true,
+    isRegionClickable: true,
     branchNameLabel: {
         height: 22,
         paddingX: 10,

package/lib/index.d.ts CHANGED Viewed

@@ -652,6 +652,10 @@ interface ContainerStepComponentViewConfiguration {
     inputIconSize: number;
     autoHideInputOnDrag: boolean;
     label: LabelViewConfiguration;
+    /**
+     * If `true`, the entire region of the switch step is clickable; otherwise, only the labels and icon are clickable.
+     */
+    isRegionClickable: boolean;
 }
 interface ContainerStepExtensionConfiguration {
@@ -700,6 +704,10 @@ interface SwitchStepComponentViewConfiguration {
     noBranchPaddingBottom: number;
     inputSize: number;
     inputIconSize: number;
+    /**
+     * If `true`, the entire region of the switch step is clickable; otherwise, only the labels and icon are clickable.
+     */
+    isRegionClickable: boolean;
     autoHideInputOnDrag: boolean;
     inputRadius: number;
     nameLabel: LabelViewConfiguration;
@@ -964,7 +972,7 @@ interface ViewportController {
     smoothDeltaYLimit: number;
     getDefault(): Viewport;
     getZoomed(direction: boolean): Viewport | null;
-    getFocusedOnComponent(componentPosition: Vector, componentSize: Vector): Viewport;
+    getFocusedOnComponent(componentPosition: Vector, componentSize: Vector, componentType: string, componentElement: SVGElement): Viewport;
     getNextScale(scale: number, direction: boolean): NextScale;
     limitScale(scale: number): number;
 }

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.33.1",
+	"version": "0.34.1",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",