sequential-workflow-designer 0.27.4 → 0.29.0

package/lib/cjs/index.cjs

@@ -768,8 +768,9 @@ class ViewportApi {
 }
 
 class WorkspaceApi {
-    constructor(state, workspaceController) {
+    constructor(state, definitionWalker, workspaceController) {
         this.state = state;
+        this.definitionWalker = definitionWalker;
         this.workspaceController = workspaceController;
     }
     getViewport() {
@@ -796,11 +797,29 @@ class WorkspaceApi {
     updateCanvasSize() {
         this.workspaceController.updateCanvasSize();
     }
+    getRootSequence() {
+        const stepId = this.state.tryGetLastStepIdFromFolderPath();
+        if (stepId) {
+            const parentStep = this.definitionWalker.getParentSequence(this.state.definition, stepId);
+            const children = this.definitionWalker.getChildren(parentStep.step);
+            if (!children || children.type !== sequentialWorkflowModel.StepChildrenType.sequence) {
+                throw new Error('Cannot find single sequence in folder step');
+            }
+            return {
+                sequence: children.items,
+                parentStep
+            };
+        }
+        return {
+            sequence: this.state.definition.sequence,
+            parentStep: null
+        };
+    }
 }
 
 class DesignerApi {
     static create(context) {
-        const workspace = new WorkspaceApi(context.state, context.workspaceController);
+        const workspace = new WorkspaceApi(context.state, context.definitionWalker, context.workspaceController);
         const viewportController = context.services.viewportController.create(workspace);
         const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, 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.configuration.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);
@@ -1059,11 +1078,11 @@ class InputView {
         parent.appendChild(circle);
         return new InputView(circle);
     }
-    constructor(root) {
-        this.root = root;
+    constructor(g) {
+        this.g = g;
     }
     setIsHidden(isHidden) {
-        Dom.attrs(this.root, {
+        Dom.attrs(this.g, {
             visibility: isHidden ? 'hidden' : 'visible'
         });
     }
@@ -1488,31 +1507,77 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
 };
 
 const COMPONENT_CLASS_NAME$1 = 'switch';
+function createView(g, width, height, joinX, viewContext, sequenceComponents, regionView, cfg) {
+    let inputView = null;
+    if (cfg.inputSize > 0) {
+        const iconUrl = viewContext.getStepIconUrl();
+        inputView = InputView.createRectInput(g, joinX, cfg.paddingTop1, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
+    }
+    return {
+        g,
+        width,
+        height,
+        joinX,
+        placeholders: null,
+        sequenceComponents,
+        hasOutput: sequenceComponents ? sequenceComponents.some(c => c.hasOutput) : true,
+        getClientPosition() {
+            return regionView.getClientPosition();
+        },
+        resolveClick(click) {
+            const result = regionView.resolveClick(click);
+            return result === true || (result === null && g.contains(click.element)) ? true : result;
+        },
+        setIsDragging(isDragging) {
+            if (cfg.autoHideInputOnDrag && inputView) {
+                inputView.setIsHidden(isDragging);
+            }
+        },
+        setIsSelected(isSelected) {
+            regionView.setIsSelected(isSelected);
+        },
+        setIsDisabled(isDisabled) {
+            Dom.toggleClass(g, isDisabled, 'sqd-disabled');
+        }
+    };
+}
 const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
     return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
         const step = stepContext.step;
         const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
+        const name = viewContext.getStepName();
+        const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
         const branchNames = Object.keys(step.branches);
-        const branchComponents = branchNames.map(branchName => {
-            return viewContext.createSequenceComponent(g, step.branches[branchName]);
-        });
-        const branchLabelViews = branchNames.map(branchName => {
+        if (branchNames.length === 0) {
+            const width = Math.max(nameLabelView.width, cfg.minBranchWidth) + cfg.paddingX * 2;
+            const height = nameLabelView.height + paddingTop + cfg.noBranchPaddingBottom;
+            const joinX = width / 2;
+            const regionView = regionViewBuilder(g, [width], height);
+            Dom.translate(nameLabelView.g, joinX, 0);
+            JoinView.createStraightJoin(g, new Vector(joinX, 0), height);
+            return createView(g, width, height, joinX, viewContext, null, regionView, cfg);
+        }
+        const branchComponents = [];
+        const branchLabelViews = [];
+        const branchSizes = [];
+        let totalBranchesWidth = 0;
+        let maxBranchesHeight = 0;
+        branchNames.forEach(branchName => {
+            const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
             const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
             const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
-            return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
-        });
-        const name = viewContext.getStepName();
-        const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
-        let prevOffsetX = 0;
-        const branchSizes = branchComponents.map((component, i) => {
-            const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
+            const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
+            const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
             const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
             const branchOffsetRight = Math.max(halfOfWidestBranchElement - (component.view.width - component.view.joinX), 0) + cfg.paddingX;
             const width = component.view.width + branchOffsetLeft + branchOffsetRight;
             const joinX = component.view.joinX + branchOffsetLeft;
-            const offsetX = prevOffsetX;
-            prevOffsetX += width;
-            return { width, branchOffsetLeft, offsetX, joinX };
+            const offsetX = totalBranchesWidth;
+            totalBranchesWidth += width;
+            maxBranchesHeight = Math.max(maxBranchesHeight, component.view.height);
+            branchComponents.push(component);
+            branchLabelViews.push(labelView);
+            branchSizes.push({ width, branchOffsetLeft, offsetX, joinX });
         });
         const centerBranchIndex = Math.floor(branchNames.length / 2);
         const centerBranchSize = branchSizes[centerBranchIndex];
@@ -1520,8 +1585,6 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
         if (branchNames.length % 2 !== 0) {
             joinX += centerBranchSize.joinX;
         }
-        const totalBranchesWidth = branchSizes.reduce((result, s) => result + s.width, 0);
-        const maxBranchesHeight = Math.max(...branchComponents.map(s => s.view.height));
         const halfOfWidestSwitchElement = nameLabelView.width / 2 + cfg.paddingX;
         const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
         const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
@@ -1543,18 +1606,16 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
                 }
             }
         });
-        let inputView = null;
-        if (cfg.inputSize > 0) {
-            const iconUrl = viewContext.getStepIconUrl();
-            inputView = InputView.createRectInput(g, shiftedJoinX, cfg.paddingTop1, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
-        }
         JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), paddingTop);
-        JoinView.createJoins(g, new Vector(shiftedJoinX, paddingTop + cfg.nameLabel.height), branchSizes.map(o => new Vector(switchOffsetLeft + o.offsetX + o.joinX, paddingTop + cfg.nameLabel.height + cfg.connectionHeight)));
+        JoinView.createJoins(g, new Vector(shiftedJoinX, paddingTop + cfg.nameLabel.height), branchSizes.map(s => new Vector(switchOffsetLeft + s.offsetX + s.joinX, paddingTop + cfg.nameLabel.height + cfg.connectionHeight)));
         if (stepContext.isOutputConnected) {
             const ongoingSequenceIndexes = branchComponents
                 .map((component, index) => (component.hasOutput ? index : null))
                 .filter(index => index !== null);
-            const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => new Vector(switchOffsetLeft + branchSizes[i].offsetX + branchSizes[i].joinX, paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight));
+            const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => {
+                const branchSize = branchSizes[i];
+                return new Vector(switchOffsetLeft + branchSize.offsetX + branchSize.joinX, paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight);
+            });
             if (ongoingJoinTargets.length > 0) {
                 JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
             }
@@ -1563,33 +1624,7 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
         regions[0] += switchOffsetLeft;
         regions[regions.length - 1] += switchOffsetRight;
         const regionView = regionViewBuilder(g, regions, viewHeight);
-        return {
-            g,
-            width: viewWidth,
-            height: viewHeight,
-            joinX: shiftedJoinX,
-            placeholders: null,
-            sequenceComponents: branchComponents,
-            hasOutput: branchComponents.some(c => c.hasOutput),
-            getClientPosition() {
-                return regionView.getClientPosition();
-            },
-            resolveClick(click) {
-                const result = regionView.resolveClick(click);
-                return result === true || (result === null && g.contains(click.element)) ? true : result;
-            },
-            setIsDragging(isDragging) {
-                if (cfg.autoHideInputOnDrag && inputView) {
-                    inputView.setIsHidden(isDragging);
-                }
-            },
-            setIsSelected(isSelected) {
-                regionView.setIsSelected(isSelected);
-            },
-            setIsDisabled(isDisabled) {
-                Dom.toggleClass(g, isDisabled, 'sqd-disabled');
-            }
-        };
+        return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, regionView, cfg);
     });
 };
 
@@ -2114,11 +2149,12 @@ class ContainerStepExtension {
 
 const defaultConfiguration$2 = {
     view: {
-        minContainerWidth: 40,
+        minBranchWidth: 88,
         paddingX: 20,
         paddingTop1: 0,
         paddingTop2: 22,
-        connectionHeight: 16,
+        connectionHeight: 20,
+        noBranchPaddingBottom: 24,
         inputSize: 18,
         inputIconSize: 14,
         inputRadius: 4,
@@ -2995,6 +3031,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
 
 function __awaiter(thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -3004,7 +3042,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 function isElementAttached(dom, element) {
     return !(dom.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
@@ -3055,11 +3098,11 @@ class WorkspaceView {
         this.context = context;
         this.onResizeHandler = () => this.onResize();
     }
-    render(sequence, parentSequencePlaceIndicator) {
+    render(sequence, parentPlaceIndicator) {
         if (this.rootComponent) {
             this.foreground.removeChild(this.rootComponent.view.g);
         }
-        this.rootComponent = this.context.services.rootComponent.create(this.foreground, sequence, parentSequencePlaceIndicator, this.context);
+        this.rootComponent = this.context.services.rootComponent.create(this.foreground, sequence, parentPlaceIndicator, this.context);
         this.refreshSize();
     }
     setPositionAndScale(position, scale) {
@@ -3219,10 +3262,14 @@ class PressingBehavior {
 }
 
 class RerenderStepPressingBehaviorHandler {
-    constructor(designerContext) {
+    constructor(command, designerContext) {
+        this.command = command;
         this.designerContext = designerContext;
     }
     handle() {
+        if (this.command.beforeCallback) {
+            this.command.beforeCallback();
+        }
         this.designerContext.workspaceController.updateRootComponent();
     }
 }
@@ -3260,7 +3307,7 @@ class ClickBehaviorResolver {
             case exports.ClickCommandType.selectStep:
                 return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
             case exports.ClickCommandType.rerenderStep:
-                return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.context));
+                return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(commandOrNull, this.context));
             case exports.ClickCommandType.openFolder:
                 return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.context));
             case exports.ClickCommandType.triggerCustomAction:
@@ -3396,8 +3443,9 @@ class ContextMenuController {
 }
 
 class ContextMenuItemsBuilder {
-    constructor(viewportApi, i18n, stateModifier, state, customMenuItemsProvider) {
+    constructor(viewportApi, workspaceApi, i18n, stateModifier, state, customMenuItemsProvider) {
         this.viewportApi = viewportApi;
+        this.workspaceApi = workspaceApi;
         this.i18n = i18n;
         this.stateModifier = stateModifier;
         this.state = state;
@@ -3456,8 +3504,9 @@ class ContextMenuItemsBuilder {
                 }
             }
         }
-        else {
-            this.tryAppendCustomItems(items, null, this.state.definition.sequence);
+        else if (!commandOrNull) {
+            const rootSequence = this.workspaceApi.getRootSequence();
+            this.tryAppendCustomItems(items, null, rootSequence.sequence);
         }
         items.push({
             label: this.i18n('contextMenu.resetView', 'Reset view'),
@@ -3471,7 +3520,7 @@ class ContextMenuItemsBuilder {
     }
     tryAppendCustomItems(items, step, parentSequence) {
         if (this.customMenuItemsProvider) {
-            const customItems = this.customMenuItemsProvider.getItems(step, parentSequence);
+            const customItems = this.customMenuItemsProvider.getItems(step, parentSequence, this.state.definition);
             for (const customItem of customItems) {
                 items.push(customItem);
             }
@@ -3562,15 +3611,11 @@ class Workspace {
         const clickBehaviorWrapper = designerContext.services.clickBehaviorWrapperExtension.create(designerContext.customActionController);
         const wheelController = designerContext.services.wheelController.create(api.viewport, api.workspace);
         const pinchToZoomController = PinchToZoomController.create(api.workspace, api.viewport, api.shadowRoot);
-        const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
+        const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.workspace, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
             ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
             : undefined);
         const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
-        const workspace = new Workspace(view, designerContext.definitionWalker, designerContext.state, designerContext.behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, api.viewport, designerContext.services);
-        setTimeout(() => {
-            workspace.updateRootComponent();
-            api.viewport.resetViewport();
-        });
+        const workspace = new Workspace(view, designerContext.state, designerContext.behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, api.viewport, api.workspace, designerContext.services);
         designerContext.setWorkspaceController(workspace);
         designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
         race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
@@ -3580,11 +3625,11 @@ class Workspace {
         view.bindTouchStart(workspace.onClick, workspace.onPinchToZoom);
         view.bindWheel(workspace.onWheel);
         view.bindContextMenu(workspace.onContextMenu);
+        workspace.scheduleInit();
         return workspace;
     }
-    constructor(view, definitionWalker, state, behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, viewportApi, services) {
+    constructor(view, state, behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, viewportApi, workspaceApi, services) {
         this.view = view;
-        this.definitionWalker = definitionWalker;
         this.state = state;
         this.behaviorController = behaviorController;
         this.wheelController = wheelController;
@@ -3593,9 +3638,11 @@ class Workspace {
         this.clickBehaviorResolver = clickBehaviorResolver;
         this.clickBehaviorWrapper = clickBehaviorWrapper;
         this.viewportApi = viewportApi;
+        this.workspaceApi = workspaceApi;
         this.services = services;
         this.onRendered = new SimpleEvent();
         this.isValid = false;
+        this.initTimeout = null;
         this.selectedStepComponent = null;
         this.validationErrorBadgeIndex = null;
         this.onClick = (position, target, buttonIndex, altKey) => {
@@ -3625,28 +3672,23 @@ class Workspace {
             this.view.setPositionAndScale(viewport.position, viewport.scale);
         };
     }
+    scheduleInit() {
+        this.initTimeout = setTimeout(() => {
+            this.initTimeout = null;
+            this.updateRootComponent();
+            this.viewportApi.resetViewport();
+        });
+    }
     updateRootComponent() {
         this.selectedStepComponent = null;
-        let parentSequencePlaceIndicator;
-        let sequence;
-        const stepId = this.state.tryGetLastStepIdFromFolderPath();
-        if (stepId) {
-            const parentSequence = this.definitionWalker.getParentSequence(this.state.definition, stepId);
-            const children = this.definitionWalker.getChildren(parentSequence.step);
-            if (!children || children.type !== sequentialWorkflowModel.StepChildrenType.sequence) {
-                throw new Error('Cannot find single sequence in folder step');
+        const rootSequence = this.workspaceApi.getRootSequence();
+        const parentPlaceIndicator = rootSequence.parentStep
+            ? {
+                sequence: rootSequence.parentStep.parentSequence,
+                index: rootSequence.parentStep.index
             }
-            sequence = children.items;
-            parentSequencePlaceIndicator = {
-                sequence: parentSequence.parentSequence,
-                index: parentSequence.index
-            };
-        }
-        else {
-            sequence = this.state.definition.sequence;
-            parentSequencePlaceIndicator = null;
-        }
-        this.view.render(sequence, parentSequencePlaceIndicator);
+            : null;
+        this.view.render(rootSequence.sequence, parentPlaceIndicator);
         this.trySelectStepComponent(this.state.selectedStepId);
         this.updateBadges();
         this.onRendered.forward();
@@ -3688,6 +3730,10 @@ class Workspace {
         setTimeout(() => this.view.refreshSize());
     }
     destroy() {
+        if (this.initTimeout) {
+            clearTimeout(this.initTimeout);
+            this.initTimeout = null;
+        }
         this.contextMenuController.destroy();
         this.view.destroy();
     }
@@ -3785,8 +3831,8 @@ const SAFE_OFFSET = 10;
 class DefaultDraggedComponent {
     static create(parent, step, componentContext) {
         const canvas = Dom.svg('svg');
-        canvas.style.marginLeft = -SAFE_OFFSET + 'px';
-        canvas.style.marginTop = -SAFE_OFFSET + 'px';
+        canvas.style.marginLeft = -10 + 'px';
+        canvas.style.marginTop = -10 + 'px';
         parent.appendChild(canvas);
         const previewStepContext = {
             parentSequence: [],
@@ -4963,7 +5009,7 @@ exports.createTaskStepComponentViewFactory = createTaskStepComponentViewFactory;
 exports.getAbsolutePosition = getAbsolutePosition;
 exports.race = race;
 Object.keys(sequentialWorkflowModel).forEach(function (k) {
-	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
 		get: function () { return sequentialWorkflowModel[k]; }
 	});