npm - sequential-workflow-designer - Versions diffs - 0.24.8 → 0.25.0 - Mend

sequential-workflow-designer 0.24.8 → 0.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -103,10 +103,10 @@ Add the below code to your head section in HTML document.
 ```html
 <head>
 ...
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.8/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.8/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.8/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.8/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.25.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.25.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.25.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.25.0/dist/index.umd.js"></script>
 ```
 Call the designer by:

package/dist/index.umd.js CHANGED Viewed

@@ -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;
@@ -1577,7 +1662,7 @@
 	    }
 	}
-	const defaultConfiguration$5 = {
+	const defaultConfiguration$6 = {
 	    view: {
 	        size: 30,
 	        defaultIconSize: 22,
@@ -1589,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;
@@ -1823,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;
@@ -1842,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);
@@ -1850,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;
@@ -1876,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);
 	    }
 	}
@@ -2354,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 {
@@ -2387,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);
@@ -2418,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);
@@ -2446,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);
@@ -3021,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);
 	    }
@@ -3411,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();
@@ -3431,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;
@@ -3460,6 +3592,9 @@
 	                this.behaviorController.start(position, behavior);
 	            }
 	        };
+	        this.onPinchToZoom = (distance, centerPoint) => {
+	            this.pinchToZoomController.start(distance, centerPoint);
+	        };
 	        this.onWheel = (e) => {
 	            e.preventDefault();
 	            e.stopPropagation();
@@ -4583,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();
@@ -4903,7 +5038,6 @@
 	exports.ObjectCloner = ObjectCloner;
 	exports.OutputView = OutputView;
 	exports.PathBarApi = PathBarApi;
-	exports.QuantifiedScaleViewportCalculator = QuantifiedScaleViewportCalculator;
 	exports.RectPlaceholder = RectPlaceholder;
 	exports.RectPlaceholderView = RectPlaceholderView;
 	exports.ServicesResolver = ServicesResolver;
@@ -4916,6 +5050,7 @@
 	exports.Uid = Uid;
 	exports.ValidationErrorBadgeExtension = ValidationErrorBadgeExtension;
 	exports.Vector = Vector;
+	exports.ViewportApi = ViewportApi;
 	exports.WorkspaceApi = WorkspaceApi;
 	exports.createContainerStepComponentViewFactory = createContainerStepComponentViewFactory;
 	exports.createSwitchStepComponentViewFactory = createSwitchStepComponentViewFactory;