@ngx-km/graph 0.0.1

package/README.md

@@ -0,0 +1,43 @@
+# @ngx-km/graph
+
+Main graph visualization library combining all sub-libraries into a unified component.
+
+## Features
+
+- Unified graph component integrating grid, layout, path-finding, and path-drawing
+- Custom Angular components as nodes
+- Type-safe node and relationship definitions
+- Automatic layout with ELK.js
+- Intelligent path routing between nodes
+- Custom path pill components
+- Reactive input handling with position preservation
+
+## Installation
+
+```bash
+npm install @ngx-km/graph
+```
+
+## Usage
+
+```typescript
+import { GraphComponent } from '@ngx-km/graph';
+
+@Component({
+  imports: [GraphComponent],
+  template: `
+    <ngx-graph
+      [nodes]="nodes"
+      [relationships]="relationships"
+      [nodeComponent]="MyNodeComponent">
+    </ngx-graph>
+  `
+})
+export class MyComponent {}
+```
+
+## Running unit tests
+
+```bash
+nx test ngx-graph
+```

package/fesm2022/ngx-km-graph.mjs

@@ -0,0 +1,564 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injector, viewChild, input, output, signal, computed, effect, Component } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+import { GridComponent } from '@ngx-km/grid';
+import { LayoutService } from '@ngx-km/layout';
+import { PathFindingService } from '@ngx-km/path-finding';
+
+/**
+ * Injection token for accessing node data in dynamically rendered node components.
+ * The data can be either a plain value or a Signal for reactive updates.
+ */
+const GRAPH_NODE_DATA = new InjectionToken('GRAPH_NODE_DATA');
+/**
+ * Injection token for accessing relationship data in dynamically rendered pill components.
+ * The data can be either a plain value or a Signal for reactive updates.
+ */
+const GRAPH_RELATIONSHIP_DATA = new InjectionToken('GRAPH_RELATIONSHIP_DATA');
+/**
+ * Default path configuration
+ */
+const DEFAULT_GRAPH_PATH_CONFIG = {
+    pathType: 'orthogonal',
+    strokeColor: '#6366f1',
+    strokeWidth: 2,
+    strokePattern: 'solid',
+    strokeOpacity: 1,
+    cornerRadius: 0,
+    arrowStyle: 'filled',
+    arrowSize: 10,
+    obstaclePadding: 20,
+    anchorSpacing: 15,
+    spreadAnchors: true,
+};
+/**
+ * Default layout configuration
+ */
+const DEFAULT_GRAPH_LAYOUT_CONFIG = {
+    algorithm: 'layered',
+    direction: 'DOWN',
+    nodeSpacing: 50,
+    layerSpacing: 100,
+    autoLayout: true,
+    preservePositions: true,
+    fitPadding: 40,
+};
+/**
+ * Default graph configuration
+ */
+const DEFAULT_GRAPH_CONFIG = {
+    grid: {
+        dimensionMode: 'full',
+        backgroundMode: 'dots',
+        cellSize: 20,
+        panEnabled: true,
+        zoomEnabled: true,
+        dragEnabled: true,
+    },
+    layout: DEFAULT_GRAPH_LAYOUT_CONFIG,
+    paths: DEFAULT_GRAPH_PATH_CONFIG,
+};
+
+class GraphComponent {
+    layoutService = inject(LayoutService);
+    pathFindingService = inject(PathFindingService);
+    injector = inject(Injector);
+    gridRef = viewChild('gridRef', ...(ngDevMode ? [{ debugName: "gridRef" }] : []));
+    // Inputs
+    nodes = input([], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+    relationships = input([], ...(ngDevMode ? [{ debugName: "relationships" }] : []));
+    config = input(DEFAULT_GRAPH_CONFIG, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    // Outputs
+    nodePositionChange = output();
+    viewportChange = output();
+    // Internal state - single source of truth for positions
+    nodePositions = signal(new Map(), ...(ngDevMode ? [{ debugName: "nodePositions" }] : []));
+    nodeDimensions = signal(new Map(), ...(ngDevMode ? [{ debugName: "nodeDimensions" }] : []));
+    viewport = signal({ x: 0, y: 0, zoom: 1 }, ...(ngDevMode ? [{ debugName: "viewport" }] : []));
+    calculatedPaths = signal([], ...(ngDevMode ? [{ debugName: "calculatedPaths" }] : []));
+    /** Whether initial layout has completed - used to prevent flash of unstyled nodes */
+    layoutReady = signal(false, ...(ngDevMode ? [{ debugName: "layoutReady" }] : []));
+    // Computed configs
+    gridConfig = computed(() => ({
+        dimensionMode: 'full',
+        backgroundMode: 'dots',
+        cellSize: 20,
+        panEnabled: true,
+        zoomEnabled: true,
+        dragEnabled: true,
+        ...this.config().grid,
+    }), ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    layoutConfig = computed(() => ({
+        ...DEFAULT_GRAPH_LAYOUT_CONFIG,
+        ...this.config().layout,
+    }), ...(ngDevMode ? [{ debugName: "layoutConfig" }] : []));
+    pathConfig = computed(() => ({
+        ...DEFAULT_GRAPH_PATH_CONFIG,
+        ...this.config().paths,
+    }), ...(ngDevMode ? [{ debugName: "pathConfig" }] : []));
+    /** Pill component to render at path midpoints */
+    pillComponent = computed(() => this.config().pillComponent, ...(ngDevMode ? [{ debugName: "pillComponent" }] : []));
+    // Grid elements - combines input nodes with their positions
+    gridElements = computed(() => {
+        const inputNodes = this.nodes();
+        const positions = this.nodePositions();
+        return inputNodes.map((node, index) => {
+            const pos = positions.get(node.id);
+            // Default grid position if not set
+            const cols = Math.ceil(Math.sqrt(inputNodes.length));
+            const defaultX = (index % cols) * 200;
+            const defaultY = Math.floor(index / cols) * 150;
+            return {
+                id: node.id,
+                component: node.component,
+                data: node.data,
+                x: pos?.x ?? node.x ?? defaultX,
+                y: pos?.y ?? node.y ?? defaultY,
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "gridElements" }] : []));
+    pathsTransform = computed(() => {
+        const vp = this.viewport();
+        return `translate(${vp.x}px, ${vp.y}px) scale(${vp.zoom})`;
+    }, ...(ngDevMode ? [{ debugName: "pathsTransform" }] : []));
+    constructor() {
+        // Run initial layout when nodes change
+        effect(() => {
+            const inputNodes = this.nodes();
+            const layoutCfg = this.layoutConfig();
+            if (inputNodes.length === 0) {
+                // No nodes - mark as ready immediately
+                this.layoutReady.set(true);
+                return;
+            }
+            if (!layoutCfg.autoLayout) {
+                // Auto-layout disabled - show nodes at their provided positions immediately
+                this.layoutReady.set(true);
+                return;
+            }
+            // Check if we have positions for all nodes
+            const positions = this.nodePositions();
+            const needsLayout = inputNodes.some(n => !positions.has(n.id));
+            if (needsLayout) {
+                // Reset layoutReady when new nodes need positioning
+                this.layoutReady.set(false);
+                this.runLayout();
+            }
+        });
+        // Recalculate paths when relationships or positions change
+        effect(() => {
+            const relationships = this.relationships();
+            const positions = this.nodePositions();
+            const dimensions = this.nodeDimensions();
+            if (relationships.length > 0 && positions.size > 0) {
+                this.calculatePaths();
+            }
+        });
+    }
+    // Event handlers
+    onViewportChange(viewport) {
+        this.viewport.set(viewport);
+        this.viewportChange.emit(viewport);
+    }
+    onElementsRendered(elements) {
+        const dims = new Map(this.nodeDimensions());
+        let changed = false;
+        elements.forEach(el => {
+            const existing = dims.get(el.id);
+            if (!existing || existing.width !== el.width || existing.height !== el.height) {
+                dims.set(el.id, { width: el.width, height: el.height });
+                changed = true;
+            }
+        });
+        if (changed) {
+            this.nodeDimensions.set(dims);
+            this.calculatePaths();
+        }
+    }
+    onElementPositionChange(change) {
+        // Update position
+        const positions = new Map(this.nodePositions());
+        positions.set(change.id, { x: change.x, y: change.y });
+        this.nodePositions.set(positions);
+        // Emit event
+        this.nodePositionChange.emit({
+            nodeId: change.id,
+            x: change.x,
+            y: change.y,
+            previousX: change.previousX,
+            previousY: change.previousY,
+        });
+        // Recalculate paths
+        this.calculatePaths();
+    }
+    // Public method to force re-layout
+    recalculateLayout() {
+        this.runLayout();
+    }
+    /**
+     * Fit all graph content to view
+     * Centers content in the viewport, optionally zooming out to fit everything
+     * @param fitZoom If true, zooms out if needed to fit all content (never zooms in beyond 1.0)
+     * @param padding Padding around content in pixels (default: 40)
+     */
+    fitToView(fitZoom = false, padding = 40) {
+        this.gridRef()?.fitToView(fitZoom, padding);
+    }
+    /**
+     * Check if a node is fully visible in the viewport
+     * @param nodeId The node ID to check
+     * @param padding Padding from viewport edges (default: 0)
+     * @returns true if node is fully visible, false otherwise
+     */
+    isNodeVisible(nodeId, padding = 0) {
+        return this.gridRef()?.isElementVisible(nodeId, padding) ?? false;
+    }
+    /**
+     * Center viewport on a specific node (no zoom change)
+     * @param nodeId The node ID to center on
+     */
+    centerOnNode(nodeId) {
+        this.gridRef()?.centerOnElement(nodeId);
+    }
+    /**
+     * Scroll node into view with minimal pan
+     * Only pans if node is not fully visible
+     * @param nodeId The node ID to scroll into view
+     * @param padding Padding from viewport edges (default: 40)
+     */
+    scrollToNode(nodeId, padding = 40) {
+        this.gridRef()?.scrollToElement(nodeId, padding);
+    }
+    // Private methods
+    async runLayout() {
+        const inputNodes = this.nodes();
+        const relationships = this.relationships();
+        const layoutCfg = this.layoutConfig();
+        const dimensions = this.nodeDimensions();
+        if (inputNodes.length === 0)
+            return;
+        const layoutNodes = inputNodes.map(node => {
+            const dim = dimensions.get(node.id);
+            return {
+                id: node.id,
+                width: dim?.width ?? 150,
+                height: dim?.height ?? 80,
+            };
+        });
+        const layoutEdges = relationships.map(rel => ({
+            id: rel.id,
+            sourceId: rel.sourceId,
+            targetId: rel.targetId,
+        }));
+        try {
+            const result = await this.layoutService.calculateLayout({
+                nodes: layoutNodes,
+                edges: layoutEdges,
+                options: {
+                    algorithm: layoutCfg.algorithm,
+                    direction: layoutCfg.direction,
+                    nodeSpacing: layoutCfg.nodeSpacing,
+                    layerSpacing: layoutCfg.layerSpacing,
+                },
+            });
+            // Update all positions from layout result
+            const positions = new Map();
+            result.nodes.forEach(n => {
+                positions.set(n.id, { x: n.x, y: n.y });
+            });
+            this.nodePositions.set(positions);
+            // Recalculate paths
+            this.calculatePaths();
+            // Fit to view and then show nodes (use requestAnimationFrame to ensure DOM is updated)
+            requestAnimationFrame(() => {
+                this.fitToView(true, layoutCfg.fitPadding ?? 40);
+                // Mark layout as ready after fit (shows nodes and paths)
+                this.layoutReady.set(true);
+            });
+        }
+        catch (error) {
+            console.error('Layout calculation failed:', error);
+            // Still mark as ready on error so user can see something
+            this.layoutReady.set(true);
+        }
+    }
+    calculatePaths() {
+        const inputNodes = this.nodes();
+        const relationships = this.relationships();
+        const positions = this.nodePositions();
+        const dimensions = this.nodeDimensions();
+        const pathCfg = this.pathConfig();
+        if (inputNodes.length === 0 || relationships.length === 0) {
+            this.calculatedPaths.set([]);
+            return;
+        }
+        const pfNodes = inputNodes.map(node => {
+            const pos = positions.get(node.id);
+            const dim = dimensions.get(node.id);
+            return {
+                id: node.id,
+                x: pos?.x ?? 0,
+                y: pos?.y ?? 0,
+                width: dim?.width ?? 150,
+                height: dim?.height ?? 80,
+            };
+        });
+        const pfRelationships = relationships.map(rel => ({
+            id: rel.id,
+            sourceId: rel.sourceId,
+            targetId: rel.targetId,
+            sourceAnchor: rel.sourceAnchorSide,
+            targetAnchor: rel.targetAnchorSide,
+        }));
+        const input = {
+            nodes: pfNodes,
+            relationships: pfRelationships,
+            options: {
+                pathType: pathCfg.pathType,
+                obstaclePadding: pathCfg.obstaclePadding,
+                anchorSpacing: pathCfg.anchorSpacing,
+                spreadAnchors: pathCfg.spreadAnchors,
+            },
+        };
+        const result = this.pathFindingService.calculatePaths(input);
+        this.calculatedPaths.set(result.paths);
+    }
+    // Path rendering helpers
+    getArrowPoints() {
+        const size = this.pathConfig().arrowSize;
+        return `0,0 ${size},${size / 2} 0,${size}`;
+    }
+    getStrokeDasharray() {
+        const pattern = this.pathConfig().strokePattern;
+        switch (pattern) {
+            case 'dashed': return '8,4';
+            case 'dotted': return '2,4';
+            default: return '';
+        }
+    }
+    getPathD(path) {
+        const waypoints = path.waypoints;
+        if (!waypoints || waypoints.length === 0)
+            return '';
+        const cfg = this.pathConfig();
+        if (cfg.pathType === 'bezier') {
+            return this.generateBezierPath(waypoints);
+        }
+        else if (cfg.pathType === 'straight') {
+            return this.generateStraightPath(waypoints);
+        }
+        else {
+            return this.generateOrthogonalPath(waypoints, cfg.cornerRadius);
+        }
+    }
+    generateOrthogonalPath(waypoints, cornerRadius) {
+        const points = waypoints.filter(w => !w.isControlPoint);
+        if (points.length === 0)
+            return '';
+        if (cornerRadius === 0 || points.length < 3) {
+            return points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
+        }
+        let path = `M ${points[0].x} ${points[0].y}`;
+        for (let i = 1; i < points.length - 1; i++) {
+            const prev = points[i - 1];
+            const curr = points[i];
+            const next = points[i + 1];
+            const dx1 = curr.x - prev.x;
+            const dy1 = curr.y - prev.y;
+            const dx2 = next.x - curr.x;
+            const dy2 = next.y - curr.y;
+            const dist1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+            const dist2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+            if (dist1 === 0 || dist2 === 0) {
+                path += ` L ${curr.x} ${curr.y}`;
+                continue;
+            }
+            const r = Math.min(cornerRadius, dist1 / 2, dist2 / 2);
+            const startX = curr.x - (dx1 / dist1) * r;
+            const startY = curr.y - (dy1 / dist1) * r;
+            const endX = curr.x + (dx2 / dist2) * r;
+            const endY = curr.y + (dy2 / dist2) * r;
+            path += ` L ${startX} ${startY}`;
+            path += ` Q ${curr.x} ${curr.y}, ${endX} ${endY}`;
+        }
+        const last = points[points.length - 1];
+        path += ` L ${last.x} ${last.y}`;
+        return path;
+    }
+    generateBezierPath(waypoints) {
+        if (waypoints.length < 2)
+            return '';
+        if (waypoints.length === 4) {
+            const [start, cp1, cp2, end] = waypoints;
+            return `M ${start.x} ${start.y} C ${cp1.x} ${cp1.y}, ${cp2.x} ${cp2.y}, ${end.x} ${end.y}`;
+        }
+        if (waypoints.length === 3) {
+            const [start, cp, end] = waypoints;
+            return `M ${start.x} ${start.y} Q ${cp.x} ${cp.y}, ${end.x} ${end.y}`;
+        }
+        return this.generateStraightPath(waypoints);
+    }
+    generateStraightPath(waypoints) {
+        if (waypoints.length < 2)
+            return '';
+        const start = waypoints[0];
+        const end = waypoints[waypoints.length - 1];
+        return `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
+    }
+    // Pill rendering helpers
+    /** Create an injector for a pill component, passing the relationship data */
+    createPillInjector(relationshipId) {
+        const relationship = this.relationships().find(r => r.id === relationshipId);
+        return Injector.create({
+            providers: [
+                { provide: GRAPH_RELATIONSHIP_DATA, useValue: relationship?.data },
+            ],
+            parent: this.injector,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: GraphComponent, isStandalone: true, selector: "ngx-graph", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, relationships: { classPropertyName: "relationships", publicName: "relationships", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodePositionChange: "nodePositionChange", viewportChange: "viewportChange" }, viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["gridRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="graph-wrapper" [class.layout-ready]="layoutReady()">
+      <ngx-grid
+        #gridRef
+        [config]="gridConfig()"
+        [elements]="gridElements()"
+        (viewportChange)="onViewportChange($event)"
+        (elementsRendered)="onElementsRendered($event)"
+        (elementPositionChange)="onElementPositionChange($event)"
+      />
+      <!-- SVG layer for paths -->
+      <svg
+        class="paths-layer"
+        xmlns="http://www.w3.org/2000/svg"
+        [style.transform]="pathsTransform()"
+      >
+        <defs>
+          @for (path of calculatedPaths(); track path.relationshipId) {
+            <marker
+              [attr.id]="'arrow-' + path.relationshipId"
+              [attr.markerWidth]="pathConfig().arrowSize"
+              [attr.markerHeight]="pathConfig().arrowSize"
+              [attr.refX]="pathConfig().arrowSize"
+              [attr.refY]="pathConfig().arrowSize / 2"
+              orient="auto-start-reverse"
+              markerUnits="userSpaceOnUse"
+            >
+              <polygon
+                [attr.points]="getArrowPoints()"
+                [attr.fill]="pathConfig().strokeColor"
+              />
+            </marker>
+          }
+        </defs>
+
+        @for (path of calculatedPaths(); track path.relationshipId) {
+          <path
+            [attr.d]="getPathD(path)"
+            fill="none"
+            [attr.stroke]="pathConfig().strokeColor"
+            [attr.stroke-width]="pathConfig().strokeWidth"
+            [attr.stroke-dasharray]="getStrokeDasharray()"
+            [attr.marker-end]="'url(#arrow-' + path.relationshipId + ')'"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        }
+      </svg>
+      <!-- Pills layer - rendered at path midpoints -->
+      @if (pillComponent()) {
+        <div class="pills-layer" [style.transform]="pathsTransform()">
+          @for (path of calculatedPaths(); track path.relationshipId) {
+            <div
+              class="pill-wrapper"
+              [style.left.px]="path.midpoint.x"
+              [style.top.px]="path.midpoint.y"
+            >
+              <ng-container
+                *ngComponentOutlet="pillComponent()!; injector: createPillInjector(path.relationshipId)"
+              />
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.graph-wrapper{position:relative;width:100%;height:100%}.graph-wrapper:not(.layout-ready) ::ng-deep .grid-viewport,.graph-wrapper:not(.layout-ready) .paths-layer,.graph-wrapper:not(.layout-ready) .pills-layer{opacity:0}.paths-layer,.pills-layer{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none;transform-origin:0 0}.pill-wrapper{position:absolute;transform:translate(-50%,-50%);pointer-events:auto}\n"], dependencies: [{ kind: "component", type: GridComponent, selector: "ngx-grid", inputs: ["config", "elements"], outputs: ["viewportChange", "elementsRendered", "elementPositionChange"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GraphComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-graph', standalone: true, imports: [GridComponent, NgComponentOutlet], template: `
+    <div class="graph-wrapper" [class.layout-ready]="layoutReady()">
+      <ngx-grid
+        #gridRef
+        [config]="gridConfig()"
+        [elements]="gridElements()"
+        (viewportChange)="onViewportChange($event)"
+        (elementsRendered)="onElementsRendered($event)"
+        (elementPositionChange)="onElementPositionChange($event)"
+      />
+      <!-- SVG layer for paths -->
+      <svg
+        class="paths-layer"
+        xmlns="http://www.w3.org/2000/svg"
+        [style.transform]="pathsTransform()"
+      >
+        <defs>
+          @for (path of calculatedPaths(); track path.relationshipId) {
+            <marker
+              [attr.id]="'arrow-' + path.relationshipId"
+              [attr.markerWidth]="pathConfig().arrowSize"
+              [attr.markerHeight]="pathConfig().arrowSize"
+              [attr.refX]="pathConfig().arrowSize"
+              [attr.refY]="pathConfig().arrowSize / 2"
+              orient="auto-start-reverse"
+              markerUnits="userSpaceOnUse"
+            >
+              <polygon
+                [attr.points]="getArrowPoints()"
+                [attr.fill]="pathConfig().strokeColor"
+              />
+            </marker>
+          }
+        </defs>
+
+        @for (path of calculatedPaths(); track path.relationshipId) {
+          <path
+            [attr.d]="getPathD(path)"
+            fill="none"
+            [attr.stroke]="pathConfig().strokeColor"
+            [attr.stroke-width]="pathConfig().strokeWidth"
+            [attr.stroke-dasharray]="getStrokeDasharray()"
+            [attr.marker-end]="'url(#arrow-' + path.relationshipId + ')'"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        }
+      </svg>
+      <!-- Pills layer - rendered at path midpoints -->
+      @if (pillComponent()) {
+        <div class="pills-layer" [style.transform]="pathsTransform()">
+          @for (path of calculatedPaths(); track path.relationshipId) {
+            <div
+              class="pill-wrapper"
+              [style.left.px]="path.midpoint.x"
+              [style.top.px]="path.midpoint.y"
+            >
+              <ng-container
+                *ngComponentOutlet="pillComponent()!; injector: createPillInjector(path.relationshipId)"
+              />
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block;width:100%;height:100%}.graph-wrapper{position:relative;width:100%;height:100%}.graph-wrapper:not(.layout-ready) ::ng-deep .grid-viewport,.graph-wrapper:not(.layout-ready) .paths-layer,.graph-wrapper:not(.layout-ready) .pills-layer{opacity:0}.paths-layer,.pills-layer{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none;transform-origin:0 0}.pill-wrapper{position:absolute;transform:translate(-50%,-50%);pointer-events:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { gridRef: [{ type: i0.ViewChild, args: ['gridRef', { isSignal: true }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], relationships: [{ type: i0.Input, args: [{ isSignal: true, alias: "relationships", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], nodePositionChange: [{ type: i0.Output, args: ["nodePositionChange"] }], viewportChange: [{ type: i0.Output, args: ["viewportChange"] }] } });
+
+// Models - Values
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_GRAPH_CONFIG, DEFAULT_GRAPH_LAYOUT_CONFIG, DEFAULT_GRAPH_PATH_CONFIG, GRAPH_NODE_DATA, GRAPH_RELATIONSHIP_DATA, GraphComponent };
+//# sourceMappingURL=ngx-km-graph.mjs.map

package/fesm2022/ngx-km-graph.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-km-graph.mjs","sources":["../../../../libs/ngx-km-graph/src/lib/models/graph.models.ts","../../../../libs/ngx-km-graph/src/lib/components/graph.component.ts","../../../../libs/ngx-km-graph/src/index.ts","../../../../libs/ngx-km-graph/src/ngx-km-graph.ts"],"sourcesContent":["import { Type, InjectionToken, Signal } from '@angular/core';\nimport type { GridConfig } from '@ngx-km/grid';\nimport type { LayoutAlgorithm, LayoutDirection } from '@ngx-km/layout';\nimport type { PathType } from '@ngx-km/path-finding';\nimport type { StrokePattern, ArrowStyle, ArrowPosition } from '@ngx-km/path-drawing';\n\n/**\n * Injection token for accessing node data in dynamically rendered node components.\n * The data can be either a plain value or a Signal for reactive updates.\n */\nexport const GRAPH_NODE_DATA = new InjectionToken<unknown>('GRAPH_NODE_DATA');\n\n/**\n * Injection token for accessing relationship data in dynamically rendered pill components.\n * The data can be either a plain value or a Signal for reactive updates.\n */\nexport const GRAPH_RELATIONSHIP_DATA = new InjectionToken<unknown>('GRAPH_RELATIONSHIP_DATA');\n\n/**\n * Type alias for data that can be either a plain value or a Signal.\n * Use Signal<T> when you need the component to reactively update based on data changes.\n */\nexport type ReactiveData<T> = T | Signal<T>;\n\n// ============================================================================\n// Node Definitions\n// ============================================================================\n\n/**\n * Definition for a node in the graph\n * @template T Type of the data passed to the node component\n */\nexport interface GraphNode<T = unknown> {\n  /** Unique identifier for this node */\n  id: string;\n  /** Angular component class to render for this node */\n  component: Type<unknown>;\n  /**\n   * Data to pass to the node component via GRAPH_NODE_DATA injection token.\n   * Can be a plain value or a Signal for reactive updates.\n   * When using Signal<T>, the component can reactively respond to data changes.\n   */\n  data?: ReactiveData<T>;\n  /** Optional initial X position (used when preservePositions is true) */\n  x?: number;\n  /** Optional initial Y position (used when preservePositions is true) */\n  y?: number;\n}\n\n/**\n * Internal node representation with resolved position\n */\nexport interface GraphNodeInternal<T = unknown> extends GraphNode<T> {\n  /** Resolved X position in world space */\n  x: number;\n  /** Resolved Y position in world space */\n  y: number;\n  /** Rendered width (tracked after render) */\n  width?: number;\n  /** Rendered height (tracked after render) */\n  height?: number;\n}\n\n// ============================================================================\n// Relationship Definitions\n// ============================================================================\n\n/**\n * Type of relationship (affects path drawing)\n * - 'one-way': Arrow on target end only\n * - 'two-way': Arrows on both ends\n */\nexport type RelationshipType = 'one-way' | 'two-way';\n\n/**\n * Definition for a relationship (edge) between nodes\n * @template T Type of the data passed to the pill component\n */\nexport interface GraphRelationship<T = unknown> {\n  /** Unique identifier for this relationship */\n  id: string;\n  /** ID of the source node */\n  sourceId: string;\n  /** ID of the target node */\n  targetId: string;\n  /** Type of relationship (default: 'one-way') */\n  type?: RelationshipType;\n  /**\n   * Data to pass to the pill component via GRAPH_RELATIONSHIP_DATA injection token.\n   * Can be a plain value or a Signal for reactive updates.\n   * When using Signal<T>, the component can reactively respond to data changes.\n   */\n  data?: ReactiveData<T>;\n  /** Optional: Force specific source anchor side */\n  sourceAnchorSide?: 'top' | 'right' | 'bottom' | 'left';\n  /** Optional: Force specific target anchor side */\n  targetAnchorSide?: 'top' | 'right' | 'bottom' | 'left';\n}\n\n// ============================================================================\n// Path Configuration\n// ============================================================================\n\n/**\n * Configuration for path rendering\n */\nexport interface GraphPathConfig {\n  /** Path routing type (default: 'orthogonal') */\n  pathType?: PathType;\n  /** Stroke color for paths (default: '#6366f1') */\n  strokeColor?: string;\n  /** Stroke width in pixels (default: 2) */\n  strokeWidth?: number;\n  /** Stroke pattern (default: 'solid') */\n  strokePattern?: StrokePattern;\n  /** Stroke opacity 0-1 (default: 1) */\n  strokeOpacity?: number;\n  /** Corner radius for orthogonal paths (default: 0) */\n  cornerRadius?: number;\n  /** Arrow head style (default: 'filled') */\n  arrowStyle?: ArrowStyle;\n  /** Arrow head size in pixels (default: 10) */\n  arrowSize?: number;\n  /** Padding around nodes for obstacle avoidance (default: 20) */\n  obstaclePadding?: number;\n  /** Spacing between connection points on same side (default: 15) */\n  anchorSpacing?: number;\n  /** Whether to spread multiple anchors on same side (default: true) */\n  spreadAnchors?: boolean;\n}\n\n/**\n * Default path configuration\n */\nexport const DEFAULT_GRAPH_PATH_CONFIG: Required<GraphPathConfig> = {\n  pathType: 'orthogonal',\n  strokeColor: '#6366f1',\n  strokeWidth: 2,\n  strokePattern: 'solid',\n  strokeOpacity: 1,\n  cornerRadius: 0,\n  arrowStyle: 'filled',\n  arrowSize: 10,\n  obstaclePadding: 20,\n  anchorSpacing: 15,\n  spreadAnchors: true,\n};\n\n// ============================================================================\n// Layout Configuration\n// ============================================================================\n\n/**\n * Configuration for automatic layout\n */\nexport interface GraphLayoutConfig {\n  /** Layout algorithm to use (default: 'layered') */\n  algorithm?: LayoutAlgorithm;\n  /** Layout direction (default: 'DOWN') */\n  direction?: LayoutDirection;\n  /** Spacing between nodes in pixels (default: 50) */\n  nodeSpacing?: number;\n  /** Spacing between layers in pixels (default: 100) */\n  layerSpacing?: number;\n  /** Whether to run layout automatically on init (default: true) */\n  autoLayout?: boolean;\n  /** Whether to preserve manually moved node positions on data update (default: true) */\n  preservePositions?: boolean;\n  /** Padding around content when fitting to view after layout (default: 40) */\n  fitPadding?: number;\n}\n\n/**\n * Default layout configuration\n */\nexport const DEFAULT_GRAPH_LAYOUT_CONFIG: Required<GraphLayoutConfig> = {\n  algorithm: 'layered',\n  direction: 'DOWN',\n  nodeSpacing: 50,\n  layerSpacing: 100,\n  autoLayout: true,\n  preservePositions: true,\n  fitPadding: 40,\n};\n\n// ============================================================================\n// Main Graph Configuration\n// ============================================================================\n\n/**\n * Main configuration for the graph component\n * Combines grid, layout, and path configurations\n */\nexport interface GraphConfig {\n  /** Grid configuration (pan, zoom, background, etc.) */\n  grid?: Partial<GridConfig>;\n  /** Layout configuration (algorithm, spacing, etc.) */\n  layout?: GraphLayoutConfig;\n  /** Path rendering configuration (colors, arrows, etc.) */\n  paths?: GraphPathConfig;\n  /** Component to render at path midpoints (optional) */\n  pillComponent?: Type<unknown>;\n}\n\n/**\n * Default graph configuration\n */\nexport const DEFAULT_GRAPH_CONFIG: GraphConfig = {\n  grid: {\n    dimensionMode: 'full',\n    backgroundMode: 'dots',\n    cellSize: 20,\n    panEnabled: true,\n    zoomEnabled: true,\n    dragEnabled: true,\n  },\n  layout: DEFAULT_GRAPH_LAYOUT_CONFIG,\n  paths: DEFAULT_GRAPH_PATH_CONFIG,\n};\n\n// ============================================================================\n// Events\n// ============================================================================\n\n/**\n * Event emitted when a node is selected\n */\nexport interface NodeSelectEvent<T = unknown> {\n  /** The selected node */\n  node: GraphNode<T>;\n}\n\n/**\n * Event emitted when a node position changes\n */\nexport interface NodePositionChangeEvent {\n  /** Node ID */\n  nodeId: string;\n  /** New X position */\n  x: number;\n  /** New Y position */\n  y: number;\n  /** Previous X position */\n  previousX: number;\n  /** Previous Y position */\n  previousY: number;\n}\n\n/**\n * Event emitted when a relationship is selected\n */\nexport interface RelationshipSelectEvent<T = unknown> {\n  /** The selected relationship */\n  relationship: GraphRelationship<T>;\n}\n","import {\n  Component,\n  input,\n  output,\n  computed,\n  signal,\n  effect,\n  inject,\n  Injector,\n  viewChild,\n} from '@angular/core';\nimport { NgComponentOutlet } from '@angular/common';\nimport {\n  GridComponent,\n  GridConfig,\n  GridElement,\n  RenderedElement,\n  ElementPositionChange,\n  ViewportState,\n} from '@ngx-km/grid';\nimport { LayoutService, LayoutNode, LayoutEdge } from '@ngx-km/layout';\nimport {\n  PathFindingService,\n  PathNode,\n  PathRelationship,\n  CalculatedPath,\n  PathFindingInput,\n} from '@ngx-km/path-finding';\nimport {\n  GraphConfig,\n  GraphNode,\n  GraphRelationship,\n  NodePositionChangeEvent,\n  DEFAULT_GRAPH_CONFIG,\n  DEFAULT_GRAPH_LAYOUT_CONFIG,\n  DEFAULT_GRAPH_PATH_CONFIG,\n  GRAPH_RELATIONSHIP_DATA,\n} from '../models/graph.models';\n\n/** Internal node with position */\ninterface InternalNode<T> {\n  id: string;\n  component: GraphNode<T>['component'];\n  data: T | undefined;\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\n@Component({\n  selector: 'ngx-graph',\n  standalone: true,\n  imports: [GridComponent, NgComponentOutlet],\n  template: `\n    <div class=\"graph-wrapper\" [class.layout-ready]=\"layoutReady()\">\n      <ngx-grid\n        #gridRef\n        [config]=\"gridConfig()\"\n        [elements]=\"gridElements()\"\n        (viewportChange)=\"onViewportChange($event)\"\n        (elementsRendered)=\"onElementsRendered($event)\"\n        (elementPositionChange)=\"onElementPositionChange($event)\"\n      />\n      <!-- SVG layer for paths -->\n      <svg\n        class=\"paths-layer\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [style.transform]=\"pathsTransform()\"\n      >\n        <defs>\n          @for (path of calculatedPaths(); track path.relationshipId) {\n            <marker\n              [attr.id]=\"'arrow-' + path.relationshipId\"\n              [attr.markerWidth]=\"pathConfig().arrowSize\"\n              [attr.markerHeight]=\"pathConfig().arrowSize\"\n              [attr.refX]=\"pathConfig().arrowSize\"\n              [attr.refY]=\"pathConfig().arrowSize / 2\"\n              orient=\"auto-start-reverse\"\n              markerUnits=\"userSpaceOnUse\"\n            >\n              <polygon\n                [attr.points]=\"getArrowPoints()\"\n                [attr.fill]=\"pathConfig().strokeColor\"\n              />\n            </marker>\n          }\n        </defs>\n\n        @for (path of calculatedPaths(); track path.relationshipId) {\n          <path\n            [attr.d]=\"getPathD(path)\"\n            fill=\"none\"\n            [attr.stroke]=\"pathConfig().strokeColor\"\n            [attr.stroke-width]=\"pathConfig().strokeWidth\"\n            [attr.stroke-dasharray]=\"getStrokeDasharray()\"\n            [attr.marker-end]=\"'url(#arrow-' + path.relationshipId + ')'\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        }\n      </svg>\n      <!-- Pills layer - rendered at path midpoints -->\n      @if (pillComponent()) {\n        <div class=\"pills-layer\" [style.transform]=\"pathsTransform()\">\n          @for (path of calculatedPaths(); track path.relationshipId) {\n            <div\n              class=\"pill-wrapper\"\n              [style.left.px]=\"path.midpoint.x\"\n              [style.top.px]=\"path.midpoint.y\"\n            >\n              <ng-container\n                *ngComponentOutlet=\"pillComponent()!; injector: createPillInjector(path.relationshipId)\"\n              />\n            </div>\n          }\n        </div>\n      }\n    </div>\n  `,\n  styles: [`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n    .graph-wrapper {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n    /* Hide nodes and paths until layout is ready to prevent flash */\n    .graph-wrapper:not(.layout-ready) ::ng-deep .grid-viewport,\n    .graph-wrapper:not(.layout-ready) .paths-layer,\n    .graph-wrapper:not(.layout-ready) .pills-layer {\n      opacity: 0;\n    }\n    .paths-layer {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      overflow: visible;\n      pointer-events: none;\n      transform-origin: 0 0;\n    }\n    .pills-layer {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      overflow: visible;\n      pointer-events: none;\n      transform-origin: 0 0;\n    }\n    .pill-wrapper {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      pointer-events: auto;\n    }\n  `],\n})\nexport class GraphComponent<TNode = unknown, TRelationship = unknown> {\n  private readonly layoutService = inject(LayoutService);\n  private readonly pathFindingService = inject(PathFindingService);\n  private readonly injector = inject(Injector);\n  private readonly gridRef = viewChild<GridComponent>('gridRef');\n\n  // Inputs\n  nodes = input<GraphNode<TNode>[]>([]);\n  relationships = input<GraphRelationship<TRelationship>[]>([]);\n  config = input<GraphConfig>(DEFAULT_GRAPH_CONFIG);\n\n  // Outputs\n  nodePositionChange = output<NodePositionChangeEvent>();\n  viewportChange = output<ViewportState>();\n\n  // Internal state - single source of truth for positions\n  private nodePositions = signal<Map<string, { x: number; y: number }>>(new Map());\n  private nodeDimensions = signal<Map<string, { width: number; height: number }>>(new Map());\n  private viewport = signal<ViewportState>({ x: 0, y: 0, zoom: 1 });\n  calculatedPaths = signal<CalculatedPath[]>([]);\n\n  /** Whether initial layout has completed - used to prevent flash of unstyled nodes */\n  layoutReady = signal<boolean>(false);\n\n  // Computed configs\n  gridConfig = computed((): GridConfig => ({\n    dimensionMode: 'full',\n    backgroundMode: 'dots',\n    cellSize: 20,\n    panEnabled: true,\n    zoomEnabled: true,\n    dragEnabled: true,\n    ...this.config().grid,\n  }));\n\n  layoutConfig = computed(() => ({\n    ...DEFAULT_GRAPH_LAYOUT_CONFIG,\n    ...this.config().layout,\n  }));\n\n  pathConfig = computed(() => ({\n    ...DEFAULT_GRAPH_PATH_CONFIG,\n    ...this.config().paths,\n  }));\n\n  /** Pill component to render at path midpoints */\n  pillComponent = computed(() => this.config().pillComponent);\n\n  // Grid elements - combines input nodes with their positions\n  gridElements = computed((): GridElement<TNode>[] => {\n    const inputNodes = this.nodes();\n    const positions = this.nodePositions();\n\n    return inputNodes.map((node, index) => {\n      const pos = positions.get(node.id);\n      // Default grid position if not set\n      const cols = Math.ceil(Math.sqrt(inputNodes.length));\n      const defaultX = (index % cols) * 200;\n      const defaultY = Math.floor(index / cols) * 150;\n\n      return {\n        id: node.id,\n        component: node.component,\n        data: node.data,\n        x: pos?.x ?? node.x ?? defaultX,\n        y: pos?.y ?? node.y ?? defaultY,\n      };\n    });\n  });\n\n  pathsTransform = computed(() => {\n    const vp = this.viewport();\n    return `translate(${vp.x}px, ${vp.y}px) scale(${vp.zoom})`;\n  });\n\n  constructor() {\n    // Run initial layout when nodes change\n    effect(() => {\n      const inputNodes = this.nodes();\n      const layoutCfg = this.layoutConfig();\n\n      if (inputNodes.length === 0) {\n        // No nodes - mark as ready immediately\n        this.layoutReady.set(true);\n        return;\n      }\n\n      if (!layoutCfg.autoLayout) {\n        // Auto-layout disabled - show nodes at their provided positions immediately\n        this.layoutReady.set(true);\n        return;\n      }\n\n      // Check if we have positions for all nodes\n      const positions = this.nodePositions();\n      const needsLayout = inputNodes.some(n => !positions.has(n.id));\n\n      if (needsLayout) {\n        // Reset layoutReady when new nodes need positioning\n        this.layoutReady.set(false);\n        this.runLayout();\n      }\n    });\n\n    // Recalculate paths when relationships or positions change\n    effect(() => {\n      const relationships = this.relationships();\n      const positions = this.nodePositions();\n      const dimensions = this.nodeDimensions();\n\n      if (relationships.length > 0 && positions.size > 0) {\n        this.calculatePaths();\n      }\n    });\n  }\n\n  // Event handlers\n  onViewportChange(viewport: ViewportState): void {\n    this.viewport.set(viewport);\n    this.viewportChange.emit(viewport);\n  }\n\n  onElementsRendered(elements: RenderedElement[]): void {\n    const dims = new Map(this.nodeDimensions());\n    let changed = false;\n\n    elements.forEach(el => {\n      const existing = dims.get(el.id);\n      if (!existing || existing.width !== el.width || existing.height !== el.height) {\n        dims.set(el.id, { width: el.width, height: el.height });\n        changed = true;\n      }\n    });\n\n    if (changed) {\n      this.nodeDimensions.set(dims);\n      this.calculatePaths();\n    }\n  }\n\n  onElementPositionChange(change: ElementPositionChange): void {\n    // Update position\n    const positions = new Map(this.nodePositions());\n    positions.set(change.id, { x: change.x, y: change.y });\n    this.nodePositions.set(positions);\n\n    // Emit event\n    this.nodePositionChange.emit({\n      nodeId: change.id,\n      x: change.x,\n      y: change.y,\n      previousX: change.previousX,\n      previousY: change.previousY,\n    });\n\n    // Recalculate paths\n    this.calculatePaths();\n  }\n\n  // Public method to force re-layout\n  recalculateLayout(): void {\n    this.runLayout();\n  }\n\n  /**\n   * Fit all graph content to view\n   * Centers content in the viewport, optionally zooming out to fit everything\n   * @param fitZoom If true, zooms out if needed to fit all content (never zooms in beyond 1.0)\n   * @param padding Padding around content in pixels (default: 40)\n   */\n  fitToView(fitZoom = false, padding = 40): void {\n    this.gridRef()?.fitToView(fitZoom, padding);\n  }\n\n  /**\n   * Check if a node is fully visible in the viewport\n   * @param nodeId The node ID to check\n   * @param padding Padding from viewport edges (default: 0)\n   * @returns true if node is fully visible, false otherwise\n   */\n  isNodeVisible(nodeId: string, padding = 0): boolean {\n    return this.gridRef()?.isElementVisible(nodeId, padding) ?? false;\n  }\n\n  /**\n   * Center viewport on a specific node (no zoom change)\n   * @param nodeId The node ID to center on\n   */\n  centerOnNode(nodeId: string): void {\n    this.gridRef()?.centerOnElement(nodeId);\n  }\n\n  /**\n   * Scroll node into view with minimal pan\n   * Only pans if node is not fully visible\n   * @param nodeId The node ID to scroll into view\n   * @param padding Padding from viewport edges (default: 40)\n   */\n  scrollToNode(nodeId: string, padding = 40): void {\n    this.gridRef()?.scrollToElement(nodeId, padding);\n  }\n\n  // Private methods\n  private async runLayout(): Promise<void> {\n    const inputNodes = this.nodes();\n    const relationships = this.relationships();\n    const layoutCfg = this.layoutConfig();\n    const dimensions = this.nodeDimensions();\n\n    if (inputNodes.length === 0) return;\n\n    const layoutNodes: LayoutNode[] = inputNodes.map(node => {\n      const dim = dimensions.get(node.id);\n      return {\n        id: node.id,\n        width: dim?.width ?? 150,\n        height: dim?.height ?? 80,\n      };\n    });\n\n    const layoutEdges: LayoutEdge[] = relationships.map(rel => ({\n      id: rel.id,\n      sourceId: rel.sourceId,\n      targetId: rel.targetId,\n    }));\n\n    try {\n      const result = await this.layoutService.calculateLayout({\n        nodes: layoutNodes,\n        edges: layoutEdges,\n        options: {\n          algorithm: layoutCfg.algorithm,\n          direction: layoutCfg.direction,\n          nodeSpacing: layoutCfg.nodeSpacing,\n          layerSpacing: layoutCfg.layerSpacing,\n        },\n      });\n\n      // Update all positions from layout result\n      const positions = new Map<string, { x: number; y: number }>();\n      result.nodes.forEach(n => {\n        positions.set(n.id, { x: n.x, y: n.y });\n      });\n      this.nodePositions.set(positions);\n\n      // Recalculate paths\n      this.calculatePaths();\n\n      // Fit to view and then show nodes (use requestAnimationFrame to ensure DOM is updated)\n      requestAnimationFrame(() => {\n        this.fitToView(true, layoutCfg.fitPadding ?? 40);\n        // Mark layout as ready after fit (shows nodes and paths)\n        this.layoutReady.set(true);\n      });\n    } catch (error) {\n      console.error('Layout calculation failed:', error);\n      // Still mark as ready on error so user can see something\n      this.layoutReady.set(true);\n    }\n  }\n\n  private calculatePaths(): void {\n    const inputNodes = this.nodes();\n    const relationships = this.relationships();\n    const positions = this.nodePositions();\n    const dimensions = this.nodeDimensions();\n    const pathCfg = this.pathConfig();\n\n    if (inputNodes.length === 0 || relationships.length === 0) {\n      this.calculatedPaths.set([]);\n      return;\n    }\n\n    const pfNodes: PathNode[] = inputNodes.map(node => {\n      const pos = positions.get(node.id);\n      const dim = dimensions.get(node.id);\n      return {\n        id: node.id,\n        x: pos?.x ?? 0,\n        y: pos?.y ?? 0,\n        width: dim?.width ?? 150,\n        height: dim?.height ?? 80,\n      };\n    });\n\n    const pfRelationships: PathRelationship[] = relationships.map(rel => ({\n      id: rel.id,\n      sourceId: rel.sourceId,\n      targetId: rel.targetId,\n      sourceAnchor: rel.sourceAnchorSide,\n      targetAnchor: rel.targetAnchorSide,\n    }));\n\n    const input: PathFindingInput = {\n      nodes: pfNodes,\n      relationships: pfRelationships,\n      options: {\n        pathType: pathCfg.pathType,\n        obstaclePadding: pathCfg.obstaclePadding,\n        anchorSpacing: pathCfg.anchorSpacing,\n        spreadAnchors: pathCfg.spreadAnchors,\n      },\n    };\n\n    const result = this.pathFindingService.calculatePaths(input);\n    this.calculatedPaths.set(result.paths);\n  }\n\n  // Path rendering helpers\n  getArrowPoints(): string {\n    const size = this.pathConfig().arrowSize;\n    return `0,0 ${size},${size / 2} 0,${size}`;\n  }\n\n  getStrokeDasharray(): string {\n    const pattern = this.pathConfig().strokePattern;\n    switch (pattern) {\n      case 'dashed': return '8,4';\n      case 'dotted': return '2,4';\n      default: return '';\n    }\n  }\n\n  getPathD(path: CalculatedPath): string {\n    const waypoints = path.waypoints;\n    if (!waypoints || waypoints.length === 0) return '';\n\n    const cfg = this.pathConfig();\n\n    if (cfg.pathType === 'bezier') {\n      return this.generateBezierPath(waypoints);\n    } else if (cfg.pathType === 'straight') {\n      return this.generateStraightPath(waypoints);\n    } else {\n      return this.generateOrthogonalPath(waypoints, cfg.cornerRadius);\n    }\n  }\n\n  private generateOrthogonalPath(\n    waypoints: { x: number; y: number; isControlPoint?: boolean }[],\n    cornerRadius: number\n  ): string {\n    const points = waypoints.filter(w => !w.isControlPoint);\n    if (points.length === 0) return '';\n\n    if (cornerRadius === 0 || points.length < 3) {\n      return points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');\n    }\n\n    let path = `M ${points[0].x} ${points[0].y}`;\n\n    for (let i = 1; i < points.length - 1; i++) {\n      const prev = points[i - 1];\n      const curr = points[i];\n      const next = points[i + 1];\n\n      const dx1 = curr.x - prev.x;\n      const dy1 = curr.y - prev.y;\n      const dx2 = next.x - curr.x;\n      const dy2 = next.y - curr.y;\n\n      const dist1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);\n      const dist2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);\n\n      if (dist1 === 0 || dist2 === 0) {\n        path += ` L ${curr.x} ${curr.y}`;\n        continue;\n      }\n\n      const r = Math.min(cornerRadius, dist1 / 2, dist2 / 2);\n\n      const startX = curr.x - (dx1 / dist1) * r;\n      const startY = curr.y - (dy1 / dist1) * r;\n      const endX = curr.x + (dx2 / dist2) * r;\n      const endY = curr.y + (dy2 / dist2) * r;\n\n      path += ` L ${startX} ${startY}`;\n      path += ` Q ${curr.x} ${curr.y}, ${endX} ${endY}`;\n    }\n\n    const last = points[points.length - 1];\n    path += ` L ${last.x} ${last.y}`;\n\n    return path;\n  }\n\n  private generateBezierPath(waypoints: { x: number; y: number }[]): string {\n    if (waypoints.length < 2) return '';\n    if (waypoints.length === 4) {\n      const [start, cp1, cp2, end] = waypoints;\n      return `M ${start.x} ${start.y} C ${cp1.x} ${cp1.y}, ${cp2.x} ${cp2.y}, ${end.x} ${end.y}`;\n    }\n    if (waypoints.length === 3) {\n      const [start, cp, end] = waypoints;\n      return `M ${start.x} ${start.y} Q ${cp.x} ${cp.y}, ${end.x} ${end.y}`;\n    }\n    return this.generateStraightPath(waypoints);\n  }\n\n  private generateStraightPath(waypoints: { x: number; y: number }[]): string {\n    if (waypoints.length < 2) return '';\n    const start = waypoints[0];\n    const end = waypoints[waypoints.length - 1];\n    return `M ${start.x} ${start.y} L ${end.x} ${end.y}`;\n  }\n\n  // Pill rendering helpers\n\n  /** Create an injector for a pill component, passing the relationship data */\n  createPillInjector(relationshipId: string): Injector {\n    const relationship = this.relationships().find(r => r.id === relationshipId);\n    return Injector.create({\n      providers: [\n        { provide: GRAPH_RELATIONSHIP_DATA, useValue: relationship?.data },\n      ],\n      parent: this.injector,\n    });\n  }\n}\n","// Models - Types\nexport type {\n  GraphNode,\n  GraphNodeInternal,\n  GraphRelationship,\n  RelationshipType,\n  ReactiveData,\n  GraphPathConfig,\n  GraphLayoutConfig,\n  GraphConfig,\n  NodeSelectEvent,\n  NodePositionChangeEvent,\n  RelationshipSelectEvent,\n} from './lib/models/graph.models';\n\n// Models - Values\nexport {\n  GRAPH_NODE_DATA,\n  GRAPH_RELATIONSHIP_DATA,\n  DEFAULT_GRAPH_PATH_CONFIG,\n  DEFAULT_GRAPH_LAYOUT_CONFIG,\n  DEFAULT_GRAPH_CONFIG,\n} from './lib/models/graph.models';\n\n// Components\nexport { GraphComponent } from './lib/components/graph.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAMA;;;AAGG;MACU,eAAe,GAAG,IAAI,cAAc,CAAU,iBAAiB;AAE5E;;;AAGG;MACU,uBAAuB,GAAG,IAAI,cAAc,CAAU,yBAAyB;AAmH5F;;AAEG;AACI,MAAM,yBAAyB,GAA8B;AAClE,IAAA,QAAQ,EAAE,YAAY;AACtB,IAAA,WAAW,EAAE,SAAS;AACtB,IAAA,WAAW,EAAE,CAAC;AACd,IAAA,aAAa,EAAE,OAAO;AACtB,IAAA,aAAa,EAAE,CAAC;AAChB,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,SAAS,EAAE,EAAE;AACb,IAAA,eAAe,EAAE,EAAE;AACnB,IAAA,aAAa,EAAE,EAAE;AACjB,IAAA,aAAa,EAAE,IAAI;;AA2BrB;;AAEG;AACI,MAAM,2BAA2B,GAAgC;AACtE,IAAA,SAAS,EAAE,SAAS;AACpB,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,YAAY,EAAE,GAAG;AACjB,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,iBAAiB,EAAE,IAAI;AACvB,IAAA,UAAU,EAAE,EAAE;;AAsBhB;;AAEG;AACI,MAAM,oBAAoB,GAAgB;AAC/C,IAAA,IAAI,EAAE;AACJ,QAAA,aAAa,EAAE,MAAM;AACrB,QAAA,cAAc,EAAE,MAAM;AACtB,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,UAAU,EAAE,IAAI;AAChB,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,WAAW,EAAE,IAAI;AAClB,KAAA;AACD,IAAA,MAAM,EAAE,2BAA2B;AACnC,IAAA,KAAK,EAAE,yBAAyB;;;MCrDrB,cAAc,CAAA;AACR,IAAA,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;AACrC,IAAA,kBAAkB,GAAG,MAAM,CAAC,kBAAkB,CAAC;AAC/C,IAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC3B,IAAA,OAAO,GAAG,SAAS,CAAgB,SAAS,mDAAC;;AAG9D,IAAA,KAAK,GAAG,KAAK,CAAqB,EAAE,iDAAC;AACrC,IAAA,aAAa,GAAG,KAAK,CAAqC,EAAE,yDAAC;AAC7D,IAAA,MAAM,GAAG,KAAK,CAAc,oBAAoB,kDAAC;;IAGjD,kBAAkB,GAAG,MAAM,EAA2B;IACtD,cAAc,GAAG,MAAM,EAAiB;;AAGhC,IAAA,aAAa,GAAG,MAAM,CAAwC,IAAI,GAAG,EAAE,yDAAC;AACxE,IAAA,cAAc,GAAG,MAAM,CAAiD,IAAI,GAAG,EAAE,0DAAC;AAClF,IAAA,QAAQ,GAAG,MAAM,CAAgB,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,oDAAC;AACjE,IAAA,eAAe,GAAG,MAAM,CAAmB,EAAE,2DAAC;;AAG9C,IAAA,WAAW,GAAG,MAAM,CAAU,KAAK,uDAAC;;AAGpC,IAAA,UAAU,GAAG,QAAQ,CAAC,OAAmB;AACvC,QAAA,aAAa,EAAE,MAAM;AACrB,QAAA,cAAc,EAAE,MAAM;AACtB,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,UAAU,EAAE,IAAI;AAChB,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI;AACtB,KAAA,CAAC,sDAAC;AAEH,IAAA,YAAY,GAAG,QAAQ,CAAC,OAAO;AAC7B,QAAA,GAAG,2BAA2B;AAC9B,QAAA,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM;AACxB,KAAA,CAAC,wDAAC;AAEH,IAAA,UAAU,GAAG,QAAQ,CAAC,OAAO;AAC3B,QAAA,GAAG,yBAAyB;AAC5B,QAAA,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK;AACvB,KAAA,CAAC,sDAAC;;AAGH,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,aAAa,yDAAC;;AAG3D,IAAA,YAAY,GAAG,QAAQ,CAAC,MAA2B;AACjD,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE;AAC/B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE;QAEtC,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;YACpC,MAAM,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;;AAElC,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;YACpD,MAAM,QAAQ,GAAG,CAAC,KAAK,GAAG,IAAI,IAAI,GAAG;AACrC,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG;YAE/C,OAAO;gBACL,EAAE,EAAE,IAAI,CAAC,EAAE;gBACX,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,QAAQ;gBAC/B,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,QAAQ;aAChC;AACH,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC,wDAAC;AAEF,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AAC7B,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC1B,QAAA,OAAO,CAAA,UAAA,EAAa,EAAE,CAAC,CAAC,CAAA,IAAA,EAAO,EAAE,CAAC,CAAC,CAAA,UAAA,EAAa,EAAE,CAAC,IAAI,GAAG;AAC5D,IAAA,CAAC,0DAAC;AAEF,IAAA,WAAA,GAAA;;QAEE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE;AAC/B,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE;AAErC,YAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;;AAE3B,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;gBAC1B;YACF;AAEA,YAAA,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE;;AAEzB,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;gBAC1B;YACF;;AAGA,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE;YACtC,MAAM,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YAE9D,IAAI,WAAW,EAAE;;AAEf,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;gBAC3B,IAAI,CAAC,SAAS,EAAE;YAClB;AACF,QAAA,CAAC,CAAC;;QAGF,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AAC1C,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE;AACtC,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE;AAExC,YAAA,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,CAAC,IAAI,GAAG,CAAC,EAAE;gBAClD,IAAI,CAAC,cAAc,EAAE;YACvB;AACF,QAAA,CAAC,CAAC;IACJ;;AAGA,IAAA,gBAAgB,CAAC,QAAuB,EAAA;AACtC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;AAC3B,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;IACpC;AAEA,IAAA,kBAAkB,CAAC,QAA2B,EAAA;QAC5C,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;QAC3C,IAAI,OAAO,GAAG,KAAK;AAEnB,QAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAG;YACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;AAChC,YAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,EAAE,CAAC,KAAK,IAAI,QAAQ,CAAC,MAAM,KAAK,EAAE,CAAC,MAAM,EAAE;gBAC7E,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,EAAE,CAAC;gBACvD,OAAO,GAAG,IAAI;YAChB;AACF,QAAA,CAAC,CAAC;QAEF,IAAI,OAAO,EAAE;AACX,YAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;YAC7B,IAAI,CAAC,cAAc,EAAE;QACvB;IACF;AAEA,IAAA,uBAAuB,CAAC,MAA6B,EAAA;;QAEnD,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC/C,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC;AACtD,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,SAAS,CAAC;;AAGjC,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;YAC3B,MAAM,EAAE,MAAM,CAAC,EAAE;YACjB,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,SAAS,EAAE,MAAM,CAAC,SAAS;YAC3B,SAAS,EAAE,MAAM,CAAC,SAAS;AAC5B,SAAA,CAAC;;QAGF,IAAI,CAAC,cAAc,EAAE;IACvB;;IAGA,iBAAiB,GAAA;QACf,IAAI,CAAC,SAAS,EAAE;IAClB;AAEA;;;;;AAKG;AACH,IAAA,SAAS,CAAC,OAAO,GAAG,KAAK,EAAE,OAAO,GAAG,EAAE,EAAA;QACrC,IAAI,CAAC,OAAO,EAAE,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC;IAC7C;AAEA;;;;;AAKG;AACH,IAAA,aAAa,CAAC,MAAc,EAAE,OAAO,GAAG,CAAC,EAAA;AACvC,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,KAAK;IACnE;AAEA;;;AAGG;AACH,IAAA,YAAY,CAAC,MAAc,EAAA;QACzB,IAAI,CAAC,OAAO,EAAE,EAAE,eAAe,CAAC,MAAM,CAAC;IACzC;AAEA;;;;;AAKG;AACH,IAAA,YAAY,CAAC,MAAc,EAAE,OAAO,GAAG,EAAE,EAAA;QACvC,IAAI,CAAC,OAAO,EAAE,EAAE,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC;IAClD;;AAGQ,IAAA,MAAM,SAAS,GAAA;AACrB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE;AAC/B,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AAC1C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE;AACrC,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE;AAExC,QAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;YAAE;QAE7B,MAAM,WAAW,GAAiB,UAAU,CAAC,GAAG,CAAC,IAAI,IAAG;YACtD,MAAM,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;YACnC,OAAO;gBACL,EAAE,EAAE,IAAI,CAAC,EAAE;AACX,gBAAA,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,GAAG;AACxB,gBAAA,MAAM,EAAE,GAAG,EAAE,MAAM,IAAI,EAAE;aAC1B;AACH,QAAA,CAAC,CAAC;QAEF,MAAM,WAAW,GAAiB,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK;YAC1D,EAAE,EAAE,GAAG,CAAC,EAAE;YACV,QAAQ,EAAE,GAAG,CAAC,QAAQ;YACtB,QAAQ,EAAE,GAAG,CAAC,QAAQ;AACvB,SAAA,CAAC,CAAC;AAEH,QAAA,IAAI;YACF,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC;AACtD,gBAAA,KAAK,EAAE,WAAW;AAClB,gBAAA,KAAK,EAAE,WAAW;AAClB,gBAAA,OAAO,EAAE;oBACP,SAAS,EAAE,SAAS,CAAC,SAAS;oBAC9B,SAAS,EAAE,SAAS,CAAC,SAAS;oBAC9B,WAAW,EAAE,SAAS,CAAC,WAAW;oBAClC,YAAY,EAAE,SAAS,CAAC,YAAY;AACrC,iBAAA;AACF,aAAA,CAAC;;AAGF,YAAA,MAAM,SAAS,GAAG,IAAI,GAAG,EAAoC;AAC7D,YAAA,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAG;gBACvB,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACzC,YAAA,CAAC,CAAC;AACF,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,SAAS,CAAC;;YAGjC,IAAI,CAAC,cAAc,EAAE;;YAGrB,qBAAqB,CAAC,MAAK;gBACzB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,UAAU,IAAI,EAAE,CAAC;;AAEhD,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;AAC5B,YAAA,CAAC,CAAC;QACJ;QAAE,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,CAAC,KAAK,CAAC,4BAA4B,EAAE,KAAK,CAAC;;AAElD,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;QAC5B;IACF;IAEQ,cAAc,GAAA;AACpB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE;AAC/B,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AAC1C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE;AACtC,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE;AACxC,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE;AAEjC,QAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;AACzD,YAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B;QACF;QAEA,MAAM,OAAO,GAAe,UAAU,CAAC,GAAG,CAAC,IAAI,IAAG;YAChD,MAAM,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;YAClC,MAAM,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;YACnC,OAAO;gBACL,EAAE,EAAE,IAAI,CAAC,EAAE;AACX,gBAAA,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC;AACd,gBAAA,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC;AACd,gBAAA,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,GAAG;AACxB,gBAAA,MAAM,EAAE,GAAG,EAAE,MAAM,IAAI,EAAE;aAC1B;AACH,QAAA,CAAC,CAAC;QAEF,MAAM,eAAe,GAAuB,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK;YACpE,EAAE,EAAE,GAAG,CAAC,EAAE;YACV,QAAQ,EAAE,GAAG,CAAC,QAAQ;YACtB,QAAQ,EAAE,GAAG,CAAC,QAAQ;YACtB,YAAY,EAAE,GAAG,CAAC,gBAAgB;YAClC,YAAY,EAAE,GAAG,CAAC,gBAAgB;AACnC,SAAA,CAAC,CAAC;AAEH,QAAA,MAAM,KAAK,GAAqB;AAC9B,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,aAAa,EAAE,eAAe;AAC9B,YAAA,OAAO,EAAE;gBACP,QAAQ,EAAE,OAAO,CAAC,QAAQ;gBAC1B,eAAe,EAAE,OAAO,CAAC,eAAe;gBACxC,aAAa,EAAE,OAAO,CAAC,aAAa;gBACpC,aAAa,EAAE,OAAO,CAAC,aAAa;AACrC,aAAA;SACF;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,KAAK,CAAC;QAC5D,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;IACxC;;IAGA,cAAc,GAAA;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,SAAS;QACxC,OAAO,CAAA,IAAA,EAAO,IAAI,CAAA,CAAA,EAAI,IAAI,GAAG,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE;IAC5C;IAEA,kBAAkB,GAAA;QAChB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,aAAa;QAC/C,QAAQ,OAAO;AACb,YAAA,KAAK,QAAQ,EAAE,OAAO,KAAK;AAC3B,YAAA,KAAK,QAAQ,EAAE,OAAO,KAAK;AAC3B,YAAA,SAAS,OAAO,EAAE;;IAEtB;AAEA,IAAA,QAAQ,CAAC,IAAoB,EAAA;AAC3B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS;AAChC,QAAA,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,EAAE;AAEnD,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,EAAE;AAE7B,QAAA,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC7B,YAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC;QAC3C;AAAO,aAAA,IAAI,GAAG,CAAC,QAAQ,KAAK,UAAU,EAAE;AACtC,YAAA,OAAO,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC;QAC7C;aAAO;YACL,OAAO,IAAI,CAAC,sBAAsB,CAAC,SAAS,EAAE,GAAG,CAAC,YAAY,CAAC;QACjE;IACF;IAEQ,sBAAsB,CAC5B,SAA+D,EAC/D,YAAoB,EAAA;AAEpB,QAAA,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC;AACvD,QAAA,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,EAAE;QAElC,IAAI,YAAY,KAAK,CAAC,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;AAC3C,YAAA,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAA,EAAG,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,CAAA,CAAA,EAAI,CAAC,CAAC,CAAC,CAAA,CAAA,EAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QAC/E;AAEA,QAAA,IAAI,IAAI,GAAG,CAAA,EAAA,EAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA,EAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;AAE5C,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;YAC1C,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAC1B,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC;YACtB,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;YAE1B,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAC3B,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAC3B,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAC3B,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;AAE3B,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAC9C,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;YAE9C,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE;gBAC9B,IAAI,IAAI,CAAA,GAAA,EAAM,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAA,CAAE;gBAChC;YACF;AAEA,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC;AAEtD,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,KAAK,IAAI,CAAC;AACzC,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,KAAK,IAAI,CAAC;AACzC,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,KAAK,IAAI,CAAC;AACvC,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,KAAK,IAAI,CAAC;AAEvC,YAAA,IAAI,IAAI,CAAA,GAAA,EAAM,MAAM,CAAA,CAAA,EAAI,MAAM,EAAE;AAChC,YAAA,IAAI,IAAI,CAAA,GAAA,EAAM,IAAI,CAAC,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,CAAC,CAAA,EAAA,EAAK,IAAI,CAAA,CAAA,EAAI,IAAI,EAAE;QACnD;QAEA,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QACtC,IAAI,IAAI,CAAA,GAAA,EAAM,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAA,CAAE;AAEhC,QAAA,OAAO,IAAI;IACb;AAEQ,IAAA,kBAAkB,CAAC,SAAqC,EAAA;AAC9D,QAAA,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC;AAAE,YAAA,OAAO,EAAE;AACnC,QAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;YAC1B,MAAM,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,SAAS;AACxC,YAAA,OAAO,CAAA,EAAA,EAAK,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAA,GAAA,EAAM,GAAG,CAAC,CAAC,CAAA,CAAA,EAAI,GAAG,CAAC,CAAC,CAAA,EAAA,EAAK,GAAG,CAAC,CAAC,CAAA,CAAA,EAAI,GAAG,CAAC,CAAC,CAAA,EAAA,EAAK,GAAG,CAAC,CAAC,CAAA,CAAA,EAAI,GAAG,CAAC,CAAC,EAAE;QAC5F;AACA,QAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;YAC1B,MAAM,CAAC,KAAK,EAAE,EAAE,EAAE,GAAG,CAAC,GAAG,SAAS;YAClC,OAAO,CAAA,EAAA,EAAK,KAAK,CAAC,CAAC,CAAA,CAAA,EAAI,KAAK,CAAC,CAAC,CAAA,GAAA,EAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA,EAAA,EAAK,GAAG,CAAC,CAAC,CAAA,CAAA,EAAI,GAAG,CAAC,CAAC,CAAA,CAAE;QACvE;AACA,QAAA,OAAO,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC;IAC7C;AAEQ,IAAA,oBAAoB,CAAC,SAAqC,EAAA;AAChE,QAAA,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC;AAAE,YAAA,OAAO,EAAE;AACnC,QAAA,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC;QAC1B,MAAM,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;AAC3C,QAAA,OAAO,KAAK,KAAK,CAAC,CAAC,CAAA,CAAA,EAAI,KAAK,CAAC,CAAC,CAAA,GAAA,EAAM,GAAG,CAAC,CAAC,CAAA,CAAA,EAAI,GAAG,CAAC,CAAC,EAAE;IACtD;;;AAKA,IAAA,kBAAkB,CAAC,cAAsB,EAAA;AACvC,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,cAAc,CAAC;QAC5E,OAAO,QAAQ,CAAC,MAAM,CAAC;AACrB,YAAA,SAAS,EAAE;gBACT,EAAE,OAAO,EAAE,uBAAuB,EAAE,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE;AACnE,aAAA;YACD,MAAM,EAAE,IAAI,CAAC,QAAQ;AACtB,SAAA,CAAC;IACJ;wGAjaW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA9Gf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiET,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ueAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAlES,aAAa,+JAAE,iBAAiB,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,mBAAA,EAAA,yBAAA,EAAA,2BAAA,EAAA,sCAAA,EAAA,0BAAA,EAAA,2BAAA,EAAA,kCAAA,CAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FA+G/B,cAAc,EAAA,UAAA,EAAA,CAAA;kBAlH1B,SAAS;+BACE,WAAW,EAAA,UAAA,EACT,IAAI,EAAA,OAAA,EACP,CAAC,aAAa,EAAE,iBAAiB,CAAC,EAAA,QAAA,EACjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiET,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,ueAAA,CAAA,EAAA;+FAiDmD,SAAS,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,eAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,QAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,kBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;ACzJ/D;;ACfA;;AAEG;;;;"}

package/index.d.ts

@@ -0,0 +1,280 @@
+import * as _angular_core from '@angular/core';
+import { Type, Signal, InjectionToken, Injector } from '@angular/core';
+import { GridConfig, ViewportState, GridElement, RenderedElement, ElementPositionChange } from '@ngx-km/grid';
+import * as _ngx_km_layout from '@ngx-km/layout';
+import { LayoutAlgorithm, LayoutDirection } from '@ngx-km/layout';
+import * as _ngx_km_path_finding from '@ngx-km/path-finding';
+import { PathType, CalculatedPath } from '@ngx-km/path-finding';
+import * as _ngx_km_path_drawing from '@ngx-km/path-drawing';
+import { StrokePattern, ArrowStyle } from '@ngx-km/path-drawing';
+
+/**
+ * Injection token for accessing node data in dynamically rendered node components.
+ * The data can be either a plain value or a Signal for reactive updates.
+ */
+declare const GRAPH_NODE_DATA: InjectionToken<unknown>;
+/**
+ * Injection token for accessing relationship data in dynamically rendered pill components.
+ * The data can be either a plain value or a Signal for reactive updates.
+ */
+declare const GRAPH_RELATIONSHIP_DATA: InjectionToken<unknown>;
+/**
+ * Type alias for data that can be either a plain value or a Signal.
+ * Use Signal<T> when you need the component to reactively update based on data changes.
+ */
+type ReactiveData<T> = T | Signal<T>;
+/**
+ * Definition for a node in the graph
+ * @template T Type of the data passed to the node component
+ */
+interface GraphNode<T = unknown> {
+    /** Unique identifier for this node */
+    id: string;
+    /** Angular component class to render for this node */
+    component: Type<unknown>;
+    /**
+     * Data to pass to the node component via GRAPH_NODE_DATA injection token.
+     * Can be a plain value or a Signal for reactive updates.
+     * When using Signal<T>, the component can reactively respond to data changes.
+     */
+    data?: ReactiveData<T>;
+    /** Optional initial X position (used when preservePositions is true) */
+    x?: number;
+    /** Optional initial Y position (used when preservePositions is true) */
+    y?: number;
+}
+/**
+ * Internal node representation with resolved position
+ */
+interface GraphNodeInternal<T = unknown> extends GraphNode<T> {
+    /** Resolved X position in world space */
+    x: number;
+    /** Resolved Y position in world space */
+    y: number;
+    /** Rendered width (tracked after render) */
+    width?: number;
+    /** Rendered height (tracked after render) */
+    height?: number;
+}
+/**
+ * Type of relationship (affects path drawing)
+ * - 'one-way': Arrow on target end only
+ * - 'two-way': Arrows on both ends
+ */
+type RelationshipType = 'one-way' | 'two-way';
+/**
+ * Definition for a relationship (edge) between nodes
+ * @template T Type of the data passed to the pill component
+ */
+interface GraphRelationship<T = unknown> {
+    /** Unique identifier for this relationship */
+    id: string;
+    /** ID of the source node */
+    sourceId: string;
+    /** ID of the target node */
+    targetId: string;
+    /** Type of relationship (default: 'one-way') */
+    type?: RelationshipType;
+    /**
+     * Data to pass to the pill component via GRAPH_RELATIONSHIP_DATA injection token.
+     * Can be a plain value or a Signal for reactive updates.
+     * When using Signal<T>, the component can reactively respond to data changes.
+     */
+    data?: ReactiveData<T>;
+    /** Optional: Force specific source anchor side */
+    sourceAnchorSide?: 'top' | 'right' | 'bottom' | 'left';
+    /** Optional: Force specific target anchor side */
+    targetAnchorSide?: 'top' | 'right' | 'bottom' | 'left';
+}
+/**
+ * Configuration for path rendering
+ */
+interface GraphPathConfig {
+    /** Path routing type (default: 'orthogonal') */
+    pathType?: PathType;
+    /** Stroke color for paths (default: '#6366f1') */
+    strokeColor?: string;
+    /** Stroke width in pixels (default: 2) */
+    strokeWidth?: number;
+    /** Stroke pattern (default: 'solid') */
+    strokePattern?: StrokePattern;
+    /** Stroke opacity 0-1 (default: 1) */
+    strokeOpacity?: number;
+    /** Corner radius for orthogonal paths (default: 0) */
+    cornerRadius?: number;
+    /** Arrow head style (default: 'filled') */
+    arrowStyle?: ArrowStyle;
+    /** Arrow head size in pixels (default: 10) */
+    arrowSize?: number;
+    /** Padding around nodes for obstacle avoidance (default: 20) */
+    obstaclePadding?: number;
+    /** Spacing between connection points on same side (default: 15) */
+    anchorSpacing?: number;
+    /** Whether to spread multiple anchors on same side (default: true) */
+    spreadAnchors?: boolean;
+}
+/**
+ * Default path configuration
+ */
+declare const DEFAULT_GRAPH_PATH_CONFIG: Required<GraphPathConfig>;
+/**
+ * Configuration for automatic layout
+ */
+interface GraphLayoutConfig {
+    /** Layout algorithm to use (default: 'layered') */
+    algorithm?: LayoutAlgorithm;
+    /** Layout direction (default: 'DOWN') */
+    direction?: LayoutDirection;
+    /** Spacing between nodes in pixels (default: 50) */
+    nodeSpacing?: number;
+    /** Spacing between layers in pixels (default: 100) */
+    layerSpacing?: number;
+    /** Whether to run layout automatically on init (default: true) */
+    autoLayout?: boolean;
+    /** Whether to preserve manually moved node positions on data update (default: true) */
+    preservePositions?: boolean;
+    /** Padding around content when fitting to view after layout (default: 40) */
+    fitPadding?: number;
+}
+/**
+ * Default layout configuration
+ */
+declare const DEFAULT_GRAPH_LAYOUT_CONFIG: Required<GraphLayoutConfig>;
+/**
+ * Main configuration for the graph component
+ * Combines grid, layout, and path configurations
+ */
+interface GraphConfig {
+    /** Grid configuration (pan, zoom, background, etc.) */
+    grid?: Partial<GridConfig>;
+    /** Layout configuration (algorithm, spacing, etc.) */
+    layout?: GraphLayoutConfig;
+    /** Path rendering configuration (colors, arrows, etc.) */
+    paths?: GraphPathConfig;
+    /** Component to render at path midpoints (optional) */
+    pillComponent?: Type<unknown>;
+}
+/**
+ * Default graph configuration
+ */
+declare const DEFAULT_GRAPH_CONFIG: GraphConfig;
+/**
+ * Event emitted when a node is selected
+ */
+interface NodeSelectEvent<T = unknown> {
+    /** The selected node */
+    node: GraphNode<T>;
+}
+/**
+ * Event emitted when a node position changes
+ */
+interface NodePositionChangeEvent {
+    /** Node ID */
+    nodeId: string;
+    /** New X position */
+    x: number;
+    /** New Y position */
+    y: number;
+    /** Previous X position */
+    previousX: number;
+    /** Previous Y position */
+    previousY: number;
+}
+/**
+ * Event emitted when a relationship is selected
+ */
+interface RelationshipSelectEvent<T = unknown> {
+    /** The selected relationship */
+    relationship: GraphRelationship<T>;
+}
+
+declare class GraphComponent<TNode = unknown, TRelationship = unknown> {
+    private readonly layoutService;
+    private readonly pathFindingService;
+    private readonly injector;
+    private readonly gridRef;
+    nodes: _angular_core.InputSignal<GraphNode<TNode>[]>;
+    relationships: _angular_core.InputSignal<GraphRelationship<TRelationship>[]>;
+    config: _angular_core.InputSignal<GraphConfig>;
+    nodePositionChange: _angular_core.OutputEmitterRef<NodePositionChangeEvent>;
+    viewportChange: _angular_core.OutputEmitterRef<ViewportState>;
+    private nodePositions;
+    private nodeDimensions;
+    private viewport;
+    calculatedPaths: _angular_core.WritableSignal<CalculatedPath[]>;
+    /** Whether initial layout has completed - used to prevent flash of unstyled nodes */
+    layoutReady: _angular_core.WritableSignal<boolean>;
+    gridConfig: _angular_core.Signal<GridConfig>;
+    layoutConfig: _angular_core.Signal<{
+        algorithm: _ngx_km_layout.LayoutAlgorithm;
+        direction: _ngx_km_layout.LayoutDirection;
+        nodeSpacing: number;
+        layerSpacing: number;
+        autoLayout: boolean;
+        preservePositions: boolean;
+        fitPadding: number;
+    }>;
+    pathConfig: _angular_core.Signal<{
+        pathType: _ngx_km_path_finding.PathType;
+        strokeColor: string;
+        strokeWidth: number;
+        strokePattern: _ngx_km_path_drawing.StrokePattern;
+        strokeOpacity: number;
+        cornerRadius: number;
+        arrowStyle: _ngx_km_path_drawing.ArrowStyle;
+        arrowSize: number;
+        obstaclePadding: number;
+        anchorSpacing: number;
+        spreadAnchors: boolean;
+    }>;
+    /** Pill component to render at path midpoints */
+    pillComponent: _angular_core.Signal<_angular_core.Type<unknown> | undefined>;
+    gridElements: _angular_core.Signal<GridElement<TNode>[]>;
+    pathsTransform: _angular_core.Signal<string>;
+    constructor();
+    onViewportChange(viewport: ViewportState): void;
+    onElementsRendered(elements: RenderedElement[]): void;
+    onElementPositionChange(change: ElementPositionChange): void;
+    recalculateLayout(): void;
+    /**
+     * Fit all graph content to view
+     * Centers content in the viewport, optionally zooming out to fit everything
+     * @param fitZoom If true, zooms out if needed to fit all content (never zooms in beyond 1.0)
+     * @param padding Padding around content in pixels (default: 40)
+     */
+    fitToView(fitZoom?: boolean, padding?: number): void;
+    /**
+     * Check if a node is fully visible in the viewport
+     * @param nodeId The node ID to check
+     * @param padding Padding from viewport edges (default: 0)
+     * @returns true if node is fully visible, false otherwise
+     */
+    isNodeVisible(nodeId: string, padding?: number): boolean;
+    /**
+     * Center viewport on a specific node (no zoom change)
+     * @param nodeId The node ID to center on
+     */
+    centerOnNode(nodeId: string): void;
+    /**
+     * Scroll node into view with minimal pan
+     * Only pans if node is not fully visible
+     * @param nodeId The node ID to scroll into view
+     * @param padding Padding from viewport edges (default: 40)
+     */
+    scrollToNode(nodeId: string, padding?: number): void;
+    private runLayout;
+    private calculatePaths;
+    getArrowPoints(): string;
+    getStrokeDasharray(): string;
+    getPathD(path: CalculatedPath): string;
+    private generateOrthogonalPath;
+    private generateBezierPath;
+    private generateStraightPath;
+    /** Create an injector for a pill component, passing the relationship data */
+    createPillInjector(relationshipId: string): Injector;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GraphComponent<any, any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GraphComponent<any, any>, "ngx-graph", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "relationships": { "alias": "relationships"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; }, { "nodePositionChange": "nodePositionChange"; "viewportChange": "viewportChange"; }, never, never, true, never>;
+}
+
+export { DEFAULT_GRAPH_CONFIG, DEFAULT_GRAPH_LAYOUT_CONFIG, DEFAULT_GRAPH_PATH_CONFIG, GRAPH_NODE_DATA, GRAPH_RELATIONSHIP_DATA, GraphComponent };
+export type { GraphConfig, GraphLayoutConfig, GraphNode, GraphNodeInternal, GraphPathConfig, GraphRelationship, NodePositionChangeEvent, NodeSelectEvent, ReactiveData, RelationshipSelectEvent, RelationshipType };

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@ngx-km/graph",
+  "version": "0.0.1",
+  "dependencies": {
+    "@ngx-km/grid": "^0.0.1",
+    "@ngx-km/layout": "^0.0.1",
+    "@ngx-km/path-finding": "^0.0.1",
+    "@ngx-km/path-drawing": "^0.0.1",
+    "tslib": "^2.3.0"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ngx-km-graph.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/ngx-km-graph.mjs"
+    }
+  }
+}