sequential-workflow-designer 0.24.8 → 0.26.0

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;
     }
@@ -669,16 +659,91 @@ class ToolboxDataProvider {
     }
 }
 
+function animate(interval, handler) {
+    const iv = setInterval(tick, 15);
+    const startTime = Date.now();
+    const anim = {
+        isAlive: true,
+        stop: () => {
+            anim.isAlive = false;
+            clearInterval(iv);
+        }
+    };
+    function tick() {
+        const progress = Math.min((Date.now() - startTime) / interval, 1);
+        handler(progress);
+        if (progress === 1) {
+            anim.stop();
+        }
+    }
+    return anim;
+}
+
+class ViewportAnimator {
+    constructor(state) {
+        this.state = state;
+    }
+    execute(target) {
+        if (this.animation && this.animation.isAlive) {
+            this.animation.stop();
+        }
+        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.state.setViewport({
+                position: startPosition.subtract(deltaPosition.multiplyByScalar(progress)),
+                scale: newScale
+            });
+        });
+    }
+}
+
+class ZoomByWheelCalculator {
+    static calculate(controller, current, canvasPosition, e) {
+        if (e.deltaY === 0) {
+            return null;
+        }
+        const nextScale = controller.getNextScale(current.scale, e.deltaY < 0);
+        let scale;
+        const absDeltaY = Math.abs(e.deltaY);
+        if (absDeltaY < controller.smoothDeltaYLimit) {
+            const fraction = absDeltaY / controller.smoothDeltaYLimit;
+            const step = nextScale.next - nextScale.current;
+            scale = current.scale + step * fraction;
+        }
+        else {
+            scale = nextScale.next;
+        }
+        const mousePoint = new Vector(e.pageX, e.pageY).subtract(canvasPosition);
+        // The real point is point on canvas with no scale.
+        const mouseRealPoint = mousePoint.divideByScalar(current.scale).subtract(current.position.divideByScalar(current.scale));
+        const position = mouseRealPoint.multiplyByScalar(-scale).add(mousePoint);
+        return { position, scale };
+    }
+}
+
 class ViewportApi {
-    constructor(workspaceController, viewportController) {
+    constructor(state, workspaceController, viewportController) {
+        this.state = state;
         this.workspaceController = workspaceController;
         this.viewportController = viewportController;
+        this.animator = new ViewportAnimator(this.state);
+    }
+    limitScale(scale) {
+        return this.viewportController.limitScale(scale);
     }
     resetViewport() {
-        this.viewportController.setDefault();
+        const defaultViewport = this.viewportController.getDefault();
+        this.state.setViewport(defaultViewport);
     }
     zoom(direction) {
-        this.viewportController.zoom(direction);
+        const viewport = this.viewportController.getZoomed(direction);
+        if (viewport) {
+            this.state.setViewport(viewport);
+        }
     }
     moveViewportToStep(stepId) {
         const component = this.workspaceController.getComponentByStepId(stepId);
@@ -686,7 +751,15 @@ class ViewportApi {
         const clientPosition = component.view.getClientPosition();
         const componentPosition = clientPosition.subtract(canvasPosition);
         const componentSize = new Vector(component.view.width, component.view.height);
-        this.viewportController.focusOnComponent(componentPosition, componentSize);
+        const viewport = this.viewportController.getFocusedOnComponent(componentPosition, componentSize);
+        this.animator.execute(viewport);
+    }
+    handleWheelEvent(e) {
+        const canvasPosition = this.workspaceController.getCanvasPosition();
+        const newViewport = ZoomByWheelCalculator.calculate(this.viewportController, this.state.viewport, canvasPosition, e);
+        if (newViewport) {
+            this.state.setViewport(newViewport);
+        }
     }
 }
 
@@ -695,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();
     }
@@ -704,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();
     }
@@ -725,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);
         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;
@@ -742,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;
     }
 }
 
@@ -836,321 +887,76 @@ 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));
-        }
-        this.badges.update(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)
-        };
-    }
-}
-
-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();
-        }
-    }
-}
-
-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;
+    constructor(parentElement, validator, configuration) {
+        this.parentElement = parentElement;
+        this.validator = validator;
+        this.configuration = configuration;
+        this.view = null;
     }
     update(result) {
         const isValid = this.validator();
@@ -1170,7 +976,7 @@ class ValidationErrorBadge {
     }
 }
 
-const defaultConfiguration$6 = {
+const defaultConfiguration$7 = {
     view: {
         size: 22,
         iconSize: 12
@@ -1178,7 +984,7 @@ const defaultConfiguration$6 = {
 };
 class ValidationErrorBadgeExtension {
     static create(configuration) {
-        return new ValidationErrorBadgeExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$6);
+        return new ValidationErrorBadgeExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$7);
     }
     constructor(configuration) {
         this.configuration = configuration;
@@ -1478,6 +1284,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', {
@@ -1574,7 +1394,7 @@ class StartStopRootComponent {
     }
 }
 
-const defaultConfiguration$5 = {
+const defaultConfiguration$6 = {
     view: {
         size: 30,
         defaultIconSize: 22,
@@ -1586,7 +1406,7 @@ const defaultConfiguration$5 = {
 };
 class StartStopRootComponentExtension {
     static create(configuration) {
-        return new StartStopRootComponentExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$5);
+        return new StartStopRootComponentExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$6);
     }
     constructor(configuration) {
         this.configuration = configuration;
@@ -1820,15 +1640,15 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
 };
 
 class CenteredViewportCalculator {
-    static center(margin, canvasSize, rootComponentSize) {
+    static center(padding, canvasSize, rootComponentSize) {
         if (canvasSize.x === 0 || canvasSize.y === 0) {
             return {
                 position: new Vector(0, 0),
                 scale: 1
             };
         }
-        const canvasSafeWidth = Math.max(canvasSize.x - margin * 2, 0);
-        const canvasSafeHeight = Math.max(canvasSize.y - margin * 2, 0);
+        const canvasSafeWidth = Math.max(canvasSize.x - padding * 2, 0);
+        const canvasSafeHeight = Math.max(canvasSize.y - padding * 2, 0);
         const scale = Math.min(Math.min(canvasSafeWidth / rootComponentSize.x, canvasSafeHeight / rootComponentSize.y), 1);
         const width = rootComponentSize.x * scale;
         const height = rootComponentSize.y * scale;
@@ -1839,7 +1659,7 @@ class CenteredViewportCalculator {
             scale
         };
     }
-    static focusOnComponent(canvasSize, viewport, componentPosition, componentSize) {
+    static getFocusedOnComponent(canvasSize, viewport, componentPosition, componentSize) {
         const realPosition = viewport.position.divideByScalar(viewport.scale).subtract(componentPosition.divideByScalar(viewport.scale));
         const componentOffset = componentSize.divideByScalar(2);
         const position = realPosition.add(canvasSize.divideByScalar(2)).subtract(componentOffset);
@@ -1847,82 +1667,15 @@ class CenteredViewportCalculator {
     }
 }
 
-class NextQuantifiedNumber {
-    constructor(values) {
-        this.values = values;
-    }
-    next(value, direction) {
-        let bestIndex = 0;
-        let bestDistance = Number.MAX_VALUE;
-        for (let i = 0; i < this.values.length; i++) {
-            const distance = Math.abs(this.values[i] - value);
-            if (bestDistance > distance) {
-                bestIndex = i;
-                bestDistance = distance;
-            }
-        }
-        let index;
-        if (direction) {
-            index = Math.min(bestIndex + 1, this.values.length - 1);
-        }
-        else {
-            index = Math.max(bestIndex - 1, 0);
-        }
-        return {
-            current: this.values[bestIndex],
-            next: this.values[index]
-        };
-    }
-}
-
-const SCALES = [0.06, 0.08, 0.1, 0.12, 0.16, 0.2, 0.26, 0.32, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
-const MAX_DELTA_Y$1 = 16;
-const quantifiedScale = new NextQuantifiedNumber(SCALES);
-class QuantifiedScaleViewportCalculator {
-    static zoom(current, direction) {
-        const nextScale = quantifiedScale.next(current.scale, direction);
-        return {
-            position: current.position,
-            scale: nextScale.next
-        };
-    }
-    static zoomByWheel(current, e, canvasPosition) {
-        if (e.deltaY === 0) {
-            return null;
-        }
-        const nextScale = quantifiedScale.next(current.scale, e.deltaY < 0);
-        let scale;
-        const absDeltaY = Math.abs(e.deltaY);
-        if (absDeltaY < MAX_DELTA_Y$1) {
-            const fraction = absDeltaY / MAX_DELTA_Y$1;
-            const step = nextScale.next - nextScale.current;
-            scale = current.scale + step * fraction;
-        }
-        else {
-            scale = nextScale.next;
-        }
-        const mousePoint = new Vector(e.pageX, e.pageY).subtract(canvasPosition);
-        // The real point is point on canvas with no scale.
-        const mouseRealPoint = mousePoint.divideByScalar(current.scale).subtract(current.position.divideByScalar(current.scale));
-        const position = mouseRealPoint.multiplyByScalar(-scale).add(mousePoint);
-        return { position, scale };
-    }
-}
-
-class ClassicWheelController {
-    static create(api) {
-        return new ClassicWheelController(api);
+class ClassicWheelController {
+    static create(api) {
+        return new ClassicWheelController(api);
     }
     constructor(api) {
         this.api = api;
     }
     onWheel(e) {
-        const viewport = this.api.getViewport();
-        const canvasPosition = this.api.getCanvasPosition();
-        const newViewport = QuantifiedScaleViewportCalculator.zoomByWheel(viewport, e, canvasPosition);
-        if (newViewport) {
-            this.api.setViewport(newViewport);
-        }
+        this.api.handleWheelEvent(e);
     }
 }
 
@@ -1932,83 +1685,172 @@ class ClassicWheelControllerExtension {
     }
 }
 
-function animate(interval, handler) {
-    const iv = setInterval(tick, 15);
-    const startTime = Date.now();
-    const anim = {
-        isAlive: true,
-        stop: () => {
-            anim.isAlive = false;
-            clearInterval(iv);
+class NextQuantifiedNumber {
+    constructor(values) {
+        this.values = values;
+    }
+    next(value, direction) {
+        let bestIndex = 0;
+        let bestDistance = Number.MAX_VALUE;
+        for (let i = 0; i < this.values.length; i++) {
+            const distance = Math.abs(this.values[i] - value);
+            if (bestDistance > distance) {
+                bestIndex = i;
+                bestDistance = distance;
+            }
         }
-    };
-    function tick() {
-        const progress = Math.min((Date.now() - startTime) / interval, 1);
-        handler(progress);
-        if (progress === 1) {
-            anim.stop();
+        let index;
+        if (direction) {
+            index = Math.min(bestIndex + 1, this.values.length - 1);
         }
-    }
-    return anim;
-}
-
-class ViewportAnimator {
-    constructor(api) {
-        this.api = api;
-    }
-    execute(target) {
-        if (this.animation && this.animation.isAlive) {
-            this.animation.stop();
+        else {
+            index = Math.max(bestIndex - 1, 0);
         }
-        const viewport = this.api.getViewport();
-        const startPosition = viewport.position;
-        const startScale = 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({
-                position: startPosition.subtract(deltaPosition.multiplyByScalar(progress)),
-                scale: newScale
-            });
-        });
+        return {
+            current: this.values[bestIndex],
+            next: this.values[index]
+        };
+    }
+    limit(scale) {
+        const min = this.values[0];
+        const max = this.values[this.values.length - 1];
+        return Math.min(Math.max(scale, min), max);
     }
 }
 
-const CENTER_MARGIN = 10;
+const defaultConfiguration$5 = {
+    scales: [0.06, 0.08, 0.1, 0.12, 0.16, 0.2, 0.26, 0.32, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+    smoothDeltaYLimit: 16,
+    padding: 10
+};
 class DefaultViewportController {
-    static create(api) {
-        return new DefaultViewportController(api);
+    static create(api, configuration) {
+        const config = configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$5;
+        const nqn = new NextQuantifiedNumber(config.scales);
+        return new DefaultViewportController(config.smoothDeltaYLimit, nqn, api, config.padding);
     }
-    constructor(api) {
+    constructor(smoothDeltaYLimit, nqn, api, padding) {
+        this.smoothDeltaYLimit = smoothDeltaYLimit;
+        this.nqn = nqn;
         this.api = api;
-        this.animator = new ViewportAnimator(this.api);
+        this.padding = padding;
     }
-    setDefault() {
+    getDefault() {
         const rootComponentSize = this.api.getRootComponentSize();
         const canvasSize = this.api.getCanvasSize();
-        const target = CenteredViewportCalculator.center(CENTER_MARGIN, canvasSize, rootComponentSize);
-        this.api.setViewport(target);
+        return CenteredViewportCalculator.center(this.padding, canvasSize, rootComponentSize);
     }
-    zoom(direction) {
-        const viewport = this.api.getViewport();
-        const target = QuantifiedScaleViewportCalculator.zoom(viewport, direction);
-        this.api.setViewport(target);
+    getZoomed(direction) {
+        const current = this.api.getViewport();
+        const nextScale = this.nqn.next(current.scale, direction);
+        if (nextScale) {
+            return {
+                position: current.position,
+                scale: nextScale.next
+            };
+        }
+        return null;
     }
-    focusOnComponent(componentPosition, componentSize) {
+    getFocusedOnComponent(componentPosition, componentSize) {
         const viewport = this.api.getViewport();
         const canvasSize = this.api.getCanvasSize();
-        const target = CenteredViewportCalculator.focusOnComponent(canvasSize, viewport, componentPosition, componentSize);
-        this.animateTo(target);
+        return CenteredViewportCalculator.getFocusedOnComponent(canvasSize, viewport, componentPosition, componentSize);
     }
-    animateTo(viewport) {
-        this.animator.execute(viewport);
+    getNextScale(scale, direction) {
+        return this.nqn.next(scale, direction);
+    }
+    limitScale(scale) {
+        return this.nqn.limit(scale);
     }
 }
 
 class DefaultViewportControllerExtension {
-    constructor() {
-        this.create = DefaultViewportController.create;
+    static create(configuration) {
+        return new DefaultViewportControllerExtension(configuration);
+    }
+    constructor(configuration) {
+        this.configuration = configuration;
+    }
+    create(api) {
+        return DefaultViewportController.create(api, this.configuration);
+    }
+}
+
+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(view, step, parentSequence, hasOutput, badges) {
+        this.view = view;
+        this.step = step;
+        this.parentSequence = parentSequence;
+        this.hasOutput = hasOutput;
+        this.badges = badges;
+    }
+    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;
+    }
+    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);
     }
 }
 
@@ -2131,24 +1973,375 @@ class DefaultRegionView {
             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;
+}
+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();
+        }
+    }
+}
+
+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 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();
     }
 }
 
@@ -2168,10 +2361,26 @@ function readTouchPosition(e) {
         return new Vector(touch.pageX, touch.pageY);
     }
     throw new Error('Unknown touch position');
+}
+function calculateFingerDistance(e) {
+    if (e.touches.length === 2) {
+        const t0 = e.touches[0];
+        const t1 = e.touches[1];
+        return Math.hypot(t0.clientX - t1.clientX, t0.clientY - t1.clientY);
+    }
+    throw new Error('Cannot calculate finger distance');
+}
+function readFingerCenterPoint(e) {
+    if (e.touches.length === 2) {
+        const t0 = e.touches[0];
+        const t1 = e.touches[1];
+        return new Vector((t0.pageX + t1.pageX) / 2, (t0.pageY + t1.pageY) / 2);
+    }
+    throw new Error('Cannot calculate finger center point');
 }
 
-const notInitializedError = 'State is not initialized';
-const nonPassiveOptions = {
+const notInitializedError$1 = 'State is not initialized';
+const nonPassiveOptions$1 = {
     passive: false
 };
 class BehaviorController {
@@ -2181,6 +2390,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();
@@ -2201,7 +2412,7 @@ class BehaviorController {
             e.preventDefault();
             e.stopPropagation();
             if (!this.state) {
-                throw new Error(notInitializedError);
+                throw new Error(notInitializedError$1);
             }
             const position = (_a = this.state.lastPosition) !== null && _a !== void 0 ? _a : this.state.startPosition;
             const element = this.dom.elementFromPoint(position.x, position.y);
@@ -2232,27 +2443,27 @@ class BehaviorController {
     }
     bind(target) {
         target.addEventListener('mousemove', this.onMouseMove, false);
-        target.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
+        target.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions$1);
         target.addEventListener('mouseup', this.onMouseUp, false);
-        target.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
-        target.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
+        target.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions$1);
+        target.addEventListener('touchstart', this.onTouchStart, nonPassiveOptions$1);
     }
     unbind(target) {
         target.removeEventListener('mousemove', this.onMouseMove, false);
-        target.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
+        target.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions$1);
         target.removeEventListener('mouseup', this.onMouseUp, false);
-        target.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
-        target.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions);
+        target.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions$1);
+        target.removeEventListener('touchstart', this.onTouchStart, nonPassiveOptions$1);
     }
     move(position) {
         if (!this.state) {
-            throw new Error(notInitializedError);
+            throw new Error(notInitializedError$1);
         }
         this.state.lastPosition = position;
         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);
@@ -2260,14 +2471,15 @@ class BehaviorController {
     }
     stop(interrupt, element) {
         if (!this.state) {
-            throw new Error(notInitializedError);
+            throw new Error(notInitializedError$1);
         }
         if (this.shadowRoot) {
             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;
     }
 }
 
@@ -2835,20 +3047,26 @@ class WorkspaceView {
     getCanvasSize() {
         return new Vector(this.canvas.clientWidth, this.canvas.clientHeight);
     }
-    bindClick(handler) {
+    bindMouseDown(handler) {
         this.canvas.addEventListener('mousedown', e => {
             e.preventDefault();
             handler(readMousePosition(e), e.target, e.button, e.altKey);
         }, false);
+    }
+    bindTouchStart(clickHandler, pinchToZoomHandler) {
         this.canvas.addEventListener('touchstart', e => {
             var _a;
             e.preventDefault();
+            if (e.touches.length === 2) {
+                pinchToZoomHandler(calculateFingerDistance(e), readFingerCenterPoint(e));
+                return;
+            }
             const clientPosition = readTouchClientPosition(e);
             const dom = (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : document;
             const element = dom.elementFromPoint(clientPosition.x, clientPosition.y);
             if (element) {
                 const position = readTouchPosition(e);
-                handler(position, element, 0, false);
+                clickHandler(position, element, 0, false);
             }
         }, listenerOptions$1);
     }
@@ -2937,9 +3155,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());
     }
 }
 
@@ -3225,17 +3445,97 @@ class ContextMenuItemsBuilder {
     }
 }
 
+const nonPassiveOptions = {
+    passive: false
+};
+const notInitializedError = 'State is not initialized';
+class PinchToZoomController {
+    static create(workspaceApi, viewportApi, shadowRoot) {
+        return new PinchToZoomController(workspaceApi, viewportApi, shadowRoot);
+    }
+    constructor(workspaceApi, viewportApi, shadowRoot) {
+        this.workspaceApi = workspaceApi;
+        this.viewportApi = viewportApi;
+        this.shadowRoot = shadowRoot;
+        this.state = null;
+        this.onTouchMove = (e) => {
+            e.preventDefault();
+            if (!this.state) {
+                throw new Error(notInitializedError);
+            }
+            const touchEvent = e;
+            const distance = calculateFingerDistance(touchEvent);
+            const centerPoint = readFingerCenterPoint(touchEvent);
+            const deltaCenterPoint = centerPoint.subtract(this.state.lastCenterPoint);
+            const scale = this.viewportApi.limitScale(this.state.startScale * (distance / this.state.startDistance));
+            const zoomPoint = centerPoint.subtract(this.state.canvasPosition);
+            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 newViewport = {
+                position,
+                scale
+            };
+            this.workspaceApi.setViewport(newViewport);
+            this.state.lastCenterPoint = centerPoint;
+            this.state.lastViewport = newViewport;
+        };
+        this.onTouchEnd = (e) => {
+            e.preventDefault();
+            if (!this.state) {
+                throw new Error(notInitializedError);
+            }
+            if (this.shadowRoot) {
+                this.unbind(this.shadowRoot);
+            }
+            this.unbind(window);
+            this.state = null;
+        };
+    }
+    start(startDistance, centerPoint) {
+        if (this.state) {
+            throw new Error(`State is already initialized`);
+        }
+        if (this.shadowRoot) {
+            this.bind(this.shadowRoot);
+        }
+        this.bind(window);
+        const viewport = this.workspaceApi.getViewport();
+        this.state = {
+            canvasPosition: this.workspaceApi.getCanvasPosition(),
+            startScale: viewport.scale,
+            startDistance,
+            lastViewport: viewport,
+            lastCenterPoint: centerPoint
+        };
+    }
+    bind(target) {
+        target.addEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
+        target.addEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
+    }
+    unbind(target) {
+        target.removeEventListener('touchmove', this.onTouchMove, nonPassiveOptions);
+        target.removeEventListener('touchend', this.onTouchEnd, nonPassiveOptions);
+    }
+}
+
 class Workspace {
     static create(parent, designerContext, api) {
         var _a;
         const view = WorkspaceView.create(parent, designerContext.componentContext);
         const clickBehaviorResolver = new ClickBehaviorResolver(designerContext);
-        const wheelController = designerContext.services.wheelController.create(api.workspace);
+        const clickBehaviorWrapper = designerContext.services.clickBehaviorWrapperExtension.create(designerContext.customActionController);
+        const wheelController = designerContext.services.wheelController.create(api.viewport, api.workspace);
+        const pinchToZoomController = PinchToZoomController.create(api.workspace, api.viewport, api.shadowRoot);
         const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
             ? 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, 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();
@@ -3245,19 +3545,22 @@ class Workspace {
         race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
             workspace.onStateChanged(r[0], r[1], r[2]);
         });
-        view.bindClick(workspace.onClick);
+        view.bindMouseDown(workspace.onClick);
+        view.bindTouchStart(workspace.onClick, workspace.onPinchToZoom);
         view.bindWheel(workspace.onWheel);
         view.bindContextMenu(workspace.onContextMenu);
         return workspace;
     }
-    constructor(view, definitionWalker, state, behaviorController, wheelController, 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;
         this.behaviorController = behaviorController;
         this.wheelController = wheelController;
+        this.pinchToZoomController = pinchToZoomController;
         this.contextMenuController = contextMenuController;
         this.clickBehaviorResolver = clickBehaviorResolver;
+        this.clickBehaviorWrapper = clickBehaviorWrapper;
         this.viewportApi = viewportApi;
         this.services = services;
         this.onRendered = new SimpleEvent();
@@ -3271,9 +3574,13 @@ 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) => {
+            this.pinchToZoomController.start(distance, centerPoint);
+        };
         this.onWheel = (e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -3586,7 +3893,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());
@@ -3600,9 +3907,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() {
@@ -3612,13 +3920,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();
@@ -4136,31 +4444,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 {
@@ -4169,7 +4452,7 @@ class DefaultPlaceholderControllerExtension {
     }
 }
 
-const defaultConfiguration$3 = {
+const defaultConfiguration = {
     gapWidth: 88,
     gapHeight: 24,
     radius: 6,
@@ -4177,7 +4460,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;
@@ -4191,63 +4474,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;
@@ -4260,39 +4486,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();
     }
 }
 
@@ -4312,6 +4514,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);
         }
@@ -4363,6 +4568,9 @@ function setDefaults(services, configuration) {
     if (!services.stepComponentViewWrapper) {
         services.stepComponentViewWrapper = new DefaultStepComponentViewWrapperExtension();
     }
+    if (!services.clickBehaviorWrapperExtension) {
+        services.clickBehaviorWrapperExtension = new DefaultClickBehaviorWrapperExtension();
+    }
     if (!services.badges) {
         services.badges = [];
     }
@@ -4397,7 +4605,7 @@ function setDefaults(services, configuration) {
         services.regionComponentView = new DefaultRegionComponentViewExtension();
     }
     if (!services.viewportController) {
-        services.viewportController = new DefaultViewportControllerExtension();
+        services.viewportController = DefaultViewportControllerExtension.create();
     }
     if (!services.grid) {
         services.grid = LineGridExtension.create();
@@ -4659,33 +4867,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, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderView, ServicesResolver, SimpleEvent, StartStopRootComponentExtension, StepComponent, StepExtensionResolver, StepsDesignerExtension, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, 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 };