@mp70/react-networks 0.1.7-alpha → 0.1.8-beta

package/dist/index.d.ts

@@ -15,13 +15,18 @@ declare enum Width {
  * Port configuration for network devices
  * @public
  */
+/**
+ * Port type enumeration
+ * @public
+ */
+type PortType = 'ethernet' | 'fiber' | 'console' | 'mgmt' | 'usb' | 'power_ac' | 'power_c13' | 'power_c19';
 interface Port {
     /** Display label for the port */
     label: string;
     /** Whether the port is currently connected */
     connected: boolean;
     /** Type of port for styling and validation */
-    type?: 'ethernet' | 'fiber' | 'console' | 'mgmt' | 'usb' | 'power_ac' | 'power_c13' | 'power_c19';
+    type?: PortType;
     /** Cable type for connection validation */
     cableType?: 'smf' | 'cat6' | 'om3' | 'om4' | 'om5' | 'cat5e' | 'cat6a' | 'cat7' | 'fiber' | 'ethernet';
 }
@@ -39,7 +44,7 @@ interface PortBlock {
  * Network node types supported by the diagram
  * @public
  */
-type NetworkNodeType = 'rack' | 'switch' | 'router' | 'server' | 'fiber' | 'patch-panel' | 'device' | 'vertical-pdu' | 'splice' | 'splice-tray' | 'tube' | 'cable' | 'coupler' | 'closure';
+type NetworkNodeType = 'rack' | 'switch' | 'router' | 'server' | 'fiber' | 'patch-panel' | 'device' | 'vertical-pdu' | 'splice' | 'splice-tray' | 'tube' | 'cable' | 'multi-tube-cable' | 'coupler' | 'closure' | 'fibre-split';
 /**
  * Device status states
  * @public
@@ -136,12 +141,20 @@ interface NetworkNode {
         panelWidth?: number;
         /** Height override for container nodes (patch-panel, closure) */
         panelHeight?: number;
+        /** Optional rack width in pixels (for rack nodes, default: 300px) */
+        rackWidthPx?: number;
         /** Number of rows for container nodes (patch-panel, closure) */
         rows?: number;
         /** Number of columns for container nodes (patch-panel, closure) */
         cols?: number;
         /** Header text for container nodes */
         header?: string;
+        /** Type of fibre splitter: 'splitter' or 'WDM' (default: 'splitter') */
+        splitterType?: 'splitter' | 'WDM';
+        /** Number of input fibers on the left (1 or 2, default: 1) */
+        inputCount?: number;
+        /** Number of output fibers on the right (1-64, default: 8) */
+        outputCount?: number;
         /** Additional custom properties */
         [key: string]: any;
     };
@@ -178,6 +191,18 @@ interface NetworkEdge {
         color?: string;
         /** Edge kind for styling/validation */
         kind?: 'fiber' | 'power' | 'network';
+        /** Whether this edge represents a ribbon fiber connection */
+        isRibbon?: boolean;
+        /** Array of fiber IDs for ribbon mode (6-12 fibers) */
+        ribbonFiberIds?: number[];
+        /** Highlight edge with a pulsing stroke */
+        highlight?: boolean;
+        /** Override highlight color (defaults to edge color) */
+        highlightColor?: string;
+        /** Override highlight max stroke width */
+        highlightWidth?: number;
+        /** Optional tag for grouping edges in demos */
+        traceTag?: string;
         /** Additional custom properties */
         [key: string]: any;
     };
@@ -209,6 +234,8 @@ interface RackConfig {
     customHeaderText?: string;
     /** Devices mounted in the rack */
     devices: RackDevice[];
+    /** Optional rack width in pixels (default: 300px which represents standard 48.26cm/19" rack) */
+    rackWidthPx?: number;
 }
 /**
  * Device mounted in a rack
@@ -279,6 +306,10 @@ interface SpliceConfig {
     holder: number;
     /** Loss value in dB */
     lossDb?: number;
+    /** Splice mode: 'single' for individual fiber, 'ribbon' for ribbon splices */
+    mode?: 'single' | 'ribbon';
+    /** For ribbon mode: array of fiber IDs (6-12) in the ribbon */
+    ribbonFiberIds?: number[];
 }
 /**
  * Splice tray configuration structure
@@ -343,6 +374,9 @@ interface NetworkDiagramProps {
         setNodes: (nodes: any[]) => void;
         setEdges: (edges: any[]) => void;
         toImage: (options?: any) => Promise<string>;
+        getNodes: () => any[];
+        getEdges: () => any[];
+        fitView: (options?: any) => void;
     }) => void;
     /** Show download button */
     showDownloadButton?: boolean;
@@ -352,12 +386,16 @@ 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;
     /** Enable connecting edges by clicking on handles. When true, increases handle sizes for better touch targets. Default is true. */
     connectOnClick?: boolean;
+    /** Disable panning on drag. Default is false. */
+    panOnDrag?: boolean;
+    /** Disable panning on scroll. Default is true. */
+    panOnScroll?: boolean;
+    /** Disable zooming on scroll. Default is true. */
+    zoomOnScroll?: boolean;
 }
 
 declare const NetworkDiagram: React$1.FC<NetworkDiagramProps>;
@@ -399,18 +437,34 @@ 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
+ * - Represents a multi-fiber cable (1-24 fibers)
+ * - Each colored handle corresponds to a single fiber
  * - Displays cable summary text (fiber count + cable identifier)
  */
 declare const CableNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
+/**
+ * MultiTubeCableNode
+ * - Represents a multi-tube cable (1-24 tubes)
+ * - Each colored handle corresponds to a tube within the cable
+ * - Displays cable summary text (fiber count + cable identifier)
+ */
+declare const MultiTubeCableNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
 declare const CouplerNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
 declare const PatchPanelNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
 declare const ClosureNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
+/**
+ * FibreSplitNode component for rendering fiber splitters and WDM devices
+ * Uses a trapezoid shape pointing right (narrow input on left, wider outputs on right)
+ *
+ * @public
+ */
+declare const FibreSplitNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
 interface InventoryRackDTO {
     id: string | number;
     name: string;
@@ -571,6 +625,8 @@ declare const snapToSplicePosition: (splice: NetworkNode, tray: NetworkNode, new
 declare const findNextAvailableHolderPosition: (tray: NetworkNode, splice: NetworkNode, allNodes: NetworkNode[], startFrom?: number) => number;
 /**
  * Calculate splice position based on holder number within a tray
+ * Note: This function doesn't have access to splice data, so it uses single mode spacing
+ * For ribbon splices, use calculateSplicePositionFromNumberWithData instead
  */
 declare const calculateSplicePositionFromNumber: (tray: NetworkNode, holderPosition: number) => {
     x: number;
@@ -998,4 +1054,4 @@ declare function useNetworkDiagram(store: NetworkDiagramStore): NetworkDiagramSt
 declare function useNodes(store: NetworkDiagramStore): NetworkNode[];
 declare function useEdges(store: NetworkDiagramStore): NetworkEdge[];
 
-export { COUPLERS_PER_PANEL, COUPLER_SLOT_HEIGHT_PX, COUPLER_WIDTH_PX, CableNode, ClosureNode, CouplerNode, DeviceNode, DevicePlacementError, type DevicePlacementValidation, FIBER_COLORS_12, type FiberCable, type FiberColorId, FiberEdge, FiberNode, NetworkDiagram, type NetworkDiagramProps, type NetworkEdge, type NetworkNode, PANEL_BORDER_WIDTH, PANEL_HEADER_HEIGHT, PANEL_HEIGHT_PX, PANEL_PADDING, PANEL_TUBE_TRAY_SPACING, PANEL_WIDTH_PX, POWER_CONNECTORS, PatchPanelNode, 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, calculateCouplerRightX, calculateCouplerSlotSpacing, calculateCouplerSpacing, calculateDevicePositionFromU, calculatePanelDimensions, calculateSlotPositionFromY, calculateSplicePositionFromNumber, calculateYFromSlotPosition, createNetworkDiagramStore, createRackConfigFromNodes, createSpliceConfigFromNodes, fiberSolidOrStriped, findNearestRack, findNextAvailableHolderPosition, findNextAvailableUPosition, generateLayout, getConnectorConfig, getCouplerDimensions, getDeviceConnectorType, getFiberColor, getInnerContentWidth, getPDUPortType, getPanelHeight, getPanelWidth, getPowerPortStyle, getRackBounds, getStatusColor, getTrayDimensions, getTubeDimensions, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToNetworkDiagram, isHighPowerConnector, isPointInRack, isStriped, isUPositionAvailable, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, snapToCouplerPosition, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements, validateSplicePlacements };
+export { COUPLERS_PER_PANEL, COUPLER_SLOT_HEIGHT_PX, COUPLER_WIDTH_PX, CableNode, ClosureNode, CouplerNode, DeviceNode, DevicePlacementError, type DevicePlacementValidation, FIBER_COLORS_12, type FiberCable, type FiberColorId, FiberEdge, FiberNode, FibreSplitNode, MultiTubeCableNode, NetworkDiagram, type NetworkDiagramProps, type NetworkEdge, type NetworkNode, PANEL_BORDER_WIDTH, PANEL_HEADER_HEIGHT, PANEL_HEIGHT_PX, PANEL_PADDING, PANEL_TUBE_TRAY_SPACING, PANEL_WIDTH_PX, POWER_CONNECTORS, PatchPanelNode, type Port, type PortBlock, type PortType, 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, calculateCouplerRightX, calculateCouplerSlotSpacing, calculateCouplerSpacing, calculateDevicePositionFromU, calculatePanelDimensions, calculateSlotPositionFromY, calculateSplicePositionFromNumber, calculateYFromSlotPosition, createNetworkDiagramStore, createRackConfigFromNodes, createSpliceConfigFromNodes, fiberSolidOrStriped, findNearestRack, findNextAvailableHolderPosition, findNextAvailableUPosition, generateLayout, getConnectorConfig, getCouplerDimensions, getDeviceConnectorType, getFiberColor, getInnerContentWidth, getPDUPortType, getPanelHeight, getPanelWidth, getPowerPortStyle, getRackBounds, getStatusColor, getTrayDimensions, getTubeDimensions, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToNetworkDiagram, isHighPowerConnector, isPointInRack, isStriped, isUPositionAvailable, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, snapToCouplerPosition, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements, validateSplicePlacements };