@memberjunction/ng-entity-relationship-diagram 0.0.1 → 2.130.0

package/dist/lib/components/erd-diagram.component.js

@@ -0,0 +1,1936 @@
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import * as d3 from 'd3';
+import * as dagre from '@dagrejs/dagre';
+import * as i0 from "@angular/core";
+const _c0 = ["erdContainer"];
+function ERDDiagramComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2)(1, "h3");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 5)(4, "button", 6);
+    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_1_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.zoomIn()); });
+    i0.ɵɵelement(5, "span", 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 8);
+    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_1_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.zoomOut()); });
+    i0.ɵɵelement(7, "span", 9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 10);
+    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_1_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.resetZoom()); });
+    i0.ɵɵelement(9, "span", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 12);
+    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_1_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.refresh(); return i0.ɵɵresetView(ctx_r1.refreshRequested.emit()); });
+    i0.ɵɵelement(11, "span", 13);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.headerTitle);
+} }
+function ERDDiagramComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4)(1, "div", 14)(2, "div", 15);
+    i0.ɵɵelement(3, "div", 16)(4, "div", 16)(5, "div", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 17);
+    i0.ɵɵtext(7, "Loading diagram...");
+    i0.ɵɵelementEnd()()();
+} }
+/**
+ * Default configuration values for the ERD diagram.
+ * These values provide a good starting point for most use cases.
+ */
+/** Default dagre configuration */
+const DEFAULT_DAGRE_CONFIG = {
+    rankDir: 'LR',
+    nodeSep: 80, // Increased from 50 - more vertical space between nodes in same rank
+    rankSep: 150, // Increased from 100 - more horizontal space between ranks for labels
+    edgeSep: 20, // Increased from 10 - more space between edge paths
+    ranker: 'network-simplex',
+    align: undefined
+};
+const DEFAULT_CONFIG = {
+    nodeWidth: 180,
+    nodeBaseHeight: 60,
+    fieldHeight: 20,
+    maxNodeHeight: 300,
+    chargeStrength: -800,
+    linkDistance: 80,
+    collisionPadding: 20,
+    showFieldDetails: true,
+    showRelationshipLabels: true,
+    showHeader: true,
+    showNodeCount: true,
+    showMinimap: false,
+    showLegend: false,
+    enableDragging: true,
+    enableZoom: true,
+    enablePan: true,
+    minZoom: 0.1,
+    maxZoom: 4,
+    initialZoom: 1,
+    enableMultiSelect: false,
+    animationDuration: 750,
+    fitOnLoad: true,
+    skipAnimation: false,
+    emptyStateMessage: 'No entities to display',
+    emptyStateIcon: 'fa-solid fa-diagram-project',
+    layoutAlgorithm: 'dagre',
+    dagreConfig: DEFAULT_DAGRE_CONFIG,
+    colors: {
+        nodeBackground: '#f8f9fa',
+        nodeBorder: '#333',
+        nodeHeader: '#007bff',
+        nodeHeaderText: 'white',
+        primaryKeyBackground: '#fff3cd',
+        primaryKeyText: '#856404',
+        foreignKeyBackground: '#cce5ff',
+        foreignKeyText: '#004085',
+        linkColor: '#666',
+        selectedBorder: '#4CAF50',
+        highlightBorder: '#ff9800',
+        relatedBorder: '#ff6b35'
+    }
+};
+/**
+ * Entity Relationship Diagram component using D3.js force-directed graph.
+ *
+ * This is a **generic, reusable Angular component** that can visualize any data
+ * that conforms to the `ERDNode` interface. It is completely decoupled from
+ * MemberJunction-specific types and can be used in any Angular project.
+ *
+ * ## Features
+ *
+ * - **Interactive Force-Directed Layout**: Nodes automatically arrange themselves
+ *   using physics-based simulation with customizable forces
+ * - **Zoom and Pan**: Mouse wheel zoom and drag-to-pan with configurable limits
+ * - **Node Selection**: Click to select nodes with visual highlighting
+ * - **Focus Mode**: Show a single node with its N-hop related entities
+ * - **Relationship Visualization**: Arrows show foreign key relationships
+ * - **Customizable Styling**: Full control over colors, sizes, and appearance
+ * - **Rich Event System**: Comprehensive events for integration with parent components
+ * - **State Persistence**: Save and restore diagram state (zoom, pan, selection, positions)
+ *
+ * ## Basic Usage
+ *
+ * ```html
+ * <mj-erd-diagram
+ *   [nodes]="entityNodes"
+ *   [selectedNodeId]="selectedId"
+ *   [config]="erdConfig"
+ *   (nodeClick)="onNodeClick($event)"
+ *   (nodeSelected)="onNodeSelected($event)"
+ *   (zoomChange)="onZoomChange($event)">
+ * </mj-erd-diagram>
+ * ```
+ *
+ * ## Focus Mode Example
+ *
+ * Show a single entity with its immediate relationships:
+ *
+ * ```html
+ * <mj-erd-diagram
+ *   [nodes]="allNodes"
+ *   [focusNodeId]="'user-entity-id'"
+ *   [focusDepth]="1"
+ *   (nodeSelected)="onNodeSelected($event)">
+ * </mj-erd-diagram>
+ * ```
+ *
+ * ## State Persistence Example
+ *
+ * ```typescript
+ * // Save state
+ * const state = this.erdDiagram.getState();
+ * localStorage.setItem('erd-state', JSON.stringify(state));
+ *
+ * // Restore state
+ * const savedState = JSON.parse(localStorage.getItem('erd-state'));
+ * this.erdDiagram.setState(savedState);
+ * ```
+ *
+ * @see ERDNode for the node data structure
+ * @see ERDConfig for configuration options
+ * @see ERDState for state persistence
+ */
+export class ERDDiagramComponent {
+    erdContainer;
+    // ============================================================================
+    // INPUTS - Data
+    // ============================================================================
+    /**
+     * The nodes (entities) to display in the diagram.
+     * Each node should conform to the `ERDNode` interface.
+     *
+     * @example
+     * ```typescript
+     * nodes: ERDNode[] = [
+     *   {
+     *     id: 'user-1',
+     *     name: 'Users',
+     *     fields: [
+     *       { id: 'id', name: 'ID', isPrimaryKey: true },
+     *       { id: 'email', name: 'Email', isPrimaryKey: false }
+     *     ]
+     *   }
+     * ];
+     * ```
+     */
+    nodes = [];
+    /**
+     * ID of the currently selected node.
+     * Use this for external control of selection state.
+     * The component will highlight this node and emit selection events accordingly.
+     *
+     * @example `[selectedNodeId]="'entity-123'"`
+     */
+    selectedNodeId = null;
+    /**
+     * IDs of nodes to highlight (in addition to selected node).
+     * Highlighted nodes receive a distinct visual style (orange border by default).
+     * Useful for showing search results or related items.
+     *
+     * @example `[highlightedNodeIds]="['entity-1', 'entity-2']"`
+     */
+    highlightedNodeIds = [];
+    /**
+     * ID of the node to focus on.
+     * When set, the diagram will only show this node and its related nodes
+     * up to `focusDepth` hops away. This is useful for entity-centric views.
+     *
+     * Set to `null` to show all nodes.
+     *
+     * @example `[focusNodeId]="'user-entity-id'"`
+     */
+    focusNodeId = null;
+    /**
+     * Number of relationship hops to include when in focus mode.
+     * - `0`: Show only the focus node
+     * - `1`: Show focus node + directly related nodes
+     * - `2`: Show focus node + nodes within 2 relationship hops
+     *
+     * Only applies when `focusNodeId` is set.
+     *
+     * @default 1
+     * @example `[focusDepth]="2"`
+     */
+    focusDepth = 1;
+    // ============================================================================
+    // INPUTS - State
+    // ============================================================================
+    /**
+     * Whether the diagram is currently refreshing/loading.
+     * When `true`, displays a loading overlay on the diagram.
+     *
+     * @example `[isRefreshing]="isLoadingData"`
+     */
+    isRefreshing = false;
+    /**
+     * Whether the diagram is in read-only mode.
+     * When `true`, disables dragging and selection (zoom/pan still work).
+     *
+     * @default false
+     */
+    readOnly = false;
+    // ============================================================================
+    // INPUTS - Configuration
+    // ============================================================================
+    /**
+     * Configuration options for the diagram.
+     * All options are optional with sensible defaults.
+     *
+     * @see ERDConfig for all available options
+     * @example
+     * ```typescript
+     * config: ERDConfig = {
+     *   nodeWidth: 200,
+     *   chargeStrength: -1000,
+     *   colors: {
+     *     nodeHeader: '#0066cc'
+     *   }
+     * };
+     * ```
+     */
+    config = {};
+    /**
+     * Whether to show the header bar with zoom controls.
+     * Set to `false` to hide the header and use programmatic control instead.
+     *
+     * @default true
+     */
+    showHeader = true;
+    /**
+     * Title to display in the header bar.
+     * Only visible when `showHeader` is `true`.
+     *
+     * @default 'Entity Relationship Diagram'
+     */
+    headerTitle = 'Entity Relationship Diagram';
+    // ============================================================================
+    // OUTPUTS - Selection Events
+    // ============================================================================
+    /**
+     * Emitted when a node is clicked.
+     * Set `event.cancel = true` to prevent the default selection behavior.
+     *
+     * @example
+     * ```typescript
+     * onNodeClick(event: ERDNodeClickEvent) {
+     *   console.log('Clicked:', event.node.name);
+     *   // Prevent selection for certain nodes
+     *   if (event.node.customData?.['locked']) {
+     *     event.cancel = true;
+     *   }
+     * }
+     * ```
+     */
+    nodeClick = new EventEmitter();
+    /**
+     * Emitted when a node is double-clicked.
+     * Useful for opening detail views or triggering actions.
+     *
+     * @example
+     * ```typescript
+     * onNodeDoubleClick(event: ERDNodeDoubleClickEvent) {
+     *   this.openEntityDetail(event.node.id);
+     * }
+     * ```
+     */
+    nodeDoubleClick = new EventEmitter();
+    /**
+     * Emitted when a node is selected (after click, unless cancelled).
+     * The node parameter contains the full `ERDNode` data.
+     */
+    nodeSelected = new EventEmitter();
+    /**
+     * Emitted when the current node is deselected.
+     * This happens when clicking the background or selecting a different node.
+     */
+    nodeDeselected = new EventEmitter();
+    /**
+     * Emitted when a relationship link is clicked.
+     * The event includes both source and target nodes for context.
+     */
+    linkClick = new EventEmitter();
+    // ============================================================================
+    // OUTPUTS - Hover Events
+    // ============================================================================
+    /**
+     * Emitted when the mouse enters a node.
+     * Includes related nodes and position for tooltip display.
+     *
+     * @example
+     * ```typescript
+     * onNodeHover(event: ERDNodeHoverEvent) {
+     *   this.showTooltip(event.node, event.position);
+     * }
+     * ```
+     */
+    nodeHover = new EventEmitter();
+    /**
+     * Emitted when the mouse leaves a node.
+     */
+    nodeHoverEnd = new EventEmitter();
+    /**
+     * Emitted when the mouse enters a relationship link.
+     */
+    linkHover = new EventEmitter();
+    /**
+     * Emitted when the mouse leaves a relationship link.
+     */
+    linkHoverEnd = new EventEmitter();
+    // ============================================================================
+    // OUTPUTS - Context Menu Events
+    // ============================================================================
+    /**
+     * Emitted when a node is right-clicked.
+     * Set `event.cancel = true` to prevent the default browser context menu.
+     *
+     * @example
+     * ```typescript
+     * onNodeContextMenu(event: ERDNodeContextMenuEvent) {
+     *   event.cancel = true;
+     *   this.showContextMenu(event.node, event.position);
+     * }
+     * ```
+     */
+    nodeContextMenu = new EventEmitter();
+    /**
+     * Emitted when a relationship link is right-clicked.
+     */
+    linkContextMenu = new EventEmitter();
+    /**
+     * Emitted when the diagram background is right-clicked.
+     * Includes diagram coordinates for adding new nodes at click position.
+     */
+    diagramContextMenu = new EventEmitter();
+    // ============================================================================
+    // OUTPUTS - Drag Events
+    // ============================================================================
+    /**
+     * Emitted when a node drag operation starts.
+     * Set `event.cancel = true` to prevent the drag.
+     */
+    nodeDragStart = new EventEmitter();
+    /**
+     * Emitted when a node drag operation ends.
+     */
+    nodeDragEnd = new EventEmitter();
+    // ============================================================================
+    // OUTPUTS - Diagram Events
+    // ============================================================================
+    /**
+     * Emitted when zoom level or pan position changes.
+     * Useful for synchronizing zoom controls or saving view state.
+     */
+    zoomChange = new EventEmitter();
+    /**
+     * Emitted when the diagram requests a refresh.
+     * Triggered by the refresh button in the header.
+     */
+    refreshRequested = new EventEmitter();
+    /**
+     * Emitted when the force simulation completes initial layout.
+     * Useful for performing actions after nodes have settled.
+     */
+    layoutComplete = new EventEmitter();
+    /**
+     * Emitted when diagram state changes (selection, zoom, highlights).
+     * Useful for auto-saving state or syncing with other components.
+     */
+    stateChange = new EventEmitter();
+    // ============================================================================
+    // PRIVATE STATE
+    // ============================================================================
+    svg = null;
+    simulation = null;
+    internalNodes = [];
+    internalLinks = [];
+    visibleNodes = [];
+    visibleLinks = [];
+    zoom = null;
+    resizeObserver;
+    lastKnownSize = { width: 0, height: 0 };
+    resizeTimeout;
+    mergedConfig = DEFAULT_CONFIG;
+    layoutCompleted = false;
+    isLayoutFrozen = false;
+    // ============================================================================
+    // LIFECYCLE HOOKS
+    // ============================================================================
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.setupERD();
+        }, 100);
+        this.setupResizeObserver();
+    }
+    ngOnChanges(changes) {
+        if (changes['nodes'] && !changes['nodes'].firstChange) {
+            this.setupERD();
+        }
+        if (changes['selectedNodeId'] && !changes['selectedNodeId'].firstChange) {
+            this.updateSelectionHighlighting();
+            this.emitStateChange();
+        }
+        if (changes['highlightedNodeIds'] && !changes['highlightedNodeIds'].firstChange) {
+            this.updateHighlighting();
+            this.emitStateChange();
+        }
+        if (changes['focusNodeId'] && !changes['focusNodeId'].firstChange) {
+            this.setupERD();
+            this.emitStateChange();
+        }
+        if (changes['focusDepth'] && !changes['focusDepth'].firstChange) {
+            if (this.focusNodeId) {
+                this.setupERD();
+                this.emitStateChange();
+            }
+        }
+        if (changes['config'] && !changes['config'].firstChange) {
+            this.mergeConfig();
+            this.setupERD();
+        }
+    }
+    ngOnDestroy() {
+        if (this.simulation) {
+            this.simulation.stop();
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+        }
+    }
+    // ============================================================================
+    // PUBLIC API - Zoom Control
+    // ============================================================================
+    /**
+     * Zoom in on the diagram by a fixed factor (1.2x).
+     * Uses smooth animation transition.
+     */
+    zoomIn() {
+        if (this.zoom && this.svg) {
+            this.svg.transition().duration(300).call(this.zoom.scaleBy, 1.2);
+        }
+    }
+    /**
+     * Zoom out on the diagram by a fixed factor (0.83x).
+     * Uses smooth animation transition.
+     */
+    zoomOut() {
+        if (this.zoom && this.svg) {
+            this.svg.transition().duration(300).call(this.zoom.scaleBy, 0.83);
+        }
+    }
+    /**
+     * Reset zoom to default level (1x) and center the diagram.
+     * Uses smooth animation transition.
+     */
+    resetZoom() {
+        if (this.zoom && this.svg) {
+            this.svg.transition().duration(500).call(this.zoom.transform, d3.zoomIdentity);
+        }
+    }
+    /**
+     * Zoom and pan to center on a specific node.
+     *
+     * @param nodeId - ID of the node to center on
+     * @param scale - Optional zoom scale (default: 1.5)
+     *
+     * @example
+     * ```typescript
+     * // Center on node with default zoom
+     * this.erdDiagram.zoomToNode('user-entity-id');
+     *
+     * // Center with custom zoom level
+     * this.erdDiagram.zoomToNode('user-entity-id', 2.0);
+     * ```
+     */
+    zoomToNode(nodeId, scale = 1.5) {
+        const node = this.internalNodes.find(n => n.id === nodeId);
+        if (!node || !this.zoom || !this.svg)
+            return;
+        const container = this.erdContainer.nativeElement;
+        const width = container.clientWidth;
+        const height = container.clientHeight;
+        const x = width / 2 - (node.x || 0) * scale;
+        const y = height / 2 - (node.y || 0) * scale;
+        this.svg.transition().duration(this.mergedConfig.animationDuration).call(this.zoom.transform, d3.zoomIdentity.translate(x, y).scale(scale));
+    }
+    /**
+     * Fit all visible nodes within the viewport.
+     * Calculates optimal zoom level and position to show all nodes.
+     *
+     * @param padding - Padding around nodes (default: 50px)
+     */
+    zoomToFit(padding = 50) {
+        if (!this.svg || !this.zoom || this.visibleNodes.length === 0)
+            return;
+        const container = this.erdContainer.nativeElement;
+        const width = container.clientWidth;
+        const height = container.clientHeight;
+        // Guard against zero container dimensions (container not laid out yet)
+        if (width === 0 || height === 0)
+            return;
+        // Calculate bounds
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        this.visibleNodes.forEach(node => {
+            const halfWidth = node.width / 2;
+            const halfHeight = node.height / 2;
+            minX = Math.min(minX, (node.x || 0) - halfWidth);
+            minY = Math.min(minY, (node.y || 0) - halfHeight);
+            maxX = Math.max(maxX, (node.x || 0) + halfWidth);
+            maxY = Math.max(maxY, (node.y || 0) + halfHeight);
+        });
+        // Guard against invalid bounds (nodes without valid positions)
+        if (!isFinite(minX) || !isFinite(minY) || !isFinite(maxX) || !isFinite(maxY))
+            return;
+        const boundsWidth = maxX - minX + padding * 2;
+        const boundsHeight = maxY - minY + padding * 2;
+        // Guard against zero-dimension bounds
+        if (boundsWidth <= 0 || boundsHeight <= 0)
+            return;
+        const centerX = (minX + maxX) / 2;
+        const centerY = (minY + maxY) / 2;
+        const scale = Math.min(width / boundsWidth, height / boundsHeight, this.mergedConfig.maxZoom);
+        // Final sanity check before applying transform
+        if (!isFinite(scale) || scale <= 0)
+            return;
+        const translateX = width / 2 - centerX * scale;
+        const translateY = height / 2 - centerY * scale;
+        this.svg.transition().duration(this.mergedConfig.animationDuration).call(this.zoom.transform, d3.zoomIdentity.translate(translateX, translateY).scale(scale));
+    }
+    // ============================================================================
+    // PUBLIC API - Selection
+    // ============================================================================
+    /**
+     * Programmatically select a node by ID.
+     *
+     * @param nodeId - ID of the node to select
+     * @returns `true` if node was found and selected, `false` otherwise
+     */
+    selectNode(nodeId) {
+        const node = this.nodes.find(n => n.id === nodeId);
+        if (node) {
+            this.nodeSelected.emit(node);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Clear all selections.
+     */
+    deselectAll() {
+        this.nodeDeselected.emit();
+        this.clearAllHighlighting();
+    }
+    // ============================================================================
+    // PUBLIC API - Highlighting
+    // ============================================================================
+    /**
+     * Highlight a specific node.
+     *
+     * @param nodeId - ID of the node to highlight
+     */
+    highlightNode(nodeId) {
+        if (!this.highlightedNodeIds.includes(nodeId)) {
+            this.highlightedNodeIds = [...this.highlightedNodeIds, nodeId];
+            this.updateHighlighting();
+            this.emitStateChange();
+        }
+    }
+    /**
+     * Clear all highlights.
+     */
+    clearHighlights() {
+        this.highlightedNodeIds = [];
+        this.updateHighlighting();
+        this.emitStateChange();
+    }
+    /**
+     * Highlight a node and all its directly related nodes.
+     *
+     * @param nodeId - ID of the center node
+     * @param depth - Number of relationship hops to highlight (default: 1)
+     */
+    highlightRelated(nodeId, depth = 1) {
+        const relatedIds = this.getRelatedNodeIds(nodeId, depth);
+        this.highlightedNodeIds = [nodeId, ...relatedIds];
+        this.updateHighlighting();
+        this.emitStateChange();
+    }
+    /**
+     * Get nodes that are related to a specific node.
+     *
+     * @param nodeId - ID of the node to find relationships for
+     * @param depth - Number of relationship hops (default: 1)
+     * @returns Array of relationship information
+     */
+    getRelatedNodes(nodeId, depth = 1) {
+        const result = [];
+        const visited = new Set([nodeId]);
+        const toProcess = [{ id: nodeId, currentDepth: 0 }];
+        while (toProcess.length > 0) {
+            const current = toProcess.shift();
+            if (current.currentDepth >= depth)
+                continue;
+            // Find outgoing relationships
+            this.nodes.forEach(node => {
+                node.fields.forEach(field => {
+                    if (field.relatedNodeId) {
+                        if (node.id === current.id && !visited.has(field.relatedNodeId)) {
+                            const targetNode = this.nodes.find(n => n.id === field.relatedNodeId);
+                            if (targetNode) {
+                                visited.add(field.relatedNodeId);
+                                toProcess.push({ id: field.relatedNodeId, currentDepth: current.currentDepth + 1 });
+                                result.push({
+                                    node: targetNode,
+                                    link: {
+                                        sourceNodeId: node.id,
+                                        targetNodeId: field.relatedNodeId,
+                                        sourceField: field,
+                                        isSelfReference: node.id === field.relatedNodeId
+                                    },
+                                    direction: 'outgoing',
+                                    field
+                                });
+                            }
+                        }
+                        // Incoming relationships
+                        if (field.relatedNodeId === current.id && !visited.has(node.id)) {
+                            visited.add(node.id);
+                            toProcess.push({ id: node.id, currentDepth: current.currentDepth + 1 });
+                            result.push({
+                                node,
+                                link: {
+                                    sourceNodeId: node.id,
+                                    targetNodeId: field.relatedNodeId,
+                                    sourceField: field,
+                                    isSelfReference: node.id === field.relatedNodeId
+                                },
+                                direction: 'incoming',
+                                field
+                            });
+                        }
+                    }
+                });
+            });
+        }
+        return result;
+    }
+    // ============================================================================
+    // PUBLIC API - State Management
+    // ============================================================================
+    /**
+     * Get the current state of the diagram for persistence.
+     * Includes selection, highlights, zoom, pan, and node positions.
+     *
+     * @returns Current diagram state
+     *
+     * @example
+     * ```typescript
+     * // Save to localStorage
+     * const state = erdDiagram.getState();
+     * localStorage.setItem('erd-state', JSON.stringify(state));
+     * ```
+     */
+    getState() {
+        const zoomState = this.getZoomState();
+        const nodePositions = {};
+        this.internalNodes.forEach(node => {
+            nodePositions[node.id] = {
+                x: node.x || 0,
+                y: node.y || 0,
+                fx: node.fx,
+                fy: node.fy
+            };
+        });
+        return {
+            selectedNodeId: this.selectedNodeId,
+            highlightedNodeIds: [...this.highlightedNodeIds],
+            zoomLevel: zoomState.zoomLevel,
+            translateX: zoomState.translateX,
+            translateY: zoomState.translateY,
+            focusNodeId: this.focusNodeId,
+            focusDepth: this.focusDepth,
+            nodePositions
+        };
+    }
+    /**
+     * Restore a previously saved diagram state.
+     *
+     * @param state - State object from `getState()`
+     * @param restorePositions - Whether to restore node positions (default: true)
+     *
+     * @example
+     * ```typescript
+     * // Restore from localStorage
+     * const savedState = JSON.parse(localStorage.getItem('erd-state'));
+     * if (savedState) {
+     *   erdDiagram.setState(savedState);
+     * }
+     * ```
+     */
+    setState(state, restorePositions = true) {
+        if (state.highlightedNodeIds) {
+            this.highlightedNodeIds = [...state.highlightedNodeIds];
+        }
+        // Restore zoom/pan
+        if (this.svg && this.zoom && state.zoomLevel != null) {
+            this.svg.call(this.zoom.transform, d3.zoomIdentity
+                .translate(state.translateX || 0, state.translateY || 0)
+                .scale(state.zoomLevel));
+        }
+        // Restore node positions
+        if (restorePositions && state.nodePositions) {
+            this.internalNodes.forEach(node => {
+                const savedPos = state.nodePositions?.[node.id];
+                if (savedPos) {
+                    node.x = savedPos.x;
+                    node.y = savedPos.y;
+                    node.fx = savedPos.fx;
+                    node.fy = savedPos.fy;
+                }
+            });
+            // Restart simulation briefly to update display
+            if (this.simulation) {
+                this.simulation.alpha(0.1).restart();
+            }
+        }
+        this.updateSelectionHighlighting();
+        this.updateHighlighting();
+    }
+    // ============================================================================
+    // PUBLIC API - Layout Control
+    // ============================================================================
+    /**
+     * Freeze the layout simulation.
+     * Nodes will stay in their current positions and won't move.
+     */
+    freezeLayout() {
+        this.isLayoutFrozen = true;
+        if (this.simulation) {
+            this.simulation.stop();
+            // Fix all node positions
+            this.internalNodes.forEach(node => {
+                node.fx = node.x;
+                node.fy = node.y;
+            });
+        }
+    }
+    /**
+     * Unfreeze the layout simulation.
+     * Nodes will resume natural movement based on forces.
+     */
+    unfreezeLayout() {
+        this.isLayoutFrozen = false;
+        // Unfix all node positions
+        this.internalNodes.forEach(node => {
+            node.fx = null;
+            node.fy = null;
+        });
+        if (this.simulation) {
+            this.simulation.alpha(0.3).restart();
+        }
+    }
+    /**
+     * Center the diagram without changing zoom level.
+     */
+    centerDiagram() {
+        if (!this.svg || !this.zoom || this.visibleNodes.length === 0)
+            return;
+        const container = this.erdContainer.nativeElement;
+        const width = container.clientWidth;
+        const height = container.clientHeight;
+        // Calculate center of all nodes
+        let sumX = 0, sumY = 0;
+        this.visibleNodes.forEach(node => {
+            sumX += node.x || 0;
+            sumY += node.y || 0;
+        });
+        const centerX = sumX / this.visibleNodes.length;
+        const centerY = sumY / this.visibleNodes.length;
+        const currentTransform = d3.zoomTransform(this.svg.node());
+        const translateX = width / 2 - centerX * currentTransform.k;
+        const translateY = height / 2 - centerY * currentTransform.k;
+        this.svg.transition().duration(this.mergedConfig.animationDuration).call(this.zoom.transform, d3.zoomIdentity.translate(translateX, translateY).scale(currentTransform.k));
+    }
+    // ============================================================================
+    // PUBLIC API - Utilities
+    // ============================================================================
+    /**
+     * Rebuild the entire ERD visualization.
+     */
+    refresh() {
+        this.setupERD();
+    }
+    /**
+     * Trigger a resize recalculation.
+     * Call this when the container size changes.
+     */
+    triggerResize() {
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+        }
+        this.resizeTimeout = window.setTimeout(() => {
+            this.resizeSVG();
+        }, 100);
+    }
+    /**
+     * Get current zoom state.
+     *
+     * @returns Current zoom level and translation
+     */
+    getZoomState() {
+        if (!this.svg) {
+            return { zoomLevel: 1, translateX: 0, translateY: 0 };
+        }
+        const transform = d3.zoomTransform(this.svg.node());
+        return {
+            zoomLevel: transform.k,
+            translateX: transform.x,
+            translateY: transform.y
+        };
+    }
+    /**
+     * Export the diagram as an SVG string.
+     *
+     * @returns SVG markup string
+     */
+    exportAsSVG() {
+        if (!this.svg)
+            return '';
+        const svgNode = this.svg.node();
+        if (!svgNode)
+            return '';
+        const serializer = new XMLSerializer();
+        return serializer.serializeToString(svgNode);
+    }
+    // ============================================================================
+    // SETUP METHODS
+    // ============================================================================
+    setupERD() {
+        if (!this.erdContainer?.nativeElement) {
+            return;
+        }
+        this.layoutCompleted = false;
+        this.mergeConfig();
+        this.clearVisualization();
+        this.createInternalNodes();
+        this.createInternalLinks();
+        this.applyFocusMode();
+        this.createVisualization();
+    }
+    mergeConfig() {
+        this.mergedConfig = {
+            ...DEFAULT_CONFIG,
+            ...this.config,
+            colors: {
+                ...DEFAULT_CONFIG.colors,
+                ...this.config.colors
+            },
+            dagreConfig: {
+                ...DEFAULT_DAGRE_CONFIG,
+                ...this.config.dagreConfig
+            }
+        };
+        // Map 'horizontal' and 'vertical' layout algorithms to dagre with appropriate direction
+        if (this.mergedConfig.layoutAlgorithm === 'horizontal') {
+            this.mergedConfig.dagreConfig.rankDir = 'LR';
+        }
+        else if (this.mergedConfig.layoutAlgorithm === 'vertical') {
+            this.mergedConfig.dagreConfig.rankDir = 'TB';
+        }
+    }
+    resizeSVG() {
+        if (!this.svg || !this.erdContainer?.nativeElement) {
+            return;
+        }
+        const container = this.erdContainer.nativeElement;
+        const width = container.clientWidth || 800;
+        const height = container.clientHeight || 600;
+        if (Math.abs(this.lastKnownSize.width - width) < 5 &&
+            Math.abs(this.lastKnownSize.height - height) < 5) {
+            return;
+        }
+        this.lastKnownSize = { width, height };
+        const svgElement = this.svg.node();
+        if (svgElement) {
+            svgElement.style.width = '100%';
+            svgElement.style.height = '100%';
+        }
+        this.svg.attr('viewBox', `0 0 ${width} ${height}`);
+        if (this.simulation && !this.isLayoutFrozen) {
+            this.simulation.force('center', d3.forceCenter(width / 2, height / 2));
+            this.simulation.alpha(0.3).restart();
+        }
+    }
+    setupResizeObserver() {
+        if (!this.erdContainer?.nativeElement) {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.resizeTimeout) {
+                clearTimeout(this.resizeTimeout);
+            }
+            this.resizeTimeout = window.setTimeout(() => {
+                const container = this.erdContainer?.nativeElement;
+                if (!container)
+                    return;
+                const newWidth = container.clientWidth;
+                const newHeight = container.clientHeight;
+                if (Math.abs(this.lastKnownSize.width - newWidth) >= 5 ||
+                    Math.abs(this.lastKnownSize.height - newHeight) >= 5) {
+                    requestAnimationFrame(() => {
+                        this.resizeSVG();
+                    });
+                }
+            }, 50);
+        });
+        this.resizeObserver.observe(this.erdContainer.nativeElement);
+    }
+    clearVisualization() {
+        if (this.simulation) {
+            this.simulation.stop();
+        }
+        d3.select(this.erdContainer.nativeElement).selectAll('*').remove();
+    }
+    // ============================================================================
+    // FOCUS MODE
+    // ============================================================================
+    applyFocusMode() {
+        if (!this.focusNodeId) {
+            // No focus mode - show all nodes
+            this.visibleNodes = [...this.internalNodes];
+            this.visibleLinks = [...this.internalLinks];
+            return;
+        }
+        // Get IDs of nodes within focus depth
+        const visibleIds = new Set([this.focusNodeId]);
+        const relatedIds = this.getRelatedNodeIds(this.focusNodeId, this.focusDepth);
+        relatedIds.forEach(id => visibleIds.add(id));
+        // Filter nodes
+        this.visibleNodes = this.internalNodes.filter(n => visibleIds.has(n.id));
+        // Filter links - only show links between visible nodes
+        this.visibleLinks = this.internalLinks.filter(link => {
+            const sourceId = typeof link.source === 'string' ? link.source : link.source.id;
+            const targetId = typeof link.target === 'string' ? link.target : link.target.id;
+            return visibleIds.has(sourceId) && visibleIds.has(targetId);
+        });
+    }
+    getRelatedNodeIds(nodeId, depth) {
+        const visited = new Set([nodeId]);
+        const toProcess = [{ id: nodeId, currentDepth: 0 }];
+        const result = [];
+        while (toProcess.length > 0) {
+            const current = toProcess.shift();
+            if (current.currentDepth >= depth)
+                continue;
+            // Find relationships
+            this.nodes.forEach(node => {
+                node.fields.forEach(field => {
+                    if (field.relatedNodeId) {
+                        // Outgoing from current
+                        if (node.id === current.id && !visited.has(field.relatedNodeId)) {
+                            visited.add(field.relatedNodeId);
+                            result.push(field.relatedNodeId);
+                            toProcess.push({ id: field.relatedNodeId, currentDepth: current.currentDepth + 1 });
+                        }
+                        // Incoming to current
+                        if (field.relatedNodeId === current.id && !visited.has(node.id)) {
+                            visited.add(node.id);
+                            result.push(node.id);
+                            toProcess.push({ id: node.id, currentDepth: current.currentDepth + 1 });
+                        }
+                    }
+                });
+            });
+        }
+        return result;
+    }
+    // ============================================================================
+    // NODE/LINK CREATION
+    // ============================================================================
+    createInternalNodes() {
+        const cfg = this.mergedConfig;
+        this.internalNodes = this.nodes.map(node => {
+            const primaryKeys = node.fields.filter(f => f.isPrimaryKey);
+            const foreignKeys = node.fields.filter(f => f.relatedNodeId && !f.isPrimaryKey);
+            const fieldCount = Math.max(1, primaryKeys.length + foreignKeys.length);
+            const calculatedHeight = Math.min(cfg.nodeBaseHeight + (fieldCount * cfg.fieldHeight), cfg.maxNodeHeight);
+            return {
+                id: node.id,
+                name: node.name || node.schemaName || 'Unknown',
+                node: node,
+                width: cfg.nodeWidth,
+                height: calculatedHeight,
+                primaryKeys: primaryKeys,
+                foreignKeys: foreignKeys
+            };
+        });
+    }
+    createInternalLinks() {
+        this.internalLinks = [];
+        const nodeMap = new Map(this.internalNodes.map(n => [n.id, n]));
+        this.nodes.forEach(node => {
+            node.fields.forEach(field => {
+                if (field.relatedNodeId && !field.isPrimaryKey) {
+                    const sourceNode = nodeMap.get(node.id);
+                    const targetNode = nodeMap.get(field.relatedNodeId);
+                    if (sourceNode && targetNode) {
+                        const isSelfReference = node.id === field.relatedNodeId;
+                        const targetField = targetNode.primaryKeys.find(pk => pk.name === field.relatedFieldName);
+                        this.internalLinks.push({
+                            source: sourceNode,
+                            target: targetNode,
+                            sourceField: field,
+                            targetField: targetField,
+                            isSelfReference: isSelfReference
+                        });
+                    }
+                }
+            });
+        });
+    }
+    // ============================================================================
+    // DAGRE LAYOUT
+    // ============================================================================
+    /**
+     * Applies dagre hierarchical layout to position nodes and compute edge paths.
+     * This provides clean, orthogonal edge routing.
+     */
+    applyDagreLayout() {
+        const cfg = this.mergedConfig;
+        const dagreCfg = cfg.dagreConfig;
+        // Create a new directed graph
+        const g = new dagre.graphlib.Graph({ directed: true, multigraph: true });
+        // Set graph options
+        g.setGraph({
+            rankdir: dagreCfg.rankDir,
+            nodesep: dagreCfg.nodeSep,
+            ranksep: dagreCfg.rankSep,
+            edgesep: dagreCfg.edgeSep,
+            ranker: dagreCfg.ranker,
+            align: dagreCfg.align
+        });
+        // Default edge label (required by dagre)
+        g.setDefaultEdgeLabel(() => ({}));
+        // Add nodes to the graph
+        this.visibleNodes.forEach(node => {
+            g.setNode(node.id, {
+                width: node.width,
+                height: node.height,
+                label: node.name
+            });
+        });
+        // Add edges to the graph
+        this.visibleLinks.forEach((link, index) => {
+            const sourceId = typeof link.source === 'string' ? link.source : link.source.id;
+            const targetId = typeof link.target === 'string' ? link.target : link.target.id;
+            // Use index as edge name for multigraph support (multiple edges between same nodes)
+            g.setEdge(sourceId, targetId, {
+                label: link.sourceField.name || '',
+                labelpos: 'c',
+                labeloffset: 10
+            }, `edge-${index}`);
+        });
+        // Run the layout algorithm
+        dagre.layout(g);
+        // Apply computed positions to nodes
+        this.visibleNodes.forEach(node => {
+            const dagreNode = g.node(node.id);
+            if (dagreNode) {
+                node.x = dagreNode.x;
+                node.y = dagreNode.y;
+                // Fix position to prevent force simulation from moving nodes
+                node.fx = dagreNode.x;
+                node.fy = dagreNode.y;
+            }
+        });
+        // Store edge points for orthogonal path rendering
+        this.visibleLinks.forEach((link, index) => {
+            const sourceId = typeof link.source === 'string' ? link.source : link.source.id;
+            const targetId = typeof link.target === 'string' ? link.target : link.target.id;
+            const edge = g.edge(sourceId, targetId, `edge-${index}`);
+            if (edge && edge.points) {
+                link.points = edge.points;
+            }
+        });
+    }
+    /**
+     * Checks if the current layout algorithm uses dagre.
+     */
+    usesDagreLayout() {
+        const algo = this.mergedConfig.layoutAlgorithm;
+        return algo === 'dagre' || algo === 'horizontal' || algo === 'vertical';
+    }
+    // ============================================================================
+    // VISUALIZATION
+    // ============================================================================
+    createVisualization() {
+        const container = this.erdContainer.nativeElement;
+        const width = container.clientWidth || 800;
+        const height = container.clientHeight || 600;
+        const cfg = this.mergedConfig;
+        const colors = cfg.colors;
+        this.lastKnownSize = { width, height };
+        // Create zoom behavior
+        if (cfg.enableZoom) {
+            this.zoom = d3.zoom()
+                .scaleExtent([cfg.minZoom, cfg.maxZoom])
+                .on('zoom', (event) => {
+                if (this.svg) {
+                    this.svg.select('.chart-area').attr('transform', event.transform);
+                    this.zoomChange.emit({
+                        zoomLevel: event.transform.k,
+                        translateX: event.transform.x,
+                        translateY: event.transform.y
+                    });
+                }
+            });
+        }
+        // Create SVG
+        this.svg = d3
+            .select(container)
+            .append('svg')
+            .attr('viewBox', `0 0 ${width} ${height}`)
+            .style('width', '100%')
+            .style('height', '100%')
+            .style('position', 'absolute')
+            .style('top', '0')
+            .style('left', '0');
+        if (this.zoom) {
+            this.svg.call(this.zoom);
+        }
+        // Background click handler
+        this.svg.on('click', (event) => {
+            if (event.target === event.currentTarget) {
+                this.nodeDeselected.emit();
+                this.clearAllHighlighting();
+            }
+        });
+        // Background context menu handler
+        this.svg.on('contextmenu', (event) => {
+            if (event.target === event.currentTarget) {
+                const contextEvent = {
+                    mouseEvent: event,
+                    cancel: false,
+                    position: { x: event.clientX, y: event.clientY },
+                    diagramPosition: this.screenToDiagramCoords(event.clientX, event.clientY)
+                };
+                this.diagramContextMenu.emit(contextEvent);
+                if (contextEvent.cancel) {
+                    event.preventDefault();
+                }
+            }
+        });
+        const chartArea = this.svg.append('g').attr('class', 'chart-area');
+        // Define arrow marker
+        this.svg
+            .append('defs')
+            .selectAll('marker')
+            .data(['end-arrow'])
+            .enter()
+            .append('marker')
+            .attr('id', 'end-arrow')
+            .attr('viewBox', '0 -5 10 10')
+            .attr('refX', 8)
+            .attr('refY', 0)
+            .attr('markerWidth', 6)
+            .attr('markerHeight', 6)
+            .attr('orient', 'auto')
+            .append('path')
+            .attr('d', 'M0,-5L10,0L0,5')
+            .attr('fill', colors.linkColor);
+        // Apply layout based on algorithm
+        if (this.usesDagreLayout()) {
+            // Use dagre for hierarchical layout with orthogonal edges
+            this.applyDagreLayout();
+            this.simulation = null; // No force simulation needed
+        }
+        else {
+            // Create force simulation with visible nodes only (original behavior)
+            this.simulation = d3
+                .forceSimulation(this.visibleNodes)
+                .force('link', d3
+                .forceLink(this.visibleLinks)
+                .id((d) => d.id)
+                .distance((d) => {
+                const source = d.source;
+                const target = d.target;
+                const sourceSize = Math.max(source.width, source.height);
+                const targetSize = Math.max(target.width, target.height);
+                return (sourceSize + targetSize) / 2 + cfg.linkDistance;
+            }))
+                .force('charge', d3.forceManyBody().strength(cfg.chargeStrength))
+                .force('center', d3.forceCenter(width / 2, height / 2))
+                .force('collision', d3.forceCollide().radius((d) => {
+                return Math.max(d.width, d.height) / 2 + cfg.collisionPadding;
+            }));
+        }
+        // Create links
+        const link = chartArea
+            .selectAll('.link')
+            .data(this.visibleLinks)
+            .enter()
+            .append('g')
+            .attr('class', 'link-group');
+        link
+            .append('path')
+            .attr('class', 'link')
+            .attr('stroke', colors.linkColor)
+            .attr('stroke-opacity', 0.8)
+            .attr('stroke-width', 2)
+            .attr('fill', 'none')
+            .attr('marker-end', (d) => (d.isSelfReference ? 'none' : 'url(#end-arrow)'));
+        if (cfg.showRelationshipLabels) {
+            // Add background rect for label (will be sized after text is rendered)
+            // Self-referencing links get a green background to stand out
+            link
+                .append('rect')
+                .attr('class', 'link-label-bg')
+                .attr('fill', (d) => d.isSelfReference ? '#e8f5e9' : 'white')
+                .attr('stroke', (d) => d.isSelfReference ? '#4CAF50' : colors.linkColor)
+                .attr('stroke-width', 0.5)
+                .attr('stroke-opacity', (d) => d.isSelfReference ? 0.6 : 0.4)
+                .attr('rx', 2)
+                .attr('ry', 2);
+            // Add the label text
+            link
+                .append('text')
+                .attr('class', 'link-label')
+                .attr('font-size', '10px')
+                .attr('fill', (d) => d.isSelfReference ? '#2e7d32' : colors.linkColor)
+                .attr('text-anchor', 'middle')
+                .attr('dominant-baseline', 'middle')
+                .text((d) => d.sourceField.name || '');
+        }
+        // Link event handlers
+        this.attachLinkEventHandlers(link);
+        // Create nodes
+        const nodeGroup = chartArea
+            .selectAll('.node')
+            .data(this.visibleNodes)
+            .enter()
+            .append('g')
+            .attr('class', 'node')
+            .style('cursor', this.readOnly ? 'default' : 'pointer');
+        if (cfg.enableDragging && !this.readOnly) {
+            nodeGroup.call(d3.drag()
+                .on('start', (event, d) => this.dragstarted(event, d))
+                .on('drag', (event, d) => this.dragged(event, d))
+                .on('end', (event, d) => this.dragended(event, d)));
+        }
+        // Node rectangle
+        nodeGroup
+            .append('rect')
+            .attr('class', 'entity-rect')
+            .attr('width', (d) => d.width)
+            .attr('height', (d) => d.height)
+            .attr('x', (d) => -d.width / 2)
+            .attr('y', (d) => -d.height / 2)
+            .attr('fill', colors.nodeBackground)
+            .attr('stroke', colors.nodeBorder)
+            .attr('stroke-width', 2)
+            .attr('rx', 4);
+        // Node header
+        nodeGroup
+            .append('rect')
+            .attr('class', 'entity-header')
+            .attr('width', (d) => d.width)
+            .attr('height', 30)
+            .attr('x', (d) => -d.width / 2)
+            .attr('y', (d) => -d.height / 2)
+            .attr('fill', colors.nodeHeader)
+            .attr('rx', 4);
+        nodeGroup
+            .append('rect')
+            .attr('class', 'entity-header-bottom')
+            .attr('width', (d) => d.width)
+            .attr('height', 15)
+            .attr('x', (d) => -d.width / 2)
+            .attr('y', (d) => -d.height / 2 + 15)
+            .attr('fill', colors.nodeHeader);
+        // Node name
+        nodeGroup
+            .append('text')
+            .attr('class', 'entity-name')
+            .attr('text-anchor', 'middle')
+            .attr('y', (d) => -d.height / 2 + 20)
+            .attr('font-size', '12px')
+            .attr('font-weight', 'bold')
+            .attr('fill', colors.nodeHeaderText)
+            .text((d) => d.name);
+        // Add fields if configured
+        if (cfg.showFieldDetails) {
+            this.renderNodeFields(nodeGroup, colors);
+        }
+        // Event handlers
+        this.attachNodeEventHandlers(nodeGroup);
+        // Tooltips
+        nodeGroup
+            .append('title')
+            .text((d) => `${d.name}\nPrimary Keys: ${d.primaryKeys.length}\nForeign Keys: ${d.foreignKeys.length}`);
+        // Handle layout completion based on algorithm type
+        if (this.usesDagreLayout()) {
+            // Dagre layout is synchronous - positions are already set
+            this.updatePositions(link, nodeGroup);
+            this.layoutCompleted = true;
+            this.layoutComplete.emit();
+            // Fit to view after positions are set
+            if (cfg.fitOnLoad && this.visibleNodes.length > 1) {
+                setTimeout(() => this.zoomToFit(), 50);
+            }
+        }
+        else if (this.simulation) {
+            // Force simulation layout
+            if (cfg.skipAnimation) {
+                // Run simulation to completion without animation
+                this.simulation.stop();
+                // Run enough ticks to settle the layout (typically 300 is enough)
+                const tickCount = 300;
+                for (let i = 0; i < tickCount; i++) {
+                    this.simulation.tick();
+                }
+                // Update positions once at the end
+                this.updatePositions(link, nodeGroup);
+                this.layoutCompleted = true;
+                this.layoutComplete.emit();
+                // Fit to view after positions are set
+                if (cfg.fitOnLoad && this.visibleNodes.length > 1) {
+                    setTimeout(() => this.zoomToFit(), 50);
+                }
+            }
+            else {
+                // Normal animated mode
+                // Simulation tick
+                this.simulation.on('tick', () => {
+                    this.updatePositions(link, nodeGroup);
+                });
+                // Layout complete detection
+                this.simulation.on('end', () => {
+                    if (!this.layoutCompleted) {
+                        this.layoutCompleted = true;
+                        this.layoutComplete.emit();
+                        if (cfg.fitOnLoad && this.visibleNodes.length > 1) {
+                            setTimeout(() => this.zoomToFit(), 100);
+                        }
+                    }
+                });
+            }
+        }
+        // Apply initial selection highlighting
+        this.updateSelectionHighlighting();
+        this.updateHighlighting();
+    }
+    renderNodeFields(nodeGroup, colors) {
+        nodeGroup.each((d, i, nodes) => {
+            const group = d3.select(nodes[i]);
+            let currentY = -d.height / 2 + 40;
+            // Primary keys
+            d.primaryKeys.forEach((pk) => {
+                const fieldGroup = group.append('g').attr('class', 'field-group primary-key');
+                fieldGroup
+                    .append('rect')
+                    .attr('class', 'field-bg')
+                    .attr('x', -d.width / 2 + 2)
+                    .attr('y', currentY - 15)
+                    .attr('width', d.width - 4)
+                    .attr('height', 18)
+                    .attr('fill', colors.primaryKeyBackground);
+                fieldGroup
+                    .append('text')
+                    .attr('class', 'field-icon')
+                    .attr('x', -d.width / 2 + 8)
+                    .attr('y', currentY - 2)
+                    .attr('font-size', '10px')
+                    .attr('fill', colors.primaryKeyText)
+                    .text('🔑');
+                fieldGroup
+                    .append('text')
+                    .attr('class', 'field-name')
+                    .attr('x', -d.width / 2 + 25)
+                    .attr('y', currentY - 2)
+                    .attr('font-size', '11px')
+                    .attr('font-weight', 'bold')
+                    .attr('fill', colors.primaryKeyText)
+                    .text(pk.name || '');
+                currentY += 20;
+            });
+            // Foreign keys
+            d.foreignKeys.forEach((fk) => {
+                const fieldGroup = group.append('g').attr('class', 'field-group foreign-key');
+                fieldGroup
+                    .append('rect')
+                    .attr('class', 'field-bg')
+                    .attr('x', -d.width / 2 + 2)
+                    .attr('y', currentY - 15)
+                    .attr('width', d.width - 4)
+                    .attr('height', 18)
+                    .attr('fill', colors.foreignKeyBackground);
+                fieldGroup
+                    .append('text')
+                    .attr('class', 'field-icon')
+                    .attr('x', -d.width / 2 + 8)
+                    .attr('y', currentY - 2)
+                    .attr('font-size', '10px')
+                    .attr('fill', colors.foreignKeyText)
+                    .text('🔗');
+                fieldGroup
+                    .append('text')
+                    .attr('class', 'field-name')
+                    .attr('x', -d.width / 2 + 25)
+                    .attr('y', currentY - 2)
+                    .attr('font-size', '11px')
+                    .attr('fill', colors.foreignKeyText)
+                    .text(fk.name || '');
+                currentY += 20;
+            });
+        });
+    }
+    attachNodeEventHandlers(nodeGroup) {
+        nodeGroup
+            .on('click', (event, d) => {
+            if (this.readOnly)
+                return;
+            event.stopPropagation();
+            // Emit click event with cancel pattern
+            const clickEvent = {
+                node: d.node,
+                mouseEvent: event,
+                cancel: false
+            };
+            this.nodeClick.emit(clickEvent);
+            if (clickEvent.cancel) {
+                return;
+            }
+            // Handle selection
+            if (this.selectedNodeId === d.node.id) {
+                this.nodeDeselected.emit();
+            }
+            else {
+                this.nodeSelected.emit(d.node);
+                // Auto-zoom if node is too small
+                if (this.svg) {
+                    const currentTransform = d3.zoomTransform(this.svg.node());
+                    const currentRenderedWidth = d.width * currentTransform.k;
+                    if (currentRenderedWidth < 20) {
+                        this.zoomToNode(d.node.id);
+                    }
+                }
+            }
+            this.updateSelectionHighlighting();
+        })
+            .on('dblclick', (event, d) => {
+            event.stopPropagation();
+            const dblClickEvent = {
+                node: d.node,
+                mouseEvent: event,
+                cancel: false
+            };
+            this.nodeDoubleClick.emit(dblClickEvent);
+        })
+            .on('mouseenter', (event, d) => {
+            const relatedInfo = this.getRelatedNodes(d.node.id, 1);
+            const relatedNodes = relatedInfo.map(r => r.node);
+            const hoverEvent = {
+                node: d.node,
+                mouseEvent: event,
+                relatedNodes,
+                position: { x: event.clientX, y: event.clientY }
+            };
+            this.nodeHover.emit(hoverEvent);
+        })
+            .on('mouseleave', (_event, d) => {
+            this.nodeHoverEnd.emit(d.node);
+        })
+            .on('contextmenu', (event, d) => {
+            const contextEvent = {
+                node: d.node,
+                mouseEvent: event,
+                cancel: false,
+                position: { x: event.clientX, y: event.clientY }
+            };
+            this.nodeContextMenu.emit(contextEvent);
+            if (contextEvent.cancel) {
+                event.preventDefault();
+            }
+        });
+    }
+    attachLinkEventHandlers(linkGroup) {
+        linkGroup
+            .on('click', (event, d) => {
+            event.stopPropagation();
+            const sourceNode = d.source.node;
+            const targetNode = d.target.node;
+            const link = {
+                sourceNodeId: sourceNode.id,
+                targetNodeId: targetNode.id,
+                sourceField: d.sourceField,
+                targetField: d.targetField,
+                isSelfReference: d.isSelfReference
+            };
+            const clickEvent = {
+                link,
+                sourceNode,
+                targetNode,
+                mouseEvent: event,
+                cancel: false
+            };
+            this.linkClick.emit(clickEvent);
+        })
+            .on('mouseenter', (event, d) => {
+            const sourceNode = d.source.node;
+            const targetNode = d.target.node;
+            const link = {
+                sourceNodeId: sourceNode.id,
+                targetNodeId: targetNode.id,
+                sourceField: d.sourceField,
+                targetField: d.targetField,
+                isSelfReference: d.isSelfReference
+            };
+            const hoverEvent = {
+                link,
+                sourceNode,
+                targetNode,
+                mouseEvent: event,
+                position: { x: event.clientX, y: event.clientY }
+            };
+            this.linkHover.emit(hoverEvent);
+        })
+            .on('mouseleave', (_event, d) => {
+            const sourceNode = d.source.node;
+            const targetNode = d.target.node;
+            const link = {
+                sourceNodeId: sourceNode.id,
+                targetNodeId: targetNode.id,
+                sourceField: d.sourceField,
+                targetField: d.targetField,
+                isSelfReference: d.isSelfReference
+            };
+            this.linkHoverEnd.emit(link);
+        })
+            .on('contextmenu', (event, d) => {
+            const sourceNode = d.source.node;
+            const targetNode = d.target.node;
+            const link = {
+                sourceNodeId: sourceNode.id,
+                targetNodeId: targetNode.id,
+                sourceField: d.sourceField,
+                targetField: d.targetField,
+                isSelfReference: d.isSelfReference
+            };
+            const contextEvent = {
+                link,
+                sourceNode,
+                targetNode,
+                mouseEvent: event,
+                cancel: false,
+                position: { x: event.clientX, y: event.clientY }
+            };
+            this.linkContextMenu.emit(contextEvent);
+            if (contextEvent.cancel) {
+                event.preventDefault();
+            }
+        });
+    }
+    updatePositions(link, nodeGroup) {
+        const usesDagre = this.usesDagreLayout();
+        // Update link paths
+        link.select('path').attr('d', (d) => {
+            const source = d.source;
+            const target = d.target;
+            if (d.isSelfReference) {
+                // Create a larger loop that goes around the bottom of the entity
+                // Start from right side, loop down and around, return to left side
+                const startX = source.x + source.width / 2; // Right edge center
+                const startY = source.y;
+                const endY = source.y + source.height / 2; // Bottom edge Y
+                const loopExtent = 60; // How far out the loop extends
+                // Use a path that goes: right edge -> curves down-right -> bottom -> curves up to bottom edge
+                return `M ${startX} ${startY}
+                C ${startX + loopExtent} ${startY},
+                  ${startX + loopExtent} ${endY + loopExtent},
+                  ${source.x} ${endY + loopExtent}
+                C ${source.x - loopExtent} ${endY + loopExtent},
+                  ${source.x - source.width / 2 - loopExtent / 2} ${endY},
+                  ${source.x - source.width / 2} ${endY}`;
+            }
+            // Use dagre edge points if available (provides cleaner orthogonal paths)
+            if (usesDagre && d.points && d.points.length >= 2) {
+                return this.createPathFromDagrePoints(d.points);
+            }
+            // Fallback to manual orthogonal path
+            const sourcePoint = this.getSourceConnectionPoint(source, d.sourceField);
+            const targetPoint = this.getTargetConnectionPoint(target, d.targetField);
+            return this.createOrthogonalPath(sourcePoint, targetPoint);
+        });
+        // Update link labels and their background boxes
+        link.select('text').attr('transform', (d) => {
+            const source = d.source;
+            const target = d.target;
+            if (d.isSelfReference) {
+                // Position label at the bottom of the loop (below the entity)
+                const loopExtent = 60;
+                return `translate(${source.x}, ${source.y + source.height / 2 + loopExtent + 8})`;
+            }
+            // Use midpoint of dagre edge points if available
+            if (usesDagre && d.points && d.points.length >= 2) {
+                const midIndex = Math.floor(d.points.length / 2);
+                const midPoint = d.points[midIndex];
+                return `translate(${midPoint.x}, ${midPoint.y})`;
+            }
+            // Fallback to midpoint between nodes
+            const midX = (source.x + target.x) / 2;
+            const midY = (source.y + target.y) / 2;
+            return `translate(${midX}, ${midY - 8})`;
+        });
+        // Update label background rects to match text size and position
+        link.each(function () {
+            const group = d3.select(this);
+            const textEl = group.select('text.link-label').node();
+            const bgRect = group.select('rect.link-label-bg');
+            if (textEl && !bgRect.empty()) {
+                const bbox = textEl.getBBox();
+                const padding = 3;
+                // Get the transform from the text element
+                const transform = group.select('text.link-label').attr('transform');
+                bgRect
+                    .attr('x', bbox.x - padding)
+                    .attr('y', bbox.y - padding)
+                    .attr('width', bbox.width + padding * 2)
+                    .attr('height', bbox.height + padding * 2)
+                    .attr('transform', transform);
+            }
+        });
+        // Update node positions
+        nodeGroup.attr('transform', (d) => `translate(${d.x},${d.y})`);
+    }
+    // ============================================================================
+    // GEOMETRY HELPERS
+    // ============================================================================
+    getSourceConnectionPoint(sourceNode, field) {
+        let connectY = sourceNode.y;
+        if (field) {
+            const fkIndex = sourceNode.foreignKeys.findIndex((fk) => fk.id === field.id);
+            if (fkIndex >= 0) {
+                const fieldY = -sourceNode.height / 2 + 40 + sourceNode.primaryKeys.length * 20 + fkIndex * 20;
+                connectY = sourceNode.y + fieldY + 10;
+            }
+        }
+        return {
+            x: sourceNode.x + sourceNode.width / 2,
+            y: connectY,
+        };
+    }
+    getTargetConnectionPoint(targetNode, targetField) {
+        let connectY = targetNode.y - targetNode.height / 2 + 40;
+        if (targetField && targetField.isPrimaryKey) {
+            const pkIndex = targetNode.primaryKeys.findIndex((pk) => pk.id === targetField.id);
+            if (pkIndex >= 0) {
+                const fieldY = -targetNode.height / 2 + 40 + pkIndex * 20;
+                connectY = targetNode.y + fieldY + 10;
+            }
+        }
+        return {
+            x: targetNode.x - targetNode.width / 2,
+            y: connectY,
+        };
+    }
+    createOrthogonalPath(source, target) {
+        const dx = target.x - source.x;
+        let midX;
+        if (dx > 0) {
+            midX = source.x + dx * 0.7;
+        }
+        else {
+            midX = source.x + Math.max(dx * 0.3, -50);
+        }
+        return `M ${source.x} ${source.y}
+            L ${midX} ${source.y}
+            L ${midX} ${target.y}
+            L ${target.x} ${target.y}`;
+    }
+    /**
+     * Creates an SVG path string from dagre's edge points.
+     * Dagre provides an array of points for each edge that forms a clean orthogonal path.
+     * @param points Array of {x, y} coordinates from dagre layout
+     * @returns SVG path string
+     */
+    createPathFromDagrePoints(points) {
+        if (!points || points.length < 2) {
+            return '';
+        }
+        // Start with Move to first point
+        let path = `M ${points[0].x} ${points[0].y}`;
+        // Add Line to each subsequent point
+        for (let i = 1; i < points.length; i++) {
+            path += ` L ${points[i].x} ${points[i].y}`;
+        }
+        return path;
+    }
+    screenToDiagramCoords(screenX, screenY) {
+        if (!this.svg)
+            return { x: 0, y: 0 };
+        const svgNode = this.svg.node();
+        if (!svgNode)
+            return { x: 0, y: 0 };
+        const rect = svgNode.getBoundingClientRect();
+        const transform = d3.zoomTransform(svgNode);
+        return {
+            x: (screenX - rect.left - transform.x) / transform.k,
+            y: (screenY - rect.top - transform.y) / transform.k
+        };
+    }
+    // ============================================================================
+    // HIGHLIGHTING
+    // ============================================================================
+    clearAllHighlighting() {
+        if (!this.svg)
+            return;
+        this.svg.selectAll('.node')
+            .classed('selected', false)
+            .classed('highlighted', false)
+            .classed('relationship-connected', false)
+            .classed('entity-connections-highlighted', false);
+        this.svg.selectAll('.entity-rect')
+            .classed('highlighted', false)
+            .classed('relationship-highlighted', false)
+            .classed('connection-highlighted', false)
+            .style('stroke', this.mergedConfig.colors?.nodeBorder || '#333')
+            .style('stroke-width', '2px')
+            .style('filter', null);
+        this.svg.selectAll('.link-group')
+            .classed('highlighted', false);
+        this.svg.selectAll('.link')
+            .classed('highlighted', false);
+        this.svg.selectAll('.link-label')
+            .classed('highlighted', false);
+    }
+    updateSelectionHighlighting() {
+        if (!this.svg)
+            return;
+        // Clear previous selection styling
+        this.svg.selectAll('.node')
+            .classed('selected', false)
+            .select('.entity-rect')
+            .style('stroke', this.mergedConfig.colors?.nodeBorder || '#333')
+            .style('stroke-width', '2px')
+            .style('filter', null);
+        if (this.selectedNodeId) {
+            const selectedColor = this.mergedConfig.colors?.selectedBorder || '#4CAF50';
+            this.svg.selectAll('.node')
+                .filter((d) => d.id === this.selectedNodeId)
+                .classed('selected', true)
+                .select('.entity-rect')
+                .style('stroke', selectedColor)
+                .style('stroke-width', '4px')
+                .style('filter', `drop-shadow(0 0 8px ${selectedColor}80)`);
+        }
+    }
+    updateHighlighting() {
+        if (!this.svg)
+            return;
+        const highlightColor = this.mergedConfig.colors?.highlightBorder || '#ff9800';
+        const highlightSet = new Set(this.highlightedNodeIds);
+        this.svg.selectAll('.node')
+            .classed('highlighted', (d) => highlightSet.has(d.id))
+            .filter((d) => highlightSet.has(d.id))
+            .select('.entity-rect')
+            .style('stroke', highlightColor)
+            .style('stroke-width', '3px')
+            .style('filter', `drop-shadow(0 0 6px ${highlightColor}80)`);
+    }
+    emitStateChange() {
+        const state = this.getState();
+        this.stateChange.emit(state);
+    }
+    // ============================================================================
+    // DRAG HANDLERS
+    // ============================================================================
+    dragstarted(event, d) {
+        if (this.isLayoutFrozen)
+            return;
+        const dragEvent = {
+            node: d.node,
+            startPosition: { x: d.x || 0, y: d.y || 0 },
+            currentPosition: { x: d.x || 0, y: d.y || 0 },
+            cancel: false
+        };
+        this.nodeDragStart.emit(dragEvent);
+        if (dragEvent.cancel)
+            return;
+        if (!event.active && this.simulation) {
+            this.simulation.alphaTarget(0.3).restart();
+        }
+        d.fx = d.x;
+        d.fy = d.y;
+    }
+    dragged(event, d) {
+        if (this.isLayoutFrozen)
+            return;
+        d.fx = event.x;
+        d.fy = event.y;
+    }
+    dragended(event, d) {
+        if (this.isLayoutFrozen)
+            return;
+        const dragEvent = {
+            node: d.node,
+            startPosition: { x: 0, y: 0 }, // Start position not tracked in drag
+            currentPosition: { x: d.x || 0, y: d.y || 0 },
+            cancel: false
+        };
+        this.nodeDragEnd.emit(dragEvent);
+        if (!event.active && this.simulation) {
+            this.simulation.alphaTarget(0);
+        }
+        d.fx = null;
+        d.fy = null;
+    }
+    static ɵfac = function ERDDiagramComponent_Factory(t) { return new (t || ERDDiagramComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ERDDiagramComponent, selectors: [["mj-erd-diagram"]], viewQuery: function ERDDiagramComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.erdContainer = _t.first);
+        } }, inputs: { nodes: "nodes", selectedNodeId: "selectedNodeId", highlightedNodeIds: "highlightedNodeIds", focusNodeId: "focusNodeId", focusDepth: "focusDepth", isRefreshing: "isRefreshing", readOnly: "readOnly", config: "config", showHeader: "showHeader", headerTitle: "headerTitle" }, outputs: { nodeClick: "nodeClick", nodeDoubleClick: "nodeDoubleClick", nodeSelected: "nodeSelected", nodeDeselected: "nodeDeselected", linkClick: "linkClick", nodeHover: "nodeHover", nodeHoverEnd: "nodeHoverEnd", linkHover: "linkHover", linkHoverEnd: "linkHoverEnd", nodeContextMenu: "nodeContextMenu", linkContextMenu: "linkContextMenu", diagramContextMenu: "diagramContextMenu", nodeDragStart: "nodeDragStart", nodeDragEnd: "nodeDragEnd", zoomChange: "zoomChange", refreshRequested: "refreshRequested", layoutComplete: "layoutComplete", stateChange: "stateChange" }, features: [i0.ɵɵNgOnChangesFeature], decls: 5, vars: 2, consts: [["erdContainer", ""], [1, "erd-section"], [1, "section-header"], [1, "erd-container"], [1, "loading-overlay"], [1, "erd-controls"], ["title", "Zoom In", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-search-plus"], ["title", "Zoom Out", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-search-minus"], ["title", "Reset Zoom", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-expand"], ["title", "Refresh Diagram", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"]], template: function ERDDiagramComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵtemplate(1, ERDDiagramComponent_Conditional_1_Template, 12, 1, "div", 2);
+            i0.ɵɵelementStart(2, "div", 3, 0);
+            i0.ɵɵtemplate(4, ERDDiagramComponent_Conditional_4_Template, 8, 0, "div", 4);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showHeader ? 1 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.isRefreshing ? 4 : -1);
+        } }, styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n.erd-section[_ngcontent-%COMP%] {\n  background: white;\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background-color: #f5f5f5;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n.section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.erd-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  background: white;\n  cursor: pointer;\n  font-size: 12px;\n  transition: background-color 0.2s ease;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n  background-color: #f0f0f0;\n}\n\n.control-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.erd-container[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n  background-color: #fafafa;\n  overflow: hidden;\n  width: 100%;\n  min-height: 400px;\n  box-sizing: border-box;\n}\n\n.erd-container[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100% !important;\n  height: 100% !important;\n  box-sizing: border-box;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(250, 250, 250, 0.95);\n  backdrop-filter: blur(2px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(1) {\n  border-top-color: #2196f3;\n  animation-delay: 0s;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n  border-top-color: #9c27b0;\n  animation-delay: 0.3s;\n  transform: scale(0.8);\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n  border-top-color: #ff6b35;\n  animation-delay: 0.6s;\n  transform: scale(0.6);\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #666;\n  font-weight: 500;\n  text-align: center;\n}\n\n\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n\n\n[_nghost-%COMP%]     .erd-container svg .node .entity-rect.highlighted {\n  stroke: #ff9800 !important;\n  stroke-width: 4px !important;\n  filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.6));\n  animation: _ngcontent-%COMP%_pulse 1s ease-in-out infinite alternate;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.selected .entity-rect {\n  stroke: #2196f3 !important;\n  stroke-width: 4px !important;\n  filter: drop-shadow(0 0 12px rgba(33, 150, 243, 0.8));\n  fill: #f3f8ff !important;\n  animation: _ngcontent-%COMP%_selectedPulse 2s ease-in-out infinite alternate;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.selected .entity-header {\n  fill: #2196f3 !important;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.selected .entity-header-bottom {\n  fill: #2196f3 !important;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.selected .entity-name {\n  fill: white !important;\n  font-weight: bold !important;\n}\n\n@keyframes _ngcontent-%COMP%_selectedPulse {\n  0% {\n    stroke-width: 4px;\n    filter: drop-shadow(0 0 12px rgba(33, 150, 243, 0.8));\n  }\n  100% {\n    stroke-width: 5px;\n    filter: drop-shadow(0 0 16px rgb(33, 150, 243));\n  }\n}\n\n\n\n[_nghost-%COMP%]     .erd-container svg .node.relationship-connected .entity-rect.relationship-highlighted {\n  stroke: #ff6b35 !important;\n  stroke-width: 3px !important;\n  filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.5));\n  animation: _ngcontent-%COMP%_entityPulse 1.5s ease-in-out infinite alternate;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.relationship-connected .entity-header {\n  fill: #ff6b35 !important;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.relationship-connected .entity-header-bottom {\n  fill: #ff6b35 !important;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.entity-connections-highlighted .entity-rect.connection-highlighted {\n  stroke: #9b59b6 !important;\n  stroke-width: 3px !important;\n  filter: drop-shadow(0 0 6px rgba(155, 89, 182, 0.5));\n  opacity: 0.9;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.entity-connections-highlighted .entity-header {\n  fill: #9b59b6 !important;\n  opacity: 0.8;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.entity-connections-highlighted .entity-header-bottom {\n  fill: #9b59b6 !important;\n  opacity: 0.8;\n}\n\n\n\n[_nghost-%COMP%]     .erd-container svg .link-group .link {\n  stroke-width: 2px;\n  transition: all 0.2s ease;\n  cursor: pointer;\n}\n\n[_nghost-%COMP%]     .erd-container svg .link-group .link:hover {\n  stroke-width: 3px;\n  stroke: #ff6b35;\n  opacity: 1;\n}\n\n[_nghost-%COMP%]     .erd-container svg .link-group .link.highlighted {\n  stroke: #ff6b35 !important;\n  stroke-width: 4px !important;\n  opacity: 1 !important;\n  filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6));\n  animation: _ngcontent-%COMP%_linkPulse 1.5s ease-in-out infinite alternate;\n}\n\n[_nghost-%COMP%]     .erd-container svg .link-group .link-label {\n  font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n  opacity: 0.8;\n  pointer-events: none;\n  transition: opacity 0.2s ease;\n}\n\n[_nghost-%COMP%]     .erd-container svg .link-group .link-label.highlighted {\n  opacity: 1;\n  font-weight: bold;\n  fill: #ff6b35;\n}\n\n[_nghost-%COMP%]     .erd-container svg .link-group.highlighted {\n  z-index: 10;\n}\n\n\n\n[_nghost-%COMP%]     .erd-container svg .field-group .field-bg {\n  transition: fill 0.2s;\n}\n\n[_nghost-%COMP%]     .erd-container svg .field-group:hover .field-bg {\n  fill: #e3f2fd !important;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0% {\n    stroke-width: 4px;\n  }\n  100% {\n    stroke-width: 6px;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_linkPulse {\n  0% {\n    stroke-width: 4px;\n    filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6));\n  }\n  100% {\n    stroke-width: 5px;\n    filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.8));\n  }\n}\n\n@keyframes _ngcontent-%COMP%_entityPulse {\n  0% {\n    stroke-width: 3px;\n    filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.5));\n  }\n  100% {\n    stroke-width: 4px;\n    filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.7));\n  }\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ERDDiagramComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-erd-diagram', template: "<div class=\"erd-section\">\n  @if (showHeader) {\n    <div class=\"section-header\">\n      <h3>{{ headerTitle }}</h3>\n      <div class=\"erd-controls\">\n        <button class=\"control-btn\" (click)=\"zoomIn()\" title=\"Zoom In\">\n          <span class=\"fa-solid fa-search-plus\"></span>\n        </button>\n        <button class=\"control-btn\" (click)=\"zoomOut()\" title=\"Zoom Out\">\n          <span class=\"fa-solid fa-search-minus\"></span>\n        </button>\n        <button class=\"control-btn\" (click)=\"resetZoom()\" title=\"Reset Zoom\">\n          <span class=\"fa-solid fa-expand\"></span>\n        </button>\n        <button class=\"control-btn\" (click)=\"refresh(); refreshRequested.emit()\" title=\"Refresh Diagram\">\n          <span class=\"fa-solid fa-refresh\"></span>\n        </button>\n      </div>\n    </div>\n  }\n  <div class=\"erd-container\" #erdContainer>\n    @if (isRefreshing) {\n      <div class=\"loading-overlay\">\n        <div class=\"loading-content\">\n          <div class=\"loading-spinner\">\n            <div class=\"spinner-ring\"></div>\n            <div class=\"spinner-ring\"></div>\n            <div class=\"spinner-ring\"></div>\n          </div>\n          <div class=\"loading-text\">Loading diagram...</div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n.erd-section {\n  background: white;\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.section-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background-color: #f5f5f5;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n.section-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.erd-controls {\n  display: flex;\n  gap: 8px;\n}\n\n.control-btn {\n  padding: 4px 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  background: white;\n  cursor: pointer;\n  font-size: 12px;\n  transition: background-color 0.2s ease;\n}\n\n.control-btn:hover {\n  background-color: #f0f0f0;\n}\n\n.control-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.erd-container {\n  flex: 1;\n  position: relative;\n  background-color: #fafafa;\n  overflow: hidden;\n  width: 100%;\n  min-height: 400px;\n  box-sizing: border-box;\n}\n\n.erd-container svg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100% !important;\n  height: 100% !important;\n  box-sizing: border-box;\n}\n\n/* Loading overlay */\n.loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(250, 250, 250, 0.95);\n  backdrop-filter: blur(2px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.3s ease-in-out;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n}\n\n.spinner-ring {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: spin 1.5s linear infinite;\n}\n\n.spinner-ring:nth-child(1) {\n  border-top-color: #2196f3;\n  animation-delay: 0s;\n}\n\n.spinner-ring:nth-child(2) {\n  border-top-color: #9c27b0;\n  animation-delay: 0.3s;\n  transform: scale(0.8);\n}\n\n.spinner-ring:nth-child(3) {\n  border-top-color: #ff6b35;\n  animation-delay: 0.6s;\n  transform: scale(0.6);\n}\n\n.loading-text {\n  font-size: 14px;\n  color: #666;\n  font-weight: 500;\n  text-align: center;\n}\n\n/* Animations */\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Node highlighting styles */\n:host ::ng-deep .erd-container svg .node .entity-rect.highlighted {\n  stroke: #ff9800 !important;\n  stroke-width: 4px !important;\n  filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.6));\n  animation: pulse 1s ease-in-out infinite alternate;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-rect {\n  stroke: #2196f3 !important;\n  stroke-width: 4px !important;\n  filter: drop-shadow(0 0 12px rgba(33, 150, 243, 0.8));\n  fill: #f3f8ff !important;\n  animation: selectedPulse 2s ease-in-out infinite alternate;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-header {\n  fill: #2196f3 !important;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-header-bottom {\n  fill: #2196f3 !important;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-name {\n  fill: white !important;\n  font-weight: bold !important;\n}\n\n@keyframes selectedPulse {\n  0% {\n    stroke-width: 4px;\n    filter: drop-shadow(0 0 12px rgba(33, 150, 243, 0.8));\n  }\n  100% {\n    stroke-width: 5px;\n    filter: drop-shadow(0 0 16px rgb(33, 150, 243));\n  }\n}\n\n/* Related/connected nodes */\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-rect.relationship-highlighted {\n  stroke: #ff6b35 !important;\n  stroke-width: 3px !important;\n  filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.5));\n  animation: entityPulse 1.5s ease-in-out infinite alternate;\n}\n\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-header {\n  fill: #ff6b35 !important;\n}\n\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-header-bottom {\n  fill: #ff6b35 !important;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-rect.connection-highlighted {\n  stroke: #9b59b6 !important;\n  stroke-width: 3px !important;\n  filter: drop-shadow(0 0 6px rgba(155, 89, 182, 0.5));\n  opacity: 0.9;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-header {\n  fill: #9b59b6 !important;\n  opacity: 0.8;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-header-bottom {\n  fill: #9b59b6 !important;\n  opacity: 0.8;\n}\n\n/* Link styles */\n:host ::ng-deep .erd-container svg .link-group .link {\n  stroke-width: 2px;\n  transition: all 0.2s ease;\n  cursor: pointer;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link:hover {\n  stroke-width: 3px;\n  stroke: #ff6b35;\n  opacity: 1;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link.highlighted {\n  stroke: #ff6b35 !important;\n  stroke-width: 4px !important;\n  opacity: 1 !important;\n  filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6));\n  animation: linkPulse 1.5s ease-in-out infinite alternate;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link-label {\n  font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n  opacity: 0.8;\n  pointer-events: none;\n  transition: opacity 0.2s ease;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link-label.highlighted {\n  opacity: 1;\n  font-weight: bold;\n  fill: #ff6b35;\n}\n\n:host ::ng-deep .erd-container svg .link-group.highlighted {\n  z-index: 10;\n}\n\n/* Field hover */\n:host ::ng-deep .erd-container svg .field-group .field-bg {\n  transition: fill 0.2s;\n}\n\n:host ::ng-deep .erd-container svg .field-group:hover .field-bg {\n  fill: #e3f2fd !important;\n}\n\n@keyframes pulse {\n  0% {\n    stroke-width: 4px;\n  }\n  100% {\n    stroke-width: 6px;\n  }\n}\n\n@keyframes linkPulse {\n  0% {\n    stroke-width: 4px;\n    filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6));\n  }\n  100% {\n    stroke-width: 5px;\n    filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.8));\n  }\n}\n\n@keyframes entityPulse {\n  0% {\n    stroke-width: 3px;\n    filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.5));\n  }\n  100% {\n    stroke-width: 4px;\n    filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.7));\n  }\n}\n"] }]
+    }], null, { erdContainer: [{
+            type: ViewChild,
+            args: ['erdContainer', { static: false }]
+        }], nodes: [{
+            type: Input
+        }], selectedNodeId: [{
+            type: Input
+        }], highlightedNodeIds: [{
+            type: Input
+        }], focusNodeId: [{
+            type: Input
+        }], focusDepth: [{
+            type: Input
+        }], isRefreshing: [{
+            type: Input
+        }], readOnly: [{
+            type: Input
+        }], config: [{
+            type: Input
+        }], showHeader: [{
+            type: Input
+        }], headerTitle: [{
+            type: Input
+        }], nodeClick: [{
+            type: Output
+        }], nodeDoubleClick: [{
+            type: Output
+        }], nodeSelected: [{
+            type: Output
+        }], nodeDeselected: [{
+            type: Output
+        }], linkClick: [{
+            type: Output
+        }], nodeHover: [{
+            type: Output
+        }], nodeHoverEnd: [{
+            type: Output
+        }], linkHover: [{
+            type: Output
+        }], linkHoverEnd: [{
+            type: Output
+        }], nodeContextMenu: [{
+            type: Output
+        }], linkContextMenu: [{
+            type: Output
+        }], diagramContextMenu: [{
+            type: Output
+        }], nodeDragStart: [{
+            type: Output
+        }], nodeDragEnd: [{
+            type: Output
+        }], zoomChange: [{
+            type: Output
+        }], refreshRequested: [{
+            type: Output
+        }], layoutComplete: [{
+            type: Output
+        }], stateChange: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ERDDiagramComponent, { className: "ERDDiagramComponent", filePath: "src/lib/components/erd-diagram.component.ts", lineNumber: 194 }); })();
+//# sourceMappingURL=erd-diagram.component.js.map