@mp70/react-networks 0.5.0-rc.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 +61 -11
- package/dist/index.css +11 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +323 -137
- package/dist/index.d.ts +323 -137
- 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/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React$1, { Component, ReactNode, ErrorInfo } from 'react';
|
|
2
|
-
import
|
|
1
|
+
import React$1, { Component, ReactNode, ErrorInfo, CSSProperties } from 'react';
|
|
2
|
+
import * as reactflow from 'reactflow';
|
|
3
|
+
import { Node, Connection, NodeTypes, EdgeTypes, Edge, ConnectionMode, ReactFlowInstance, Viewport, FitViewOptions, NodeProps, EdgeProps } from 'reactflow';
|
|
3
4
|
|
|
4
5
|
type FibreFlowCableKind = 'simple' | 'tube';
|
|
5
6
|
interface FibreFlowEndpoint {
|
|
@@ -240,12 +241,12 @@ declare enum Width {
|
|
|
240
241
|
* Port type enumeration
|
|
241
242
|
* @public
|
|
242
243
|
*/
|
|
243
|
-
type PortType =
|
|
244
|
+
type PortType = "ethernet" | "rj45" | "fiber" | "console" | "mgmt" | "usb" | "power_ac" | "power_c13" | "power_c19";
|
|
244
245
|
/**
|
|
245
246
|
* Cable types used for connected network ports.
|
|
246
247
|
* @public
|
|
247
248
|
*/
|
|
248
|
-
type PortCableType =
|
|
249
|
+
type PortCableType = "smf" | "cat6" | "om3" | "om4" | "om5" | "cat5e" | "cat6a" | "cat7" | "fiber" | "ethernet";
|
|
249
250
|
/**
|
|
250
251
|
* Device image fit options.
|
|
251
252
|
*
|
|
@@ -254,12 +255,12 @@ type PortCableType = 'smf' | 'cat6' | 'om3' | 'om4' | 'om5' | 'cat5e' | 'cat6a'
|
|
|
254
255
|
*
|
|
255
256
|
* @public
|
|
256
257
|
*/
|
|
257
|
-
type DeviceImageFit =
|
|
258
|
+
type DeviceImageFit = "cover" | "contain" | "contain-height" | "fill" | "none" | "scale-down";
|
|
258
259
|
/**
|
|
259
260
|
* Device image repeat options.
|
|
260
261
|
* @public
|
|
261
262
|
*/
|
|
262
|
-
type DeviceImageRepeat =
|
|
263
|
+
type DeviceImageRepeat = "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
|
|
263
264
|
/**
|
|
264
265
|
* Shared image configuration for rack-mounted devices and device nodes.
|
|
265
266
|
* @public
|
|
@@ -288,7 +289,7 @@ interface DeviceImageOptions {
|
|
|
288
289
|
*/
|
|
289
290
|
interface PortPosition {
|
|
290
291
|
/** Handle side on the node */
|
|
291
|
-
side?:
|
|
292
|
+
side?: "top" | "right" | "bottom" | "left";
|
|
292
293
|
/** Side offset as percentage (0-100) */
|
|
293
294
|
offsetPercent?: number;
|
|
294
295
|
/** Side offset in pixels */
|
|
@@ -314,7 +315,7 @@ interface DevicePort {
|
|
|
314
315
|
/** Display label for the port */
|
|
315
316
|
label: string;
|
|
316
317
|
/** Front/rear device face. `back` is accepted as an alias for `rear`. */
|
|
317
|
-
face?: DeviceFace |
|
|
318
|
+
face?: DeviceFace | "back";
|
|
318
319
|
/** Optional block/group name (for example `Network Ports`, `QSFP28`, `Power Ports`) */
|
|
319
320
|
group?: string;
|
|
320
321
|
/** Optional source/detected family label used for visual kind inference */
|
|
@@ -326,7 +327,7 @@ interface DevicePort {
|
|
|
326
327
|
/** Cable type for connection validation */
|
|
327
328
|
cableType?: PortCableType;
|
|
328
329
|
/** Optional power connector type for rendering (mainly for PDU ports) */
|
|
329
|
-
connectorType?:
|
|
330
|
+
connectorType?: "C13" | "C14" | "C19" | "C20";
|
|
330
331
|
/** Optional compatibility keys. When omitted, defaults are derived from type/cable/connector data. */
|
|
331
332
|
compatibility?: string[];
|
|
332
333
|
/** Optional sort order within a face/group bucket */
|
|
@@ -352,7 +353,7 @@ interface Port {
|
|
|
352
353
|
/** Cable type for connection validation */
|
|
353
354
|
cableType?: PortCableType;
|
|
354
355
|
/** Optional power connector type for rendering (mainly for PDU ports) */
|
|
355
|
-
connectorType?:
|
|
356
|
+
connectorType?: "C13" | "C14" | "C19" | "C20";
|
|
356
357
|
/** Optional compatibility keys. When omitted, defaults are derived from type/cable/connector data. */
|
|
357
358
|
compatibility?: string[];
|
|
358
359
|
/** Optional explicit handle placement */
|
|
@@ -372,37 +373,48 @@ interface PortBlock {
|
|
|
372
373
|
* Network node types supported by the diagram
|
|
373
374
|
* @public
|
|
374
375
|
*/
|
|
375
|
-
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";
|
|
376
377
|
/**
|
|
377
378
|
* Device status states
|
|
378
379
|
* @public
|
|
379
380
|
*/
|
|
380
|
-
type DeviceStatus =
|
|
381
|
+
type DeviceStatus = "active" | "inactive" | "maintenance";
|
|
381
382
|
/**
|
|
382
383
|
* Device face orientations
|
|
383
384
|
* @public
|
|
384
385
|
*/
|
|
385
|
-
type DeviceFace =
|
|
386
|
+
type DeviceFace = "front" | "rear";
|
|
387
|
+
type DiagramPortHandleRef = {
|
|
388
|
+
nodeId: string;
|
|
389
|
+
handleId: string;
|
|
390
|
+
};
|
|
391
|
+
type DiagramPortClickPayload = {
|
|
392
|
+
nodeId: string;
|
|
393
|
+
handleId: string;
|
|
394
|
+
groupName: string;
|
|
395
|
+
portLabel: string;
|
|
396
|
+
face: DeviceFace;
|
|
397
|
+
};
|
|
386
398
|
/**
|
|
387
399
|
* Rack rendering layout modes.
|
|
388
400
|
* @public
|
|
389
401
|
*/
|
|
390
|
-
type RackLayoutMode =
|
|
402
|
+
type RackLayoutMode = "single-face" | "split-face";
|
|
391
403
|
/**
|
|
392
404
|
* Rack mounting behavior for a device.
|
|
393
405
|
* @public
|
|
394
406
|
*/
|
|
395
|
-
type RackMountMode =
|
|
407
|
+
type RackMountMode = "front" | "rear" | "both";
|
|
396
408
|
/**
|
|
397
409
|
* Power port side configuration
|
|
398
410
|
* @public
|
|
399
411
|
*/
|
|
400
|
-
type PowerSide =
|
|
412
|
+
type PowerSide = "left" | "right";
|
|
401
413
|
/**
|
|
402
414
|
* U numbering direction for racks
|
|
403
415
|
* @public
|
|
404
416
|
*/
|
|
405
|
-
type UNumberingDirection =
|
|
417
|
+
type UNumberingDirection = "bottom-up" | "top-down";
|
|
406
418
|
/**
|
|
407
419
|
* Shared node data fields available across node types.
|
|
408
420
|
* Specific node kinds can narrow these fields via `NetworkNodeDataByType`.
|
|
@@ -413,22 +425,24 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
|
|
|
413
425
|
label: string;
|
|
414
426
|
/** Current status of the node/device */
|
|
415
427
|
status?: DeviceStatus | string;
|
|
416
|
-
/** Simple flat port input. Use `portGroups` / `rearPortGroups` for explicit grouped control. */
|
|
417
|
-
ports?: DevicePort[] | number;
|
|
428
|
+
/** Simple flat port input or grouped port blocks. Use `portGroups` / `rearPortGroups` for explicit grouped control. */
|
|
429
|
+
ports?: DevicePort[] | PortBlock[] | number;
|
|
418
430
|
/** Advanced grouped front port input */
|
|
419
431
|
portGroups?: PortBlock[];
|
|
420
432
|
/** Advanced grouped rear port input */
|
|
421
433
|
rearPortGroups?: PortBlock[];
|
|
434
|
+
/** Grouped rear port blocks (rack JSON alias for `rearPortGroups`) */
|
|
435
|
+
rearPorts?: PortBlock[];
|
|
422
436
|
/** List of connected node IDs */
|
|
423
437
|
connections?: string[];
|
|
424
438
|
/** NetBox integration ID */
|
|
425
439
|
netboxId?: number | string;
|
|
426
440
|
/** NetBox object type */
|
|
427
|
-
netboxType?:
|
|
441
|
+
netboxType?: "device" | "rack" | "interface" | "cable" | string;
|
|
428
442
|
/** Inventory integration ID */
|
|
429
443
|
inventoryId?: number | string;
|
|
430
444
|
/** Inventory object type */
|
|
431
|
-
inventoryType?:
|
|
445
|
+
inventoryType?: "device" | "rack" | "interface" | "cable" | string;
|
|
432
446
|
/** Rack height in U units */
|
|
433
447
|
uHeight?: number;
|
|
434
448
|
/** Device position within rack in U units */
|
|
@@ -445,6 +459,11 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
|
|
|
445
459
|
mountMode?: RackMountMode;
|
|
446
460
|
/** Device type specification */
|
|
447
461
|
deviceType?: string;
|
|
462
|
+
/**
|
|
463
|
+
* When false, device elevation renders as a status-colored block without front/rear photos.
|
|
464
|
+
* Defaults to true (show photos when URLs exist).
|
|
465
|
+
*/
|
|
466
|
+
showDeviceImages?: boolean;
|
|
448
467
|
/** Device manufacturer */
|
|
449
468
|
manufacturer?: string;
|
|
450
469
|
/** Device role in network */
|
|
@@ -458,13 +477,13 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
|
|
|
458
477
|
/** Number of AC power ports */
|
|
459
478
|
powerPorts?: number;
|
|
460
479
|
/** Optional explicit PDU connector sequence */
|
|
461
|
-
portTypes?: Array<
|
|
480
|
+
portTypes?: Array<"C13" | "C19">;
|
|
462
481
|
/** Optional grouped PDU ports (supports custom positions/types) */
|
|
463
482
|
pduPortGroups?: PortBlock[];
|
|
464
483
|
/** Vertical PDU width in pixels */
|
|
465
484
|
widthPx?: number;
|
|
466
485
|
/** Optional management unit position for vertical PDUs */
|
|
467
|
-
mgmt_unit?:
|
|
486
|
+
mgmt_unit?: "top" | "middle" | "bottom";
|
|
468
487
|
/** U numbering direction for rack nodes */
|
|
469
488
|
uNumberingDirection?: UNumberingDirection;
|
|
470
489
|
/** Custom header text for rack nodes */
|
|
@@ -476,13 +495,13 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
|
|
|
476
495
|
/** Loss value in dB for splice nodes */
|
|
477
496
|
lossDb?: number;
|
|
478
497
|
/** Splice mode */
|
|
479
|
-
mode?:
|
|
498
|
+
mode?: "single" | "ribbon";
|
|
480
499
|
/** Legacy ribbon flag */
|
|
481
500
|
ribbon?: boolean;
|
|
482
501
|
/** Ribbon fiber IDs */
|
|
483
502
|
ribbonFiberIds?: number[];
|
|
484
503
|
/** Connector type for coupler nodes */
|
|
485
|
-
connector?:
|
|
504
|
+
connector?: "SC" | "LC";
|
|
486
505
|
/** Number of fibers for coupler nodes (1, 2, or 4) */
|
|
487
506
|
couplerFiberCount?: 1 | 2 | 4;
|
|
488
507
|
/** Optional port labels for left side of coupler */
|
|
@@ -510,7 +529,7 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
|
|
|
510
529
|
/** Header text for container nodes */
|
|
511
530
|
header?: string;
|
|
512
531
|
/** Type of fibre splitter: 'splitter' or 'WDM' (default: 'splitter') */
|
|
513
|
-
splitterType?:
|
|
532
|
+
splitterType?: "splitter" | "WDM";
|
|
514
533
|
/** Number of input fibers on the left (1 or 2, default: 1) */
|
|
515
534
|
inputCount?: number;
|
|
516
535
|
/** Number of output fibers on the right (1-64, default: 8) */
|
|
@@ -532,7 +551,7 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
|
|
|
532
551
|
/** Rotation in degrees for rotatable nodes */
|
|
533
552
|
rotation?: number;
|
|
534
553
|
/** Tube handle orientation */
|
|
535
|
-
startOn?:
|
|
554
|
+
startOn?: "left-center" | "left" | "right";
|
|
536
555
|
/** Rack metadata for integrations */
|
|
537
556
|
facilityId?: string | number | null;
|
|
538
557
|
/** Rack serial metadata */
|
|
@@ -554,7 +573,7 @@ interface NetworkNodeDataBase extends DeviceImageOptions {
|
|
|
554
573
|
devices?: unknown[];
|
|
555
574
|
cables?: unknown[];
|
|
556
575
|
/** UI color mode metadata */
|
|
557
|
-
colorMode?:
|
|
576
|
+
colorMode?: "light" | "dark" | "system";
|
|
558
577
|
/** Generic dimensions used by some helpers */
|
|
559
578
|
height?: number;
|
|
560
579
|
headerHeight?: number;
|
|
@@ -575,7 +594,7 @@ interface RackNodeData extends NetworkNodeDataBase {
|
|
|
575
594
|
* @public
|
|
576
595
|
*/
|
|
577
596
|
interface DeviceNodeData extends NetworkNodeDataBase {
|
|
578
|
-
ports?: DevicePort[] | number;
|
|
597
|
+
ports?: DevicePort[] | PortBlock[] | number;
|
|
579
598
|
}
|
|
580
599
|
/**
|
|
581
600
|
* Fibre flow cable node data.
|
|
@@ -583,13 +602,13 @@ interface DeviceNodeData extends NetworkNodeDataBase {
|
|
|
583
602
|
*/
|
|
584
603
|
interface FibreFlowCableNodeData extends NetworkNodeDataBase {
|
|
585
604
|
cable: FibreFlowCable;
|
|
586
|
-
side:
|
|
605
|
+
side: "left" | "right";
|
|
587
606
|
rowHeight: number;
|
|
588
607
|
columnWidth: number;
|
|
589
608
|
showTubeLabels: boolean;
|
|
590
609
|
showFiberNumbers: boolean;
|
|
591
610
|
layout: unknown;
|
|
592
|
-
colorMode?:
|
|
611
|
+
colorMode?: "dark" | "light";
|
|
593
612
|
}
|
|
594
613
|
/**
|
|
595
614
|
* Fibre flow closure node data.
|
|
@@ -599,7 +618,7 @@ interface FibreFlowClosureNodeData extends NetworkNodeDataBase {
|
|
|
599
618
|
width?: number;
|
|
600
619
|
height?: number;
|
|
601
620
|
headerHeight?: number;
|
|
602
|
-
colorMode?:
|
|
621
|
+
colorMode?: "dark" | "light";
|
|
603
622
|
}
|
|
604
623
|
/**
|
|
605
624
|
* Mapping from node type to corresponding data type.
|
|
@@ -611,19 +630,19 @@ interface NetworkNodeDataByType {
|
|
|
611
630
|
router: DeviceNodeData;
|
|
612
631
|
server: DeviceNodeData;
|
|
613
632
|
fiber: NetworkNodeDataBase;
|
|
614
|
-
|
|
633
|
+
"patch-panel": NetworkNodeDataBase;
|
|
615
634
|
device: DeviceNodeData;
|
|
616
|
-
|
|
635
|
+
"vertical-pdu": NetworkNodeDataBase;
|
|
617
636
|
splice: NetworkNodeDataBase;
|
|
618
|
-
|
|
637
|
+
"splice-tray": NetworkNodeDataBase;
|
|
619
638
|
tube: NetworkNodeDataBase;
|
|
620
639
|
cable: NetworkNodeDataBase;
|
|
621
|
-
|
|
640
|
+
"multi-tube-cable": NetworkNodeDataBase;
|
|
622
641
|
coupler: NetworkNodeDataBase;
|
|
623
642
|
closure: NetworkNodeDataBase;
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
643
|
+
"fibre-split": NetworkNodeDataBase;
|
|
644
|
+
"fibre-flow-cable": FibreFlowCableNodeData;
|
|
645
|
+
"fibre-flow-closure": FibreFlowClosureNodeData;
|
|
627
646
|
}
|
|
628
647
|
/**
|
|
629
648
|
* Union of all node data variants.
|
|
@@ -644,7 +663,7 @@ type NetworkNode<TType extends NetworkNodeType = NetworkNodeType, TExtra = unkno
|
|
|
644
663
|
* Network edge types
|
|
645
664
|
* @public
|
|
646
665
|
*/
|
|
647
|
-
type NetworkEdgeType =
|
|
666
|
+
type NetworkEdgeType = "fiber" | "ethernet" | "power" | "smoothstep" | "step" | "thick-cable" | "fibre-flow" | "fibre-flow-link";
|
|
648
667
|
/**
|
|
649
668
|
* Edge data payload.
|
|
650
669
|
* @public
|
|
@@ -657,7 +676,7 @@ interface NetworkEdgeData {
|
|
|
657
676
|
/** Edge color for styling */
|
|
658
677
|
color?: string;
|
|
659
678
|
/** Edge kind for styling/validation */
|
|
660
|
-
kind?:
|
|
679
|
+
kind?: "fiber" | "power" | "network";
|
|
661
680
|
/** Whether this edge represents a ribbon fiber connection */
|
|
662
681
|
isRibbon?: boolean;
|
|
663
682
|
/** Array of fiber IDs for ribbon mode (6-12 fibers) */
|
|
@@ -676,10 +695,10 @@ interface NetworkEdgeData {
|
|
|
676
695
|
cableType?: PortCableType;
|
|
677
696
|
/** NetBox integration metadata */
|
|
678
697
|
netboxId?: number | string;
|
|
679
|
-
netboxType?:
|
|
698
|
+
netboxType?: "device" | "rack" | "interface" | "cable" | string;
|
|
680
699
|
/** Inventory integration metadata */
|
|
681
700
|
inventoryId?: number | string;
|
|
682
|
-
inventoryType?:
|
|
701
|
+
inventoryType?: "device" | "rack" | "interface" | "cable" | string;
|
|
683
702
|
/** Status metadata */
|
|
684
703
|
status?: string;
|
|
685
704
|
/** Endpoint metadata */
|
|
@@ -736,7 +755,7 @@ interface DiagramDocument {
|
|
|
736
755
|
* Node kinds used by the document model.
|
|
737
756
|
* @public
|
|
738
757
|
*/
|
|
739
|
-
type DiagramNodeKind =
|
|
758
|
+
type DiagramNodeKind = "rack" | "equipment" | "pdu" | "fiber" | "tube" | "cable" | "multi-tube-cable" | "splice" | "coupler" | "splitter" | "container" | "fibre-flow-cable" | "fibre-flow-closure";
|
|
740
759
|
/**
|
|
741
760
|
* Placement data for document nodes.
|
|
742
761
|
* @public
|
|
@@ -747,7 +766,7 @@ interface DiagramNodePlacement {
|
|
|
747
766
|
y: number;
|
|
748
767
|
};
|
|
749
768
|
parentId?: string;
|
|
750
|
-
extent?:
|
|
769
|
+
extent?: "parent";
|
|
751
770
|
rack?: {
|
|
752
771
|
uPosition?: number;
|
|
753
772
|
mountMode?: RackMountMode;
|
|
@@ -767,10 +786,10 @@ interface DiagramNodePlacement {
|
|
|
767
786
|
interface DiagramEndpoint {
|
|
768
787
|
id: string;
|
|
769
788
|
label: string;
|
|
770
|
-
face?: DeviceFace |
|
|
789
|
+
face?: DeviceFace | "internal";
|
|
771
790
|
group?: string;
|
|
772
|
-
role?:
|
|
773
|
-
medium?:
|
|
791
|
+
role?: "network" | "power" | "fiber" | "tube" | "splice" | "coupler" | "splitter" | "cable" | "generic";
|
|
792
|
+
medium?: "ethernet" | "fiber" | "power" | "tube" | "generic";
|
|
774
793
|
type?: PortType;
|
|
775
794
|
cableType?: PortCableType;
|
|
776
795
|
connector?: string;
|
|
@@ -789,7 +808,7 @@ interface DiagramNodeRender {
|
|
|
789
808
|
height?: number;
|
|
790
809
|
header?: string;
|
|
791
810
|
color?: string;
|
|
792
|
-
colorMode?:
|
|
811
|
+
colorMode?: "light" | "dark" | "system";
|
|
793
812
|
rackWidthPx?: number;
|
|
794
813
|
rackFaceGapPx?: number;
|
|
795
814
|
images?: DeviceImageOptions;
|
|
@@ -804,7 +823,7 @@ interface DiagramNodeRender {
|
|
|
804
823
|
* @public
|
|
805
824
|
*/
|
|
806
825
|
interface DiagramExternalRef {
|
|
807
|
-
source:
|
|
826
|
+
source: "netbox" | "inventory" | string;
|
|
808
827
|
id: string | number;
|
|
809
828
|
type?: string;
|
|
810
829
|
metadata?: Record<string, unknown>;
|
|
@@ -861,7 +880,7 @@ interface DiagramUiState {
|
|
|
861
880
|
* Rack device types
|
|
862
881
|
* @public
|
|
863
882
|
*/
|
|
864
|
-
type RackDeviceType =
|
|
883
|
+
type RackDeviceType = "server" | "switch" | "router" | "patch-panel" | "ups";
|
|
865
884
|
/**
|
|
866
885
|
* Rack configuration structure
|
|
867
886
|
* @public
|
|
@@ -912,14 +931,16 @@ interface RackDevice extends DeviceImageOptions {
|
|
|
912
931
|
mountMode?: RackMountMode;
|
|
913
932
|
/** Device role in network */
|
|
914
933
|
role?: string;
|
|
915
|
-
/** Recommended simple port input
|
|
916
|
-
ports?: DevicePort[];
|
|
934
|
+
/** Recommended simple port input (flat `DevicePort[]` or grouped `PortBlock[]`). */
|
|
935
|
+
ports?: DevicePort[] | PortBlock[];
|
|
917
936
|
/** Current status of the device */
|
|
918
937
|
status?: DeviceStatus | string;
|
|
919
938
|
/** Advanced grouped front port input */
|
|
920
939
|
portGroups?: PortBlock[];
|
|
921
940
|
/** Advanced grouped rear port input */
|
|
922
941
|
rearPortGroups?: PortBlock[];
|
|
942
|
+
/** Grouped rear port blocks (rack JSON alias for `rearPortGroups`) */
|
|
943
|
+
rearPorts?: PortBlock[];
|
|
923
944
|
/** Power port side for rear face */
|
|
924
945
|
powerSide?: PowerSide;
|
|
925
946
|
/** Connected device IDs */
|
|
@@ -929,7 +950,7 @@ interface RackDevice extends DeviceImageOptions {
|
|
|
929
950
|
* Fiber cable types
|
|
930
951
|
* @public
|
|
931
952
|
*/
|
|
932
|
-
type FiberCableType =
|
|
953
|
+
type FiberCableType = "single-mode" | "multi-mode";
|
|
933
954
|
/**
|
|
934
955
|
* Fiber cable configuration
|
|
935
956
|
* @public
|
|
@@ -967,7 +988,7 @@ interface SpliceConfig {
|
|
|
967
988
|
/** Loss value in dB */
|
|
968
989
|
lossDb?: number;
|
|
969
990
|
/** Splice mode: 'single' for individual fiber, 'ribbon' for ribbon splices */
|
|
970
|
-
mode?:
|
|
991
|
+
mode?: "single" | "ribbon";
|
|
971
992
|
/** For ribbon mode: array of fiber IDs (6-12) in the ribbon */
|
|
972
993
|
ribbonFiberIds?: number[];
|
|
973
994
|
}
|
|
@@ -1070,7 +1091,7 @@ interface NetworkDiagramToImageOptions {
|
|
|
1070
1091
|
* Fit-view options that support targeting node IDs directly.
|
|
1071
1092
|
* @public
|
|
1072
1093
|
*/
|
|
1073
|
-
interface NetworkDiagramFitViewOptions extends Omit<FitViewOptions,
|
|
1094
|
+
interface NetworkDiagramFitViewOptions extends Omit<FitViewOptions, "nodes"> {
|
|
1074
1095
|
/** Optional node IDs to fit */
|
|
1075
1096
|
nodes?: string[];
|
|
1076
1097
|
}
|
|
@@ -1184,7 +1205,7 @@ interface NetworkDiagramProps {
|
|
|
1184
1205
|
/** Allow rack-mounted devices to move between racks/ungroup on drag and drop. Defaults to true. */
|
|
1185
1206
|
reAssignable?: boolean;
|
|
1186
1207
|
/** Color mode for the diagram */
|
|
1187
|
-
colorMode?:
|
|
1208
|
+
colorMode?: "light" | "dark" | "system";
|
|
1188
1209
|
/** Callback when React Flow instance is initialized */
|
|
1189
1210
|
onInit?: (instance: ReactFlowInstance) => void;
|
|
1190
1211
|
/** Callback to get React Flow methods for save/restore */
|
|
@@ -1192,7 +1213,7 @@ interface NetworkDiagramProps {
|
|
|
1192
1213
|
/** Show download button */
|
|
1193
1214
|
showDownloadButton?: boolean;
|
|
1194
1215
|
/** Download button position */
|
|
1195
|
-
downloadButtonPosition?:
|
|
1216
|
+
downloadButtonPosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
1196
1217
|
/** Custom download button text */
|
|
1197
1218
|
downloadButtonText?: string;
|
|
1198
1219
|
/** Download button styling options */
|
|
@@ -1207,11 +1228,64 @@ interface NetworkDiagramProps {
|
|
|
1207
1228
|
actionPanel?: NetworkDiagramActionPanelOptions;
|
|
1208
1229
|
/** Optional fitView options passed to React Flow */
|
|
1209
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;
|
|
1210
1240
|
/**
|
|
1211
1241
|
* Let React Flow render only viewport-visible nodes and edges.
|
|
1212
1242
|
* Defaults to true, matching the library's existing large-diagram behavior.
|
|
1213
1243
|
*/
|
|
1214
1244
|
onlyRenderVisibleElements?: boolean;
|
|
1245
|
+
/** Node IDs to keep at full opacity when diagram focus dimming is enabled */
|
|
1246
|
+
highlightedNodeIds?: string[];
|
|
1247
|
+
/** Edge IDs to keep at full opacity when diagram focus dimming is enabled */
|
|
1248
|
+
highlightedEdgeIds?: string[];
|
|
1249
|
+
/**
|
|
1250
|
+
* When true, non-highlighted nodes and edges are dimmed while focus IDs are set.
|
|
1251
|
+
* Edges connected to highlighted nodes remain in focus unless
|
|
1252
|
+
* `connectEdgesToHighlightedNodes` is false.
|
|
1253
|
+
*/
|
|
1254
|
+
dimUnhighlighted?: boolean;
|
|
1255
|
+
/** Opacity for dimmed nodes/edges (0-1). Defaults to 0.25 */
|
|
1256
|
+
dimOpacity?: number;
|
|
1257
|
+
/** When false, only explicit highlightedEdgeIds stay bright during focus. */
|
|
1258
|
+
connectEdgesToHighlightedNodes?: boolean;
|
|
1259
|
+
/** When false, devices render without rack photos. Status border still uses `getStatusColor`. Default true. */
|
|
1260
|
+
showDeviceImages?: boolean;
|
|
1261
|
+
/** Port handles kept highlighted during diagram trace/focus. */
|
|
1262
|
+
highlightedPortHandles?: DiagramPortHandleRef[];
|
|
1263
|
+
/** Fired when a port handle is clicked (typically in read-only trace mode). */
|
|
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";
|
|
1215
1289
|
}
|
|
1216
1290
|
|
|
1217
1291
|
declare const NetworkDiagram: React$1.FC<NetworkDiagramProps>;
|
|
@@ -1260,91 +1334,32 @@ interface RackNodeProps extends NodeProps<NetworkNode['data']> {
|
|
|
1260
1334
|
onRackFaceChange?: (rackId: string, face: 'front' | 'rear') => void;
|
|
1261
1335
|
isDragOver?: boolean;
|
|
1262
1336
|
}
|
|
1263
|
-
/**
|
|
1264
|
-
|
|
1265
|
-
*
|
|
1266
|
-
* Displays a 19" rack with configurable height, front/rear face switching,
|
|
1267
|
-
* and support for mounting devices at specific U positions.
|
|
1268
|
-
*
|
|
1269
|
-
* @example
|
|
1270
|
-
* ```tsx
|
|
1271
|
-
* {
|
|
1272
|
-
* id: 'rack-1',
|
|
1273
|
-
* type: 'rack',
|
|
1274
|
-
* position: { x: 100, y: 100 },
|
|
1275
|
-
* data: {
|
|
1276
|
-
* label: 'Main Rack',
|
|
1277
|
-
* uHeight: 42,
|
|
1278
|
-
* status: 'active'
|
|
1279
|
-
* }
|
|
1280
|
-
* }
|
|
1281
|
-
* ```
|
|
1282
|
-
*
|
|
1283
|
-
* @public
|
|
1284
|
-
*/
|
|
1285
|
-
declare const RackNode: React$1.FC<RackNodeProps>;
|
|
1337
|
+
/** Memoized; uses useStoreApi (not useReactFlow) so rack chrome does not re-render on every node move. */
|
|
1338
|
+
declare const RackNode: React$1.NamedExoticComponent<RackNodeProps>;
|
|
1286
1339
|
|
|
1287
1340
|
declare const FiberNode: React$1.FC<NodeProps<NetworkNode['data']>>;
|
|
1288
1341
|
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
* sourceHandle: 'fiber-1',
|
|
1302
|
-
* targetHandle: 'fiber-2',
|
|
1303
|
-
* type: 'fiber',
|
|
1304
|
-
* data: {
|
|
1305
|
-
* kind: 'fiber',
|
|
1306
|
-
* ribbonFiberIds: [1, 2, 3, 4, 5, 6] // For ribbon mode
|
|
1307
|
-
* }
|
|
1308
|
-
* }
|
|
1309
|
-
* ```
|
|
1310
|
-
*
|
|
1311
|
-
* @public
|
|
1312
|
-
*/
|
|
1313
|
-
declare const FiberEdge: React$1.FC<EdgeProps<NetworkEdge['data']> & {
|
|
1342
|
+
declare const FiberEdge: React$1.NamedExoticComponent<Pick<reactflow.Edge<NetworkEdgeData | undefined>, "id" | "data" | "source" | "target" | "style" | "selected" | "animated"> & Pick<reactflow.WrapEdgeProps<any>, "sourcePosition" | "targetPosition" | "interactionWidth" | "sourceX" | "sourceY" | "targetX" | "targetY" | "sourceHandleId" | "targetHandleId"> & {
|
|
1343
|
+
label?: string | React$1.ReactNode;
|
|
1344
|
+
labelStyle?: React$1.CSSProperties;
|
|
1345
|
+
labelShowBg?: boolean;
|
|
1346
|
+
labelBgStyle?: React$1.CSSProperties;
|
|
1347
|
+
labelBgPadding?: [number, number];
|
|
1348
|
+
labelBgBorderRadius?: number;
|
|
1349
|
+
} & {
|
|
1350
|
+
markerStart?: string;
|
|
1351
|
+
markerEnd?: string;
|
|
1352
|
+
pathOptions?: any;
|
|
1353
|
+
} & {
|
|
1314
1354
|
className?: string;
|
|
1315
1355
|
}>;
|
|
1316
1356
|
|
|
1317
|
-
declare const PowerEdge: React$1.
|
|
1357
|
+
declare const PowerEdge: React$1.NamedExoticComponent<EdgeProps>;
|
|
1318
1358
|
|
|
1319
|
-
/**
|
|
1320
|
-
|
|
1321
|
-
*
|
|
1322
|
-
* Represents a device that can be placed in a rack. Supports port configuration,
|
|
1323
|
-
* U positioning, front/rear views, and various device types (servers, switches, routers, etc.).
|
|
1324
|
-
*
|
|
1325
|
-
* @example
|
|
1326
|
-
* ```tsx
|
|
1327
|
-
* {
|
|
1328
|
-
* id: 'server-1',
|
|
1329
|
-
* type: 'device',
|
|
1330
|
-
* position: { x: 120, y: 150 },
|
|
1331
|
-
* parentId: 'rack-1',
|
|
1332
|
-
* data: {
|
|
1333
|
-
* label: 'Web Server',
|
|
1334
|
-
* deviceType: 'server',
|
|
1335
|
-
* uPosition: 1,
|
|
1336
|
-
* ports: [
|
|
1337
|
-
* { id: 'eth0', label: 'eth0', group: 'Network Ports', connected: true, type: 'ethernet' }
|
|
1338
|
-
* ]
|
|
1339
|
-
* }
|
|
1340
|
-
* }
|
|
1341
|
-
* ```
|
|
1342
|
-
*
|
|
1343
|
-
* @public
|
|
1344
|
-
*/
|
|
1345
|
-
declare const DeviceNode: React$1.FC<NodeProps<NetworkNode['data']>>;
|
|
1359
|
+
/** Memoized to avoid re-rendering rack devices when unrelated nodes move (React Flow perf guide). */
|
|
1360
|
+
declare const DeviceNode: React$1.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
|
|
1346
1361
|
|
|
1347
|
-
declare const VerticalPDU: React$1.
|
|
1362
|
+
declare const VerticalPDU: React$1.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
|
|
1348
1363
|
|
|
1349
1364
|
declare const SpliceNode: React$1.FC<NodeProps<NetworkNode['data']>>;
|
|
1350
1365
|
|
|
@@ -2128,7 +2143,10 @@ declare function buildPortBlocksFromPorts(devicePorts: DevicePort[]): {
|
|
|
2128
2143
|
* flat `ports: DevicePort[]` or explicit `portGroups` / `rearPortGroups`.
|
|
2129
2144
|
* @public
|
|
2130
2145
|
*/
|
|
2131
|
-
|
|
2146
|
+
type ResolvedPortBlockInput = Pick<NetworkNode['data'], 'ports' | 'portGroups' | 'rearPortGroups'> & {
|
|
2147
|
+
rearPorts?: PortBlock[];
|
|
2148
|
+
};
|
|
2149
|
+
declare function getResolvedPortBlocks(data: ResolvedPortBlockInput | undefined): {
|
|
2132
2150
|
ports: PortBlock[];
|
|
2133
2151
|
rearPorts: PortBlock[];
|
|
2134
2152
|
};
|
|
@@ -2158,6 +2176,139 @@ declare function hasRearPorts(data: Pick<NetworkNode['data'], 'ports' | 'portGro
|
|
|
2158
2176
|
*/
|
|
2159
2177
|
declare function getDefaultDeviceFace(data: Pick<NetworkNode['data'], 'ports' | 'portGroups' | 'rearPortGroups'> | undefined): DeviceFace;
|
|
2160
2178
|
|
|
2179
|
+
/**
|
|
2180
|
+
* Normalize source/target directional suffixes used for bidirectional handles.
|
|
2181
|
+
* Example: `Rear Ports-1-target` -\> `Rear Ports-1`.
|
|
2182
|
+
*/
|
|
2183
|
+
declare function normalizeDirectionalHandleId(handleId: string | null | undefined): string;
|
|
2184
|
+
/**
|
|
2185
|
+
* Normalize rendered handle ids back to their canonical endpoint id.
|
|
2186
|
+
* This removes both directional suffixes and split-face rear aliases.
|
|
2187
|
+
*/
|
|
2188
|
+
declare function normalizeHandleId(handleId: string | null | undefined): string;
|
|
2189
|
+
/**
|
|
2190
|
+
* Returns true when a port type is considered power-related.
|
|
2191
|
+
*/
|
|
2192
|
+
declare function isPowerPortType(portType: string | undefined): boolean;
|
|
2193
|
+
/**
|
|
2194
|
+
* Build a stable handle id for a port.
|
|
2195
|
+
* Power ports use the label directly to preserve legacy ids.
|
|
2196
|
+
*/
|
|
2197
|
+
declare function buildPortHandleId(portBlockName: string, port: Pick<Port, 'label' | 'id'> & {
|
|
2198
|
+
type?: string;
|
|
2199
|
+
}): string;
|
|
2200
|
+
/**
|
|
2201
|
+
* Heuristic for whether a handle id represents a power endpoint.
|
|
2202
|
+
*/
|
|
2203
|
+
declare function looksLikePowerHandleId(handleId: string): boolean;
|
|
2204
|
+
|
|
2205
|
+
/**
|
|
2206
|
+
* Resolve the effective device face for a flat port input.
|
|
2207
|
+
* @public
|
|
2208
|
+
*/
|
|
2209
|
+
declare function resolveDevicePortFace(port: Pick<DevicePort, 'face' | 'type'>): DeviceFace;
|
|
2210
|
+
/** @deprecated Use {@link resolveDevicePortFace}. */
|
|
2211
|
+
declare const resolveReactNetworksPortFace: typeof resolveDevicePortFace;
|
|
2212
|
+
/**
|
|
2213
|
+
* Resolve the effective port group name for a flat port input.
|
|
2214
|
+
* @public
|
|
2215
|
+
*/
|
|
2216
|
+
declare function resolveDevicePortGroup(port: Pick<DevicePort, 'face' | 'group' | 'type'>): string;
|
|
2217
|
+
/** @deprecated Use {@link resolveDevicePortGroup}. */
|
|
2218
|
+
declare const resolveReactNetworksPortGroup: typeof resolveDevicePortGroup;
|
|
2219
|
+
/**
|
|
2220
|
+
* Normalize unknown port array input into canonical flat {@link DevicePort} entries.
|
|
2221
|
+
* @public
|
|
2222
|
+
*/
|
|
2223
|
+
declare function normalizeDevicePorts(value: unknown): DevicePort[] | undefined;
|
|
2224
|
+
/** @deprecated Use {@link normalizeDevicePorts}. */
|
|
2225
|
+
declare const normalizeReactNetworksPorts: typeof normalizeDevicePorts;
|
|
2226
|
+
/**
|
|
2227
|
+
* Resolve flat device ports from node data supporting flat or grouped port input.
|
|
2228
|
+
* @public
|
|
2229
|
+
*/
|
|
2230
|
+
declare function resolveNodeDevicePorts(value: unknown): DevicePort[] | undefined;
|
|
2231
|
+
/** @deprecated Use {@link resolveNodeDevicePorts}. */
|
|
2232
|
+
declare const resolveReactNetworksNodePorts: typeof resolveNodeDevicePorts;
|
|
2233
|
+
/**
|
|
2234
|
+
* Flatten grouped port blocks into canonical flat {@link DevicePort} entries.
|
|
2235
|
+
* @public
|
|
2236
|
+
*/
|
|
2237
|
+
declare function flattenDevicePortsFromGroups({ portGroups, rearPortGroups, }: {
|
|
2238
|
+
portGroups?: PortBlock[];
|
|
2239
|
+
rearPortGroups?: PortBlock[];
|
|
2240
|
+
}): DevicePort[];
|
|
2241
|
+
/** @deprecated Use {@link flattenDevicePortsFromGroups}. */
|
|
2242
|
+
declare const flattenReactNetworksPortGroups: typeof flattenDevicePortsFromGroups;
|
|
2243
|
+
/**
|
|
2244
|
+
* Build grouped port blocks from flat device port input.
|
|
2245
|
+
* @public
|
|
2246
|
+
*/
|
|
2247
|
+
declare function buildDevicePortGroupsFromPorts(ports: DevicePort[] | undefined): {
|
|
2248
|
+
portGroups: PortBlock[];
|
|
2249
|
+
rearPortGroups: PortBlock[];
|
|
2250
|
+
};
|
|
2251
|
+
/** @deprecated Use {@link buildDevicePortGroupsFromPorts}. */
|
|
2252
|
+
declare const buildReactNetworksPortGroupsFromPorts: typeof buildDevicePortGroupsFromPorts;
|
|
2253
|
+
interface ListPossiblePortHandleIdsOptions {
|
|
2254
|
+
deviceType?: string;
|
|
2255
|
+
face?: DeviceFace;
|
|
2256
|
+
}
|
|
2257
|
+
/**
|
|
2258
|
+
* List handle ids that may exist on a rendered node for a port.
|
|
2259
|
+
* @public
|
|
2260
|
+
*/
|
|
2261
|
+
declare function listPossiblePortHandleIds(portBlockName: string, port: Pick<Port, 'id' | 'label' | 'type'>, options?: ListPossiblePortHandleIdsOptions): string[];
|
|
2262
|
+
/**
|
|
2263
|
+
* Validate that a handle id exists on node data after grouping resolution.
|
|
2264
|
+
* @public
|
|
2265
|
+
*/
|
|
2266
|
+
declare function validatePortHandleOnNodeData(nodeData: Pick<NetworkNodeDataBase, 'ports' | 'portGroups' | 'rearPortGroups'> | undefined, handle: string, options?: {
|
|
2267
|
+
deviceType?: string;
|
|
2268
|
+
sanitizeHandle?: (value: string) => string;
|
|
2269
|
+
}): boolean;
|
|
2270
|
+
/**
|
|
2271
|
+
* Convert flat ports to grouped blocks using the same rules as renderers.
|
|
2272
|
+
* @public
|
|
2273
|
+
*/
|
|
2274
|
+
declare function resolveDevicePortBlocksFromFlatPorts(ports: DevicePort[]): {
|
|
2275
|
+
portGroups: PortBlock[];
|
|
2276
|
+
rearPortGroups: PortBlock[];
|
|
2277
|
+
};
|
|
2278
|
+
|
|
2279
|
+
declare const parseSemanticPortPosition: (value: string) => PortPosition | undefined;
|
|
2280
|
+
declare const normalizePortPositionInput: (value: unknown) => PortPosition | undefined;
|
|
2281
|
+
|
|
2282
|
+
type PathLayoutDirection = 'horizontal' | 'vertical';
|
|
2283
|
+
interface PathLayoutStepInput {
|
|
2284
|
+
id: string;
|
|
2285
|
+
type?: NetworkNode['type'];
|
|
2286
|
+
data?: NetworkNode['data'];
|
|
2287
|
+
}
|
|
2288
|
+
interface PathLayoutEdgeInput {
|
|
2289
|
+
id: string;
|
|
2290
|
+
source: string;
|
|
2291
|
+
target: string;
|
|
2292
|
+
type?: NetworkEdge['type'];
|
|
2293
|
+
data?: NetworkEdge['data'];
|
|
2294
|
+
}
|
|
2295
|
+
interface BuildPathLayoutOptions {
|
|
2296
|
+
direction?: PathLayoutDirection;
|
|
2297
|
+
spacing?: number;
|
|
2298
|
+
origin?: {
|
|
2299
|
+
x: number;
|
|
2300
|
+
y: number;
|
|
2301
|
+
};
|
|
2302
|
+
}
|
|
2303
|
+
/**
|
|
2304
|
+
* Lay out a sequential path of nodes and connecting edges with deterministic spacing.
|
|
2305
|
+
* @public
|
|
2306
|
+
*/
|
|
2307
|
+
declare function buildPathLayoutGraph(steps: PathLayoutStepInput[], edges: PathLayoutEdgeInput[], options?: BuildPathLayoutOptions): {
|
|
2308
|
+
nodes: NetworkNode[];
|
|
2309
|
+
edges: NetworkEdge[];
|
|
2310
|
+
};
|
|
2311
|
+
|
|
2161
2312
|
interface NetworkGraphSnapshot {
|
|
2162
2313
|
nodes: NetworkNode[];
|
|
2163
2314
|
edges: NetworkEdge[];
|
|
@@ -2365,6 +2516,41 @@ interface ReplaceEdgeOptions {
|
|
|
2365
2516
|
*/
|
|
2366
2517
|
declare function replaceEdge(options: ReplaceEdgeOptions): Edge[] | null;
|
|
2367
2518
|
|
|
2519
|
+
interface DiagramFocusOptions {
|
|
2520
|
+
highlightedNodeIds?: readonly string[];
|
|
2521
|
+
highlightedEdgeIds?: readonly string[];
|
|
2522
|
+
dimUnhighlighted?: boolean;
|
|
2523
|
+
dimOpacity?: number;
|
|
2524
|
+
/** When false, only explicit highlightedEdgeIds stay bright (not every edge on a highlighted node). */
|
|
2525
|
+
connectEdgesToHighlightedNodes?: boolean;
|
|
2526
|
+
}
|
|
2527
|
+
declare const DEFAULT_DIAGRAM_DIM_OPACITY = 0.25;
|
|
2528
|
+
declare function hasDiagramFocus(options: DiagramFocusOptions): boolean;
|
|
2529
|
+
declare function isNodeInDiagramFocus(nodeId: string, options: DiagramFocusOptions): boolean;
|
|
2530
|
+
declare function isEdgeInDiagramFocus(edgeId: string, edge: Pick<NetworkEdge, 'source' | 'target'>, options: DiagramFocusOptions): boolean;
|
|
2531
|
+
type RuntimeNode = NetworkNode & {
|
|
2532
|
+
style?: CSSProperties;
|
|
2533
|
+
};
|
|
2534
|
+
type RuntimeEdge = NetworkEdge & {
|
|
2535
|
+
style?: CSSProperties;
|
|
2536
|
+
};
|
|
2537
|
+
declare function applyDiagramFocusToNodes<TNode extends RuntimeNode>(nodes: TNode[], options: DiagramFocusOptions): TNode[];
|
|
2538
|
+
declare function applyDiagramFocusToEdges<TEdge extends RuntimeEdge>(edges: TEdge[], options: DiagramFocusOptions): TEdge[];
|
|
2539
|
+
|
|
2540
|
+
declare function isDeviceDiagramNode(node: NetworkNode): boolean;
|
|
2541
|
+
declare function applyDeviceDisplayToNodes(nodes: NetworkNode[], options?: {
|
|
2542
|
+
showDeviceImages?: boolean;
|
|
2543
|
+
}, previousNodes?: NetworkNode[]): NetworkNode[];
|
|
2544
|
+
|
|
2545
|
+
type DiagramPortContextValue = {
|
|
2546
|
+
highlightedPortHandles?: readonly DiagramPortHandleRef[];
|
|
2547
|
+
onPortClick?: (payload: DiagramPortClickPayload) => void;
|
|
2548
|
+
portClickEnabled: boolean;
|
|
2549
|
+
};
|
|
2550
|
+
declare const DiagramPortProvider: React$1.Provider<DiagramPortContextValue>;
|
|
2551
|
+
declare function useDiagramPortInteraction(): DiagramPortContextValue;
|
|
2552
|
+
declare function isDiagramPortHandleHighlighted(highlightedPortHandles: readonly DiagramPortHandleRef[] | undefined, nodeId: string, handleId: string): boolean;
|
|
2553
|
+
|
|
2368
2554
|
/**
|
|
2369
2555
|
* Template Schema V2 — unified device template model.
|
|
2370
2556
|
*
|
|
@@ -2674,4 +2860,4 @@ declare function useNetworkDiagram(store: NetworkDiagramStore): NetworkDiagramSt
|
|
|
2674
2860
|
declare function useNodes(store: NetworkDiagramStore): NetworkNode[];
|
|
2675
2861
|
declare function useEdges(store: NetworkDiagramStore): NetworkEdge[];
|
|
2676
2862
|
|
|
2677
|
-
export { COUPLERS_PER_PANEL, COUPLER_SLOT_HEIGHT_PX, COUPLER_WIDTH_PX, CableNode, ClosureNode, CouplerNode, 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 DiagramNode, type DiagramNodeKind, type DiagramNodePlacement, type DiagramNodeRender, 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 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 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, baseColorFor, buildNodesFromRackConfig, buildNodesFromSpliceConfig, buildPortBlocksFromPorts, calculateClosureDimensions, calculateCouplerRightX, calculateCouplerSlotSpacing, calculateCouplerSpacing, calculateDevicePositionFromU, calculatePanelDimensions, calculateSlotPositionFromY, calculateSplicePositionFromNumber, calculateUPositions, calculateYFromSlotPosition, countTemplateFacePorts, createNetworkDiagramStore, createRackConfigFromNodes, createSpliceConfigFromNodes, diagramDocumentToNetworkGraph, fiberSolidOrStriped, findNearestRack, findNextAvailableHolderPosition, findNextAvailableUPosition, generateLayout, getConnectorConfig, getCouplerDimensions, getDefaultDeviceFace, getDeviceConnectorType, getEndpointMetadata, getFiberColor, getFrontPortBlocks, getInnerContentWidth, getPDUPortType, getPanelHeight, getPanelWidth, getPowerPortStyle, getRackBounds, getRearPortBlocks, getResolvedPortBlocks, getStandardPortVisualDimensions, getStatusColor, getTrayDimensions, getTubeDimensions, hasFrontPorts, hasRearPorts, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToDiagramDocument, inventoryToNetworkDiagram, isHighPowerConnector, isPointInRack, isStriped, isUPositionAvailable, netboxCableToNetworkEdge, netboxDeviceToNetworkNode, netboxRackToNetworkNode, netboxToDiagramDocument, netboxToNetworkDiagram, networkGraphToDiagramDocument, parseNetboxTemplate, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, resolveEndpointCompatibilityKeys, resolvePortVisualKind, snapToCouplerPosition, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, 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 };
|