sequential-workflow-designer 0.25.0 → 0.26.1

package/dist/index.umd.js

@@ -202,27 +202,17 @@
 	}
 
 	class ControlBarApi {
-	    static create(state, historyController, stateModifier, viewportApi) {
-	        const api = new ControlBarApi(state, historyController, stateModifier, viewportApi);
+	    static create(state, historyController, stateModifier) {
+	        const api = new ControlBarApi(state, historyController, stateModifier);
 	        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.forward);
 	        return api;
 	    }
-	    constructor(state, historyController, stateModifier, viewportApi) {
+	    constructor(state, historyController, stateModifier) {
 	        this.state = state;
 	        this.historyController = historyController;
 	        this.stateModifier = stateModifier;
-	        this.viewportApi = viewportApi;
 	        this.onStateChanged = new SimpleEvent();
 	    }
-	    resetViewport() {
-	        this.viewportApi.resetViewport();
-	    }
-	    zoomIn() {
-	        this.viewportApi.zoom(true);
-	    }
-	    zoomOut() {
-	        this.viewportApi.zoom(false);
-	    }
 	    isDragDisabled() {
 	        return this.state.isDragDisabled;
 	    }
@@ -693,21 +683,20 @@
 	}
 
 	class ViewportAnimator {
-	    constructor(api) {
-	        this.api = api;
+	    constructor(state) {
+	        this.state = state;
 	    }
 	    execute(target) {
 	        if (this.animation && this.animation.isAlive) {
 	            this.animation.stop();
 	        }
-	        const viewport = this.api.getViewport();
-	        const startPosition = viewport.position;
-	        const startScale = viewport.scale;
+	        const startPosition = this.state.viewport.position;
+	        const startScale = this.state.viewport.scale;
 	        const deltaPosition = startPosition.subtract(target.position);
 	        const deltaScale = startScale - target.scale;
 	        this.animation = animate(150, progress => {
 	            const newScale = startScale - deltaScale * progress;
-	            this.api.setViewport({
+	            this.state.setViewport({
 	                position: startPosition.subtract(deltaPosition.multiplyByScalar(progress)),
 	                scale: newScale
 	            });
@@ -740,23 +729,23 @@
 	}
 
 	class ViewportApi {
-	    constructor(workspaceController, viewportController, api) {
+	    constructor(state, workspaceController, viewportController) {
+	        this.state = state;
 	        this.workspaceController = workspaceController;
 	        this.viewportController = viewportController;
-	        this.api = api;
-	        this.animator = new ViewportAnimator(this.api);
+	        this.animator = new ViewportAnimator(this.state);
 	    }
 	    limitScale(scale) {
 	        return this.viewportController.limitScale(scale);
 	    }
 	    resetViewport() {
 	        const defaultViewport = this.viewportController.getDefault();
-	        this.api.setViewport(defaultViewport);
+	        this.state.setViewport(defaultViewport);
 	    }
 	    zoom(direction) {
 	        const viewport = this.viewportController.getZoomed(direction);
 	        if (viewport) {
-	            this.api.setViewport(viewport);
+	            this.state.setViewport(viewport);
 	        }
 	    }
 	    moveViewportToStep(stepId) {
@@ -769,11 +758,10 @@
 	        this.animator.execute(viewport);
 	    }
 	    handleWheelEvent(e) {
-	        const viewport = this.api.getViewport();
-	        const canvasPosition = this.api.getCanvasPosition();
-	        const newViewport = ZoomByWheelCalculator.calculate(this.viewportController, viewport, canvasPosition, e);
+	        const canvasPosition = this.workspaceController.getCanvasPosition();
+	        const newViewport = ZoomByWheelCalculator.calculate(this.viewportController, this.state.viewport, canvasPosition, e);
 	        if (newViewport) {
-	            this.api.setViewport(newViewport);
+	            this.state.setViewport(newViewport);
 	        }
 	    }
 	}
@@ -783,6 +771,12 @@
 	        this.state = state;
 	        this.workspaceController = workspaceController;
 	    }
+	    getViewport() {
+	        return this.state.viewport;
+	    }
+	    setViewport(viewport) {
+	        this.state.setViewport(viewport);
+	    }
 	    getCanvasPosition() {
 	        return this.workspaceController.getCanvasPosition();
 	    }
@@ -792,12 +786,6 @@
 	    getRootComponentSize() {
 	        return this.workspaceController.getRootComponentSize();
 	    }
-	    getViewport() {
-	        return this.state.viewport;
-	    }
-	    setViewport(viewport) {
-	        this.state.setViewport(viewport);
-	    }
 	    updateRootComponent() {
 	        this.workspaceController.updateRootComponent();
 	    }
@@ -813,9 +801,8 @@
 	    static create(context) {
 	        const workspace = new WorkspaceApi(context.state, context.workspaceController);
 	        const viewportController = context.services.viewportController.create(workspace);
-	        const viewport = new ViewportApi(context.workspaceController, viewportController, 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, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
+	        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);
 	    }
 	    constructor(shadowRoot, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
 	        this.shadowRoot = shadowRoot;
@@ -830,36 +817,15 @@
 	    }
 	}
 
-	class DefinitionValidator {
-	    constructor(configuration, state) {
-	        this.configuration = configuration;
-	        this.state = state;
-	    }
-	    validateStep(step, parentSequence) {
-	        var _a;
-	        if ((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.step) {
-	            return this.configuration.step(step, parentSequence, this.state.definition);
-	        }
-	        return true;
-	    }
-	    validateRoot() {
-	        var _a;
-	        if ((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.root) {
-	            return this.configuration.root(this.state.definition);
-	        }
-	        return true;
-	    }
-	}
-
-	class IconProvider {
-	    constructor(configuration) {
-	        this.configuration = configuration;
+	const TYPE = 'selectStep';
+	class SelectStepBehaviorEndToken {
+	    static is(token) {
+	        return Boolean(token) && token.type === TYPE;
 	    }
-	    getIconUrl(step) {
-	        if (this.configuration.iconUrlProvider) {
-	            return this.configuration.iconUrlProvider(step.componentType, step.type);
-	        }
-	        return null;
+	    constructor(stepId, time) {
+	        this.stepId = stepId;
+	        this.time = time;
+	        this.type = TYPE;
 	    }
 	}
 
@@ -924,349 +890,104 @@
 	    return g;
 	}
 
-	exports.ClickCommandType = void 0;
-	(function (ClickCommandType) {
-	    ClickCommandType[ClickCommandType["selectStep"] = 1] = "selectStep";
-	    ClickCommandType[ClickCommandType["rerenderStep"] = 2] = "rerenderStep";
-	    ClickCommandType[ClickCommandType["openFolder"] = 3] = "openFolder";
-	    ClickCommandType[ClickCommandType["triggerCustomAction"] = 4] = "triggerCustomAction";
-	})(exports.ClickCommandType || (exports.ClickCommandType = {}));
-	exports.PlaceholderDirection = void 0;
-	(function (PlaceholderDirection) {
-	    PlaceholderDirection[PlaceholderDirection["none"] = 0] = "none";
-	    PlaceholderDirection[PlaceholderDirection["in"] = 1] = "in";
-	    PlaceholderDirection[PlaceholderDirection["out"] = 2] = "out";
-	})(exports.PlaceholderDirection || (exports.PlaceholderDirection = {}));
-
-	class StepComponent {
-	    static create(view, stepContext, componentContext) {
-	        const badges = Badges.createForStep(stepContext, view, componentContext);
-	        return new StepComponent(view, stepContext.step, stepContext.parentSequence, view.hasOutput, badges);
+	class ValidationErrorBadgeView {
+	    static create(parent, cfg) {
+	        const g = Dom.svg('g');
+	        const halfOfSize = cfg.size / 2;
+	        const circle = Dom.svg('path', {
+	            class: 'sqd-validation-error',
+	            d: `M 0 ${-halfOfSize} l ${halfOfSize} ${cfg.size} l ${-cfg.size} 0 Z`
+	        });
+	        Dom.translate(circle, halfOfSize, halfOfSize);
+	        g.appendChild(circle);
+	        const icon = Icons.appendPath(g, 'sqd-validation-error-icon-path', Icons.alert, cfg.iconSize);
+	        const offsetX = (cfg.size - cfg.iconSize) / 2;
+	        const offsetY = offsetX * 1.5;
+	        Dom.translate(icon, offsetX, offsetY);
+	        parent.appendChild(g);
+	        return new ValidationErrorBadgeView(parent, g, cfg.size, cfg.size);
 	    }
-	    constructor(view, step, parentSequence, hasOutput, badges) {
-	        this.view = view;
-	        this.step = step;
-	        this.parentSequence = parentSequence;
-	        this.hasOutput = hasOutput;
-	        this.badges = badges;
+	    constructor(parent, g, width, height) {
+	        this.parent = parent;
+	        this.g = g;
+	        this.width = width;
+	        this.height = height;
 	    }
-	    findById(stepId) {
-	        if (this.step.id === stepId) {
-	            return this;
-	        }
-	        if (this.view.sequenceComponents) {
-	            for (const component of this.view.sequenceComponents) {
-	                const result = component.findById(stepId);
-	                if (result) {
-	                    return result;
-	                }
-	            }
-	        }
-	        return null;
+	    destroy() {
+	        this.parent.removeChild(this.g);
 	    }
-	    resolveClick(click) {
-	        if (this.view.sequenceComponents) {
-	            for (const component of this.view.sequenceComponents) {
-	                const result = component.resolveClick(click);
-	                if (result) {
-	                    return result;
-	                }
+	}
+
+	class ValidatorFactory {
+	    static createForStep(stepContext, view, componentContext) {
+	        return () => {
+	            if (!componentContext.validator.validateStep(stepContext.step, stepContext.parentSequence)) {
+	                return false;
 	            }
-	        }
-	        const badgeResult = this.badges.resolveClick(click);
-	        if (badgeResult) {
-	            return badgeResult;
-	        }
-	        const viewResult = this.view.resolveClick(click);
-	        if (viewResult) {
-	            return viewResult === true
-	                ? {
-	                    type: exports.ClickCommandType.selectStep,
-	                    component: this
+	            if (view.haveCollapsedChildren) {
+	                let allChildrenValid = true;
+	                componentContext.definitionWalker.forEachChildren(stepContext.step, (step, _, parentSequence) => {
+	                    if (!componentContext.validator.validateStep(step, parentSequence)) {
+	                        allChildrenValid = false;
+	                        return false;
+	                    }
+	                });
+	                if (!allChildrenValid) {
+	                    return false;
 	                }
-	                : viewResult;
-	        }
-	        return null;
-	    }
-	    resolvePlaceholders(skipComponent, result) {
-	        if (skipComponent !== this) {
-	            if (this.view.sequenceComponents) {
-	                this.view.sequenceComponents.forEach(component => component.resolvePlaceholders(skipComponent, result));
 	            }
-	            if (this.view.placeholders) {
-	                this.view.placeholders.forEach(ph => result.placeholders.push(ph));
-	            }
-	            result.components.push(this);
-	        }
+	            return true;
+	        };
 	    }
-	    setIsDragging(isDragging) {
-	        this.view.setIsDragging(isDragging);
+	    static createForRoot(componentContext) {
+	        return () => {
+	            return componentContext.validator.validateRoot();
+	        };
 	    }
-	    setIsSelected(isSelected) {
-	        this.view.setIsSelected(isSelected);
+	}
+
+	class ValidationErrorBadge {
+	    static createForStep(parentElement, view, stepContext, componentContext, configuration) {
+	        const validator = ValidatorFactory.createForStep(stepContext, view, componentContext);
+	        return new ValidationErrorBadge(parentElement, validator, configuration);
 	    }
-	    setIsDisabled(isDisabled) {
-	        this.view.setIsDisabled(isDisabled);
+	    static createForRoot(parentElement, componentContext, configuration) {
+	        const validator = ValidatorFactory.createForRoot(componentContext);
+	        return new ValidationErrorBadge(parentElement, validator, configuration);
 	    }
-	    updateBadges(result) {
-	        if (this.view.sequenceComponents) {
-	            this.view.sequenceComponents.forEach(component => component.updateBadges(result));
+	    constructor(parentElement, validator, configuration) {
+	        this.parentElement = parentElement;
+	        this.validator = validator;
+	        this.configuration = configuration;
+	        this.view = null;
+	    }
+	    update(result) {
+	        const isValid = this.validator();
+	        if (isValid) {
+	            if (this.view) {
+	                this.view.destroy();
+	                this.view = null;
+	            }
 	        }
-	        this.badges.update(result);
+	        else if (!this.view) {
+	            this.view = ValidationErrorBadgeView.create(this.parentElement, this.configuration);
+	        }
+	        return isValid && result;
 	    }
-	}
-
-	class StepComponentViewContextFactory {
-	    static create(stepContext, componentContext) {
-	        const preferenceKeyPrefix = stepContext.step.id + ':';
-	        return {
-	            i18n: componentContext.i18n,
-	            getStepIconUrl: () => componentContext.iconProvider.getIconUrl(stepContext.step),
-	            getStepName: () => componentContext.i18n(`step.${stepContext.step.type}.name`, stepContext.step.name),
-	            createSequenceComponent: (parentElement, sequence) => {
-	                const sequenceContext = {
-	                    sequence,
-	                    depth: stepContext.depth + 1,
-	                    isInputConnected: true,
-	                    isOutputConnected: stepContext.isOutputConnected,
-	                    isPreview: stepContext.isPreview
-	                };
-	                return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
-	            },
-	            createRegionComponentView(parentElement, componentClassName, contentFactory) {
-	                return componentContext.services.regionComponentView.create(parentElement, componentClassName, stepContext, this, contentFactory);
-	            },
-	            createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
-	            getPreference: (key) => componentContext.preferenceStorage.getItem(preferenceKeyPrefix + key),
-	            setPreference: (key, value) => componentContext.preferenceStorage.setItem(preferenceKeyPrefix + key, value)
-	        };
+	    resolveClick() {
+	        return null;
 	    }
 	}
 
-	class StepComponentFactory {
-	    constructor(stepExtensionResolver) {
-	        this.stepExtensionResolver = stepExtensionResolver;
+	const defaultConfiguration$7 = {
+	    view: {
+	        size: 22,
+	        iconSize: 12
 	    }
-	    create(parentElement, stepContext, componentContext) {
-	        const viewContext = StepComponentViewContextFactory.create(stepContext, componentContext);
-	        const extension = this.stepExtensionResolver.resolve(stepContext.step.componentType);
-	        const view = extension.createComponentView(parentElement, stepContext, viewContext);
-	        const wrappedView = componentContext.services.stepComponentViewWrapper.wrap(view, stepContext);
-	        return StepComponent.create(wrappedView, stepContext, componentContext);
-	    }
-	}
-
-	class ComponentContext {
-	    static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
-	        const validator = new DefinitionValidator(configuration.validator, state);
-	        const iconProvider = new IconProvider(configuration.steps);
-	        const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
-	        return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
-	    }
-	    constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
-	        this.shadowRoot = shadowRoot;
-	        this.validator = validator;
-	        this.iconProvider = iconProvider;
-	        this.placeholderController = placeholderController;
-	        this.stepComponentFactory = stepComponentFactory;
-	        this.definitionWalker = definitionWalker;
-	        this.services = services;
-	        this.preferenceStorage = preferenceStorage;
-	        this.i18n = i18n;
-	    }
-	}
-
-	class CustomActionController {
-	    constructor(configuration, state, stateModifier) {
-	        this.configuration = configuration;
-	        this.state = state;
-	        this.stateModifier = stateModifier;
-	    }
-	    trigger(action, step, sequence) {
-	        const handler = this.configuration.customActionHandler;
-	        if (!handler) {
-	            console.warn(`Custom action handler is not defined (action type: ${action.type})`);
-	            return;
-	        }
-	        const context = this.createCustomActionHandlerContext();
-	        handler(action, step, sequence, context);
-	    }
-	    createCustomActionHandlerContext() {
-	        return {
-	            notifyStepNameChanged: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepNameChanged, stepId, false),
-	            notifyStepPropertiesChanged: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepPropertyChanged, stepId, false),
-	            notifyStepInserted: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepInserted, stepId, true),
-	            notifyStepMoved: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepMoved, stepId, true),
-	            notifyStepDeleted: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepDeleted, stepId, true)
-	        };
-	    }
-	    notifyStepChanged(changeType, stepId, updateDependencies) {
-	        if (!stepId) {
-	            throw new Error('Step id is empty');
-	        }
-	        this.state.notifyDefinitionChanged(changeType, stepId);
-	        if (updateDependencies) {
-	            this.stateModifier.updateDependencies();
-	        }
-	    }
-	}
-
-	class EditorView {
-	    static create(parent) {
-	        return new EditorView(parent);
-	    }
-	    constructor(parent) {
-	        this.parent = parent;
-	        this.currentContainer = null;
-	    }
-	    setContent(content, className) {
-	        const container = Dom.element('div', {
-	            class: className
-	        });
-	        container.appendChild(content);
-	        if (this.currentContainer) {
-	            this.parent.removeChild(this.currentContainer);
-	        }
-	        this.parent.appendChild(container);
-	        this.currentContainer = container;
-	    }
-	    destroy() {
-	        if (this.currentContainer) {
-	            this.parent.removeChild(this.currentContainer);
-	        }
-	    }
-	}
-
-	class Editor {
-	    static create(parent, api, stepEditorClassName, stepEditorProvider, rootEditorClassName, rootEditorProvider, customSelectedStepIdProvider) {
-	        const view = EditorView.create(parent);
-	        function render(step) {
-	            const definition = api.getDefinition();
-	            let content;
-	            let className;
-	            if (step) {
-	                const stepContext = api.createStepEditorContext(step.id);
-	                content = stepEditorProvider(step, stepContext, definition, api.isReadonly());
-	                className = stepEditorClassName;
-	            }
-	            else {
-	                const rootContext = api.createRootEditorContext();
-	                content = rootEditorProvider(definition, rootContext, api.isReadonly());
-	                className = rootEditorClassName;
-	            }
-	            view.setContent(content, className);
-	        }
-	        const renderer = api.runRenderer(step => render(step), customSelectedStepIdProvider);
-	        return new Editor(view, renderer);
-	    }
-	    constructor(view, renderer) {
-	        this.view = view;
-	        this.renderer = renderer;
-	    }
-	    destroy() {
-	        this.view.destroy();
-	        this.renderer.destroy();
-	    }
-	}
-
-	class ValidationErrorBadgeView {
-	    static create(parent, cfg) {
-	        const g = Dom.svg('g');
-	        const halfOfSize = cfg.size / 2;
-	        const circle = Dom.svg('path', {
-	            class: 'sqd-validation-error',
-	            d: `M 0 ${-halfOfSize} l ${halfOfSize} ${cfg.size} l ${-cfg.size} 0 Z`
-	        });
-	        Dom.translate(circle, halfOfSize, halfOfSize);
-	        g.appendChild(circle);
-	        const icon = Icons.appendPath(g, 'sqd-validation-error-icon-path', Icons.alert, cfg.iconSize);
-	        const offsetX = (cfg.size - cfg.iconSize) / 2;
-	        const offsetY = offsetX * 1.5;
-	        Dom.translate(icon, offsetX, offsetY);
-	        parent.appendChild(g);
-	        return new ValidationErrorBadgeView(parent, g, cfg.size, cfg.size);
-	    }
-	    constructor(parent, g, width, height) {
-	        this.parent = parent;
-	        this.g = g;
-	        this.width = width;
-	        this.height = height;
-	    }
-	    destroy() {
-	        this.parent.removeChild(this.g);
-	    }
-	}
-
-	class ValidatorFactory {
-	    static createForStep(stepContext, view, componentContext) {
-	        return () => {
-	            if (!componentContext.validator.validateStep(stepContext.step, stepContext.parentSequence)) {
-	                return false;
-	            }
-	            if (view.haveCollapsedChildren) {
-	                let allChildrenValid = true;
-	                componentContext.definitionWalker.forEachChildren(stepContext.step, (step, _, parentSequence) => {
-	                    if (!componentContext.validator.validateStep(step, parentSequence)) {
-	                        allChildrenValid = false;
-	                        return false;
-	                    }
-	                });
-	                if (!allChildrenValid) {
-	                    return false;
-	                }
-	            }
-	            return true;
-	        };
-	    }
-	    static createForRoot(componentContext) {
-	        return () => {
-	            return componentContext.validator.validateRoot();
-	        };
-	    }
-	}
-
-	class ValidationErrorBadge {
-	    static createForStep(parentElement, view, stepContext, componentContext, configuration) {
-	        const validator = ValidatorFactory.createForStep(stepContext, view, componentContext);
-	        return new ValidationErrorBadge(parentElement, validator, configuration);
-	    }
-	    static createForRoot(parentElement, componentContext, configuration) {
-	        const validator = ValidatorFactory.createForRoot(componentContext);
-	        return new ValidationErrorBadge(parentElement, validator, configuration);
-	    }
-	    constructor(parentElement, validator, configuration) {
-	        this.parentElement = parentElement;
-	        this.validator = validator;
-	        this.configuration = configuration;
-	        this.view = null;
-	    }
-	    update(result) {
-	        const isValid = this.validator();
-	        if (isValid) {
-	            if (this.view) {
-	                this.view.destroy();
-	                this.view = null;
-	            }
-	        }
-	        else if (!this.view) {
-	            this.view = ValidationErrorBadgeView.create(this.parentElement, this.configuration);
-	        }
-	        return isValid && result;
-	    }
-	    resolveClick() {
-	        return null;
-	    }
-	}
-
-	const defaultConfiguration$7 = {
-	    view: {
-	        size: 22,
-	        iconSize: 12
-	    }
-	};
-	class ValidationErrorBadgeExtension {
-	    static create(configuration) {
-	        return new ValidationErrorBadgeExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$7);
+	};
+	class ValidationErrorBadgeExtension {
+	    static create(configuration) {
+	        return new ValidationErrorBadgeExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$7);
 	    }
 	    constructor(configuration) {
 	        this.configuration = configuration;
@@ -1336,54 +1057,58 @@
 	    }
 	}
 
+	const EPS = 0.5; // Epsilon, a tiny offset to avoid rendering issues
 	class JoinView {
 	    static createStraightJoin(parent, start, height) {
+	        const dy = Math.sign(height);
 	        const join = Dom.svg('line', {
 	            class: 'sqd-join',
 	            x1: start.x,
-	            y1: start.y,
+	            y1: start.y - EPS * dy,
 	            x2: start.x,
-	            y2: start.y + height
+	            y2: start.y + height + EPS * dy
 	        });
 	        parent.insertBefore(join, parent.firstChild);
 	    }
 	    static createJoins(parent, start, targets) {
 	        const firstTarget = targets[0];
 	        const h = Math.abs(firstTarget.y - start.y) / 2; // half height
-	        const y = Math.sign(firstTarget.y - start.y); // y direction
+	        const dy = Math.sign(firstTarget.y - start.y); // direction y
 	        switch (targets.length) {
 	            case 1:
 	                if (start.x === targets[0].x) {
-	                    JoinView.createStraightJoin(parent, start, firstTarget.y * y);
+	                    JoinView.createStraightJoin(parent, start, firstTarget.y * dy);
 	                }
 	                else {
-	                    appendCurvedJoins(parent, start, targets, h, y);
+	                    appendCurvedJoins(parent, start, targets, h, dy);
 	                }
 	                break;
 	            case 2:
-	                appendCurvedJoins(parent, start, targets, h, y);
+	                appendCurvedJoins(parent, start, targets, h, dy);
 	                break;
 	            default:
 	                {
 	                    const f = targets[0]; // first
 	                    const l = targets[targets.length - 1]; // last
-	                    appendJoin(parent, `M ${f.x} ${f.y} q ${h * 0.3} ${h * -y * 0.8} ${h} ${h * -y} ` +
-	                        `l ${l.x - f.x - h * 2} 0 q ${h * 0.8} ${-h * -y * 0.3} ${h} ${-h * -y}`);
+	                    const eps = EPS * dy;
+	                    appendJoin(parent, `M ${f.x} ${f.y + eps} l 0 ${-eps} q ${h * 0.3} ${h * -dy * 0.8} ${h} ${h * -dy} ` +
+	                        `l ${l.x - f.x - h * 2} 0 q ${h * 0.8} ${-h * -dy * 0.3} ${h} ${-h * -dy} l 0 ${eps}`);
 	                    for (let i = 1; i < targets.length - 1; i++) {
-	                        JoinView.createStraightJoin(parent, targets[i], h * -y);
+	                        JoinView.createStraightJoin(parent, targets[i], h * -dy);
 	                    }
-	                    JoinView.createStraightJoin(parent, start, h * y);
+	                    JoinView.createStraightJoin(parent, start, h * dy);
 	                }
 	                break;
 	        }
 	    }
 	}
-	function appendCurvedJoins(parent, start, targets, h, y) {
+	function appendCurvedJoins(parent, start, targets, h, dy) {
+	    const eps = EPS * dy;
 	    for (const target of targets) {
-	        const l = Math.abs(target.x - start.x) - h * 2; // line size
-	        const x = Math.sign(target.x - start.x); // x direction
-	        appendJoin(parent, `M ${start.x} ${start.y} q ${x * h * 0.3} ${y * h * 0.8} ${x * h} ${y * h} ` +
-	            `l ${x * l} 0 q ${x * h * 0.7} ${y * h * 0.2} ${x * h} ${y * h}`);
+	        const l = Math.abs(target.x - start.x) - h * 2; // straight line length
+	        const dx = Math.sign(target.x - start.x); // direction x
+	        appendJoin(parent, `M ${start.x} ${start.y - eps} l 0 ${eps} q ${dx * h * 0.3} ${dy * h * 0.8} ${dx * h} ${dy * h} ` +
+	            `l ${dx * l} 0 q ${dx * h * 0.7} ${dy * h * 0.2} ${dx * h} ${dy * h} l 0 ${eps}`);
 	    }
 	}
 	function appendJoin(parent, d) {
@@ -1566,6 +1291,20 @@
 	    }
 	}
 
+	exports.ClickCommandType = void 0;
+	(function (ClickCommandType) {
+	    ClickCommandType[ClickCommandType["selectStep"] = 1] = "selectStep";
+	    ClickCommandType[ClickCommandType["rerenderStep"] = 2] = "rerenderStep";
+	    ClickCommandType[ClickCommandType["openFolder"] = 3] = "openFolder";
+	    ClickCommandType[ClickCommandType["triggerCustomAction"] = 4] = "triggerCustomAction";
+	})(exports.ClickCommandType || (exports.ClickCommandType = {}));
+	exports.PlaceholderDirection = void 0;
+	(function (PlaceholderDirection) {
+	    PlaceholderDirection[PlaceholderDirection["none"] = 0] = "none";
+	    PlaceholderDirection[PlaceholderDirection["in"] = 1] = "in";
+	    PlaceholderDirection[PlaceholderDirection["out"] = 2] = "out";
+	})(exports.PlaceholderDirection || (exports.PlaceholderDirection = {}));
+
 	class StartStopRootComponentView {
 	    static create(parent, sequence, parentPlaceIndicator, context, cfg) {
 	        const g = Dom.svg('g', {
@@ -2044,28 +1783,106 @@
 	    }
 	}
 
-	class StepExtensionResolver {
-	    static create(services) {
-	        const dict = {};
-	        for (let i = services.steps.length - 1; i >= 0; i--) {
-	            const extension = services.steps[i];
-	            dict[extension.componentType] = extension;
-	        }
-	        return new StepExtensionResolver(dict);
+	class StepComponent {
+	    static create(view, stepContext, componentContext) {
+	        const badges = Badges.createForStep(stepContext, view, componentContext);
+	        return new StepComponent(view, stepContext.step, stepContext.parentSequence, view.hasOutput, badges);
 	    }
-	    constructor(dict) {
-	        this.dict = dict;
+	    constructor(view, step, parentSequence, hasOutput, badges) {
+	        this.view = view;
+	        this.step = step;
+	        this.parentSequence = parentSequence;
+	        this.hasOutput = hasOutput;
+	        this.badges = badges;
 	    }
-	    resolve(componentType) {
-	        const extension = this.dict[componentType];
-	        if (!extension) {
-	            throw new Error(`Not supported component type: ${componentType}`);
+	    findById(stepId) {
+	        if (this.step.id === stepId) {
+	            return this;
 	        }
-	        return extension;
-	    }
-	}
-
-	class RectPlaceholderView {
+	        if (this.view.sequenceComponents) {
+	            for (const component of this.view.sequenceComponents) {
+	                const result = component.findById(stepId);
+	                if (result) {
+	                    return result;
+	                }
+	            }
+	        }
+	        return null;
+	    }
+	    resolveClick(click) {
+	        if (this.view.sequenceComponents) {
+	            for (const component of this.view.sequenceComponents) {
+	                const result = component.resolveClick(click);
+	                if (result) {
+	                    return result;
+	                }
+	            }
+	        }
+	        const badgeResult = this.badges.resolveClick(click);
+	        if (badgeResult) {
+	            return badgeResult;
+	        }
+	        const viewResult = this.view.resolveClick(click);
+	        if (viewResult) {
+	            return viewResult === true
+	                ? {
+	                    type: exports.ClickCommandType.selectStep,
+	                    component: this
+	                }
+	                : viewResult;
+	        }
+	        return null;
+	    }
+	    resolvePlaceholders(skipComponent, result) {
+	        if (skipComponent !== this) {
+	            if (this.view.sequenceComponents) {
+	                this.view.sequenceComponents.forEach(component => component.resolvePlaceholders(skipComponent, result));
+	            }
+	            if (this.view.placeholders) {
+	                this.view.placeholders.forEach(ph => result.placeholders.push(ph));
+	            }
+	            result.components.push(this);
+	        }
+	    }
+	    setIsDragging(isDragging) {
+	        this.view.setIsDragging(isDragging);
+	    }
+	    setIsSelected(isSelected) {
+	        this.view.setIsSelected(isSelected);
+	    }
+	    setIsDisabled(isDisabled) {
+	        this.view.setIsDisabled(isDisabled);
+	    }
+	    updateBadges(result) {
+	        if (this.view.sequenceComponents) {
+	            this.view.sequenceComponents.forEach(component => component.updateBadges(result));
+	        }
+	        this.badges.update(result);
+	    }
+	}
+
+	class StepExtensionResolver {
+	    static create(services) {
+	        const dict = {};
+	        for (let i = services.steps.length - 1; i >= 0; i--) {
+	            const extension = services.steps[i];
+	            dict[extension.componentType] = extension;
+	        }
+	        return new StepExtensionResolver(dict);
+	    }
+	    constructor(dict) {
+	        this.dict = dict;
+	    }
+	    resolve(componentType) {
+	        const extension = this.dict[componentType];
+	        if (!extension) {
+	            throw new Error(`Not supported component type: ${componentType}`);
+	        }
+	        return extension;
+	    }
+	}
+
+	class RectPlaceholderView {
 	    static create(parent, width, height, radius, iconSize, direction) {
 	        const g = Dom.svg('g', {
 	            visibility: 'hidden',
@@ -2124,63 +1941,414 @@
 	    resolveClick() {
 	        return null;
 	    }
-	}
-
-	class DefaultRegionView {
-	    static create(parent, widths, height) {
-	        const totalWidth = widths.reduce((result, width) => result + width, 0);
-	        const lines = [
-	            drawLine(parent, 0, 0, totalWidth, 0),
-	            drawLine(parent, 0, 0, 0, height),
-	            drawLine(parent, 0, height, totalWidth, height),
-	            drawLine(parent, totalWidth, 0, totalWidth, height)
-	        ];
-	        let offsetX = widths[0];
-	        for (let i = 1; i < widths.length; i++) {
-	            lines.push(drawLine(parent, offsetX, 0, offsetX, height));
-	            offsetX += widths[i];
+	}
+
+	class DefaultRegionView {
+	    static create(parent, widths, height) {
+	        const totalWidth = widths.reduce((result, width) => result + width, 0);
+	        const lines = [
+	            drawLine(parent, 0, 0, totalWidth, 0),
+	            drawLine(parent, 0, 0, 0, height),
+	            drawLine(parent, 0, height, totalWidth, height),
+	            drawLine(parent, totalWidth, 0, totalWidth, height)
+	        ];
+	        let offsetX = widths[0];
+	        for (let i = 1; i < widths.length; i++) {
+	            lines.push(drawLine(parent, offsetX, 0, offsetX, height));
+	            offsetX += widths[i];
+	        }
+	        return new DefaultRegionView(lines, totalWidth, height);
+	    }
+	    constructor(lines, width, height) {
+	        this.lines = lines;
+	        this.width = width;
+	        this.height = height;
+	    }
+	    getClientPosition() {
+	        return getAbsolutePosition(this.lines[0]);
+	    }
+	    resolveClick(click) {
+	        const regionPosition = this.getClientPosition();
+	        const d = click.position.subtract(regionPosition);
+	        if (d.x >= 0 && d.y >= 0 && d.x < this.width * click.scale && d.y < this.height * click.scale) {
+	            return true;
+	        }
+	        return null;
+	    }
+	    setIsSelected(isSelected) {
+	        this.lines.forEach(region => {
+	            Dom.toggleClass(region, isSelected, 'sqd-selected');
+	        });
+	    }
+	}
+	function drawLine(parent, x1, y1, x2, y2) {
+	    const line = Dom.svg('line', {
+	        class: 'sqd-region',
+	        x1,
+	        y1,
+	        x2,
+	        y2
+	    });
+	    parent.insertBefore(line, parent.firstChild);
+	    return line;
+	}
+
+	class DefaultRegionComponentViewExtension {
+	    create(parentElement, componentClassName, stepContext, _, contentFactory) {
+	        const g = ComponentDom.stepG(componentClassName, stepContext.step.type, stepContext.step.id);
+	        parentElement.appendChild(g);
+	        return contentFactory(g, DefaultRegionView.create);
+	    }
+	}
+
+	class DefaultViewportControllerDesignerExtension {
+	    static create(configuration) {
+	        return new DefaultViewportControllerDesignerExtension(DefaultViewportControllerExtension.create(configuration));
+	    }
+	    constructor(viewportController) {
+	        this.viewportController = viewportController;
+	    }
+	}
+
+	class LineGrid {
+	    static create(size) {
+	        const path = Dom.svg('path', {
+	            class: 'sqd-line-grid-path',
+	            fill: 'none'
+	        });
+	        return new LineGrid(size, path);
+	    }
+	    constructor(size, element) {
+	        this.size = size;
+	        this.element = element;
+	    }
+	    setScale(_, scaledSize) {
+	        Dom.attrs(this.element, {
+	            d: `M ${scaledSize.x} 0 L 0 0 0 ${scaledSize.y}`
+	        });
+	    }
+	}
+
+	const defaultConfiguration$4 = {
+	    gridSizeX: 48,
+	    gridSizeY: 48
+	};
+	class LineGridExtension {
+	    static create(configuration) {
+	        return new LineGridExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$4);
+	    }
+	    constructor(configuration) {
+	        this.configuration = configuration;
+	    }
+	    create() {
+	        const size = new Vector(this.configuration.gridSizeX, this.configuration.gridSizeY);
+	        return LineGrid.create(size);
+	    }
+	}
+
+	class LineGridDesignerExtension {
+	    static create(configuration) {
+	        const grid = LineGridExtension.create(configuration);
+	        return new LineGridDesignerExtension(grid);
+	    }
+	    constructor(grid) {
+	        this.grid = grid;
+	    }
+	}
+
+	class StartStopRootComponentDesignerExtension {
+	    static create(configuration) {
+	        return new StartStopRootComponentDesignerExtension(StartStopRootComponentExtension.create(configuration));
+	    }
+	    constructor(rootComponent) {
+	        this.rootComponent = rootComponent;
+	    }
+	}
+
+	const defaultConfiguration$3 = {
+	    view: {
+	        paddingTop: 20,
+	        paddingX: 20,
+	        inputSize: 18,
+	        inputIconSize: 14,
+	        label: {
+	            height: 22,
+	            paddingX: 10,
+	            minWidth: 50,
+	            radius: 10
+	        }
+	    }
+	};
+	class ContainerStepExtension {
+	    static create(configuration) {
+	        return new ContainerStepExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$3);
+	    }
+	    constructor(configuration) {
+	        this.configuration = configuration;
+	        this.componentType = 'container';
+	        this.createComponentView = createContainerStepComponentViewFactory(this.configuration.view);
+	    }
+	}
+
+	const defaultConfiguration$2 = {
+	    view: {
+	        minContainerWidth: 40,
+	        paddingX: 20,
+	        paddingTop: 20,
+	        connectionHeight: 16,
+	        inputSize: 18,
+	        inputIconSize: 14,
+	        branchNameLabel: {
+	            height: 22,
+	            paddingX: 10,
+	            minWidth: 50,
+	            radius: 10
+	        },
+	        nameLabel: {
+	            height: 22,
+	            paddingX: 10,
+	            minWidth: 50,
+	            radius: 10
+	        }
+	    }
+	};
+	class SwitchStepExtension {
+	    static create(configuration) {
+	        return new SwitchStepExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$2);
+	    }
+	    constructor(configuration) {
+	        this.configuration = configuration;
+	        this.componentType = 'switch';
+	        this.createComponentView = createSwitchStepComponentViewFactory(this.configuration.view);
+	    }
+	}
+
+	const defaultConfiguration$1 = {
+	    view: {
+	        paddingLeft: 12,
+	        paddingRight: 12,
+	        paddingY: 10,
+	        textMarginLeft: 12,
+	        minTextWidth: 70,
+	        iconSize: 22,
+	        radius: 5,
+	        inputSize: 14,
+	        outputSize: 10
+	    }
+	};
+	class TaskStepExtension {
+	    static create(configuration) {
+	        return new TaskStepExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$1);
+	    }
+	    constructor(configuration) {
+	        this.configuration = configuration;
+	        this.componentType = 'task';
+	        this.createComponentView = createTaskStepComponentViewFactory(false, this.configuration.view);
+	    }
+	}
+
+	class StepsDesignerExtension {
+	    static create(configuration) {
+	        const steps = [];
+	        if (configuration.container) {
+	            steps.push(ContainerStepExtension.create(configuration.container));
+	        }
+	        if (configuration.switch) {
+	            steps.push(SwitchStepExtension.create(configuration.switch));
+	        }
+	        if (configuration.task) {
+	            steps.push(TaskStepExtension.create(configuration.task));
+	        }
+	        return new StepsDesignerExtension(steps);
+	    }
+	    constructor(steps) {
+	        this.steps = steps;
+	    }
+	}
+
+	class DefinitionValidator {
+	    constructor(configuration, state) {
+	        this.configuration = configuration;
+	        this.state = state;
+	    }
+	    validateStep(step, parentSequence) {
+	        var _a;
+	        if ((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.step) {
+	            return this.configuration.step(step, parentSequence, this.state.definition);
+	        }
+	        return true;
+	    }
+	    validateRoot() {
+	        var _a;
+	        if ((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.root) {
+	            return this.configuration.root(this.state.definition);
+	        }
+	        return true;
+	    }
+	}
+
+	class IconProvider {
+	    constructor(configuration) {
+	        this.configuration = configuration;
+	    }
+	    getIconUrl(step) {
+	        if (this.configuration.iconUrlProvider) {
+	            return this.configuration.iconUrlProvider(step.componentType, step.type);
+	        }
+	        return null;
+	    }
+	}
+
+	class StepComponentViewContextFactory {
+	    static create(stepContext, componentContext) {
+	        const preferenceKeyPrefix = stepContext.step.id + ':';
+	        return {
+	            i18n: componentContext.i18n,
+	            getStepIconUrl: () => componentContext.iconProvider.getIconUrl(stepContext.step),
+	            getStepName: () => componentContext.i18n(`step.${stepContext.step.type}.name`, stepContext.step.name),
+	            createSequenceComponent: (parentElement, sequence) => {
+	                const sequenceContext = {
+	                    sequence,
+	                    depth: stepContext.depth + 1,
+	                    isInputConnected: true,
+	                    isOutputConnected: stepContext.isOutputConnected,
+	                    isPreview: stepContext.isPreview
+	                };
+	                return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
+	            },
+	            createRegionComponentView(parentElement, componentClassName, contentFactory) {
+	                return componentContext.services.regionComponentView.create(parentElement, componentClassName, stepContext, this, contentFactory);
+	            },
+	            createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
+	            getPreference: (key) => componentContext.preferenceStorage.getItem(preferenceKeyPrefix + key),
+	            setPreference: (key, value) => componentContext.preferenceStorage.setItem(preferenceKeyPrefix + key, value)
+	        };
+	    }
+	}
+
+	class StepComponentFactory {
+	    constructor(stepExtensionResolver) {
+	        this.stepExtensionResolver = stepExtensionResolver;
+	    }
+	    create(parentElement, stepContext, componentContext) {
+	        const viewContext = StepComponentViewContextFactory.create(stepContext, componentContext);
+	        const extension = this.stepExtensionResolver.resolve(stepContext.step.componentType);
+	        const view = extension.createComponentView(parentElement, stepContext, viewContext);
+	        const wrappedView = componentContext.services.stepComponentViewWrapper.wrap(view, stepContext);
+	        return StepComponent.create(wrappedView, stepContext, componentContext);
+	    }
+	}
+
+	class ComponentContext {
+	    static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
+	        const validator = new DefinitionValidator(configuration.validator, state);
+	        const iconProvider = new IconProvider(configuration.steps);
+	        const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
+	        return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
+	    }
+	    constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
+	        this.shadowRoot = shadowRoot;
+	        this.validator = validator;
+	        this.iconProvider = iconProvider;
+	        this.placeholderController = placeholderController;
+	        this.stepComponentFactory = stepComponentFactory;
+	        this.definitionWalker = definitionWalker;
+	        this.services = services;
+	        this.preferenceStorage = preferenceStorage;
+	        this.i18n = i18n;
+	    }
+	}
+
+	class CustomActionController {
+	    constructor(configuration, state, stateModifier) {
+	        this.configuration = configuration;
+	        this.state = state;
+	        this.stateModifier = stateModifier;
+	    }
+	    trigger(action, step, sequence) {
+	        const handler = this.configuration.customActionHandler;
+	        if (!handler) {
+	            console.warn(`Custom action handler is not defined (action type: ${action.type})`);
+	            return;
+	        }
+	        const context = this.createCustomActionHandlerContext();
+	        handler(action, step, sequence, context);
+	    }
+	    createCustomActionHandlerContext() {
+	        return {
+	            notifyStepNameChanged: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepNameChanged, stepId, false),
+	            notifyStepPropertiesChanged: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepPropertyChanged, stepId, false),
+	            notifyStepInserted: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepInserted, stepId, true),
+	            notifyStepMoved: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepMoved, stepId, true),
+	            notifyStepDeleted: (stepId) => this.notifyStepChanged(exports.DefinitionChangeType.stepDeleted, stepId, true)
+	        };
+	    }
+	    notifyStepChanged(changeType, stepId, updateDependencies) {
+	        if (!stepId) {
+	            throw new Error('Step id is empty');
+	        }
+	        this.state.notifyDefinitionChanged(changeType, stepId);
+	        if (updateDependencies) {
+	            this.stateModifier.updateDependencies();
 	        }
-	        return new DefaultRegionView(lines, totalWidth, height);
 	    }
-	    constructor(lines, width, height) {
-	        this.lines = lines;
-	        this.width = width;
-	        this.height = height;
+	}
+
+	class EditorView {
+	    static create(parent) {
+	        return new EditorView(parent);
 	    }
-	    getClientPosition() {
-	        return getAbsolutePosition(this.lines[0]);
+	    constructor(parent) {
+	        this.parent = parent;
+	        this.currentContainer = null;
 	    }
-	    resolveClick(click) {
-	        const regionPosition = this.getClientPosition();
-	        const d = click.position.subtract(regionPosition);
-	        if (d.x >= 0 && d.y >= 0 && d.x < this.width * click.scale && d.y < this.height * click.scale) {
-	            return true;
+	    setContent(content, className) {
+	        const container = Dom.element('div', {
+	            class: className
+	        });
+	        container.appendChild(content);
+	        if (this.currentContainer) {
+	            this.parent.removeChild(this.currentContainer);
 	        }
-	        return null;
+	        this.parent.appendChild(container);
+	        this.currentContainer = container;
 	    }
-	    setIsSelected(isSelected) {
-	        this.lines.forEach(region => {
-	            Dom.toggleClass(region, isSelected, 'sqd-selected');
-	        });
+	    destroy() {
+	        if (this.currentContainer) {
+	            this.parent.removeChild(this.currentContainer);
+	        }
 	    }
-	}
-	function drawLine(parent, x1, y1, x2, y2) {
-	    const line = Dom.svg('line', {
-	        class: 'sqd-region',
-	        x1,
-	        y1,
-	        x2,
-	        y2
-	    });
-	    parent.insertBefore(line, parent.firstChild);
-	    return line;
 	}
 
-	class DefaultRegionComponentViewExtension {
-	    create(parentElement, componentClassName, stepContext, _, contentFactory) {
-	        const g = ComponentDom.stepG(componentClassName, stepContext.step.type, stepContext.step.id);
-	        parentElement.appendChild(g);
-	        return contentFactory(g, DefaultRegionView.create);
+	class Editor {
+	    static create(parent, api, stepEditorClassName, stepEditorProvider, rootEditorClassName, rootEditorProvider, customSelectedStepIdProvider) {
+	        const view = EditorView.create(parent);
+	        function render(step) {
+	            const definition = api.getDefinition();
+	            let content;
+	            let className;
+	            if (step) {
+	                const stepContext = api.createStepEditorContext(step.id);
+	                content = stepEditorProvider(step, stepContext, definition, api.isReadonly());
+	                className = stepEditorClassName;
+	            }
+	            else {
+	                const rootContext = api.createRootEditorContext();
+	                content = rootEditorProvider(definition, rootContext, api.isReadonly());
+	                className = rootEditorClassName;
+	            }
+	            view.setContent(content, className);
+	        }
+	        const renderer = api.runRenderer(step => render(step), customSelectedStepIdProvider);
+	        return new Editor(view, renderer);
+	    }
+	    constructor(view, renderer) {
+	        this.view = view;
+	        this.renderer = renderer;
+	    }
+	    destroy() {
+	        this.view.destroy();
+	        this.renderer.destroy();
 	    }
 	}
 
@@ -2412,6 +2580,8 @@
 	    constructor(dom, shadowRoot) {
 	        this.dom = dom;
 	        this.shadowRoot = shadowRoot;
+	        this.previousEndToken = null;
+	        this.state = null;
 	        this.onMouseMove = (e) => {
 	            e.preventDefault();
 	            e.stopPropagation();
@@ -2483,7 +2653,7 @@
 	        const delta = this.state.startPosition.subtract(position);
 	        const newBehavior = this.state.behavior.onMove(delta);
 	        if (newBehavior) {
-	            this.state.behavior.onEnd(true, null);
+	            this.state.behavior.onEnd(true, null, null);
 	            this.state.behavior = newBehavior;
 	            this.state.startPosition = position;
 	            this.state.behavior.onStart(this.state.startPosition);
@@ -2497,8 +2667,9 @@
 	            this.unbind(this.shadowRoot);
 	        }
 	        this.unbind(window);
-	        this.state.behavior.onEnd(interrupt, element);
-	        this.state = undefined;
+	        const endToken = this.state.behavior.onEnd(interrupt, element, this.previousEndToken);
+	        this.state = null;
+	        this.previousEndToken = endToken || null;
 	    }
 	}
 
@@ -3174,9 +3345,11 @@
 	        }
 	    }
 	    onEnd(interrupt) {
-	        if (!interrupt) {
-	            this.stateModifier.trySelectStep(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence);
+	        if (interrupt) {
+	            return;
 	        }
+	        this.stateModifier.trySelectStep(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence);
+	        return new SelectStepBehaviorEndToken(this.pressedStepComponent.step.id, Date.now());
 	    }
 	}
 
@@ -3489,10 +3662,7 @@
 	            const zoomRealPoint = zoomPoint
 	                .divideByScalar(this.state.lastViewport.scale)
 	                .subtract(this.state.lastViewport.position.divideByScalar(this.state.lastViewport.scale));
-	            const position = zoomRealPoint
-	                .multiplyByScalar(-scale)
-	                .add(zoomPoint)
-	                .add(deltaCenterPoint.divideByScalar(this.state.lastViewport.scale));
+	            const position = zoomRealPoint.multiplyByScalar(-scale).add(zoomPoint).add(deltaCenterPoint);
 	            const newViewport = {
 	                position,
 	                scale
@@ -3545,13 +3715,14 @@
 	        var _a;
 	        const view = WorkspaceView.create(parent, designerContext.componentContext);
 	        const clickBehaviorResolver = new ClickBehaviorResolver(designerContext);
+	        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)
 	            ? 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, api.viewport, designerContext.services);
+	        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();
@@ -3567,7 +3738,7 @@
 	        view.bindContextMenu(workspace.onContextMenu);
 	        return workspace;
 	    }
-	    constructor(view, definitionWalker, state, behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, viewportApi, services) {
+	    constructor(view, definitionWalker, state, behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, viewportApi, services) {
 	        this.view = view;
 	        this.definitionWalker = definitionWalker;
 	        this.state = state;
@@ -3576,6 +3747,7 @@
 	        this.pinchToZoomController = pinchToZoomController;
 	        this.contextMenuController = contextMenuController;
 	        this.clickBehaviorResolver = clickBehaviorResolver;
+	        this.clickBehaviorWrapper = clickBehaviorWrapper;
 	        this.viewportApi = viewportApi;
 	        this.services = services;
 	        this.onRendered = new SimpleEvent();
@@ -3589,7 +3761,8 @@
 	                const forceMove = isMiddleButton || altKey;
 	                const commandOrNull = this.resolveClick(target, position);
 	                const behavior = this.clickBehaviorResolver.resolve(commandOrNull, target, forceMove);
-	                this.behaviorController.start(position, behavior);
+	                const wrappedBehavior = this.clickBehaviorWrapper.wrap(behavior, commandOrNull);
+	                this.behaviorController.start(position, wrappedBehavior);
 	            }
 	        };
 	        this.onPinchToZoom = (distance, centerPoint) => {
@@ -3907,7 +4080,7 @@
 	    static create(parent, api) {
 	        const isUndoRedoSupported = api.controlBar.isUndoRedoSupported();
 	        const view = ControlBarView.create(parent, isUndoRedoSupported, api.i18n);
-	        const bar = new ControlBar(view, api.controlBar, isUndoRedoSupported);
+	        const bar = new ControlBar(view, api.controlBar, api.viewport, isUndoRedoSupported);
 	        view.bindResetButtonClick(() => bar.onResetButtonClicked());
 	        view.bindZoomInButtonClick(() => bar.onZoomInButtonClicked());
 	        view.bindZoomOutButtonClick(() => bar.onZoomOutButtonClicked());
@@ -3921,9 +4094,10 @@
 	        bar.refreshButtons();
 	        return bar;
 	    }
-	    constructor(view, controlBarApi, isUndoRedoSupported) {
+	    constructor(view, controlBarApi, viewportApi, isUndoRedoSupported) {
 	        this.view = view;
 	        this.controlBarApi = controlBarApi;
+	        this.viewportApi = viewportApi;
 	        this.isUndoRedoSupported = isUndoRedoSupported;
 	    }
 	    updateLayout() {
@@ -3933,13 +4107,13 @@
 	        //
 	    }
 	    onResetButtonClicked() {
-	        this.controlBarApi.resetViewport();
+	        this.viewportApi.resetViewport();
 	    }
 	    onZoomInButtonClicked() {
-	        this.controlBarApi.zoomIn();
+	        this.viewportApi.zoom(true);
 	    }
 	    onZoomOutButtonClicked() {
-	        this.controlBarApi.zoomOut();
+	        this.viewportApi.zoom(false);
 	    }
 	    onMoveButtonClicked() {
 	        this.controlBarApi.toggleIsDragDisabled();
@@ -4457,31 +4631,6 @@
 	    }
 	}
 
-	const defaultConfiguration$4 = {
-	    view: {
-	        paddingTop: 20,
-	        paddingX: 20,
-	        inputSize: 18,
-	        inputIconSize: 14,
-	        label: {
-	            height: 22,
-	            paddingX: 10,
-	            minWidth: 50,
-	            radius: 10
-	        }
-	    }
-	};
-	class ContainerStepExtension {
-	    static create(configuration) {
-	        return new ContainerStepExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$4);
-	    }
-	    constructor(configuration) {
-	        this.configuration = configuration;
-	        this.componentType = 'container';
-	        this.createComponentView = createContainerStepComponentViewFactory(this.configuration.view);
-	    }
-	}
-
 	class DefaultPlaceholderControllerExtension {
 	    create() {
 	        return {
@@ -4490,7 +4639,7 @@
 	    }
 	}
 
-	const defaultConfiguration$3 = {
+	const defaultConfiguration = {
 	    gapWidth: 88,
 	    gapHeight: 24,
 	    radius: 6,
@@ -4498,7 +4647,7 @@
 	};
 	class RectPlaceholderExtension {
 	    static create(configuration) {
-	        return new RectPlaceholderExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$3);
+	        return new RectPlaceholderExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration);
 	    }
 	    constructor(configuration) {
 	        this.configuration = configuration;
@@ -4512,63 +4661,6 @@
 	    }
 	}
 
-	const defaultConfiguration$2 = {
-	    view: {
-	        minContainerWidth: 40,
-	        paddingX: 20,
-	        paddingTop: 20,
-	        connectionHeight: 16,
-	        inputSize: 18,
-	        inputIconSize: 14,
-	        branchNameLabel: {
-	            height: 22,
-	            paddingX: 10,
-	            minWidth: 50,
-	            radius: 10
-	        },
-	        nameLabel: {
-	            height: 22,
-	            paddingX: 10,
-	            minWidth: 50,
-	            radius: 10
-	        }
-	    }
-	};
-	class SwitchStepExtension {
-	    static create(configuration) {
-	        return new SwitchStepExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$2);
-	    }
-	    constructor(configuration) {
-	        this.configuration = configuration;
-	        this.componentType = 'switch';
-	        this.createComponentView = createSwitchStepComponentViewFactory(this.configuration.view);
-	    }
-	}
-
-	const defaultConfiguration$1 = {
-	    view: {
-	        paddingLeft: 12,
-	        paddingRight: 12,
-	        paddingY: 10,
-	        textMarginLeft: 12,
-	        minTextWidth: 70,
-	        iconSize: 22,
-	        radius: 5,
-	        inputSize: 14,
-	        outputSize: 10
-	    }
-	};
-	class TaskStepExtension {
-	    static create(configuration) {
-	        return new TaskStepExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$1);
-	    }
-	    constructor(configuration) {
-	        this.configuration = configuration;
-	        this.componentType = 'task';
-	        this.createComponentView = createTaskStepComponentViewFactory(false, this.configuration.view);
-	    }
-	}
-
 	class DefaultSequenceComponentExtension {
 	    constructor() {
 	        this.create = DefaultSequenceComponent.create;
@@ -4581,39 +4673,15 @@
 	    }
 	}
 
-	class LineGrid {
-	    static create(size) {
-	        const path = Dom.svg('path', {
-	            class: 'sqd-line-grid-path',
-	            fill: 'none'
-	        });
-	        return new LineGrid(size, path);
-	    }
-	    constructor(size, element) {
-	        this.size = size;
-	        this.element = element;
-	    }
-	    setScale(_, scaledSize) {
-	        Dom.attrs(this.element, {
-	            d: `M ${scaledSize.x} 0 L 0 0 0 ${scaledSize.y}`
-	        });
+	class DefaultClickBehaviorWrapper {
+	    constructor() {
+	        this.wrap = (behavior) => behavior;
 	    }
 	}
 
-	const defaultConfiguration = {
-	    gridSizeX: 48,
-	    gridSizeY: 48
-	};
-	class LineGridExtension {
-	    static create(configuration) {
-	        return new LineGridExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration);
-	    }
-	    constructor(configuration) {
-	        this.configuration = configuration;
-	    }
+	class DefaultClickBehaviorWrapperExtension {
 	    create() {
-	        const size = new Vector(this.configuration.gridSizeX, this.configuration.gridSizeY);
-	        return LineGrid.create(size);
+	        return new DefaultClickBehaviorWrapper();
 	    }
 	}
 
@@ -4633,6 +4701,9 @@
 	        if (ext.stepComponentViewWrapper) {
 	            services.stepComponentViewWrapper = ext.stepComponentViewWrapper;
 	        }
+	        if (ext.clickBehaviorWrapperExtension) {
+	            services.clickBehaviorWrapperExtension = ext.clickBehaviorWrapperExtension;
+	        }
 	        if (ext.badges) {
 	            services.badges = (services.badges || []).concat(ext.badges);
 	        }
@@ -4684,6 +4755,9 @@
 	    if (!services.stepComponentViewWrapper) {
 	        services.stepComponentViewWrapper = new DefaultStepComponentViewWrapperExtension();
 	    }
+	    if (!services.clickBehaviorWrapperExtension) {
+	        services.clickBehaviorWrapperExtension = new DefaultClickBehaviorWrapperExtension();
+	    }
 	    if (!services.badges) {
 	        services.badges = [];
 	    }
@@ -4980,35 +5054,6 @@
 	    }
 	}
 
-	class LineGridDesignerExtension {
-	    static create(configuration) {
-	        const grid = LineGridExtension.create(configuration);
-	        return new LineGridDesignerExtension(grid);
-	    }
-	    constructor(grid) {
-	        this.grid = grid;
-	    }
-	}
-
-	class StepsDesignerExtension {
-	    static create(configuration) {
-	        const steps = [];
-	        if (configuration.container) {
-	            steps.push(ContainerStepExtension.create(configuration.container));
-	        }
-	        if (configuration.switch) {
-	            steps.push(SwitchStepExtension.create(configuration.switch));
-	        }
-	        if (configuration.task) {
-	            steps.push(TaskStepExtension.create(configuration.task));
-	        }
-	        return new StepsDesignerExtension(steps);
-	    }
-	    constructor(steps) {
-	        this.steps = steps;
-	    }
-	}
-
 	exports.Badges = Badges;
 	exports.CenteredViewportCalculator = CenteredViewportCalculator;
 	exports.ClassicWheelControllerExtension = ClassicWheelControllerExtension;
@@ -5021,6 +5066,7 @@
 	exports.DefaultSequenceComponent = DefaultSequenceComponent;
 	exports.DefaultSequenceComponentView = DefaultSequenceComponentView;
 	exports.DefaultViewportController = DefaultViewportController;
+	exports.DefaultViewportControllerDesignerExtension = DefaultViewportControllerDesignerExtension;
 	exports.DefaultViewportControllerExtension = DefaultViewportControllerExtension;
 	exports.DefinitionWalker = DefinitionWalker;
 	exports.Designer = Designer;
@@ -5040,12 +5086,15 @@
 	exports.PathBarApi = PathBarApi;
 	exports.RectPlaceholder = RectPlaceholder;
 	exports.RectPlaceholderView = RectPlaceholderView;
+	exports.SelectStepBehaviorEndToken = SelectStepBehaviorEndToken;
 	exports.ServicesResolver = ServicesResolver;
 	exports.SimpleEvent = SimpleEvent;
+	exports.StartStopRootComponentDesignerExtension = StartStopRootComponentDesignerExtension;
 	exports.StartStopRootComponentExtension = StartStopRootComponentExtension;
 	exports.StepComponent = StepComponent;
 	exports.StepExtensionResolver = StepExtensionResolver;
 	exports.StepsDesignerExtension = StepsDesignerExtension;
+	exports.TYPE = TYPE;
 	exports.ToolboxApi = ToolboxApi;
 	exports.Uid = Uid;
 	exports.ValidationErrorBadgeExtension = ValidationErrorBadgeExtension;