sequential-workflow-designer 0.25.0 → 0.26.1

package/lib/esm/index.js

@@ -199,27 +199,17 @@ function race(timeout, a, b, c, d) {
 }
 
 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;
     }
@@ -690,21 +680,20 @@ function animate(interval, handler) {
 }
 
 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
             });
@@ -737,23 +726,23 @@ class ZoomByWheelCalculator {
 }
 
 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) {
@@ -766,11 +755,10 @@ class ViewportApi {
         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);
         }
     }
 }
@@ -780,6 +768,12 @@ class WorkspaceApi {
         this.state = state;
         this.workspaceController = workspaceController;
     }
+    getViewport() {
+        return this.state.viewport;
+    }
+    setViewport(viewport) {
+        this.state.setViewport(viewport);
+    }
     getCanvasPosition() {
         return this.workspaceController.getCanvasPosition();
     }
@@ -789,12 +783,6 @@ class WorkspaceApi {
     getRootComponentSize() {
         return this.workspaceController.getRootComponentSize();
     }
-    getViewport() {
-        return this.state.viewport;
-    }
-    setViewport(viewport) {
-        this.state.setViewport(viewport);
-    }
     updateRootComponent() {
         this.workspaceController.updateRootComponent();
     }
@@ -810,9 +798,8 @@ class DesignerApi {
     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;
@@ -827,36 +814,15 @@ class DesignerApi {
     }
 }
 
-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;
     }
 }
 
@@ -921,349 +887,104 @@ function createG(parentElement) {
     return g;
 }
 
-var ClickCommandType;
-(function (ClickCommandType) {
-    ClickCommandType[ClickCommandType["selectStep"] = 1] = "selectStep";
-    ClickCommandType[ClickCommandType["rerenderStep"] = 2] = "rerenderStep";
-    ClickCommandType[ClickCommandType["openFolder"] = 3] = "openFolder";
-    ClickCommandType[ClickCommandType["triggerCustomAction"] = 4] = "triggerCustomAction";
-})(ClickCommandType || (ClickCommandType = {}));
-var PlaceholderDirection;
-(function (PlaceholderDirection) {
-    PlaceholderDirection[PlaceholderDirection["none"] = 0] = "none";
-    PlaceholderDirection[PlaceholderDirection["in"] = 1] = "in";
-    PlaceholderDirection[PlaceholderDirection["out"] = 2] = "out";
-})(PlaceholderDirection || (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: 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(DefinitionChangeType.stepNameChanged, stepId, false),
-            notifyStepPropertiesChanged: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepPropertyChanged, stepId, false),
-            notifyStepInserted: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepInserted, stepId, true),
-            notifyStepMoved: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepMoved, stepId, true),
-            notifyStepDeleted: (stepId) => this.notifyStepChanged(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;
@@ -1333,54 +1054,58 @@ class InputView {
     }
 }
 
+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) {
@@ -1563,6 +1288,20 @@ class DefaultSequenceComponent {
     }
 }
 
+var ClickCommandType;
+(function (ClickCommandType) {
+    ClickCommandType[ClickCommandType["selectStep"] = 1] = "selectStep";
+    ClickCommandType[ClickCommandType["rerenderStep"] = 2] = "rerenderStep";
+    ClickCommandType[ClickCommandType["openFolder"] = 3] = "openFolder";
+    ClickCommandType[ClickCommandType["triggerCustomAction"] = 4] = "triggerCustomAction";
+})(ClickCommandType || (ClickCommandType = {}));
+var PlaceholderDirection;
+(function (PlaceholderDirection) {
+    PlaceholderDirection[PlaceholderDirection["none"] = 0] = "none";
+    PlaceholderDirection[PlaceholderDirection["in"] = 1] = "in";
+    PlaceholderDirection[PlaceholderDirection["out"] = 2] = "out";
+})(PlaceholderDirection || (PlaceholderDirection = {}));
+
 class StartStopRootComponentView {
     static create(parent, sequence, parentPlaceIndicator, context, cfg) {
         const g = Dom.svg('g', {
@@ -2041,28 +1780,106 @@ class DefaultViewportControllerExtension {
     }
 }
 
-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: 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',
@@ -2121,63 +1938,414 @@ class RectPlaceholder {
     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(DefinitionChangeType.stepNameChanged, stepId, false),
+            notifyStepPropertiesChanged: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepPropertyChanged, stepId, false),
+            notifyStepInserted: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepInserted, stepId, true),
+            notifyStepMoved: (stepId) => this.notifyStepChanged(DefinitionChangeType.stepMoved, stepId, true),
+            notifyStepDeleted: (stepId) => this.notifyStepChanged(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();
     }
 }
 
@@ -2226,6 +2394,8 @@ class BehaviorController {
     constructor(dom, shadowRoot) {
         this.dom = dom;
         this.shadowRoot = shadowRoot;
+        this.previousEndToken = null;
+        this.state = null;
         this.onMouseMove = (e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -2297,7 +2467,7 @@ class BehaviorController {
         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);
@@ -2311,8 +2481,9 @@ class BehaviorController {
             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;
     }
 }
 
@@ -2988,9 +3159,11 @@ class SelectStepBehavior {
         }
     }
     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());
     }
 }
 
@@ -3303,10 +3476,7 @@ class PinchToZoomController {
             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
@@ -3359,13 +3529,14 @@ class Workspace {
         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();
@@ -3381,7 +3552,7 @@ class Workspace {
         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;
@@ -3390,6 +3561,7 @@ class Workspace {
         this.pinchToZoomController = pinchToZoomController;
         this.contextMenuController = contextMenuController;
         this.clickBehaviorResolver = clickBehaviorResolver;
+        this.clickBehaviorWrapper = clickBehaviorWrapper;
         this.viewportApi = viewportApi;
         this.services = services;
         this.onRendered = new SimpleEvent();
@@ -3403,7 +3575,8 @@ class Workspace {
                 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) => {
@@ -3721,7 +3894,7 @@ class ControlBar {
     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());
@@ -3735,9 +3908,10 @@ class ControlBar {
         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() {
@@ -3747,13 +3921,13 @@ class ControlBar {
         //
     }
     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();
@@ -4271,31 +4445,6 @@ class ToolboxExtension {
     }
 }
 
-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 {
@@ -4304,7 +4453,7 @@ class DefaultPlaceholderControllerExtension {
     }
 }
 
-const defaultConfiguration$3 = {
+const defaultConfiguration = {
     gapWidth: 88,
     gapHeight: 24,
     radius: 6,
@@ -4312,7 +4461,7 @@ const defaultConfiguration$3 = {
 };
 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;
@@ -4326,63 +4475,6 @@ class RectPlaceholderExtension {
     }
 }
 
-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;
@@ -4395,39 +4487,15 @@ class DefaultStepComponentViewWrapperExtension {
     }
 }
 
-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();
     }
 }
 
@@ -4447,6 +4515,9 @@ function merge(services, extensions) {
         if (ext.stepComponentViewWrapper) {
             services.stepComponentViewWrapper = ext.stepComponentViewWrapper;
         }
+        if (ext.clickBehaviorWrapperExtension) {
+            services.clickBehaviorWrapperExtension = ext.clickBehaviorWrapperExtension;
+        }
         if (ext.badges) {
             services.badges = (services.badges || []).concat(ext.badges);
         }
@@ -4498,6 +4569,9 @@ function setDefaults(services, configuration) {
     if (!services.stepComponentViewWrapper) {
         services.stepComponentViewWrapper = new DefaultStepComponentViewWrapperExtension();
     }
+    if (!services.clickBehaviorWrapperExtension) {
+        services.clickBehaviorWrapperExtension = new DefaultClickBehaviorWrapperExtension();
+    }
     if (!services.badges) {
         services.badges = [];
     }
@@ -4794,33 +4868,4 @@ class Designer {
     }
 }
 
-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;
-    }
-}
-
-export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ComponentDom, ControlBarApi, CustomActionController, DefaultRegionComponentViewExtension, DefaultRegionView, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, RectPlaceholder, RectPlaceholderView, ServicesResolver, SimpleEvent, StartStopRootComponentExtension, StepComponent, StepExtensionResolver, StepsDesignerExtension, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, ViewportApi, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
+export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ComponentDom, ControlBarApi, CustomActionController, DefaultRegionComponentViewExtension, DefaultRegionView, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerDesignerExtension, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, RectPlaceholder, RectPlaceholderView, SelectStepBehaviorEndToken, ServicesResolver, SimpleEvent, StartStopRootComponentDesignerExtension, StartStopRootComponentExtension, StepComponent, StepExtensionResolver, StepsDesignerExtension, TYPE, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, ViewportApi, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };