npm - sequential-workflow-designer - Versions diffs - 0.15.4 → 0.16.1 - Mend

sequential-workflow-designer 0.15.4 → 0.16.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 (9) hide show

package/README.md CHANGED Viewed

@@ -4,9 +4,6 @@
 [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fb4rtaz%2Fsequential-workflow-designer%2Fbadge%3Fref%3Dmain&style=flat-square)](https://actions-badge.atrox.dev/b4rtaz/sequential-workflow-designer/goto?ref=main) [![License: MIT](https://img.shields.io/badge/license-MIT-green?style=flat-square)](/LICENSE) [![View this project on NPM](https://img.shields.io/npm/v/sequential-workflow-designer.svg?style=flat-square)](https://npmjs.org/package/sequential-workflow-designer)
-> 🚨 **Have you noticed the "package not found" error?** 🚨<br />
-> Check [this comment](https://github.com/nocode-js/sequential-workflow-designer/issues/82#issuecomment-1712958636) for instructions on how to resolve the problem.
 Sequential workflow designer with 0 external dependencies for web applications. It's written in pure TypeScript and uses SVG for rendering. This designer is not associated with any workflow engine. It's full generic. You may create any kind application by this, from graphical programming languages to workflow builders.
 Features:
@@ -98,10 +95,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.15.4/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.4/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.4/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.4/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.1/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.1/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.1/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.1/dist/index.umd.js"></script>
 ```
 Call the designer by:

package/css/designer-dark.css CHANGED Viewed

@@ -193,6 +193,7 @@
 }
 .sqd-theme-dark .sqd-step-container > .sqd-label > .sqd-label-rect {
   fill: #2411db;
+  stroke-width: 0;
 }
 .sqd-theme-dark .sqd-step-container > g > .sqd-input {
   fill: #c6c6c6;

package/css/designer-light.css CHANGED Viewed

@@ -193,6 +193,7 @@
 }
 .sqd-theme-light .sqd-step-container > .sqd-label > .sqd-label-rect {
   fill: #2411db;
+  stroke-width: 0;
 }
 .sqd-theme-light .sqd-step-container > g > .sqd-input {
   fill: #fff;

package/dist/index.umd.js CHANGED Viewed

@@ -614,12 +614,11 @@
 	}
 	class ToolboxApi {
-	    constructor(state, designerContext, behaviorController, iconProvider, configuration, uidGenerator) {
+	    constructor(state, designerContext, behaviorController, toolboxDataProvider, uidGenerator) {
 	        this.state = state;
 	        this.designerContext = designerContext;
 	        this.behaviorController = behaviorController;
-	        this.iconProvider = iconProvider;
-	        this.configuration = configuration;
+	        this.toolboxDataProvider = toolboxDataProvider;
 	        this.uidGenerator = uidGenerator;
 	    }
 	    isCollapsed() {
@@ -631,24 +630,11 @@
 	    subscribeIsCollapsed(listener) {
 	        this.state.onIsToolboxCollapsedChanged.subscribe(listener);
 	    }
-	    tryGetIconUrl(step) {
-	        return this.iconProvider.getIconUrl(step);
-	    }
-	    getLabel(step) {
-	        const labelProvider = this.getConfiguration().labelProvider;
-	        return labelProvider ? labelProvider(step) : step.name;
+	    getAllGroups() {
+	        return this.toolboxDataProvider.getAllGroups();
 	    }
-	    filterGroups(filter) {
-	        return this.getConfiguration()
-	            .groups.map(group => {
-	            return {
-	                name: group.name,
-	                steps: group.steps.filter(s => {
-	                    return filter ? s.name.toLowerCase().includes(filter) : true;
-	                })
-	            };
-	        })
-	            .filter(group => group.steps.length > 0);
+	    applyFilter(allGroups, filter) {
+	        return this.toolboxDataProvider.applyFilter(allGroups, filter);
 	    }
 	    /**
 	     * @param position Mouse or touch position.
@@ -668,11 +654,62 @@
 	        newStep.id = this.uidGenerator ? this.uidGenerator() : Uid.next();
 	        return newStep;
 	    }
-	    getConfiguration() {
+	}
+	const regexp = /^[a-zA-Z][a-zA-Z0-9_-]+$/;
+	class StepTypeValidator {
+	    static validate(type) {
+	        if (!regexp.test(type)) {
+	            throw new Error(`Step type "${type}" contains not allowed characters`);
+	        }
+	    }
+	}
+	class ToolboxDataProvider {
+	    constructor(iconProvider, configuration) {
+	        this.iconProvider = iconProvider;
+	        this.configuration = configuration;
+	        this.createItemData = (step) => {
+	            StepTypeValidator.validate(step.type);
+	            const iconUrl = this.iconProvider.getIconUrl(step);
+	            const label = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
+	            const description = this.configuration && this.configuration.descriptionProvider ? this.configuration.descriptionProvider(step) : label;
+	            const lowerCaseLabel = label.toLowerCase();
+	            return {
+	                iconUrl,
+	                label,
+	                description,
+	                lowerCaseLabel,
+	                step
+	            };
+	        };
+	    }
+	    getAllGroups() {
 	        if (!this.configuration) {
-	            throw new Error('Toolbox is disabled');
+	            return [];
 	        }
-	        return this.configuration;
+	        return this.configuration.groups.map(group => {
+	            return {
+	                name: group.name,
+	                items: group.steps.map(this.createItemData)
+	            };
+	        });
+	    }
+	    applyFilter(allGroups, filter) {
+	        if (!filter) {
+	            return allGroups;
+	        }
+	        const lowerCaseFilter = filter.toLowerCase();
+	        return allGroups
+	            .map(group => {
+	            return {
+	                name: group.name,
+	                items: group.items.filter(s => {
+	                    return s.lowerCaseLabel.includes(lowerCaseFilter);
+	                })
+	            };
+	        })
+	            .filter(group => group.items.length > 0);
 	    }
 	}
@@ -731,7 +768,8 @@
 	        const workspace = new WorkspaceApi(context.state, context.workspaceController);
 	        const viewportController = context.services.viewportController.create(workspace);
 	        const viewport = new ViewportApi(context.workspaceController, viewportController);
-	        return new DesignerApi(new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, context.componentContext.iconProvider, context.configuration.toolbox, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
+	        const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
+	        return new DesignerApi(new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
 	    }
 	    constructor(controlBar, toolbox, editor, workspace, viewport, pathBar) {
 	        this.controlBar = controlBar;
@@ -2668,8 +2706,8 @@
 	}
 	class SelectStepBehavior {
-	    static create(pressedStepComponent, forceDisableDrag, context) {
-	        const isDragDisabled = forceDisableDrag ||
+	    static create(pressedStepComponent, isMiddleButton, context) {
+	        const isDragDisabled = isMiddleButton ||
 	            context.state.isDragDisabled ||
 	            !context.definitionModifier.isDraggable(pressedStepComponent.step, pressedStepComponent.parentSequence);
 	        return new SelectStepBehavior(pressedStepComponent, isDragDisabled, context, context.state);
@@ -2779,13 +2817,13 @@
 	        this.designerContext = designerContext;
 	        this.state = state;
 	    }
-	    resolve(commandOrNull, element, forceDisableDrag) {
+	    resolve(commandOrNull, element, isMiddleButton) {
 	        if (!commandOrNull) {
-	            return MoveViewportBehavior.create(this.state, true);
+	            return MoveViewportBehavior.create(this.state, !isMiddleButton);
 	        }
 	        switch (commandOrNull.type) {
 	            case exports.ClickCommandType.selectStep:
-	                return SelectStepBehavior.create(commandOrNull.component, forceDisableDrag, this.designerContext);
+	                return SelectStepBehavior.create(commandOrNull.component, isMiddleButton, this.designerContext);
 	            case exports.ClickCommandType.rerenderStep:
 	                return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.designerContext));
 	            case exports.ClickCommandType.openFolder:
@@ -3078,8 +3116,7 @@
 	        const isMiddleButton = buttonIndex === 1;
 	        if (isPrimaryButton || isMiddleButton) {
 	            const commandOrNull = this.resolveClick(target, position);
-	            const forceDisableDrag = isMiddleButton;
-	            const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, forceDisableDrag);
+	            const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, isMiddleButton);
 	            this.behaviorController.start(position, behavior);
 	        }
 	    }
@@ -3638,30 +3675,19 @@
 	    }
 	}
-	const regexp = /^[a-zA-Z][a-zA-Z0-9_-]+$/;
-	class StepTypeValidator {
-	    static validate(type) {
-	        if (!regexp.test(type)) {
-	            throw new Error(`Step type "${type}" contains not allowed characters`);
-	        }
-	    }
-	}
 	class ToolboxItemView {
-	    static create(parent, step, api) {
-	        const label = api.getLabel(step);
+	    static create(parent, data) {
 	        const root = Dom.element('div', {
-	            class: `sqd-toolbox-item sqd-type-${step.type}`,
-	            title: label
+	            class: `sqd-toolbox-item sqd-type-${data.step.type}`,
+	            title: data.description
 	        });
-	        const iconUrl = api.tryGetIconUrl(step);
 	        const icon = Dom.element('div', {
 	            class: 'sqd-toolbox-item-icon'
 	        });
-	        if (iconUrl) {
+	        if (data.iconUrl) {
 	            const iconImage = Dom.element('img', {
 	                class: 'sqd-toolbox-item-icon-image',
-	                src: iconUrl
+	                src: data.iconUrl
 	            });
 	            icon.appendChild(iconImage);
 	        }
@@ -3671,7 +3697,7 @@
 	        const text = Dom.element('div', {
 	            class: 'sqd-toolbox-item-text'
 	        });
-	        text.textContent = label;
+	        text.textContent = data.label;
 	        root.appendChild(icon);
 	        root.appendChild(text);
 	        parent.appendChild(root);
@@ -3692,10 +3718,9 @@
 	}
 	class ToolboxItem {
-	    static create(parent, step, api) {
-	        StepTypeValidator.validate(step.type);
-	        const view = ToolboxItemView.create(parent, step, api);
-	        const item = new ToolboxItem(step, api);
+	    static create(parent, data, api) {
+	        const view = ToolboxItemView.create(parent, data);
+	        const item = new ToolboxItem(data.step, api);
 	        view.bindMousedown(e => item.onMousedown(e));
 	        view.bindTouchstart(e => item.onTouchstart(e));
 	        view.bindContextMenu(e => item.onContextMenu(e));
@@ -3795,7 +3820,7 @@
 	            });
 	            groupTitle.innerText = group.name;
 	            list.appendChild(groupTitle);
-	            group.steps.forEach(s => ToolboxItem.create(list, s, this.api));
+	            group.items.forEach(item => ToolboxItem.create(list, item, this.api));
 	        });
 	        this.scrollBoxView.setContent(list);
 	    }
@@ -3806,8 +3831,9 @@
 	class Toolbox {
 	    static create(root, api) {
+	        const allGroups = api.getAllGroups();
 	        const view = ToolboxView.create(root, api);
-	        const toolbox = new Toolbox(view, api);
+	        const toolbox = new Toolbox(view, api, allGroups);
 	        toolbox.render();
 	        toolbox.onIsCollapsedChanged();
 	        view.bindToggleClick(() => toolbox.onToggleClicked());
@@ -3815,15 +3841,16 @@
 	        api.subscribeIsCollapsed(() => toolbox.onIsCollapsedChanged());
 	        return toolbox;
 	    }
-	    constructor(view, api) {
+	    constructor(view, api, allGroups) {
 	        this.view = view;
 	        this.api = api;
+	        this.allGroups = allGroups;
 	    }
 	    destroy() {
 	        this.view.destroy();
 	    }
 	    render() {
-	        const groups = this.api.filterGroups(this.filter);
+	        const groups = this.api.applyFilter(this.allGroups, this.filter);
 	        this.view.setGroups(groups);
 	    }
 	    onIsCollapsedChanged() {
@@ -3833,7 +3860,7 @@
 	        this.api.toggleIsCollapsed();
 	    }
 	    onFilterInputChanged(value) {
-	        this.filter = value.toLowerCase();
+	        this.filter = value;
 	        this.render();
 	    }
 	}

package/lib/cjs/index.cjs CHANGED Viewed

@@ -612,12 +612,11 @@ class DragStepBehavior {
 }
 class ToolboxApi {
-    constructor(state, designerContext, behaviorController, iconProvider, configuration, uidGenerator) {
+    constructor(state, designerContext, behaviorController, toolboxDataProvider, uidGenerator) {
         this.state = state;
         this.designerContext = designerContext;
         this.behaviorController = behaviorController;
-        this.iconProvider = iconProvider;
-        this.configuration = configuration;
+        this.toolboxDataProvider = toolboxDataProvider;
         this.uidGenerator = uidGenerator;
     }
     isCollapsed() {
@@ -629,24 +628,11 @@ class ToolboxApi {
     subscribeIsCollapsed(listener) {
         this.state.onIsToolboxCollapsedChanged.subscribe(listener);
     }
-    tryGetIconUrl(step) {
-        return this.iconProvider.getIconUrl(step);
-    }
-    getLabel(step) {
-        const labelProvider = this.getConfiguration().labelProvider;
-        return labelProvider ? labelProvider(step) : step.name;
+    getAllGroups() {
+        return this.toolboxDataProvider.getAllGroups();
     }
-    filterGroups(filter) {
-        return this.getConfiguration()
-            .groups.map(group => {
-            return {
-                name: group.name,
-                steps: group.steps.filter(s => {
-                    return filter ? s.name.toLowerCase().includes(filter) : true;
-                })
-            };
-        })
-            .filter(group => group.steps.length > 0);
+    applyFilter(allGroups, filter) {
+        return this.toolboxDataProvider.applyFilter(allGroups, filter);
     }
     /**
      * @param position Mouse or touch position.
@@ -666,11 +652,62 @@ class ToolboxApi {
         newStep.id = this.uidGenerator ? this.uidGenerator() : Uid.next();
         return newStep;
     }
-    getConfiguration() {
+}
+const regexp = /^[a-zA-Z][a-zA-Z0-9_-]+$/;
+class StepTypeValidator {
+    static validate(type) {
+        if (!regexp.test(type)) {
+            throw new Error(`Step type "${type}" contains not allowed characters`);
+        }
+    }
+}
+class ToolboxDataProvider {
+    constructor(iconProvider, configuration) {
+        this.iconProvider = iconProvider;
+        this.configuration = configuration;
+        this.createItemData = (step) => {
+            StepTypeValidator.validate(step.type);
+            const iconUrl = this.iconProvider.getIconUrl(step);
+            const label = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
+            const description = this.configuration && this.configuration.descriptionProvider ? this.configuration.descriptionProvider(step) : label;
+            const lowerCaseLabel = label.toLowerCase();
+            return {
+                iconUrl,
+                label,
+                description,
+                lowerCaseLabel,
+                step
+            };
+        };
+    }
+    getAllGroups() {
         if (!this.configuration) {
-            throw new Error('Toolbox is disabled');
+            return [];
         }
-        return this.configuration;
+        return this.configuration.groups.map(group => {
+            return {
+                name: group.name,
+                items: group.steps.map(this.createItemData)
+            };
+        });
+    }
+    applyFilter(allGroups, filter) {
+        if (!filter) {
+            return allGroups;
+        }
+        const lowerCaseFilter = filter.toLowerCase();
+        return allGroups
+            .map(group => {
+            return {
+                name: group.name,
+                items: group.items.filter(s => {
+                    return s.lowerCaseLabel.includes(lowerCaseFilter);
+                })
+            };
+        })
+            .filter(group => group.items.length > 0);
     }
 }
@@ -729,7 +766,8 @@ class DesignerApi {
         const workspace = new WorkspaceApi(context.state, context.workspaceController);
         const viewportController = context.services.viewportController.create(workspace);
         const viewport = new ViewportApi(context.workspaceController, viewportController);
-        return new DesignerApi(new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, context.componentContext.iconProvider, context.configuration.toolbox, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
+        const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
+        return new DesignerApi(new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
     }
     constructor(controlBar, toolbox, editor, workspace, viewport, pathBar) {
         this.controlBar = controlBar;
@@ -2483,8 +2521,8 @@ class MoveViewportBehavior {
 }
 class SelectStepBehavior {
-    static create(pressedStepComponent, forceDisableDrag, context) {
-        const isDragDisabled = forceDisableDrag ||
+    static create(pressedStepComponent, isMiddleButton, context) {
+        const isDragDisabled = isMiddleButton ||
             context.state.isDragDisabled ||
             !context.definitionModifier.isDraggable(pressedStepComponent.step, pressedStepComponent.parentSequence);
         return new SelectStepBehavior(pressedStepComponent, isDragDisabled, context, context.state);
@@ -2594,13 +2632,13 @@ class ClickBehaviorResolver {
         this.designerContext = designerContext;
         this.state = state;
     }
-    resolve(commandOrNull, element, forceDisableDrag) {
+    resolve(commandOrNull, element, isMiddleButton) {
         if (!commandOrNull) {
-            return MoveViewportBehavior.create(this.state, true);
+            return MoveViewportBehavior.create(this.state, !isMiddleButton);
         }
         switch (commandOrNull.type) {
             case exports.ClickCommandType.selectStep:
-                return SelectStepBehavior.create(commandOrNull.component, forceDisableDrag, this.designerContext);
+                return SelectStepBehavior.create(commandOrNull.component, isMiddleButton, this.designerContext);
             case exports.ClickCommandType.rerenderStep:
                 return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.designerContext));
             case exports.ClickCommandType.openFolder:
@@ -2893,8 +2931,7 @@ class Workspace {
         const isMiddleButton = buttonIndex === 1;
         if (isPrimaryButton || isMiddleButton) {
             const commandOrNull = this.resolveClick(target, position);
-            const forceDisableDrag = isMiddleButton;
-            const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, forceDisableDrag);
+            const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, isMiddleButton);
             this.behaviorController.start(position, behavior);
         }
     }
@@ -3453,30 +3490,19 @@ class ScrollBoxView {
     }
 }
-const regexp = /^[a-zA-Z][a-zA-Z0-9_-]+$/;
-class StepTypeValidator {
-    static validate(type) {
-        if (!regexp.test(type)) {
-            throw new Error(`Step type "${type}" contains not allowed characters`);
-        }
-    }
-}
 class ToolboxItemView {
-    static create(parent, step, api) {
-        const label = api.getLabel(step);
+    static create(parent, data) {
         const root = Dom.element('div', {
-            class: `sqd-toolbox-item sqd-type-${step.type}`,
-            title: label
+            class: `sqd-toolbox-item sqd-type-${data.step.type}`,
+            title: data.description
         });
-        const iconUrl = api.tryGetIconUrl(step);
         const icon = Dom.element('div', {
             class: 'sqd-toolbox-item-icon'
         });
-        if (iconUrl) {
+        if (data.iconUrl) {
             const iconImage = Dom.element('img', {
                 class: 'sqd-toolbox-item-icon-image',
-                src: iconUrl
+                src: data.iconUrl
             });
             icon.appendChild(iconImage);
         }
@@ -3486,7 +3512,7 @@ class ToolboxItemView {
         const text = Dom.element('div', {
             class: 'sqd-toolbox-item-text'
         });
-        text.textContent = label;
+        text.textContent = data.label;
         root.appendChild(icon);
         root.appendChild(text);
         parent.appendChild(root);
@@ -3507,10 +3533,9 @@ class ToolboxItemView {
 }
 class ToolboxItem {
-    static create(parent, step, api) {
-        StepTypeValidator.validate(step.type);
-        const view = ToolboxItemView.create(parent, step, api);
-        const item = new ToolboxItem(step, api);
+    static create(parent, data, api) {
+        const view = ToolboxItemView.create(parent, data);
+        const item = new ToolboxItem(data.step, api);
         view.bindMousedown(e => item.onMousedown(e));
         view.bindTouchstart(e => item.onTouchstart(e));
         view.bindContextMenu(e => item.onContextMenu(e));
@@ -3610,7 +3635,7 @@ class ToolboxView {
             });
             groupTitle.innerText = group.name;
             list.appendChild(groupTitle);
-            group.steps.forEach(s => ToolboxItem.create(list, s, this.api));
+            group.items.forEach(item => ToolboxItem.create(list, item, this.api));
         });
         this.scrollBoxView.setContent(list);
     }
@@ -3621,8 +3646,9 @@ class ToolboxView {
 class Toolbox {
     static create(root, api) {
+        const allGroups = api.getAllGroups();
         const view = ToolboxView.create(root, api);
-        const toolbox = new Toolbox(view, api);
+        const toolbox = new Toolbox(view, api, allGroups);
         toolbox.render();
         toolbox.onIsCollapsedChanged();
         view.bindToggleClick(() => toolbox.onToggleClicked());
@@ -3630,15 +3656,16 @@ class Toolbox {
         api.subscribeIsCollapsed(() => toolbox.onIsCollapsedChanged());
         return toolbox;
     }
-    constructor(view, api) {
+    constructor(view, api, allGroups) {
         this.view = view;
         this.api = api;
+        this.allGroups = allGroups;
     }
     destroy() {
         this.view.destroy();
     }
     render() {
-        const groups = this.api.filterGroups(this.filter);
+        const groups = this.api.applyFilter(this.allGroups, this.filter);
         this.view.setGroups(groups);
     }
     onIsCollapsedChanged() {
@@ -3648,7 +3675,7 @@ class Toolbox {
         this.api.toggleIsCollapsed();
     }
     onFilterInputChanged(value) {
-        this.filter = value.toLowerCase();
+        this.filter = value;
         this.render();
     }
 }

package/lib/esm/index.js CHANGED Viewed

@@ -611,12 +611,11 @@ class DragStepBehavior {
 }
 class ToolboxApi {
-    constructor(state, designerContext, behaviorController, iconProvider, configuration, uidGenerator) {
+    constructor(state, designerContext, behaviorController, toolboxDataProvider, uidGenerator) {
         this.state = state;
         this.designerContext = designerContext;
         this.behaviorController = behaviorController;
-        this.iconProvider = iconProvider;
-        this.configuration = configuration;
+        this.toolboxDataProvider = toolboxDataProvider;
         this.uidGenerator = uidGenerator;
     }
     isCollapsed() {
@@ -628,24 +627,11 @@ class ToolboxApi {
     subscribeIsCollapsed(listener) {
         this.state.onIsToolboxCollapsedChanged.subscribe(listener);
     }
-    tryGetIconUrl(step) {
-        return this.iconProvider.getIconUrl(step);
-    }
-    getLabel(step) {
-        const labelProvider = this.getConfiguration().labelProvider;
-        return labelProvider ? labelProvider(step) : step.name;
+    getAllGroups() {
+        return this.toolboxDataProvider.getAllGroups();
     }
-    filterGroups(filter) {
-        return this.getConfiguration()
-            .groups.map(group => {
-            return {
-                name: group.name,
-                steps: group.steps.filter(s => {
-                    return filter ? s.name.toLowerCase().includes(filter) : true;
-                })
-            };
-        })
-            .filter(group => group.steps.length > 0);
+    applyFilter(allGroups, filter) {
+        return this.toolboxDataProvider.applyFilter(allGroups, filter);
     }
     /**
      * @param position Mouse or touch position.
@@ -665,11 +651,62 @@ class ToolboxApi {
         newStep.id = this.uidGenerator ? this.uidGenerator() : Uid.next();
         return newStep;
     }
-    getConfiguration() {
+}
+const regexp = /^[a-zA-Z][a-zA-Z0-9_-]+$/;
+class StepTypeValidator {
+    static validate(type) {
+        if (!regexp.test(type)) {
+            throw new Error(`Step type "${type}" contains not allowed characters`);
+        }
+    }
+}
+class ToolboxDataProvider {
+    constructor(iconProvider, configuration) {
+        this.iconProvider = iconProvider;
+        this.configuration = configuration;
+        this.createItemData = (step) => {
+            StepTypeValidator.validate(step.type);
+            const iconUrl = this.iconProvider.getIconUrl(step);
+            const label = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
+            const description = this.configuration && this.configuration.descriptionProvider ? this.configuration.descriptionProvider(step) : label;
+            const lowerCaseLabel = label.toLowerCase();
+            return {
+                iconUrl,
+                label,
+                description,
+                lowerCaseLabel,
+                step
+            };
+        };
+    }
+    getAllGroups() {
         if (!this.configuration) {
-            throw new Error('Toolbox is disabled');
+            return [];
         }
-        return this.configuration;
+        return this.configuration.groups.map(group => {
+            return {
+                name: group.name,
+                items: group.steps.map(this.createItemData)
+            };
+        });
+    }
+    applyFilter(allGroups, filter) {
+        if (!filter) {
+            return allGroups;
+        }
+        const lowerCaseFilter = filter.toLowerCase();
+        return allGroups
+            .map(group => {
+            return {
+                name: group.name,
+                items: group.items.filter(s => {
+                    return s.lowerCaseLabel.includes(lowerCaseFilter);
+                })
+            };
+        })
+            .filter(group => group.items.length > 0);
     }
 }
@@ -728,7 +765,8 @@ class DesignerApi {
         const workspace = new WorkspaceApi(context.state, context.workspaceController);
         const viewportController = context.services.viewportController.create(workspace);
         const viewport = new ViewportApi(context.workspaceController, viewportController);
-        return new DesignerApi(new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, context.componentContext.iconProvider, context.configuration.toolbox, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
+        const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
+        return new DesignerApi(new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.definitionModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker));
     }
     constructor(controlBar, toolbox, editor, workspace, viewport, pathBar) {
         this.controlBar = controlBar;
@@ -2482,8 +2520,8 @@ class MoveViewportBehavior {
 }
 class SelectStepBehavior {
-    static create(pressedStepComponent, forceDisableDrag, context) {
-        const isDragDisabled = forceDisableDrag ||
+    static create(pressedStepComponent, isMiddleButton, context) {
+        const isDragDisabled = isMiddleButton ||
             context.state.isDragDisabled ||
             !context.definitionModifier.isDraggable(pressedStepComponent.step, pressedStepComponent.parentSequence);
         return new SelectStepBehavior(pressedStepComponent, isDragDisabled, context, context.state);
@@ -2593,13 +2631,13 @@ class ClickBehaviorResolver {
         this.designerContext = designerContext;
         this.state = state;
     }
-    resolve(commandOrNull, element, forceDisableDrag) {
+    resolve(commandOrNull, element, isMiddleButton) {
         if (!commandOrNull) {
-            return MoveViewportBehavior.create(this.state, true);
+            return MoveViewportBehavior.create(this.state, !isMiddleButton);
         }
         switch (commandOrNull.type) {
             case ClickCommandType.selectStep:
-                return SelectStepBehavior.create(commandOrNull.component, forceDisableDrag, this.designerContext);
+                return SelectStepBehavior.create(commandOrNull.component, isMiddleButton, this.designerContext);
             case ClickCommandType.rerenderStep:
                 return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.designerContext));
             case ClickCommandType.openFolder:
@@ -2892,8 +2930,7 @@ class Workspace {
         const isMiddleButton = buttonIndex === 1;
         if (isPrimaryButton || isMiddleButton) {
             const commandOrNull = this.resolveClick(target, position);
-            const forceDisableDrag = isMiddleButton;
-            const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, forceDisableDrag);
+            const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, isMiddleButton);
             this.behaviorController.start(position, behavior);
         }
     }
@@ -3452,30 +3489,19 @@ class ScrollBoxView {
     }
 }
-const regexp = /^[a-zA-Z][a-zA-Z0-9_-]+$/;
-class StepTypeValidator {
-    static validate(type) {
-        if (!regexp.test(type)) {
-            throw new Error(`Step type "${type}" contains not allowed characters`);
-        }
-    }
-}
 class ToolboxItemView {
-    static create(parent, step, api) {
-        const label = api.getLabel(step);
+    static create(parent, data) {
         const root = Dom.element('div', {
-            class: `sqd-toolbox-item sqd-type-${step.type}`,
-            title: label
+            class: `sqd-toolbox-item sqd-type-${data.step.type}`,
+            title: data.description
         });
-        const iconUrl = api.tryGetIconUrl(step);
         const icon = Dom.element('div', {
             class: 'sqd-toolbox-item-icon'
         });
-        if (iconUrl) {
+        if (data.iconUrl) {
             const iconImage = Dom.element('img', {
                 class: 'sqd-toolbox-item-icon-image',
-                src: iconUrl
+                src: data.iconUrl
             });
             icon.appendChild(iconImage);
         }
@@ -3485,7 +3511,7 @@ class ToolboxItemView {
         const text = Dom.element('div', {
             class: 'sqd-toolbox-item-text'
         });
-        text.textContent = label;
+        text.textContent = data.label;
         root.appendChild(icon);
         root.appendChild(text);
         parent.appendChild(root);
@@ -3506,10 +3532,9 @@ class ToolboxItemView {
 }
 class ToolboxItem {
-    static create(parent, step, api) {
-        StepTypeValidator.validate(step.type);
-        const view = ToolboxItemView.create(parent, step, api);
-        const item = new ToolboxItem(step, api);
+    static create(parent, data, api) {
+        const view = ToolboxItemView.create(parent, data);
+        const item = new ToolboxItem(data.step, api);
         view.bindMousedown(e => item.onMousedown(e));
         view.bindTouchstart(e => item.onTouchstart(e));
         view.bindContextMenu(e => item.onContextMenu(e));
@@ -3609,7 +3634,7 @@ class ToolboxView {
             });
             groupTitle.innerText = group.name;
             list.appendChild(groupTitle);
-            group.steps.forEach(s => ToolboxItem.create(list, s, this.api));
+            group.items.forEach(item => ToolboxItem.create(list, item, this.api));
         });
         this.scrollBoxView.setContent(list);
     }
@@ -3620,8 +3645,9 @@ class ToolboxView {
 class Toolbox {
     static create(root, api) {
+        const allGroups = api.getAllGroups();
         const view = ToolboxView.create(root, api);
-        const toolbox = new Toolbox(view, api);
+        const toolbox = new Toolbox(view, api, allGroups);
         toolbox.render();
         toolbox.onIsCollapsedChanged();
         view.bindToggleClick(() => toolbox.onToggleClicked());
@@ -3629,15 +3655,16 @@ class Toolbox {
         api.subscribeIsCollapsed(() => toolbox.onIsCollapsedChanged());
         return toolbox;
     }
-    constructor(view, api) {
+    constructor(view, api, allGroups) {
         this.view = view;
         this.api = api;
+        this.allGroups = allGroups;
     }
     destroy() {
         this.view.destroy();
     }
     render() {
-        const groups = this.api.filterGroups(this.filter);
+        const groups = this.api.applyFilter(this.allGroups, this.filter);
         this.view.setGroups(groups);
     }
     onIsCollapsedChanged() {
@@ -3647,7 +3674,7 @@ class Toolbox {
         this.api.toggleIsCollapsed();
     }
     onFilterInputChanged(value) {
-        this.filter = value.toLowerCase();
+        this.filter = value;
         this.render();
     }
 }

package/lib/index.d.ts CHANGED Viewed

@@ -408,20 +408,38 @@ declare class PathBarApi {
     getFolderPathStepNames(): string[];
 }
+declare class ToolboxDataProvider {
+    private readonly iconProvider;
+    private readonly configuration;
+    constructor(iconProvider: IconProvider, configuration: ToolboxConfiguration | false);
+    getAllGroups(): ToolboxGroupData[];
+    private readonly createItemData;
+    applyFilter(allGroups: ToolboxGroupData[], filter: string | undefined): ToolboxGroupData[];
+}
+interface ToolboxGroupData {
+    name: string;
+    items: ToolboxItemData[];
+}
+interface ToolboxItemData {
+    iconUrl: string | null;
+    label: string;
+    lowerCaseLabel: string;
+    description: string;
+    step: StepDefinition;
+}
 declare class ToolboxApi {
     private readonly state;
     private readonly designerContext;
     private readonly behaviorController;
-    private readonly iconProvider;
-    private readonly configuration;
+    private readonly toolboxDataProvider;
     private readonly uidGenerator;
-    constructor(state: DesignerState, designerContext: DesignerContext, behaviorController: BehaviorController, iconProvider: IconProvider, configuration: ToolboxConfiguration | false, uidGenerator: UidGenerator | undefined);
+    constructor(state: DesignerState, designerContext: DesignerContext, behaviorController: BehaviorController, toolboxDataProvider: ToolboxDataProvider, uidGenerator: UidGenerator | undefined);
     isCollapsed(): boolean;
     toggleIsCollapsed(): void;
     subscribeIsCollapsed(listener: SimpleEventListener<boolean>): void;
-    tryGetIconUrl(step: StepDefinition): string | null;
-    getLabel(step: StepDefinition): string;
-    filterGroups(filter: string | undefined): ToolboxGroupConfiguration[];
+    getAllGroups(): ToolboxGroupData[];
+    applyFilter(allGroups: ToolboxGroupData[], filter: string | undefined): ToolboxGroupData[];
     /**
      * @param position Mouse or touch position.
      * @param step Step definition.
@@ -429,7 +447,6 @@ declare class ToolboxApi {
      */
     tryDrag(position: Vector, step: StepDefinition): boolean;
     private activateStep;
-    private getConfiguration;
 }
 declare class ViewportApi {
@@ -890,11 +907,13 @@ interface CustomActionHandlerContext {
 }
 interface ToolboxConfiguration {
     labelProvider?: StepLabelProvider;
+    descriptionProvider?: StepDescriptionProvider;
     isCollapsed?: boolean;
     groups: ToolboxGroupConfiguration[];
 }
 type StepDefinition = Omit<Step, 'id'>;
 type StepLabelProvider = (step: StepDefinition) => string;
+type StepDescriptionProvider = (step: StepDefinition) => string;
 interface ToolboxGroupConfiguration {
     name: string;
     steps: StepDefinition[];
@@ -1126,4 +1145,4 @@ declare class StepsExtension extends StepsDesignerExtension {
 interface StepsExtensionConfiguration extends StepsDesignerExtensionConfiguration {
 }
-export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentView, ContainerStep, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ControlBarApi, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, GlobalEditorContext, GlobalEditorProvider, Grid, GridExtension, Icons, InputView, JoinView, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootValidator, SelectStepClickCommand, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, StepsExtension, StepsExtensionConfiguration, SwitchStep, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStep, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, race };
+export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentView, ContainerStep, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ControlBarApi, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, GlobalEditorContext, GlobalEditorProvider, Grid, GridExtension, Icons, InputView, JoinView, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootValidator, SelectStepClickCommand, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, StepsExtension, StepsExtensionConfiguration, SwitchStep, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStep, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, 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.15.4",
+	"version": "0.16.1",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

package/sass/designer-theme.scss CHANGED Viewed

@@ -353,6 +353,9 @@
 	$stepType: '',
 	$labelTextColor: #fff,
 	$labelFillColor: #2411db,
+	$labelStrokeColor: #2411db,
+	$labelStrokeWidth: 0,
+	$labelShadow: '',
 	$inputStrokeWidth: 2,
 	$inputStrokeColor: #000,
 	$inputFillColor: #fff
@@ -363,6 +366,13 @@
 		}
 		& > .sqd-label > .sqd-label-rect {
 			fill: $labelFillColor;
+			stroke-width: $labelStrokeWidth;
+			@if $labelStrokeWidth > 0 {
+				stroke: $labelStrokeColor;
+			}
+			@if $labelShadow != '' {
+				filter: drop-shadow($labelShadow);
+			}
 		}
 		& > g > {
 			@include _sqd-input(