@mp70/react-networks 0.1.0-alpha → 0.1.4-alpha

package/dist/index.d.ts

@@ -1,150 +1,5 @@
 import React$1 from 'react';
-import { NodeProps, EdgeProps } from 'reactflow';
-
-interface NetBoxDevice {
-    id: number;
-    name: string;
-    device_type: {
-        id: number;
-        model: string;
-        manufacturer: {
-            name: string;
-        };
-    };
-    device_role: {
-        name: string;
-        color: string;
-    };
-    site: {
-        name: string;
-    };
-    rack: {
-        id: number;
-        name: string;
-    } | null;
-    position: number | null;
-    face: 'front' | 'rear' | null;
-    status: {
-        label: string;
-        value: string;
-        color: string;
-    };
-    primary_ip4?: {
-        address: string;
-    };
-    primary_ip6?: {
-        address: string;
-    };
-    interfaces: NetBoxInterface[];
-}
-interface NetBoxInterface {
-    id: number;
-    name: string;
-    type: {
-        label: string;
-        value: string;
-    };
-    enabled: boolean;
-    mac_address: string | null;
-    mtu: number | null;
-    connected_endpoint_type: string | null;
-    connected_endpoint: {
-        device: {
-            name: string;
-        };
-        name: string;
-    } | null;
-    cable: {
-        id: number;
-        label: string;
-        type: string;
-        color: string;
-    } | null;
-}
-interface NetBoxRack {
-    id: number;
-    name: string;
-    site: {
-        name: string;
-    };
-    group: {
-        name: string;
-    } | null;
-    tenant: {
-        name: string;
-    } | null;
-    role: {
-        name: string;
-        color: string;
-    } | null;
-    status: {
-        label: string;
-        value: string;
-        color: string;
-    };
-    facility_id: string | null;
-    serial: string | null;
-    asset_tag: string | null;
-    type: {
-        label: string;
-        value: string;
-    };
-    width: {
-        label: string;
-        value: number;
-    };
-    u_height: number;
-    desc_units: boolean;
-    outer_width: number | null;
-    outer_depth: number | null;
-    weight: number | null;
-    max_weight: number | null;
-    weight_unit: string;
-    mounting_depth: number | null;
-    devices: NetBoxDevice[];
-}
-interface NetBoxCable {
-    id: number;
-    label: string;
-    type: {
-        label: string;
-        value: string;
-    };
-    status: {
-        label: string;
-        value: string;
-        color: string;
-    };
-    color: string;
-    length: number | null;
-    length_unit: string;
-    termination_a_type: string;
-    termination_a: {
-        device: {
-            name: string;
-        };
-        name: string;
-    };
-    termination_b_type: string;
-    termination_b: {
-        device: {
-            name: string;
-        };
-        name: string;
-    };
-}
-interface NetBoxConnection {
-    id: string;
-    source: {
-        device: string;
-        interface: string;
-    };
-    target: {
-        device: string;
-        interface: string;
-    };
-    cable: NetBoxCable;
-}
+import { NodeProps, EdgeProps, Edge, Connection } from 'reactflow';
 
 /**
  * Rack device width configuration
@@ -200,6 +55,11 @@ type DeviceView = 'front' | 'rear';
  * @public
  */
 type PowerSide = 'left' | 'right';
+/**
+ * U numbering direction for racks
+ * @public
+ */
+type UNumberingDirection = 'bottom-up' | 'top-down';
 /**
  * Network node data structure
  * @public
@@ -254,6 +114,10 @@ interface NetworkNode {
         heightCm?: number;
         /** Number of AC power ports */
         powerPorts?: number;
+        /** U numbering direction for rack nodes */
+        uNumberingDirection?: UNumberingDirection;
+        /** Custom header text for rack nodes */
+        customHeaderText?: string;
         /** Additional custom properties */
         [key: string]: any;
     };
@@ -315,6 +179,10 @@ interface RackConfig {
     };
     /** Rack height in U units */
     units: number;
+    /** U numbering direction (default: 'bottom-up') */
+    uNumberingDirection?: UNumberingDirection;
+    /** Custom header text for rack */
+    customHeaderText?: string;
     /** Devices mounted in the rack */
     devices: RackDevice[];
 }
@@ -374,7 +242,6 @@ interface FiberCable {
         to: string;
     };
 }
-
 /**
  * Network diagram component props
  * @public
@@ -396,8 +263,8 @@ interface NetworkDiagramProps {
     store?: any;
     /** Enable debug mode */
     debug?: boolean;
-    /** Callback when a node is clicked */
-    onNodeClick?: (node: NetworkNode) => void;
+    /** Callback when a node is clicked or selection changes (null when deselected) */
+    onNodeClick?: (node: NetworkNode | null) => void;
     /** Callback when an edge is clicked */
     onEdgeClick?: (edge: NetworkEdge) => void;
     /** Callback when device view changes */
@@ -410,23 +277,26 @@ interface NetworkDiagramProps {
     style?: React.CSSProperties;
     /** If true, vertically align rack bottoms to the same baseline */
     alignRacksToBottom?: boolean;
-}
-/**
- * NetBox integration props
- * @public
- */
-interface NetBoxNetworkDiagramProps extends NetworkDiagramProps {
-    /** NetBox data for integration */
-    netboxData?: {
-        /** NetBox racks */
-        racks: NetBoxRack[];
-        /** NetBox devices */
-        devices: NetBoxDevice[];
-        /** NetBox cables */
-        cables: NetBoxCable[];
-    };
-    /** Callback when NetBox data is updated */
-    onNetBoxUpdate?: (data: any) => void;
+    /** Color mode for the diagram */
+    colorMode?: 'light' | 'dark' | 'system';
+    /** Callback when React Flow instance is initialized */
+    onInit?: (instance: any) => void;
+    /** Callback to get React Flow methods for save/restore */
+    onFlowMethods?: (methods: {
+        toObject: () => any;
+        setViewport: (viewport: any) => void;
+        setNodes: (nodes: any[]) => void;
+        setEdges: (edges: any[]) => void;
+        toImage: (options?: any) => Promise<string>;
+    }) => void;
+    /** Show download button */
+    showDownloadButton?: boolean;
+    /** Download button position */
+    downloadButtonPosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    /** Custom download button text */
+    downloadButtonText?: string;
+    /** Download button styling options */
+    downloadButtonStyle?: React.CSSProperties;
 }
 
 declare const NetworkDiagram: React$1.FC<NetworkDiagramProps>;
@@ -434,6 +304,7 @@ declare const NetworkDiagram: React$1.FC<NetworkDiagramProps>;
 interface RackNodeProps extends NodeProps<NetworkNode['data']> {
     onViewChange?: (nodeId: string, view: 'front' | 'rear') => void;
     onRackFaceChange?: (rackId: string, face: 'front' | 'rear') => void;
+    isDragOver?: boolean;
 }
 declare const RackNode: React$1.FC<RackNodeProps>;
 
@@ -447,35 +318,111 @@ declare const DeviceNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
 declare const VerticalPDU: React$1.FC<NodeProps<NetworkNode['data']>>;
 
+interface InventoryRackDTO {
+    id: string | number;
+    name: string;
+    status?: {
+        value?: string;
+    } | string;
+    u_height?: number;
+    units?: number;
+    facility_id?: string | number;
+    serial?: string;
+    asset_tag?: string;
+    site?: {
+        name?: string;
+    } | string;
+    role?: {
+        name?: string;
+    } | string;
+    tenant?: {
+        name?: string;
+    } | string;
+}
+interface InventoryDeviceDTO {
+    id: string | number;
+    name: string;
+    status?: {
+        value?: string;
+    } | string;
+    device_type?: {
+        u_height?: number;
+        model?: string;
+        manufacturer?: {
+            name?: string;
+        };
+    };
+    model?: string;
+    manufacturer?: string;
+    device_role?: {
+        name?: string;
+    } | string;
+    u_height?: number;
+    position?: number;
+    face?: 'front' | 'rear';
+    rack?: {
+        id?: string | number;
+        name?: string;
+    } | string | number;
+    primary_ip4?: {
+        address?: string;
+    } | string;
+    primary_ip6?: {
+        address?: string;
+    } | string;
+    site?: {
+        name?: string;
+    } | string;
+}
+interface InventoryCableDTO {
+    id: string | number;
+    type?: {
+        label?: string;
+    };
+    bandwidth?: string;
+    length?: number;
+    color?: string;
+    status?: {
+        value?: string;
+    } | string;
+    termination_a?: {
+        device?: {
+            id?: string | number;
+        } | string | number;
+        name?: string;
+    } | string;
+    termination_b?: {
+        device?: {
+            id?: string | number;
+        } | string | number;
+        name?: string;
+    } | string;
+}
 /**
- * Convert NetBox rack data to NetworkNode
+ * Convert inventory rack data to NetworkNode
  */
-declare const netboxRackToNetworkNode: (rack: NetBoxRack) => NetworkNode;
+declare const inventoryRackToNetworkNode: (rack: InventoryRackDTO) => NetworkNode;
 /**
- * Convert NetBox device data to NetworkNode
+ * Convert inventory device data to NetworkNode
  */
-declare const netboxDeviceToNetworkNode: (device: NetBoxDevice) => NetworkNode;
+declare const inventoryDeviceToNetworkNode: (device: InventoryDeviceDTO) => NetworkNode;
 /**
- * Convert NetBox cable data to NetworkEdge
+ * Convert inventory cable data to NetworkEdge
  */
-declare const netboxCableToNetworkEdge: (cable: NetBoxCable) => NetworkEdge;
+declare const inventoryCableToNetworkEdge: (cable: InventoryCableDTO) => NetworkEdge;
 /**
- * Convert NetBox data to network diagram format
+ * Convert inventory data to network diagram format
  */
-declare const netboxToNetworkDiagram: (data: {
-    racks: NetBoxRack[];
-    devices: NetBoxDevice[];
-    cables: NetBoxCable[];
+declare const inventoryToNetworkDiagram: (data: {
+    racks: InventoryRackDTO[];
+    devices: InventoryDeviceDTO[];
+    cables: InventoryCableDTO[];
 }) => {
     nodes: NetworkNode[];
     edges: NetworkEdge[];
 };
 /**
- * Calculate U position for devices in a rack
- */
-declare const calculateUPositions: (devices: NetBoxDevice[], rackHeight: number) => Map<number, number>;
-/**
- * Generate layout positions for nodes
+ * Generate simple layout positions for nodes array
  */
 declare const generateLayout: (nodes: NetworkNode[]) => NetworkNode[];
 
@@ -501,7 +448,7 @@ declare const findNextAvailableUPosition: (rack: NetworkNode, device: NetworkNod
 /**
  * Calculate device position based on U position within a rack
  */
-declare const calculateDevicePositionFromU: (rack: NetworkNode, uPosition: number) => {
+declare const calculateDevicePositionFromU: (rack: NetworkNode, uPosition: number, deviceHeight?: number) => {
     x: number;
     y: number;
 };
@@ -557,7 +504,7 @@ interface DevicePlacementValidation {
 /**
  * Validate device placements within a rack schema
  */
-declare function validateRackDevicePlacements(rack: RackConfig, options?: RackSchemaOptions): DevicePlacementValidation;
+declare function validateRackDevicePlacements(rack: RackConfig, _options?: RackSchemaOptions): DevicePlacementValidation;
 /**
  * Build NetworkNode array from RackConfig array with comprehensive validation
  */
@@ -622,6 +569,74 @@ declare function getPDUPortType(portIndex: number): string;
  */
 declare function getDeviceConnectorType(deviceName: string): string;
 
+/**
+ * Get the color code for a device status
+ * @param status - The device status
+ * @returns Hex color code for the status
+ * @public
+ */
+declare function getStatusColor(status: DeviceStatus | string): string;
+
+/**
+ * Calculate the bounding box of a rack node
+ * @param rack - The rack node
+ * @returns Object with left, right, top, and bottom coordinates
+ * @public
+ */
+declare function getRackBounds(rack: NetworkNode): {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+/**
+ * Check if a point is inside a rack's bounds
+ * @param point - The point coordinates { x, y }
+ * @param rack - The rack node
+ * @returns True if the point is inside the rack
+ * @public
+ */
+declare function isPointInRack(point: {
+    x: number;
+    y: number;
+}, rack: NetworkNode): boolean;
+/**
+ * Find the nearest rack to a point from a list of racks
+ * Only considers racks that contain the point
+ * @param point - The point coordinates { x, y }
+ * @param racks - Array of rack nodes
+ * @returns The nearest rack node, or null if no rack contains the point
+ * @public
+ */
+declare function findNearestRack(point: {
+    x: number;
+    y: number;
+}, racks: NetworkNode[]): NetworkNode | null;
+
+/**
+ * Options for replacing an edge in the edges array
+ */
+interface ReplaceEdgeOptions {
+    /** Existing edges array */
+    edges: Edge[];
+    /** Connection parameters for the new edge */
+    connection: Connection;
+    /** Type of edge to create */
+    edgeType: 'power' | 'fiber';
+    /** Function to calculate zIndex for the edge */
+    selectEdgeZIndex: (edge: NetworkEdge) => number;
+    /** Whether to find edge by source or target */
+    findBy: 'source' | 'target';
+}
+/**
+ * Replace an existing edge with a new connection
+ * This is used for PDU and switch connections that allow replacing existing edges
+ * @param options - Options for edge replacement
+ * @returns New edges array with the edge replaced, or null if no existing edge found
+ * @public
+ */
+declare function replaceEdge(options: ReplaceEdgeOptions): Edge[] | null;
+
 interface NetworkDiagramState {
     nodes: NetworkNode[];
     edges: NetworkEdge[];
@@ -646,6 +661,8 @@ interface NetworkDiagramStore {
     subscribe: (listener: (state: NetworkDiagramState) => void) => () => void;
     selectEdgeZIndex: (edge: NetworkEdge) => number;
     validateConnection: (params: ValidateConnectionParams) => ValidationResult;
+    selectNodeById: (id: string) => NetworkNode | undefined;
+    selectConnectedEdges: (nodeId: string) => NetworkEdge[];
 }
 declare function createNetworkDiagramStore(initial?: Partial<NetworkDiagramState>, options?: NetworkDiagramOptions): NetworkDiagramStore;
 
@@ -653,4 +670,4 @@ declare function useNetworkDiagram(store: NetworkDiagramStore): NetworkDiagramSt
 declare function useNodes(store: NetworkDiagramStore): NetworkNode[];
 declare function useEdges(store: NetworkDiagramStore): NetworkEdge[];
 
-export { DeviceNode, DevicePlacementError, type DevicePlacementValidation, type FiberCable, FiberEdge, FiberNode, type NetBoxCable, type NetBoxConnection, type NetBoxDevice, type NetBoxInterface, type NetBoxNetworkDiagramProps, type NetBoxRack, NetworkDiagram, type NetworkDiagramProps, type NetworkEdge, type NetworkNode, POWER_CONNECTORS, PowerEdge, type RackConfig, type RackDevice, RackNode, type RackSchemaOptions, VerticalPDU, Width, addDeviceToRack, buildNodesFromRackConfig, calculateDevicePositionFromU, calculateUPositions, createNetworkDiagramStore, createRackConfigFromNodes, findNextAvailableUPosition, generateLayout, getConnectorConfig, getDeviceConnectorType, getPDUPortType, getPowerPortStyle, isHighPowerConnector, isUPositionAvailable, netboxCableToNetworkEdge, netboxDeviceToNetworkNode, netboxRackToNetworkNode, netboxToNetworkDiagram, removeDeviceFromRack, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements };
+export { DeviceNode, DevicePlacementError, type DevicePlacementValidation, type FiberCable, FiberEdge, FiberNode, NetworkDiagram, type NetworkDiagramProps, type NetworkEdge, type NetworkNode, POWER_CONNECTORS, type Port, type PortBlock, PowerEdge, type RackConfig, type RackDevice, RackNode, type RackSchemaOptions, type ReplaceEdgeOptions, VerticalPDU, Width, addDeviceToRack, buildNodesFromRackConfig, calculateDevicePositionFromU, createNetworkDiagramStore, createRackConfigFromNodes, findNearestRack, findNextAvailableUPosition, generateLayout, getConnectorConfig, getDeviceConnectorType, getPDUPortType, getPowerPortStyle, getRackBounds, getStatusColor, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToNetworkDiagram, isHighPowerConnector, isPointInRack, isUPositionAvailable, removeDeviceFromRack, replaceEdge, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements };