@mp70/react-networks 0.5.1 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -11
- package/dist/index.d.mts +86 -53
- package/dist/index.d.ts +86 -53
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +39 -4
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# react-networks
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/react-networks)
|
|
4
|
+
[](https://www.npmjs.com/package/react-networks)
|
|
5
5
|
[](https://www.typescriptlang.org/)
|
|
6
6
|
|
|
7
7
|
A React library for creating interactive network diagrams with support for rack management, fiber networks, and power distribution. Built on React Flow with TypeScript support.
|
|
@@ -25,19 +25,19 @@ A React library for creating interactive network diagrams with support for rack
|
|
|
25
25
|
### Installation
|
|
26
26
|
|
|
27
27
|
```bash
|
|
28
|
-
npm install
|
|
28
|
+
npm install react-networks react react-dom reactflow
|
|
29
29
|
# or
|
|
30
|
-
yarn add
|
|
30
|
+
yarn add react-networks react react-dom reactflow
|
|
31
31
|
# or
|
|
32
|
-
pnpm add
|
|
32
|
+
pnpm add react-networks react react-dom reactflow
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
### Basic Usage
|
|
36
36
|
|
|
37
37
|
```tsx
|
|
38
38
|
import React from 'react';
|
|
39
|
-
import { NetworkDiagram, NetworkNode, NetworkEdge } from '
|
|
40
|
-
import '
|
|
39
|
+
import { NetworkDiagram, NetworkNode, NetworkEdge } from 'react-networks';
|
|
40
|
+
import 'react-networks/index.css';
|
|
41
41
|
|
|
42
42
|
const nodes: NetworkNode[] = [
|
|
43
43
|
{
|
|
@@ -87,7 +87,7 @@ export default App;
|
|
|
87
87
|
|
|
88
88
|
### Data Model
|
|
89
89
|
|
|
90
|
-
|
|
90
|
+
`react-networks` supports two control layers:
|
|
91
91
|
|
|
92
92
|
- `document` / `initialDocument` / `onDocumentChange` use `DiagramDocument`, the canonical persisted/editor schema. Prefer this for saved diagrams, import/export, and external integrations.
|
|
93
93
|
- `nodes` / `edges` remain the lower-level React Flow-shaped control surface when you want direct control of rendered nodes and edges.
|
|
@@ -199,6 +199,8 @@ For new code, prefer the document-model props. The graph props and React Flow es
|
|
|
199
199
|
| `onEdgeUpdate` | `(oldEdge: ReactFlowEdge, newConnection: Connection) => void` | - | Edge update (reconnect) override |
|
|
200
200
|
| `isValidConnection` | `(connection: Connection) => boolean` | - | Connection validation override |
|
|
201
201
|
| `connectionMode` | `ConnectionMode` | - | React Flow connection mode |
|
|
202
|
+
| `connectionRadius` | `number` | React Flow default | Pointer snap distance (px) for handles. Raise to make small ports easier to target; lower to avoid mis-targeting on dense devices |
|
|
203
|
+
| `onConnectRejected` | `(payload: NetworkConnectionRejection) => void` | - | Fired when a connect/reconnect attempt is rejected, so you can surface feedback instead of failing silently |
|
|
202
204
|
| `reAssignable` | `boolean` | `true` | Allow devices to move between racks / ungroup on drag |
|
|
203
205
|
| `colorMode` | `'light' \| 'dark' \| 'system'` | - | Diagram color mode |
|
|
204
206
|
| `onInit` | `(instance: ReactFlowInstance) => void` | - | Called when React Flow is ready |
|
|
@@ -292,7 +294,7 @@ type NetworkEdgeType = 'fiber' | 'ethernet' | 'power' | 'smoothstep' | 'step' |
|
|
|
292
294
|
### Rack Configuration
|
|
293
295
|
|
|
294
296
|
```tsx
|
|
295
|
-
import { RackConfig, buildNodesFromRackConfig, Width } from '
|
|
297
|
+
import { RackConfig, buildNodesFromRackConfig, Width } from 'react-networks';
|
|
296
298
|
|
|
297
299
|
const rackSchema: RackConfig[] = [
|
|
298
300
|
{
|
|
@@ -339,7 +341,7 @@ Device images (e.g. server front/rear photos or SVGs) use `frontImageUrl` and `r
|
|
|
339
341
|
### Inventory Integration
|
|
340
342
|
|
|
341
343
|
```tsx
|
|
342
|
-
import { inventoryToNetworkDiagram } from '
|
|
344
|
+
import { inventoryToNetworkDiagram } from 'react-networks';
|
|
343
345
|
|
|
344
346
|
const inventoryData = {
|
|
345
347
|
racks: [...],
|
|
@@ -353,7 +355,7 @@ const { nodes, edges } = inventoryToNetworkDiagram(inventoryData);
|
|
|
353
355
|
### Custom Styling
|
|
354
356
|
|
|
355
357
|
```tsx
|
|
356
|
-
import '
|
|
358
|
+
import 'react-networks/index.css';
|
|
357
359
|
|
|
358
360
|
// Override CSS variables
|
|
359
361
|
.network-diagram {
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React$1, { Component, ReactNode, ErrorInfo, CSSProperties } from 'react';
|
|
2
2
|
import * as reactflow from 'reactflow';
|
|
3
|
-
import { Node, NodeTypes, EdgeTypes,
|
|
3
|
+
import { Node, Connection, NodeTypes, EdgeTypes, Edge, ConnectionMode, ReactFlowInstance, Viewport, FitViewOptions, NodeProps, EdgeProps } from 'reactflow';
|
|
4
4
|
|
|
5
5
|
type FibreFlowCableKind = 'simple' | 'tube';
|
|
6
6
|
interface FibreFlowEndpoint {
|
|
@@ -241,12 +241,12 @@ declare enum Width {
|
|
|
241
241
|
* Port type enumeration
|
|
242
242
|
* @public
|
|
243
243
|
*/
|
|
244
|
-
type PortType =
|
|
244
|
+
type PortType = "ethernet" | "rj45" | "fiber" | "console" | "mgmt" | "usb" | "power_ac" | "power_c13" | "power_c19";
|
|
245
245
|
/**
|
|
246
246
|
* Cable types used for connected network ports.
|
|
247
247
|
* @public
|
|
248
248
|
*/
|
|
249
|
-
type PortCableType =
|
|
249
|
+
type PortCableType = "smf" | "cat6" | "om3" | "om4" | "om5" | "cat5e" | "cat6a" | "cat7" | "fiber" | "ethernet";
|
|
250
250
|
/**
|
|
251
251
|
* Device image fit options.
|
|
252
252
|
*
|
|
@@ -255,12 +255,12 @@ type PortCableType = 'smf' | 'cat6' | 'om3' | 'om4' | 'om5' | 'cat5e' | 'cat6a'
|
|
|
255
255
|
*
|
|
256
256
|
* @public
|
|
257
257
|
*/
|
|
258
|
-
type DeviceImageFit =
|
|
258
|
+
type DeviceImageFit = "cover" | "contain" | "contain-height" | "fill" | "none" | "scale-down";
|
|
259
259
|
/**
|
|
260
260
|
* Device image repeat options.
|
|
261
261
|
* @public
|
|
262
262
|
*/
|
|
263
|
-
type DeviceImageRepeat =
|
|
263
|
+
type DeviceImageRepeat = "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
|
|
264
264
|
/**
|
|
265
265
|
* Shared image configuration for rack-mounted devices and device nodes.
|
|
266
266
|
* @public
|
|
@@ -289,7 +289,7 @@ interface DeviceImageOptions {
|
|
|
289
289
|
*/
|
|
290
290
|
interface PortPosition {
|
|
291
291
|
/** Handle side on the node */
|
|
292
|
-
side?:
|
|
292
|
+
side?: "top" | "right" | "bottom" | "left";
|
|
293
293
|
/** Side offset as percentage (0-100) */
|
|
294
294
|
offsetPercent?: number;
|
|
295
295
|
/** Side offset in pixels */
|
|
@@ -315,7 +315,7 @@ interface DevicePort {
|
|
|
315
315
|
/** Display label for the port */
|
|
316
316
|
label: string;
|
|
317
317
|
/** Front/rear device face. `back` is accepted as an alias for `rear`. */
|
|
318
|
-
face?: DeviceFace |
|
|
318
|
+
face?: DeviceFace | "back";
|
|
319
319
|
/** Optional block/group name (for example `Network Ports`, `QSFP28`, `Power Ports`) */
|
|
320
320
|
group?: string;
|
|
321
321
|
/** Optional source/detected family label used for visual kind inference */
|
|
@@ -327,7 +327,7 @@ interface DevicePort {
|
|
|
327
327
|
/** Cable type for connection validation */
|
|
328
328
|
cableType?: PortCableType;
|
|
329
329
|
/** Optional power connector type for rendering (mainly for PDU ports) */
|
|
330
|
-
connectorType?:
|
|
330
|
+
connectorType?: "C13" | "C14" | "C19" | "C20";
|
|
331
331
|
/** Optional compatibility keys. When omitted, defaults are derived from type/cable/connector data. */
|
|
332
332
|
compatibility?: string[];
|
|
333
333
|
/** Optional sort order within a face/group bucket */
|
|
@@ -353,7 +353,7 @@ interface Port {
|
|
|
353
353
|
/** Cable type for connection validation */
|
|
354
354
|
cableType?: PortCableType;
|
|
355
355
|
/** Optional power connector type for rendering (mainly for PDU ports) */
|
|
356
|
-
connectorType?:
|
|
356
|
+
connectorType?: "C13" | "C14" | "C19" | "C20";
|
|
357
357
|
/** Optional compatibility keys. When omitted, defaults are derived from type/cable/connector data. */
|
|
358
358
|
compatibility?: string[];
|
|
359
359
|
/** Optional explicit handle placement */
|
|
@@ -373,17 +373,17 @@ interface PortBlock {
|
|
|
373
373
|
* Network node types supported by the diagram
|
|
374
374
|
* @public
|
|
375
375
|
*/
|
|
376
|
-
type NetworkNodeType =
|
|
376
|
+
type NetworkNodeType = "rack" | "switch" | "router" | "server" | "fiber" | "patch-panel" | "device" | "vertical-pdu" | "splice" | "splice-tray" | "tube" | "cable" | "multi-tube-cable" | "coupler" | "closure" | "fibre-split" | "fibre-flow-cable" | "fibre-flow-closure";
|
|
377
377
|
/**
|
|
378
378
|
* Device status states
|
|
379
379
|
* @public
|
|
380
380
|
*/
|
|
381
|
-
type DeviceStatus =
|
|
381
|
+
type DeviceStatus = "active" | "inactive" | "maintenance";
|
|
382
382
|
/**
|
|
383
383
|
* Device face orientations
|
|
384
384
|
* @public
|
|
385
385
|
*/
|
|
386
|
-
type DeviceFace =
|
|
386
|
+
type DeviceFace = "front" | "rear";
|
|
387
387
|
type DiagramPortHandleRef = {
|
|
388
388
|
nodeId: string;
|
|
389
389
|
handleId: string;
|
|
@@ -399,22 +399,22 @@ type DiagramPortClickPayload = {
|
|
|
399
399
|
* Rack rendering layout modes.
|
|
400
400
|
* @public
|
|
401
401
|
*/
|
|
402
|
-
type RackLayoutMode =
|
|
402
|
+
type RackLayoutMode = "single-face" | "split-face";
|
|
403
403
|
/**
|
|
404
404
|
* Rack mounting behavior for a device.
|
|
405
405
|
* @public
|
|
406
406
|
*/
|
|
407
|
-
type RackMountMode =
|
|
407
|
+
type RackMountMode = "front" | "rear" | "both";
|
|
408
408
|
/**
|
|
409
409
|
* Power port side configuration
|
|
410
410
|
* @public
|
|
411
411
|
*/
|
|
412
|
-
type PowerSide =
|
|
412
|
+
type PowerSide = "left" | "right";
|
|
413
413
|
/**
|
|
414
414
|
* U numbering direction for racks
|
|
415
415
|
* @public
|
|
416
416
|
*/
|
|
417
|
-
type UNumberingDirection =
|
|
417
|
+
type UNumberingDirection = "bottom-up" | "top-down";
|
|
418
418
|
/**
|
|
419
419
|
* Shared node data fields available across node types.
|
|
420
420
|
* Specific node kinds can narrow these fields via `NetworkNodeDataByType`.
|
|
@@ -438,11 +438,11 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
|
|
|
438
438
|
/** NetBox integration ID */
|
|
439
439
|
netboxId?: number | string;
|
|
440
440
|
/** NetBox object type */
|
|
441
|
-
netboxType?:
|
|
441
|
+
netboxType?: "device" | "rack" | "interface" | "cable" | string;
|
|
442
442
|
/** Inventory integration ID */
|
|
443
443
|
inventoryId?: number | string;
|
|
444
444
|
/** Inventory object type */
|
|
445
|
-
inventoryType?:
|
|
445
|
+
inventoryType?: "device" | "rack" | "interface" | "cable" | string;
|
|
446
446
|
/** Rack height in U units */
|
|
447
447
|
uHeight?: number;
|
|
448
448
|
/** Device position within rack in U units */
|
|
@@ -477,13 +477,13 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
|
|
|
477
477
|
/** Number of AC power ports */
|
|
478
478
|
powerPorts?: number;
|
|
479
479
|
/** Optional explicit PDU connector sequence */
|
|
480
|
-
portTypes?: Array<
|
|
480
|
+
portTypes?: Array<"C13" | "C19">;
|
|
481
481
|
/** Optional grouped PDU ports (supports custom positions/types) */
|
|
482
482
|
pduPortGroups?: PortBlock[];
|
|
483
483
|
/** Vertical PDU width in pixels */
|
|
484
484
|
widthPx?: number;
|
|
485
485
|
/** Optional management unit position for vertical PDUs */
|
|
486
|
-
mgmt_unit?:
|
|
486
|
+
mgmt_unit?: "top" | "middle" | "bottom";
|
|
487
487
|
/** U numbering direction for rack nodes */
|
|
488
488
|
uNumberingDirection?: UNumberingDirection;
|
|
489
489
|
/** Custom header text for rack nodes */
|
|
@@ -495,13 +495,13 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
|
|
|
495
495
|
/** Loss value in dB for splice nodes */
|
|
496
496
|
lossDb?: number;
|
|
497
497
|
/** Splice mode */
|
|
498
|
-
mode?:
|
|
498
|
+
mode?: "single" | "ribbon";
|
|
499
499
|
/** Legacy ribbon flag */
|
|
500
500
|
ribbon?: boolean;
|
|
501
501
|
/** Ribbon fiber IDs */
|
|
502
502
|
ribbonFiberIds?: number[];
|
|
503
503
|
/** Connector type for coupler nodes */
|
|
504
|
-
connector?:
|
|
504
|
+
connector?: "SC" | "LC";
|
|
505
505
|
/** Number of fibers for coupler nodes (1, 2, or 4) */
|
|
506
506
|
couplerFiberCount?: 1 | 2 | 4;
|
|
507
507
|
/** Optional port labels for left side of coupler */
|
|
@@ -529,7 +529,7 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
|
|
|
529
529
|
/** Header text for container nodes */
|
|
530
530
|
header?: string;
|
|
531
531
|
/** Type of fibre splitter: 'splitter' or 'WDM' (default: 'splitter') */
|
|
532
|
-
splitterType?:
|
|
532
|
+
splitterType?: "splitter" | "WDM";
|
|
533
533
|
/** Number of input fibers on the left (1 or 2, default: 1) */
|
|
534
534
|
inputCount?: number;
|
|
535
535
|
/** Number of output fibers on the right (1-64, default: 8) */
|
|
@@ -551,7 +551,7 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
|
|
|
551
551
|
/** Rotation in degrees for rotatable nodes */
|
|
552
552
|
rotation?: number;
|
|
553
553
|
/** Tube handle orientation */
|
|
554
|
-
startOn?:
|
|
554
|
+
startOn?: "left-center" | "left" | "right";
|
|
555
555
|
/** Rack metadata for integrations */
|
|
556
556
|
facilityId?: string | number | null;
|
|
557
557
|
/** Rack serial metadata */
|
|
@@ -573,7 +573,7 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
|
|
|
573
573
|
devices?: unknown[];
|
|
574
574
|
cables?: unknown[];
|
|
575
575
|
/** UI color mode metadata */
|
|
576
|
-
colorMode?:
|
|
576
|
+
colorMode?: "light" | "dark" | "system";
|
|
577
577
|
/** Generic dimensions used by some helpers */
|
|
578
578
|
height?: number;
|
|
579
579
|
headerHeight?: number;
|
|
@@ -602,13 +602,13 @@ interface DeviceNodeData extends NetworkNodeDataBase {
|
|
|
602
602
|
*/
|
|
603
603
|
interface FibreFlowCableNodeData extends NetworkNodeDataBase {
|
|
604
604
|
cable: FibreFlowCable;
|
|
605
|
-
side:
|
|
605
|
+
side: "left" | "right";
|
|
606
606
|
rowHeight: number;
|
|
607
607
|
columnWidth: number;
|
|
608
608
|
showTubeLabels: boolean;
|
|
609
609
|
showFiberNumbers: boolean;
|
|
610
610
|
layout: unknown;
|
|
611
|
-
colorMode?:
|
|
611
|
+
colorMode?: "dark" | "light";
|
|
612
612
|
}
|
|
613
613
|
/**
|
|
614
614
|
* Fibre flow closure node data.
|
|
@@ -618,7 +618,7 @@ interface FibreFlowClosureNodeData extends NetworkNodeDataBase {
|
|
|
618
618
|
width?: number;
|
|
619
619
|
height?: number;
|
|
620
620
|
headerHeight?: number;
|
|
621
|
-
colorMode?:
|
|
621
|
+
colorMode?: "dark" | "light";
|
|
622
622
|
}
|
|
623
623
|
/**
|
|
624
624
|
* Mapping from node type to corresponding data type.
|
|
@@ -630,19 +630,19 @@ interface NetworkNodeDataByType {
|
|
|
630
630
|
router: DeviceNodeData;
|
|
631
631
|
server: DeviceNodeData;
|
|
632
632
|
fiber: NetworkNodeDataBase;
|
|
633
|
-
|
|
633
|
+
"patch-panel": NetworkNodeDataBase;
|
|
634
634
|
device: DeviceNodeData;
|
|
635
|
-
|
|
635
|
+
"vertical-pdu": NetworkNodeDataBase;
|
|
636
636
|
splice: NetworkNodeDataBase;
|
|
637
|
-
|
|
637
|
+
"splice-tray": NetworkNodeDataBase;
|
|
638
638
|
tube: NetworkNodeDataBase;
|
|
639
639
|
cable: NetworkNodeDataBase;
|
|
640
|
-
|
|
640
|
+
"multi-tube-cable": NetworkNodeDataBase;
|
|
641
641
|
coupler: NetworkNodeDataBase;
|
|
642
642
|
closure: NetworkNodeDataBase;
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
643
|
+
"fibre-split": NetworkNodeDataBase;
|
|
644
|
+
"fibre-flow-cable": FibreFlowCableNodeData;
|
|
645
|
+
"fibre-flow-closure": FibreFlowClosureNodeData;
|
|
646
646
|
}
|
|
647
647
|
/**
|
|
648
648
|
* Union of all node data variants.
|
|
@@ -663,7 +663,7 @@ type NetworkNode<TType extends NetworkNodeType = NetworkNodeType, TExtra = unkno
|
|
|
663
663
|
* Network edge types
|
|
664
664
|
* @public
|
|
665
665
|
*/
|
|
666
|
-
type NetworkEdgeType =
|
|
666
|
+
type NetworkEdgeType = "fiber" | "ethernet" | "power" | "smoothstep" | "step" | "thick-cable" | "fibre-flow" | "fibre-flow-link";
|
|
667
667
|
/**
|
|
668
668
|
* Edge data payload.
|
|
669
669
|
* @public
|
|
@@ -676,7 +676,7 @@ interface NetworkEdgeData {
|
|
|
676
676
|
/** Edge color for styling */
|
|
677
677
|
color?: string;
|
|
678
678
|
/** Edge kind for styling/validation */
|
|
679
|
-
kind?:
|
|
679
|
+
kind?: "fiber" | "power" | "network";
|
|
680
680
|
/** Whether this edge represents a ribbon fiber connection */
|
|
681
681
|
isRibbon?: boolean;
|
|
682
682
|
/** Array of fiber IDs for ribbon mode (6-12 fibers) */
|
|
@@ -695,10 +695,10 @@ interface NetworkEdgeData {
|
|
|
695
695
|
cableType?: PortCableType;
|
|
696
696
|
/** NetBox integration metadata */
|
|
697
697
|
netboxId?: number | string;
|
|
698
|
-
netboxType?:
|
|
698
|
+
netboxType?: "device" | "rack" | "interface" | "cable" | string;
|
|
699
699
|
/** Inventory integration metadata */
|
|
700
700
|
inventoryId?: number | string;
|
|
701
|
-
inventoryType?:
|
|
701
|
+
inventoryType?: "device" | "rack" | "interface" | "cable" | string;
|
|
702
702
|
/** Status metadata */
|
|
703
703
|
status?: string;
|
|
704
704
|
/** Endpoint metadata */
|
|
@@ -755,7 +755,7 @@ interface DiagramDocument {
|
|
|
755
755
|
* Node kinds used by the document model.
|
|
756
756
|
* @public
|
|
757
757
|
*/
|
|
758
|
-
type DiagramNodeKind =
|
|
758
|
+
type DiagramNodeKind = "rack" | "equipment" | "pdu" | "fiber" | "tube" | "cable" | "multi-tube-cable" | "splice" | "coupler" | "splitter" | "container" | "fibre-flow-cable" | "fibre-flow-closure";
|
|
759
759
|
/**
|
|
760
760
|
* Placement data for document nodes.
|
|
761
761
|
* @public
|
|
@@ -766,7 +766,7 @@ interface DiagramNodePlacement {
|
|
|
766
766
|
y: number;
|
|
767
767
|
};
|
|
768
768
|
parentId?: string;
|
|
769
|
-
extent?:
|
|
769
|
+
extent?: "parent";
|
|
770
770
|
rack?: {
|
|
771
771
|
uPosition?: number;
|
|
772
772
|
mountMode?: RackMountMode;
|
|
@@ -786,10 +786,10 @@ interface DiagramNodePlacement {
|
|
|
786
786
|
interface DiagramEndpoint {
|
|
787
787
|
id: string;
|
|
788
788
|
label: string;
|
|
789
|
-
face?: DeviceFace |
|
|
789
|
+
face?: DeviceFace | "internal";
|
|
790
790
|
group?: string;
|
|
791
|
-
role?:
|
|
792
|
-
medium?:
|
|
791
|
+
role?: "network" | "power" | "fiber" | "tube" | "splice" | "coupler" | "splitter" | "cable" | "generic";
|
|
792
|
+
medium?: "ethernet" | "fiber" | "power" | "tube" | "generic";
|
|
793
793
|
type?: PortType;
|
|
794
794
|
cableType?: PortCableType;
|
|
795
795
|
connector?: string;
|
|
@@ -808,7 +808,7 @@ interface DiagramNodeRender {
|
|
|
808
808
|
height?: number;
|
|
809
809
|
header?: string;
|
|
810
810
|
color?: string;
|
|
811
|
-
colorMode?:
|
|
811
|
+
colorMode?: "light" | "dark" | "system";
|
|
812
812
|
rackWidthPx?: number;
|
|
813
813
|
rackFaceGapPx?: number;
|
|
814
814
|
images?: DeviceImageOptions;
|
|
@@ -823,7 +823,7 @@ interface DiagramNodeRender {
|
|
|
823
823
|
* @public
|
|
824
824
|
*/
|
|
825
825
|
interface DiagramExternalRef {
|
|
826
|
-
source:
|
|
826
|
+
source: "netbox" | "inventory" | string;
|
|
827
827
|
id: string | number;
|
|
828
828
|
type?: string;
|
|
829
829
|
metadata?: Record<string, unknown>;
|
|
@@ -880,7 +880,7 @@ interface DiagramUiState {
|
|
|
880
880
|
* Rack device types
|
|
881
881
|
* @public
|
|
882
882
|
*/
|
|
883
|
-
type RackDeviceType =
|
|
883
|
+
type RackDeviceType = "server" | "switch" | "router" | "patch-panel" | "ups";
|
|
884
884
|
/**
|
|
885
885
|
* Rack configuration structure
|
|
886
886
|
* @public
|
|
@@ -950,7 +950,7 @@ interface RackDevice extends DeviceImageOptions {
|
|
|
950
950
|
* Fiber cable types
|
|
951
951
|
* @public
|
|
952
952
|
*/
|
|
953
|
-
type FiberCableType =
|
|
953
|
+
type FiberCableType = "single-mode" | "multi-mode";
|
|
954
954
|
/**
|
|
955
955
|
* Fiber cable configuration
|
|
956
956
|
* @public
|
|
@@ -988,7 +988,7 @@ interface SpliceConfig {
|
|
|
988
988
|
/** Loss value in dB */
|
|
989
989
|
lossDb?: number;
|
|
990
990
|
/** Splice mode: 'single' for individual fiber, 'ribbon' for ribbon splices */
|
|
991
|
-
mode?:
|
|
991
|
+
mode?: "single" | "ribbon";
|
|
992
992
|
/** For ribbon mode: array of fiber IDs (6-12) in the ribbon */
|
|
993
993
|
ribbonFiberIds?: number[];
|
|
994
994
|
}
|
|
@@ -1091,7 +1091,7 @@ interface NetworkDiagramToImageOptions {
|
|
|
1091
1091
|
* Fit-view options that support targeting node IDs directly.
|
|
1092
1092
|
* @public
|
|
1093
1093
|
*/
|
|
1094
|
-
interface NetworkDiagramFitViewOptions extends Omit<FitViewOptions,
|
|
1094
|
+
interface NetworkDiagramFitViewOptions extends Omit<FitViewOptions, "nodes"> {
|
|
1095
1095
|
/** Optional node IDs to fit */
|
|
1096
1096
|
nodes?: string[];
|
|
1097
1097
|
}
|
|
@@ -1205,7 +1205,7 @@ interface NetworkDiagramProps {
|
|
|
1205
1205
|
/** Allow rack-mounted devices to move between racks/ungroup on drag and drop. Defaults to true. */
|
|
1206
1206
|
reAssignable?: boolean;
|
|
1207
1207
|
/** Color mode for the diagram */
|
|
1208
|
-
colorMode?:
|
|
1208
|
+
colorMode?: "light" | "dark" | "system";
|
|
1209
1209
|
/** Callback when React Flow instance is initialized */
|
|
1210
1210
|
onInit?: (instance: ReactFlowInstance) => void;
|
|
1211
1211
|
/** Callback to get React Flow methods for save/restore */
|
|
@@ -1213,7 +1213,7 @@ interface NetworkDiagramProps {
|
|
|
1213
1213
|
/** Show download button */
|
|
1214
1214
|
showDownloadButton?: boolean;
|
|
1215
1215
|
/** Download button position */
|
|
1216
|
-
downloadButtonPosition?:
|
|
1216
|
+
downloadButtonPosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
1217
1217
|
/** Custom download button text */
|
|
1218
1218
|
downloadButtonText?: string;
|
|
1219
1219
|
/** Download button styling options */
|
|
@@ -1228,6 +1228,15 @@ interface NetworkDiagramProps {
|
|
|
1228
1228
|
actionPanel?: NetworkDiagramActionPanelOptions;
|
|
1229
1229
|
/** Optional fitView options passed to React Flow */
|
|
1230
1230
|
fitViewOptions?: FitViewOptions;
|
|
1231
|
+
/**
|
|
1232
|
+
* Minimum zoom passed to React Flow. Defaults to 0.1 so the always-on
|
|
1233
|
+
* fitView can actually fit tall scenes (React Flow's own 0.5 default clamps
|
|
1234
|
+
* the fit and crops full-height racks, which viewport culling then never
|
|
1235
|
+
* mounts).
|
|
1236
|
+
*/
|
|
1237
|
+
minZoom?: number;
|
|
1238
|
+
/** Maximum zoom passed to React Flow. Defaults to 4. */
|
|
1239
|
+
maxZoom?: number;
|
|
1231
1240
|
/**
|
|
1232
1241
|
* Let React Flow render only viewport-visible nodes and edges.
|
|
1233
1242
|
* Defaults to true, matching the library's existing large-diagram behavior.
|
|
@@ -1253,6 +1262,30 @@ interface NetworkDiagramProps {
|
|
|
1253
1262
|
highlightedPortHandles?: DiagramPortHandleRef[];
|
|
1254
1263
|
/** Fired when a port handle is clicked (typically in read-only trace mode). */
|
|
1255
1264
|
onPortClick?: (payload: DiagramPortClickPayload) => void;
|
|
1265
|
+
/**
|
|
1266
|
+
* Pointer distance (px) within which a drag snaps onto a handle, forwarded to
|
|
1267
|
+
* React Flow's `connectionRadius`. Larger values make small port handles easier
|
|
1268
|
+
* to target; smaller values reduce mis-targeting on densely packed devices.
|
|
1269
|
+
* When omitted, React Flow's default is used.
|
|
1270
|
+
*/
|
|
1271
|
+
connectionRadius?: number;
|
|
1272
|
+
/**
|
|
1273
|
+
* Fired when a connection attempt is rejected by the diagram's validation
|
|
1274
|
+
* (incompatible endpoints, an occupied non-replaceable handle, a disallowed
|
|
1275
|
+
* fiber pairing, etc.). Lets host apps surface feedback instead of failing
|
|
1276
|
+
* silently. Not called for the continuous hover validation during a drag —
|
|
1277
|
+
* only when an actual connect or reconnect attempt is rejected.
|
|
1278
|
+
*/
|
|
1279
|
+
onConnectRejected?: (payload: NetworkConnectionRejection) => void;
|
|
1280
|
+
}
|
|
1281
|
+
/** Payload describing why a connection attempt was rejected. */
|
|
1282
|
+
interface NetworkConnectionRejection {
|
|
1283
|
+
/** The connection the user attempted to make. */
|
|
1284
|
+
connection: Connection;
|
|
1285
|
+
/** Human-readable reason the connection was rejected. */
|
|
1286
|
+
reason: string;
|
|
1287
|
+
/** Whether the rejection happened while creating a new edge or reconnecting an existing one. */
|
|
1288
|
+
phase: "connect" | "reconnect";
|
|
1256
1289
|
}
|
|
1257
1290
|
|
|
1258
1291
|
declare const NetworkDiagram: React$1.FC<NetworkDiagramProps>;
|
|
@@ -2827,4 +2860,4 @@ declare function useNetworkDiagram(store: NetworkDiagramStore): NetworkDiagramSt
|
|
|
2827
2860
|
declare function useNodes(store: NetworkDiagramStore): NetworkNode[];
|
|
2828
2861
|
declare function useEdges(store: NetworkDiagramStore): NetworkEdge[];
|
|
2829
2862
|
|
|
2830
|
-
export { type BuildPathLayoutOptions, COUPLERS_PER_PANEL, COUPLER_SLOT_HEIGHT_PX, COUPLER_WIDTH_PX, CableNode, ClosureNode, CouplerNode, DEFAULT_DIAGRAM_DIM_OPACITY, type DeviceFace, type DeviceImageFit, type DeviceImageOptions, type DeviceImageRepeat, DeviceNode, type DeviceNodeData, DevicePlacementError, type DevicePlacementValidation, type DevicePort, type DeviceStatus, type DeviceTemplateV2, type DiagramDocument, type DiagramEdge, type DiagramEdgeEndpoint, type DiagramEndpoint, DiagramErrorBoundary, type DiagramErrorBoundaryProps, type DiagramErrorBoundaryState, type DiagramExternalRef, type DiagramFocusOptions, type DiagramNode, type DiagramNodeKind, type DiagramNodePlacement, type DiagramNodeRender, type DiagramPortClickPayload, type DiagramPortContextValue, type DiagramPortHandleRef, DiagramPortProvider, type DiagramUiState, type EndpointConnectionKind, type EndpointMetadata, FIBER_COLORS_12, type FiberCable, type FiberCableType, type FiberColorId, FiberEdge, FiberNode, FibreCableWithTubesExpanded, type FibreCableWithTubesExpandedProps, type FibreFlowCable, type FibreFlowCableKind, type FibreFlowCableLayout, type FibreFlowCableNodeData, type FibreFlowCircuit, type FibreFlowClosure, type FibreFlowClosureNodeData, type FibreFlowColorMode, type FibreFlowEndpoint, type FibreFlowLayoutDirection, FibreFlowMap, type FibreFlowMapProps, type FibreFlowRow, type FibreFlowSplice, type FibreFlowTubeLabel, FibreSplitNode, HANDLE_EXTENSION_PX, type InventoryCableDTO, type InventoryDeviceDTO, type InventoryRackDTO, type ListPossiblePortHandleIdsOptions, type MountClass, MultiTubeCableNode, type NetBoxCable, type NetBoxDevice, type NetBoxDeviceTransformOptions, type NetBoxInterface, type NetBoxMappedPort, type NetBoxPortPosition, type NetBoxRack, NetworkDiagram, type NetworkDiagramActionPanelOptions, type NetworkDiagramFitViewOptions, type NetworkDiagramFlowMethods, type NetworkDiagramFlowObject, type NetworkDiagramInteractionOptions, type NetworkDiagramOptions, type NetworkDiagramProps, type NetworkDiagramState, type NetworkDiagramStore, type NetworkDiagramStoreApi, type NetworkDiagramStoreState, type NetworkDiagramToImageOptions, type NetworkDiagramValidateConnectionParams, type NetworkDiagramValidationResult, type NetworkEdge, type NetworkEdgeData, type NetworkEdgeType, type NetworkGraphSnapshot, type NetworkNode, type NetworkNodeData, type NetworkNodeDataBase, type NetworkNodeDataByType, type NetworkNodeType, PANEL_BORDER_WIDTH, PANEL_HEADER_HEIGHT, PANEL_HEIGHT_PX, PANEL_PADDING, PANEL_TUBE_TRAY_SPACING, PANEL_WIDTH_PX, POWER_CONNECTORS, PatchPanelNode, type PathLayoutDirection, type PathLayoutEdgeInput, type PathLayoutStepInput, type Port, type PortBlock, type PortCableType, type PortPosition, type PortType, type PortVisualDimensions, type PortVisualInput, type PortVisualKind, type PowerConnectorConfig, PowerEdge, type PowerPortStyle, type PowerSide, RACK_HEADER_HEIGHT, RACK_WIDTH_PX, type RackConfig, type RackDevice, type RackDeviceType, type RackLayoutMode, type RackMountMode, type RackMountedNodeType, RackNode, type RackNodeData, type RackNodeProps, type RackSchemaOptions, type RawNetboxTemplate, type RawTemplatePort, type RawTemplatePortBlock, type ReplaceEdgeOptions, type SpliceConfig, SpliceNode, SplicePlacementError, type SplicePlacementValidation, type SpliceSchemaOptions, type SpliceTrayConfig, SpliceTrayNode, TEMPLATE_SCHEMA_VERSION, type TemplateFaceData, type TemplateFrontRearPortLink, type TemplateParseResult, type TemplatePort, type TemplatePortBlock, type TemplateSource, type TemplateValidationIssue, type TemplateValidationReport, type TemplateWidth, TubeNode, type UNumberingDirection, U_HEIGHT_PX, type ValidateConnectionParams, type ValidationResult, VerticalPDU, Width, addDeviceToRack, addSpliceToTray, applyDeviceDisplayToNodes, applyDiagramFocusToEdges, applyDiagramFocusToNodes, baseColorFor, buildDevicePortGroupsFromPorts, buildNodesFromRackConfig, buildNodesFromSpliceConfig, buildPathLayoutGraph, buildPortBlocksFromPorts, buildPortHandleId, buildPortHandleId as buildReactNetworksHandleId, buildReactNetworksPortGroupsFromPorts, calculateClosureDimensions, calculateCouplerRightX, calculateCouplerSlotSpacing, calculateCouplerSpacing, calculateDevicePositionFromU, calculatePanelDimensions, calculateSlotPositionFromY, calculateSplicePositionFromNumber, calculateUPositions, calculateYFromSlotPosition, countTemplateFacePorts, createNetworkDiagramStore, createRackConfigFromNodes, createSpliceConfigFromNodes, diagramDocumentToNetworkGraph, fiberSolidOrStriped, findNearestRack, findNextAvailableHolderPosition, findNextAvailableUPosition, flattenDevicePortsFromGroups, flattenReactNetworksPortGroups, generateLayout, getConnectorConfig, getCouplerDimensions, getDefaultDeviceFace, getDeviceConnectorType, getEndpointMetadata, getFiberColor, getFrontPortBlocks, getInnerContentWidth, getPDUPortType, getPanelHeight, getPanelWidth, getPowerPortStyle, getRackBounds, getRearPortBlocks, getResolvedPortBlocks, getStandardPortVisualDimensions, getStatusColor, getTrayDimensions, getTubeDimensions, hasDiagramFocus, hasFrontPorts, hasRearPorts, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToDiagramDocument, inventoryToNetworkDiagram, isDeviceDiagramNode, isDiagramPortHandleHighlighted, isEdgeInDiagramFocus, isHighPowerConnector, isNodeInDiagramFocus, isPointInRack, isPowerPortType, isStriped, isUPositionAvailable, listPossiblePortHandleIds, looksLikePowerHandleId, netboxCableToNetworkEdge, netboxDeviceToNetworkNode, netboxRackToNetworkNode, netboxToDiagramDocument, netboxToNetworkDiagram, networkGraphToDiagramDocument, normalizeDevicePorts, normalizeDirectionalHandleId, normalizeHandleId, normalizePortPositionInput, normalizeReactNetworksPorts, parseNetboxTemplate, parseSemanticPortPosition, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, resolveDevicePortBlocksFromFlatPorts, resolveDevicePortFace, resolveDevicePortGroup, resolveEndpointCompatibilityKeys, resolveNodeDevicePorts, resolvePortVisualKind, resolveReactNetworksNodePorts, resolveReactNetworksPortFace, resolveReactNetworksPortGroup, snapToCouplerPosition, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useDiagramPortInteraction, useNetworkDiagram, validateAndSnapDevice, validatePortHandleOnNodeData, validateRackDevicePlacements, validateRenderFidelity, validateSplicePlacements };
|
|
2863
|
+
export { type BuildPathLayoutOptions, COUPLERS_PER_PANEL, COUPLER_SLOT_HEIGHT_PX, COUPLER_WIDTH_PX, CableNode, ClosureNode, CouplerNode, DEFAULT_DIAGRAM_DIM_OPACITY, type DeviceFace, type DeviceImageFit, type DeviceImageOptions, type DeviceImageRepeat, DeviceNode, type DeviceNodeData, DevicePlacementError, type DevicePlacementValidation, type DevicePort, type DeviceStatus, type DeviceTemplateV2, type DiagramDocument, type DiagramEdge, type DiagramEdgeEndpoint, type DiagramEndpoint, DiagramErrorBoundary, type DiagramErrorBoundaryProps, type DiagramErrorBoundaryState, type DiagramExternalRef, type DiagramFocusOptions, type DiagramNode, type DiagramNodeKind, type DiagramNodePlacement, type DiagramNodeRender, type DiagramPortClickPayload, type DiagramPortContextValue, type DiagramPortHandleRef, DiagramPortProvider, type DiagramUiState, type EndpointConnectionKind, type EndpointMetadata, FIBER_COLORS_12, type FiberCable, type FiberCableType, type FiberColorId, FiberEdge, FiberNode, FibreCableWithTubesExpanded, type FibreCableWithTubesExpandedProps, type FibreFlowCable, type FibreFlowCableKind, type FibreFlowCableLayout, type FibreFlowCableNodeData, type FibreFlowCircuit, type FibreFlowClosure, type FibreFlowClosureNodeData, type FibreFlowColorMode, type FibreFlowEndpoint, type FibreFlowLayoutDirection, FibreFlowMap, type FibreFlowMapProps, type FibreFlowRow, type FibreFlowSplice, type FibreFlowTubeLabel, FibreSplitNode, HANDLE_EXTENSION_PX, type InventoryCableDTO, type InventoryDeviceDTO, type InventoryRackDTO, type ListPossiblePortHandleIdsOptions, type MountClass, MultiTubeCableNode, type NetBoxCable, type NetBoxDevice, type NetBoxDeviceTransformOptions, type NetBoxInterface, type NetBoxMappedPort, type NetBoxPortPosition, type NetBoxRack, type NetworkConnectionRejection, NetworkDiagram, type NetworkDiagramActionPanelOptions, type NetworkDiagramFitViewOptions, type NetworkDiagramFlowMethods, type NetworkDiagramFlowObject, type NetworkDiagramInteractionOptions, type NetworkDiagramOptions, type NetworkDiagramProps, type NetworkDiagramState, type NetworkDiagramStore, type NetworkDiagramStoreApi, type NetworkDiagramStoreState, type NetworkDiagramToImageOptions, type NetworkDiagramValidateConnectionParams, type NetworkDiagramValidationResult, type NetworkEdge, type NetworkEdgeData, type NetworkEdgeType, type NetworkGraphSnapshot, type NetworkNode, type NetworkNodeData, type NetworkNodeDataBase, type NetworkNodeDataByType, type NetworkNodeType, PANEL_BORDER_WIDTH, PANEL_HEADER_HEIGHT, PANEL_HEIGHT_PX, PANEL_PADDING, PANEL_TUBE_TRAY_SPACING, PANEL_WIDTH_PX, POWER_CONNECTORS, PatchPanelNode, type PathLayoutDirection, type PathLayoutEdgeInput, type PathLayoutStepInput, type Port, type PortBlock, type PortCableType, type PortPosition, type PortType, type PortVisualDimensions, type PortVisualInput, type PortVisualKind, type PowerConnectorConfig, PowerEdge, type PowerPortStyle, type PowerSide, RACK_HEADER_HEIGHT, RACK_WIDTH_PX, type RackConfig, type RackDevice, type RackDeviceType, type RackLayoutMode, type RackMountMode, type RackMountedNodeType, RackNode, type RackNodeData, type RackNodeProps, type RackSchemaOptions, type RawNetboxTemplate, type RawTemplatePort, type RawTemplatePortBlock, type ReplaceEdgeOptions, type SpliceConfig, SpliceNode, SplicePlacementError, type SplicePlacementValidation, type SpliceSchemaOptions, type SpliceTrayConfig, SpliceTrayNode, TEMPLATE_SCHEMA_VERSION, type TemplateFaceData, type TemplateFrontRearPortLink, type TemplateParseResult, type TemplatePort, type TemplatePortBlock, type TemplateSource, type TemplateValidationIssue, type TemplateValidationReport, type TemplateWidth, TubeNode, type UNumberingDirection, U_HEIGHT_PX, type ValidateConnectionParams, type ValidationResult, VerticalPDU, Width, addDeviceToRack, addSpliceToTray, applyDeviceDisplayToNodes, applyDiagramFocusToEdges, applyDiagramFocusToNodes, baseColorFor, buildDevicePortGroupsFromPorts, buildNodesFromRackConfig, buildNodesFromSpliceConfig, buildPathLayoutGraph, buildPortBlocksFromPorts, buildPortHandleId, buildPortHandleId as buildReactNetworksHandleId, buildReactNetworksPortGroupsFromPorts, calculateClosureDimensions, calculateCouplerRightX, calculateCouplerSlotSpacing, calculateCouplerSpacing, calculateDevicePositionFromU, calculatePanelDimensions, calculateSlotPositionFromY, calculateSplicePositionFromNumber, calculateUPositions, calculateYFromSlotPosition, countTemplateFacePorts, createNetworkDiagramStore, createRackConfigFromNodes, createSpliceConfigFromNodes, diagramDocumentToNetworkGraph, fiberSolidOrStriped, findNearestRack, findNextAvailableHolderPosition, findNextAvailableUPosition, flattenDevicePortsFromGroups, flattenReactNetworksPortGroups, generateLayout, getConnectorConfig, getCouplerDimensions, getDefaultDeviceFace, getDeviceConnectorType, getEndpointMetadata, getFiberColor, getFrontPortBlocks, getInnerContentWidth, getPDUPortType, getPanelHeight, getPanelWidth, getPowerPortStyle, getRackBounds, getRearPortBlocks, getResolvedPortBlocks, getStandardPortVisualDimensions, getStatusColor, getTrayDimensions, getTubeDimensions, hasDiagramFocus, hasFrontPorts, hasRearPorts, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToDiagramDocument, inventoryToNetworkDiagram, isDeviceDiagramNode, isDiagramPortHandleHighlighted, isEdgeInDiagramFocus, isHighPowerConnector, isNodeInDiagramFocus, isPointInRack, isPowerPortType, isStriped, isUPositionAvailable, listPossiblePortHandleIds, looksLikePowerHandleId, netboxCableToNetworkEdge, netboxDeviceToNetworkNode, netboxRackToNetworkNode, netboxToDiagramDocument, netboxToNetworkDiagram, networkGraphToDiagramDocument, normalizeDevicePorts, normalizeDirectionalHandleId, normalizeHandleId, normalizePortPositionInput, normalizeReactNetworksPorts, parseNetboxTemplate, parseSemanticPortPosition, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, resolveDevicePortBlocksFromFlatPorts, resolveDevicePortFace, resolveDevicePortGroup, resolveEndpointCompatibilityKeys, resolveNodeDevicePorts, resolvePortVisualKind, resolveReactNetworksNodePorts, resolveReactNetworksPortFace, resolveReactNetworksPortGroup, snapToCouplerPosition, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useDiagramPortInteraction, useNetworkDiagram, validateAndSnapDevice, validatePortHandleOnNodeData, validateRackDevicePlacements, validateRenderFidelity, validateSplicePlacements };
|