@grafloria/element 0.3.18 → 0.3.20

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

@@ -0,0 +1,549 @@
+"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