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

package/dist/lib/components/erd-diagram.component.d.ts

@@ -0,0 +1,486 @@
+import { EventEmitter, ElementRef, AfterViewInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import { ERDNode, ERDLink, ERDConfig, ERDNodeClickEvent, ERDNodeDoubleClickEvent, ERDLinkClickEvent, ERDZoomEvent, ERDState, ERDNodeHoverEvent, ERDLinkHoverEvent, ERDNodeContextMenuEvent, ERDLinkContextMenuEvent, ERDDiagramContextMenuEvent, ERDNodeDragEvent, ERDRelationshipInfo } from '../interfaces/erd-types';
+import * as i0 from "@angular/core";
+/**
+ * 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 declare class ERDDiagramComponent implements AfterViewInit, OnDestroy, OnChanges {
+    erdContainer: ElementRef;
+    /**
+     * 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: ERDNode[];
+    /**
+     * 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: string | 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: string[];
+    /**
+     * 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: string | 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: number;
+    /**
+     * Whether the diagram is currently refreshing/loading.
+     * When `true`, displays a loading overlay on the diagram.
+     *
+     * @example `[isRefreshing]="isLoadingData"`
+     */
+    isRefreshing: boolean;
+    /**
+     * Whether the diagram is in read-only mode.
+     * When `true`, disables dragging and selection (zoom/pan still work).
+     *
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * 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: ERDConfig;
+    /**
+     * Whether to show the header bar with zoom controls.
+     * Set to `false` to hide the header and use programmatic control instead.
+     *
+     * @default true
+     */
+    showHeader: boolean;
+    /**
+     * Title to display in the header bar.
+     * Only visible when `showHeader` is `true`.
+     *
+     * @default 'Entity Relationship Diagram'
+     */
+    headerTitle: string;
+    /**
+     * 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: EventEmitter<ERDNodeClickEvent>;
+    /**
+     * 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: EventEmitter<ERDNodeDoubleClickEvent>;
+    /**
+     * Emitted when a node is selected (after click, unless cancelled).
+     * The node parameter contains the full `ERDNode` data.
+     */
+    nodeSelected: EventEmitter<ERDNode>;
+    /**
+     * Emitted when the current node is deselected.
+     * This happens when clicking the background or selecting a different node.
+     */
+    nodeDeselected: EventEmitter<void>;
+    /**
+     * Emitted when a relationship link is clicked.
+     * The event includes both source and target nodes for context.
+     */
+    linkClick: EventEmitter<ERDLinkClickEvent>;
+    /**
+     * 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: EventEmitter<ERDNodeHoverEvent>;
+    /**
+     * Emitted when the mouse leaves a node.
+     */
+    nodeHoverEnd: EventEmitter<ERDNode>;
+    /**
+     * Emitted when the mouse enters a relationship link.
+     */
+    linkHover: EventEmitter<ERDLinkHoverEvent>;
+    /**
+     * Emitted when the mouse leaves a relationship link.
+     */
+    linkHoverEnd: EventEmitter<ERDLink>;
+    /**
+     * 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: EventEmitter<ERDNodeContextMenuEvent>;
+    /**
+     * Emitted when a relationship link is right-clicked.
+     */
+    linkContextMenu: EventEmitter<ERDLinkContextMenuEvent>;
+    /**
+     * Emitted when the diagram background is right-clicked.
+     * Includes diagram coordinates for adding new nodes at click position.
+     */
+    diagramContextMenu: EventEmitter<ERDDiagramContextMenuEvent>;
+    /**
+     * Emitted when a node drag operation starts.
+     * Set `event.cancel = true` to prevent the drag.
+     */
+    nodeDragStart: EventEmitter<ERDNodeDragEvent>;
+    /**
+     * Emitted when a node drag operation ends.
+     */
+    nodeDragEnd: EventEmitter<ERDNodeDragEvent>;
+    /**
+     * Emitted when zoom level or pan position changes.
+     * Useful for synchronizing zoom controls or saving view state.
+     */
+    zoomChange: EventEmitter<ERDZoomEvent>;
+    /**
+     * Emitted when the diagram requests a refresh.
+     * Triggered by the refresh button in the header.
+     */
+    refreshRequested: EventEmitter<void>;
+    /**
+     * Emitted when the force simulation completes initial layout.
+     * Useful for performing actions after nodes have settled.
+     */
+    layoutComplete: EventEmitter<void>;
+    /**
+     * Emitted when diagram state changes (selection, zoom, highlights).
+     * Useful for auto-saving state or syncing with other components.
+     */
+    stateChange: EventEmitter<ERDState>;
+    private svg;
+    private simulation;
+    private internalNodes;
+    private internalLinks;
+    private visibleNodes;
+    private visibleLinks;
+    private zoom;
+    private resizeObserver?;
+    private lastKnownSize;
+    private resizeTimeout?;
+    private mergedConfig;
+    private layoutCompleted;
+    private isLayoutFrozen;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    /**
+     * Zoom in on the diagram by a fixed factor (1.2x).
+     * Uses smooth animation transition.
+     */
+    zoomIn(): void;
+    /**
+     * Zoom out on the diagram by a fixed factor (0.83x).
+     * Uses smooth animation transition.
+     */
+    zoomOut(): void;
+    /**
+     * Reset zoom to default level (1x) and center the diagram.
+     * Uses smooth animation transition.
+     */
+    resetZoom(): void;
+    /**
+     * 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: string, scale?: number): void;
+    /**
+     * 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?: number): void;
+    /**
+     * 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: string): boolean;
+    /**
+     * Clear all selections.
+     */
+    deselectAll(): void;
+    /**
+     * Highlight a specific node.
+     *
+     * @param nodeId - ID of the node to highlight
+     */
+    highlightNode(nodeId: string): void;
+    /**
+     * Clear all highlights.
+     */
+    clearHighlights(): void;
+    /**
+     * 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: string, depth?: number): void;
+    /**
+     * 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: string, depth?: number): ERDRelationshipInfo[];
+    /**
+     * 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(): ERDState;
+    /**
+     * 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: Partial<ERDState>, restorePositions?: boolean): void;
+    /**
+     * Freeze the layout simulation.
+     * Nodes will stay in their current positions and won't move.
+     */
+    freezeLayout(): void;
+    /**
+     * Unfreeze the layout simulation.
+     * Nodes will resume natural movement based on forces.
+     */
+    unfreezeLayout(): void;
+    /**
+     * Center the diagram without changing zoom level.
+     */
+    centerDiagram(): void;
+    /**
+     * Rebuild the entire ERD visualization.
+     */
+    refresh(): void;
+    /**
+     * Trigger a resize recalculation.
+     * Call this when the container size changes.
+     */
+    triggerResize(): void;
+    /**
+     * Get current zoom state.
+     *
+     * @returns Current zoom level and translation
+     */
+    getZoomState(): ERDZoomEvent;
+    /**
+     * Export the diagram as an SVG string.
+     *
+     * @returns SVG markup string
+     */
+    exportAsSVG(): string;
+    private setupERD;
+    private mergeConfig;
+    private resizeSVG;
+    private setupResizeObserver;
+    private clearVisualization;
+    private applyFocusMode;
+    private getRelatedNodeIds;
+    private createInternalNodes;
+    private createInternalLinks;
+    /**
+     * Applies dagre hierarchical layout to position nodes and compute edge paths.
+     * This provides clean, orthogonal edge routing.
+     */
+    private applyDagreLayout;
+    /**
+     * Checks if the current layout algorithm uses dagre.
+     */
+    private usesDagreLayout;
+    private createVisualization;
+    private renderNodeFields;
+    private attachNodeEventHandlers;
+    private attachLinkEventHandlers;
+    private updatePositions;
+    private getSourceConnectionPoint;
+    private getTargetConnectionPoint;
+    private createOrthogonalPath;
+    /**
+     * 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
+     */
+    private createPathFromDagrePoints;
+    private screenToDiagramCoords;
+    private clearAllHighlighting;
+    private updateSelectionHighlighting;
+    private updateHighlighting;
+    private emitStateChange;
+    private dragstarted;
+    private dragged;
+    private dragended;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ERDDiagramComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ERDDiagramComponent, "mj-erd-diagram", never, { "nodes": { "alias": "nodes"; "required": false; }; "selectedNodeId": { "alias": "selectedNodeId"; "required": false; }; "highlightedNodeIds": { "alias": "highlightedNodeIds"; "required": false; }; "focusNodeId": { "alias": "focusNodeId"; "required": false; }; "focusDepth": { "alias": "focusDepth"; "required": false; }; "isRefreshing": { "alias": "isRefreshing"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "config": { "alias": "config"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "headerTitle": { "alias": "headerTitle"; "required": false; }; }, { "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"; }, never, never, false, never>;
+}
+//# sourceMappingURL=erd-diagram.component.d.ts.map

package/dist/lib/components/erd-diagram.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"erd-diagram.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/erd-diagram.component.ts"],"names":[],"mappings":"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"}