@xenolithengine/graph-render-pixi 0.7.0-beta.0

package/dist/interaction.js

@@ -0,0 +1,229 @@
+import { EventEmitter } from '@xenolithengine/graph-core';
+/**
+ * Convert a `WheelEvent.deltaY` to a multiplicative zoom factor. Positive delta (scroll down)
+ * zooms out (factor < 1), negative zooms in (factor > 1). Uses an exponential curve so the same
+ * notch always changes zoom by the same proportion, regardless of current zoom level.
+ *
+ * One default OS scroll click produces deltaY ≈ ±100; we map that to ~0.82× / 1.22× zoom step.
+ */
+export function wheelDeltaToZoomFactor(deltaY) {
+    return Math.exp(-deltaY / 500);
+}
+/**
+ * Native trackpad pinch on macOS arrives as a wheel event with `ctrlKey` set and small deltaY
+ * (typically ±1–10). We want a gentler curve here than scroll wheel — pinch should feel buttery,
+ * not catapulty. Same exponential shape, larger divisor.
+ */
+export function pinchDeltaToZoomFactor(deltaY) {
+    return Math.exp(-deltaY / 100);
+}
+export class InteractionManager {
+    #target;
+    #events = new EventEmitter();
+    #panButtons;
+    #panActiveButton = null;
+    #lastPanX = 0;
+    #lastPanY = 0;
+    #touches = new Map();
+    #gestureActive = false;
+    #lastGestureDist = 0;
+    #lastGestureMid = { x: 0, y: 0 };
+    #longPressMs;
+    #longPressSlop;
+    #longPressTimer = null;
+    #longPressStart = null;
+    constructor(target, opts = {}) {
+        this.#target = target;
+        this.#panButtons = new Set(opts.panButtons ?? [1, 2]);
+        this.#longPressMs = opts.longPressMs ?? 500;
+        this.#longPressSlop = opts.longPressSlop ?? 8;
+    }
+    attach() {
+        this.#target.style.touchAction = 'none';
+        // Suppress iOS text-selection / "image options" callout on long-press over the canvas — the
+        // editor opens its OWN context menu via onLongPress, the browser must stay out of the way.
+        this.#target.style.userSelect = 'none';
+        const ts = this.#target.style;
+        ts.webkitUserSelect = 'none';
+        ts.webkitTouchCallout = 'none';
+        this.#target.addEventListener('wheel', this.#onWheel, { passive: false });
+        this.#target.addEventListener('pointerdown', this.#onPointerDown);
+        this.#target.addEventListener('pointermove', this.#onPointerMove);
+        this.#target.addEventListener('pointerup', this.#onPointerUp);
+        this.#target.addEventListener('pointercancel', this.#onPointerUp);
+        this.#target.addEventListener('contextmenu', this.#onContextMenu);
+    }
+    detach() {
+        this.#target.removeEventListener('wheel', this.#onWheel);
+        this.#target.removeEventListener('pointerdown', this.#onPointerDown);
+        this.#target.removeEventListener('pointermove', this.#onPointerMove);
+        this.#target.removeEventListener('pointerup', this.#onPointerUp);
+        this.#target.removeEventListener('pointercancel', this.#onPointerUp);
+        this.#target.removeEventListener('contextmenu', this.#onContextMenu);
+    }
+    onZoom(handler) {
+        return this.#events.on('intent:zoom', handler);
+    }
+    onPan(handler) {
+        return this.#events.on('intent:pan', handler);
+    }
+    /**
+     * Fires the moment a second touch arrives. The editor uses this to cancel any in-flight
+     * single-pointer drag (node move, edge drag, marquee) so the gesture takes over cleanly
+     * instead of half a node being dragged while we also pan + zoom.
+     */
+    onGestureBegin(handler) {
+        return this.#events.on('intent:gesture-begin', handler);
+    }
+    /** Fires when the active touch count drops back below 2. */
+    onGestureEnd(handler) {
+        return this.#events.on('intent:gesture-end', handler);
+    }
+    /** Fires after a stationary single touch holds for `longPressMs` — mobile equivalent of right-click. */
+    onLongPress(handler) {
+        return this.#events.on('intent:long-press', handler);
+    }
+    /** Fires the moment a single touch lands, with the local point and the duration the user must
+     *  hold for the long-press to fire. Editors paint a growing ring at the point so the user gets
+     *  feedback during the hold. Paired with onLongPressCancel; followed by onLongPress on success. */
+    onLongPressStart(handler) {
+        return this.#events.on('intent:long-press-start', handler);
+    }
+    /** Fires when the in-progress long-press is aborted (move past slop, lift early, second touch). */
+    onLongPressCancel(handler) {
+        return this.#events.on('intent:long-press-cancel', handler);
+    }
+    #localPoint(clientX, clientY) {
+        const rect = this.#target.getBoundingClientRect();
+        return { x: clientX - rect.left, y: clientY - rect.top };
+    }
+    #onWheel = (e) => {
+        e.preventDefault();
+        const focal = this.#localPoint(e.clientX, e.clientY);
+        const factor = e.ctrlKey ? pinchDeltaToZoomFactor(e.deltaY) : wheelDeltaToZoomFactor(e.deltaY);
+        this.#events.emit('intent:zoom', { focal, factor });
+    };
+    #onPointerDown = (e) => {
+        if (e.pointerType === 'touch') {
+            this.#touches.set(e.pointerId, { x: e.clientX, y: e.clientY });
+            this.#target.setPointerCapture(e.pointerId);
+            if (this.#touches.size === 1)
+                this.#armLongPress(e.pointerId, e.clientX, e.clientY);
+            if (this.#touches.size === 2 && !this.#gestureActive) {
+                this.#cancelLongPress();
+                this.#beginGesture();
+            }
+            return;
+        }
+        if (!this.#panButtons.has(e.button))
+            return;
+        this.#panActiveButton = e.button;
+        this.#lastPanX = e.clientX;
+        this.#lastPanY = e.clientY;
+        this.#target.setPointerCapture(e.pointerId);
+        e.preventDefault();
+    };
+    #onPointerMove = (e) => {
+        if (e.pointerType === 'touch') {
+            if (!this.#touches.has(e.pointerId))
+                return;
+            this.#touches.set(e.pointerId, { x: e.clientX, y: e.clientY });
+            if (this.#longPressStart && e.pointerId === this.#longPressStart.id) {
+                const dx = e.clientX - this.#longPressStart.x;
+                const dy = e.clientY - this.#longPressStart.y;
+                if (Math.hypot(dx, dy) > this.#longPressSlop)
+                    this.#cancelLongPress();
+            }
+            if (this.#gestureActive && this.#touches.size >= 2)
+                this.#updateGesture();
+            return;
+        }
+        if (this.#panActiveButton === null)
+            return;
+        const dx = e.clientX - this.#lastPanX;
+        const dy = e.clientY - this.#lastPanY;
+        this.#lastPanX = e.clientX;
+        this.#lastPanY = e.clientY;
+        if (dx !== 0 || dy !== 0) {
+            this.#events.emit('intent:pan', { dx, dy });
+        }
+    };
+    #onPointerUp = (e) => {
+        if (e.pointerType === 'touch') {
+            if (this.#longPressStart && e.pointerId === this.#longPressStart.id)
+                this.#cancelLongPress();
+            if (this.#touches.delete(e.pointerId) && this.#gestureActive && this.#touches.size < 2) {
+                this.#endGesture();
+            }
+            if (this.#target.hasPointerCapture(e.pointerId)) {
+                this.#target.releasePointerCapture(e.pointerId);
+            }
+            return;
+        }
+        if (this.#panActiveButton === null)
+            return;
+        if (this.#target.hasPointerCapture(e.pointerId)) {
+            this.#target.releasePointerCapture(e.pointerId);
+        }
+        this.#panActiveButton = null;
+    };
+    #onContextMenu = (e) => {
+        // Right-click is a pan gesture for us — suppress the browser context menu.
+        e.preventDefault();
+    };
+    #beginGesture() {
+        const [a, b] = this.#twoTouches();
+        this.#lastGestureDist = Math.hypot(b.x - a.x, b.y - a.y);
+        this.#lastGestureMid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+        this.#gestureActive = true;
+        this.#events.emit('intent:gesture-begin', {});
+    }
+    #updateGesture() {
+        const [a, b] = this.#twoTouches();
+        const dist = Math.hypot(b.x - a.x, b.y - a.y);
+        const midClient = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+        const dx = midClient.x - this.#lastGestureMid.x;
+        const dy = midClient.y - this.#lastGestureMid.y;
+        if (dx !== 0 || dy !== 0)
+            this.#events.emit('intent:pan', { dx, dy });
+        if (dist > 0 && this.#lastGestureDist > 0 && dist !== this.#lastGestureDist) {
+            const factor = dist / this.#lastGestureDist;
+            const focal = this.#localPoint(midClient.x, midClient.y);
+            this.#events.emit('intent:zoom', { focal, factor });
+        }
+        this.#lastGestureMid = midClient;
+        this.#lastGestureDist = dist;
+    }
+    #endGesture() {
+        this.#gestureActive = false;
+        this.#events.emit('intent:gesture-end', {});
+    }
+    #armLongPress(id, clientX, clientY) {
+        this.#cancelLongPress();
+        this.#longPressStart = { id, x: clientX, y: clientY };
+        const local = this.#localPoint(clientX, clientY);
+        this.#events.emit('intent:long-press-start', { x: local.x, y: local.y, ms: this.#longPressMs });
+        this.#longPressTimer = setTimeout(() => {
+            this.#longPressTimer = null;
+            this.#longPressStart = null;
+            this.#events.emit('intent:long-press', this.#localPoint(clientX, clientY));
+        }, this.#longPressMs);
+    }
+    #cancelLongPress() {
+        const wasArmed = this.#longPressStart !== null || this.#longPressTimer !== null;
+        if (this.#longPressTimer !== null) {
+            clearTimeout(this.#longPressTimer);
+            this.#longPressTimer = null;
+        }
+        this.#longPressStart = null;
+        if (wasArmed)
+            this.#events.emit('intent:long-press-cancel', {});
+    }
+    #twoTouches() {
+        const it = this.#touches.values();
+        const a = it.next().value;
+        const b = it.next().value;
+        return [a, b];
+    }
+}
+//# sourceMappingURL=interaction.js.map

package/dist/interaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interaction.js","sourceRoot":"","sources":["../src/interaction.ts"],"names":[],"mappings":"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"}

package/dist/layout.d.ts

@@ -0,0 +1,126 @@
+import type { Node, Pin, PinId, WidgetSpec } from '@xenolithengine/graph-core';
+export interface WidgetGeometry {
+    rowHeight: number;
+    gap: number;
+    /** Min width reserved for a widget's control (slider track, value field) beside its label. */
+    controlMinWidth: number;
+}
+/** A widget is "free-floating" (rides in the body band, not a pin row) in two cases:
+ *  1. `custom` widget whose declared bind key doesn't resolve to any pin — these are node-level
+ *     editors (schema editor, color palette, multi-field panel) that legitimately don't belong
+ *     to one specific pin.
+ *  2. Any widget with explicit `freeFloating: true` — n8n-style config fields (HTTP body, auth
+ *     token, etc.) that aren't connectable from outside but still need rendering. Bypasses the
+ *     usual "non-custom widget needs a pin to render" rule.
+ *  Standard non-custom widgets without a pin or the explicit flag are still silently dropped. */
+export declare function isFreeFloating(node: Node, w: WidgetSpec): boolean;
+/** Vertical footprint a free-floating widget takes in the body band — covers `text` widgets that
+ *  need an extra row for their label above the field, and multiline text fields that want 3 rows
+ *  for the editor box. Custom widgets honour their declared height. Everyone else fits one row. */
+export declare function freeFloatingHeight(w: WidgetSpec, rowHeight: number): number;
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface PinLayout {
+    id: PinId;
+    x: number;
+    y: number;
+    side: 'left' | 'right';
+}
+export interface NodeLayout {
+    body: Rect;
+    header: Rect;
+    pins: PinLayout[];
+}
+export interface LayoutTokens {
+    node: {
+        minWidth: number;
+        headerHeight: number;
+        headerPadding: number;
+        innerPaddingX: number;
+        innerPaddingY: number;
+    };
+    pin: {
+        diameter: number;
+        rowSpacing: number;
+        rowHeight: number;
+    };
+    header: {
+        toPinsGap: number;
+    };
+    widget?: WidgetGeometry;
+}
+/** Partition pins into the UE-Blueprint sections: exec pins occupy a row band at the TOP (exec-in
+ *  left, exec-out right), data pins fill rows below — regardless of declaration order. */
+export declare function sectionPins(pins: ReadonlyArray<Pin>): {
+    execIn: Pin[];
+    execOut: Pin[];
+    dataIn: Pin[];
+    dataOut: Pin[];
+};
+/** Body pin rows: the exec band (only NON-hoisted exec pins) plus the data band. Hoisted exec pins
+ *  ride the header line and don't take a body row. */
+export declare function pinRowCount(pins: ReadonlyArray<Pin>): number;
+/** Effective height of each pin row — HYBRID rhythm:
+ *  - All rows share a UNIFORM base = max(pin.rowHeight, widget.rowHeight if any standard bound
+ *    widget is visible). Keeps the vertical rhythm consistent across the pin band so labels and
+ *    standard controls align row-by-row.
+ *  - A row whose visible bound widget is a CUSTOM widget with its own declared height (curve, XY
+ *    pad, image preview…) grows ONLY that row to fit. Other rows stay at the base — so a single
+ *    tall preview doesn't balloon the whole node into mostly-empty space.
+ *  Drives `naturalHeight`, `computeNodeLayout`, and `computeWidgetRects`. */
+export declare function pinRowHeights(node: Node, pinRowHeight: number, widgetRowHeight: number, isPinConnected?: (pinKey: string) => boolean): number[];
+/** Sum of all pin row heights + the spacings between them. */
+export declare function pinBandHeight(rowHeights: ReadonlyArray<number>, rowSpacing: number): number;
+/** Y of a pin row's centre relative to the node's TOP edge (i.e. local-space y). */
+export declare function pinRowCenterY(rowHeights: ReadonlyArray<number>, rowIdx: number, rowSpacing: number, headerHeight: number, headerToPinsGap: number): number;
+/** Per-node uniform effective row height — backward-compat shim. Equals the max of per-row
+ *  heights. New code should call `pinRowHeights` for accuracy. */
+export declare function effectivePinRowHeight(node: Node, pinRowHeight: number, widgetRowHeight: number, isPinConnected?: (pinKey: string) => boolean): number;
+/** Find the pin on a node whose label (or id) matches `pinKey`. Used to resolve a widget's
+ *  declared binding to a concrete pin. */
+export declare function findPinByKey(node: Node, pinKey: string): Pin | undefined;
+/** Find a pin's row index inside the body band (header-relative). Used to position a pin-bound
+ *  widget inside the row that contains its pin. Returns undefined when the pin is hoisted onto
+ *  the header line (no body row to place the widget in). */
+export declare function pinRowIndexFor(node: Node, pinKey: string): number | undefined;
+/** Measures a single line of text in CSS pixels. The editor binds this to PIXI's
+ *  `CanvasTextMetrics`; unit tests inject a deterministic fake. */
+export type TextMeasurer = (text: string, fontSize: number, fontWeight: number) => number;
+export interface NodeSizeTokens {
+    node: {
+        minWidth: number;
+        headerHeight: number;
+        headerPadding: number;
+    };
+    pin: {
+        diameter: number;
+        rowSpacing: number;
+        rowHeight: number;
+        labelGap: number;
+    };
+    header: {
+        toPinsGap: number;
+        chevronSize: number;
+        titleGap: number;
+    };
+    typography: {
+        titleSize: number;
+        titleWeight: number;
+        labelSize: number;
+        labelWeight: number;
+    };
+    widget?: WidgetGeometry;
+}
+/** Resolved render size for a node lacking an explicit `size`. Single source of truth: the editor
+ *  backfills `node.size` with this so renderer, geom bounds, edge endpoints and the backdrop all
+ *  agree on dimensions. */
+export declare function measureNodeSize(node: Node, title: string, tokens: NodeSizeTokens, measure: TextMeasurer, isPinConnected?: (pinKey: string) => boolean): {
+    x: number;
+    y: number;
+};
+export declare function computeNodeLayout(node: Node, tokens: LayoutTokens, isPinConnected?: (k: string) => boolean): NodeLayout;
+//# sourceMappingURL=layout.d.ts.map

package/dist/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.ts"],"names":[],"mappings":"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"}