npm - sequential-workflow-designer - Versions diffs - 0.38.1 → 0.39.0 - Mend

sequential-workflow-designer 0.38.1 → 0.39.0

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

@@ -4,7 +4,7 @@
 [![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)
-Sequential workflow designer with no external dependencies for web applications. It is written in pure TypeScript and uses SVG for rendering. This designer is not associated with any workflow engine, it is fully generic. You can use it to create any kind of application, from graphical programming languages to workflow builders.
+A sequential workflow designer with no external dependencies for web applications. It is written in pure TypeScript and uses SVG for rendering. This designer is not associated with any workflow engine; it is fully generic. You can use it to create any kind of application, from graphical programming languages to workflow builders.
 Features:
@@ -70,11 +70,11 @@ Pro:
 ## 🚀 Installation
-To use the designer you should add JS/TS files and CSS files to your project.
+To use the designer, add the JS/TS and CSS files to your project.
 ### NPM
-Install this package by [NPM](https://www.npmjs.com/) command:
+Install this package with the [NPM](https://www.npmjs.com/) command:
 `npm i sequential-workflow-designer`
@@ -93,7 +93,7 @@ import 'sequential-workflow-designer/css/designer-soft.css';
 import 'sequential-workflow-designer/css/designer-dark.css';
 ```
-To create the designer write the below code:
+To create the designer, write the code below:
 ```ts
 // ...
@@ -102,19 +102,19 @@ Designer.create(placeholder, definition, configuration);
 ### CDN
-Add the below code to your head section in HTML document.
+Add the code below to the head section of your HTML document.
 ```html
 <head>
   ...
-  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.38.1/css/designer.css" rel="stylesheet" />
-  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.38.1/css/designer-light.css" rel="stylesheet" />
-  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.38.1/css/designer-dark.css" rel="stylesheet" />
-  <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.38.1/dist/index.umd.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.39.0/css/designer.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.39.0/css/designer-light.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.39.0/css/designer-dark.css" rel="stylesheet" />
+  <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.39.0/dist/index.umd.js"></script>
 </head>
 ```
-Call the designer by:
+Create the designer with:
 ```js
 sequentialWorkflowDesigner.Designer.create(placeholder, definition, configuration);
@@ -122,7 +122,7 @@ sequentialWorkflowDesigner.Designer.create(placeholder, definition, configuratio
 ## 🎬 Usage
-Check [examples](/examples) directory.
+Check the [examples](/examples) directory.
 ```ts
 import { Designer } from 'sequential-workflow-designer';
@@ -188,13 +188,13 @@ const configuration = {
       {
         name: 'Files',
         steps: [
-          // steps for the toolbox's group
+          // steps for the toolbox group
         ],
       },
       {
         name: 'Notification',
         steps: [
-          // steps for the toolbox's group
+          // steps for the toolbox group
         ],
       },
     ],

package/dist/index.umd.js CHANGED Viewed

@@ -203,15 +203,17 @@
 	}
 	class ControlBarApi {
-	    static create(state, historyController, stateModifier) {
-	        const api = new ControlBarApi(state, historyController, stateModifier);
+	    static create(state, historyController, customActionController, stateModifier, configuration) {
+	        const api = new ControlBarApi(state, historyController, customActionController, stateModifier, configuration);
 	        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.emit);
 	        return api;
 	    }
-	    constructor(state, historyController, stateModifier) {
+	    constructor(state, historyController, customActionController, stateModifier, configuration) {
 	        this.state = state;
 	        this.historyController = historyController;
+	        this.customActionController = customActionController;
 	        this.stateModifier = stateModifier;
+	        this.configuration = configuration;
 	        this.onStateChanged = new SimpleEvent();
 	    }
 	    isDragDisabled() {
@@ -258,6 +260,16 @@
 	            !this.state.isDragging &&
 	            this.stateModifier.isDeletableById(this.state.selectedStepId));
 	    }
+	    getButtons() {
+	        return typeof this.configuration === 'boolean' ? null : this.configuration.buttons || null;
+	    }
+	    triggerButtonClick(id) {
+	        const action = {
+	            type: 'controlBarButtonClicked',
+	            id
+	        };
+	        this.customActionController.trigger(action, null, this.state.definition.sequence);
+	    }
 	}
 	exports.KeyboardAction = void 0;
@@ -1011,7 +1023,7 @@
 	        const workspace = new WorkspaceApi(context.state, context.definitionWalker, context.workspaceController);
 	        const viewportController = context.services.viewportController.create(workspace);
 	        const toolboxDataProvider = new ToolboxDataProvider(context.i18n, context.componentContext.iconProvider, context.configuration.toolbox);
-	        return new DesignerApi(context.configuration.shadowRoot, ControlBarApi.create(context.state, context.historyController, context.stateModifier), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, new ViewportApi(context.state, context.workspaceController, viewportController), new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
+	        return new DesignerApi(context.configuration.shadowRoot, ControlBarApi.create(context.state, context.historyController, context.customActionController, context.stateModifier, context.configuration.controlBar), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, new ViewportApi(context.state, context.workspaceController, viewportController), new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
 	    }
 	    constructor(shadowRoot, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
 	        this.shadowRoot = shadowRoot;
@@ -3973,6 +3985,7 @@
 	        this.itemsBuilder = itemsBuilder;
 	    }
 	    tryOpen(position, commandOrNull) {
+	        var _a, _b;
 	        if (this.configuration.contextMenu === false) {
 	            // Context menu is disabled.
 	            return;
@@ -3980,8 +3993,11 @@
 	        if (this.current) {
 	            this.current.tryDestroy();
 	        }
-	        const items = this.itemsBuilder.build(commandOrNull);
-	        this.current = ContextMenu.create(this.configuration.shadowRoot, position, this.theme, items);
+	        const isResetViewDisabled = this.configuration.contextMenu === true ? false : (_b = (_a = this.configuration.contextMenu) === null || _a === void 0 ? void 0 : _a.isResetViewDisabled) !== null && _b !== void 0 ? _b : false;
+	        const items = this.itemsBuilder.build(commandOrNull, isResetViewDisabled);
+	        if (items.length > 0) {
+	            this.current = ContextMenu.create(this.configuration.shadowRoot, position, this.theme, items);
+	        }
 	    }
 	    destroy() {
 	        if (this.current) {
@@ -3999,7 +4015,7 @@
 	        this.state = state;
 	        this.customMenuItemsProvider = customMenuItemsProvider;
 	    }
-	    build(commandOrNull) {
+	    build(commandOrNull, isResetViewDisabled) {
 	        const items = [];
 	        if (commandOrNull && commandOrNull.type === exports.ClickCommandType.selectStep) {
 	            const ssc = commandOrNull;
@@ -4056,13 +4072,15 @@
 	            const rootSequence = this.workspaceApi.getRootSequence();
 	            this.tryAppendCustomItems(items, null, rootSequence.sequence);
 	        }
-	        items.push({
-	            label: this.i18n('contextMenu.resetView', 'Reset view'),
-	            order: 50,
-	            callback: () => {
-	                this.viewportApi.resetViewport();
-	            }
-	        });
+	        if (!isResetViewDisabled) {
+	            items.push({
+	                label: this.i18n('contextMenu.resetView', 'Reset view'),
+	                order: 50,
+	                callback: () => {
+	                    this.viewportApi.resetViewport();
+	                }
+	            });
+	        }
 	        items.sort((a, b) => a.order - b.order);
 	        return items;
 	    }
@@ -4421,7 +4439,7 @@
 	}
 	class ControlBarView {
-	    static create(parent, isUndoRedoSupported, i18n) {
+	    static create(parent, isUndoRedoSupported, buttons, i18n) {
 	        const root = Dom.element('div', {
 	            class: 'sqd-control-bar'
 	        });
@@ -4446,10 +4464,19 @@
 	        deleteButton.classList.add('sqd-delete');
 	        deleteButton.classList.add('sqd-hidden');
 	        root.appendChild(deleteButton);
+	        const customButtons = [];
+	        if (buttons) {
+	            for (const customButton of buttons) {
+	                const button = createButton(customButton.iconD, customButton.label);
+	                button.setAttribute('data-id', customButton.id);
+	                root.appendChild(button);
+	                customButtons.push(button);
+	            }
+	        }
 	        parent.appendChild(root);
-	        return new ControlBarView(resetButton, zoomInButton, zoomOutButton, undoButton, redoButton, disableDragButton, deleteButton);
+	        return new ControlBarView(resetButton, zoomInButton, zoomOutButton, undoButton, redoButton, disableDragButton, deleteButton, customButtons);
 	    }
-	    constructor(resetButton, zoomInButton, zoomOutButton, undoButton, redoButton, disableDragButton, deleteButton) {
+	    constructor(resetButton, zoomInButton, zoomOutButton, undoButton, redoButton, disableDragButton, deleteButton, customButtons) {
 	        this.resetButton = resetButton;
 	        this.zoomInButton = zoomInButton;
 	        this.zoomOutButton = zoomOutButton;
@@ -4457,6 +4484,7 @@
 	        this.redoButton = redoButton;
 	        this.disableDragButton = disableDragButton;
 	        this.deleteButton = deleteButton;
+	        this.customButtons = customButtons;
 	    }
 	    bindResetButtonClick(handler) {
 	        bindClick(this.resetButton, handler);
@@ -4485,6 +4513,14 @@
 	    bindDeleteButtonClick(handler) {
 	        bindClick(this.deleteButton, handler);
 	    }
+	    bindCustomButtonClick(handler) {
+	        for (const customButton of this.customButtons) {
+	            const id = customButton.getAttribute('data-id');
+	            if (id) {
+	                bindClick(customButton, () => handler(id));
+	            }
+	        }
+	    }
 	    setIsDeleteButtonHidden(isHidden) {
 	        Dom.toggleClass(this.deleteButton, isHidden, 'sqd-hidden');
 	    }
@@ -4523,17 +4559,21 @@
 	class ControlBar {
 	    static create(parent, api) {
 	        const isUndoRedoSupported = api.controlBar.isUndoRedoSupported();
-	        const view = ControlBarView.create(parent, isUndoRedoSupported, api.i18n);
+	        const customButtons = api.controlBar.getButtons();
+	        const view = ControlBarView.create(parent, isUndoRedoSupported, customButtons, api.i18n);
 	        const bar = new ControlBar(view, api.controlBar, api.viewport, isUndoRedoSupported);
-	        view.bindResetButtonClick(() => bar.onResetButtonClicked());
-	        view.bindZoomInButtonClick(() => bar.onZoomInButtonClicked());
-	        view.bindZoomOutButtonClick(() => bar.onZoomOutButtonClicked());
-	        view.bindDisableDragButtonClick(() => bar.onMoveButtonClicked());
-	        view.bindDeleteButtonClick(() => bar.onDeleteButtonClicked());
-	        api.controlBar.onStateChanged.subscribe(() => bar.refreshButtons());
+	        view.bindResetButtonClick(bar.onResetButtonClicked);
+	        view.bindZoomInButtonClick(bar.onZoomInButtonClicked);
+	        view.bindZoomOutButtonClick(bar.onZoomOutButtonClicked);
+	        view.bindDisableDragButtonClick(bar.onMoveButtonClicked);
+	        view.bindDeleteButtonClick(bar.onDeleteButtonClicked);
+	        api.controlBar.onStateChanged.subscribe(bar.refreshButtons);
 	        if (isUndoRedoSupported) {
-	            view.bindUndoButtonClick(() => bar.onUndoButtonClicked());
-	            view.bindRedoButtonClick(() => bar.onRedoButtonClicked());
+	            view.bindUndoButtonClick(bar.onUndoButtonClicked);
+	            view.bindRedoButtonClick(bar.onRedoButtonClicked);
+	        }
+	        if (customButtons) {
+	            view.bindCustomButtonClick(bar.onCustomButtonClicked);
 	        }
 	        bar.refreshButtons();
 	        return bar;
@@ -4543,6 +4583,37 @@
 	        this.controlBarApi = controlBarApi;
 	        this.viewportApi = viewportApi;
 	        this.isUndoRedoSupported = isUndoRedoSupported;
+	        this.onResetButtonClicked = () => {
+	            this.viewportApi.resetViewport();
+	        };
+	        this.onZoomInButtonClicked = () => {
+	            this.viewportApi.zoom(true);
+	        };
+	        this.onZoomOutButtonClicked = () => {
+	            this.viewportApi.zoom(false);
+	        };
+	        this.onMoveButtonClicked = () => {
+	            this.controlBarApi.toggleIsDragDisabled();
+	        };
+	        this.onUndoButtonClicked = () => {
+	            this.controlBarApi.tryUndo();
+	        };
+	        this.onRedoButtonClicked = () => {
+	            this.controlBarApi.tryRedo();
+	        };
+	        this.onDeleteButtonClicked = () => {
+	            this.controlBarApi.tryDelete();
+	        };
+	        this.refreshButtons = () => {
+	            this.refreshDeleteButtonVisibility();
+	            this.refreshIsDragDisabled();
+	            if (this.isUndoRedoSupported) {
+	                this.refreshUndoRedoAvailability();
+	            }
+	        };
+	        this.onCustomButtonClicked = (id) => {
+	            this.controlBarApi.triggerButtonClick(id);
+	        };
 	    }
 	    updateLayout() {
 	        //
@@ -4550,34 +4621,6 @@
 	    destroy() {
 	        //
 	    }
-	    onResetButtonClicked() {
-	        this.viewportApi.resetViewport();
-	    }
-	    onZoomInButtonClicked() {
-	        this.viewportApi.zoom(true);
-	    }
-	    onZoomOutButtonClicked() {
-	        this.viewportApi.zoom(false);
-	    }
-	    onMoveButtonClicked() {
-	        this.controlBarApi.toggleIsDragDisabled();
-	    }
-	    onUndoButtonClicked() {
-	        this.controlBarApi.tryUndo();
-	    }
-	    onRedoButtonClicked() {
-	        this.controlBarApi.tryRedo();
-	    }
-	    onDeleteButtonClicked() {
-	        this.controlBarApi.tryDelete();
-	    }
-	    refreshButtons() {
-	        this.refreshDeleteButtonVisibility();
-	        this.refreshIsDragDisabled();
-	        if (this.isUndoRedoSupported) {
-	            this.refreshUndoRedoAvailability();
-	        }
-	    }
 	    //
 	    refreshIsDragDisabled() {
 	        const isDragDisabled = this.controlBarApi.isDragDisabled();
@@ -5252,8 +5295,8 @@
 	    /**
 	     * Creates a designer.
 	     * @param placeholder Placeholder where the designer will be attached.
-	     * @param startDefinition Start definition of a flow.
-	     * @param configuration Designer's configuration.
+	     * @param startDefinition Initial definition of the workflow.
+	     * @param configuration The designer configuration.
 	     * @returns An instance of the designer.
 	     */
 	    static create(placeholder, startDefinition, configuration) {
@@ -5340,37 +5383,37 @@
 	        this.onPreferencesChanged = new SimpleEvent();
 	    }
 	    /**
-	     * @returns the current definition of the workflow.
+	     * @returns The current definition of the workflow.
 	     */
 	    getDefinition() {
 	        return this.state.definition;
 	    }
 	    /**
-	     * @returns the validation result of the current definition.
+	     * @returns The validation result of the current definition.
 	     */
 	    isValid() {
 	        return this.view.workspace.isValid;
 	    }
 	    /**
-	     * @returns the readonly flag.
+	     * @returns The read-only flag.
 	     */
 	    isReadonly() {
 	        return this.state.isReadonly;
 	    }
 	    /**
-	     * @description Changes the readonly flag.
+	     * @description Changes the read-only flag.
 	     */
 	    setIsReadonly(isReadonly) {
 	        this.state.setIsReadonly(isReadonly);
 	    }
 	    /**
-	     * @returns current selected step id or `null` if nothing is selected.
+	     * @returns The currently selected step id, or `null` if nothing is selected.
 	     */
 	    getSelectedStepId() {
 	        return this.state.selectedStepId;
 	    }
 	    /**
-	     * @description Selects a step by the id.
+	     * @description Selects a step by id.
 	     */
 	    selectStepById(stepId) {
 	        this.state.setSelectedStepId(stepId);
@@ -5382,7 +5425,7 @@
 	        this.state.setSelectedStepId(null);
 	    }
 	    /**
-	     * @returns the current viewport.
+	     * @returns The current viewport.
 	     */
 	    getViewport() {
 	        return this.state.viewport;
@@ -5401,13 +5444,13 @@
 	        this.api.viewport.resetViewport();
 	    }
 	    /**
-	     * @description Moves the viewport to the step with the animation.
+	     * @description Moves the viewport to the step with animation.
 	     */
 	    moveViewportToStep(stepId) {
 	        this.api.viewport.moveViewportToStep(stepId);
 	    }
 	    /**
-	     * @description Rerender the root component and all its children.
+	     * @description Rerenders the root component and all its children.
 	     */
 	    updateRootComponent() {
 	        this.api.workspace.updateRootComponent();
@@ -5426,37 +5469,37 @@
 	        this.api.workspace.updateBadges();
 	    }
 	    /**
-	     * @returns a flag that indicates whether the toolbox is collapsed.
+	     * @returns A flag that indicates whether the toolbox is collapsed.
 	     */
 	    isToolboxCollapsed() {
 	        return this.state.isToolboxCollapsed;
 	    }
 	    /**
-	     * @description Sets a flag that indicates whether the toolbox is collapsed.
+	     * @description Sets the flag that indicates whether the toolbox is collapsed.
 	     */
 	    setIsToolboxCollapsed(isCollapsed) {
 	        this.state.setIsToolboxCollapsed(isCollapsed);
 	    }
 	    /**
-	     * @returns a flag that indicates whether the editor is collapsed.
+	     * @returns A flag that indicates whether the editor is collapsed.
 	     */
 	    isEditorCollapsed() {
 	        return this.state.isEditorCollapsed;
 	    }
 	    /**
-	     * @returns a flag that indicates whether the step is being dragged.
+	     * @returns A flag that indicates whether a step is being dragged.
 	     */
 	    isDragging() {
 	        return this.state.isDragging;
 	    }
 	    /**
-	     * @description Sets a flag that indicates whether the editor is collapsed.
+	     * @description Sets the flag that indicates whether the editor is collapsed.
 	     */
 	    setIsEditorCollapsed(isCollapsed) {
 	        this.state.setIsEditorCollapsed(isCollapsed);
 	    }
 	    /**
-	     * @description Dump the undo stack.
+	     * @description Dumps the undo stack.
 	     */
 	    dumpUndoStack() {
 	        return this.getHistoryController().dump();
@@ -5476,13 +5519,13 @@
 	    }
 	    /**
 	     * @param needle A step, a sequence or a step id.
-	     * @returns parent steps and branch names.
+	     * @returns Parent steps and branch names.
 	     */
 	    getStepParents(needle) {
 	        return this.walker.getParents(this.state.definition, needle);
 	    }
 	    /**
-	     * @returns the definition walker.
+	     * @returns The definition walker.
 	     */
 	    getWalker() {
 	        return this.walker;