@grafloria/element 0.3.20 → 0.3.22

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

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

@@ -1,94 +0,0 @@
-/**
- * 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

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

@@ -1,157 +0,0 @@
-/**
- * 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;