@mp70/react-networks 0.6.0 → 0.7.1
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/LICENSE +46 -0
- package/dist/document-adapter-Jn_0jy4m.d.mts +1449 -0
- package/dist/document-adapter-Jn_0jy4m.d.ts +1449 -0
- package/dist/index.d.mts +60 -1305
- package/dist/index.d.ts +60 -1305
- 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/dist/model.d.mts +33 -0
- package/dist/model.d.ts +33 -0
- package/dist/model.js +2 -0
- package/dist/model.js.map +1 -0
- package/dist/model.mjs +2 -0
- package/dist/model.mjs.map +1 -0
- package/package.json +9 -3
package/dist/index.d.mts
CHANGED
|
@@ -1,47 +1,9 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React, { Component, ReactNode, ErrorInfo, CSSProperties } from 'react';
|
|
2
|
+
import { N as NetworkDiagramProps, a as NetworkNode, b as NetworkNodeDataBase, R as RackNodeData, D as DeviceNodeData, F as FibreFlowCableNodeData, c as FibreFlowClosureNodeData, d as NetworkEdgeData, e as FibreFlowClosure, f as FibreFlowCircuit, g as NetworkDiagramInteractionOptions, h as FibreFlowCable, i as NetworkEdge, j as DiagramDocument, k as RackConfig, l as RackDevice, S as SpliceTrayConfig, m as SpliceConfig, P as PortBlock, n as DevicePort, o as DeviceFace, p as PortType, q as DeviceStatus, r as DiagramPortHandleRef, s as DiagramPortClickPayload, t as PortCableType, u as PortPosition } from './document-adapter-Jn_0jy4m.mjs';
|
|
3
|
+
export { A as ApplyDirectionalPortHandleIdOptions, B as BuildPathLayoutOptions, v as DescribedPortHandle, w as DeviceImageFit, x as DeviceImageOptions, y as DeviceImageRepeat, z as DiagramEdge, C as DiagramEdgeEndpoint, E as DiagramEndpoint, G as DiagramExternalRef, H as DiagramNode, I as DiagramNodeKind, J as DiagramNodePlacement, K as DiagramNodeRender, L as DiagramUiState, M as FiberCable, O as FiberCableType, Q as FibreFlowCableKind, T as FibreFlowEndpoint, U as FibreFlowSplice, V as HandleShape, W as ListPossiblePortHandleIdsOptions, X as NetworkConnectionRejection, Y as NetworkDiagramActionPanelOptions, Z as NetworkDiagramFitViewOptions, _ as NetworkDiagramFlowMethods, $ as NetworkDiagramFlowObject, a0 as NetworkDiagramStoreApi, a1 as NetworkDiagramStoreState, a2 as NetworkDiagramToImageOptions, a3 as NetworkDiagramValidateConnectionParams, a4 as NetworkDiagramValidationResult, a5 as NetworkEdgeType, a6 as NetworkGraphSnapshot, a7 as NetworkNodeData, a8 as NetworkNodeDataByType, a9 as NetworkNodeType, aa as ParsedHandleId, ab as PathLayoutDirection, ac as PathLayoutEdgeInput, ad as PathLayoutStepInput, ae as Port, af as PowerSide, ag as RackDeviceType, ah as RackLayoutMode, ai as RackMountMode, aj as UNumberingDirection, ak as Width, al as applyDirectionalPortHandleId, am as applyFaceAliasHandleId, an as buildCouplerHandleId, ao as buildDevicePortGroupsFromPorts, ap as buildFiberHandleId, aq as buildPathLayoutGraph, ar as buildPortHandleId, as as buildReactNetworksHandleId, at as buildReactNetworksPortGroupsFromPorts, au as buildSpliceHandleId, av as buildSplitIoHandleId, aw as buildTubeHandleId, ax as describePortHandle, ay as diagramDocumentToNetworkGraph, az as flattenDevicePortsFromGroups, aA as flattenReactNetworksPortGroups, aB as getOppositeSideHandleId, aC as isPowerPortType, aD as listPossiblePortHandleIds, aE as looksLikePowerHandleId, aF as networkGraphToDiagramDocument, aG as normalizeDevicePorts, aH as normalizeDirectionalHandleId, aI as normalizeHandleId, aJ as normalizePortPositionInput, aK as normalizeReactNetworksPorts, aL as parseHandleId, aM as parseSemanticPortPosition, aN as resolveDevicePortBlocksFromFlatPorts, aO as resolveDevicePortFace, aP as resolveDevicePortGroup, aQ as resolveNodeDevicePorts, aR as resolveReactNetworksNodePorts, aS as resolveReactNetworksPortFace, aT as resolveReactNetworksPortGroup, aU as sanitizeHandleIdForMatching, aV as validatePortHandleOnNodeData } from './document-adapter-Jn_0jy4m.mjs';
|
|
2
4
|
import * as reactflow from 'reactflow';
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
type FibreFlowCableKind = 'simple' | 'tube';
|
|
6
|
-
interface FibreFlowEndpoint {
|
|
7
|
-
tube?: number;
|
|
8
|
-
fiber: number;
|
|
9
|
-
}
|
|
10
|
-
interface FibreFlowSplice {
|
|
11
|
-
id: string;
|
|
12
|
-
from: FibreFlowEndpoint;
|
|
13
|
-
to: FibreFlowEndpoint;
|
|
14
|
-
lossDb?: number;
|
|
15
|
-
circuitId?: string;
|
|
16
|
-
label?: string;
|
|
17
|
-
color?: string;
|
|
18
|
-
}
|
|
19
|
-
interface FibreFlowCable {
|
|
20
|
-
id: string;
|
|
21
|
-
label: string;
|
|
22
|
-
kind?: FibreFlowCableKind;
|
|
23
|
-
fiberCount?: number;
|
|
24
|
-
tubeCount?: number;
|
|
25
|
-
fibersPerTube?: number;
|
|
26
|
-
tubeStartIndex?: number;
|
|
27
|
-
fiberStartIndex?: number;
|
|
28
|
-
tubeColorMap?: Record<number, string>;
|
|
29
|
-
jacketColor?: string;
|
|
30
|
-
distanceLabel?: string;
|
|
31
|
-
distanceMeters?: number;
|
|
32
|
-
}
|
|
33
|
-
interface FibreFlowClosure {
|
|
34
|
-
id: string;
|
|
35
|
-
chamberId?: string;
|
|
36
|
-
leftCable: FibreFlowCable;
|
|
37
|
-
rightCable: FibreFlowCable;
|
|
38
|
-
splices: FibreFlowSplice[];
|
|
39
|
-
}
|
|
40
|
-
interface FibreFlowCircuit {
|
|
41
|
-
id: string;
|
|
42
|
-
label: string;
|
|
43
|
-
color?: string;
|
|
44
|
-
}
|
|
5
|
+
import { NodeProps, EdgeProps, Edge, Connection } from 'reactflow';
|
|
6
|
+
export { Connection, ConnectionMode, EdgeTypes, FitViewOptions, NodeTypes, Position, ReactFlowInstance, Viewport, XYPosition } from 'reactflow';
|
|
45
7
|
|
|
46
8
|
interface NetBoxPortPosition {
|
|
47
9
|
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
@@ -222,1073 +184,7 @@ interface NetBoxCable {
|
|
|
222
184
|
};
|
|
223
185
|
}
|
|
224
186
|
|
|
225
|
-
|
|
226
|
-
* Rack device width configuration
|
|
227
|
-
* @public
|
|
228
|
-
*/
|
|
229
|
-
|
|
230
|
-
declare enum Width {
|
|
231
|
-
/** Full width device (19" rack width) */
|
|
232
|
-
FULL = "full",
|
|
233
|
-
/** Half width device (9.5" rack width) */
|
|
234
|
-
HALF = "half"
|
|
235
|
-
}
|
|
236
|
-
/**
|
|
237
|
-
* Port configuration for network devices
|
|
238
|
-
* @public
|
|
239
|
-
*/
|
|
240
|
-
/**
|
|
241
|
-
* Port type enumeration
|
|
242
|
-
* @public
|
|
243
|
-
*/
|
|
244
|
-
type PortType = "ethernet" | "rj45" | "fiber" | "console" | "mgmt" | "usb" | "power_ac" | "power_c13" | "power_c19";
|
|
245
|
-
/**
|
|
246
|
-
* Cable types used for connected network ports.
|
|
247
|
-
* @public
|
|
248
|
-
*/
|
|
249
|
-
type PortCableType = "smf" | "cat6" | "om3" | "om4" | "om5" | "cat5e" | "cat6a" | "cat7" | "fiber" | "ethernet";
|
|
250
|
-
/**
|
|
251
|
-
* Device image fit options.
|
|
252
|
-
*
|
|
253
|
-
* Values mirror object-fit terms for API ergonomics and are mapped to valid
|
|
254
|
-
* background-size values by renderers where needed.
|
|
255
|
-
*
|
|
256
|
-
* @public
|
|
257
|
-
*/
|
|
258
|
-
type DeviceImageFit = "cover" | "contain" | "contain-height" | "fill" | "none" | "scale-down";
|
|
259
|
-
/**
|
|
260
|
-
* Device image repeat options.
|
|
261
|
-
* @public
|
|
262
|
-
*/
|
|
263
|
-
type DeviceImageRepeat = "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
|
|
264
|
-
/**
|
|
265
|
-
* Shared image configuration for rack-mounted devices and device nodes.
|
|
266
|
-
* @public
|
|
267
|
-
*/
|
|
268
|
-
interface DeviceImageOptions {
|
|
269
|
-
/** Optional front image URL for device background (PNG, SVG, JPEG, etc.) */
|
|
270
|
-
frontImageUrl?: string;
|
|
271
|
-
/** Optional rear image URL for device background (PNG, SVG, JPEG, etc.) */
|
|
272
|
-
rearImageUrl?: string;
|
|
273
|
-
/** Optional attribution URL for front image (e.g. source/license link) */
|
|
274
|
-
frontImageAttribution?: string;
|
|
275
|
-
/** Optional attribution URL for rear image (e.g. source/license link) */
|
|
276
|
-
rearImageAttribution?: string;
|
|
277
|
-
/** Optional background sizing for device images */
|
|
278
|
-
imageFit?: DeviceImageFit;
|
|
279
|
-
/** Optional background position for device images */
|
|
280
|
-
imagePosition?: string;
|
|
281
|
-
/** Optional background repeat for device images */
|
|
282
|
-
imageRepeat?: DeviceImageRepeat;
|
|
283
|
-
/** When true, stretch device image to fill the device bounds (overrides imageFit) */
|
|
284
|
-
stretchToFit?: boolean;
|
|
285
|
-
}
|
|
286
|
-
/**
|
|
287
|
-
* Explicit handle placement for a device/PDU port.
|
|
288
|
-
* @public
|
|
289
|
-
*/
|
|
290
|
-
interface PortPosition {
|
|
291
|
-
/** Handle side on the node */
|
|
292
|
-
side?: "top" | "right" | "bottom" | "left";
|
|
293
|
-
/** Side offset as percentage (0-100) */
|
|
294
|
-
offsetPercent?: number;
|
|
295
|
-
/** Side offset in pixels */
|
|
296
|
-
offsetPx?: number;
|
|
297
|
-
/** Absolute X position as percentage (0-100) */
|
|
298
|
-
xPercent?: number;
|
|
299
|
-
/** Absolute Y position as percentage (0-100) */
|
|
300
|
-
yPercent?: number;
|
|
301
|
-
/** Authored port width as a percentage of the rendered image frame */
|
|
302
|
-
widthPercent?: number;
|
|
303
|
-
/** Authored port height as a percentage of the rendered image frame */
|
|
304
|
-
heightPercent?: number;
|
|
305
|
-
}
|
|
306
|
-
/**
|
|
307
|
-
* Recommended simple port input for device and PDU rendering.
|
|
308
|
-
* Pass a flat array in `ports`; `react-networks` groups entries into front/rear
|
|
309
|
-
* `PortBlock[]` internally using each port's `face` and `group`.
|
|
310
|
-
* @public
|
|
311
|
-
*/
|
|
312
|
-
interface DevicePort {
|
|
313
|
-
/** Stable handle identifier override (defaults to `group + label`, or `label` for power) */
|
|
314
|
-
id?: string;
|
|
315
|
-
/** Display label for the port */
|
|
316
|
-
label: string;
|
|
317
|
-
/** Front/rear device face. `back` is accepted as an alias for `rear`. */
|
|
318
|
-
face?: DeviceFace | "back";
|
|
319
|
-
/** Optional block/group name (for example `Network Ports`, `QSFP28`, `Power Ports`) */
|
|
320
|
-
group?: string;
|
|
321
|
-
/** Optional source/detected family label used for visual kind inference */
|
|
322
|
-
sourceTypeLabel?: string;
|
|
323
|
-
/** Whether the port is currently connected */
|
|
324
|
-
connected?: boolean;
|
|
325
|
-
/** Type of port for styling and validation */
|
|
326
|
-
type?: PortType;
|
|
327
|
-
/** Cable type for connection validation */
|
|
328
|
-
cableType?: PortCableType;
|
|
329
|
-
/** Optional power connector type for rendering (mainly for PDU ports) */
|
|
330
|
-
connectorType?: "C13" | "C14" | "C19" | "C20";
|
|
331
|
-
/** Optional compatibility keys. When omitted, defaults are derived from type/cable/connector data. */
|
|
332
|
-
compatibility?: string[];
|
|
333
|
-
/** Optional sort order within a face/group bucket */
|
|
334
|
-
order?: number;
|
|
335
|
-
/**
|
|
336
|
-
* Optional placement hint.
|
|
337
|
-
* Use `side` with `offsetPercent`/`offsetPx` for edge-anchored placement,
|
|
338
|
-
* or `xPercent`/`yPercent` for exact coordinates.
|
|
339
|
-
*/
|
|
340
|
-
position?: PortPosition;
|
|
341
|
-
}
|
|
342
|
-
interface Port {
|
|
343
|
-
/** Stable handle identifier override (defaults to `label`) */
|
|
344
|
-
id?: string;
|
|
345
|
-
/** Display label for the port */
|
|
346
|
-
label: string;
|
|
347
|
-
/** Optional source/detected family label used for visual kind inference */
|
|
348
|
-
sourceTypeLabel?: string;
|
|
349
|
-
/** Whether the port is currently connected */
|
|
350
|
-
connected: boolean;
|
|
351
|
-
/** Type of port for styling and validation */
|
|
352
|
-
type?: PortType;
|
|
353
|
-
/** Cable type for connection validation */
|
|
354
|
-
cableType?: PortCableType;
|
|
355
|
-
/** Optional power connector type for rendering (mainly for PDU ports) */
|
|
356
|
-
connectorType?: "C13" | "C14" | "C19" | "C20";
|
|
357
|
-
/** Optional compatibility keys. When omitted, defaults are derived from type/cable/connector data. */
|
|
358
|
-
compatibility?: string[];
|
|
359
|
-
/** Optional explicit handle placement */
|
|
360
|
-
position?: PortPosition;
|
|
361
|
-
}
|
|
362
|
-
/**
|
|
363
|
-
* Group of related ports on a device
|
|
364
|
-
* @public
|
|
365
|
-
*/
|
|
366
|
-
interface PortBlock {
|
|
367
|
-
/** Name of the port group */
|
|
368
|
-
name: string;
|
|
369
|
-
/** Array of ports in this group */
|
|
370
|
-
ports: Port[];
|
|
371
|
-
}
|
|
372
|
-
/**
|
|
373
|
-
* Network node types supported by the diagram
|
|
374
|
-
* @public
|
|
375
|
-
*/
|
|
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
|
-
/**
|
|
378
|
-
* Device status states
|
|
379
|
-
* @public
|
|
380
|
-
*/
|
|
381
|
-
type DeviceStatus = "active" | "inactive" | "maintenance";
|
|
382
|
-
/**
|
|
383
|
-
* Device face orientations
|
|
384
|
-
* @public
|
|
385
|
-
*/
|
|
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
|
-
};
|
|
398
|
-
/**
|
|
399
|
-
* Rack rendering layout modes.
|
|
400
|
-
* @public
|
|
401
|
-
*/
|
|
402
|
-
type RackLayoutMode = "single-face" | "split-face";
|
|
403
|
-
/**
|
|
404
|
-
* Rack mounting behavior for a device.
|
|
405
|
-
* @public
|
|
406
|
-
*/
|
|
407
|
-
type RackMountMode = "front" | "rear" | "both";
|
|
408
|
-
/**
|
|
409
|
-
* Power port side configuration
|
|
410
|
-
* @public
|
|
411
|
-
*/
|
|
412
|
-
type PowerSide = "left" | "right";
|
|
413
|
-
/**
|
|
414
|
-
* U numbering direction for racks
|
|
415
|
-
* @public
|
|
416
|
-
*/
|
|
417
|
-
type UNumberingDirection = "bottom-up" | "top-down";
|
|
418
|
-
/**
|
|
419
|
-
* Shared node data fields available across node types.
|
|
420
|
-
* Specific node kinds can narrow these fields via `NetworkNodeDataByType`.
|
|
421
|
-
* @public
|
|
422
|
-
*/
|
|
423
|
-
interface NetworkNodeDataBase extends DeviceImageOptions {
|
|
424
|
-
/** Display label for the node */
|
|
425
|
-
label: string;
|
|
426
|
-
/** Current status of the node/device */
|
|
427
|
-
status?: DeviceStatus | string;
|
|
428
|
-
/** Simple flat port input or grouped port blocks. Use `portGroups` / `rearPortGroups` for explicit grouped control. */
|
|
429
|
-
ports?: DevicePort[] | PortBlock[] | number;
|
|
430
|
-
/** Advanced grouped front port input */
|
|
431
|
-
portGroups?: PortBlock[];
|
|
432
|
-
/** Advanced grouped rear port input */
|
|
433
|
-
rearPortGroups?: PortBlock[];
|
|
434
|
-
/** Grouped rear port blocks (rack JSON alias for `rearPortGroups`) */
|
|
435
|
-
rearPorts?: PortBlock[];
|
|
436
|
-
/** List of connected node IDs */
|
|
437
|
-
connections?: string[];
|
|
438
|
-
/** NetBox integration ID */
|
|
439
|
-
netboxId?: number | string;
|
|
440
|
-
/** NetBox object type */
|
|
441
|
-
netboxType?: "device" | "rack" | "interface" | "cable" | string;
|
|
442
|
-
/** Inventory integration ID */
|
|
443
|
-
inventoryId?: number | string;
|
|
444
|
-
/** Inventory object type */
|
|
445
|
-
inventoryType?: "device" | "rack" | "interface" | "cable" | string;
|
|
446
|
-
/** Rack height in U units */
|
|
447
|
-
uHeight?: number;
|
|
448
|
-
/** Device position within rack in U units */
|
|
449
|
-
uPosition?: number;
|
|
450
|
-
/** Whether this node is currently mounted inside a rack container */
|
|
451
|
-
isRackMounted?: boolean;
|
|
452
|
-
/** Front/rear orientation for devices and rack faces */
|
|
453
|
-
face?: DeviceFace;
|
|
454
|
-
/** Rack rendering layout mode */
|
|
455
|
-
rackLayout?: RackLayoutMode;
|
|
456
|
-
/** Gap in pixels between front and rear faces in split-face mode */
|
|
457
|
-
rackFaceGapPx?: number;
|
|
458
|
-
/** Device mount behavior within a rack */
|
|
459
|
-
mountMode?: RackMountMode;
|
|
460
|
-
/** Device type specification */
|
|
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;
|
|
467
|
-
/** Device manufacturer */
|
|
468
|
-
manufacturer?: string;
|
|
469
|
-
/** Device role in network */
|
|
470
|
-
role?: string;
|
|
471
|
-
/** Device width configuration */
|
|
472
|
-
width?: Width | number;
|
|
473
|
-
/** Power port side for rear face */
|
|
474
|
-
powerSide?: PowerSide;
|
|
475
|
-
/** Vertical PDU height in centimeters */
|
|
476
|
-
heightCm?: number;
|
|
477
|
-
/** Number of AC power ports */
|
|
478
|
-
powerPorts?: number;
|
|
479
|
-
/** Optional explicit PDU connector sequence */
|
|
480
|
-
portTypes?: Array<"C13" | "C19">;
|
|
481
|
-
/** Optional grouped PDU ports (supports custom positions/types) */
|
|
482
|
-
pduPortGroups?: PortBlock[];
|
|
483
|
-
/** Vertical PDU width in pixels */
|
|
484
|
-
widthPx?: number;
|
|
485
|
-
/** Optional management unit position for vertical PDUs */
|
|
486
|
-
mgmt_unit?: "top" | "middle" | "bottom";
|
|
487
|
-
/** U numbering direction for rack nodes */
|
|
488
|
-
uNumberingDirection?: UNumberingDirection;
|
|
489
|
-
/** Custom header text for rack nodes */
|
|
490
|
-
customHeaderText?: string;
|
|
491
|
-
/** Rack UI marker visibility */
|
|
492
|
-
showUMarkers?: boolean;
|
|
493
|
-
/** Holder position within tray (1-12) for splice nodes */
|
|
494
|
-
holderPosition?: number;
|
|
495
|
-
/** Loss value in dB for splice nodes */
|
|
496
|
-
lossDb?: number;
|
|
497
|
-
/** Splice mode */
|
|
498
|
-
mode?: "single" | "ribbon";
|
|
499
|
-
/** Legacy ribbon flag */
|
|
500
|
-
ribbon?: boolean;
|
|
501
|
-
/** Ribbon fiber IDs */
|
|
502
|
-
ribbonFiberIds?: number[];
|
|
503
|
-
/** Connector type for coupler nodes */
|
|
504
|
-
connector?: "SC" | "LC";
|
|
505
|
-
/** Number of fibers for coupler nodes (1, 2, or 4) */
|
|
506
|
-
couplerFiberCount?: 1 | 2 | 4;
|
|
507
|
-
/** Optional port labels for left side of coupler */
|
|
508
|
-
portLabelsLeft?: string[];
|
|
509
|
-
/** Optional port labels for right side of coupler */
|
|
510
|
-
portLabelsRight?: string[];
|
|
511
|
-
/** Slot position for couplers inside panels (1-based, vertical slots aligned to right edge) */
|
|
512
|
-
slotPosition?: number;
|
|
513
|
-
/** Width override for panel-like container nodes */
|
|
514
|
-
panelWidth?: number;
|
|
515
|
-
/** Height override for panel-like container nodes */
|
|
516
|
-
panelHeight?: number;
|
|
517
|
-
/** Width override for closure nodes */
|
|
518
|
-
closureWidth?: number;
|
|
519
|
-
/** Height override for closure nodes */
|
|
520
|
-
closureHeight?: number;
|
|
521
|
-
/** Optional rack width in pixels (for rack nodes, default: 300px) */
|
|
522
|
-
rackWidthPx?: number;
|
|
523
|
-
/** Number of rows for container nodes (patch-panel, closure) */
|
|
524
|
-
rows?: number;
|
|
525
|
-
/** Number of columns for container nodes (patch-panel, closure) */
|
|
526
|
-
cols?: number;
|
|
527
|
-
/** Number of trays for closure nodes */
|
|
528
|
-
trayCount?: number;
|
|
529
|
-
/** Header text for container nodes */
|
|
530
|
-
header?: string;
|
|
531
|
-
/** Type of fibre splitter: 'splitter' or 'WDM' (default: 'splitter') */
|
|
532
|
-
splitterType?: "splitter" | "WDM";
|
|
533
|
-
/** Number of input fibers on the left (1 or 2, default: 1) */
|
|
534
|
-
inputCount?: number;
|
|
535
|
-
/** Number of output fibers on the right (1-64, default: 8) */
|
|
536
|
-
outputCount?: number;
|
|
537
|
-
/** Tube index (1-based) */
|
|
538
|
-
tubeIndex?: number;
|
|
539
|
-
/** Tube count for multi-tube cables */
|
|
540
|
-
tubeCount?: number;
|
|
541
|
-
/** Tube start index for multi-tube cables */
|
|
542
|
-
tubeStartIndex?: number;
|
|
543
|
-
/** Number of fibers per tube */
|
|
544
|
-
fibersPerTube?: number;
|
|
545
|
-
/** Total fiber count for cables */
|
|
546
|
-
fiberCount?: number;
|
|
547
|
-
/** Cable identifier */
|
|
548
|
-
cableId?: string;
|
|
549
|
-
/** Primary node color override */
|
|
550
|
-
color?: string;
|
|
551
|
-
/** Rotation in degrees for rotatable nodes */
|
|
552
|
-
rotation?: number;
|
|
553
|
-
/** Tube handle orientation */
|
|
554
|
-
startOn?: "left-center" | "left" | "right";
|
|
555
|
-
/** Rack metadata for integrations */
|
|
556
|
-
facilityId?: string | number | null;
|
|
557
|
-
/** Rack serial metadata */
|
|
558
|
-
serial?: string | null;
|
|
559
|
-
/** Asset tag metadata */
|
|
560
|
-
assetTag?: string | null;
|
|
561
|
-
/** Site metadata */
|
|
562
|
-
site?: string;
|
|
563
|
-
/** Tenant metadata */
|
|
564
|
-
tenant?: string;
|
|
565
|
-
/** Primary IPv4 metadata */
|
|
566
|
-
primaryIp4?: string;
|
|
567
|
-
/** Primary IPv6 metadata */
|
|
568
|
-
primaryIp6?: string;
|
|
569
|
-
/** Rack name metadata */
|
|
570
|
-
rack?: string | number | null;
|
|
571
|
-
/** Optional arrays used by inventory/netbox transforms */
|
|
572
|
-
racks?: unknown[];
|
|
573
|
-
devices?: unknown[];
|
|
574
|
-
cables?: unknown[];
|
|
575
|
-
/** UI color mode metadata */
|
|
576
|
-
colorMode?: "light" | "dark" | "system";
|
|
577
|
-
/** Generic dimensions used by some helpers */
|
|
578
|
-
height?: number;
|
|
579
|
-
headerHeight?: number;
|
|
580
|
-
/** Optional precomputed map for handle-to-face resolution */
|
|
581
|
-
handleSideMap?: Record<string, DeviceFace>;
|
|
582
|
-
/** Additional extension metadata */
|
|
583
|
-
metadata?: Record<string, unknown>;
|
|
584
|
-
}
|
|
585
|
-
/**
|
|
586
|
-
* Rack node data.
|
|
587
|
-
* @public
|
|
588
|
-
*/
|
|
589
|
-
interface RackNodeData extends NetworkNodeDataBase {
|
|
590
|
-
ports?: number;
|
|
591
|
-
}
|
|
592
|
-
/**
|
|
593
|
-
* Device-like node data (servers/switches/routers/generic device).
|
|
594
|
-
* @public
|
|
595
|
-
*/
|
|
596
|
-
interface DeviceNodeData extends NetworkNodeDataBase {
|
|
597
|
-
ports?: DevicePort[] | PortBlock[] | number;
|
|
598
|
-
}
|
|
599
|
-
/**
|
|
600
|
-
* Fibre flow cable node data.
|
|
601
|
-
* @public
|
|
602
|
-
*/
|
|
603
|
-
interface FibreFlowCableNodeData extends NetworkNodeDataBase {
|
|
604
|
-
cable: FibreFlowCable;
|
|
605
|
-
side: "left" | "right";
|
|
606
|
-
rowHeight: number;
|
|
607
|
-
columnWidth: number;
|
|
608
|
-
showTubeLabels: boolean;
|
|
609
|
-
showFiberNumbers: boolean;
|
|
610
|
-
layout: unknown;
|
|
611
|
-
colorMode?: "dark" | "light";
|
|
612
|
-
}
|
|
613
|
-
/**
|
|
614
|
-
* Fibre flow closure node data.
|
|
615
|
-
* @public
|
|
616
|
-
*/
|
|
617
|
-
interface FibreFlowClosureNodeData extends NetworkNodeDataBase {
|
|
618
|
-
width?: number;
|
|
619
|
-
height?: number;
|
|
620
|
-
headerHeight?: number;
|
|
621
|
-
colorMode?: "dark" | "light";
|
|
622
|
-
}
|
|
623
|
-
/**
|
|
624
|
-
* Mapping from node type to corresponding data type.
|
|
625
|
-
* @public
|
|
626
|
-
*/
|
|
627
|
-
interface NetworkNodeDataByType {
|
|
628
|
-
rack: RackNodeData;
|
|
629
|
-
switch: DeviceNodeData;
|
|
630
|
-
router: DeviceNodeData;
|
|
631
|
-
server: DeviceNodeData;
|
|
632
|
-
fiber: NetworkNodeDataBase;
|
|
633
|
-
"patch-panel": NetworkNodeDataBase;
|
|
634
|
-
device: DeviceNodeData;
|
|
635
|
-
"vertical-pdu": NetworkNodeDataBase;
|
|
636
|
-
splice: NetworkNodeDataBase;
|
|
637
|
-
"splice-tray": NetworkNodeDataBase;
|
|
638
|
-
tube: NetworkNodeDataBase;
|
|
639
|
-
cable: NetworkNodeDataBase;
|
|
640
|
-
"multi-tube-cable": NetworkNodeDataBase;
|
|
641
|
-
coupler: NetworkNodeDataBase;
|
|
642
|
-
closure: NetworkNodeDataBase;
|
|
643
|
-
"fibre-split": NetworkNodeDataBase;
|
|
644
|
-
"fibre-flow-cable": FibreFlowCableNodeData;
|
|
645
|
-
"fibre-flow-closure": FibreFlowClosureNodeData;
|
|
646
|
-
}
|
|
647
|
-
/**
|
|
648
|
-
* Union of all node data variants.
|
|
649
|
-
* @public
|
|
650
|
-
*/
|
|
651
|
-
type NetworkNodeData = NetworkNodeDataByType[NetworkNodeType];
|
|
652
|
-
/**
|
|
653
|
-
* Network node structure with data discriminated by `type`.
|
|
654
|
-
* @public
|
|
655
|
-
*/
|
|
656
|
-
type NetworkNode<TType extends NetworkNodeType = NetworkNodeType, TExtra = unknown> = TType extends NetworkNodeType ? Node<NetworkNodeDataByType[TType] & TExtra, TType> & {
|
|
657
|
-
/** Type of network node */
|
|
658
|
-
type: TType;
|
|
659
|
-
/** Node data and configuration */
|
|
660
|
-
data: NetworkNodeDataByType[TType] & TExtra;
|
|
661
|
-
} : never;
|
|
662
|
-
/**
|
|
663
|
-
* Network edge types
|
|
664
|
-
* @public
|
|
665
|
-
*/
|
|
666
|
-
type NetworkEdgeType = "fiber" | "ethernet" | "power" | "smoothstep" | "step" | "thick-cable" | "fibre-flow" | "fibre-flow-link";
|
|
667
|
-
/**
|
|
668
|
-
* Edge data payload.
|
|
669
|
-
* @public
|
|
670
|
-
*/
|
|
671
|
-
interface NetworkEdgeData {
|
|
672
|
-
/** Connection bandwidth */
|
|
673
|
-
bandwidth?: string;
|
|
674
|
-
/** Cable length */
|
|
675
|
-
length?: number;
|
|
676
|
-
/** Edge color for styling */
|
|
677
|
-
color?: string;
|
|
678
|
-
/** Edge kind for styling/validation */
|
|
679
|
-
kind?: "fiber" | "power" | "network";
|
|
680
|
-
/** Whether this edge represents a ribbon fiber connection */
|
|
681
|
-
isRibbon?: boolean;
|
|
682
|
-
/** Array of fiber IDs for ribbon mode (6-12 fibers) */
|
|
683
|
-
ribbonFiberIds?: number[];
|
|
684
|
-
/** Highlight edge with a pulsing stroke */
|
|
685
|
-
highlight?: boolean;
|
|
686
|
-
/** Override highlight color (defaults to edge color) */
|
|
687
|
-
highlightColor?: string;
|
|
688
|
-
/** Override highlight max stroke width */
|
|
689
|
-
highlightWidth?: number;
|
|
690
|
-
/** Optional tag for grouping edges in demos */
|
|
691
|
-
traceTag?: string;
|
|
692
|
-
/** Legacy striped edge flag */
|
|
693
|
-
striped?: boolean;
|
|
694
|
-
/** Cable type metadata used by demos/helpers */
|
|
695
|
-
cableType?: PortCableType;
|
|
696
|
-
/** NetBox integration metadata */
|
|
697
|
-
netboxId?: number | string;
|
|
698
|
-
netboxType?: "device" | "rack" | "interface" | "cable" | string;
|
|
699
|
-
/** Inventory integration metadata */
|
|
700
|
-
inventoryId?: number | string;
|
|
701
|
-
inventoryType?: "device" | "rack" | "interface" | "cable" | string;
|
|
702
|
-
/** Status metadata */
|
|
703
|
-
status?: string;
|
|
704
|
-
/** Endpoint metadata */
|
|
705
|
-
terminationA?: string;
|
|
706
|
-
terminationB?: string;
|
|
707
|
-
/** Optional display label for the edge */
|
|
708
|
-
label?: string;
|
|
709
|
-
/** Optional opacity for styling (0–1) */
|
|
710
|
-
opacity?: number;
|
|
711
|
-
/** Optional power edge stroke width override */
|
|
712
|
-
powerStrokeWidth?: number;
|
|
713
|
-
/** Optional power edge stroke dasharray override */
|
|
714
|
-
powerStrokeDasharray?: string;
|
|
715
|
-
/** Optional power edge opacity override (0–1) */
|
|
716
|
-
powerOpacity?: number;
|
|
717
|
-
/** Additional extension metadata */
|
|
718
|
-
metadata?: Record<string, unknown>;
|
|
719
|
-
}
|
|
720
|
-
/**
|
|
721
|
-
* Network edge data structure
|
|
722
|
-
* @public
|
|
723
|
-
*/
|
|
724
|
-
type NetworkEdge<TData extends NetworkEdgeData = NetworkEdgeData> = {
|
|
725
|
-
/** Unique identifier for the edge */
|
|
726
|
-
id: string;
|
|
727
|
-
/** Source node ID */
|
|
728
|
-
source: string;
|
|
729
|
-
/** Target node ID */
|
|
730
|
-
target: string;
|
|
731
|
-
/** Source handle/port ID */
|
|
732
|
-
sourceHandle?: string;
|
|
733
|
-
/** Target handle/port ID */
|
|
734
|
-
targetHandle?: string;
|
|
735
|
-
/** Type of network connection */
|
|
736
|
-
type?: NetworkEdgeType;
|
|
737
|
-
/** Whether the edge should be hidden from rendering */
|
|
738
|
-
hidden?: boolean;
|
|
739
|
-
/** Edge data and configuration */
|
|
740
|
-
data?: TData;
|
|
741
|
-
};
|
|
742
|
-
/**
|
|
743
|
-
* Canonical persisted/editor document schema independent from React Flow handle ids.
|
|
744
|
-
* Prefer this model for saving diagrams, syncing external systems, and controlled
|
|
745
|
-
* document-mode usage via `document` / `onDocumentChange`.
|
|
746
|
-
* @public
|
|
747
|
-
*/
|
|
748
|
-
interface DiagramDocument {
|
|
749
|
-
nodes: DiagramNode[];
|
|
750
|
-
edges: DiagramEdge[];
|
|
751
|
-
ui?: DiagramUiState;
|
|
752
|
-
metadata?: Record<string, unknown>;
|
|
753
|
-
}
|
|
754
|
-
/**
|
|
755
|
-
* Node kinds used by the document model.
|
|
756
|
-
* @public
|
|
757
|
-
*/
|
|
758
|
-
type DiagramNodeKind = "rack" | "equipment" | "pdu" | "fiber" | "tube" | "cable" | "multi-tube-cable" | "splice" | "coupler" | "splitter" | "container" | "fibre-flow-cable" | "fibre-flow-closure";
|
|
759
|
-
/**
|
|
760
|
-
* Placement data for document nodes.
|
|
761
|
-
* @public
|
|
762
|
-
*/
|
|
763
|
-
interface DiagramNodePlacement {
|
|
764
|
-
position: {
|
|
765
|
-
x: number;
|
|
766
|
-
y: number;
|
|
767
|
-
};
|
|
768
|
-
parentId?: string;
|
|
769
|
-
extent?: "parent";
|
|
770
|
-
rack?: {
|
|
771
|
-
uPosition?: number;
|
|
772
|
-
mountMode?: RackMountMode;
|
|
773
|
-
rackLayout?: RackLayoutMode;
|
|
774
|
-
rackWidthPx?: number;
|
|
775
|
-
rackFaceGapPx?: number;
|
|
776
|
-
};
|
|
777
|
-
container?: {
|
|
778
|
-
slotPosition?: number;
|
|
779
|
-
holderPosition?: number;
|
|
780
|
-
};
|
|
781
|
-
}
|
|
782
|
-
/**
|
|
783
|
-
* Endpoint definition for document nodes.
|
|
784
|
-
* @public
|
|
785
|
-
*/
|
|
786
|
-
interface DiagramEndpoint {
|
|
787
|
-
id: string;
|
|
788
|
-
label: string;
|
|
789
|
-
face?: DeviceFace | "internal";
|
|
790
|
-
group?: string;
|
|
791
|
-
role?: "network" | "power" | "fiber" | "tube" | "splice" | "coupler" | "splitter" | "cable" | "generic";
|
|
792
|
-
medium?: "ethernet" | "fiber" | "power" | "tube" | "generic";
|
|
793
|
-
type?: PortType;
|
|
794
|
-
cableType?: PortCableType;
|
|
795
|
-
connector?: string;
|
|
796
|
-
compatibility?: string[];
|
|
797
|
-
layout?: PortPosition;
|
|
798
|
-
}
|
|
799
|
-
/**
|
|
800
|
-
* Render-focused node data for the document model.
|
|
801
|
-
* @public
|
|
802
|
-
*/
|
|
803
|
-
interface DiagramNodeRender {
|
|
804
|
-
status?: DeviceStatus | string;
|
|
805
|
-
face?: DeviceFace;
|
|
806
|
-
width?: Width | number;
|
|
807
|
-
widthPx?: number;
|
|
808
|
-
height?: number;
|
|
809
|
-
header?: string;
|
|
810
|
-
color?: string;
|
|
811
|
-
colorMode?: "light" | "dark" | "system";
|
|
812
|
-
rackWidthPx?: number;
|
|
813
|
-
rackFaceGapPx?: number;
|
|
814
|
-
images?: DeviceImageOptions;
|
|
815
|
-
dimensions?: Record<string, number | undefined>;
|
|
816
|
-
showUMarkers?: boolean;
|
|
817
|
-
customHeaderText?: string;
|
|
818
|
-
powerSide?: PowerSide;
|
|
819
|
-
rotation?: number;
|
|
820
|
-
}
|
|
821
|
-
/**
|
|
822
|
-
* External reference attached to a document node.
|
|
823
|
-
* @public
|
|
824
|
-
*/
|
|
825
|
-
interface DiagramExternalRef {
|
|
826
|
-
source: "netbox" | "inventory" | string;
|
|
827
|
-
id: string | number;
|
|
828
|
-
type?: string;
|
|
829
|
-
metadata?: Record<string, unknown>;
|
|
830
|
-
}
|
|
831
|
-
/**
|
|
832
|
-
* Document node.
|
|
833
|
-
* @public
|
|
834
|
-
*/
|
|
835
|
-
interface DiagramNode {
|
|
836
|
-
id: string;
|
|
837
|
-
kind: DiagramNodeKind;
|
|
838
|
-
subtype?: string;
|
|
839
|
-
label: string;
|
|
840
|
-
placement: DiagramNodePlacement;
|
|
841
|
-
endpoints?: DiagramEndpoint[];
|
|
842
|
-
render?: DiagramNodeRender;
|
|
843
|
-
config?: Record<string, unknown>;
|
|
844
|
-
externalRefs?: DiagramExternalRef[];
|
|
845
|
-
metadata?: Record<string, unknown>;
|
|
846
|
-
}
|
|
847
|
-
/**
|
|
848
|
-
* Endpoint reference used by document edges.
|
|
849
|
-
* @public
|
|
850
|
-
*/
|
|
851
|
-
interface DiagramEdgeEndpoint {
|
|
852
|
-
nodeId: string;
|
|
853
|
-
endpointId?: string | null;
|
|
854
|
-
}
|
|
855
|
-
/**
|
|
856
|
-
* Document edge.
|
|
857
|
-
* @public
|
|
858
|
-
*/
|
|
859
|
-
interface DiagramEdge {
|
|
860
|
-
id: string;
|
|
861
|
-
source: DiagramEdgeEndpoint;
|
|
862
|
-
target: DiagramEdgeEndpoint;
|
|
863
|
-
type?: NetworkEdgeType;
|
|
864
|
-
hidden?: boolean;
|
|
865
|
-
data?: NetworkEdgeData;
|
|
866
|
-
metadata?: Record<string, unknown>;
|
|
867
|
-
}
|
|
868
|
-
/**
|
|
869
|
-
* Non-topology UI state stored alongside a document.
|
|
870
|
-
* @public
|
|
871
|
-
*/
|
|
872
|
-
interface DiagramUiState {
|
|
873
|
-
nodeState?: Record<string, {
|
|
874
|
-
face?: DeviceFace;
|
|
875
|
-
handleSideMap?: Record<string, DeviceFace>;
|
|
876
|
-
}>;
|
|
877
|
-
metadata?: Record<string, unknown>;
|
|
878
|
-
}
|
|
879
|
-
/**
|
|
880
|
-
* Rack device types
|
|
881
|
-
* @public
|
|
882
|
-
*/
|
|
883
|
-
type RackDeviceType = "server" | "switch" | "router" | "patch-panel" | "ups";
|
|
884
|
-
/**
|
|
885
|
-
* Rack configuration structure
|
|
886
|
-
* @public
|
|
887
|
-
*/
|
|
888
|
-
interface RackConfig {
|
|
889
|
-
/** Unique rack identifier */
|
|
890
|
-
id: string;
|
|
891
|
-
/** Rack display name */
|
|
892
|
-
name: string;
|
|
893
|
-
/** Rack position coordinates */
|
|
894
|
-
position: {
|
|
895
|
-
x: number;
|
|
896
|
-
y: number;
|
|
897
|
-
};
|
|
898
|
-
/** Rack height in U units */
|
|
899
|
-
units: number;
|
|
900
|
-
/** U numbering direction (default: 'bottom-up') */
|
|
901
|
-
uNumberingDirection?: UNumberingDirection;
|
|
902
|
-
/** Custom header text for rack */
|
|
903
|
-
customHeaderText?: string;
|
|
904
|
-
/** Rack rendering layout mode */
|
|
905
|
-
rackLayout?: RackLayoutMode;
|
|
906
|
-
/** Gap in pixels between front and rear faces in split-face mode */
|
|
907
|
-
rackFaceGapPx?: number;
|
|
908
|
-
/** Devices mounted in the rack */
|
|
909
|
-
devices: RackDevice[];
|
|
910
|
-
/** Optional rack width in pixels (default: 300px which represents standard 48.26cm/19" rack) */
|
|
911
|
-
rackWidthPx?: number;
|
|
912
|
-
}
|
|
913
|
-
/**
|
|
914
|
-
* Device mounted in a rack
|
|
915
|
-
* @public
|
|
916
|
-
*/
|
|
917
|
-
interface RackDevice extends DeviceImageOptions {
|
|
918
|
-
/** Unique device identifier */
|
|
919
|
-
id: string;
|
|
920
|
-
/** Device display name */
|
|
921
|
-
name: string;
|
|
922
|
-
/** Starting U position in rack */
|
|
923
|
-
unit: number;
|
|
924
|
-
/** Device height in U units */
|
|
925
|
-
height: number;
|
|
926
|
-
/** Device type */
|
|
927
|
-
type: RackDeviceType;
|
|
928
|
-
/** Device width configuration */
|
|
929
|
-
width?: Width;
|
|
930
|
-
/** Device mount behavior within a rack */
|
|
931
|
-
mountMode?: RackMountMode;
|
|
932
|
-
/** Device role in network */
|
|
933
|
-
role?: string;
|
|
934
|
-
/** Recommended simple port input (flat `DevicePort[]` or grouped `PortBlock[]`). */
|
|
935
|
-
ports?: DevicePort[] | PortBlock[];
|
|
936
|
-
/** Current status of the device */
|
|
937
|
-
status?: DeviceStatus | string;
|
|
938
|
-
/** Advanced grouped front port input */
|
|
939
|
-
portGroups?: PortBlock[];
|
|
940
|
-
/** Advanced grouped rear port input */
|
|
941
|
-
rearPortGroups?: PortBlock[];
|
|
942
|
-
/** Grouped rear port blocks (rack JSON alias for `rearPortGroups`) */
|
|
943
|
-
rearPorts?: PortBlock[];
|
|
944
|
-
/** Power port side for rear face */
|
|
945
|
-
powerSide?: PowerSide;
|
|
946
|
-
/** Connected device IDs */
|
|
947
|
-
connections?: string[];
|
|
948
|
-
}
|
|
949
|
-
/**
|
|
950
|
-
* Fiber cable types
|
|
951
|
-
* @public
|
|
952
|
-
*/
|
|
953
|
-
type FiberCableType = "single-mode" | "multi-mode";
|
|
954
|
-
/**
|
|
955
|
-
* Fiber cable configuration
|
|
956
|
-
* @public
|
|
957
|
-
*/
|
|
958
|
-
interface FiberCable {
|
|
959
|
-
/** Unique cable identifier */
|
|
960
|
-
id: string;
|
|
961
|
-
/** Cable display name */
|
|
962
|
-
name: string;
|
|
963
|
-
/** Fiber cable type */
|
|
964
|
-
type: FiberCableType;
|
|
965
|
-
/** Cable length */
|
|
966
|
-
length: number;
|
|
967
|
-
/** Cable color for visualization */
|
|
968
|
-
color: string;
|
|
969
|
-
/** Connection endpoints */
|
|
970
|
-
connections: {
|
|
971
|
-
/** Source connection point */
|
|
972
|
-
from: string;
|
|
973
|
-
/** Target connection point */
|
|
974
|
-
to: string;
|
|
975
|
-
};
|
|
976
|
-
}
|
|
977
|
-
/**
|
|
978
|
-
* Splice configuration structure
|
|
979
|
-
* @public
|
|
980
|
-
*/
|
|
981
|
-
interface SpliceConfig {
|
|
982
|
-
/** Unique splice identifier */
|
|
983
|
-
id: string;
|
|
984
|
-
/** Splice display name */
|
|
985
|
-
name: string;
|
|
986
|
-
/** Holder position within tray (1-12) */
|
|
987
|
-
holder: number;
|
|
988
|
-
/** Loss value in dB */
|
|
989
|
-
lossDb?: number;
|
|
990
|
-
/** Splice mode: 'single' for individual fiber, 'ribbon' for ribbon splices */
|
|
991
|
-
mode?: "single" | "ribbon";
|
|
992
|
-
/** For ribbon mode: array of fiber IDs (6-12) in the ribbon */
|
|
993
|
-
ribbonFiberIds?: number[];
|
|
994
|
-
}
|
|
995
|
-
/**
|
|
996
|
-
* Splice tray configuration structure
|
|
997
|
-
* @public
|
|
998
|
-
*/
|
|
999
|
-
interface SpliceTrayConfig {
|
|
1000
|
-
/** Unique tray identifier */
|
|
1001
|
-
id: string;
|
|
1002
|
-
/** Tray display name */
|
|
1003
|
-
name: string;
|
|
1004
|
-
/** Tray position coordinates */
|
|
1005
|
-
position: {
|
|
1006
|
-
x: number;
|
|
1007
|
-
y: number;
|
|
1008
|
-
};
|
|
1009
|
-
/** Splices in this tray */
|
|
1010
|
-
splices: SpliceConfig[];
|
|
1011
|
-
}
|
|
1012
|
-
/**
|
|
1013
|
-
* Fine-grained interaction controls for network diagrams.
|
|
1014
|
-
* @public
|
|
1015
|
-
*/
|
|
1016
|
-
interface NetworkDiagramInteractionOptions {
|
|
1017
|
-
/** Enable node dragging. */
|
|
1018
|
-
nodesDraggable?: boolean;
|
|
1019
|
-
/** Enable creating connections from node handles. */
|
|
1020
|
-
nodesConnectable?: boolean;
|
|
1021
|
-
/** Enable selecting nodes/edges. */
|
|
1022
|
-
elementsSelectable?: boolean;
|
|
1023
|
-
/** Enable keyboard/mouse focus on edges. */
|
|
1024
|
-
edgesFocusable?: boolean;
|
|
1025
|
-
/** Enable reconnecting existing edges. */
|
|
1026
|
-
edgesReconnectable?: boolean;
|
|
1027
|
-
/** Enable click-to-connect behavior on handles. */
|
|
1028
|
-
connectOnClick?: boolean;
|
|
1029
|
-
/** Enable panning by dragging the canvas. */
|
|
1030
|
-
panOnDrag?: boolean;
|
|
1031
|
-
/** Enable panning by scrolling. */
|
|
1032
|
-
panOnScroll?: boolean;
|
|
1033
|
-
/** Enable zoom via mouse wheel/trackpad scroll. */
|
|
1034
|
-
zoomOnScroll?: boolean;
|
|
1035
|
-
/** Enable pinch-zoom gestures. */
|
|
1036
|
-
zoomOnPinch?: boolean;
|
|
1037
|
-
/** Enable zoom on double click. */
|
|
1038
|
-
zoomOnDoubleClick?: boolean;
|
|
1039
|
-
/** Enable deleting selected edges with keyboard keys. */
|
|
1040
|
-
allowKeyboardDelete?: boolean;
|
|
1041
|
-
/** Show or hide the built-in React Flow controls widget. */
|
|
1042
|
-
showControls?: boolean;
|
|
1043
|
-
/** Show or hide the minimap. */
|
|
1044
|
-
showMiniMap?: boolean;
|
|
1045
|
-
/** Show or hide the interactive lock/unlock button in controls. */
|
|
1046
|
-
showInteractiveControl?: boolean;
|
|
1047
|
-
}
|
|
1048
|
-
/**
|
|
1049
|
-
* Selection action panel options rendered above selected racks/devices.
|
|
1050
|
-
* @public
|
|
1051
|
-
*/
|
|
1052
|
-
interface NetworkDiagramActionPanelOptions {
|
|
1053
|
-
/** Enable or disable the floating action panel entirely. Defaults to true. */
|
|
1054
|
-
enabled?: boolean;
|
|
1055
|
-
/** Show or hide the front/rear toggle button. Defaults to true. */
|
|
1056
|
-
showRearToggle?: boolean;
|
|
1057
|
-
/** Show or hide the De-rack button for rack-mounted devices. Defaults to true. */
|
|
1058
|
-
showDeRack?: boolean;
|
|
1059
|
-
}
|
|
1060
|
-
/**
|
|
1061
|
-
* Serializable flow snapshot payload for save/restore helpers.
|
|
1062
|
-
* @public
|
|
1063
|
-
*/
|
|
1064
|
-
interface NetworkDiagramFlowObject {
|
|
1065
|
-
/** Snapshot nodes */
|
|
1066
|
-
nodes: NetworkNode[];
|
|
1067
|
-
/** Snapshot edges */
|
|
1068
|
-
edges: NetworkEdge[];
|
|
1069
|
-
/** Optional viewport state */
|
|
1070
|
-
viewport?: Viewport;
|
|
1071
|
-
}
|
|
1072
|
-
/**
|
|
1073
|
-
* Options for exported diagram images.
|
|
1074
|
-
* @public
|
|
1075
|
-
*/
|
|
1076
|
-
interface NetworkDiagramToImageOptions {
|
|
1077
|
-
/** Export width in px (clamped to 1-8192). */
|
|
1078
|
-
width?: number;
|
|
1079
|
-
/** Export height in px (clamped to 1-8192). */
|
|
1080
|
-
height?: number;
|
|
1081
|
-
backgroundColor?: string;
|
|
1082
|
-
/** Export padding in px (clamped to 0-2048). */
|
|
1083
|
-
padding?: number;
|
|
1084
|
-
/** Device pixel ratio multiplier (clamped to 0.1-4). */
|
|
1085
|
-
pixelRatio?: number;
|
|
1086
|
-
/** JPEG/WebP quality (clamped to 0-1 when used). */
|
|
1087
|
-
quality?: number;
|
|
1088
|
-
filter?: (domNode: HTMLElement) => boolean;
|
|
1089
|
-
}
|
|
1090
|
-
/**
|
|
1091
|
-
* Fit-view options that support targeting node IDs directly.
|
|
1092
|
-
* @public
|
|
1093
|
-
*/
|
|
1094
|
-
interface NetworkDiagramFitViewOptions extends Omit<FitViewOptions, "nodes"> {
|
|
1095
|
-
/** Optional node IDs to fit */
|
|
1096
|
-
nodes?: string[];
|
|
1097
|
-
}
|
|
1098
|
-
/**
|
|
1099
|
-
* Exposed methods for save/restore and export integrations.
|
|
1100
|
-
* @public
|
|
1101
|
-
*/
|
|
1102
|
-
interface NetworkDiagramFlowMethods {
|
|
1103
|
-
toObject: () => NetworkDiagramFlowObject;
|
|
1104
|
-
setViewport: (viewport: Viewport) => void;
|
|
1105
|
-
setNodes: (nodes: NetworkNode[]) => void;
|
|
1106
|
-
setEdges: (edges: NetworkEdge[]) => void;
|
|
1107
|
-
toImage: (options?: NetworkDiagramToImageOptions) => Promise<string>;
|
|
1108
|
-
getNodes: () => NetworkNode[];
|
|
1109
|
-
getEdges: () => NetworkEdge[];
|
|
1110
|
-
fitView: (options?: NetworkDiagramFitViewOptions) => void;
|
|
1111
|
-
}
|
|
1112
|
-
/**
|
|
1113
|
-
* Store state shape used by `NetworkDiagramStoreApi`.
|
|
1114
|
-
* @public
|
|
1115
|
-
*/
|
|
1116
|
-
interface NetworkDiagramStoreState {
|
|
1117
|
-
nodes: NetworkNode[];
|
|
1118
|
-
edges: NetworkEdge[];
|
|
1119
|
-
debug?: boolean;
|
|
1120
|
-
}
|
|
1121
|
-
/**
|
|
1122
|
-
* Store connection validation parameters.
|
|
1123
|
-
* @public
|
|
1124
|
-
*/
|
|
1125
|
-
interface NetworkDiagramValidateConnectionParams {
|
|
1126
|
-
source: string | null;
|
|
1127
|
-
target: string | null;
|
|
1128
|
-
sourceHandle?: string | null;
|
|
1129
|
-
targetHandle?: string | null;
|
|
1130
|
-
}
|
|
1131
|
-
/**
|
|
1132
|
-
* Store connection validation result.
|
|
1133
|
-
* @public
|
|
1134
|
-
*/
|
|
1135
|
-
interface NetworkDiagramValidationResult {
|
|
1136
|
-
valid: boolean;
|
|
1137
|
-
reason?: string;
|
|
1138
|
-
}
|
|
1139
|
-
/**
|
|
1140
|
-
* Store contract accepted by `NetworkDiagram`.
|
|
1141
|
-
* @public
|
|
1142
|
-
*/
|
|
1143
|
-
interface NetworkDiagramStoreApi {
|
|
1144
|
-
getState: () => NetworkDiagramStoreState;
|
|
1145
|
-
setState: (partial: Partial<NetworkDiagramStoreState>) => void;
|
|
1146
|
-
subscribe: (listener: (state: NetworkDiagramStoreState) => void) => () => void;
|
|
1147
|
-
selectEdgeZIndex: (edge: NetworkEdge) => number;
|
|
1148
|
-
validateConnection: (params: NetworkDiagramValidateConnectionParams) => NetworkDiagramValidationResult;
|
|
1149
|
-
selectNodeById: (id: string) => NetworkNode | undefined;
|
|
1150
|
-
selectConnectedEdges: (nodeId: string) => NetworkEdge[];
|
|
1151
|
-
}
|
|
1152
|
-
/**
|
|
1153
|
-
* Network diagram component props
|
|
1154
|
-
* @public
|
|
1155
|
-
*/
|
|
1156
|
-
interface NetworkDiagramProps {
|
|
1157
|
-
/** Controlled document model. When provided, it takes precedence over nodes/edges props. */
|
|
1158
|
-
document?: DiagramDocument;
|
|
1159
|
-
/** Initial document for uncontrolled document mode. */
|
|
1160
|
-
initialDocument?: DiagramDocument;
|
|
1161
|
-
/** Callback when the document changes in document mode. */
|
|
1162
|
-
onDocumentChange?: (document: DiagramDocument) => void;
|
|
1163
|
-
/** Controlled nodes array */
|
|
1164
|
-
nodes?: NetworkNode[];
|
|
1165
|
-
/** Controlled edges array */
|
|
1166
|
-
edges?: NetworkEdge[];
|
|
1167
|
-
/** Callback when nodes change (controlled mode) */
|
|
1168
|
-
onNodesChange?: (nodes: NetworkNode[]) => void;
|
|
1169
|
-
/** Callback when edges change (controlled mode) */
|
|
1170
|
-
onEdgesChange?: (edges: NetworkEdge[]) => void;
|
|
1171
|
-
/** Initial nodes for uncontrolled mode */
|
|
1172
|
-
initialNodes?: NetworkNode[];
|
|
1173
|
-
/** Initial edges for uncontrolled mode */
|
|
1174
|
-
initialEdges?: NetworkEdge[];
|
|
1175
|
-
/** Headless store injection */
|
|
1176
|
-
store?: NetworkDiagramStoreApi;
|
|
1177
|
-
/** Enable debug mode */
|
|
1178
|
-
debug?: boolean;
|
|
1179
|
-
/** Callback when a node is clicked or selection changes (null when deselected) */
|
|
1180
|
-
onNodeClick?: (node: NetworkNode | null) => void;
|
|
1181
|
-
/** Callback when an edge is clicked */
|
|
1182
|
-
onEdgeClick?: (edge: NetworkEdge) => void;
|
|
1183
|
-
/** Custom React Flow node types to merge with defaults */
|
|
1184
|
-
nodeTypes?: NodeTypes;
|
|
1185
|
-
/** Custom React Flow edge types to merge with defaults */
|
|
1186
|
-
edgeTypes?: EdgeTypes;
|
|
1187
|
-
/** Optional onConnect override (React Flow connection handler) */
|
|
1188
|
-
onConnect?: (connection: Connection) => void;
|
|
1189
|
-
/** Optional onEdgeUpdate override */
|
|
1190
|
-
onEdgeUpdate?: (oldEdge: Edge, newConnection: Connection) => void;
|
|
1191
|
-
/** Optional isValidConnection override */
|
|
1192
|
-
isValidConnection?: (connection: Connection) => boolean;
|
|
1193
|
-
/** Optional connection mode override */
|
|
1194
|
-
connectionMode?: ConnectionMode;
|
|
1195
|
-
/** Callback when a device face changes */
|
|
1196
|
-
onFaceChange?: (nodeId: string, face: DeviceFace) => void;
|
|
1197
|
-
/** Callback when rack face changes */
|
|
1198
|
-
onRackFaceChange?: (rackId: string, face: DeviceFace) => void;
|
|
1199
|
-
/** CSS class name */
|
|
1200
|
-
className?: string;
|
|
1201
|
-
/** Inline styles */
|
|
1202
|
-
style?: React.CSSProperties;
|
|
1203
|
-
/** If true, vertically align rack bottoms to the same baseline */
|
|
1204
|
-
alignRacksToBottom?: boolean;
|
|
1205
|
-
/** Allow rack-mounted devices to move between racks/ungroup on drag and drop. Defaults to true. */
|
|
1206
|
-
reAssignable?: boolean;
|
|
1207
|
-
/** Color mode for the diagram */
|
|
1208
|
-
colorMode?: "light" | "dark" | "system";
|
|
1209
|
-
/** Callback when React Flow instance is initialized */
|
|
1210
|
-
onInit?: (instance: ReactFlowInstance) => void;
|
|
1211
|
-
/** Callback to get React Flow methods for save/restore */
|
|
1212
|
-
onFlowMethods?: (methods: NetworkDiagramFlowMethods) => void;
|
|
1213
|
-
/** Show download button */
|
|
1214
|
-
showDownloadButton?: boolean;
|
|
1215
|
-
/** Download button position */
|
|
1216
|
-
downloadButtonPosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
1217
|
-
/** Custom download button text */
|
|
1218
|
-
downloadButtonText?: string;
|
|
1219
|
-
/** Download button styling options */
|
|
1220
|
-
downloadButtonStyle?: React.CSSProperties;
|
|
1221
|
-
/** Use smoothstep edges for tube connections (both tube-to-cable and cable-to-tube). Default is fiber. */
|
|
1222
|
-
useSmoothstepEdgesForTubes?: boolean;
|
|
1223
|
-
/** Force read-only behavior for the diagram (no drag/connect/delete/reconnect/pan/zoom edits). */
|
|
1224
|
-
readOnly?: boolean;
|
|
1225
|
-
/** Centralized interaction options for consistent edit/lock behavior. */
|
|
1226
|
-
interaction?: NetworkDiagramInteractionOptions;
|
|
1227
|
-
/** Configuration for the floating action panel shown on selected rack/device nodes. */
|
|
1228
|
-
actionPanel?: NetworkDiagramActionPanelOptions;
|
|
1229
|
-
/** Optional fitView options passed to React Flow */
|
|
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;
|
|
1240
|
-
/**
|
|
1241
|
-
* Let React Flow render only viewport-visible nodes and edges.
|
|
1242
|
-
* Defaults to true, matching the library's existing large-diagram behavior.
|
|
1243
|
-
*/
|
|
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";
|
|
1289
|
-
}
|
|
1290
|
-
|
|
1291
|
-
declare const NetworkDiagram: React$1.FC<NetworkDiagramProps>;
|
|
187
|
+
declare const NetworkDiagram: React.FC<NetworkDiagramProps>;
|
|
1292
188
|
|
|
1293
189
|
interface DiagramErrorBoundaryProps {
|
|
1294
190
|
/** Content to render when an error is caught */
|
|
@@ -1334,16 +230,24 @@ interface RackNodeProps extends NodeProps<NetworkNode['data']> {
|
|
|
1334
230
|
onRackFaceChange?: (rackId: string, face: 'front' | 'rear') => void;
|
|
1335
231
|
isDragOver?: boolean;
|
|
1336
232
|
}
|
|
1337
|
-
/**
|
|
1338
|
-
|
|
233
|
+
/**
|
|
234
|
+
* Memoized; uses useStoreApi (not useReactFlow) so rack chrome does not re-render on every node move.
|
|
235
|
+
*
|
|
236
|
+
* The comparator intentionally omits the `onFaceChange` / `onRackFaceChange` function
|
|
237
|
+
* props: this is only safe because `NetworkDiagram` passes them as ref-backed stable
|
|
238
|
+
* callbacks. If a caller ever renders `RackNode` with unstable face-change handlers,
|
|
239
|
+
* add them here or the node will keep a stale callback.
|
|
240
|
+
*/
|
|
241
|
+
declare const RackNode: React.NamedExoticComponent<RackNodeProps>;
|
|
1339
242
|
|
|
1340
|
-
|
|
243
|
+
/** Memoized: React Flow re-renders nodes often; bail out unless our props changed. */
|
|
244
|
+
declare const FiberNode: React.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
|
|
1341
245
|
|
|
1342
|
-
declare const FiberEdge: React
|
|
1343
|
-
label?: string | React
|
|
1344
|
-
labelStyle?: React
|
|
246
|
+
declare const FiberEdge: React.NamedExoticComponent<Pick<reactflow.Edge<NetworkEdgeData | undefined>, "id" | "source" | "target" | "data" | "style" | "selected" | "animated"> & Pick<reactflow.WrapEdgeProps<any>, "sourcePosition" | "targetPosition" | "interactionWidth" | "sourceX" | "sourceY" | "targetX" | "targetY" | "sourceHandleId" | "targetHandleId"> & {
|
|
247
|
+
label?: string | React.ReactNode;
|
|
248
|
+
labelStyle?: React.CSSProperties;
|
|
1345
249
|
labelShowBg?: boolean;
|
|
1346
|
-
labelBgStyle?: React
|
|
250
|
+
labelBgStyle?: React.CSSProperties;
|
|
1347
251
|
labelBgPadding?: [number, number];
|
|
1348
252
|
labelBgBorderRadius?: number;
|
|
1349
253
|
} & {
|
|
@@ -1354,58 +258,39 @@ declare const FiberEdge: React$1.NamedExoticComponent<Pick<reactflow.Edge<Networ
|
|
|
1354
258
|
className?: string;
|
|
1355
259
|
}>;
|
|
1356
260
|
|
|
1357
|
-
declare const PowerEdge: React
|
|
261
|
+
declare const PowerEdge: React.NamedExoticComponent<EdgeProps>;
|
|
1358
262
|
|
|
1359
263
|
/** Memoized to avoid re-rendering rack devices when unrelated nodes move (React Flow perf guide). */
|
|
1360
|
-
declare const DeviceNode: React
|
|
264
|
+
declare const DeviceNode: React.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
|
|
1361
265
|
|
|
1362
|
-
declare const VerticalPDU: React
|
|
266
|
+
declare const VerticalPDU: React.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
|
|
1363
267
|
|
|
1364
|
-
|
|
268
|
+
/** Memoized: React Flow re-renders nodes often; bail out unless our props changed. */
|
|
269
|
+
declare const SpliceNode: React.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
|
|
1365
270
|
|
|
1366
|
-
|
|
271
|
+
/** Memoized: React Flow re-renders nodes often; bail out unless our props changed. */
|
|
272
|
+
declare const SpliceTrayNode: React.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
|
|
1367
273
|
|
|
1368
|
-
/**
|
|
1369
|
-
|
|
1370
|
-
* - Rectangular node representing a buffer tube (horizontal orientation, rotated 180 degrees)
|
|
1371
|
-
* - Renders 12 or 24 fiber handles on the top side with TIA-598 colors
|
|
1372
|
-
* - Tube border tinted by tube index color (1..12 cycling)
|
|
1373
|
-
* - startOn parameter controls handle positioning:
|
|
1374
|
-
* - 'left-center' (default): handles centered on top, tube handle on bottom
|
|
1375
|
-
* - 'left': handles on left side, tube handle on left
|
|
1376
|
-
* - 'right': handles on right side with reversed colors, tube handle on right
|
|
1377
|
-
*/
|
|
1378
|
-
declare const TubeNode: React$1.FC<NodeProps<NetworkNode['data']>>;
|
|
274
|
+
/** Memoized: React Flow re-renders nodes often; bail out unless our props changed. */
|
|
275
|
+
declare const TubeNode: React.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
|
|
1379
276
|
|
|
1380
|
-
/**
|
|
1381
|
-
|
|
1382
|
-
* - Represents a multi-fiber cable (1-24 fibers)
|
|
1383
|
-
* - Each colored handle corresponds to a single fiber
|
|
1384
|
-
* - Displays cable summary text (fiber count + cable identifier)
|
|
1385
|
-
*/
|
|
1386
|
-
declare const CableNode: React$1.FC<NodeProps<NetworkNode['data']>>;
|
|
277
|
+
/** Memoized: React Flow re-renders nodes often; bail out unless our props changed. */
|
|
278
|
+
declare const CableNode: React.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
|
|
1387
279
|
|
|
1388
|
-
/**
|
|
1389
|
-
|
|
1390
|
-
* - Represents a multi-tube cable (1-24 tubes)
|
|
1391
|
-
* - Each colored handle corresponds to a tube within the cable
|
|
1392
|
-
* - Displays cable summary text (fiber count + cable identifier)
|
|
1393
|
-
*/
|
|
1394
|
-
declare const MultiTubeCableNode: React$1.FC<NodeProps<NetworkNode['data']>>;
|
|
280
|
+
/** Memoized: React Flow re-renders nodes often; bail out unless our props changed. */
|
|
281
|
+
declare const MultiTubeCableNode: React.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
|
|
1395
282
|
|
|
1396
|
-
|
|
283
|
+
/** Memoized: React Flow re-renders nodes often; bail out unless our props changed. */
|
|
284
|
+
declare const CouplerNode: React.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
|
|
1397
285
|
|
|
1398
|
-
|
|
286
|
+
/** Memoized: React Flow re-renders nodes often; bail out unless our props changed. */
|
|
287
|
+
declare const PatchPanelNode: React.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
|
|
1399
288
|
|
|
1400
|
-
|
|
289
|
+
/** Memoized: React Flow re-renders nodes often; bail out unless our props changed. */
|
|
290
|
+
declare const ClosureNode: React.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
|
|
1401
291
|
|
|
1402
|
-
/**
|
|
1403
|
-
|
|
1404
|
-
* Uses a trapezoid shape pointing right (narrow input on left, wider outputs on right)
|
|
1405
|
-
*
|
|
1406
|
-
* @public
|
|
1407
|
-
*/
|
|
1408
|
-
declare const FibreSplitNode: React$1.FC<NodeProps<NetworkNode['data']>>;
|
|
292
|
+
/** Memoized: React Flow re-renders nodes often; bail out unless our props changed. */
|
|
293
|
+
declare const FibreSplitNode: React.NamedExoticComponent<NodeProps<NetworkNodeDataBase | RackNodeData | DeviceNodeData | FibreFlowCableNodeData | FibreFlowClosureNodeData>>;
|
|
1409
294
|
|
|
1410
295
|
type FibreFlowLayoutDirection = 'horizontal' | 'vertical';
|
|
1411
296
|
type FibreFlowColorMode = 'dark' | 'light';
|
|
@@ -1424,11 +309,11 @@ interface FibreFlowMapProps {
|
|
|
1424
309
|
colorMode?: FibreFlowColorMode;
|
|
1425
310
|
showCircuitId?: boolean;
|
|
1426
311
|
className?: string;
|
|
1427
|
-
style?: React
|
|
312
|
+
style?: React.CSSProperties;
|
|
1428
313
|
readOnly?: boolean;
|
|
1429
314
|
interaction?: NetworkDiagramInteractionOptions;
|
|
1430
315
|
}
|
|
1431
|
-
declare const FibreFlowMap: React
|
|
316
|
+
declare const FibreFlowMap: React.FC<FibreFlowMapProps>;
|
|
1432
317
|
|
|
1433
318
|
interface FibreFlowRow {
|
|
1434
319
|
key: string;
|
|
@@ -1462,7 +347,8 @@ interface FibreCableWithTubesExpandedProps {
|
|
|
1462
347
|
showFiberNumbers?: boolean;
|
|
1463
348
|
showCableLabel?: boolean;
|
|
1464
349
|
}
|
|
1465
|
-
|
|
350
|
+
/** Memoized: React Flow re-renders nodes often; bail out unless our props changed. */
|
|
351
|
+
declare const FibreCableWithTubesExpanded: React.NamedExoticComponent<FibreCableWithTubesExpandedProps>;
|
|
1466
352
|
|
|
1467
353
|
interface InventoryRackDTO {
|
|
1468
354
|
id: string | number;
|
|
@@ -2139,13 +1025,20 @@ declare function buildPortBlocksFromPorts(devicePorts: DevicePort[]): {
|
|
|
2139
1025
|
rearPorts: PortBlock[];
|
|
2140
1026
|
};
|
|
2141
1027
|
/**
|
|
2142
|
-
*
|
|
2143
|
-
*
|
|
1028
|
+
* Node-data subset accepted by {@link getResolvedPortBlocks}: a flat
|
|
1029
|
+
* `DevicePort[]` on `ports`, grouped `PortBlock[]` on
|
|
1030
|
+
* `ports`/`portGroups`/`rearPortGroups`, or a `rearPorts` block fallback.
|
|
2144
1031
|
* @public
|
|
2145
1032
|
*/
|
|
2146
1033
|
type ResolvedPortBlockInput = Pick<NetworkNode['data'], 'ports' | 'portGroups' | 'rearPortGroups'> & {
|
|
2147
1034
|
rearPorts?: PortBlock[];
|
|
2148
1035
|
};
|
|
1036
|
+
/**
|
|
1037
|
+
* Resolve the grouped front/rear port blocks from any supported input form:
|
|
1038
|
+
* flat `ports: DevicePort[]`, grouped `PortBlock[]`, or explicit
|
|
1039
|
+
* `portGroups` / `rearPortGroups`.
|
|
1040
|
+
* @public
|
|
1041
|
+
*/
|
|
2149
1042
|
declare function getResolvedPortBlocks(data: ResolvedPortBlockInput | undefined): {
|
|
2150
1043
|
ports: PortBlock[];
|
|
2151
1044
|
rearPorts: PortBlock[];
|
|
@@ -2176,146 +1069,6 @@ declare function hasRearPorts(data: Pick<NetworkNode['data'], 'ports' | 'portGro
|
|
|
2176
1069
|
*/
|
|
2177
1070
|
declare function getDefaultDeviceFace(data: Pick<NetworkNode['data'], 'ports' | 'portGroups' | 'rearPortGroups'> | undefined): DeviceFace;
|
|
2178
1071
|
|
|
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
|
-
|
|
2312
|
-
interface NetworkGraphSnapshot {
|
|
2313
|
-
nodes: NetworkNode[];
|
|
2314
|
-
edges: NetworkEdge[];
|
|
2315
|
-
}
|
|
2316
|
-
declare function networkGraphToDiagramDocument(snapshot: NetworkGraphSnapshot, previousDocument?: DiagramDocument): DiagramDocument;
|
|
2317
|
-
declare function diagramDocumentToNetworkGraph(document: DiagramDocument): NetworkGraphSnapshot;
|
|
2318
|
-
|
|
2319
1072
|
type EndpointConnectionKind = 'power' | 'network' | 'unknown';
|
|
2320
1073
|
interface EndpointMetadata {
|
|
2321
1074
|
normalizedHandle: string;
|
|
@@ -2434,7 +1187,7 @@ declare function isStriped(id: FiberColorId | number): boolean;
|
|
|
2434
1187
|
* @returns CSS properties for the color
|
|
2435
1188
|
* @public
|
|
2436
1189
|
*/
|
|
2437
|
-
declare function fiberSolidOrStriped(id: FiberColorId | number): React
|
|
1190
|
+
declare function fiberSolidOrStriped(id: FiberColorId | number): React.CSSProperties;
|
|
2438
1191
|
/**
|
|
2439
1192
|
* Get the hex color code for a fiber color ID
|
|
2440
1193
|
* @param id - Fiber color ID (1-24)
|
|
@@ -2528,9 +1281,11 @@ declare const DEFAULT_DIAGRAM_DIM_OPACITY = 0.25;
|
|
|
2528
1281
|
declare function hasDiagramFocus(options: DiagramFocusOptions): boolean;
|
|
2529
1282
|
declare function isNodeInDiagramFocus(nodeId: string, options: DiagramFocusOptions): boolean;
|
|
2530
1283
|
declare function isEdgeInDiagramFocus(edgeId: string, edge: Pick<NetworkEdge, 'source' | 'target'>, options: DiagramFocusOptions): boolean;
|
|
1284
|
+
/** A {@link NetworkNode} carrying the runtime `style` React Flow applies (e.g. dim opacity). @public */
|
|
2531
1285
|
type RuntimeNode = NetworkNode & {
|
|
2532
1286
|
style?: CSSProperties;
|
|
2533
1287
|
};
|
|
1288
|
+
/** A {@link NetworkEdge} carrying the runtime `style` React Flow applies (e.g. dim opacity). @public */
|
|
2534
1289
|
type RuntimeEdge = NetworkEdge & {
|
|
2535
1290
|
style?: CSSProperties;
|
|
2536
1291
|
};
|
|
@@ -2547,7 +1302,7 @@ type DiagramPortContextValue = {
|
|
|
2547
1302
|
onPortClick?: (payload: DiagramPortClickPayload) => void;
|
|
2548
1303
|
portClickEnabled: boolean;
|
|
2549
1304
|
};
|
|
2550
|
-
declare const DiagramPortProvider: React
|
|
1305
|
+
declare const DiagramPortProvider: React.Provider<DiagramPortContextValue>;
|
|
2551
1306
|
declare function useDiagramPortInteraction(): DiagramPortContextValue;
|
|
2552
1307
|
declare function isDiagramPortHandleHighlighted(highlightedPortHandles: readonly DiagramPortHandleRef[] | undefined, nodeId: string, handleId: string): boolean;
|
|
2553
1308
|
|
|
@@ -2860,4 +1615,4 @@ declare function useNetworkDiagram(store: NetworkDiagramStore): NetworkDiagramSt
|
|
|
2860
1615
|
declare function useNodes(store: NetworkDiagramStore): NetworkNode[];
|
|
2861
1616
|
declare function useEdges(store: NetworkDiagramStore): NetworkEdge[];
|
|
2862
1617
|
|
|
2863
|
-
export {
|
|
1618
|
+
export { COUPLERS_PER_PANEL, COUPLER_SLOT_HEIGHT_PX, COUPLER_WIDTH_PX, CableNode, ClosureNode, CouplerNode, DEFAULT_DIAGRAM_DIM_OPACITY, DeviceFace, DeviceNode, DeviceNodeData, DevicePlacementError, type DevicePlacementValidation, DevicePort, DeviceStatus, type DeviceTemplateV2, DiagramDocument, DiagramErrorBoundary, type DiagramErrorBoundaryProps, type DiagramErrorBoundaryState, type DiagramFocusOptions, DiagramPortClickPayload, type DiagramPortContextValue, DiagramPortHandleRef, DiagramPortProvider, type EndpointConnectionKind, type EndpointMetadata, FIBER_COLORS_12, type FiberColorId, FiberEdge, FiberNode, FibreCableWithTubesExpanded, type FibreCableWithTubesExpandedProps, FibreFlowCable, type FibreFlowCableLayout, FibreFlowCableNodeData, FibreFlowCircuit, FibreFlowClosure, FibreFlowClosureNodeData, type FibreFlowColorMode, type FibreFlowLayoutDirection, FibreFlowMap, type FibreFlowMapProps, type FibreFlowRow, 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, NetworkDiagramInteractionOptions, type NetworkDiagramOptions, NetworkDiagramProps, type NetworkDiagramState, type NetworkDiagramStore, NetworkEdge, NetworkEdgeData, NetworkNode, NetworkNodeDataBase, PANEL_BORDER_WIDTH, PANEL_HEADER_HEIGHT, PANEL_HEIGHT_PX, PANEL_PADDING, PANEL_TUBE_TRAY_SPACING, PANEL_WIDTH_PX, POWER_CONNECTORS, PatchPanelNode, PortBlock, PortCableType, PortPosition, PortType, type PortVisualDimensions, type PortVisualInput, type PortVisualKind, type PowerConnectorConfig, PowerEdge, type PowerPortStyle, RACK_HEADER_HEIGHT, RACK_WIDTH_PX, RackConfig, RackDevice, type RackMountedNodeType, RackNode, RackNodeData, type RackNodeProps, type RackSchemaOptions, type RawNetboxTemplate, type RawTemplatePort, type RawTemplatePortBlock, type ReplaceEdgeOptions, type ResolvedPortBlockInput, type RuntimeEdge, type RuntimeNode, SpliceConfig, SpliceNode, SplicePlacementError, type SplicePlacementValidation, type SpliceSchemaOptions, SpliceTrayConfig, SpliceTrayNode, TEMPLATE_SCHEMA_VERSION, type TemplateFaceData, type TemplateFrontRearPortLink, type TemplateParseResult, type TemplatePort, type TemplatePortBlock, type TemplateSource, type TemplateValidationIssue, type TemplateValidationReport, type TemplateWidth, TubeNode, U_HEIGHT_PX, type ValidateConnectionParams, type ValidationResult, VerticalPDU, addDeviceToRack, addSpliceToTray, applyDeviceDisplayToNodes, applyDiagramFocusToEdges, applyDiagramFocusToNodes, baseColorFor, buildNodesFromRackConfig, buildNodesFromSpliceConfig, buildPortBlocksFromPorts, calculateClosureDimensions, calculateCouplerRightX, calculateCouplerSlotSpacing, calculateCouplerSpacing, calculateDevicePositionFromU, calculatePanelDimensions, calculateSlotPositionFromY, calculateSplicePositionFromNumber, calculateUPositions, calculateYFromSlotPosition, countTemplateFacePorts, createNetworkDiagramStore, createRackConfigFromNodes, createSpliceConfigFromNodes, fiberSolidOrStriped, findNearestRack, findNextAvailableHolderPosition, findNextAvailableUPosition, 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, isStriped, isUPositionAvailable, netboxCableToNetworkEdge, netboxDeviceToNetworkNode, netboxRackToNetworkNode, netboxToDiagramDocument, netboxToNetworkDiagram, parseNetboxTemplate, removeDeviceFromRack, removeSpliceFromTray, replaceEdge, resolveEndpointCompatibilityKeys, resolvePortVisualKind, snapToCouplerPosition, snapToSplicePosition, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, updateSpliceHolderPosition, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useDiagramPortInteraction, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements, validateRenderFidelity, validateSplicePlacements };
|