sequential-workflow-designer 0.24.7 → 0.25.0

package/dist/index.umd.js

@@ -672,16 +672,92 @@
 	    }
 	}
 
+	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);
@@ -689,7 +765,16 @@
 	        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);
+	        }
 	    }
 	}
 
@@ -728,7 +813,7 @@
 	    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);
 	    }
@@ -1173,7 +1258,7 @@
 	    }
 	}
 
-	const defaultConfiguration$6 = {
+	const defaultConfiguration$7 = {
 	    view: {
 	        size: 22,
 	        iconSize: 12
@@ -1181,7 +1266,7 @@
 	};
 	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;
@@ -1498,13 +1583,13 @@
 	        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) {
@@ -1532,7 +1617,10 @@
 	        (_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',
@@ -1540,7 +1628,6 @@
 	        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);
@@ -1575,7 +1662,7 @@
 	    }
 	}
 
-	const defaultConfiguration$5 = {
+	const defaultConfiguration$6 = {
 	    view: {
 	        size: 30,
 	        defaultIconSize: 22,
@@ -1587,7 +1674,7 @@
 	};
 	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;
@@ -1821,15 +1908,15 @@
 	};
 
 	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;
@@ -1840,7 +1927,7 @@
 	            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);
@@ -1848,6 +1935,24 @@
 	    }
 	}
 
+	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;
@@ -1874,142 +1979,68 @@
 	            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);
 	    }
 	}
 
@@ -2352,10 +2383,26 @@
 	        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 {
@@ -2385,7 +2432,7 @@
 	            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);
@@ -2416,21 +2463,21 @@
 	    }
 	    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);
@@ -2444,7 +2491,7 @@
 	    }
 	    stop(interrupt, element) {
 	        if (!this.state) {
-	            throw new Error(notInitializedError);
+	            throw new Error(notInitializedError$1);
 	        }
 	        if (this.shadowRoot) {
 	            this.unbind(this.shadowRoot);
@@ -3019,20 +3066,26 @@
 	    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);
 	    }
@@ -3409,17 +3462,96 @@
 	    }
 	}
 
+	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();
@@ -3429,17 +3561,19 @@
 	        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;
@@ -3458,6 +3592,9 @@
 	                this.behaviorController.start(position, behavior);
 	            }
 	        };
+	        this.onPinchToZoom = (distance, centerPoint) => {
+	            this.pinchToZoomController.start(distance, centerPoint);
+	        };
 	        this.onWheel = (e) => {
 	            e.preventDefault();
 	            e.stopPropagation();
@@ -4581,7 +4718,7 @@
 	        services.regionComponentView = new DefaultRegionComponentViewExtension();
 	    }
 	    if (!services.viewportController) {
-	        services.viewportController = new DefaultViewportControllerExtension();
+	        services.viewportController = DefaultViewportControllerExtension.create();
 	    }
 	    if (!services.grid) {
 	        services.grid = LineGridExtension.create();
@@ -4901,7 +5038,6 @@
 	exports.ObjectCloner = ObjectCloner;
 	exports.OutputView = OutputView;
 	exports.PathBarApi = PathBarApi;
-	exports.QuantifiedScaleViewportCalculator = QuantifiedScaleViewportCalculator;
 	exports.RectPlaceholder = RectPlaceholder;
 	exports.RectPlaceholderView = RectPlaceholderView;
 	exports.ServicesResolver = ServicesResolver;
@@ -4914,6 +5050,7 @@
 	exports.Uid = Uid;
 	exports.ValidationErrorBadgeExtension = ValidationErrorBadgeExtension;
 	exports.Vector = Vector;
+	exports.ViewportApi = ViewportApi;
 	exports.WorkspaceApi = WorkspaceApi;
 	exports.createContainerStepComponentViewFactory = createContainerStepComponentViewFactory;
 	exports.createSwitchStepComponentViewFactory = createSwitchStepComponentViewFactory;