sequential-workflow-designer 0.24.7 → 0.25.0

package/lib/esm/index.js

@@ -669,16 +669,92 @@ 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(api) {
+        this.api = api;
+    }
+    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 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
+            });
+        });
+    }
+}
+
+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(workspaceController, viewportController, api) {
         this.workspaceController = workspaceController;
         this.viewportController = viewportController;
+        this.api = api;
+        this.animator = new ViewportAnimator(this.api);
+    }
+    limitScale(scale) {
+        return this.viewportController.limitScale(scale);
     }
     resetViewport() {
-        this.viewportController.setDefault();
+        const defaultViewport = this.viewportController.getDefault();
+        this.api.setViewport(defaultViewport);
     }
     zoom(direction) {
-        this.viewportController.zoom(direction);
+        const viewport = this.viewportController.getZoomed(direction);
+        if (viewport) {
+            this.api.setViewport(viewport);
+        }
     }
     moveViewportToStep(stepId) {
         const component = this.workspaceController.getComponentByStepId(stepId);
@@ -686,7 +762,16 @@ 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 viewport = this.api.getViewport();
+        const canvasPosition = this.api.getCanvasPosition();
+        const newViewport = ZoomByWheelCalculator.calculate(this.viewportController, viewport, canvasPosition, e);
+        if (newViewport) {
+            this.api.setViewport(newViewport);
+        }
     }
 }
 
@@ -725,7 +810,7 @@ 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 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);
     }
@@ -1170,7 +1255,7 @@ class ValidationErrorBadge {
     }
 }
 
-const defaultConfiguration$6 = {
+const defaultConfiguration$7 = {
     view: {
         size: 22,
         iconSize: 12
@@ -1178,7 +1263,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;
@@ -1495,13 +1580,13 @@ class StartStopRootComponentView {
         const x = view.joinX - cfg.size / 2;
         const endY = cfg.size + view.height;
         const iconSize = parentPlaceIndicator ? cfg.folderIconSize : cfg.defaultIconSize;
-        const startCircle = createCircle(parentPlaceIndicator ? cfg.folderIconD : cfg.startIconD, cfg.size, iconSize);
+        const startCircle = createCircle('start', parentPlaceIndicator ? cfg.folderIconD : cfg.startIconD, cfg.size, iconSize);
         Dom.translate(startCircle, x, 0);
         g.appendChild(startCircle);
         Dom.translate(view.g, 0, cfg.size);
-        const endCircle = createCircle(parentPlaceIndicator ? cfg.folderIconD : cfg.stopIconD, cfg.size, iconSize);
-        Dom.translate(endCircle, x, endY);
-        g.appendChild(endCircle);
+        const stopCircle = createCircle('stop', parentPlaceIndicator ? cfg.folderIconD : cfg.stopIconD, cfg.size, iconSize);
+        Dom.translate(stopCircle, x, endY);
+        g.appendChild(stopCircle);
         let startPlaceholder = null;
         let endPlaceholder = null;
         if (parentPlaceIndicator) {
@@ -1529,7 +1614,10 @@ class StartStopRootComponentView {
         (_a = this.g.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.g);
     }
 }
-function createCircle(d, size, iconSize) {
+function createCircle(classSuffix, d, size, iconSize) {
+    const g = Dom.svg('g', {
+        class: 'sqd-root-start-stop-' + classSuffix
+    });
     const r = size / 2;
     const circle = Dom.svg('circle', {
         class: 'sqd-root-start-stop-circle',
@@ -1537,7 +1625,6 @@ function createCircle(d, size, iconSize) {
         cy: r,
         r: r
     });
-    const g = Dom.svg('g');
     g.appendChild(circle);
     const offset = (size - iconSize) / 2;
     const icon = Icons.appendPath(g, 'sqd-root-start-stop-icon', d, iconSize);
@@ -1572,7 +1659,7 @@ class StartStopRootComponent {
     }
 }
 
-const defaultConfiguration$5 = {
+const defaultConfiguration$6 = {
     view: {
         size: 30,
         defaultIconSize: 22,
@@ -1584,7 +1671,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;
@@ -1818,15 +1905,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;
@@ -1837,7 +1924,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);
@@ -1845,6 +1932,24 @@ class CenteredViewportCalculator {
     }
 }
 
+class ClassicWheelController {
+    static create(api) {
+        return new ClassicWheelController(api);
+    }
+    constructor(api) {
+        this.api = api;
+    }
+    onWheel(e) {
+        this.api.handleWheelEvent(e);
+    }
+}
+
+class ClassicWheelControllerExtension {
+    constructor() {
+        this.create = ClassicWheelController.create;
+    }
+}
+
 class NextQuantifiedNumber {
     constructor(values) {
         this.values = values;
@@ -1871,142 +1976,68 @@ class NextQuantifiedNumber {
             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 };
+    limit(scale) {
+        const min = this.values[0];
+        const max = this.values[this.values.length - 1];
+        return Math.min(Math.max(scale, min), max);
     }
 }
 
-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);
-        }
-    }
-}
-
-class ClassicWheelControllerExtension {
-    constructor() {
-        this.create = ClassicWheelController.create;
-    }
-}
-
-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(api) {
-        this.api = api;
-    }
-    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 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
-            });
-        });
-    }
-}
-
-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);
     }
 }
 
@@ -2166,10 +2197,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 {
@@ -2199,7 +2246,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);
@@ -2230,21 +2277,21 @@ 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);
@@ -2258,7 +2305,7 @@ class BehaviorController {
     }
     stop(interrupt, element) {
         if (!this.state) {
-            throw new Error(notInitializedError);
+            throw new Error(notInitializedError$1);
         }
         if (this.shadowRoot) {
             this.unbind(this.shadowRoot);
@@ -2833,20 +2880,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);
     }
@@ -3223,17 +3276,96 @@ 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 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, api.viewport, designerContext.services);
         setTimeout(() => {
             workspace.updateRootComponent();
             api.viewport.resetViewport();
@@ -3243,17 +3375,19 @@ 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, 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.viewportApi = viewportApi;
@@ -3272,6 +3406,9 @@ class Workspace {
                 this.behaviorController.start(position, behavior);
             }
         };
+        this.onPinchToZoom = (distance, centerPoint) => {
+            this.pinchToZoomController.start(distance, centerPoint);
+        };
         this.onWheel = (e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -4395,7 +4532,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();
@@ -4686,4 +4823,4 @@ class StepsDesignerExtension {
     }
 }
 
-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, 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 };