@grafloria/element 0.3.18 → 0.3.20

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/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/foreign-object.d.ts

@@ -0,0 +1,157 @@
+/**
+ * foreignObject VNode Helpers
+ *
+ * Provides utility functions for creating and working with SVG foreignObject elements.
+ * foreignObject allows embedding HTML content inside SVG, enabling rich components
+ * like tables, charts, and forms within diagram nodes.
+ *
+ * @remarks
+ * - foreignObject VNodes have type='foreignObject'
+ * - Each foreignObject must have a unique containerId for Angular to target
+ * - Default children include an XHTML div wrapper for proper rendering
+ *
+ * @example
+ * ```typescript
+ * // Create a foreignObject VNode
+ * const vnode = createForeignObject({
+ *   nodeId: 'node-1',
+ *   x: 10,
+ *   y: 20,
+ *   width: 200,
+ *   height: 150
+ * });
+ *
+ * // Check if a VNode is a foreignObject
+ * if (isForeignObject(vnode)) {
+ *   const containerId = getContainerId(vnode);
+ *   // Render Angular component to containerId...
+ * }
+ * ```
+ *
+ * @packageDocumentation
+ */
+import type { VNode } from '../types/vnode.types';
+/**
+ * Options for creating a foreignObject VNode
+ */
+export interface ForeignObjectOptions {
+    /**
+     * Node ID - used to generate container ID
+     */
+    nodeId: string;
+    /**
+     * X coordinate (top-left corner)
+     */
+    x: number;
+    /**
+     * Y coordinate (top-left corner)
+     */
+    y: number;
+    /**
+     * Width in pixels
+     */
+    width: number;
+    /**
+     * Height in pixels
+     */
+    height: number;
+    /**
+     * Optional custom container ID
+     * If not provided, will be auto-generated using ContainerIdGenerator
+     */
+    containerId?: string;
+    /**
+     * Optional children VNodes
+     * If not provided, creates a default XHTML div wrapper
+     */
+    children?: VNode[];
+    /**
+     * Optional key for React/Angular diffing optimization
+     */
+    key?: string;
+}
+/**
+ * Create a foreignObject VNode
+ *
+ * Creates a VNode representing an SVG foreignObject element, which allows
+ * embedding HTML content inside SVG. Automatically generates a container ID
+ * if not provided, and includes a default XHTML div wrapper.
+ *
+ * @param options - Configuration options for the foreignObject
+ * @returns A VNode of type 'foreignObject'
+ *
+ * @example
+ * ```typescript
+ * const vnode = createForeignObject({
+ *   nodeId: 'node-1',
+ *   x: 10,
+ *   y: 20,
+ *   width: 200,
+ *   height: 150
+ * });
+ * // Returns: { type: 'foreignObject', props: { x: 10, y: 20, ... }, children: [...] }
+ * ```
+ *
+ * @example With custom container ID and children
+ * ```typescript
+ * const vnode = createForeignObject({
+ *   nodeId: 'node-1',
+ *   x: 10,
+ *   y: 20,
+ *   width: 200,
+ *   height: 150,
+ *   containerId: 'my-custom-id',
+ *   children: [
+ *     { type: 'div', props: { className: 'custom-content' } }
+ *   ]
+ * });
+ * ```
+ */
+export declare function createForeignObject(options: ForeignObjectOptions): VNode;
+/**
+ * Check if a VNode is a foreignObject element
+ *
+ * Type guard function that checks if the given VNode represents
+ * a foreignObject element.
+ *
+ * @param vnode - The VNode to check
+ * @returns True if the VNode is a foreignObject, false otherwise
+ *
+ * @example
+ * ```typescript
+ * const foNode = createForeignObject({ ... });
+ * const rectNode = { type: 'rect', props: { ... } };
+ *
+ * isForeignObject(foNode);   // true
+ * isForeignObject(rectNode); // false
+ * ```
+ */
+export declare function isForeignObject(vnode: VNode): boolean;
+/**
+ * Get the container ID from a foreignObject VNode
+ *
+ * Extracts the container ID from a foreignObject VNode's props.
+ * Returns undefined if the VNode is not a foreignObject or doesn't have a container ID.
+ *
+ * @param vnode - The VNode to extract the container ID from
+ * @returns The container ID if the VNode is a foreignObject, undefined otherwise
+ *
+ * @example
+ * ```typescript
+ * const vnode = createForeignObject({
+ *   nodeId: 'node-1',
+ *   x: 0, y: 0, width: 100, height: 100
+ * });
+ *
+ * const containerId = getContainerId(vnode);
+ * // Returns: 'fo-node-1-1'
+ * ```
+ *
+ * @example Non-foreignObject returns undefined
+ * ```typescript
+ * const rectNode = { type: 'rect', props: { ... } };
+ * const containerId = getContainerId(rectNode);
+ * // Returns: undefined
+ * ```
+ */
+export declare function getContainerId(vnode: VNode): string | undefined;