@grafloria/element 0.3.17 → 0.3.19

package/src/libs/renderer/src/viewport/viewport-controller.js

@@ -0,0 +1,315 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewportController = void 0;
+const DEFAULT_VIEWPORT = { x: 0, y: 0, width: 800, height: 600 };
+/**
+ * ViewportController — the framework-agnostic camera.
+ *
+ * This is the piece every framework wrapper otherwise re-implements (and gets
+ * subtly wrong): screen↔world conversion, zoom clamping, pan accumulation, and
+ * the `viewBox` convention that the SVG renderer and the hit-tester MUST agree
+ * on. Owning it here means a React/Vue/web-component host inherits pixel-exact
+ * hit-testing for free.
+ *
+ * Like {@link InteractionController} it answers **"what is the camera now?"** and
+ * never **"who should re-render?"** — hosts subscribe via {@link onChange} and
+ * translate that into their own render trigger (`markForCheck`, `setState`, …).
+ * It has zero framework imports, zero engine imports, and no DOM dependency:
+ * callers hand it a plain {@link CanvasRect}, not an element.
+ *
+ * ## The coordinate contract
+ *
+ * `viewport.x/y` are WORLD coordinates. `viewport.width/height` are the canvas's
+ * **CSS-pixel** size — NOT a world-space span. The world span actually shown is
+ * derived by dividing by `zoom`, which is exactly what {@link getViewBox} does:
+ *
+ * ```text
+ *   center      = (viewport.x + w/2, viewport.y + h/2)      // zoom is centre-preserving
+ *   viewBox.w/h = (w / zoom, h / zoom)                      // higher zoom ⇒ less world visible
+ *   viewBox.x/y = center − viewBox.w/h / 2
+ * ```
+ *
+ * This is the identical formula `SVGRenderer.render()` applies to the viewport
+ * it is handed (`libs/renderer/src/svg/svg-renderer.ts`, "Apply zoom to viewBox"),
+ * and the one {@link clientToWorld} inverts. Because both sides derive from the
+ * same {@link getViewBox}, screen→world round-trips exactly at any zoom — see
+ * the round-trip tests in `viewport-controller.spec.ts`.
+ *
+ * ⚠️ Feed {@link getRenderViewport} — not a pre-scaled rectangle — to
+ * `IRenderer.render(viewport, zoom)`. Dividing width/height by `zoom` *before*
+ * calling `render()` makes the renderer divide by `zoom` a second time, applying
+ * zoom quadratically and desynchronising the picture from the hit-tester at any
+ * zoom ≠ 1. (`DiagramCanvasComponent.calculateActualViewport()` currently does
+ * exactly that; the fix belongs to the zoom card and is why this convention now
+ * lives in one place.)
+ */
+class ViewportController {
+    constructor(options = {}) {
+        var _a, _b, _c, _d, _e;
+        this.listeners = new Set();
+        this.viewport = Object.assign({}, ((_a = options.viewport) !== null && _a !== void 0 ? _a : DEFAULT_VIEWPORT));
+        this.minZoom = (_b = options.minZoom) !== null && _b !== void 0 ? _b : 0.1;
+        this.maxZoom = (_c = options.maxZoom) !== null && _c !== void 0 ? _c : 3.0;
+        this.zoomSensitivity = (_d = options.zoomSensitivity) !== null && _d !== void 0 ? _d : 0.1;
+        this.zoom = this.clampZoom((_e = options.zoom) !== null && _e !== void 0 ? _e : 1.0);
+    }
+    // ==========================================================================
+    // State
+    // ==========================================================================
+    getViewport() {
+        return Object.assign({}, this.viewport);
+    }
+    getZoom() {
+        return this.zoom;
+    }
+    getState() {
+        return { viewport: this.getViewport(), zoom: this.zoom };
+    }
+    /** Replace the camera rectangle wholesale. */
+    setViewport(viewport) {
+        this.viewport = Object.assign({}, viewport);
+        this.emit();
+    }
+    /**
+     * Track the canvas element's pixel size. Call on mount and on resize: the
+     * width/height of the camera rect must stay equal to the canvas's CSS-pixel
+     * size for {@link clientToWorld} to be the true inverse of the rendered
+     * `viewBox` (see the coordinate contract).
+     */
+    setCanvasSize(width, height) {
+        if (width === this.viewport.width && height === this.viewport.height)
+            return;
+        this.viewport = Object.assign(Object.assign({}, this.viewport), { width, height });
+        this.emit();
+    }
+    /** Convenience form of {@link setCanvasSize} taking a `getBoundingClientRect()`. */
+    syncCanvasSize(rect) {
+        this.setCanvasSize(rect.width, rect.height);
+    }
+    // ==========================================================================
+    // Zoom
+    // ==========================================================================
+    /** Clamp to `[minZoom, maxZoom]`. Non-finite input falls back to the current zoom. */
+    clampZoom(zoom) {
+        var _a;
+        if (!isFinite(zoom))
+            return (_a = this.zoom) !== null && _a !== void 0 ? _a : 1;
+        return Math.max(this.minZoom, Math.min(this.maxZoom, zoom));
+    }
+    /** Set zoom (centre-preserving), clamped. Returns the zoom actually applied. */
+    setZoom(zoom) {
+        const next = this.clampZoom(zoom);
+        if (next === this.zoom)
+            return next;
+        this.zoom = next;
+        this.emit();
+        return next;
+    }
+    /**
+     * Additive zoom step, clamped — the convention the Angular canvas's wheel
+     * handler uses (`zoom + delta`, not `zoom * factor`). Returns the applied zoom.
+     */
+    zoomBy(delta) {
+        return this.setZoom(this.zoom + delta);
+    }
+    /**
+     * Apply one wheel notch. Mirrors `DiagramCanvasComponent.onWheel`: scrolling
+     * DOWN (`deltaY > 0`) zooms OUT by `zoomSensitivity`, scrolling up zooms in.
+     */
+    zoomByWheel(deltaY) {
+        return this.zoomBy(deltaY > 0 ? -this.zoomSensitivity : this.zoomSensitivity);
+    }
+    /**
+     * Cursor-anchored zoom: change zoom while keeping the world point currently
+     * under `(clientX, clientY)` pinned to that same screen pixel. This is the
+     * standard "zoom towards the pointer" behaviour; the plain {@link setZoom} /
+     * {@link zoomByWheel} pair is centre-anchored instead.
+     *
+     * Returns the zoom actually applied (clamped).
+     */
+    zoomAtPoint(zoom, clientX, clientY, rect) {
+        const next = this.clampZoom(zoom);
+        const anchor = this.clientToWorld(clientX, clientY, rect);
+        const localX = clientX - rect.left;
+        const localY = clientY - rect.top;
+        const { width, height } = this.viewport;
+        // worldX = centerX + (localX - width/2) / zoom  ⇒  solve for the centre that
+        // holds `anchor` fixed at the new zoom, then convert centre back to origin.
+        const centerX = anchor.x - (localX - width / 2) / next;
+        const centerY = anchor.y - (localY - height / 2) / next;
+        this.viewport = {
+            x: centerX - width / 2,
+            y: centerY - height / 2,
+            width,
+            height,
+        };
+        this.zoom = next;
+        this.emit();
+        return next;
+    }
+    // ==========================================================================
+    // Pan
+    // ==========================================================================
+    /** Translate the camera by a WORLD-space delta. */
+    pan(dx, dy) {
+        if (!isFinite(dx) || !isFinite(dy))
+            return;
+        this.viewport = Object.assign(Object.assign({}, this.viewport), { x: this.viewport.x + dx, y: this.viewport.y + dy });
+        this.emit();
+    }
+    /**
+     * Translate the camera by a SCREEN-space (pixel) drag delta, converting to
+     * world units by dividing by zoom.
+     *
+     * Sign convention matches the canvas's middle-drag handler: pass
+     * `(lastClientX - clientX, lastClientY - clientY)`, i.e. dragging the pointer
+     * RIGHT moves the camera LEFT, so the content appears to follow the cursor.
+     */
+    panByScreenDelta(dxPx, dyPx) {
+        this.pan(dxPx / this.zoom, dyPx / this.zoom);
+    }
+    // ==========================================================================
+    // The viewBox convention
+    // ==========================================================================
+    /**
+     * The world-space rectangle actually visible — centre-preserving zoom applied
+     * to the camera rect. Identical to the `viewBox` `SVGRenderer` emits, and the
+     * basis of {@link clientToWorld}.
+     */
+    getViewBox() {
+        const { x, y, width, height } = this.viewport;
+        const centerX = x + width / 2;
+        const centerY = y + height / 2;
+        const viewBoxWidth = width / this.zoom;
+        const viewBoxHeight = height / this.zoom;
+        return {
+            x: centerX - viewBoxWidth / 2,
+            y: centerY - viewBoxHeight / 2,
+            width: viewBoxWidth,
+            height: viewBoxHeight,
+        };
+    }
+    /** The `viewBox` attribute string: `"x y width height"`. */
+    getViewBoxString() {
+        const b = this.getViewBox();
+        return `${b.x} ${b.y} ${b.width} ${b.height}`;
+    }
+    /**
+     * The rectangle to hand to `IRenderer.render(viewport, zoom)` alongside
+     * {@link getZoom}. The renderer applies the zoom itself, so this is the raw
+     * camera rect — do NOT pre-divide it by zoom (see the class docs).
+     */
+    getRenderViewport() {
+        return this.getViewport();
+    }
+    /**
+     * CSS transform that keeps an HTML overlay layer registered with the SVG
+     * layer in the hybrid renderer: `translate(...) scale(zoom)`.
+     *
+     * MUST be driven off the same {@link getViewBox} the SVG viewBox and
+     * {@link worldToClient} use — NOT the raw `viewport.x/y`. Since the camera
+     * rect's width/height became CANVAS PIXELS (see setCanvasSize), the visible
+     * world box is the pixel rect expanded around its centre by 1/zoom; the SVG
+     * renderer applies exactly that expansion (svg-renderer.ts `viewBoxX =
+     * centerX - width/zoom/2`). Using the raw `viewport.x` here omitted the
+     * `width*(1-zoom)/2` centring term, so the HTML custom-node layer drifted
+     * from the SVG at any zoom != 1 — invisible until a custom-node dashboard was
+     * framed with fitToBounds. Routing through getViewBox() makes a host at world
+     * W land at the identical pixel worldToClient(W) reports. Identical at zoom 1.
+     */
+    getHtmlLayerTransform() {
+        const box = this.getViewBox();
+        const translateX = -box.x * this.zoom;
+        const translateY = -box.y * this.zoom;
+        return `translate(${translateX}px, ${translateY}px) scale(${this.zoom})`;
+    }
+    // ==========================================================================
+    // Screen ↔ world
+    // ==========================================================================
+    /**
+     * Convert a client/screen point (e.g. `event.clientX/Y`) into world space.
+     * Exact inverse of {@link worldToClient} at any zoom.
+     */
+    clientToWorld(clientX, clientY, rect) {
+        const localX = clientX - rect.left;
+        const localY = clientY - rect.top;
+        const box = this.getViewBox();
+        return {
+            x: box.x + localX / this.zoom,
+            y: box.y + localY / this.zoom,
+        };
+    }
+    /**
+     * Convert a world point into client/screen coordinates — for positioning
+     * overlays, toolbars and tooltips over the canvas. Exact inverse of
+     * {@link clientToWorld}.
+     */
+    worldToClient(worldX, worldY, rect) {
+        const box = this.getViewBox();
+        return {
+            x: (worldX - box.x) * this.zoom + rect.left,
+            y: (worldY - box.y) * this.zoom + rect.top,
+        };
+    }
+    // ==========================================================================
+    // Fit
+    // ==========================================================================
+    /**
+     * Frame `bounds` (a world-space content rectangle): pick the largest clamped
+     * zoom at which it fits inside the canvas with `padding` CSS pixels of margin
+     * on every side, and centre it. A zero-area canvas or bounds is a no-op.
+     *
+     * Returns the zoom actually applied.
+     */
+    fitToBounds(bounds, padding = 40, options) {
+        const { width, height } = this.viewport;
+        if (width <= 0 || height <= 0)
+            return this.zoom;
+        if (bounds.width <= 0 || bounds.height <= 0)
+            return this.zoom;
+        const usableWidth = Math.max(1, width - padding * 2);
+        const usableHeight = Math.max(1, height - padding * 2);
+        // `options.maxZoom` caps how far a fit may zoom IN (it never limits zooming
+        // out). Fitting a small graph without a cap magnifies it wall-to-wall —
+        // eight nodes at 288% look broken, and every routed edge fattens with them.
+        const raw = Math.min(usableWidth / bounds.width, usableHeight / bounds.height);
+        const capped = (options === null || options === void 0 ? void 0 : options.maxZoom) !== undefined ? Math.min(raw, options.maxZoom) : raw;
+        const next = this.clampZoom(capped);
+        // Centre the content: choose the camera origin whose viewBox centre lands on
+        // the bounds centre. The camera centre IS the viewBox centre (zoom is
+        // centre-preserving), so this reduces to a straight offset.
+        const centerX = bounds.x + bounds.width / 2;
+        const centerY = bounds.y + bounds.height / 2;
+        this.zoom = next;
+        this.viewport = {
+            x: centerX - width / 2,
+            y: centerY - height / 2,
+            width,
+            height,
+        };
+        this.emit();
+        return next;
+    }
+    // ==========================================================================
+    // Change notification (the "what changed" seam — hosts turn this into a render)
+    // ==========================================================================
+    /** Subscribe to camera changes. Returns an unsubscribe function. */
+    onChange(listener) {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+    /** Drop all subscribers. */
+    dispose() {
+        this.listeners.clear();
+    }
+    emit() {
+        if (this.listeners.size === 0)
+            return;
+        const state = this.getState();
+        this.listeners.forEach((listener) => listener(state));
+    }
+}
+exports.ViewportController = ViewportController;
+//# sourceMappingURL=viewport-controller.js.map

package/src/libs/renderer/src/viewport/viewport-controller.js.map

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

package/src/libs/renderer/src/vnode/container-id-generator.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Container ID Generator for foreignObject elements
+ *
+ * Generates unique container IDs that Angular components can target
+ * for rendering rich HTML content inside SVG foreignObject elements.
+ *
+ * @remarks
+ * - IDs follow the format: `fo-{nodeId}-{counter}`
+ * - Counter is globally incremented for uniqueness
+ * - O(1) time complexity for all operations
+ *
+ * @example
+ * ```typescript
+ * const id1 = ContainerIdGenerator.generate('node-1'); // 'fo-node-1-1'
+ * const id2 = ContainerIdGenerator.generate('node-1'); // 'fo-node-1-2'
+ *
+ * ContainerIdGenerator.isContainerId('fo-node-1-1'); // true
+ * ContainerIdGenerator.getNodeId('fo-node-1-1'); // 'node-1'
+ * ```
+ *
+ * @packageDocumentation
+ */
+/**
+ * Generate unique container IDs for foreignObject elements
+ *
+ * This class provides static methods to generate and validate container IDs
+ * used to link SVG foreignObject elements with their Angular component content.
+ */
+export declare class ContainerIdGenerator {
+    /**
+     * Global counter for generating unique IDs
+     * @internal
+     */
+    private static counter;
+    /**
+     * Generate a unique container ID for a foreignObject element
+     *
+     * @param nodeId - The node ID to include in the container ID
+     * @returns A unique container ID in the format `fo-{nodeId}-{counter}`
+     *
+     * @example
+     * ```typescript
+     * const id = ContainerIdGenerator.generate('node-123');
+     * // Returns: 'fo-node-123-1'
+     * ```
+     */
+    static generate(nodeId: string): string;
+    /**
+     * Check if a given ID is a valid container ID
+     *
+     * Container IDs must start with 'fo-' prefix.
+     * This is a lightweight check that only validates the prefix.
+     *
+     * @param id - The ID to check
+     * @returns True if the ID is a container ID, false otherwise
+     *
+     * @example
+     * ```typescript
+     * ContainerIdGenerator.isContainerId('fo-node-1-1'); // true
+     * ContainerIdGenerator.isContainerId('node-1'); // false
+     * ```
+     */
+    static isContainerId(id: string): boolean;
+    /**
+     * Extract the node ID from a container ID
+     *
+     * Parses a container ID and returns the original node ID.
+     * Container IDs must follow the format: `fo-{nodeId}-{counter}`
+     *
+     * @param containerId - The container ID to parse
+     * @returns The node ID if valid, null otherwise
+     *
+     * @example
+     * ```typescript
+     * ContainerIdGenerator.getNodeId('fo-node-123-5'); // 'node-123'
+     * ContainerIdGenerator.getNodeId('invalid'); // null
+     * ```
+     */
+    static getNodeId(containerId: string): string | null;
+    /**
+     * Reset the internal counter to zero
+     *
+     * This method is primarily for testing purposes to ensure
+     * predictable ID generation in test suites.
+     *
+     * @example
+     * ```typescript
+     * ContainerIdGenerator.reset();
+     * const id = ContainerIdGenerator.generate('node-1');
+     * // Returns: 'fo-node-1-1' (counter starts at 1)
+     * ```
+     */
+    static reset(): void;
+}

package/src/libs/renderer/src/vnode/container-id-generator.js

@@ -0,0 +1,110 @@
+"use strict";
+/**
+ * Container ID Generator for foreignObject elements
+ *
+ * Generates unique container IDs that Angular components can target
+ * for rendering rich HTML content inside SVG foreignObject elements.
+ *
+ * @remarks
+ * - IDs follow the format: `fo-{nodeId}-{counter}`
+ * - Counter is globally incremented for uniqueness
+ * - O(1) time complexity for all operations
+ *
+ * @example
+ * ```typescript
+ * const id1 = ContainerIdGenerator.generate('node-1'); // 'fo-node-1-1'
+ * const id2 = ContainerIdGenerator.generate('node-1'); // 'fo-node-1-2'
+ *
+ * ContainerIdGenerator.isContainerId('fo-node-1-1'); // true
+ * ContainerIdGenerator.getNodeId('fo-node-1-1'); // 'node-1'
+ * ```
+ *
+ * @packageDocumentation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContainerIdGenerator = void 0;
+/**
+ * Generate unique container IDs for foreignObject elements
+ *
+ * This class provides static methods to generate and validate container IDs
+ * used to link SVG foreignObject elements with their Angular component content.
+ */
+class ContainerIdGenerator {
+    /**
+     * Generate a unique container ID for a foreignObject element
+     *
+     * @param nodeId - The node ID to include in the container ID
+     * @returns A unique container ID in the format `fo-{nodeId}-{counter}`
+     *
+     * @example
+     * ```typescript
+     * const id = ContainerIdGenerator.generate('node-123');
+     * // Returns: 'fo-node-123-1'
+     * ```
+     */
+    static generate(nodeId) {
+        return `fo-${nodeId}-${++this.counter}`;
+    }
+    /**
+     * Check if a given ID is a valid container ID
+     *
+     * Container IDs must start with 'fo-' prefix.
+     * This is a lightweight check that only validates the prefix.
+     *
+     * @param id - The ID to check
+     * @returns True if the ID is a container ID, false otherwise
+     *
+     * @example
+     * ```typescript
+     * ContainerIdGenerator.isContainerId('fo-node-1-1'); // true
+     * ContainerIdGenerator.isContainerId('node-1'); // false
+     * ```
+     */
+    static isContainerId(id) {
+        // Must match the full documented format `fo-{nodeId}-{counter}` — a bare
+        // 'fo-' prefix accepted arbitrary ids like 'fo-invalid'
+        return /^fo-.+-\d+$/.test(id);
+    }
+    /**
+     * Extract the node ID from a container ID
+     *
+     * Parses a container ID and returns the original node ID.
+     * Container IDs must follow the format: `fo-{nodeId}-{counter}`
+     *
+     * @param containerId - The container ID to parse
+     * @returns The node ID if valid, null otherwise
+     *
+     * @example
+     * ```typescript
+     * ContainerIdGenerator.getNodeId('fo-node-123-5'); // 'node-123'
+     * ContainerIdGenerator.getNodeId('invalid'); // null
+     * ```
+     */
+    static getNodeId(containerId) {
+        const match = containerId.match(/^fo-(.+)-\d+$/);
+        return match ? match[1] : null;
+    }
+    /**
+     * Reset the internal counter to zero
+     *
+     * This method is primarily for testing purposes to ensure
+     * predictable ID generation in test suites.
+     *
+     * @example
+     * ```typescript
+     * ContainerIdGenerator.reset();
+     * const id = ContainerIdGenerator.generate('node-1');
+     * // Returns: 'fo-node-1-1' (counter starts at 1)
+     * ```
+     */
+    static reset() {
+        this.counter = 0;
+    }
+}
+exports.ContainerIdGenerator = ContainerIdGenerator;
+/**
+ * Global counter for generating unique IDs
+ * @internal
+ */
+ContainerIdGenerator.counter = 0;
+//# sourceMappingURL=container-id-generator.js.map

package/src/libs/renderer/src/vnode/container-id-generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container-id-generator.js","sourceRoot":"","sources":["../../../../../../renderer/src/vnode/container-id-generator.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;;AAEH;;;;;GAKG;AACH,MAAa,oBAAoB;IAO/B;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,QAAQ,CAAC,MAAc;QAC5B,OAAO,MAAM,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;IAC1C,CAAC;IAED;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,aAAa,CAAC,EAAU;QAC7B,yEAAyE;QACzE,wDAAwD;QACxD,OAAO,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChC,CAAC;IAED;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,SAAS,CAAC,WAAmB;QAClC,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QACjD,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACjC,CAAC;IAED;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,KAAK;QACV,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACnB,CAAC;;AA/EH,oDAgFC;AA/EC;;;GAGG;AACY,4BAAO,GAAG,CAAC,CAAC"}