npm - sequential-workflow-designer - Versions diffs - 0.19.2 → 0.19.4 - Mend

sequential-workflow-designer 0.19.2 → 0.19.4

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

@@ -43,6 +43,7 @@ Pro:
 * [🍬 Custom Theme Flat](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-theme-flat.html)
 * [🌹 Custom Step Types](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-step-types.html)
 * [📺 Popup Editor](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/popup-editor.html)
+* [💼 Copy Paste](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/copy-paste.html)
 * [👈 Goto](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/goto.html)
 * [📁 Folders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/folders.html)
 * [⭕ Wheel Mode](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/wheel-mode.html)
@@ -99,10 +100,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.19.2/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.2/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.4/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.4/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.4/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.4/dist/index.umd.js"></script>
 ```
 Call the designer by:

package/dist/index.umd.js CHANGED Viewed

@@ -1140,6 +1140,15 @@
 	    }
 	}
+	class ComponentDom {
+	    static stepG(componentClassName, type, id) {
+	        return Dom.svg('g', {
+	            class: `sqd-step-${componentClassName} sqd-type-${type}`,
+	            'data-step-id': id
+	        });
+	    }
+	}
 	class InputView {
 	    static createRectInput(parent, x, y, size, iconSize, iconUrl) {
 	        const g = Dom.svg('g');
@@ -1345,43 +1354,6 @@
 	    return line;
 	}
-	class RectPlaceholderView {
-	    static create(parent, width, height, radius, iconSize, direction) {
-	        const g = Dom.svg('g', {
-	            visibility: 'hidden',
-	            class: 'sqd-placeholder'
-	        });
-	        parent.appendChild(g);
-	        const rect = Dom.svg('rect', {
-	            class: 'sqd-placeholder-rect',
-	            width,
-	            height,
-	            rx: radius,
-	            ry: radius
-	        });
-	        g.appendChild(rect);
-	        if (direction) {
-	            const iconD = direction === exports.PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
-	            const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
-	            Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
-	        }
-	        parent.appendChild(g);
-	        return new RectPlaceholderView(rect, g);
-	    }
-	    constructor(rect, g) {
-	        this.rect = rect;
-	        this.g = g;
-	    }
-	    setIsHover(isHover) {
-	        Dom.toggleClass(this.g, isHover, 'sqd-hover');
-	    }
-	    setIsVisible(isVisible) {
-	        Dom.attrs(this.g, {
-	            visibility: isVisible ? 'visible' : 'hidden'
-	        });
-	    }
-	}
 	class DefaultSequenceComponentView {
 	    static create(parent, sequenceContext, componentContext) {
 	        const phWidth = componentContext.services.placeholder.gapSize.x;
@@ -1510,9 +1482,7 @@
 	const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepContext, viewContext) => {
 	    const { step } = stepContext;
-	    const g = Dom.svg('g', {
-	        class: `sqd-step-container sqd-type-${step.type}`
-	    });
+	    const g = ComponentDom.stepG('container', step.type, step.id);
 	    parentElement.appendChild(g);
 	    const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, step.name, 'primary');
 	    const sequenceComponent = viewContext.createSequenceComponent(g, step.sequence);
@@ -1558,9 +1528,7 @@
 	const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
 	    const { step } = stepContext;
-	    const g = Dom.svg('g', {
-	        class: `sqd-step-switch sqd-type-${step.type}`
-	    });
+	    const g = ComponentDom.stepG('switch', step.type, step.id);
 	    parent.appendChild(g);
 	    const branchNames = Object.keys(step.branches);
 	    const branchComponents = branchNames.map(branchName => {
@@ -1661,9 +1629,7 @@
 	const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElement, stepContext, viewContext) => {
 	    const { step } = stepContext;
-	    const g = Dom.svg('g', {
-	        class: `sqd-step-task sqd-type-${step.type}`
-	    });
+	    const g = ComponentDom.stepG('task', step.type, step.id);
 	    parentElement.appendChild(g);
 	    const boxHeight = cfg.paddingY * 2 + cfg.iconSize;
 	    const text = Dom.svg('text', {
@@ -1786,7 +1752,7 @@
 	}
 	const SCALES = [0.06, 0.08, 0.1, 0.12, 0.16, 0.2, 0.26, 0.32, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
-	const MAX_DELTA_Y = 16;
+	const MAX_DELTA_Y$1 = 16;
 	const quantifiedScale = new NextQuantifiedNumber(SCALES);
 	class QuantifiedScaleViewportCalculator {
 	    static zoom(current, direction) {
@@ -1803,8 +1769,8 @@
 	        const nextScale = quantifiedScale.next(current.scale, e.deltaY < 0);
 	        let scale;
 	        const absDeltaY = Math.abs(e.deltaY);
-	        if (absDeltaY < MAX_DELTA_Y) {
-	            const fraction = absDeltaY / MAX_DELTA_Y;
+	        if (absDeltaY < MAX_DELTA_Y$1) {
+	            const fraction = absDeltaY / MAX_DELTA_Y$1;
 	            const step = nextScale.next - nextScale.current;
 	            scale = current.scale + step * fraction;
 	        }
@@ -1943,6 +1909,43 @@
 	    }
 	}
+	class RectPlaceholderView {
+	    static create(parent, width, height, radius, iconSize, direction) {
+	        const g = Dom.svg('g', {
+	            visibility: 'hidden',
+	            class: 'sqd-placeholder'
+	        });
+	        parent.appendChild(g);
+	        const rect = Dom.svg('rect', {
+	            class: 'sqd-placeholder-rect',
+	            width,
+	            height,
+	            rx: radius,
+	            ry: radius
+	        });
+	        g.appendChild(rect);
+	        if (direction) {
+	            const iconD = direction === exports.PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
+	            const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
+	            Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
+	        }
+	        parent.appendChild(g);
+	        return new RectPlaceholderView(rect, g);
+	    }
+	    constructor(rect, g) {
+	        this.rect = rect;
+	        this.g = g;
+	    }
+	    setIsHover(isHover) {
+	        Dom.toggleClass(this.g, isHover, 'sqd-hover');
+	    }
+	    setIsVisible(isVisible) {
+	        Dom.attrs(this.g, {
+	            visibility: isVisible ? 'visible' : 'hidden'
+	        });
+	    }
+	}
 	class RectPlaceholder {
 	    static create(parent, size, direction, sequence, index, configuration) {
 	        const view = RectPlaceholderView.create(parent, size.x, size.y, configuration.radius, configuration.iconSize, direction);
@@ -3741,6 +3744,7 @@
 	    }
 	}
+	const MAX_DELTA_Y = 25;
 	const listenerOptions = {
 	    passive: false
 	};
@@ -3819,9 +3823,9 @@
 	        e.preventDefault();
 	        e.stopPropagation();
 	        if (this.content) {
-	            const delta = e.deltaY > 0 ? -25 : 25;
+	            const delta = Math.sign(e.deltaY) * Math.min(Math.abs(e.deltaY), MAX_DELTA_Y);
 	            const scrollTop = this.getScrollTop();
-	            this.setScrollTop(scrollTop + delta);
+	            this.setScrollTop(scrollTop - delta);
 	        }
 	    }
 	    startScroll(startPosition) {
@@ -4707,6 +4711,7 @@
 	exports.CenteredViewportCalculator = CenteredViewportCalculator;
 	exports.ClassicWheelControllerExtension = ClassicWheelControllerExtension;
 	exports.ComponentContext = ComponentContext;
+	exports.ComponentDom = ComponentDom;
 	exports.ControlBarApi = ControlBarApi;
 	exports.CustomActionController = CustomActionController;
 	exports.DefaultSequenceComponent = DefaultSequenceComponent;

package/lib/cjs/index.cjs CHANGED Viewed

@@ -1138,6 +1138,15 @@ class ValidationErrorBadgeExtension {
     }
 }
+class ComponentDom {
+    static stepG(componentClassName, type, id) {
+        return Dom.svg('g', {
+            class: `sqd-step-${componentClassName} sqd-type-${type}`,
+            'data-step-id': id
+        });
+    }
+}
 class InputView {
     static createRectInput(parent, x, y, size, iconSize, iconUrl) {
         const g = Dom.svg('g');
@@ -1343,43 +1352,6 @@ function drawLine(parent, x1, y1, x2, y2) {
     return line;
 }
-class RectPlaceholderView {
-    static create(parent, width, height, radius, iconSize, direction) {
-        const g = Dom.svg('g', {
-            visibility: 'hidden',
-            class: 'sqd-placeholder'
-        });
-        parent.appendChild(g);
-        const rect = Dom.svg('rect', {
-            class: 'sqd-placeholder-rect',
-            width,
-            height,
-            rx: radius,
-            ry: radius
-        });
-        g.appendChild(rect);
-        if (direction) {
-            const iconD = direction === exports.PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
-            const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
-            Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
-        }
-        parent.appendChild(g);
-        return new RectPlaceholderView(rect, g);
-    }
-    constructor(rect, g) {
-        this.rect = rect;
-        this.g = g;
-    }
-    setIsHover(isHover) {
-        Dom.toggleClass(this.g, isHover, 'sqd-hover');
-    }
-    setIsVisible(isVisible) {
-        Dom.attrs(this.g, {
-            visibility: isVisible ? 'visible' : 'hidden'
-        });
-    }
-}
 class DefaultSequenceComponentView {
     static create(parent, sequenceContext, componentContext) {
         const phWidth = componentContext.services.placeholder.gapSize.x;
@@ -1508,9 +1480,7 @@ class DefaultSequenceComponent {
 const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepContext, viewContext) => {
     const { step } = stepContext;
-    const g = Dom.svg('g', {
-        class: `sqd-step-container sqd-type-${step.type}`
-    });
+    const g = ComponentDom.stepG('container', step.type, step.id);
     parentElement.appendChild(g);
     const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, step.name, 'primary');
     const sequenceComponent = viewContext.createSequenceComponent(g, step.sequence);
@@ -1556,9 +1526,7 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
 const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
     const { step } = stepContext;
-    const g = Dom.svg('g', {
-        class: `sqd-step-switch sqd-type-${step.type}`
-    });
+    const g = ComponentDom.stepG('switch', step.type, step.id);
     parent.appendChild(g);
     const branchNames = Object.keys(step.branches);
     const branchComponents = branchNames.map(branchName => {
@@ -1659,9 +1627,7 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
 const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElement, stepContext, viewContext) => {
     const { step } = stepContext;
-    const g = Dom.svg('g', {
-        class: `sqd-step-task sqd-type-${step.type}`
-    });
+    const g = ComponentDom.stepG('task', step.type, step.id);
     parentElement.appendChild(g);
     const boxHeight = cfg.paddingY * 2 + cfg.iconSize;
     const text = Dom.svg('text', {
@@ -1784,7 +1750,7 @@ class NextQuantifiedNumber {
 }
 const SCALES = [0.06, 0.08, 0.1, 0.12, 0.16, 0.2, 0.26, 0.32, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
-const MAX_DELTA_Y = 16;
+const MAX_DELTA_Y$1 = 16;
 const quantifiedScale = new NextQuantifiedNumber(SCALES);
 class QuantifiedScaleViewportCalculator {
     static zoom(current, direction) {
@@ -1801,8 +1767,8 @@ class QuantifiedScaleViewportCalculator {
         const nextScale = quantifiedScale.next(current.scale, e.deltaY < 0);
         let scale;
         const absDeltaY = Math.abs(e.deltaY);
-        if (absDeltaY < MAX_DELTA_Y) {
-            const fraction = absDeltaY / MAX_DELTA_Y;
+        if (absDeltaY < MAX_DELTA_Y$1) {
+            const fraction = absDeltaY / MAX_DELTA_Y$1;
             const step = nextScale.next - nextScale.current;
             scale = current.scale + step * fraction;
         }
@@ -1941,6 +1907,43 @@ class StepExtensionResolver {
     }
 }
+class RectPlaceholderView {
+    static create(parent, width, height, radius, iconSize, direction) {
+        const g = Dom.svg('g', {
+            visibility: 'hidden',
+            class: 'sqd-placeholder'
+        });
+        parent.appendChild(g);
+        const rect = Dom.svg('rect', {
+            class: 'sqd-placeholder-rect',
+            width,
+            height,
+            rx: radius,
+            ry: radius
+        });
+        g.appendChild(rect);
+        if (direction) {
+            const iconD = direction === exports.PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
+            const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
+            Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
+        }
+        parent.appendChild(g);
+        return new RectPlaceholderView(rect, g);
+    }
+    constructor(rect, g) {
+        this.rect = rect;
+        this.g = g;
+    }
+    setIsHover(isHover) {
+        Dom.toggleClass(this.g, isHover, 'sqd-hover');
+    }
+    setIsVisible(isVisible) {
+        Dom.attrs(this.g, {
+            visibility: isVisible ? 'visible' : 'hidden'
+        });
+    }
+}
 class RectPlaceholder {
     static create(parent, size, direction, sequence, index, configuration) {
         const view = RectPlaceholderView.create(parent, size.x, size.y, configuration.radius, configuration.iconSize, direction);
@@ -3556,6 +3559,7 @@ class SmartEditorExtension {
     }
 }
+const MAX_DELTA_Y = 25;
 const listenerOptions = {
     passive: false
 };
@@ -3634,9 +3638,9 @@ class ScrollBoxView {
         e.preventDefault();
         e.stopPropagation();
         if (this.content) {
-            const delta = e.deltaY > 0 ? -25 : 25;
+            const delta = Math.sign(e.deltaY) * Math.min(Math.abs(e.deltaY), MAX_DELTA_Y);
             const scrollTop = this.getScrollTop();
-            this.setScrollTop(scrollTop + delta);
+            this.setScrollTop(scrollTop - delta);
         }
     }
     startScroll(startPosition) {
@@ -4522,6 +4526,7 @@ exports.Badges = Badges;
 exports.CenteredViewportCalculator = CenteredViewportCalculator;
 exports.ClassicWheelControllerExtension = ClassicWheelControllerExtension;
 exports.ComponentContext = ComponentContext;
+exports.ComponentDom = ComponentDom;
 exports.ControlBarApi = ControlBarApi;
 exports.CustomActionController = CustomActionController;
 exports.DefaultSequenceComponent = DefaultSequenceComponent;

package/lib/esm/index.js CHANGED Viewed

@@ -1137,6 +1137,15 @@ class ValidationErrorBadgeExtension {
     }
 }
+class ComponentDom {
+    static stepG(componentClassName, type, id) {
+        return Dom.svg('g', {
+            class: `sqd-step-${componentClassName} sqd-type-${type}`,
+            'data-step-id': id
+        });
+    }
+}
 class InputView {
     static createRectInput(parent, x, y, size, iconSize, iconUrl) {
         const g = Dom.svg('g');
@@ -1342,43 +1351,6 @@ function drawLine(parent, x1, y1, x2, y2) {
     return line;
 }
-class RectPlaceholderView {
-    static create(parent, width, height, radius, iconSize, direction) {
-        const g = Dom.svg('g', {
-            visibility: 'hidden',
-            class: 'sqd-placeholder'
-        });
-        parent.appendChild(g);
-        const rect = Dom.svg('rect', {
-            class: 'sqd-placeholder-rect',
-            width,
-            height,
-            rx: radius,
-            ry: radius
-        });
-        g.appendChild(rect);
-        if (direction) {
-            const iconD = direction === PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
-            const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
-            Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
-        }
-        parent.appendChild(g);
-        return new RectPlaceholderView(rect, g);
-    }
-    constructor(rect, g) {
-        this.rect = rect;
-        this.g = g;
-    }
-    setIsHover(isHover) {
-        Dom.toggleClass(this.g, isHover, 'sqd-hover');
-    }
-    setIsVisible(isVisible) {
-        Dom.attrs(this.g, {
-            visibility: isVisible ? 'visible' : 'hidden'
-        });
-    }
-}
 class DefaultSequenceComponentView {
     static create(parent, sequenceContext, componentContext) {
         const phWidth = componentContext.services.placeholder.gapSize.x;
@@ -1507,9 +1479,7 @@ class DefaultSequenceComponent {
 const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepContext, viewContext) => {
     const { step } = stepContext;
-    const g = Dom.svg('g', {
-        class: `sqd-step-container sqd-type-${step.type}`
-    });
+    const g = ComponentDom.stepG('container', step.type, step.id);
     parentElement.appendChild(g);
     const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, step.name, 'primary');
     const sequenceComponent = viewContext.createSequenceComponent(g, step.sequence);
@@ -1555,9 +1525,7 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
 const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
     const { step } = stepContext;
-    const g = Dom.svg('g', {
-        class: `sqd-step-switch sqd-type-${step.type}`
-    });
+    const g = ComponentDom.stepG('switch', step.type, step.id);
     parent.appendChild(g);
     const branchNames = Object.keys(step.branches);
     const branchComponents = branchNames.map(branchName => {
@@ -1658,9 +1626,7 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
 const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElement, stepContext, viewContext) => {
     const { step } = stepContext;
-    const g = Dom.svg('g', {
-        class: `sqd-step-task sqd-type-${step.type}`
-    });
+    const g = ComponentDom.stepG('task', step.type, step.id);
     parentElement.appendChild(g);
     const boxHeight = cfg.paddingY * 2 + cfg.iconSize;
     const text = Dom.svg('text', {
@@ -1783,7 +1749,7 @@ class NextQuantifiedNumber {
 }
 const SCALES = [0.06, 0.08, 0.1, 0.12, 0.16, 0.2, 0.26, 0.32, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
-const MAX_DELTA_Y = 16;
+const MAX_DELTA_Y$1 = 16;
 const quantifiedScale = new NextQuantifiedNumber(SCALES);
 class QuantifiedScaleViewportCalculator {
     static zoom(current, direction) {
@@ -1800,8 +1766,8 @@ class QuantifiedScaleViewportCalculator {
         const nextScale = quantifiedScale.next(current.scale, e.deltaY < 0);
         let scale;
         const absDeltaY = Math.abs(e.deltaY);
-        if (absDeltaY < MAX_DELTA_Y) {
-            const fraction = absDeltaY / MAX_DELTA_Y;
+        if (absDeltaY < MAX_DELTA_Y$1) {
+            const fraction = absDeltaY / MAX_DELTA_Y$1;
             const step = nextScale.next - nextScale.current;
             scale = current.scale + step * fraction;
         }
@@ -1940,6 +1906,43 @@ class StepExtensionResolver {
     }
 }
+class RectPlaceholderView {
+    static create(parent, width, height, radius, iconSize, direction) {
+        const g = Dom.svg('g', {
+            visibility: 'hidden',
+            class: 'sqd-placeholder'
+        });
+        parent.appendChild(g);
+        const rect = Dom.svg('rect', {
+            class: 'sqd-placeholder-rect',
+            width,
+            height,
+            rx: radius,
+            ry: radius
+        });
+        g.appendChild(rect);
+        if (direction) {
+            const iconD = direction === PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
+            const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
+            Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
+        }
+        parent.appendChild(g);
+        return new RectPlaceholderView(rect, g);
+    }
+    constructor(rect, g) {
+        this.rect = rect;
+        this.g = g;
+    }
+    setIsHover(isHover) {
+        Dom.toggleClass(this.g, isHover, 'sqd-hover');
+    }
+    setIsVisible(isVisible) {
+        Dom.attrs(this.g, {
+            visibility: isVisible ? 'visible' : 'hidden'
+        });
+    }
+}
 class RectPlaceholder {
     static create(parent, size, direction, sequence, index, configuration) {
         const view = RectPlaceholderView.create(parent, size.x, size.y, configuration.radius, configuration.iconSize, direction);
@@ -3555,6 +3558,7 @@ class SmartEditorExtension {
     }
 }
+const MAX_DELTA_Y = 25;
 const listenerOptions = {
     passive: false
 };
@@ -3633,9 +3637,9 @@ class ScrollBoxView {
         e.preventDefault();
         e.stopPropagation();
         if (this.content) {
-            const delta = e.deltaY > 0 ? -25 : 25;
+            const delta = Math.sign(e.deltaY) * Math.min(Math.abs(e.deltaY), MAX_DELTA_Y);
             const scrollTop = this.getScrollTop();
-            this.setScrollTop(scrollTop + delta);
+            this.setScrollTop(scrollTop - delta);
         }
     }
     startScroll(startPosition) {
@@ -4517,4 +4521,4 @@ class StepsDesignerExtension {
     }
 }
-export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ControlBarApi, CustomActionController, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderView, RegionView, ServicesResolver, SimpleEvent, StepComponent, StepExtensionResolver, StepsDesignerExtension, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
+export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ComponentDom, ControlBarApi, CustomActionController, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderView, RegionView, ServicesResolver, SimpleEvent, StepComponent, StepExtensionResolver, StepsDesignerExtension, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };

package/lib/index.d.ts CHANGED Viewed

@@ -509,6 +509,10 @@ declare class ValidationErrorBadgeExtension implements BadgeExtension {
     readonly createStartValue: () => boolean;
 }
+declare class ComponentDom {
+    static stepG(componentClassName: string, type: string, id: string): SVGGElement;
+}
 declare class InputView {
     private readonly root;
     static createRectInput(parent: SVGElement, x: number, y: number, size: number, iconSize: number, iconUrl: string | null): InputView;
@@ -555,15 +559,6 @@ declare class RegionView {
     setIsSelected(isSelected: boolean): void;
 }
-declare class RectPlaceholderView implements PlaceholderView {
-    readonly rect: SVGElement;
-    readonly g: SVGGElement;
-    static create(parent: SVGElement, width: number, height: number, radius: number, iconSize: number, direction: PlaceholderDirection): RectPlaceholderView;
-    private constructor();
-    setIsHover(isHover: boolean): void;
-    setIsVisible(isVisible: boolean): void;
-}
 declare class DefaultSequenceComponentView implements ComponentView {
     readonly g: SVGGElement;
     readonly width: number;
@@ -686,6 +681,15 @@ interface RectPlaceholderConfiguration {
     iconSize: number;
 }
+declare class RectPlaceholderView implements PlaceholderView {
+    readonly rect: SVGElement;
+    readonly g: SVGGElement;
+    static create(parent: SVGElement, width: number, height: number, radius: number, iconSize: number, direction: PlaceholderDirection): RectPlaceholderView;
+    private constructor();
+    setIsHover(isHover: boolean): void;
+    setIsVisible(isVisible: boolean): void;
+}
 declare class RectPlaceholder implements Placeholder {
     readonly view: RectPlaceholderView;
     readonly parentSequence: Sequence;
@@ -1210,4 +1214,4 @@ declare class StepsDesignerExtension implements DesignerExtension {
     protected constructor(steps: StepExtension<Step>[]);
 }
-export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, ControlBarApi, CustomAction, CustomActionController, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, Grid, GridExtension, Icons, InputView, JoinView, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StateModifierDependency, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
+export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentDom, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, ControlBarApi, CustomAction, CustomActionController, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, Grid, GridExtension, Icons, InputView, JoinView, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StateModifierDependency, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };

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