npm - sequential-workflow-designer - Versions diffs - 0.24.6 → 0.24.7 - Mend

sequential-workflow-designer 0.24.6 → 0.24.7

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

package/dist/index.umd.js CHANGED Viewed

@@ -1173,7 +1173,7 @@
 	    }
 	}
-	const defaultConfiguration$5 = {
+	const defaultConfiguration$6 = {
 	    view: {
 	        size: 22,
 	        iconSize: 12
@@ -1181,7 +1181,7 @@
 	};
 	class ValidationErrorBadgeExtension {
 	    static create(configuration) {
-	        return new ValidationErrorBadgeExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$5);
+	        return new ValidationErrorBadgeExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$6);
 	    }
 	    constructor(configuration) {
 	        this.configuration = configuration;
@@ -1481,6 +1481,122 @@
 	    }
 	}
+	class StartStopRootComponentView {
+	    static create(parent, sequence, parentPlaceIndicator, context, cfg) {
+	        const g = Dom.svg('g', {
+	            class: 'sqd-root-start-stop'
+	        });
+	        parent.appendChild(g);
+	        const sequenceComponent = DefaultSequenceComponent.create(g, {
+	            sequence,
+	            depth: 0,
+	            isInputConnected: true,
+	            isOutputConnected: true,
+	            isPreview: false
+	        }, context);
+	        const view = sequenceComponent.view;
+	        const x = view.joinX - cfg.size / 2;
+	        const endY = cfg.size + view.height;
+	        const iconSize = parentPlaceIndicator ? cfg.folderIconSize : cfg.defaultIconSize;
+	        const startCircle = createCircle(parentPlaceIndicator ? cfg.folderIconD : cfg.startIconD, cfg.size, iconSize);
+	        Dom.translate(startCircle, x, 0);
+	        g.appendChild(startCircle);
+	        Dom.translate(view.g, 0, cfg.size);
+	        const endCircle = createCircle(parentPlaceIndicator ? cfg.folderIconD : cfg.stopIconD, cfg.size, iconSize);
+	        Dom.translate(endCircle, x, endY);
+	        g.appendChild(endCircle);
+	        let startPlaceholder = null;
+	        let endPlaceholder = null;
+	        if (parentPlaceIndicator) {
+	            const size = new Vector(cfg.size, cfg.size);
+	            startPlaceholder = context.services.placeholder.createForArea(g, size, exports.PlaceholderDirection.out, parentPlaceIndicator.sequence, parentPlaceIndicator.index);
+	            endPlaceholder = context.services.placeholder.createForArea(g, size, exports.PlaceholderDirection.out, parentPlaceIndicator.sequence, parentPlaceIndicator.index);
+	            Dom.translate(startPlaceholder.view.g, x, 0);
+	            Dom.translate(endPlaceholder.view.g, x, endY);
+	        }
+	        const badges = Badges.createForRoot(g, new Vector(x + cfg.size, 0), context);
+	        return new StartStopRootComponentView(g, view.width, view.height + cfg.size * 2, view.joinX, sequenceComponent, startPlaceholder, endPlaceholder, badges);
+	    }
+	    constructor(g, width, height, joinX, component, startPlaceholder, endPlaceholder, badges) {
+	        this.g = g;
+	        this.width = width;
+	        this.height = height;
+	        this.joinX = joinX;
+	        this.component = component;
+	        this.startPlaceholder = startPlaceholder;
+	        this.endPlaceholder = endPlaceholder;
+	        this.badges = badges;
+	    }
+	    destroy() {
+	        var _a;
+	        (_a = this.g.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.g);
+	    }
+	}
+	function createCircle(d, size, iconSize) {
+	    const r = size / 2;
+	    const circle = Dom.svg('circle', {
+	        class: 'sqd-root-start-stop-circle',
+	        cx: r,
+	        cy: r,
+	        r: r
+	    });
+	    const g = Dom.svg('g');
+	    g.appendChild(circle);
+	    const offset = (size - iconSize) / 2;
+	    const icon = Icons.appendPath(g, 'sqd-root-start-stop-icon', d, iconSize);
+	    Dom.translate(icon, offset, offset);
+	    return g;
+	}
+	class StartStopRootComponent {
+	    static create(parentElement, sequence, parentPlaceIndicator, context, viewConfiguration) {
+	        const view = StartStopRootComponentView.create(parentElement, sequence, parentPlaceIndicator, context, viewConfiguration);
+	        return new StartStopRootComponent(view);
+	    }
+	    constructor(view) {
+	        this.view = view;
+	    }
+	    resolveClick(click) {
+	        return this.view.component.resolveClick(click);
+	    }
+	    findById(stepId) {
+	        return this.view.component.findById(stepId);
+	    }
+	    resolvePlaceholders(skipComponent, result) {
+	        this.view.component.resolvePlaceholders(skipComponent, result);
+	        if (this.view.startPlaceholder && this.view.endPlaceholder) {
+	            result.placeholders.push(this.view.startPlaceholder);
+	            result.placeholders.push(this.view.endPlaceholder);
+	        }
+	    }
+	    updateBadges(result) {
+	        this.view.badges.update(result);
+	        this.view.component.updateBadges(result);
+	    }
+	}
+	const defaultConfiguration$5 = {
+	    view: {
+	        size: 30,
+	        defaultIconSize: 22,
+	        folderIconSize: 18,
+	        startIconD: Icons.play,
+	        stopIconD: Icons.stop,
+	        folderIconD: Icons.folder
+	    }
+	};
+	class StartStopRootComponentExtension {
+	    static create(configuration) {
+	        return new StartStopRootComponentExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$5);
+	    }
+	    constructor(configuration) {
+	        this.configuration = configuration;
+	    }
+	    create(parentElement, sequence, parentPlaceIndicator, context) {
+	        return StartStopRootComponent.create(parentElement, sequence, parentPlaceIndicator, context, this.configuration.view);
+	    }
+	}
 	const COMPONENT_CLASS_NAME$2 = 'container';
 	const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepContext, viewContext) => {
 	    return viewContext.createRegionComponentView(parentElement, COMPONENT_CLASS_NAME$2, (g, regionViewBuilder) => {
@@ -4259,109 +4375,6 @@
 	    }
 	}
-	const SIZE = 30;
-	const DEFAULT_ICON_SIZE = 22;
-	const FOLDER_ICON_SIZE = 18;
-	class StartStopRootComponentView {
-	    static create(parent, sequence, parentPlaceIndicator, context) {
-	        const g = Dom.svg('g', {
-	            class: 'sqd-root-start-stop'
-	        });
-	        parent.appendChild(g);
-	        const sequenceComponent = DefaultSequenceComponent.create(g, {
-	            sequence,
-	            depth: 0,
-	            isInputConnected: true,
-	            isOutputConnected: true,
-	            isPreview: false
-	        }, context);
-	        const view = sequenceComponent.view;
-	        const x = view.joinX - SIZE / 2;
-	        const endY = SIZE + view.height;
-	        const iconSize = parentPlaceIndicator ? FOLDER_ICON_SIZE : DEFAULT_ICON_SIZE;
-	        const startCircle = createCircle(parentPlaceIndicator ? Icons.folder : Icons.play, iconSize);
-	        Dom.translate(startCircle, x, 0);
-	        g.appendChild(startCircle);
-	        Dom.translate(view.g, 0, SIZE);
-	        const endCircle = createCircle(parentPlaceIndicator ? Icons.folder : Icons.stop, iconSize);
-	        Dom.translate(endCircle, x, endY);
-	        g.appendChild(endCircle);
-	        let startPlaceholder = null;
-	        let endPlaceholder = null;
-	        if (parentPlaceIndicator) {
-	            const size = new Vector(SIZE, SIZE);
-	            startPlaceholder = context.services.placeholder.createForArea(g, size, exports.PlaceholderDirection.out, parentPlaceIndicator.sequence, parentPlaceIndicator.index);
-	            endPlaceholder = context.services.placeholder.createForArea(g, size, exports.PlaceholderDirection.out, parentPlaceIndicator.sequence, parentPlaceIndicator.index);
-	            Dom.translate(startPlaceholder.view.g, x, 0);
-	            Dom.translate(endPlaceholder.view.g, x, endY);
-	        }
-	        const badges = Badges.createForRoot(g, new Vector(x + SIZE, 0), context);
-	        return new StartStopRootComponentView(g, view.width, view.height + SIZE * 2, view.joinX, sequenceComponent, startPlaceholder, endPlaceholder, badges);
-	    }
-	    constructor(g, width, height, joinX, component, startPlaceholder, endPlaceholder, badges) {
-	        this.g = g;
-	        this.width = width;
-	        this.height = height;
-	        this.joinX = joinX;
-	        this.component = component;
-	        this.startPlaceholder = startPlaceholder;
-	        this.endPlaceholder = endPlaceholder;
-	        this.badges = badges;
-	    }
-	    destroy() {
-	        var _a;
-	        (_a = this.g.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.g);
-	    }
-	}
-	function createCircle(d, iconSize) {
-	    const r = SIZE / 2;
-	    const circle = Dom.svg('circle', {
-	        class: 'sqd-root-start-stop-circle',
-	        cx: r,
-	        cy: r,
-	        r: r
-	    });
-	    const g = Dom.svg('g');
-	    g.appendChild(circle);
-	    const offset = (SIZE - iconSize) / 2;
-	    const icon = Icons.appendPath(g, 'sqd-root-start-stop-icon', d, iconSize);
-	    Dom.translate(icon, offset, offset);
-	    return g;
-	}
-	class StartStopRootComponent {
-	    static create(parentElement, sequence, parentPlaceIndicator, context) {
-	        const view = StartStopRootComponentView.create(parentElement, sequence, parentPlaceIndicator, context);
-	        return new StartStopRootComponent(view);
-	    }
-	    constructor(view) {
-	        this.view = view;
-	    }
-	    resolveClick(click) {
-	        return this.view.component.resolveClick(click);
-	    }
-	    findById(stepId) {
-	        return this.view.component.findById(stepId);
-	    }
-	    resolvePlaceholders(skipComponent, result) {
-	        this.view.component.resolvePlaceholders(skipComponent, result);
-	        if (this.view.startPlaceholder && this.view.endPlaceholder) {
-	            result.placeholders.push(this.view.startPlaceholder);
-	            result.placeholders.push(this.view.endPlaceholder);
-	        }
-	    }
-	    updateBadges(result) {
-	        this.view.badges.update(result);
-	        this.view.component.updateBadges(result);
-	    }
-	}
-	class StartStopRootComponentExtension {
-	    constructor() {
-	        this.create = StartStopRootComponent.create;
-	    }
-	}
 	const defaultConfiguration$2 = {
 	    view: {
 	        minContainerWidth: 40,
@@ -4574,7 +4587,7 @@
 	        services.grid = LineGridExtension.create();
 	    }
 	    if (!services.rootComponent) {
-	        services.rootComponent = new StartStopRootComponentExtension();
+	        services.rootComponent = StartStopRootComponentExtension.create();
 	    }
 	    if (!services.sequenceComponent) {
 	        services.sequenceComponent = new DefaultSequenceComponentExtension();
@@ -4893,6 +4906,7 @@
 	exports.RectPlaceholderView = RectPlaceholderView;
 	exports.ServicesResolver = ServicesResolver;
 	exports.SimpleEvent = SimpleEvent;
+	exports.StartStopRootComponentExtension = StartStopRootComponentExtension;
 	exports.StepComponent = StepComponent;
 	exports.StepExtensionResolver = StepExtensionResolver;
 	exports.StepsDesignerExtension = StepsDesignerExtension;

package/lib/cjs/index.cjs CHANGED Viewed

@@ -1171,7 +1171,7 @@ class ValidationErrorBadge {
     }
 }
-const defaultConfiguration$5 = {
+const defaultConfiguration$6 = {
     view: {
         size: 22,
         iconSize: 12
@@ -1179,7 +1179,7 @@ const defaultConfiguration$5 = {
 };
 class ValidationErrorBadgeExtension {
     static create(configuration) {
-        return new ValidationErrorBadgeExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$5);
+        return new ValidationErrorBadgeExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$6);
     }
     constructor(configuration) {
         this.configuration = configuration;
@@ -1479,6 +1479,122 @@ class DefaultSequenceComponent {
     }
 }
+class StartStopRootComponentView {
+    static create(parent, sequence, parentPlaceIndicator, context, cfg) {
+        const g = Dom.svg('g', {
+            class: 'sqd-root-start-stop'
+        });
+        parent.appendChild(g);
+        const sequenceComponent = DefaultSequenceComponent.create(g, {
+            sequence,
+            depth: 0,
+            isInputConnected: true,
+            isOutputConnected: true,
+            isPreview: false
+        }, context);
+        const view = sequenceComponent.view;
+        const x = view.joinX - cfg.size / 2;
+        const endY = cfg.size + view.height;
+        const iconSize = parentPlaceIndicator ? cfg.folderIconSize : cfg.defaultIconSize;
+        const startCircle = createCircle(parentPlaceIndicator ? cfg.folderIconD : cfg.startIconD, cfg.size, iconSize);
+        Dom.translate(startCircle, x, 0);
+        g.appendChild(startCircle);
+        Dom.translate(view.g, 0, cfg.size);
+        const endCircle = createCircle(parentPlaceIndicator ? cfg.folderIconD : cfg.stopIconD, cfg.size, iconSize);
+        Dom.translate(endCircle, x, endY);
+        g.appendChild(endCircle);
+        let startPlaceholder = null;
+        let endPlaceholder = null;
+        if (parentPlaceIndicator) {
+            const size = new Vector(cfg.size, cfg.size);
+            startPlaceholder = context.services.placeholder.createForArea(g, size, exports.PlaceholderDirection.out, parentPlaceIndicator.sequence, parentPlaceIndicator.index);
+            endPlaceholder = context.services.placeholder.createForArea(g, size, exports.PlaceholderDirection.out, parentPlaceIndicator.sequence, parentPlaceIndicator.index);
+            Dom.translate(startPlaceholder.view.g, x, 0);
+            Dom.translate(endPlaceholder.view.g, x, endY);
+        }
+        const badges = Badges.createForRoot(g, new Vector(x + cfg.size, 0), context);
+        return new StartStopRootComponentView(g, view.width, view.height + cfg.size * 2, view.joinX, sequenceComponent, startPlaceholder, endPlaceholder, badges);
+    }
+    constructor(g, width, height, joinX, component, startPlaceholder, endPlaceholder, badges) {
+        this.g = g;
+        this.width = width;
+        this.height = height;
+        this.joinX = joinX;
+        this.component = component;
+        this.startPlaceholder = startPlaceholder;
+        this.endPlaceholder = endPlaceholder;
+        this.badges = badges;
+    }
+    destroy() {
+        var _a;
+        (_a = this.g.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.g);
+    }
+}
+function createCircle(d, size, iconSize) {
+    const r = size / 2;
+    const circle = Dom.svg('circle', {
+        class: 'sqd-root-start-stop-circle',
+        cx: r,
+        cy: r,
+        r: r
+    });
+    const g = Dom.svg('g');
+    g.appendChild(circle);
+    const offset = (size - iconSize) / 2;
+    const icon = Icons.appendPath(g, 'sqd-root-start-stop-icon', d, iconSize);
+    Dom.translate(icon, offset, offset);
+    return g;
+}
+class StartStopRootComponent {
+    static create(parentElement, sequence, parentPlaceIndicator, context, viewConfiguration) {
+        const view = StartStopRootComponentView.create(parentElement, sequence, parentPlaceIndicator, context, viewConfiguration);
+        return new StartStopRootComponent(view);
+    }
+    constructor(view) {
+        this.view = view;
+    }
+    resolveClick(click) {
+        return this.view.component.resolveClick(click);
+    }
+    findById(stepId) {
+        return this.view.component.findById(stepId);
+    }
+    resolvePlaceholders(skipComponent, result) {
+        this.view.component.resolvePlaceholders(skipComponent, result);
+        if (this.view.startPlaceholder && this.view.endPlaceholder) {
+            result.placeholders.push(this.view.startPlaceholder);
+            result.placeholders.push(this.view.endPlaceholder);
+        }
+    }
+    updateBadges(result) {
+        this.view.badges.update(result);
+        this.view.component.updateBadges(result);
+    }
+}
+const defaultConfiguration$5 = {
+    view: {
+        size: 30,
+        defaultIconSize: 22,
+        folderIconSize: 18,
+        startIconD: Icons.play,
+        stopIconD: Icons.stop,
+        folderIconD: Icons.folder
+    }
+};
+class StartStopRootComponentExtension {
+    static create(configuration) {
+        return new StartStopRootComponentExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$5);
+    }
+    constructor(configuration) {
+        this.configuration = configuration;
+    }
+    create(parentElement, sequence, parentPlaceIndicator, context) {
+        return StartStopRootComponent.create(parentElement, sequence, parentPlaceIndicator, context, this.configuration.view);
+    }
+}
 const COMPONENT_CLASS_NAME$2 = 'container';
 const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepContext, viewContext) => {
     return viewContext.createRegionComponentView(parentElement, COMPONENT_CLASS_NAME$2, (g, regionViewBuilder) => {
@@ -4074,109 +4190,6 @@ class RectPlaceholderExtension {
     }
 }
-const SIZE = 30;
-const DEFAULT_ICON_SIZE = 22;
-const FOLDER_ICON_SIZE = 18;
-class StartStopRootComponentView {
-    static create(parent, sequence, parentPlaceIndicator, context) {
-        const g = Dom.svg('g', {
-            class: 'sqd-root-start-stop'
-        });
-        parent.appendChild(g);
-        const sequenceComponent = DefaultSequenceComponent.create(g, {
-            sequence,
-            depth: 0,
-            isInputConnected: true,
-            isOutputConnected: true,
-            isPreview: false
-        }, context);
-        const view = sequenceComponent.view;
-        const x = view.joinX - SIZE / 2;
-        const endY = SIZE + view.height;
-        const iconSize = parentPlaceIndicator ? FOLDER_ICON_SIZE : DEFAULT_ICON_SIZE;
-        const startCircle = createCircle(parentPlaceIndicator ? Icons.folder : Icons.play, iconSize);
-        Dom.translate(startCircle, x, 0);
-        g.appendChild(startCircle);
-        Dom.translate(view.g, 0, SIZE);
-        const endCircle = createCircle(parentPlaceIndicator ? Icons.folder : Icons.stop, iconSize);
-        Dom.translate(endCircle, x, endY);
-        g.appendChild(endCircle);
-        let startPlaceholder = null;
-        let endPlaceholder = null;
-        if (parentPlaceIndicator) {
-            const size = new Vector(SIZE, SIZE);
-            startPlaceholder = context.services.placeholder.createForArea(g, size, exports.PlaceholderDirection.out, parentPlaceIndicator.sequence, parentPlaceIndicator.index);
-            endPlaceholder = context.services.placeholder.createForArea(g, size, exports.PlaceholderDirection.out, parentPlaceIndicator.sequence, parentPlaceIndicator.index);
-            Dom.translate(startPlaceholder.view.g, x, 0);
-            Dom.translate(endPlaceholder.view.g, x, endY);
-        }
-        const badges = Badges.createForRoot(g, new Vector(x + SIZE, 0), context);
-        return new StartStopRootComponentView(g, view.width, view.height + SIZE * 2, view.joinX, sequenceComponent, startPlaceholder, endPlaceholder, badges);
-    }
-    constructor(g, width, height, joinX, component, startPlaceholder, endPlaceholder, badges) {
-        this.g = g;
-        this.width = width;
-        this.height = height;
-        this.joinX = joinX;
-        this.component = component;
-        this.startPlaceholder = startPlaceholder;
-        this.endPlaceholder = endPlaceholder;
-        this.badges = badges;
-    }
-    destroy() {
-        var _a;
-        (_a = this.g.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.g);
-    }
-}
-function createCircle(d, iconSize) {
-    const r = SIZE / 2;
-    const circle = Dom.svg('circle', {
-        class: 'sqd-root-start-stop-circle',
-        cx: r,
-        cy: r,
-        r: r
-    });
-    const g = Dom.svg('g');
-    g.appendChild(circle);
-    const offset = (SIZE - iconSize) / 2;
-    const icon = Icons.appendPath(g, 'sqd-root-start-stop-icon', d, iconSize);
-    Dom.translate(icon, offset, offset);
-    return g;
-}
-class StartStopRootComponent {
-    static create(parentElement, sequence, parentPlaceIndicator, context) {
-        const view = StartStopRootComponentView.create(parentElement, sequence, parentPlaceIndicator, context);
-        return new StartStopRootComponent(view);
-    }
-    constructor(view) {
-        this.view = view;
-    }
-    resolveClick(click) {
-        return this.view.component.resolveClick(click);
-    }
-    findById(stepId) {
-        return this.view.component.findById(stepId);
-    }
-    resolvePlaceholders(skipComponent, result) {
-        this.view.component.resolvePlaceholders(skipComponent, result);
-        if (this.view.startPlaceholder && this.view.endPlaceholder) {
-            result.placeholders.push(this.view.startPlaceholder);
-            result.placeholders.push(this.view.endPlaceholder);
-        }
-    }
-    updateBadges(result) {
-        this.view.badges.update(result);
-        this.view.component.updateBadges(result);
-    }
-}
-class StartStopRootComponentExtension {
-    constructor() {
-        this.create = StartStopRootComponent.create;
-    }
-}
 const defaultConfiguration$2 = {
     view: {
         minContainerWidth: 40,
@@ -4389,7 +4402,7 @@ function setDefaults(services, configuration) {
         services.grid = LineGridExtension.create();
     }
     if (!services.rootComponent) {
-        services.rootComponent = new StartStopRootComponentExtension();
+        services.rootComponent = StartStopRootComponentExtension.create();
     }
     if (!services.sequenceComponent) {
         services.sequenceComponent = new DefaultSequenceComponentExtension();
@@ -4707,6 +4720,7 @@ exports.RectPlaceholder = RectPlaceholder;
 exports.RectPlaceholderView = RectPlaceholderView;
 exports.ServicesResolver = ServicesResolver;
 exports.SimpleEvent = SimpleEvent;
+exports.StartStopRootComponentExtension = StartStopRootComponentExtension;
 exports.StepComponent = StepComponent;
 exports.StepExtensionResolver = StepExtensionResolver;
 exports.StepsDesignerExtension = StepsDesignerExtension;

package/lib/esm/index.js CHANGED Viewed

@@ -1170,7 +1170,7 @@ class ValidationErrorBadge {
     }
 }
-const defaultConfiguration$5 = {
+const defaultConfiguration$6 = {
     view: {
         size: 22,
         iconSize: 12
@@ -1178,7 +1178,7 @@ const defaultConfiguration$5 = {
 };
 class ValidationErrorBadgeExtension {
     static create(configuration) {
-        return new ValidationErrorBadgeExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$5);
+        return new ValidationErrorBadgeExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$6);
     }
     constructor(configuration) {
         this.configuration = configuration;
@@ -1478,6 +1478,122 @@ class DefaultSequenceComponent {
     }
 }
+class StartStopRootComponentView {
+    static create(parent, sequence, parentPlaceIndicator, context, cfg) {
+        const g = Dom.svg('g', {
+            class: 'sqd-root-start-stop'
+        });
+        parent.appendChild(g);
+        const sequenceComponent = DefaultSequenceComponent.create(g, {
+            sequence,
+            depth: 0,
+            isInputConnected: true,
+            isOutputConnected: true,
+            isPreview: false
+        }, context);
+        const view = sequenceComponent.view;
+        const x = view.joinX - cfg.size / 2;
+        const endY = cfg.size + view.height;
+        const iconSize = parentPlaceIndicator ? cfg.folderIconSize : cfg.defaultIconSize;
+        const startCircle = createCircle(parentPlaceIndicator ? cfg.folderIconD : cfg.startIconD, cfg.size, iconSize);
+        Dom.translate(startCircle, x, 0);
+        g.appendChild(startCircle);
+        Dom.translate(view.g, 0, cfg.size);
+        const endCircle = createCircle(parentPlaceIndicator ? cfg.folderIconD : cfg.stopIconD, cfg.size, iconSize);
+        Dom.translate(endCircle, x, endY);
+        g.appendChild(endCircle);
+        let startPlaceholder = null;
+        let endPlaceholder = null;
+        if (parentPlaceIndicator) {
+            const size = new Vector(cfg.size, cfg.size);
+            startPlaceholder = context.services.placeholder.createForArea(g, size, PlaceholderDirection.out, parentPlaceIndicator.sequence, parentPlaceIndicator.index);
+            endPlaceholder = context.services.placeholder.createForArea(g, size, PlaceholderDirection.out, parentPlaceIndicator.sequence, parentPlaceIndicator.index);
+            Dom.translate(startPlaceholder.view.g, x, 0);
+            Dom.translate(endPlaceholder.view.g, x, endY);
+        }
+        const badges = Badges.createForRoot(g, new Vector(x + cfg.size, 0), context);
+        return new StartStopRootComponentView(g, view.width, view.height + cfg.size * 2, view.joinX, sequenceComponent, startPlaceholder, endPlaceholder, badges);
+    }
+    constructor(g, width, height, joinX, component, startPlaceholder, endPlaceholder, badges) {
+        this.g = g;
+        this.width = width;
+        this.height = height;
+        this.joinX = joinX;
+        this.component = component;
+        this.startPlaceholder = startPlaceholder;
+        this.endPlaceholder = endPlaceholder;
+        this.badges = badges;
+    }
+    destroy() {
+        var _a;
+        (_a = this.g.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.g);
+    }
+}
+function createCircle(d, size, iconSize) {
+    const r = size / 2;
+    const circle = Dom.svg('circle', {
+        class: 'sqd-root-start-stop-circle',
+        cx: r,
+        cy: r,
+        r: r
+    });
+    const g = Dom.svg('g');
+    g.appendChild(circle);
+    const offset = (size - iconSize) / 2;
+    const icon = Icons.appendPath(g, 'sqd-root-start-stop-icon', d, iconSize);
+    Dom.translate(icon, offset, offset);
+    return g;
+}
+class StartStopRootComponent {
+    static create(parentElement, sequence, parentPlaceIndicator, context, viewConfiguration) {
+        const view = StartStopRootComponentView.create(parentElement, sequence, parentPlaceIndicator, context, viewConfiguration);
+        return new StartStopRootComponent(view);
+    }
+    constructor(view) {
+        this.view = view;
+    }
+    resolveClick(click) {
+        return this.view.component.resolveClick(click);
+    }
+    findById(stepId) {
+        return this.view.component.findById(stepId);
+    }
+    resolvePlaceholders(skipComponent, result) {
+        this.view.component.resolvePlaceholders(skipComponent, result);
+        if (this.view.startPlaceholder && this.view.endPlaceholder) {
+            result.placeholders.push(this.view.startPlaceholder);
+            result.placeholders.push(this.view.endPlaceholder);
+        }
+    }
+    updateBadges(result) {
+        this.view.badges.update(result);
+        this.view.component.updateBadges(result);
+    }
+}
+const defaultConfiguration$5 = {
+    view: {
+        size: 30,
+        defaultIconSize: 22,
+        folderIconSize: 18,
+        startIconD: Icons.play,
+        stopIconD: Icons.stop,
+        folderIconD: Icons.folder
+    }
+};
+class StartStopRootComponentExtension {
+    static create(configuration) {
+        return new StartStopRootComponentExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$5);
+    }
+    constructor(configuration) {
+        this.configuration = configuration;
+    }
+    create(parentElement, sequence, parentPlaceIndicator, context) {
+        return StartStopRootComponent.create(parentElement, sequence, parentPlaceIndicator, context, this.configuration.view);
+    }
+}
 const COMPONENT_CLASS_NAME$2 = 'container';
 const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepContext, viewContext) => {
     return viewContext.createRegionComponentView(parentElement, COMPONENT_CLASS_NAME$2, (g, regionViewBuilder) => {
@@ -4073,109 +4189,6 @@ class RectPlaceholderExtension {
     }
 }
-const SIZE = 30;
-const DEFAULT_ICON_SIZE = 22;
-const FOLDER_ICON_SIZE = 18;
-class StartStopRootComponentView {
-    static create(parent, sequence, parentPlaceIndicator, context) {
-        const g = Dom.svg('g', {
-            class: 'sqd-root-start-stop'
-        });
-        parent.appendChild(g);
-        const sequenceComponent = DefaultSequenceComponent.create(g, {
-            sequence,
-            depth: 0,
-            isInputConnected: true,
-            isOutputConnected: true,
-            isPreview: false
-        }, context);
-        const view = sequenceComponent.view;
-        const x = view.joinX - SIZE / 2;
-        const endY = SIZE + view.height;
-        const iconSize = parentPlaceIndicator ? FOLDER_ICON_SIZE : DEFAULT_ICON_SIZE;
-        const startCircle = createCircle(parentPlaceIndicator ? Icons.folder : Icons.play, iconSize);
-        Dom.translate(startCircle, x, 0);
-        g.appendChild(startCircle);
-        Dom.translate(view.g, 0, SIZE);
-        const endCircle = createCircle(parentPlaceIndicator ? Icons.folder : Icons.stop, iconSize);
-        Dom.translate(endCircle, x, endY);
-        g.appendChild(endCircle);
-        let startPlaceholder = null;
-        let endPlaceholder = null;
-        if (parentPlaceIndicator) {
-            const size = new Vector(SIZE, SIZE);
-            startPlaceholder = context.services.placeholder.createForArea(g, size, PlaceholderDirection.out, parentPlaceIndicator.sequence, parentPlaceIndicator.index);
-            endPlaceholder = context.services.placeholder.createForArea(g, size, PlaceholderDirection.out, parentPlaceIndicator.sequence, parentPlaceIndicator.index);
-            Dom.translate(startPlaceholder.view.g, x, 0);
-            Dom.translate(endPlaceholder.view.g, x, endY);
-        }
-        const badges = Badges.createForRoot(g, new Vector(x + SIZE, 0), context);
-        return new StartStopRootComponentView(g, view.width, view.height + SIZE * 2, view.joinX, sequenceComponent, startPlaceholder, endPlaceholder, badges);
-    }
-    constructor(g, width, height, joinX, component, startPlaceholder, endPlaceholder, badges) {
-        this.g = g;
-        this.width = width;
-        this.height = height;
-        this.joinX = joinX;
-        this.component = component;
-        this.startPlaceholder = startPlaceholder;
-        this.endPlaceholder = endPlaceholder;
-        this.badges = badges;
-    }
-    destroy() {
-        var _a;
-        (_a = this.g.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.g);
-    }
-}
-function createCircle(d, iconSize) {
-    const r = SIZE / 2;
-    const circle = Dom.svg('circle', {
-        class: 'sqd-root-start-stop-circle',
-        cx: r,
-        cy: r,
-        r: r
-    });
-    const g = Dom.svg('g');
-    g.appendChild(circle);
-    const offset = (SIZE - iconSize) / 2;
-    const icon = Icons.appendPath(g, 'sqd-root-start-stop-icon', d, iconSize);
-    Dom.translate(icon, offset, offset);
-    return g;
-}
-class StartStopRootComponent {
-    static create(parentElement, sequence, parentPlaceIndicator, context) {
-        const view = StartStopRootComponentView.create(parentElement, sequence, parentPlaceIndicator, context);
-        return new StartStopRootComponent(view);
-    }
-    constructor(view) {
-        this.view = view;
-    }
-    resolveClick(click) {
-        return this.view.component.resolveClick(click);
-    }
-    findById(stepId) {
-        return this.view.component.findById(stepId);
-    }
-    resolvePlaceholders(skipComponent, result) {
-        this.view.component.resolvePlaceholders(skipComponent, result);
-        if (this.view.startPlaceholder && this.view.endPlaceholder) {
-            result.placeholders.push(this.view.startPlaceholder);
-            result.placeholders.push(this.view.endPlaceholder);
-        }
-    }
-    updateBadges(result) {
-        this.view.badges.update(result);
-        this.view.component.updateBadges(result);
-    }
-}
-class StartStopRootComponentExtension {
-    constructor() {
-        this.create = StartStopRootComponent.create;
-    }
-}
 const defaultConfiguration$2 = {
     view: {
         minContainerWidth: 40,
@@ -4388,7 +4401,7 @@ function setDefaults(services, configuration) {
         services.grid = LineGridExtension.create();
     }
     if (!services.rootComponent) {
-        services.rootComponent = new StartStopRootComponentExtension();
+        services.rootComponent = StartStopRootComponentExtension.create();
     }
     if (!services.sequenceComponent) {
         services.sequenceComponent = new DefaultSequenceComponentExtension();
@@ -4673,4 +4686,4 @@ class StepsDesignerExtension {
     }
 }
-export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ComponentDom, ControlBarApi, CustomActionController, DefaultRegionComponentViewExtension, DefaultRegionView, 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, ServicesResolver, SimpleEvent, StepComponent, StepExtensionResolver, StepsDesignerExtension, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
+export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ComponentDom, ControlBarApi, CustomActionController, DefaultRegionComponentViewExtension, DefaultRegionView, 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, ServicesResolver, SimpleEvent, StartStopRootComponentExtension, StepComponent, StepExtensionResolver, StepsDesignerExtension, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };

package/lib/index.d.ts CHANGED Viewed

@@ -589,6 +589,26 @@ declare class DefaultSequenceComponent implements SequenceComponent {
     updateBadges(result: BadgesResult): void;
 }
+interface StartStopRootComponentViewConfiguration {
+    size: number;
+    defaultIconSize: number;
+    folderIconSize: number;
+    folderIconD: string;
+    startIconD: string;
+    stopIconD: string;
+}
+interface StartStopRootComponentExtensionConfiguration {
+    view: StartStopRootComponentViewConfiguration;
+}
+declare class StartStopRootComponentExtension implements RootComponentExtension {
+    private readonly configuration;
+    static create(configuration?: StartStopRootComponentExtensionConfiguration): StartStopRootComponentExtension;
+    private constructor();
+    create(parentElement: SVGElement, sequence: Sequence, parentPlaceIndicator: SequencePlaceIndicator | null, context: ComponentContext): Component;
+}
 interface ContainerStepComponentViewConfiguration {
     paddingTop: number;
     paddingX: number;
@@ -1282,4 +1302,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, ComponentDom, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, ControlBarApi, CustomAction, CustomActionController, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultRegionComponentViewExtension, DefaultRegionView, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, FoundPlaceholders, Grid, GridExtension, I18n, Icons, InputView, JoinView, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, PreferenceStorage, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionComponentViewContentFactory, RegionComponentViewExtension, RegionView, RegionViewFactory, 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, DefaultRegionComponentViewExtension, DefaultRegionView, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, FoundPlaceholders, Grid, GridExtension, I18n, Icons, InputView, JoinView, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, PreferenceStorage, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionComponentViewContentFactory, RegionComponentViewExtension, RegionView, RegionViewFactory, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StartStopRootComponentExtension, StartStopRootComponentExtensionConfiguration, StartStopRootComponentViewConfiguration, 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.24.6",
+	"version": "0.24.7",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",