sequential-workflow-designer 0.38.2 → 0.39.1

package/lib/cjs/index.cjs

@@ -201,15 +201,17 @@ function race(timeout, a, b, c, d) {
 }
 
 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() {
@@ -256,6 +258,16 @@ class ControlBarApi {
             !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;
@@ -826,7 +838,7 @@ class DesignerApi {
         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;
@@ -3788,6 +3800,7 @@ class ContextMenuController {
         this.itemsBuilder = itemsBuilder;
     }
     tryOpen(position, commandOrNull) {
+        var _a, _b;
         if (this.configuration.contextMenu === false) {
             // Context menu is disabled.
             return;
@@ -3795,8 +3808,11 @@ class ContextMenuController {
         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) {
@@ -3814,7 +3830,7 @@ class ContextMenuItemsBuilder {
         this.state = state;
         this.customMenuItemsProvider = customMenuItemsProvider;
     }
-    build(commandOrNull) {
+    build(commandOrNull, isResetViewDisabled) {
         const items = [];
         if (commandOrNull && commandOrNull.type === exports.ClickCommandType.selectStep) {
             const ssc = commandOrNull;
@@ -3871,13 +3887,15 @@ class ContextMenuItemsBuilder {
             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;
     }
@@ -4236,7 +4254,7 @@ class DefaultDraggedComponentExtension {
 }
 
 class ControlBarView {
-    static create(parent, isUndoRedoSupported, i18n) {
+    static create(parent, isUndoRedoSupported, buttons, i18n) {
         const root = Dom.element('div', {
             class: 'sqd-control-bar'
         });
@@ -4261,10 +4279,19 @@ class ControlBarView {
         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;
@@ -4272,6 +4299,7 @@ class ControlBarView {
         this.redoButton = redoButton;
         this.disableDragButton = disableDragButton;
         this.deleteButton = deleteButton;
+        this.customButtons = customButtons;
     }
     bindResetButtonClick(handler) {
         bindClick(this.resetButton, handler);
@@ -4300,6 +4328,14 @@ class ControlBarView {
     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');
     }
@@ -4338,17 +4374,21 @@ function createButton(d, title) {
 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;
@@ -4358,6 +4398,37 @@ class ControlBar {
         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() {
         //
@@ -4365,34 +4436,6 @@ class ControlBar {
     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();
@@ -5067,8 +5110,8 @@ class Designer {
     /**
      * 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) {
@@ -5155,37 +5198,37 @@ class Designer {
         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);
@@ -5197,7 +5240,7 @@ class Designer {
         this.state.setSelectedStepId(null);
     }
     /**
-     * @returns the current viewport.
+     * @returns The current viewport.
      */
     getViewport() {
         return this.state.viewport;
@@ -5216,13 +5259,13 @@ class Designer {
         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();
@@ -5241,37 +5284,37 @@ class Designer {
         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();
@@ -5291,13 +5334,13 @@ class Designer {
     }
     /**
      * @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;