@grafloria/element 0.3.20 → 0.3.22

package/src/libs/engine/src/rendering/LemonadeJSRenderer.js

@@ -1,362 +0,0 @@
-"use strict";
-// LemonadeJS Enhanced Renderer (Phase 3.4 - Complete)
-// Full LemonadeJS integration with two-way binding and reactivity
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LemonadeJSRenderer = void 0;
-const lemonade = require("lemonadejs");
-/**
- * LemonadeJS Enhanced Renderer
- * Phase 3.4 Complete: Full LemonadeJS runtime with two-way binding
- *
- * Features:
- * - Real LemonadeJS template rendering
- * - Two-way data binding (:bind)
- * - Reactive updates (automatic re-rendering on data changes)
- * - Event handlers (:click, :change, etc.)
- * - EventBus integration (all events flow through engine)
- * - Component mode support
- */
-class LemonadeJSRenderer {
-    constructor(eventBus) {
-        this.eventBus = eventBus;
-        /**
-         * Track rendered elements by node UUID for cleanup
-         */
-        this.renderedElements = new Map();
-        /**
-         * Track LemonadeJS self objects by node UUID for cleanup
-         */
-        this.selfObjects = new Map();
-        /**
-         * Track event handlers by node UUID for cleanup
-         */
-        this.eventHandlers = new Map();
-        /**
-         * Track EventBus subscriptions by node UUID for cleanup
-         */
-        this.eventSubscriptions = new Map();
-    }
-    /**
-     * Render HTML configuration to LemonadeJS element
-     * @param config - HTML configuration from template
-     * @param node - Node model with data
-     * @returns Render result with LemonadeJS element
-     */
-    render(config, node) {
-        // Clean up any existing resources for this node before re-rendering
-        this.disposeNode(node.uuid);
-        const mode = this.determineMode(config);
-        const result = {
-            mode,
-            eventHandlers: {},
-            bindings: {},
-            pointerEvents: config.pointerEvents !== false,
-            zIndex: config.zIndex,
-            className: this.buildClassName(config.className),
-            style: config.style,
-            nodeId: node.id,
-            nodeUuid: node.uuid,
-        };
-        if (mode === 'component') {
-            return this.renderComponentMode(config, result);
-        }
-        else {
-            return this.renderTemplateMode(config, node, result);
-        }
-    }
-    /**
-     * Determine rendering mode from config
-     */
-    determineMode(config) {
-        if (config.mode) {
-            return config.mode;
-        }
-        if (config.template) {
-            return 'template';
-        }
-        if (config.component) {
-            return 'component';
-        }
-        throw new Error('HtmlConfig must specify either template or component');
-    }
-    /**
-     * Render component mode (pass-through)
-     */
-    renderComponentMode(config, result) {
-        if (!config.component) {
-            throw new Error('Component mode requires component property');
-        }
-        result.componentRef = config.component;
-        return result;
-    }
-    /**
-     * Render template mode with LemonadeJS
-     */
-    renderTemplateMode(config, node, result) {
-        var _a;
-        if (!config.template) {
-            throw new Error('Template mode requires template property');
-        }
-        // Create LemonadeJS self object with node data
-        result.self = this.createSelfObject(node, config, result);
-        // Create event handlers
-        if (config.events) {
-            result.eventHandlers = this.createEventHandlers(config.events, node);
-        }
-        // Resolve bindings
-        result.bindings = this.resolveBindings(config, node);
-        try {
-            // Create LemonadeJS element with reactive data
-            // Event handlers are attached via self object methods
-            result.element = lemonade.element(config.template, result.self);
-            // Apply additional styles/classes to the element
-            if (result.element) {
-                this.applyStyles(result.element, result);
-            }
-            // Get HTML string for compatibility
-            result.html = (_a = result.element) === null || _a === void 0 ? void 0 : _a.outerHTML;
-        }
-        catch (error) {
-            // Emit error event through EventBus
-            this.eventBus.emit('renderer:error', {
-                nodeId: node.id,
-                nodeUuid: node.uuid,
-                error,
-                message: 'LemonadeJS rendering error',
-                phase: 'template-rendering',
-            });
-            // Fallback to simple rendering
-            result.html = this.fallbackRender(config.template, result.bindings);
-        }
-        // Track created resources for cleanup
-        if (result.element) {
-            this.renderedElements.set(node.uuid, result.element);
-        }
-        if (result.self) {
-            this.selfObjects.set(node.uuid, result.self);
-        }
-        if (Object.keys(result.eventHandlers).length > 0) {
-            this.eventHandlers.set(node.uuid, result.eventHandlers);
-        }
-        return result;
-    }
-    /**
-     * Create LemonadeJS self object with reactive data
-     */
-    createSelfObject(node, config, result) {
-        const self = Object.assign({ 
-            // Node data (reactive)
-            data: node.data || {}, nodeId: node.id, nodeUuid: node.uuid }, (config.bindings ? this.resolveCustomBindings(config.bindings, node) : {}));
-        // Add event handler methods
-        if (config.events) {
-            Object.entries(config.events).forEach(([domEvent, engineEvent]) => {
-                // Create method name from event (e.g., 'click' -> 'onClick')
-                const methodName = `on${domEvent.charAt(0).toUpperCase()}${domEvent.slice(1)}`;
-                self[methodName] = (e) => {
-                    // Emit to EventBus
-                    this.eventBus.emit(engineEvent, {
-                        nodeId: node.id,
-                        nodeUuid: node.uuid,
-                        nodeData: node.data,
-                        event: e,
-                        domEventType: domEvent,
-                    });
-                };
-            });
-        }
-        return self;
-    }
-    /**
-     * Resolve custom bindings from config
-     */
-    resolveCustomBindings(bindings, node) {
-        const resolved = {};
-        for (const [key, path] of Object.entries(bindings)) {
-            resolved[key] = this.getValueByPath(node, path);
-        }
-        return resolved;
-    }
-    /**
-     * Create event handlers that emit to EventBus
-     */
-    createEventHandlers(events, node) {
-        const handlers = {};
-        for (const [domEvent, engineEvent] of Object.entries(events)) {
-            handlers[domEvent] = (event) => {
-                this.eventBus.emit(engineEvent, {
-                    nodeId: node.id,
-                    nodeUuid: node.uuid,
-                    nodeData: node.data,
-                    event,
-                    domEventType: domEvent,
-                });
-            };
-        }
-        return handlers;
-    }
-    /**
-     * Resolve data bindings from node
-     */
-    resolveBindings(config, node) {
-        const bindings = {
-            data: node.data || {},
-            nodeId: node.id,
-            nodeUuid: node.uuid,
-        };
-        if (config.bindings) {
-            for (const [key, path] of Object.entries(config.bindings)) {
-                bindings[key] = this.getValueByPath(node, path);
-            }
-        }
-        return bindings;
-    }
-    /**
-     * Get value from node by path
-     */
-    getValueByPath(node, path) {
-        const parts = path.split('.');
-        let value = node;
-        for (const part of parts) {
-            if (value == null) {
-                return undefined;
-            }
-            value = value[part];
-        }
-        return value;
-    }
-    /**
-     * Apply styles and classes to rendered element
-     */
-    applyStyles(element, result) {
-        // Apply className
-        if (result.className) {
-            element.className = result.className;
-        }
-        // Apply inline styles
-        if (result.style) {
-            Object.entries(result.style).forEach(([key, value]) => {
-                const cssKey = this.camelToKebab(key);
-                element.style.setProperty(cssKey, String(value));
-            });
-        }
-        // Apply z-index
-        if (result.zIndex !== undefined) {
-            element.style.zIndex = String(result.zIndex);
-        }
-        // Apply pointer events
-        if (result.pointerEvents === false) {
-            element.style.pointerEvents = 'none';
-        }
-    }
-    /**
-     * Fallback rendering (simple string replacement)
-     */
-    fallbackRender(template, bindings) {
-        let html = template;
-        // Simple {{variable}} replacement
-        html = html.replace(/\{\{([^}]+)\}\}/g, (match, expression) => {
-            const value = this.evaluateExpression(expression.trim(), bindings);
-            return value != null ? String(value) : '';
-        });
-        return html;
-    }
-    /**
-     * Evaluate expression in binding context
-     */
-    evaluateExpression(expression, bindings) {
-        try {
-            const parts = expression.split('.');
-            let value = bindings;
-            for (const part of parts) {
-                if (value == null) {
-                    return undefined;
-                }
-                value = value[part];
-            }
-            return value;
-        }
-        catch (error) {
-            // Emit warning event through EventBus
-            this.eventBus.emit('renderer:warning', {
-                message: 'Failed to evaluate expression',
-                expression,
-                error,
-                phase: 'expression-evaluation',
-            });
-            return undefined;
-        }
-    }
-    /**
-     * Build className string
-     */
-    buildClassName(className) {
-        if (!className) {
-            return undefined;
-        }
-        if (Array.isArray(className)) {
-            return className.join(' ');
-        }
-        return className;
-    }
-    /**
-     * Convert camelCase to kebab-case
-     */
-    camelToKebab(str) {
-        return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-    }
-    /**
-     * Dispose resources for a specific node
-     * @param nodeUuid - UUID of node to clean up
-     */
-    disposeNode(nodeUuid) {
-        // Remove DOM element if it's still in the document
-        const element = this.renderedElements.get(nodeUuid);
-        if (element && element.parentNode) {
-            element.parentNode.removeChild(element);
-        }
-        this.renderedElements.delete(nodeUuid);
-        // Clean up LemonadeJS self object
-        const self = this.selfObjects.get(nodeUuid);
-        if (self) {
-            // If LemonadeJS provides a destroy method, call it
-            if (typeof self.destroy === 'function') {
-                self.destroy();
-            }
-            // Clear all reactive properties
-            Object.keys(self).forEach((key) => {
-                delete self[key];
-            });
-        }
-        this.selfObjects.delete(nodeUuid);
-        // Remove event handlers
-        const handlers = this.eventHandlers.get(nodeUuid);
-        if (handlers) {
-            // Event handlers will be garbage collected when references are removed
-            Object.keys(handlers).forEach((key) => {
-                delete handlers[key];
-            });
-        }
-        this.eventHandlers.delete(nodeUuid);
-        // Clean up EventBus subscriptions
-        const subscriptions = this.eventSubscriptions.get(nodeUuid);
-        if (subscriptions) {
-            subscriptions.forEach((unsubscribe) => unsubscribe());
-        }
-        this.eventSubscriptions.delete(nodeUuid);
-    }
-    /**
-     * Cleanup all renderer resources
-     */
-    dispose() {
-        // Dispose all tracked nodes
-        const nodeUuids = Array.from(this.renderedElements.keys());
-        nodeUuids.forEach((uuid) => this.disposeNode(uuid));
-        // Clear all tracking maps
-        this.renderedElements.clear();
-        this.selfObjects.clear();
-        this.eventHandlers.clear();
-        this.eventSubscriptions.clear();
-    }
-}
-exports.LemonadeJSRenderer = LemonadeJSRenderer;
-//# sourceMappingURL=LemonadeJSRenderer.js.map

package/src/libs/engine/src/rendering/index.d.ts

@@ -1,2 +0,0 @@
-export * from './HtmlTemplateRenderer';
-export * from './LemonadeJSRenderer';

package/src/libs/engine/src/rendering/index.js

@@ -1,7 +0,0 @@
-"use strict";
-// Rendering module exports (Phase 3.4)
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./HtmlTemplateRenderer"), exports);
-tslib_1.__exportStar(require("./LemonadeJSRenderer"), exports);
-//# sourceMappingURL=index.js.map

package/src/libs/engine/src/routing/LiveReroutingEngine.d.ts

@@ -1,75 +0,0 @@
-import type { RoutingEngine } from './RoutingEngine';
-import type { DiagramModel } from '../models/DiagramModel';
-/**
- * LiveReroutingEngine automatically updates link paths when nodes move or resize.
- *
- * Features:
- * - Throttled rerouting for performance (60fps by default)
- * - Batches multiple node movements
- * - Can be enabled/disabled
- * - Configurable throttle time
- *
- * @example
- * ```typescript
- * const liveRerouting = new LiveReroutingEngine(routingEngine, diagram);
- * liveRerouting.enable();
- *
- * // Links will automatically update when nodes move
- * node.setPosition({ x: 100, y: 100 });
- * ```
- */
-export declare class LiveReroutingEngine {
-    private routingEngine;
-    private diagram;
-    private enabled;
-    private throttleMs;
-    private throttleTimer;
-    private pendingReroutes;
-    constructor(routingEngine: RoutingEngine, diagram: DiagramModel);
-    /**
-     * Handle node movement event
-     */
-    private handleNodeMoved;
-    /**
-     * Handle node resize event
-     */
-    private handleNodeResized;
-    /**
-     * Find all links connected to a node and add them to pending reroutes
-     */
-    private addAffectedLinksToQueue;
-    /**
-     * Schedule a throttled reroute operation
-     */
-    private scheduleReroute;
-    /**
-     * Process all pending reroutes
-     */
-    private processReroutes;
-    /**
-     * Regenerate a link's path from the CURRENT port positions
-     */
-    private regenerateLinkPath;
-    /**
-     * Enable live rerouting
-     */
-    enable(): void;
-    /**
-     * Disable live rerouting
-     */
-    disable(): void;
-    /**
-     * Set throttle time in milliseconds
-     * @param ms Throttle time (e.g., 16 for 60fps, 33 for 30fps)
-     */
-    setThrottle(ms: number): void;
-    /**
-     * Manually trigger reroute of all links in the diagram
-     * Useful for manual refresh or after bulk operations
-     */
-    rerouteAll(): void;
-    /**
-     * Clean up event listeners
-     */
-    destroy(): void;
-}

package/src/libs/engine/src/routing/LiveReroutingEngine.js

@@ -1,173 +0,0 @@
-"use strict";
-// LiveReroutingEngine.ts
-// Automatic link rerouting on node movement (Phase 0.2)
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LiveReroutingEngine = void 0;
-/**
- * LiveReroutingEngine automatically updates link paths when nodes move or resize.
- *
- * Features:
- * - Throttled rerouting for performance (60fps by default)
- * - Batches multiple node movements
- * - Can be enabled/disabled
- * - Configurable throttle time
- *
- * @example
- * ```typescript
- * const liveRerouting = new LiveReroutingEngine(routingEngine, diagram);
- * liveRerouting.enable();
- *
- * // Links will automatically update when nodes move
- * node.setPosition({ x: 100, y: 100 });
- * ```
- */
-class LiveReroutingEngine {
-    constructor(routingEngine, diagram) {
-        this.enabled = true;
-        this.throttleMs = 16; // 60fps
-        this.throttleTimer = null;
-        this.pendingReroutes = new Set();
-        this.routingEngine = routingEngine;
-        this.diagram = diagram;
-        // Listen to node movement and resize events
-        this.diagram.on('node:moved', this.handleNodeMoved.bind(this));
-        this.diagram.on('node:resized', this.handleNodeResized.bind(this));
-    }
-    /**
-     * Handle node movement event
-     */
-    handleNodeMoved(event) {
-        if (!this.enabled)
-            return;
-        this.addAffectedLinksToQueue(event.nodeId);
-        this.scheduleReroute();
-    }
-    /**
-     * Handle node resize event
-     */
-    handleNodeResized(event) {
-        if (!this.enabled)
-            return;
-        this.addAffectedLinksToQueue(event.nodeId);
-        this.scheduleReroute();
-    }
-    /**
-     * Find all links connected to a node and add them to pending reroutes
-     */
-    addAffectedLinksToQueue(nodeId) {
-        const node = this.diagram.getNode(nodeId);
-        if (!node)
-            return;
-        // Get all ports on this node
-        const ports = node.getPorts();
-        // For each port, find all connected links
-        ports.forEach(port => {
-            const links = this.diagram.getLinksForPort(port.id);
-            links.forEach(link => {
-                this.pendingReroutes.add(link.id);
-            });
-        });
-    }
-    /**
-     * Schedule a throttled reroute operation
-     */
-    scheduleReroute() {
-        // If already scheduled, don't schedule again
-        if (this.throttleTimer !== null)
-            return;
-        this.throttleTimer = window.setTimeout(() => {
-            this.processReroutes();
-            this.throttleTimer = null;
-        }, this.throttleMs);
-    }
-    /**
-     * Process all pending reroutes
-     */
-    processReroutes() {
-        var _a;
-        if (this.pendingReroutes.size === 0)
-            return;
-        const reroutedCount = this.pendingReroutes.size;
-        // Reroute each link
-        this.pendingReroutes.forEach(linkId => {
-            const link = this.diagram.getLink(linkId);
-            if (!link)
-                return;
-            this.regenerateLinkPath(link);
-            // Mark as dirty to trigger re-render
-            link.markDirty();
-        });
-        // Clear pending reroutes
-        this.pendingReroutes.clear();
-        // Notify renderers (DiagramModel routes external events through its
-        // protected emitter; engine-internal collaborators use it directly)
-        (_a = this.diagram.emitter) === null || _a === void 0 ? void 0 : _a.emit('links:rerouted', { count: reroutedCount });
-    }
-    /**
-     * Regenerate a link's path from the CURRENT port positions
-     */
-    regenerateLinkPath(link) {
-        var _a, _b;
-        const sourceNode = this.diagram.getNodeByPortId(link.sourcePortId);
-        const targetNode = this.diagram.getNodeByPortId(link.targetPortId);
-        if (!sourceNode || !targetNode)
-            return;
-        const sourcePort = sourceNode.getPort(link.sourcePortId);
-        const targetPort = targetNode.getPort(link.targetPortId);
-        if (!sourcePort || !targetPort)
-            return;
-        const sourcePoint = sourcePort.getAbsolutePosition(sourceNode.getBoundingBox());
-        const targetPoint = targetPort.getAbsolutePosition(targetNode.getBoundingBox());
-        link.generatePath(sourcePoint, targetPoint, (_a = sourcePort.alignment) === null || _a === void 0 ? void 0 : _a.side, (_b = targetPort.alignment) === null || _b === void 0 ? void 0 : _b.side);
-    }
-    /**
-     * Enable live rerouting
-     */
-    enable() {
-        this.enabled = true;
-    }
-    /**
-     * Disable live rerouting
-     */
-    disable() {
-        this.enabled = false;
-        // Clear any pending reroutes
-        if (this.throttleTimer !== null) {
-            window.clearTimeout(this.throttleTimer);
-            this.throttleTimer = null;
-        }
-        this.pendingReroutes.clear();
-    }
-    /**
-     * Set throttle time in milliseconds
-     * @param ms Throttle time (e.g., 16 for 60fps, 33 for 30fps)
-     */
-    setThrottle(ms) {
-        this.throttleMs = Math.max(0, ms);
-    }
-    /**
-     * Manually trigger reroute of all links in the diagram
-     * Useful for manual refresh or after bulk operations
-     */
-    rerouteAll() {
-        var _a;
-        const links = this.diagram.getLinks();
-        links.forEach(link => {
-            this.regenerateLinkPath(link);
-            link.markDirty();
-        });
-        (_a = this.diagram.emitter) === null || _a === void 0 ? void 0 : _a.emit('links:rerouted', { count: links.length });
-    }
-    /**
-     * Clean up event listeners
-     */
-    destroy() {
-        this.disable();
-        // TODO: Remove event listeners - DiagramModel doesn't expose off() publicly
-        // Need to store the unsubscribe functions from on() calls instead
-        // this.diagram.off('node:moved', this.handleNodeMoved.bind(this));
-        // this.diagram.off('node:resized', this.handleNodeResized.bind(this));
-    }
-}
-exports.LiveReroutingEngine = LiveReroutingEngine;
-//# sourceMappingURL=LiveReroutingEngine.js.map

package/src/libs/engine/src/routing/ObstacleIndex.d.ts

@@ -1,42 +0,0 @@
-import type { Obstacle } from './types';
-export declare class ObstacleIndex {
-    private readonly cells;
-    private readonly oversized;
-    private readonly cellSize;
-    private readonly count;
-    constructor(obstacles: readonly Obstacle[], cellSize?: number);
-    /** How many obstacles were indexed. */
-    get size(): number;
-    private insert;
-    /** Exact, collision-free packing of two cell coords into one number (|coord| < 2^20). */
-    private static key;
-    /**
-     * Does the point, expanded by `margin`, touch any obstacle?
-     *
-     * Byte-for-byte the predicate `OrthogonalRouter.collidesWithObstacles` used to
-     * evaluate against the whole array — inclusive bounds and all.
-     */
-    collides(px: number, py: number, margin: number): boolean;
-    private static hit;
-    /**
-     * Every obstacle whose rect could overlap the axis-aligned box — the candidate
-     * set for a segment test. Conservative (a superset); the caller runs the exact
-     * geometry test on what comes back.
-     */
-    queryBox(minX: number, minY: number, maxX: number, maxY: number): Obstacle[];
-    /** Every indexed obstacle (deduplicated). Escape hatch for degenerate queries. */
-    all(): Obstacle[];
-}
-/**
- * Merge two obstacle sources into one array, collapsing entries that are the
- * SAME obstacle described twice.
- *
- * This exists because `RoutingEngine.route()` unions its global ObstacleMap with
- * the request's obstacles, and the renderer's request repeats what the engine
- * already registered — so a 5,000-node diagram was handing the router a
- * 9,998-entry obstacle array, and every one of those entries was scanned on
- * every collision test. Deduplication is keyed on id AND geometry, so two
- * entries that genuinely disagree about where an obstacle is are both kept:
- * the effective blocked region is unchanged.
- */
-export declare function mergeObstacles(a: readonly Obstacle[], b: readonly Obstacle[]): Obstacle[];