sequential-workflow-designer 0.27.4 → 0.29.0

package/dist/index.umd.js

@@ -769,9 +769,193 @@
 	    }
 	}
 
+	const defaultResolvers = [sequentialResolver, branchedResolver];
+	function branchedResolver(step) {
+	    const branches = step.branches;
+	    if (branches) {
+	        return { type: exports.StepChildrenType.branches, items: branches };
+	    }
+	    return null;
+	}
+	function sequentialResolver(step) {
+	    const sequence = step.sequence;
+	    if (sequence) {
+	        return { type: exports.StepChildrenType.sequence, items: sequence };
+	    }
+	    return null;
+	}
+
+	exports.StepChildrenType = void 0;
+	(function (StepChildrenType) {
+	    StepChildrenType[StepChildrenType["sequence"] = 1] = "sequence";
+	    StepChildrenType[StepChildrenType["branches"] = 2] = "branches";
+	})(exports.StepChildrenType || (exports.StepChildrenType = {}));
+	class DefinitionWalker {
+	    constructor(resolvers) {
+	        this.resolvers = resolvers ? resolvers.concat(defaultResolvers) : defaultResolvers;
+	    }
+	    /**
+	     * Returns children of the step. If the step doesn't have children, returns null.
+	     * @param step The step.
+	     */
+	    getChildren(step) {
+	        const count = this.resolvers.length;
+	        for (let i = 0; i < count; i++) {
+	            const result = this.resolvers[i](step);
+	            if (result) {
+	                return result;
+	            }
+	        }
+	        return null;
+	    }
+	    /**
+	     * Returns the parents of the step or the sequence.
+	     * @param definition The definition.
+	     * @param needle The step, stepId or sequence to find.
+	     * @returns The parents of the step or the sequence.
+	     */
+	    getParents(definition, needle) {
+	        const result = [];
+	        let searchSequence = null;
+	        let searchStepId = null;
+	        if (Array.isArray(needle)) {
+	            searchSequence = needle;
+	        }
+	        else if (typeof needle === 'string') {
+	            searchStepId = needle;
+	        }
+	        else {
+	            searchStepId = needle.id;
+	        }
+	        if (this.find(definition.sequence, searchSequence, searchStepId, result)) {
+	            result.reverse();
+	            return result.map(item => {
+	                return typeof item === 'string' ? item : item.step;
+	            });
+	        }
+	        throw new Error(searchStepId ? `Cannot get parents of step: ${searchStepId}` : 'Cannot get parents of sequence');
+	    }
+	    findParentSequence(definition, stepId) {
+	        const result = [];
+	        if (this.find(definition.sequence, null, stepId, result)) {
+	            return result[0];
+	        }
+	        return null;
+	    }
+	    getParentSequence(definition, stepId) {
+	        const result = this.findParentSequence(definition, stepId);
+	        if (!result) {
+	            throw new Error(`Cannot find step by id: ${stepId}`);
+	        }
+	        return result;
+	    }
+	    findById(definition, stepId) {
+	        const result = this.findParentSequence(definition, stepId);
+	        return result ? result.step : null;
+	    }
+	    getById(definition, stepId) {
+	        return this.getParentSequence(definition, stepId).step;
+	    }
+	    forEach(definition, callback) {
+	        this.iterateSequence(definition.sequence, callback);
+	    }
+	    forEachSequence(sequence, callback) {
+	        this.iterateSequence(sequence, callback);
+	    }
+	    forEachChildren(step, callback) {
+	        this.iterateStep(step, callback);
+	    }
+	    find(sequence, needSequence, needStepId, result) {
+	        if (needSequence && sequence === needSequence) {
+	            return true;
+	        }
+	        const count = sequence.length;
+	        for (let index = 0; index < count; index++) {
+	            const step = sequence[index];
+	            if (needStepId && step.id === needStepId) {
+	                result.push({ step, index, parentSequence: sequence });
+	                return true;
+	            }
+	            const children = this.getChildren(step);
+	            if (children) {
+	                switch (children.type) {
+	                    case exports.StepChildrenType.sequence:
+	                        {
+	                            const parentSequence = children.items;
+	                            if (this.find(parentSequence, needSequence, needStepId, result)) {
+	                                result.push({ step, index, parentSequence });
+	                                return true;
+	                            }
+	                        }
+	                        break;
+	                    case exports.StepChildrenType.branches:
+	                        {
+	                            const branches = children.items;
+	                            const branchNames = Object.keys(branches);
+	                            for (const branchName of branchNames) {
+	                                const parentSequence = branches[branchName];
+	                                if (this.find(parentSequence, needSequence, needStepId, result)) {
+	                                    result.push(branchName);
+	                                    result.push({ step, index, parentSequence });
+	                                    return true;
+	                                }
+	                            }
+	                        }
+	                        break;
+	                    default:
+	                        throw new Error(`Not supported step children type: ${children.type}`);
+	                }
+	            }
+	        }
+	        return false;
+	    }
+	    iterateSequence(sequence, callback) {
+	        const count = sequence.length;
+	        for (let index = 0; index < count; index++) {
+	            const step = sequence[index];
+	            if (callback(step, index, sequence) === false) {
+	                return false;
+	            }
+	            if (!this.iterateStep(step, callback)) {
+	                return false;
+	            }
+	        }
+	        return true;
+	    }
+	    iterateStep(step, callback) {
+	        const children = this.getChildren(step);
+	        if (children) {
+	            switch (children.type) {
+	                case exports.StepChildrenType.sequence:
+	                    {
+	                        const sequence = children.items;
+	                        if (!this.iterateSequence(sequence, callback)) {
+	                            return false;
+	                        }
+	                    }
+	                    break;
+	                case exports.StepChildrenType.branches:
+	                    {
+	                        const sequences = Object.values(children.items);
+	                        for (const sequence of sequences) {
+	                            if (!this.iterateSequence(sequence, callback)) {
+	                                return false;
+	                            }
+	                        }
+	                    }
+	                    break;
+	                default:
+	                    throw new Error(`Not supported step children type: ${children.type}`);
+	            }
+	        }
+	        return true;
+	    }
+	}
+
 	class WorkspaceApi {
-	    constructor(state, workspaceController) {
+	    constructor(state, definitionWalker, workspaceController) {
 	        this.state = state;
+	        this.definitionWalker = definitionWalker;
 	        this.workspaceController = workspaceController;
 	    }
 	    getViewport() {
@@ -798,11 +982,29 @@
 	    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 !== exports.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);
@@ -1061,11 +1263,11 @@
 	        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'
 	        });
 	    }
@@ -1490,31 +1692,77 @@
 	};
 
 	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];
@@ -1522,8 +1770,6 @@
 	        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);
@@ -1545,18 +1791,16 @@
 	                }
 	            }
 	        });
-	        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);
 	            }
@@ -1565,33 +1809,7 @@
 	        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);
 	    });
 	};
 
@@ -2116,11 +2334,12 @@
 
 	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,
@@ -2379,189 +2598,6 @@
 	    }
 	}
 
-	const defaultResolvers = [sequentialResolver, branchedResolver];
-	function branchedResolver(step) {
-	    const branches = step.branches;
-	    if (branches) {
-	        return { type: exports.StepChildrenType.branches, items: branches };
-	    }
-	    return null;
-	}
-	function sequentialResolver(step) {
-	    const sequence = step.sequence;
-	    if (sequence) {
-	        return { type: exports.StepChildrenType.sequence, items: sequence };
-	    }
-	    return null;
-	}
-
-	exports.StepChildrenType = void 0;
-	(function (StepChildrenType) {
-	    StepChildrenType[StepChildrenType["sequence"] = 1] = "sequence";
-	    StepChildrenType[StepChildrenType["branches"] = 2] = "branches";
-	})(exports.StepChildrenType || (exports.StepChildrenType = {}));
-	class DefinitionWalker {
-	    constructor(resolvers) {
-	        this.resolvers = resolvers ? resolvers.concat(defaultResolvers) : defaultResolvers;
-	    }
-	    /**
-	     * Returns children of the step. If the step doesn't have children, returns null.
-	     * @param step The step.
-	     */
-	    getChildren(step) {
-	        const count = this.resolvers.length;
-	        for (let i = 0; i < count; i++) {
-	            const result = this.resolvers[i](step);
-	            if (result) {
-	                return result;
-	            }
-	        }
-	        return null;
-	    }
-	    /**
-	     * Returns the parents of the step or the sequence.
-	     * @param definition The definition.
-	     * @param needle The step, stepId or sequence to find.
-	     * @returns The parents of the step or the sequence.
-	     */
-	    getParents(definition, needle) {
-	        const result = [];
-	        let searchSequence = null;
-	        let searchStepId = null;
-	        if (Array.isArray(needle)) {
-	            searchSequence = needle;
-	        }
-	        else if (typeof needle === 'string') {
-	            searchStepId = needle;
-	        }
-	        else {
-	            searchStepId = needle.id;
-	        }
-	        if (this.find(definition.sequence, searchSequence, searchStepId, result)) {
-	            result.reverse();
-	            return result.map(item => {
-	                return typeof item === 'string' ? item : item.step;
-	            });
-	        }
-	        throw new Error(searchStepId ? `Cannot get parents of step: ${searchStepId}` : 'Cannot get parents of sequence');
-	    }
-	    findParentSequence(definition, stepId) {
-	        const result = [];
-	        if (this.find(definition.sequence, null, stepId, result)) {
-	            return result[0];
-	        }
-	        return null;
-	    }
-	    getParentSequence(definition, stepId) {
-	        const result = this.findParentSequence(definition, stepId);
-	        if (!result) {
-	            throw new Error(`Cannot find step by id: ${stepId}`);
-	        }
-	        return result;
-	    }
-	    findById(definition, stepId) {
-	        const result = this.findParentSequence(definition, stepId);
-	        return result ? result.step : null;
-	    }
-	    getById(definition, stepId) {
-	        return this.getParentSequence(definition, stepId).step;
-	    }
-	    forEach(definition, callback) {
-	        this.iterateSequence(definition.sequence, callback);
-	    }
-	    forEachSequence(sequence, callback) {
-	        this.iterateSequence(sequence, callback);
-	    }
-	    forEachChildren(step, callback) {
-	        this.iterateStep(step, callback);
-	    }
-	    find(sequence, needSequence, needStepId, result) {
-	        if (needSequence && sequence === needSequence) {
-	            return true;
-	        }
-	        const count = sequence.length;
-	        for (let index = 0; index < count; index++) {
-	            const step = sequence[index];
-	            if (needStepId && step.id === needStepId) {
-	                result.push({ step, index, parentSequence: sequence });
-	                return true;
-	            }
-	            const children = this.getChildren(step);
-	            if (children) {
-	                switch (children.type) {
-	                    case exports.StepChildrenType.sequence:
-	                        {
-	                            const parentSequence = children.items;
-	                            if (this.find(parentSequence, needSequence, needStepId, result)) {
-	                                result.push({ step, index, parentSequence });
-	                                return true;
-	                            }
-	                        }
-	                        break;
-	                    case exports.StepChildrenType.branches:
-	                        {
-	                            const branches = children.items;
-	                            const branchNames = Object.keys(branches);
-	                            for (const branchName of branchNames) {
-	                                const parentSequence = branches[branchName];
-	                                if (this.find(parentSequence, needSequence, needStepId, result)) {
-	                                    result.push(branchName);
-	                                    result.push({ step, index, parentSequence });
-	                                    return true;
-	                                }
-	                            }
-	                        }
-	                        break;
-	                    default:
-	                        throw new Error(`Not supported step children type: ${children.type}`);
-	                }
-	            }
-	        }
-	        return false;
-	    }
-	    iterateSequence(sequence, callback) {
-	        const count = sequence.length;
-	        for (let index = 0; index < count; index++) {
-	            const step = sequence[index];
-	            if (callback(step, index, sequence) === false) {
-	                return false;
-	            }
-	            if (!this.iterateStep(step, callback)) {
-	                return false;
-	            }
-	        }
-	        return true;
-	    }
-	    iterateStep(step, callback) {
-	        const children = this.getChildren(step);
-	        if (children) {
-	            switch (children.type) {
-	                case exports.StepChildrenType.sequence:
-	                    {
-	                        const sequence = children.items;
-	                        if (!this.iterateSequence(sequence, callback)) {
-	                            return false;
-	                        }
-	                    }
-	                    break;
-	                case exports.StepChildrenType.branches:
-	                    {
-	                        const sequences = Object.values(children.items);
-	                        for (const sequence of sequences) {
-	                            if (!this.iterateSequence(sequence, callback)) {
-	                                return false;
-	                            }
-	                        }
-	                    }
-	                    break;
-	                default:
-	                    throw new Error(`Not supported step children type: ${children.type}`);
-	            }
-	        }
-	        return true;
-	    }
-	}
-
 	function readMousePosition(e) {
 	    return new Vector(e.pageX, e.pageY);
 	}
@@ -3180,6 +3216,8 @@
 	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); }); }
@@ -3189,7 +3227,12 @@
 	        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);
@@ -3240,11 +3283,11 @@
 	        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) {
@@ -3404,10 +3447,14 @@
 	}
 
 	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();
 	    }
 	}
@@ -3445,7 +3492,7 @@
 	            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:
@@ -3581,8 +3628,9 @@
 	}
 
 	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;
@@ -3641,8 +3689,9 @@
 	                }
 	            }
 	        }
-	        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'),
@@ -3656,7 +3705,7 @@
 	    }
 	    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);
 	            }
@@ -3747,15 +3796,11 @@
 	        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 => {
@@ -3765,11 +3810,11 @@
 	        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;
@@ -3778,9 +3823,11 @@
 	        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) => {
@@ -3810,28 +3857,23 @@
 	            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 !== exports.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();
@@ -3873,6 +3915,10 @@
 	        setTimeout(() => this.view.refreshSize());
 	    }
 	    destroy() {
+	        if (this.initTimeout) {
+	            clearTimeout(this.initTimeout);
+	            this.initTimeout = null;
+	        }
 	        this.contextMenuController.destroy();
 	        this.view.destroy();
 	    }
@@ -3970,8 +4016,8 @@
 	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: [],