@mp70/react-networks 0.1.1-alpha → 0.1.5-alpha

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React$1 from 'react';
-import { NodeProps, EdgeProps } from 'reactflow';
+import { NodeProps, EdgeProps, Edge, Connection } from 'reactflow';
 
 /**
  * Rack device width configuration
@@ -39,7 +39,7 @@ interface PortBlock {
  * Network node types supported by the diagram
  * @public
  */
-type NetworkNodeType = 'rack' | 'switch' | 'router' | 'server' | 'fiber' | 'patch-panel' | 'device' | 'vertical-pdu';
+type NetworkNodeType = 'rack' | 'switch' | 'router' | 'server' | 'fiber' | 'patch-panel' | 'device' | 'vertical-pdu' | 'splice' | 'splice-tray' | 'tube' | 'cable';
 /**
  * Device status states
  * @public
@@ -118,6 +118,10 @@ interface NetworkNode {
         uNumberingDirection?: UNumberingDirection;
         /** Custom header text for rack nodes */
         customHeaderText?: string;
+        /** Holder position within tray (1-12) for splice nodes */
+        holderPosition?: number;
+        /** Loss value in dB for splice nodes */
+        lossDb?: number;
         /** Additional custom properties */
         [key: string]: any;
     };
@@ -126,7 +130,7 @@ interface NetworkNode {
  * Network edge types
  * @public
  */
-type NetworkEdgeType = 'fiber' | 'ethernet' | 'power';
+type NetworkEdgeType = 'fiber' | 'ethernet' | 'power' | 'smoothstep' | 'step';
 /**
  * Network edge data structure
  * @public
@@ -242,6 +246,37 @@ interface FiberCable {
         to: string;
     };
 }
+/**
+ * Splice configuration structure
+ * @public
+ */
+interface SpliceConfig {
+    /** Unique splice identifier */
+    id: string;
+    /** Splice display name */
+    name: string;
+    /** Holder position within tray (1-12) */
+    holder: number;
+    /** Loss value in dB */
+    lossDb?: number;
+}
+/**
+ * Splice tray configuration structure
+ * @public
+ */
+interface SpliceTrayConfig {
+    /** Unique tray identifier */
+    id: string;
+    /** Tray display name */
+    name: string;
+    /** Tray position coordinates */
+    position: {
+        x: number;
+        y: number;
+    };
+    /** Splices in this tray */
+    splices: SpliceConfig[];
+}
 /**
  * Network diagram component props
  * @public
@@ -285,6 +320,8 @@ interface NetworkDiagramProps {
     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 */
@@ -295,6 +332,10 @@ interface NetworkDiagramProps {
     downloadButtonText?: string;
     /** Download button styling options */
     downloadButtonStyle?: React.CSSProperties;
+    /** Allow reconnecting existing edges from either end */
+    allowReconnectExisting?: boolean;
+    /** Use smoothstep edges for tube connections (both tube-to-cable and cable-to-tube). Default is fiber. */
+    useSmoothstepEdgesForTubes?: boolean;
 }
 
 declare const NetworkDiagram: React$1.FC<NetworkDiagramProps>;
@@ -308,7 +349,9 @@ declare const RackNode: React$1.FC<RackNodeProps>;
 
 declare const FiberNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
-declare const FiberEdge: React$1.FC<EdgeProps<NetworkEdge['data']>>;
+declare const FiberEdge: React$1.FC<EdgeProps<NetworkEdge['data']> & {
+    className?: string;
+}>;
 
 declare const PowerEdge: React$1.FC<EdgeProps>;
 
@@ -316,6 +359,30 @@ declare const DeviceNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
 declare const VerticalPDU: React$1.FC<NodeProps<NetworkNode['data']>>;
 
+declare const SpliceNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
+declare const SpliceTrayNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
+/**
+ * TubeNode
+ * - Rectangular node representing a buffer tube (horizontal orientation, rotated 180 degrees)
+ * - Renders 12 or 24 fiber handles on the top side with TIA-598 colors
+ * - Tube border tinted by tube index color (1..12 cycling)
+ * - startOn parameter controls handle positioning:
+ *   - 'left-center' (default): handles centered on top, tube handle on bottom
+ *   - 'left': handles on left side, tube handle on left
+ *   - 'right': handles on right side with reversed colors, tube handle on right
+ */
+declare const TubeNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
+/**
+ * CableNode
+ * - Visually mirrors TubeNode but represents an entire cable
+ * - Each colored handle corresponds to a tube within the cable
+ * - Displays cable summary text (fiber count + cable identifier)
+ */
+declare const CableNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
 interface InventoryRackDTO {
     id: string | number;
     name: string;
@@ -459,6 +526,29 @@ declare const updateDeviceUPosition$1: (device: NetworkNode, rack: NetworkNode,
  */
 declare const validateAndSnapDevice: (device: NetworkNode, rack: NetworkNode) => NetworkNode;
 
+/**
+ * Snap a splice to the nearest holder position within a tray
+ */
+declare const snapToSplicePosition: (splice: NetworkNode, tray: NetworkNode, newPosition: {
+    x: number;
+    y: number;
+}, allNodes: NetworkNode[]) => {
+    x: number;
+    y: number;
+    holderPosition?: number;
+};
+/**
+ * Find the next available holder position
+ */
+declare const findNextAvailableHolderPosition: (tray: NetworkNode, splice: NetworkNode, allNodes: NetworkNode[], startFrom?: number) => number;
+/**
+ * Calculate splice position based on holder number within a tray
+ */
+declare const calculateSplicePositionFromNumber: (tray: NetworkNode, holderPosition: number) => {
+    x: number;
+    y: number;
+};
+
 /**
  * Configuration options for building nodes from rack schema
  */
@@ -502,7 +592,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
  */
@@ -524,6 +614,66 @@ declare function addDeviceToRack(racks: RackConfig[], rackId: string, device: Ra
  */
 declare function removeDeviceFromRack(racks: RackConfig[], rackId: string, deviceId: string): RackConfig[];
 
+/**
+ * Configuration options for building nodes from splice schema
+ */
+interface SpliceSchemaOptions {
+    /** How to handle splice placement conflicts */
+    conflictPolicy?: 'strict' | 'nearest';
+    /** Whether to validate all placements before creating nodes */
+    validatePlacements?: boolean;
+}
+/**
+ * Error thrown when splice placement conflicts occur in strict mode
+ */
+declare class SplicePlacementError extends Error {
+    trayId: string;
+    spliceId: string;
+    holder: number;
+    conflictWith?: string | undefined;
+    constructor(trayId: string, spliceId: string, holder: number, conflictWith?: string | undefined);
+}
+/**
+ * Validation result for splice placement
+ */
+interface SplicePlacementValidation {
+    isValid: boolean;
+    conflicts: Array<{
+        spliceId: string;
+        holder: number;
+        conflictWith: string;
+    }>;
+    outOfBounds: Array<{
+        spliceId: string;
+        holder: number;
+        max: number;
+    }>;
+}
+/**
+ * Validate splice placements within a tray schema
+ */
+declare function validateSplicePlacements(tray: SpliceTrayConfig, _options?: SpliceSchemaOptions): SplicePlacementValidation;
+/**
+ * Build NetworkNode array from SpliceTrayConfig array with comprehensive validation
+ */
+declare function buildNodesFromSpliceConfig(trays: SpliceTrayConfig[], options?: SpliceSchemaOptions): NetworkNode[];
+/**
+ * Create a SpliceTrayConfig from existing NetworkNode data (reverse operation)
+ */
+declare function createSpliceConfigFromNodes(nodes: NetworkNode[]): SpliceTrayConfig[];
+/**
+ * Update splice holder position in a splice schema
+ */
+declare function updateSpliceHolderPosition(trays: SpliceTrayConfig[], trayId: string, spliceId: string, newHolder: number): SpliceTrayConfig[];
+/**
+ * Add a splice to a tray schema
+ */
+declare function addSpliceToTray(trays: SpliceTrayConfig[], trayId: string, splice: SpliceConfig, options?: SpliceSchemaOptions): SpliceTrayConfig[];
+/**
+ * Remove a splice from a tray schema
+ */
+declare function removeSpliceFromTray(trays: SpliceTrayConfig[], trayId: string, spliceId: string): SpliceTrayConfig[];
+
 /**
  * Power connector utilities for consistent styling across devices and PDUs
  */
@@ -567,6 +717,118 @@ 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;
+
+/**
+ * TIA-598-C standard fiber optic color codes (12 base colors)
+ * Colors 1-12: Blue, Orange, Green, Brown, Slate, White, Red, Black, Yellow, Violet, Rose, Aqua
+ * @public
+ */
+declare const FIBER_COLORS_12: readonly ["#1f77b4", "#ff7f0e", "#2ca02c", "#8c564b", "#708090", "#ffffff", "#d62728", "#000000", "#ffdf00", "#8a2be2", "#ff69b4", "#00ffff"];
+/**
+ * Fiber color ID type (1-24)
+ * @public
+ */
+type FiberColorId = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
+/**
+ * Get the base color for a fiber color ID
+ * Colors 13-24 use the same base colors as 1-12
+ * @param id - Fiber color ID (1-24)
+ * @returns Hex color code
+ * @public
+ */
+declare function baseColorFor(id: FiberColorId | number): string;
+/**
+ * Check if a fiber color ID uses a striped pattern (13-24)
+ * @param id - Fiber color ID (1-24)
+ * @returns True if the color should be striped
+ * @public
+ */
+declare function isStriped(id: FiberColorId | number): boolean;
+/**
+ * Get CSS properties for a fiber color (solid or striped)
+ * Colors 13-24 use a black stripe pattern over the base color
+ * @param id - Fiber color ID (1-24)
+ * @returns CSS properties for the color
+ * @public
+ */
+declare function fiberSolidOrStriped(id: FiberColorId | number): React$1.CSSProperties;
+/**
+ * Get the hex color code for a fiber color ID
+ * @param id - Fiber color ID (1-24)
+ * @returns Hex color code
+ * @public
+ */
+declare function getFiberColor(id: FiberColorId | number): 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' | 'step' | 'smoothstep';
+    /** Function to calculate zIndex for the edge */
+    selectEdgeZIndex: (edge: NetworkEdge) => number;
+    /** Whether to find edge by source or target */
+    findBy: 'source' | 'target';
+    /** Optional edge data to set on the new edge */
+    data?: NetworkEdge['data'];
+}
+/**
+ * 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[];
@@ -600,4 +862,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, NetworkDiagram, type NetworkDiagramProps, type NetworkEdge, type NetworkNode, POWER_CONNECTORS, PowerEdge, type RackConfig, type RackDevice, RackNode, type RackSchemaOptions, VerticalPDU, Width, addDeviceToRack, buildNodesFromRackConfig, calculateDevicePositionFromU, createNetworkDiagramStore, createRackConfigFromNodes, findNextAvailableUPosition, generateLayout, getConnectorConfig, getDeviceConnectorType, getPDUPortType, getPowerPortStyle, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToNetworkDiagram, isHighPowerConnector, isUPositionAvailable, removeDeviceFromRack, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements };
+export { CableNode, DeviceNode, DevicePlacementError, type DevicePlacementValidation, FIBER_COLORS_12, type FiberCable, type FiberColorId, 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, type SpliceConfig, SpliceNode, SplicePlacementError, type SplicePlacementValidation, type SpliceSchemaOptions, type SpliceTrayConfig, SpliceTrayNode, TubeNode, VerticalPDU, Width, addDeviceToRack, addSpliceToTray, baseColorFor, buildNodesFromRackConfig, buildNodesFromSpliceConfig, calculateDevicePositionFromU, calculateSplicePositionFromNumber, createNetworkDiagramStore, createRackConfigFromNodes, createSpliceConfigFromNodes, fiberSolidOrStriped, findNearestRack, findNextAvailableHolderPosition, findNextAvailableUPosition, generateLayout, getConnectorConfig, getDeviceConnectorType, getFiberColor, getPDUPortType, getPowerPortStyle, getRackBounds, getStatusColor, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToNetworkDiagram, isHighPowerConnector, isPointInRack, isStriped, isUPositionAvailable, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements, validateSplicePlacements };