@grafloria/element 0.3.20 → 0.3.21

package/src/libs/renderer/src/interaction/touch-gestures.js

@@ -1,549 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TouchGestureController = exports.TOUCH_HIT_SLOP_PX = void 0;
-// wave10/whiteboard: touch must give a registered tool first refusal too, or drawing with a
-// finger is impossible — the whiteboard tools would only work with a mouse. Same registry,
-// same single-active-tool rule as the DomEventBinder's mouse ladder.
-const tools_1 = require("../ext/tools");
-const selection_tools_1 = require("./selection-tools");
-/**
- * Extra hit radius, in CSS px, granted to a TOUCH pointer.
- *
- * A port renders at ~5 px radius. A fingertip is ~9 mm. WCAG 2.5.8 wants a 24×24
- * target and Apple/Material ask for 44/48. 16 px of slop takes an effective port
- * target from ~14 px to ~46 px across, which clears 44. Applied in WORLD units
- * (slop ÷ zoom) because every hit test in this engine is world-space — applying it
- * in screen px would make ports unhittable when zoomed out, which is exactly when
- * they are smallest and you need the help most.
- */
-exports.TOUCH_HIT_SLOP_PX = 16;
-class TouchGestureController {
-    constructor(host, options = {}, 
-    /**
-     * wave12/node-resize. The SHARED tool controller (the binder owns it and hands
-     * the same instance to the mouse ladder). Optional so a host that builds a bare
-     * TouchGestureController still works — without it, touch simply offers no resize.
-     */
-    selectionTools) {
-        var _a, _b, _c, _d, _e;
-        this.host = host;
-        this.selectionTools = selectionTools;
-        /** Live touch points, keyed by pointerId. A Map because fingers lift out of order. */
-        this.pointers = new Map();
-        this.action = { kind: 'none' };
-        this.longPressTimer = null;
-        this.longPressFired = false;
-        // Pinch baseline, captured when the SECOND finger lands.
-        this.pinchStartDistance = 0;
-        this.pinchStartZoom = 1;
-        this.pinchLastMidX = 0;
-        this.pinchLastMidY = 0;
-        this.options = {
-            enablePan: (_a = options.enablePan) !== null && _a !== void 0 ? _a : true,
-            enableZoom: (_b = options.enableZoom) !== null && _b !== void 0 ? _b : true,
-            longPressMs: (_c = options.longPressMs) !== null && _c !== void 0 ? _c : 500,
-            moveTolerancePx: (_d = options.moveTolerancePx) !== null && _d !== void 0 ? _d : 10,
-            tapMaxMs: (_e = options.tapMaxMs) !== null && _e !== void 0 ? _e : 300,
-        };
-    }
-    /** How many fingers are down. Exposed for tests and for the binder's cursor logic. */
-    get activePointerCount() {
-        return this.pointers.size;
-    }
-    /** True while a two-finger pinch owns the gesture. */
-    get isPinching() {
-        return this.action.kind === 'pinch';
-    }
-    // ==========================================================================
-    // down
-    // ==========================================================================
-    onPointerDown(event) {
-        var _a, _b, _c, _d, _e;
-        const engine = this.host.getEngine();
-        if (!(engine === null || engine === void 0 ? void 0 : engine.getDiagram()))
-            return;
-        this.pointers.set(event.pointerId, {
-            id: event.pointerId,
-            clientX: event.clientX,
-            clientY: event.clientY,
-            startClientX: event.clientX,
-            startClientY: event.clientY,
-            startTime: Date.now(),
-        });
-        // SECOND finger — abandon whatever one finger was doing and pinch.
-        if (this.pointers.size === 2) {
-            this.cancelLongPress();
-            this.abortSingleAction(engine);
-            this.beginPinch();
-            return;
-        }
-        // A third finger is noise during a pinch; ignore it rather than re-arming.
-        if (this.pointers.size > 2)
-            return;
-        this.applyTouchHitSlop();
-        const { x: worldX, y: worldY } = this.toWorld(event);
-        const diagram = engine.getDiagram();
-        if (!diagram)
-            return;
-        // Refresh hover so port/link hit state reflects where the finger actually is.
-        // A touch has no hover — nothing moved over the port before the press — so
-        // without this the port under the finger is simply not known.
-        this.host.interaction.handleMouseMove(worldX, worldY, engine);
-        const state = this.host.interaction.getState();
-        this.armLongPress(event, worldX, worldY);
-        // wave10/whiteboard: a REGISTERED TOOL gets first refusal, exactly as on the mouse ladder
-        // — otherwise the whiteboard tools would only work with a mouse and touch-run's "drawing
-        // MUST work with a finger" gate could never pass. A claiming tool owns the whole gesture
-        // (move/up/cancel); the long-press-to-menu gesture is disarmed so a slow draw does not pop
-        // a context menu mid-line.
-        if (!this.host.isReadonly()) {
-            const toolEvent = this.toToolEvent('down', event, worldX, worldY);
-            const toolHit = this.toToolHit(worldX, worldY, engine);
-            const tool = (0, tools_1.resolveTool)(toolEvent, toolHit);
-            if (tool) {
-                this.cancelLongPress();
-                this.action = { kind: 'tool', tool, hit: toolHit };
-                (_a = tool.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(tool, toolEvent, toolHit);
-                this.host.requestRender();
-                return;
-            }
-        }
-        // wave12/node-resize: a resize handle on the selected node — grabbed before the
-        // port/node branches for the same reason as the mouse ladder (a corner handle
-        // sits on the node's corner). A finger gets extra hit slop so a ~6px handle is
-        // actually reachable.
-        //
-        // Same port-over-side-handle rule as the mouse ladder: the n/e/s/w handles
-        // sit exactly on the default side ports, and a finger on a visible port
-        // glyph must draw a wire, not resize. Corners stay resize.
-        if (!this.host.isReadonly()) {
-            const handle = this.resizeHandleAt(worldX, worldY);
-            if (handle && !(0, selection_tools_1.sideHandleYieldsToPort)(handle, state.hoveredPort)) {
-                this.cancelLongPress();
-                this.selectionTools.beginResize(handle, engine, worldX, worldY);
-                this.action = { kind: 'resize' };
-                this.host.requestRender();
-                return;
-            }
-        }
-        // Port → connection drag. Read-only refuses.
-        if (!this.host.isReadonly() && state.hoveredPort) {
-            this.host.interaction.startConnection(state.hoveredPort, worldX, worldY, engine);
-            this.action = { kind: 'connect' };
-            this.host.requestRender();
-            return;
-        }
-        // Node → drag it (if editable), else fall through to pan. Drag-handle
-        // semantics mirror the mouse ladder: a press ON the handle drags the
-        // PARENT; a body press on a node that HAS a handle child does not drag.
-        const rawHit = diagram.getNodeAtPosition(worldX, worldY);
-        const viaHandle = ((_c = (_b = rawHit === null || rawHit === void 0 ? void 0 : rawHit.behavior) === null || _b === void 0 ? void 0 : _b.dragHandler) === null || _c === void 0 ? void 0 : _c.isDragHandler) === true;
-        const node = viaHandle && (rawHit === null || rawHit === void 0 ? void 0 : rawHit.parentId) ? ((_d = diagram.getNode(rawHit.parentId)) !== null && _d !== void 0 ? _d : rawHit) : rawHit;
-        const handleOnly = !viaHandle &&
-            node &&
-            [...((_e = node.children) !== null && _e !== void 0 ? _e : [])].some((id) => { var _a, _b, _c; return ((_c = (_b = (_a = diagram.getNode(id)) === null || _a === void 0 ? void 0 : _a.behavior) === null || _b === void 0 ? void 0 : _b.dragHandler) === null || _c === void 0 ? void 0 : _c.isDragHandler) === true; });
-        if (node && !this.host.isReadonly() && node.isDraggable() && !handleOnly) {
-            const selected = diagram
-                .getSelectedNodes()
-                .filter((n) => n.isDraggable());
-            const nodeIds = selected.some((n) => n.id === node.id)
-                ? selected.map((n) => n.id)
-                : [node.id];
-            this.action = {
-                kind: 'node',
-                nodeIds,
-                lastWorldX: worldX,
-                lastWorldY: worldY,
-                committed: false,
-            };
-            return;
-        }
-        // Empty canvas (or a node we may not move) → pan.
-        if (this.options.enablePan) {
-            this.action = { kind: 'pan', lastX: event.clientX, lastY: event.clientY };
-        }
-    }
-    // ==========================================================================
-    // move
-    // ==========================================================================
-    onPointerMove(event) {
-        var _a, _b;
-        const tracked = this.pointers.get(event.pointerId);
-        if (!tracked)
-            return;
-        tracked.clientX = event.clientX;
-        tracked.clientY = event.clientY;
-        const engine = this.host.getEngine();
-        if (!engine)
-            return;
-        if (this.travelled(tracked) > this.options.moveTolerancePx) {
-            this.cancelLongPress();
-        }
-        if (this.action.kind === 'pinch') {
-            this.updatePinch();
-            return;
-        }
-        switch (this.action.kind) {
-            case 'tool': {
-                const { x, y } = this.toWorld(event);
-                (_b = (_a = this.action.tool).onPointerMove) === null || _b === void 0 ? void 0 : _b.call(_a, this.toToolEvent('move', event, x, y), this.action.hit);
-                this.host.requestRender();
-                return;
-            }
-            case 'pan': {
-                // Drag RIGHT ⇒ camera LEFT, so content follows the finger.
-                this.host.viewport.panByScreenDelta(this.action.lastX - event.clientX, this.action.lastY - event.clientY);
-                this.action.lastX = event.clientX;
-                this.action.lastY = event.clientY;
-                this.host.requestRender();
-                return;
-            }
-            case 'node': {
-                if (this.host.isReadonly())
-                    return;
-                if (!this.action.committed) {
-                    if (this.travelled(tracked) < this.options.moveTolerancePx)
-                        return;
-                    this.action.committed = true;
-                }
-                const { x, y } = this.toWorld(event);
-                const dx = x - this.action.lastWorldX;
-                const dy = y - this.action.lastWorldY;
-                this.action.lastWorldX = x;
-                this.action.lastWorldY = y;
-                if (!dx && !dy)
-                    return;
-                const diagram = engine.getDiagram();
-                for (const id of this.action.nodeIds) {
-                    const node = diagram === null || diagram === void 0 ? void 0 : diagram.getNode(id);
-                    if (!node || node.state.locked)
-                        continue;
-                    node.setPosition(node.position.x + dx, node.position.y + dy);
-                }
-                this.host.interaction.invalidatePortHitCache();
-                this.host.requestRender();
-                return;
-            }
-            case 'connect': {
-                const { x, y } = this.toWorld(event);
-                this.host.interaction.handleMouseMove(x, y, engine);
-                this.host.interaction.handleConnectionDrag(x, y, engine);
-                this.host.requestRender();
-                return;
-            }
-            case 'resize': {
-                if (this.host.isReadonly())
-                    return;
-                const { x, y } = this.toWorld(event);
-                // Clamp (min/max/aspect) is applied inside updateResize, every move.
-                if (this.selectionTools.updateResize(engine, x, y, {
-                    shift: event.shiftKey,
-                    alt: event.altKey,
-                    ctrl: event.ctrlKey,
-                    meta: event.metaKey,
-                })) {
-                    this.host.interaction.invalidatePortHitCache();
-                    this.host.requestRender();
-                }
-                return;
-            }
-            default:
-                return;
-        }
-    }
-    // ==========================================================================
-    // up / cancel
-    // ==========================================================================
-    onPointerUp(event) {
-        var _a, _b, _c, _d, _e, _f;
-        const tracked = this.pointers.get(event.pointerId);
-        this.pointers.delete(event.pointerId);
-        const engine = this.host.getEngine();
-        if (!engine) {
-            this.reset();
-            return;
-        }
-        // Lifting one finger out of a pinch must NOT silently become a one-finger
-        // pan/drag — the remaining finger has been stationary and would jump the
-        // canvas. Stay inert until every finger is up.
-        if (this.action.kind === 'pinch') {
-            if (this.pointers.size === 0)
-                this.action = { kind: 'none' };
-            return;
-        }
-        this.cancelLongPress();
-        const wasTap = !!tracked &&
-            !this.longPressFired &&
-            Date.now() - tracked.startTime <= this.options.tapMaxMs &&
-            this.travelled(tracked) <= this.options.moveTolerancePx;
-        switch (this.action.kind) {
-            case 'tool': {
-                const { x, y } = this.clientToWorld(event.clientX, event.clientY);
-                (_b = (_a = this.action.tool).onPointerUp) === null || _b === void 0 ? void 0 : _b.call(_a, this.toToolEvent('up', event, x, y), this.action.hit);
-                this.host.requestRender();
-                break;
-            }
-            case 'connect':
-                this.host.interaction.completeConnection(engine);
-                this.host.requestRender();
-                break;
-            case 'resize': {
-                // Commit as ONE undoable command — the model already sits at its final size.
-                const command = this.selectionTools.endGesture(engine);
-                if (command) {
-                    void engine.commandManager.execute(command);
-                    this.host.emit('nodes:change', { nodes: (_d = (_c = engine.getDiagram()) === null || _c === void 0 ? void 0 : _c.getNodes()) !== null && _d !== void 0 ? _d : [] });
-                }
-                this.host.requestRender();
-                break;
-            }
-            case 'node':
-                if (this.action.committed) {
-                    this.host.emit('nodes:change', { nodes: (_f = (_e = engine.getDiagram()) === null || _e === void 0 ? void 0 : _e.getNodes()) !== null && _f !== void 0 ? _f : [] });
-                }
-                else if (wasTap && tracked) {
-                    this.tap(tracked, engine);
-                }
-                break;
-            case 'pan':
-                if (wasTap && tracked)
-                    this.tap(tracked, engine);
-                break;
-            default:
-                break;
-        }
-        if (this.pointers.size === 0) {
-            this.action = { kind: 'none' };
-            this.longPressFired = false;
-            this.clearTouchHitSlop();
-        }
-    }
-    /** The OS took the gesture (call, notification, browser back-swipe). Abort cleanly. */
-    onPointerCancel(event) {
-        this.pointers.delete(event.pointerId);
-        const engine = this.host.getEngine();
-        this.cancelLongPress();
-        if (engine)
-            this.abortSingleAction(engine);
-        if (this.pointers.size === 0)
-            this.reset();
-    }
-    /** Drop every listener-visible bit of state (binder detach). */
-    reset() {
-        this.cancelLongPress();
-        this.pointers.clear();
-        this.action = { kind: 'none' };
-        this.longPressFired = false;
-        this.clearTouchHitSlop();
-    }
-    // ==========================================================================
-    // tap / long-press
-    // ==========================================================================
-    tap(tracked, engine) {
-        var _a;
-        const diagram = engine.getDiagram();
-        if (!diagram)
-            return;
-        const { x: worldX, y: worldY } = this.clientToWorld(tracked.clientX, tracked.clientY);
-        const link = (_a = this.host.interaction.getState().hoveredLink) !== null && _a !== void 0 ? _a : this.host.interaction.getLinkAtPosition(worldX, worldY, engine);
-        if (link) {
-            this.host.interaction.selectLink(link, engine, false);
-            this.host.requestRender();
-            this.emitSelection(diagram);
-            this.host.emit('edge:click', { edge: link, world: { x: worldX, y: worldY } });
-            return;
-        }
-        const node = diagram.getNodeAtPosition(worldX, worldY);
-        if (node) {
-            diagram.selectNode(node);
-            this.host.requestRender();
-            this.emitSelection(diagram);
-            this.host.emit('node:click', { node, world: { x: worldX, y: worldY } });
-            return;
-        }
-        diagram.clearSelection();
-        diagram.getLinks().forEach((l) => {
-            if (l.state === 'selected')
-                l.setState('default');
-        });
-        this.host.requestRender();
-        this.emitSelection(diagram);
-    }
-    armLongPress(event, worldX, worldY) {
-        this.cancelLongPress();
-        this.longPressFired = false;
-        const clientX = event.clientX;
-        const clientY = event.clientY;
-        this.longPressTimer = setTimeout(() => {
-            var _a, _b;
-            this.longPressTimer = null;
-            this.longPressFired = true;
-            const engine = this.host.getEngine();
-            const diagram = engine === null || engine === void 0 ? void 0 : engine.getDiagram();
-            if (!diagram)
-                return;
-            // The long-press target is resolved at FIRE time, not at press time: the
-            // finger may have drifted a few px within tolerance.
-            const node = (_a = diagram.getNodeAtPosition(worldX, worldY)) !== null && _a !== void 0 ? _a : undefined;
-            const link = node
-                ? undefined
-                : ((_b = this.host.interaction.getLinkAtPosition(worldX, worldY, engine)) !== null && _b !== void 0 ? _b : undefined);
-            // A long-press that opens a menu must not ALSO drag the thing under it.
-            this.action = { kind: 'none' };
-            this.host.emit('contextmenu', {
-                node,
-                edge: link,
-                world: { x: worldX, y: worldY },
-                client: { x: clientX, y: clientY },
-                source: 'touch',
-                readonly: this.host.isReadonly(),
-            });
-            this.host.requestRender();
-        }, this.options.longPressMs);
-    }
-    cancelLongPress() {
-        if (this.longPressTimer !== null) {
-            clearTimeout(this.longPressTimer);
-            this.longPressTimer = null;
-        }
-    }
-    // ==========================================================================
-    // pinch
-    // ==========================================================================
-    beginPinch() {
-        const [a, b] = [...this.pointers.values()];
-        if (!a || !b)
-            return;
-        this.action = { kind: 'pinch' };
-        this.pinchStartDistance = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY) || 1;
-        this.pinchStartZoom = this.host.viewport.getZoom();
-        this.pinchLastMidX = (a.clientX + b.clientX) / 2;
-        this.pinchLastMidY = (a.clientY + b.clientY) / 2;
-    }
-    updatePinch() {
-        const [a, b] = [...this.pointers.values()];
-        if (!a || !b)
-            return;
-        const midX = (a.clientX + b.clientX) / 2;
-        const midY = (a.clientY + b.clientY) / 2;
-        // Two-finger PAN: the midpoint moving is a pan, independent of the spread.
-        // Applied first so the zoom anchor below is computed against the panned camera.
-        if (this.options.enablePan) {
-            const dx = this.pinchLastMidX - midX;
-            const dy = this.pinchLastMidY - midY;
-            if (dx || dy)
-                this.host.viewport.panByScreenDelta(dx, dy);
-        }
-        this.pinchLastMidX = midX;
-        this.pinchLastMidY = midY;
-        if (this.options.enableZoom) {
-            const distance = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
-            // Zoom is RELATIVE TO THE GESTURE START, not incremental per move event.
-            // Incremental (zoom *= d/lastD) accumulates float error and drifts on a slow
-            // pinch; ratio-to-start always lands on the same zoom for the same finger
-            // spread, which is what makes a pinch feel like it is holding the canvas.
-            const target = this.pinchStartZoom * (distance / this.pinchStartDistance);
-            this.host.viewport.zoomAtPoint(target, midX, midY, this.host.getRect());
-        }
-        this.host.requestRender();
-    }
-    // ==========================================================================
-    // helpers
-    // ==========================================================================
-    /**
-     * Grow every hit target for the duration of a touch gesture. World units, because
-     * the hit tests are world-space and a screen-px slop would vanish when zoomed out.
-     */
-    applyTouchHitSlop() {
-        const zoom = this.host.viewport.getZoom() || 1;
-        this.host.interaction.setHitSlop(exports.TOUCH_HIT_SLOP_PX / zoom);
-    }
-    clearTouchHitSlop() {
-        this.host.interaction.setHitSlop(0);
-    }
-    /** Abort an in-flight one-finger action without committing it. */
-    abortSingleAction(engine) {
-        var _a, _b, _c;
-        if (this.action.kind === 'connect') {
-            this.host.interaction.cancelConnection(engine);
-            this.host.requestRender();
-        }
-        else if (this.action.kind === 'tool') {
-            // A second finger (pinch) or an OS interruption mid-draw: discard the in-progress
-            // stroke rather than committing a half-line.
-            (_b = (_a = this.action.tool).onCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
-            this.host.requestRender();
-        }
-        else if (this.action.kind === 'resize') {
-            // A second finger or an OS interruption mid-resize: abandon, restoring size.
-            (_c = this.selectionTools) === null || _c === void 0 ? void 0 : _c.cancelGesture(engine);
-            this.host.requestRender();
-        }
-        this.action = { kind: 'none' };
-    }
-    /**
-     * wave12/node-resize: the resize handle under a world point, with touch slop.
-     *
-     * Handles are a constant ~6 screen px; a fingertip is far bigger, so the layer's
-     * own hit radius is grown by {@link TOUCH_HIT_SLOP_PX} (in world units) before the
-     * distance test. Returns only `kind: 'resize'` handles.
-     */
-    resizeHandleAt(worldX, worldY) {
-        const engine = this.host.getEngine();
-        if (!engine || !this.selectionTools)
-            return null;
-        const zoom = this.host.viewport.getZoom();
-        const layer = this.selectionTools.computeLayer(engine, zoom);
-        const slop = zoom > 0 ? exports.TOUCH_HIT_SLOP_PX / zoom : exports.TOUCH_HIT_SLOP_PX;
-        // resize-ux: one shared hit path with the mouse ladder — the side handles
-        // are edge BANDS now, and the finger slop must grow band and dot alike.
-        return this.selectionTools.hitTestResize(layer, worldX, worldY, slop);
-    }
-    /** Adapt a touch PointerEvent to the framework-free tool contract. */
-    toToolEvent(type, event, worldX, worldY) {
-        const rect = this.host.getRect();
-        return {
-            type,
-            world: { x: worldX, y: worldY },
-            screen: { x: event.clientX - rect.left, y: event.clientY - rect.top },
-            modifiers: {
-                shift: event.shiftKey,
-                ctrl: event.ctrlKey,
-                alt: event.altKey,
-                meta: event.metaKey,
-            },
-            source: event,
-        };
-    }
-    /** What the finger landed on, resolved once on pointerdown. */
-    toToolHit(worldX, worldY, engine) {
-        var _a, _b, _c, _d;
-        const diagram = engine.getDiagram();
-        const state = this.host.interaction.getState();
-        const node = (_a = diagram === null || diagram === void 0 ? void 0 : diagram.getNodeAtPosition(worldX, worldY)) !== null && _a !== void 0 ? _a : undefined;
-        return {
-            node: node !== null && node !== void 0 ? node : undefined,
-            link: (_b = state.hoveredLink) !== null && _b !== void 0 ? _b : undefined,
-            port: (_c = state.hoveredPort) !== null && _c !== void 0 ? _c : undefined,
-            empty: !node && !state.hoveredLink && !state.hoveredPort,
-            nodeWasSelected: node ? ((_d = node.state) === null || _d === void 0 ? void 0 : _d.selected) === true : false,
-        };
-    }
-    travelled(p) {
-        return Math.hypot(p.clientX - p.startClientX, p.clientY - p.startClientY);
-    }
-    toWorld(event) {
-        return this.clientToWorld(event.clientX, event.clientY);
-    }
-    clientToWorld(clientX, clientY) {
-        return this.host.viewport.clientToWorld(clientX, clientY, this.host.getRect());
-    }
-    emitSelection(diagram) {
-        this.host.emit('selection:change', {
-            nodes: diagram.getSelectedNodes(),
-            edges: diagram.getLinks().filter((l) => l.state === 'selected'),
-        });
-    }
-}
-exports.TouchGestureController = TouchGestureController;
-//# sourceMappingURL=touch-gestures.js.map