@next-bricks/diagram 0.42.12 → 0.43.2

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.
Files changed (85) hide show
  1. package/dist/bricks.json +3 -3
  2. package/dist/chunks/3025.d4a92d85.js +3 -0
  3. package/dist/chunks/3025.d4a92d85.js.map +1 -0
  4. package/dist/chunks/{3171.633b30e8.js → 3171.2943688e.js} +2 -2
  5. package/dist/chunks/{3171.633b30e8.js.map → 3171.2943688e.js.map} +1 -1
  6. package/dist/chunks/3233.4eabc5cc.js +3 -0
  7. package/dist/chunks/3233.4eabc5cc.js.map +1 -0
  8. package/dist/chunks/3252.d94ce52c.js +2 -0
  9. package/dist/chunks/3252.d94ce52c.js.map +1 -0
  10. package/dist/chunks/{3933.fca8ae82.js → 3933.6624dcbe.js} +2 -2
  11. package/dist/chunks/{6314.f35cc928.js.map → 3933.6624dcbe.js.map} +1 -1
  12. package/dist/chunks/{4837.44f22425.js → 4837.578ffe7d.js} +2 -2
  13. package/dist/chunks/{7218.6822e904.js.map → 4837.578ffe7d.js.map} +1 -1
  14. package/dist/chunks/{5552.ad11237e.js → 5552.e3e4dddb.js} +2 -2
  15. package/dist/chunks/{5552.ad11237e.js.map → 5552.e3e4dddb.js.map} +1 -1
  16. package/dist/chunks/{6314.f35cc928.js → 6314.2c1f22e1.js} +2 -2
  17. package/dist/chunks/{3933.fca8ae82.js.map → 6314.2c1f22e1.js.map} +1 -1
  18. package/dist/chunks/{7218.6822e904.js → 7218.0b7934fd.js} +2 -2
  19. package/dist/chunks/{4837.44f22425.js.map → 7218.0b7934fd.js.map} +1 -1
  20. package/dist/chunks/{799.5e6749ba.js → 799.dd5f32fb.js} +3 -3
  21. package/dist/chunks/799.dd5f32fb.js.map +1 -0
  22. package/dist/chunks/9711.2d99e6d9.js +2 -0
  23. package/dist/chunks/9711.2d99e6d9.js.map +1 -0
  24. package/dist/chunks/eo-diagram.1934f2b2.js +2 -0
  25. package/dist/chunks/eo-diagram.1934f2b2.js.map +1 -0
  26. package/dist/chunks/eo-display-canvas.2b754ef1.js +2 -0
  27. package/dist/chunks/eo-display-canvas.2b754ef1.js.map +1 -0
  28. package/dist/chunks/eo-draw-canvas.79b100f8.js +2 -0
  29. package/dist/chunks/eo-draw-canvas.79b100f8.js.map +1 -0
  30. package/dist/chunks/experimental-node.7441f68a.js +2 -0
  31. package/dist/chunks/{experimental-node.ff43315f.js.map → experimental-node.7441f68a.js.map} +1 -1
  32. package/dist/chunks/main.1a8affb8.js +2 -0
  33. package/dist/chunks/{main.5cfa7eee.js.map → main.1a8affb8.js.map} +1 -1
  34. package/dist/examples.json +3 -3
  35. package/dist/index.05f1b5e3.js +2 -0
  36. package/dist/index.05f1b5e3.js.map +1 -0
  37. package/dist/manifest.json +157 -150
  38. package/dist/types.json +3693 -3147
  39. package/dist-types/diagram/lines/getPolyLinePoints.d.ts +2 -2
  40. package/dist-types/draw-canvas/CellComponent.d.ts +3 -2
  41. package/dist-types/draw-canvas/HoverStateContext.d.ts +27 -0
  42. package/dist-types/draw-canvas/LineConnectorComponent.d.ts +9 -0
  43. package/dist-types/draw-canvas/SmartConnectLineComponent.d.ts +8 -0
  44. package/dist-types/draw-canvas/constants.d.ts +2 -0
  45. package/dist-types/draw-canvas/decorators/DecoratorArea.d.ts +1 -1
  46. package/dist-types/draw-canvas/decorators/index.d.ts +1 -1
  47. package/dist-types/draw-canvas/index.d.ts +4 -2
  48. package/dist-types/draw-canvas/interfaces.d.ts +56 -16
  49. package/dist-types/draw-canvas/processors/handleMouseDown.d.ts +3 -2
  50. package/dist-types/draw-canvas/processors/normalizeSnapOptions.d.ts +6 -0
  51. package/dist-types/draw-canvas/processors/normalizeSnapOptions.spec.d.ts +1 -0
  52. package/dist-types/draw-canvas/reducers/interfaces.d.ts +3 -1
  53. package/dist-types/shared/canvas/processors/getConnectLinePoints.d.ts +4 -0
  54. package/dist-types/shared/canvas/processors/getConnectLinePoints.spec.d.ts +1 -0
  55. package/dist-types/shared/canvas/processors/getSmartLinePoints.d.ts +3 -0
  56. package/dist-types/shared/canvas/processors/nodeViewToNodeRect.d.ts +3 -0
  57. package/dist-types/shared/canvas/shapes/Rectangle.d.ts +2 -0
  58. package/dist-types/shared/canvas/useLineMarkers.d.ts +7 -5
  59. package/docs/eo-draw-canvas.md +15 -5
  60. package/package.json +3 -3
  61. package/dist/chunks/1371.226b7bfe.js +0 -2
  62. package/dist/chunks/1371.226b7bfe.js.map +0 -1
  63. package/dist/chunks/2416.f25f772b.js +0 -2
  64. package/dist/chunks/2416.f25f772b.js.map +0 -1
  65. package/dist/chunks/3489.c2223b1c.js +0 -3
  66. package/dist/chunks/3489.c2223b1c.js.map +0 -1
  67. package/dist/chunks/3790.093a51f1.js +0 -3
  68. package/dist/chunks/3790.093a51f1.js.map +0 -1
  69. package/dist/chunks/4017.c7b74992.js +0 -3
  70. package/dist/chunks/4017.c7b74992.js.LICENSE.txt +0 -5
  71. package/dist/chunks/4017.c7b74992.js.map +0 -1
  72. package/dist/chunks/799.5e6749ba.js.map +0 -1
  73. package/dist/chunks/eo-diagram.e353ce7a.js +0 -2
  74. package/dist/chunks/eo-diagram.e353ce7a.js.map +0 -1
  75. package/dist/chunks/eo-display-canvas.ccd2cce0.js +0 -2
  76. package/dist/chunks/eo-display-canvas.ccd2cce0.js.map +0 -1
  77. package/dist/chunks/eo-draw-canvas.5d50938b.js +0 -2
  78. package/dist/chunks/eo-draw-canvas.5d50938b.js.map +0 -1
  79. package/dist/chunks/experimental-node.ff43315f.js +0 -2
  80. package/dist/chunks/main.5cfa7eee.js +0 -2
  81. package/dist/index.820bfcb6.js +0 -2
  82. package/dist/index.820bfcb6.js.map +0 -1
  83. /package/dist/chunks/{3489.c2223b1c.js.LICENSE.txt → 3025.d4a92d85.js.LICENSE.txt} +0 -0
  84. /package/dist/chunks/{3790.093a51f1.js.LICENSE.txt → 3233.4eabc5cc.js.LICENSE.txt} +0 -0
  85. /package/dist/chunks/{799.5e6749ba.js.LICENSE.txt → 799.dd5f32fb.js.LICENSE.txt} +0 -0
@@ -1,2 +1,2 @@
1
- import type { Direction, NodePosition, RenderedNode } from "../interfaces";
2
- export declare function getPolyLinePoints(source: RenderedNode, target: RenderedNode, sourceDirection: Direction, targetDirection: Direction, sourcePosition: number, targetPosition: number): NodePosition[] | null;
1
+ import type { Direction, NodePosition, NodeRect } from "../interfaces";
2
+ export declare function getPolyLinePoints(source: NodeRect, target: NodeRect, sourceDirection: Direction, targetDirection: Direction, sourcePosition: number, targetPosition: number): NodePosition[];
@@ -1,8 +1,9 @@
1
- import type { ActiveTarget, Cell, CellContextMenuDetail, ComputedEdgeLineConf, DecoratorTextChangeDetail, EdgeCell, LayoutType, NodeBrickConf } from "./interfaces";
1
+ import type { ActiveTarget, Cell, CellContextMenuDetail, ComputedEdgeLineConf, DecoratorTextChangeDetail, EdgeCell, LayoutOptions, LayoutType, NodeBrickConf } from "./interfaces";
2
2
  import type { MoveCellPayload, ResizeCellPayload } from "./reducers/interfaces";
3
3
  import type { SizeTuple, TransformLiteral } from "../diagram/interfaces";
4
4
  export interface CellComponentProps {
5
5
  layout: LayoutType;
6
+ layoutOptions?: LayoutOptions;
6
7
  cell: Cell;
7
8
  cells: Cell[];
8
9
  degraded: boolean;
@@ -30,4 +31,4 @@ export interface CellComponentProps {
30
31
  onCellMouseEnter?(cell: Cell): void;
31
32
  onCellMouseLeave?(cell: Cell): void;
32
33
  }
33
- export declare function CellComponent({ layout, cell, cells, degraded, degradedNodeLabel, defaultNodeBricks, lineConfMap, activeTarget, dragNodeToContainerActive, readOnly, transform, unrelatedCells, onCellsMoving, onCellsMoved, onCellResizing, onCellResized, onSwitchActiveTarget, onCellContextMenu, onCellClick, onDecoratorTextEditing, onDecoratorTextChange, onNodeBrickResize, onCellMouseEnter, onCellMouseLeave, }: CellComponentProps): JSX.Element | null;
34
+ export declare function CellComponent({ layout, layoutOptions, cell, cells, degraded, degradedNodeLabel, defaultNodeBricks, lineConfMap, activeTarget, dragNodeToContainerActive, readOnly, transform, unrelatedCells, onCellsMoving, onCellsMoved, onCellResizing, onCellResized, onSwitchActiveTarget, onCellContextMenu, onCellClick, onDecoratorTextEditing, onDecoratorTextChange, onNodeBrickResize, onCellMouseEnter, onCellMouseLeave, }: CellComponentProps): JSX.Element | null;
@@ -0,0 +1,27 @@
1
+ import React from "react";
2
+ import type { NodeCell, NodeConnectPoint, SmartConnectLineState } from "./interfaces";
3
+ import type { NodePosition } from "../diagram/interfaces";
4
+ export interface HoverState {
5
+ cell: NodeCell;
6
+ relativePoints: ReadonlyArray<NodeConnectPoint>;
7
+ points: ReadonlyArray<NodePosition>;
8
+ activePointIndex?: number;
9
+ }
10
+ export declare const HoverStateContext: React.Context<{
11
+ rootRef: React.RefObject<SVGSVGElement>;
12
+ smartConnectLineState: SmartConnectLineState | null;
13
+ unsetHoverStateTimeoutRef: React.MutableRefObject<number | null>;
14
+ hoverState: HoverState | null;
15
+ setHoverState: React.Dispatch<React.SetStateAction<HoverState | null>>;
16
+ setSmartConnectLineState: React.Dispatch<React.SetStateAction<SmartConnectLineState | null>>;
17
+ onConnect?: (source: NodeCell, target: NodeCell, exitPosition: NodePosition, entryPosition: NodePosition) => void;
18
+ }>;
19
+ export declare function useHoverStateContext(): {
20
+ rootRef: React.RefObject<SVGSVGElement>;
21
+ smartConnectLineState: SmartConnectLineState | null;
22
+ unsetHoverStateTimeoutRef: React.MutableRefObject<number | null>;
23
+ hoverState: HoverState | null;
24
+ setHoverState: React.Dispatch<React.SetStateAction<HoverState | null>>;
25
+ setSmartConnectLineState: React.Dispatch<React.SetStateAction<SmartConnectLineState | null>>;
26
+ onConnect?: (source: NodeCell, target: NodeCell, exitPosition: NodePosition, entryPosition: NodePosition) => void;
27
+ };
@@ -0,0 +1,9 @@
1
+ import type { ActiveTarget, ConnectLineState } from "./interfaces";
2
+ import type { TransformLiteral } from "../diagram/interfaces";
3
+ export interface LineConnectorComponentProps {
4
+ activeTarget: ActiveTarget | null;
5
+ transform: TransformLiteral;
6
+ smartConnectLineState: ConnectLineState | null;
7
+ disabled?: boolean;
8
+ }
9
+ export declare function LineConnectorComponent({ activeTarget, transform, smartConnectLineState, disabled, }: LineConnectorComponentProps): JSX.Element | null;
@@ -0,0 +1,8 @@
1
+ import type { ComputedLineConnecterConf, SmartConnectLineState } from "./interfaces";
2
+ import type { TransformLiteral } from "../diagram/interfaces";
3
+ export interface SmartConnectLineComponentProps {
4
+ smartConnectLineState: SmartConnectLineState | null;
5
+ transform: TransformLiteral;
6
+ options: ComputedLineConnecterConf;
7
+ }
8
+ export declare function SmartConnectLineComponent({ smartConnectLineState, transform, options, }: SmartConnectLineComponentProps): JSX.Element;
@@ -13,3 +13,5 @@ export declare const DEFAULT_LINE_INTERACT_SHOW_START_ARROW = false;
13
13
  export declare const DEFAULT_LINE_INTERACT_SHOW_END_ARROW = true;
14
14
  export declare const DEFAULT_LINE_INTERACT_ANIMATE_DURATION = 1;
15
15
  export declare const DEFAULT_DEGRADED_THRESHOLD = 500;
16
+ export declare const DEFAULT_SNAP_GRID_SIZE = 10;
17
+ export declare const DEFAULT_SNAP_OBJECT_DISTANCE = 5;
@@ -1,2 +1,2 @@
1
1
  import type { BasicDecoratorProps } from "../interfaces";
2
- export declare function DecoratorArea({ cell, transform, readOnly, activeTarget, cells, onCellResizing, onCellResized, onSwitchActiveTarget, }: BasicDecoratorProps): JSX.Element;
2
+ export declare function DecoratorArea({ cell, transform, readOnly, layoutOptions, activeTarget, cells, onCellResizing, onCellResized, onSwitchActiveTarget, }: BasicDecoratorProps): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import type { BasicDecoratorProps } from "../interfaces";
2
- export declare function DecoratorComponent({ cell, view, transform, readOnly, layout, activeTarget, cells, onCellResizing, onCellResized, onSwitchActiveTarget, onDecoratorTextEditing, onDecoratorTextChange, }: BasicDecoratorProps): JSX.Element | null;
2
+ export declare function DecoratorComponent({ cell, view, transform, readOnly, layout, layoutOptions, activeTarget, cells, onCellResizing, onCellResized, onSwitchActiveTarget, onDecoratorTextEditing, onDecoratorTextChange, }: BasicDecoratorProps): JSX.Element | null;
@@ -3,7 +3,7 @@ import { ReactNextElement } from "@next-core/react-element";
3
3
  import type { UseSingleBrickConf } from "@next-core/react-runtime";
4
4
  import "@next-core/theme";
5
5
  import type { PositionTuple, RangeTuple, SizeTuple, TransformLiteral } from "../diagram/interfaces";
6
- import type { ActiveTarget, Cell, EdgeCell, InitialCell, NodeBrickConf, NodeCell, NodeId, DecoratorCell, DecoratorType, CellContextMenuDetail, ConnectNodesDetail, EdgeLineConf, DecoratorTextChangeDetail, LayoutType, LayoutOptions, Direction } from "./interfaces";
6
+ import type { ActiveTarget, Cell, EdgeCell, InitialCell, NodeBrickConf, NodeCell, NodeId, DecoratorCell, DecoratorType, CellContextMenuDetail, ConnectNodesDetail, EdgeLineConf, DecoratorTextChangeDetail, LayoutType, LayoutOptions, LineConnecterConf, Direction } from "./interfaces";
7
7
  import type { MoveCellPayload, ResizeCellPayload } from "./reducers/interfaces";
8
8
  export interface EoDrawCanvasProps {
9
9
  cells: InitialCell[] | undefined;
@@ -22,6 +22,7 @@ export interface EoDrawCanvasProps {
22
22
  dragBehavior?: DragBehavior;
23
23
  ctrlDragBehavior?: CtrlDragBehavior;
24
24
  scaleRange?: RangeTuple;
25
+ lineConnector?: LineConnecterConf | boolean;
25
26
  allowEdgeToArea?: boolean;
26
27
  }
27
28
  export type DragBehavior = "none" | "lasso" | "grab";
@@ -103,7 +104,6 @@ export declare class EoDrawCanvas extends ReactNextElement implements EoDrawCanv
103
104
  accessor zoomable: boolean | undefined;
104
105
  accessor scrollable: boolean | undefined;
105
106
  accessor pannable: boolean | undefined;
106
- accessor selectable: boolean | undefined;
107
107
  accessor allowEdgeToArea: boolean | undefined;
108
108
  /**
109
109
  * 按住鼠标拖动时的行为:
@@ -123,6 +123,7 @@ export declare class EoDrawCanvas extends ReactNextElement implements EoDrawCanv
123
123
  */
124
124
  accessor ctrlDragBehavior: CtrlDragBehavior | undefined;
125
125
  accessor scaleRange: RangeTuple | undefined;
126
+ accessor lineConnector: LineConnecterConf | boolean | undefined;
126
127
  dropNode({ id, position, size, data, useBrick, }: DropNodeInfo): Promise<NodeCell | null>;
127
128
  dropDecorator({ position, decorator, text, direction, }: DropDecoratorInfo): Promise<DecoratorCell | null>;
128
129
  addNodes(nodes: AddNodeInfo[]): Promise<NodeCell[]>;
@@ -144,6 +145,7 @@ export interface EoDrawCanvasComponentProps extends EoDrawCanvasProps {
144
145
  onCellsMove(info: MoveCellPayload[]): void;
145
146
  onCellsDelete(cells: Cell[]): void;
146
147
  onCellContextMenu(detail: CellContextMenuDetail): void;
148
+ onEdgeAdd(detail: EdgeCell): void;
147
149
  onDecoratorTextChange(detail: DecoratorTextChangeDetail): void;
148
150
  onContainerContainerChange(detail: MoveCellPayload[]): void;
149
151
  onScaleChange(scale: number): void;
@@ -1,8 +1,8 @@
1
1
  import type { UseSingleBrickConf } from "@next-core/react-runtime";
2
2
  import type { SimulationLinkDatum, SimulationNodeDatum } from "d3-force";
3
3
  import type { ResizeCellPayload } from "./reducers/interfaces";
4
- import type { PartialRectTuple, PositionTuple, TransformLiteral } from "../diagram/interfaces";
5
- import { SYMBOL_FOR_SIZE_INITIALIZED, type SYMBOL_FOR_LAYOUT_INITIALIZED } from "./constants";
4
+ import type { CurveType, LineType, NodePosition, PartialRectTuple, PositionTuple, TransformLiteral } from "../diagram/interfaces";
5
+ import type { SYMBOL_FOR_SIZE_INITIALIZED, SYMBOL_FOR_LAYOUT_INITIALIZED } from "./constants";
6
6
  export type Cell = NodeCell | EdgeCell | DecoratorCell;
7
7
  export type BrickCell = NodeBrickCell;
8
8
  export type NodeCell = NodeBrickCell;
@@ -25,6 +25,7 @@ export interface BaseEdgeCell extends BaseCell {
25
25
  type: "edge";
26
26
  source: NodeId;
27
27
  target: NodeId;
28
+ view?: EdgeView;
28
29
  }
29
30
  export type DecoratorType = "text" | "area" | "container";
30
31
  export type Direction = "top" | "right" | "bottom" | "left";
@@ -60,28 +61,37 @@ export interface NodeBrickConf {
60
61
  useBrick: UseSingleBrickConf;
61
62
  if?: string | boolean | null;
62
63
  }
63
- export interface EdgeLineConf extends Omit<Partial<ComputedEdgeLineConf>, "markerArrow"> {
64
+ export interface EdgeView extends BaseEdgeLineConf {
65
+ exitPosition?: NodePosition;
66
+ entryPosition?: NodePosition;
67
+ }
68
+ export interface EdgeLineConf extends BaseEdgeLineConf {
64
69
  if?: string | boolean | null;
65
70
  }
66
71
  export interface LineAnimate {
67
72
  useAnimate: boolean;
68
73
  duration: number;
69
74
  }
70
- export interface ComputedEdgeLineConf {
71
- dashed: boolean;
72
- strokeWidth: number;
73
- strokeColor: string;
74
- interactStrokeWidth: number;
75
- parallelGap: number;
76
- markerEnd: string;
77
- markerArrow: string;
78
- showStartArrow: boolean;
79
- showEndArrow: boolean;
80
- animate: LineAnimate;
75
+ export interface ComputedEdgeLineConf extends Required<BaseEdgeLineConf> {
76
+ $markerUrl: string;
77
+ }
78
+ export interface BaseEdgeLineConf {
79
+ type?: LineType;
80
+ curveType?: CurveType;
81
+ dashed?: boolean;
82
+ strokeWidth?: number;
83
+ strokeColor?: string;
84
+ interactStrokeWidth?: number;
85
+ parallelGap?: number;
86
+ showStartArrow?: boolean;
87
+ showEndArrow?: boolean;
88
+ animate?: LineAnimate;
81
89
  }
82
90
  export interface LineMarker {
83
91
  strokeColor: string;
84
92
  }
93
+ export type LineConnecterConf = Pick<BaseEdgeLineConf, "type" | "strokeWidth" | "strokeColor" | "showStartArrow" | "showEndArrow">;
94
+ export type ComputedLineConnecterConf = ComputedEdgeLineConf;
85
95
  export type ActiveTarget = ActiveTargetOfSingular | ActiveTargetOfMulti;
86
96
  export type ActiveTargetOfSingular = ActiveTargetOfNode | ActiveTargetOfEdge | ActiveTargetOfDecorator;
87
97
  export interface ActiveTargetOfNode {
@@ -107,6 +117,7 @@ export interface BasicDecoratorProps {
107
117
  readOnly?: boolean;
108
118
  layout?: LayoutType;
109
119
  view: DecoratorView;
120
+ layoutOptions?: LayoutOptions;
110
121
  activeTarget: ActiveTarget | null | undefined;
111
122
  cells: Cell[];
112
123
  onCellResizing?(info: ResizeCellPayload): void;
@@ -128,6 +139,12 @@ export interface ConnectLineState {
128
139
  from: PositionTuple;
129
140
  offset: PositionTuple;
130
141
  }
142
+ export interface SmartConnectLineState {
143
+ source: NodeCell;
144
+ from: PositionTuple;
145
+ offset: PositionTuple;
146
+ exitPosition: NodeConnectPoint;
147
+ }
131
148
  export interface Deferred<T> {
132
149
  resolve: (value: T) => void;
133
150
  reject: (reason: unknown) => void;
@@ -141,7 +158,27 @@ export interface DecoratorTextChangeDetail {
141
158
  view: DecoratorView;
142
159
  }
143
160
  export type LayoutType = "manual" | "force" | "dagre" | undefined;
144
- export type LayoutOptions = LayoutOptionsDagre | LayoutOptionsForce;
161
+ export type LayoutOptions = LayoutOptionsManual | LayoutOptionsDagre | LayoutOptionsForce;
162
+ export interface LayoutOptionsManual extends LayoutSnapOptions {
163
+ }
164
+ export interface LayoutSnapOptions {
165
+ /** Snap options. Setting to true means enable all snap options */
166
+ snap?: boolean | SnapOptions;
167
+ }
168
+ export interface SnapOptions {
169
+ /** Snap to grid */
170
+ grid?: boolean | SnapToGridOptions;
171
+ /** Snap to object */
172
+ object?: boolean | SnapToObjectOptions;
173
+ }
174
+ export interface SnapToGridOptions {
175
+ /** @default 10 */
176
+ size?: number;
177
+ }
178
+ export interface SnapToObjectOptions {
179
+ /** @default 5 */
180
+ distance?: number;
181
+ }
145
182
  export interface LayoutOptionsDagre extends BaseLayoutOptions {
146
183
  rankdir?: "TB" | "BT" | "LR" | "RL";
147
184
  ranksep?: number;
@@ -157,7 +194,7 @@ export interface ForceCollideOptions {
157
194
  strength?: number;
158
195
  iterations?: number;
159
196
  }
160
- export interface BaseLayoutOptions {
197
+ export interface BaseLayoutOptions extends LayoutSnapOptions {
161
198
  nodePadding?: PartialRectTuple;
162
199
  /**
163
200
  * 根据节点什么位置进行对齐,支持关键字、百分比和比例值。
@@ -187,3 +224,6 @@ export interface ForceNode extends SimulationNodeDatum {
187
224
  height: number;
188
225
  }
189
226
  export type ForceLink = SimulationLinkDatum<ForceNode>;
227
+ export interface NodeConnectPoint extends NodePosition {
228
+ d: Direction[];
229
+ }
@@ -1,10 +1,11 @@
1
- import type { ActiveTarget, Cell, LayoutType } from "../interfaces";
1
+ import type { ActiveTarget, Cell, LayoutOptions, LayoutType } from "../interfaces";
2
2
  import type { MoveCellPayload, ResizeCellPayload } from "../reducers/interfaces";
3
- export declare function handleMouseDown(event: MouseEvent, { action, cell, scale, layout, activeTarget, cells, onCellsMoving, onCellsMoved, onCellResizing, onCellResized, onSwitchActiveTarget, }: {
3
+ export declare function handleMouseDown(event: MouseEvent, { action, cell, scale, layout, layoutOptions, activeTarget, cells, onCellsMoving, onCellsMoved, onCellResizing, onCellResized, onSwitchActiveTarget, }: {
4
4
  action: "move" | "resize";
5
5
  cell: Cell;
6
6
  scale: number;
7
7
  layout?: LayoutType;
8
+ layoutOptions?: LayoutOptions;
8
9
  activeTarget: ActiveTarget | null | undefined;
9
10
  cells: Cell[];
10
11
  onCellsMoving?(info: MoveCellPayload[]): void;
@@ -0,0 +1,6 @@
1
+ import type { SnapOptions, SnapToGridOptions, SnapToObjectOptions } from "../interfaces";
2
+ export interface NormalizedSnapOptions {
3
+ grid: Required<SnapToGridOptions> | null;
4
+ object: Required<SnapToObjectOptions> | null;
5
+ }
6
+ export declare function normalizeSnapOptions(snap: boolean | SnapOptions | undefined): NormalizedSnapOptions;
@@ -1,4 +1,4 @@
1
- import type { SizeTuple } from "../../diagram/interfaces";
1
+ import type { PositionTuple, SizeTuple } from "../../diagram/interfaces";
2
2
  import type { Cell, DecoratorCell, DecoratorType, EdgeCell, NodeCell, NodeId } from "../interfaces";
3
3
  export interface DrawCanvasState {
4
4
  cells: Cell[];
@@ -41,6 +41,7 @@ export interface UpdateNodeSizeAction {
41
41
  };
42
42
  layoutKey: number;
43
43
  }
44
+ export type LineTuple = [start: PositionTuple, end: PositionTuple];
44
45
  export interface MoveCellPayload {
45
46
  type: "node" | "decorator";
46
47
  id: NodeId;
@@ -50,6 +51,7 @@ export interface MoveCellPayload {
50
51
  height?: number;
51
52
  decorator?: DecoratorType;
52
53
  containerCell?: DecoratorCell;
54
+ guideLines?: LineTuple[];
53
55
  }
54
56
  export interface ResizeCellPayload {
55
57
  type: "node" | "decorator";
@@ -0,0 +1,4 @@
1
+ import type { NodePosition, PositionTuple } from "../../../diagram/interfaces";
2
+ import type { HoverState } from "../../../draw-canvas/HoverStateContext";
3
+ import type { SmartConnectLineState } from "../../../draw-canvas/interfaces";
4
+ export declare function getConnectLinePoints(smartConnectLineState: SmartConnectLineState | null, connectLineTo: PositionTuple | null, hoverState: HoverState | null): NodePosition[] | null;
@@ -0,0 +1,3 @@
1
+ import type { NodePosition } from "../../../diagram/interfaces";
2
+ import type { EdgeView, NodeView } from "../../../draw-canvas/interfaces";
3
+ export declare function getSmartLinePoints(sourceView: NodeView, targetView: NodeView, { exitPosition, entryPosition, }: Required<Pick<EdgeView, "exitPosition" | "entryPosition">>): NodePosition[];
@@ -0,0 +1,3 @@
1
+ import type { NodeRect } from "../../../diagram/interfaces";
2
+ import type { NodeView } from "../../../draw-canvas/interfaces";
3
+ export declare function nodeViewToNodeRect(view: NodeView, padding: number): NodeRect;
@@ -0,0 +1,2 @@
1
+ import type { NodeConnectPoint } from "../../../draw-canvas/interfaces";
2
+ export declare function getConnectPointsOfRectangle(): ReadonlyArray<NodeConnectPoint>;
@@ -1,10 +1,12 @@
1
- import type { Cell, ComputedEdgeLineConf, EdgeCell, EdgeLineConf, LineMarker } from "../../draw-canvas/interfaces";
1
+ import type { Cell, ComputedEdgeLineConf, ComputedLineConnecterConf, EdgeCell, EdgeLineConf, LineConnecterConf, LineMarker } from "../../draw-canvas/interfaces";
2
2
  export interface UseLineMarkersOptions {
3
3
  cells: Cell[];
4
4
  defaultEdgeLines: EdgeLineConf[] | undefined;
5
5
  markerPrefix: string;
6
+ lineConnector?: LineConnecterConf | boolean;
6
7
  }
7
- export declare function useLineMarkers({ cells, defaultEdgeLines, markerPrefix, }: UseLineMarkersOptions): [
8
- lineConfMap: WeakMap<EdgeCell, ComputedEdgeLineConf>,
9
- markers: LineMarker[]
10
- ];
8
+ export declare function useLineMarkers({ cells, defaultEdgeLines, markerPrefix, lineConnector, }: UseLineMarkersOptions): {
9
+ lineConfMap: WeakMap<EdgeCell, ComputedEdgeLineConf>;
10
+ lineConnectorConf: ComputedLineConnecterConf | null;
11
+ markers: LineMarker[];
12
+ };
@@ -310,6 +310,10 @@
310
310
  fadeUnrelatedCells: true
311
311
  allowEdgeToArea: true
312
312
  dragBehavior: lasso
313
+ layoutOptions:
314
+ snap:
315
+ # grid: true
316
+ object: true
313
317
  # Initial nodes only
314
318
  defaultNodeSize: [60, 60]
315
319
  defaultNodeBricks:
@@ -334,6 +338,7 @@
334
338
  - if: <% DATA.edge.data?.virtual %>
335
339
  dashed: true
336
340
  cells: <% CTX.initialCells %>
341
+ lineConnector: true
337
342
  events:
338
343
  activeTarget.change:
339
344
  action: context.replace
@@ -364,6 +369,11 @@
364
369
  args:
365
370
  - targetCell
366
371
  - <% EVENT.detail.cell %>
372
+ edge.add:
373
+ action: message.info
374
+ args:
375
+ - |
376
+ <% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>
367
377
  decorator.text.change:
368
378
  action: message.info
369
379
  args:
@@ -419,11 +429,11 @@
419
429
  - <% CTX.targetCell.id %>
420
430
  callback:
421
431
  success:
422
- target: eo-draw-canvas
423
- method: addEdge
424
- args:
425
- - source: <% EVENT.detail.source.id %>
426
- target: <% EVENT.detail.target.id %>
432
+ - target: eo-draw-canvas
433
+ method: addEdge
434
+ args:
435
+ - source: <% EVENT.detail.source.id %>
436
+ target: <% EVENT.detail.target.id %>
427
437
  ```
428
438
 
429
439
  ### Force layout
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@next-bricks/diagram",
3
- "version": "0.42.12",
3
+ "version": "0.43.2",
4
4
  "homepage": "https://github.com/easyops-cn/next-bricks/tree/master/bricks/diagram",
5
5
  "repository": {
6
6
  "type": "git",
@@ -35,11 +35,11 @@
35
35
  "postpublish": "mv package.json.bak package.json"
36
36
  },
37
37
  "devDependencies": {
38
- "@next-core/build-next-bricks": "^1.23.1",
38
+ "@next-core/build-next-bricks": "^1.23.2",
39
39
  "@next-core/test-next": "^1.1.6"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "@next-bricks/basic": "*"
43
43
  },
44
- "gitHead": "0642c59fb82dea2ec52c5d8e42e1e0a116aab961"
44
+ "gitHead": "f2f344a2f8d90b99070147e29422fbd08deafe8d"
45
45
  }
@@ -1,2 +0,0 @@
1
- "use strict";(globalThis.webpackChunk_next_bricks_diagram=globalThis.webpackChunk_next_bricks_diagram||[]).push([[1371],{3739:(e,t,n)=>{n.d(t,{c:()=>i});var o=n(8769),r=n.n(o);function i(e){let t,{id:n,type:o,strokeColor:i}=e;switch(o){case"0..1":t=l;break;case"0..N":t=c;break;default:t=a}return r().createElement(t,{id:n,strokeColor:i})}function a(e){let{id:t,strokeColor:n}=e;return r().createElement("marker",{id:t,viewBox:"0 0 6 6",refX:5,refY:3,markerWidth:6,markerHeight:6,orient:"auto-start-reverse",strokeLinejoin:"round"},r().createElement("path",{d:"M 0.5 0.5 L 5.5 3 L 0.5 5.5 z",stroke:n,strokeWidth:1,fill:n}))}function l(e){let{id:t,strokeColor:n}=e;return r().createElement("marker",{id:t,viewBox:"0 0 21 11",refX:.5,refY:5.5,markerWidth:21,markerHeight:11,orient:"auto-start-reverse"},r().createElement("path",{d:"M 5.5 5.5 m 5 0 a 5 5 0 1 0 -10 0 a 5 5 0 1 0 10 0 M 15.5 0.5 V 10.5 M 10.5 5.5 H 20.5",stroke:n,strokeWidth:1,fill:"none"}))}function c(e){let{id:t,strokeColor:n}=e;return r().createElement("marker",{id:t,viewBox:"0 0 21 11",refX:.5,refY:5.5,markerWidth:21,markerHeight:11,orient:"auto-start-reverse"},r().createElement("path",{d:"M 5.5 5.5 m 5 0 a 5 5 0 1 0 -10 0 a 5 5 0 1 0 10 0 M 20.5 0.5 L 10.5 5.5 L 20.5 10.5 M 10.5 5.5 H 20.5",stroke:n,strokeWidth:1,fill:"none"}))}},3188:(e,t,n)=>{n.d(t,{h:()=>r});var o=n(733);function r(e,t,n){if(e===t||(0,o.w)(e,t,0,0))return null;let r,a,l=0,c=0;if(n){const o=t.x-e.x,r=t.y-e.y,i=Math.atan2(r,o);l=n/2*Math.cos(i+Math.PI/2),c=n/2*Math.sin(i+Math.PI/2)}const s=[[e.x+l,e.y+c],[t.x+l,t.y+c]],d=i(e,s),u=i(t,s);return r=d.length>0?d[0]:[e.x,e.y],a=u.length>0?u[0]:[t.x,t.y],[{x:r[0],y:r[1]},{x:a[0],y:a[1]}]}function i(e,t){const n=[[e.x-e.width/2,e.y-e.height/2],[e.x+e.width/2,e.y-e.height/2],[e.x+e.width/2,e.y+e.height/2],[e.x-e.width/2,e.y+e.height/2]],o=[];for(let e=0;e<4;e++)o.push([n[e],n[(e+1)%4]]);const r=[];for(const e of o){const n=a(t[0],t[1],e[0],e[1]);n&&r.push(n)}return r}function a(e,t,n,o){let[r,i]=e,[a,l]=t,[c,s]=n,[d,u]=o;if(r===a&&i===l||c===d&&s===u)return null;const h=(u-s)*(a-r)-(d-c)*(l-i);if(0===h)return null;const f=((d-c)*(i-s)-(u-s)*(r-c))/h,v=((a-r)*(i-s)-(l-i)*(r-c))/h;return f<0||f>1||v<0||v>1?null:[r+f*(a-r),i+f*(l-i)]}},733:(e,t,n)=>{function o(e,t,n,o){const i=n?r(e,n):e,a=o?r(t,o):t,l=Math.min(i.x-i.width/2,a.x-a.width/2),c=Math.max(i.x+i.width/2,a.x+a.width/2),s=Math.min(i.y-i.height/2,a.y-a.height/2),d=Math.max(i.y+i.height/2,a.y+a.height/2);return c-l<i.width+a.width&&d-s<i.height+a.height}function r(e,t){return{x:e.x-e.width/2-t,y:e.y-e.height/2-t,width:e.width+2*t,height:e.height+2*t}}n.d(t,{w:()=>o})},8802:(e,t,n)=>{function o(e){if(Array.isArray(e)){const t=e[0],n=e.length>1?e[1]:t;return[t,n,e.length>2?e[2]:t,e.length>3?e[3]:n]}return new Array(4).fill(e)}n.d(t,{D:()=>o})},2140:(e,t,n)=>{n.d(t,{m:()=>T});var o=n(8769),r=n.n(o),i=n(3373),a=n.n(i),l=n(531),c=n(3188),s=n(3033);function d(e,t){return e.find((e=>(0,l.o6)(e)&&e.id===t))}function u(e){var t,n;let{edge:i,cells:u,lineConfMap:f}=e;const v=(0,o.useRef)(null),g=(0,o.useMemo)((()=>d(u,i.source)),[u,i.source]),m=(0,o.useMemo)((()=>d(u,i.target)),[u,i.target]),w=(0,o.useMemo)((()=>f.get(i)),[i,f]),p=(0,o.useMemo)((()=>u.some((e=>(0,l.WW)(e)&&e.source===i.target&&e.target===i.source))?w.parallelGap:0),[u,i,w.parallelGap]),y=(0,o.useMemo)((()=>g&&m&&null!=g.view.x&&null!=m.view.x?(0,c.h)(h(g.view,5),h(m.view,5),p):null),[p,g,m]);if(!y)return null;const x=`M${y[0].x} ${y[0].y}L${y[1].x} ${y[1].y}`;return r().createElement(r().Fragment,null,r().createElement("path",{d:x,fill:"none",stroke:"transparent",strokeWidth:w.interactStrokeWidth}),r().createElement("path",{ref:v,className:a()("line",{dashed:w.dashed,[(w.dashed?"dashed":"solid")+"-animation"]:w.animate.useAnimate}),style:{"--time":`${w.animate.duration??s.Be}s`,"--solid-length":null===(t=v.current)||void 0===t||null===(n=t.getTotalLength)||void 0===n?void 0:n.call(t)},d:x,fill:"none",stroke:w.strokeColor,strokeWidth:w.strokeWidth,markerStart:w.showStartArrow?w.markerArrow:"",markerEnd:w.showEndArrow?w.markerArrow:""}),r().createElement("path",{className:"line-active-bg",d:x,fill:"none"}))}function h(e,t){return{x:e.x+e.width/2,y:e.y+e.height/2,width:e.width+t,height:e.height+t}}var f=n(8426),v=n(8566),g=n(1030),m=n(9126);function w(e){let{node:t,degraded:n,degradedNodeLabel:i,defaultNodeBricks:a,onResize:l}=e;const c=function(e){const[t,n]=(0,o.useState)(e);return(0,o.useEffect)((()=>{n((t=>(0,g.isEqual)(t,e)?t:e))}),[e]),t}({node:{id:t.id,data:t.data}}),s=t.useBrick,d=(0,o.useRef)(null),u=(0,o.useMemo)((()=>{var e;return n?null:s??(null==a||null===(e=a.find((e=>(0,v.checkIfByTransform)(e,c))))||void 0===e?void 0:e.useBrick)}),[n,s,a,c]),h=(0,o.useMemo)((()=>n?String(v.__secret_internals.legacyDoTransform(c,i??"<% DATA.node.id %>")):""),[n,i,c]),w=(0,o.useCallback)((e=>{const n=d.current;n&&(n.disconnect(),d.current=null),e?setTimeout((()=>{const n=new m.A((()=>{l(t.id,[e.offsetWidth,e.offsetHeight])}));n.observe(e),d.current=n})):l(t.id,null)}),[t.id,l]),p=(0,o.useCallback)((e=>{if(e){const n=e.getBBox();l(t.id,[n.width,n.height])}else l(t.id,null)}),[t.id,l]);return u?r().createElement("foreignObject",{width:9999,height:9999,className:"node"},u&&r().createElement(f.ReactUseBrick,{useBrick:u,data:c,refCallback:w})):n?r().createElement("g",{className:"degraded",ref:p},r().createElement("circle",{cx:8,cy:8,r:8}),r().createElement("text",{x:8,y:32},h)):null}var p=n(9386),y=n(4197);function x(e,t){let{action:n,cell:o,scale:r,layout:i,activeTarget:a,cells:c,onCellsMoving:s,onCellsMoved:d,onCellResizing:u,onCellResized:h,onSwitchActiveTarget:f}=t;e.stopPropagation(),"resize"!==n&&(0,y.Q)(o,a)||null==f||f((0,p.P)(o));const v="force"===i||"dagre"===i;if((0,l.WW)(o))return;const g=[];("multi"===(null==a?void 0:a.type)&&"move"===n?c.filter((e=>(0,y.Q)(e,a))):[o]).forEach((e=>{g.push(e),(0,l.t2)(e)&&"move"===n&&g.push(...c.filter((t=>(0,l.N)(t)&&t.containerId===e.id)))}));const m=g.filter((e=>(0,l.N)(e)&&!v||(0,l.mH)(e)));if(0===m.length)return;const w=[e.clientX,e.clientY],x=m.map((e=>({cell:e,position:"move"===n?[e.view.x,e.view.y]:[e.view.width,e.view.height]})));let k=!1;const E=(e,t)=>{const i=function(e){return[(e.clientX-w[0])/r,(e.clientY-w[1])/r]}(e);if(k||(k=i[0]**2+i[1]**2>=9),k)if("move"===n){var a;const e=x.map((e=>{let{cell:t,position:n}=e;return{type:t.type,id:t.id,x:n[0]+i[0],y:n[1]+i[1],width:t.view.width,height:t.view.height,decorator:(0,l.mH)(t)?t.decorator:void 0}}));null===(a=t?d:s)||void 0===a||a(e)}else{var c;null===(c=t?h:u)||void 0===c||c({type:o.type,id:o.id,width:x[0].position[0]+i[0],height:x[0].position[1]+i[1]})}},b=e=>{E(e)},C=e=>{E(e,!0),k=!1,document.removeEventListener("mousemove",b),document.removeEventListener("mouseup",C)};document.addEventListener("mousemove",b),document.addEventListener("mouseup",C)}function k(e){let{cell:t,transform:n,readOnly:i,activeTarget:a,cells:l,onCellResizing:c,onCellResized:s,onSwitchActiveTarget:d}=e;const u=r().useRef(null);return(0,o.useEffect)((()=>{const e=u.current;if(!e||i)return;const o=e=>{x(e,{action:"resize",cell:t,scale:n.k,activeTarget:a,cells:l,onCellResizing:c,onCellResized:s,onSwitchActiveTarget:d})};return e.addEventListener("mousedown",o),()=>{e.removeEventListener("mousedown",o)}}),[a,t,l,s,c,d,i,n.k]),r().createElement("g",{className:"decorator-area"},r().createElement("rect",{width:t.view.width,height:t.view.height,className:"area"}),!i&&r().createElement("g",{ref:u,className:"resize-handle",transform:`translate(${t.view.width-20} ${t.view.height-20})`},r().createElement("rect",{width:20,height:20}),r().createElement("path",{d:"M10 18L18 10 M15 18L18 15"})))}function E(e){let{cell:t,readOnly:n,onDecoratorTextEditing:i,onDecoratorTextChange:l}=e;const c=t.view.text??"",[s,d]=(0,o.useState)(c),[u,h]=(0,o.useState)(!1),f=(0,o.useRef)(!1),[v,g]=(0,o.useState)(!1),m=(0,o.useRef)(null),w=(0,o.useCallback)((e=>{n||(e.preventDefault(),e.stopPropagation(),h(!0))}),[n]);(0,o.useEffect)((()=>{const e=m.current;e&&e.textContent!==s&&(e.textContent=s)}),[s]),(0,o.useEffect)((()=>{var e;const n=null===(e=m.current)||void 0===e?void 0:e.parentElement;n&&(t.view.width=n.clientWidth,t.view.height=n.clientHeight)}),[s,t.id]),(0,o.useEffect)((()=>{u&&m.current&&(m.current.focus(),b(m.current)),null==i||i({id:t.id,editing:u})}),[t.id,u,i]),(0,o.useEffect)((()=>{f.current?null==i||i({id:t.id,editing:u}):f.current=!0}),[t.id,u,i]);const p=(0,o.useCallback)((e=>{n||d(e.target.textContent)}),[n]),y=(0,o.useCallback)((()=>{n||(h(!1),g(!0))}),[n]);return(0,o.useEffect)((()=>{v&&(null==l||l({id:t.id,view:{...t.view,text:s}}),g(!1))}),[t,s,l,v]),r().createElement("foreignObject",{className:"decorator-text"},r().createElement("div",{className:a()("text-container",{editing:u}),onDoubleClick:w},r().createElement("div",{className:"text",contentEditable:u,ref:m,onInput:p,onBlur:y})))}function b(e){const t=document.createRange();t.selectNodeContents(e);const n=window.getSelection();n.removeAllRanges(),n.addRange(t)}var C=n(9068);function z(e){let{cell:t,transform:n,readOnly:i,layout:c,view:s,activeTarget:d,cells:u,onCellResizing:h,onCellResized:f,onSwitchActiveTarget:v,onDecoratorTextEditing:m,onDecoratorTextChange:w}=e;const p=(0,g.get)(t.view,"text",""),y=(0,g.get)(t.view,"direction","top"),k=(0,o.useRef)(null),E=r().useRef(null),[z,M]=(0,o.useState)(!1),[N,A]=(0,o.useState)(p),[T,R]=(0,o.useState)(!1),[L,S]=(0,o.useState)(),[W,D]=(0,o.useState)({x:0,y:0,width:t.view.width,height:t.view.height}),P=(0,o.useCallback)((e=>{i||(e.preventDefault(),e.stopPropagation(),M(!0))}),[i]),H=(0,o.useCallback)((e=>{i||A(e.target.textContent)}),[i]),B=(0,o.useCallback)((()=>{i||(M(!1),R(!0),S((0,C.uuidV4)()))}),[i]);return(0,o.useEffect)((()=>{A(p)}),[p]),(0,o.useEffect)((()=>{const e=k.current;e&&e.textContent!==N&&(e.textContent=N)}),[N]),(0,o.useEffect)((()=>{var e;const t=null===(e=k.current)||void 0===e?void 0:e.parentElement;if(t){const{clientWidth:e,clientHeight:n}=t;if(["left","right"].includes(y)){const t={width:e,height:s.height,x:"left"===y?-e:s.width,y:0};D(t)}else{const e={width:s.width,height:n,x:0,y:"top"===y?-n:s.height};D(e)}}}),[s,N,y,L]),(0,o.useEffect)((()=>{z&&k.current&&(k.current.focus(),b(k.current)),null==m||m({id:t.id,editing:z})}),[t.id,z,m]),(0,o.useEffect)((()=>{T&&(null==w||w({id:t.id,view:{...s,text:N}}),R(!1))}),[t,s,N,w,T]),(0,o.useEffect)((()=>{const e=E.current;if(!e||i)return;const o=e=>{x(e,{action:"resize",cell:t,scale:n.k,activeTarget:d,cells:u,onCellResizing:h,onCellResized:f,onSwitchActiveTarget:v})};return e.addEventListener("mousedown",o),()=>{e.removeEventListener("mousedown",o)}}),[d,t,u,f,h,v,i,n.k]),r().createElement("g",{className:"decorator-container"},r().createElement("foreignObject",W,r().createElement("div",{className:a()("text-container",{editing:z,[["left","right"].includes(y)?"vertical":"horizontal"]:!0}),onDoubleClick:P},r().createElement("div",{className:"text",contentEditable:z,ref:k,onInput:H,onBlur:B}))),r().createElement("rect",{width:s.width,height:s.height,className:"container"}),!i&&!(0,l.OD)(c)&&r().createElement("g",{ref:E,className:"resize-handle",transform:`translate(${s.width-20} ${s.height-20})`},r().createElement("rect",{width:20,height:20}),r().createElement("path",{d:"M10 18L18 10 M15 18L18 15"})))}function M(e){let t,{cell:n,view:o,transform:i,readOnly:a,layout:l,activeTarget:c,cells:s,onCellResizing:d,onCellResized:u,onSwitchActiveTarget:h,onDecoratorTextEditing:f,onDecoratorTextChange:v}=e;switch(n.decorator){case"container":t=z;break;case"area":t=k;break;case"text":t=E;break;default:return console.error(`Unknown decorator: ${n.decorator}`),null}return r().createElement(t,{cell:n,view:o,transform:i,readOnly:a,layout:l,activeTarget:c,cells:s,onCellResizing:d,onCellResized:u,onSwitchActiveTarget:h,onDecoratorTextEditing:f,onDecoratorTextChange:v})}var N=n(8185);function A(e){let t=1/0,n=1/0,o=-1/0,r=-1/0;return e.forEach((e=>{const{x:i,y:a,width:l,height:c}=e.view;i<t&&(t=i),a<n&&(n=a),i+l>o&&(o=i+l),a+c>r&&(r=a+c)})),[t,o,n,r].some((e=>isFinite(e)))?{x:t-20,y:n-20,width:o-t+40,height:r-n+40}:{}}function T(e){let{layout:t,cell:n,cells:i,degraded:c,degradedNodeLabel:s,defaultNodeBricks:d,lineConfMap:h,activeTarget:f,dragNodeToContainerActive:v,readOnly:m,transform:k,unrelatedCells:E,onCellsMoving:b,onCellsMoved:C,onCellResizing:z,onCellResized:T,onSwitchActiveTarget:R,onCellContextMenu:L,onCellClick:S,onDecoratorTextEditing:W,onDecoratorTextChange:D,onNodeBrickResize:P,onCellMouseEnter:H,onCellMouseLeave:B}=e;const V=(0,o.useRef)(null),O=(0,o.useMemo)((()=>E.some((e=>(0,N.c)(e,n)))),[n,E]),I=(0,o.useMemo)((()=>{if((0,l.t2)(n)&&(0,l.OD)(t)){const e=i.filter((e=>(0,l.N)(e)&&e.containerId===n.id)),t={...n.view,...A(e)};return n.view=t,t}return(0,g.get)(n,"view",{x:0,y:0,width:0,height:0})}),[t,n,i]);(0,o.useEffect)((()=>{const e=V.current;if(!e)return;const o=e=>{m||(0,l.t2)(n)&&(0,l.OD)(t)?e.stopPropagation():x(e,{layout:t,action:"move",cell:n,scale:k.k,activeTarget:f,cells:i,onCellsMoving:b,onCellsMoved:C,onSwitchActiveTarget:R})};return e.addEventListener("mousedown",o),()=>{e.removeEventListener("mousedown",o)}}),[t,n,f,i,C,b,R,m,k.k]);const Y=(0,o.useCallback)((e=>{m&&"decorator"===n.type||(e.preventDefault(),R((0,p.P)(n)),L({cell:n,clientX:e.clientX,clientY:e.clientY}))}),[n,L,R,m]),$=(0,o.useCallback)((e=>{S&&"decorator"!==n.type&&S({cell:n,clientX:e.clientX,clientY:e.clientY})}),[n,S]),X=(0,o.useCallback)((()=>{null==H||H(n)}),[n,H]),_=(0,o.useCallback)((()=>{null==B||B(n)}),[n,B]);return r().createElement("g",{className:a()("cell",{active:(0,y.Q)(n,f),faded:O,"read-only":m,"container-active":v}),ref:V,transform:"edge"===n.type||null==n.view.x?void 0:`translate(${I.x} ${I.y})`,onContextMenu:Y,onClick:$,onMouseEnter:X,onMouseLeave:_},(0,l.N)(n)?r().createElement(w,{node:n,degraded:c,degradedNodeLabel:s,defaultNodeBricks:d,onResize:P}):(0,l.WW)(n)?r().createElement(u,{edge:n,cells:i,lineConfMap:h}):(0,l.mH)(n)?r().createElement(M,{cell:n,view:I,transform:k,readOnly:m,layout:t,activeTarget:f,cells:i,onCellResizing:z,onCellResized:T,onSwitchActiveTarget:R,onDecoratorTextEditing:W,onDecoratorTextChange:D}):null)}},3639:(e,t,n)=>{n.d(t,{w:()=>l});var o=n(8769),r=n.n(o),i=n(3373),a=n.n(i);function l(e){let{connectLineState:t,transform:n,markerEnd:i,onConnect:l}=e;const[c,s]=(0,o.useState)(null);return(0,o.useEffect)((()=>{t&&s(t.from)}),[t]),(0,o.useEffect)((()=>{if(t){const e=e=>{s([(e.clientX-n.x-t.offset[0])/n.k,(e.clientY-n.y-t.offset[1])/n.k])},o=e=>{e.stopPropagation()},r=e=>{e.stopPropagation(),i(),l(t,[(e.clientX-n.x-t.offset[0])/n.k,(e.clientY-n.y-t.offset[1])/n.k])},i=()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mousedown",o,{capture:!0}),document.removeEventListener("click",r,{capture:!0}),s(null)};return document.addEventListener("mousemove",e),document.addEventListener("mousedown",o,{capture:!0}),document.addEventListener("click",r,{capture:!0}),i}}),[t,l,n]),r().createElement("path",{className:a()("connect-line",{connecting:!!t&&c&&(c[0]-t.from[0])**2+(c[1]-t.from[1])**2>25}),d:t&&c?`M${t.from.join(" ")}L${c.join(" ")}`:"",fill:"none",stroke:"gray",strokeWidth:1,markerEnd:`url(#${i})`})}},3033:(e,t,n)=>{n.d(t,{Be:()=>m,CV:()=>o,HP:()=>i,Ie:()=>f,N8:()=>l,Ub:()=>g,VO:()=>h,XV:()=>v,Yt:()=>d,mF:()=>u,pC:()=>w,sS:()=>s,sz:()=>a,w1:()=>c,xc:()=>r});const o=Symbol.for("size-initialized"),r=Symbol.for("layout-initialized"),i=20,a=36,l=180,c=120,s=.5,d=2,u="gray",h=1,f=15,v=!1,g=!0,m=1,w=500},531:(e,t,n)=>{function o(e){return"node"===e.type}function r(e){return"decorator"===e.type}function i(e){return"node"===e.type}function a(e){return"edge"===e.type}function l(e){return"node"===e.type||"edge"===e.type}function c(e){return"node"===e.type||"decorator"===e.type&&"area"===e.decorator}function s(e){return"decorator"===e.type&&"text"===e.decorator}function d(e){return"decorator"===e.type&&"container"===e.decorator}function u(e){return!["manual",void 0].includes(e)}n.d(t,{Hs:()=>s,N:()=>o,OD:()=>u,WW:()=>a,mH:()=>r,nv:()=>l,o6:()=>c,t2:()=>d,vC:()=>i})},9386:(e,t,n)=>{n.d(t,{P:()=>r});var o=n(1030);function r(e){return"edge"===e.type?(0,o.pick)(e,["type","source","target","data"]):(0,o.pick)(e,["type","id","data"])}},227:(e,t,n)=>{n.d(t,{Y:()=>r});var o=n(4197);function r(e,t,n,r){const i=[];if(t){const n=new Set;for(const o of e)"edge"===o.type&&o.source===t.source.id&&n.add(o.target);for(const t of e)switch(t.type){case"node":n.has(t.id)&&i.push(t);break;case"decorator":r&&"text"!=t.decorator&&!n.has(t.id)||i.push(t);break;default:i.push(t)}}else switch(null==n?void 0:n.type){case"multi":{const t=new Map,r=new Set,a=new Set;for(const e of n.targets)"node"===e.type&&(r.add(e.id),a.add(e.id));for(const l of e)"node"===l.type?t.set(l.id,l):"edge"===l.type?r.has(l.source)?a.add(l.target):r.has(l.target)?a.add(l.source):(0,o.Q)(l,n)||i.push(l):(0,o.Q)(l,n)||i.push(l);for(const[e,n]of t)a.has(e)||i.push(n);break}case"node":{const t=new Map,o=new Set([n.id]);for(const r of e)"node"===r.type?t.set(r.id,r):"edge"===r.type?r.source===n.id?o.add(r.target):r.target===n.id?o.add(r.source):i.push(r):i.push(r);for(const[e,n]of t)o.has(e)||i.push(n);break}case"edge":for(const t of e)("edge"===t.type?(0,o.Q)(t,n):"node"===t.type&&(t.id===n.source||t.id===n.target))||i.push(t)}return i}},5114:(e,t,n)=>{n.d(t,{a:()=>r});var o=n(4197);function r(e,t){let{cells:n,activeTarget:r}=t;const i=n.filter((e=>(0,o.Q)(e,r)));if(0!==i.length)switch(e.key||e.keyCode||e.which){case"Backspace":case 8:case"Delete":case 46:return e.preventDefault(),e.stopPropagation(),{action:"delete-cells",cells:i}}}},2219:(e,t,n)=>{function o(e,t){let{transform:n,offset:o,onLassoing:r,onLassoed:i}=t;if(e.ctrlKey||e.button)return;e.stopPropagation();const a=[e.clientX,e.clientY],l=(e.clientX-o[0]-n.x)/n.k,c=(e.clientY-o[1]-n.y)/n.k;let s=!1;const d=(e,t)=>{const o=function(e){return[(e.clientX-a[0])/n.k,(e.clientY-a[1])/n.k]}(e);if(s||(s=o[0]**2+o[1]**2>=9),s){let[e,n]=o,a=l,s=c;e<0&&(a=l+e,e=-e),n<0&&(s=c+n,n=-n),(t?i:r)({x:a,y:s,width:e,height:n})}},u=e=>{d(e)},h=e=>{d(e,!0),s=!1,document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",h)};document.addEventListener("mousemove",u),document.addEventListener("mouseup",h)}n.d(t,{F:()=>o})},1991:(e,t,n)=>{n.d(t,{_:()=>r});var o=n(531);function r(e,t,n){const r=t.filter((e=>(0,o.N)(e))),i=e.filter((e=>(0,o.t2)(e))).map((e=>e.id)),a=e.filter((e=>{const t=r.find((t=>t.id===e.id)),n=(null==t?void 0:t.containerId)&&i.includes(t.containerId);return(0,o.N)(e)&&!n}));a.forEach((e=>{const n=e.x,r=e.x+e.width,i=e.y,a=e.y+e.height,l=t.filter((e=>(0,o.t2)(e)));for(const t of l){const o=t.view.x,l=t.view.x+t.view.width,c=t.view.y,s=t.view.y+t.view.height;if(n>=o&&r<=l&&i>=c&&a<=s){e.containerCell=t;break}}}));let l=[];return l=a.filter((e=>{var t;const n=r.find((t=>t.id===e.id));return(null==n?void 0:n.containerId)!==(null===(t=e.containerCell)||void 0===t?void 0:t.id)})),l.length>0&&(null==n||n(l)),l}},3783:(e,t,n)=>{n.d(t,{C:()=>r});var o=n(531);function r(e,t){let{defaultNodeSize:n}=t;return(e??[]).map((e=>{var t,r;return!(0,o.vC)(e)||void 0!==(null===(t=e.view)||void 0===t?void 0:t.width)&&void 0!==(null===(r=e.view)||void 0===r?void 0:r.height)?e:{...e,view:{width:n[0],height:n[1],...e.view}}}))}},8185:(e,t,n)=>{function o(e,t){return e?!!t&&e.type===t.type&&("multi"===e.type?e.targets.length===t.targets.length&&e.targets.every((e=>t.targets.some((t=>o(e,t))))):"node"===e.type||"decorator"===e.type?e.id===t.id:e.source===t.source&&e.target===t.target):!t}n.d(t,{c:()=>o})},4197:(e,t,n)=>{n.d(t,{Q:()=>r});var o=n(8185);function r(e,t){return!!t&&("multi"===t.type?t.targets:[t]).some((t=>(0,o.c)(t,e)))}},908:(e,t,n)=>{n.d(t,{r:()=>r});var o=n(531);function r(e,t){let{canvasWidth:n,canvasHeight:r,scaleRange:i}=t,a=1/0,l=1/0,c=-1/0,s=-1/0,d=!0;for(const t of e)if(!(0,o.WW)(t)){d=!1;const{view:e}=t,n=e.x+e.width,o=e.y+e.height;e.x<a&&(a=e.x),n>c&&(c=n),e.y<l&&(l=e.y),o>s&&(s=o)}const u=c-a,h=s-l,f=i&&!d&&(u>n||h>r)?Math.max(Math.min(n/u,r/h,i[1]),i[0]):1;return{x:d?0:(n-u*f)/2-a*f,y:d?0:(r-h*f)/2-l*f,k:f}}},2098:(e,t,n)=>{n.d(t,{L:()=>u});var o=n(1030),r=n(3033),i=n(531),a=n(3783),l=n(908),c=n(6170),s=n(9127),d=n(8185);function u(e){let{cells:t,layout:n,previousCells:u,defaultNodeSize:h,canvasWidth:f,canvasHeight:v,scaleRange:g,transform:m,reason:w,parent:p,allowEdgeToArea:y}=e;const x="force"!==n&&"dagre"!==n,k=(0,a.C)(t,{defaultNodeSize:h}),E=[];let b=!1;const C=new Map;let z=!1;for(const e of u)(0,i.mH)(e)?z=!0:(0,i.N)(e)&&(z=!0,e[r.CV]&&C.set(e.id,e));const M=new Map;for(const e of k)if((0,i.N)(e)){M.set(e.id,e);const t=C.get(e.id);t&&(e.view.width=t.view.width,e.view.height=t.view.height,e[r.CV]=!0)}let N=!1;if("add-related-nodes"===w&&p){const e=new Set;for(const t of k)(0,i.WW)(t)&&t.source===p&&t.target!==p&&e.add(t.target);const t=M.get(p);if(void 0!==(null==t?void 0:t.view.x)&&void 0!==t.view.y){if(N=!0,x)for(const t of k)((0,i.N)(t)&&void 0===t.view.x||(0,i.N)(t)&&void 0===t.view.y)&&e.add(t.id);const n=[...e].map((e=>M.get(e))).filter(Boolean);let o;for(const e of n)void 0!==e.view.x&&void 0!==e.view.y?(!o||e.view.x>o.view.x)&&e.view.y>t.view.y&&(o=e):E.push(e);if(E.length>0&&x){let e,n;if(o)e=o.view.x+o.view.width+r.sz,n=o.view.y;else{const o=E.reduce(((e,t)=>e+t.view.width+r.sz),-r.sz);e=t.view.x-o/2+t.view.width/2,n=t.view.y+t.view.height+r.sz}for(const t of E)t.view.x=e,t.view.y=n,e+=t.view.width+r.sz}}}if(!N){let e=h[0],t=h[1];const n=[];let r=!1;for(const o of k)(0,i.N)(o)?(o.view.width>e&&(e=o.view.width),o.view.height>t&&(t=o.view.height),void 0===o.view.x||void 0===o.view.y?E.push(o):n.push(o)):(0,i.mH)(o)&&(r=!0);if(x){let e;z||(m=(0,l.r)((0,o.without)(k,...E),{canvasWidth:f,canvasHeight:v,scaleRange:g})),0===n.length||1===n.length&&!r?(E.push(...n),({getNodeView:e}=(0,s.C)({cells:k,allowEdgeToArea:y})),b=0===u.length||u.length===k.length&&u.every(((e,t)=>(0,d.c)(e,k[t])))):({getNodeView:e}=(0,c.k)({cells:k,fixedPosition:!0,allowEdgeToArea:y,center:[(f/2-m.x)/m.k,(v/2-m.y)/m.k]}));for(const t of k)if((0,i.N)(t)){const n=e(t.id);t.view.x=n.x,t.view.y=n.y}}}return{cells:k,updated:E,shouldReCenter:b}}},5748:(e,t,n)=>{n.d(t,{d:()=>a});var o=n(531),r=n(3033);function i(e,t,n){const o=e.findLastIndex(n)+1;return[...e.slice(0,o),t,...e.slice(o)]}const a=(l={cells:(e,t)=>{switch(t.type){case"drop-node":return i(e,t.payload,(e=>!("decorator"===e.type&&"text"===e.decorator)));case"drop-decorator":return"text"===t.payload.decorator?[...e,t.payload]:i(e,t.payload,(e=>"decorator"===e.type&&"area"===e.decorator));case"add-nodes":{const n=e.findLastIndex((e=>!("decorator"===e.type&&"text"===e.decorator)))+1;return[...e.slice(0,n),...t.payload,...e.slice(n)]}case"add-edge":return i(e,t.payload,(e=>"edge"===e.type||"decorator"===e.type&&"area"===e.decorator));case"move-cells":{let n=!1;const o=e.map((e=>{const o=t.payload.find((t=>e.type===t.type&&e.id===t.id));return o?(n=!0,{...e,view:{...e.view,x:o.x,y:o.y}}):e}));return n?o:e}case"resize-cell":{const{type:n,id:o,width:r,height:i}=t.payload,a=e.findIndex((e=>e.type===n&&e.id===o));if(-1!==a){const t=e[a];return[...e.slice(0,a),{...t,view:{...t.view,width:r,height:i}},...e.slice(a+1)]}return e}case"update-cells":return t.payload;case"update-node-size":return e.map((e=>(0,o.N)(e)&&e.id===t.payload.id?{...e,[r.CV]:!0,view:t.payload.size?{...e.view,width:t.payload.size[0],height:t.payload.size[1]}:e.view}:e))}return e},layoutKey:(e,t)=>"update-node-size"===t.type?t.layoutKey:e},(e,t)=>Object.fromEntries(Object.entries(l).map((n=>{let[o,r]=n;return[o,r(e[o],t)]}))));var l},7099:(e,t,n)=>{n.d(t,{Y:()=>v});var o=n(8769),r=n.n(o),i=n(2588),a=n(6768),l=n(6308),c=n(6257),s=n(8426),d=n(9575);const u=e=>o.createElement("svg",(0,d.A)({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24"},e),o.createElement("path",{d:"M12 0a.5.5 0 0 1 .5.5v2.013a9.5 9.5 0 0 1 8.987 8.988L23.5 11.5a.5.5 0 0 1 0 1h-2.013a9.5 9.5 0 0 1-8.987 8.987V23.5a.5.5 0 0 1-1 0v-2.013A9.5 9.5 0 0 1 2.514 12.5H.5a.5.5 0 0 1 0-1h2.013A9.5 9.5 0 0 1 11.5 2.514V.5A.5.5 0 0 1 12 0M3.514 11.5H7.5a.5.5 0 0 1 0 1H3.514a8.5 8.5 0 0 0 7.987 7.986L11.5 16.5a.5.5 0 0 1 1 0v3.986a8.5 8.5 0 0 0 7.986-7.986H16.5a.5.5 0 0 1 0-1h3.986A8.5 8.5 0 0 0 12.5 3.515V7.5a.5.5 0 0 1-1 0V3.514a8.5 8.5 0 0 0-7.986 7.987zm8.486-1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3"})),h=e=>o.createElement("svg",(0,d.A)({xmlns:"http://www.w3.org/2000/svg",width:128,height:128,className:"icon",viewBox:"0 0 1024 1024"},e),o.createElement("path",{d:"M512 76.8A435.2 435.2 0 1 0 947.2 512 435.71 435.71 0 0 0 512 76.8m0 819.2a384 384 0 1 1 384-384 384 384 0 0 1-384 384"}),o.createElement("path",{d:"M744.448 486.4h-204.8V281.6a25.6 25.6 0 1 0-51.2 0v204.8h-204.8a25.6 25.6 0 0 0 0 51.2h204.8v204.8a25.6 25.6 0 0 0 51.2 0V537.6h204.8a25.6 25.6 0 0 0 0-51.2"})),f=e=>o.createElement("svg",(0,d.A)({xmlns:"http://www.w3.org/2000/svg",width:128,height:128,className:"icon",viewBox:"0 0 1024 1024"},e),o.createElement("path",{d:"M512 76.8A435.2 435.2 0 1 0 947.2 512 435.71 435.71 0 0 0 512 76.8m0 819.2a384 384 0 1 1 384-384 384 384 0 0 1-384 384"}),o.createElement("path",{d:"M744.448 486.4H280.064a25.6 25.6 0 1 0 0 51.2h464.384a25.6 25.6 0 0 0 0-51.2"}));function v(e){let{shadowRoot:t,scale:n,scaleRange:d,onZoomChange:v,onReCenter:g}=e;const m=(0,s.useCurrentTheme)(),w=(0,o.useMemo)((()=>(0,c.VC)()),[]),p=(0,o.useRef)(null),y=100*d[0],x=100*d[1],k=100*n,E=(0,o.useMemo)((()=>({formatter:e=>`${e}%`,placement:"left",getPopupContainer:()=>p.current})),[]),b=(0,o.useCallback)((()=>{v(Math.min(k+5,x))}),[x,v,k]),C=(0,o.useCallback)((()=>{v(Math.max(k-5,y))}),[y,v,k]);return r().createElement(i.Ay,{theme:{algorithm:"dark-v2"===m?a.A.darkAlgorithm:a.A.defaultAlgorithm}},r().createElement(c.N7,{container:t,autoClear:!0,cache:w,hashPriority:"high"},r().createElement("div",{className:"zoom-bar",ref:p},r().createElement("div",{className:"center-button",onClick:g,role:"button"},r().createElement(u,null)),r().createElement("div",{className:"zoom-slider"},r().createElement("div",{className:"zoom-button",role:"button",onClick:b},r().createElement(h,null)),r().createElement(l.A,{min:y,max:x,value:k,step:5,vertical:!0,included:!1,tooltip:E,onChange:v}),r().createElement("div",{className:"zoom-button",role:"button",onClick:C},r().createElement(f,null))))))}},9127:(e,t,n)=>{n.d(t,{C:()=>c});var o=n(1030),r=n(7586),i=n.n(r),a=n(8802),l=n(531);function c(e){let{cells:t,layoutOptions:n,allowEdgeToArea:r}=e;const{nodePadding:c,...s}={nodePadding:0,rankdir:"TB",ranksep:50,edgesep:10,nodesep:50,...(0,o.pick)(n,["nodePadding","rankdir","ranksep","edgesep","nodesep","align"])},d=(0,a.D)(c);if(!t.some(l.N))return{getNodeView:()=>null,nodePaddings:d};const u=new(i().graphlib.Graph);u.setGraph(s),u.setDefaultEdgeLabel((function(){return{}}));for(const e of t)r&&(0,l.o6)(e)||(0,l.N)(e)?u.setNode(e.id,{id:e.id,width:e.view.width+d[1]+d[3],height:e.view.height+d[0]+d[2]}):(0,l.WW)(e)&&u.setEdge(e.source,e.target);return i().layout(u),{getNodeView:e=>u.node(e),nodePaddings:d}}},6170:(e,t,n)=>{n.d(t,{k:()=>h});var o=n(1030),r=n(6149),i=n(4842),a=n(1945),l=n(9418),c=n(3854),s=n(7931),d=n(531),u=n(8802);function h(e){let{cells:t,layoutOptions:n,center:h,fixedPosition:f,allowEdgeToArea:v}=e;const{nodePadding:g,collide:m}={nodePadding:0,...(0,o.pick)(n,["nodePadding"]),collide:!1!==(null==n?void 0:n.collide)&&{radiusDiff:18,strength:1,iterations:1,...!0===(null==n?void 0:n.collide)?null:null==n?void 0:n.collide}},w=(0,u.D)(g),p=[],y=[],x=new Map;for(const e of t)if(v&&(0,d.o6)(e)||(0,d.N)(e)){const t={id:e.id,width:e.view.width+w[1]+w[3],height:e.view.height+w[0]+w[2],...f?{fx:e.view.x,fy:e.view.y}:null};p.push(t),x.set(t.id,t)}else(0,d.WW)(e)&&y.push({source:e.source,target:e.target});const k=(0,r.A)(y).id((e=>e.id)),E=(0,i.A)(p).force("link",k).force("x",(0,a.A)(null==h?void 0:h[0])).force("y",(0,l.A)(null==h?void 0:h[1])).force("charge",(0,c.A)());return m&&E.force("collide",(0,s.A)().radius((e=>Math.sqrt(e.width**2+e.height**2)/2+m.radiusDiff)).strength(m.strength).iterations(m.iterations)),E.stop(),function(e){e.tick(Math.ceil(Math.log(e.alphaMin())/Math.log(1-e.alphaDecay())))}(E),{getNodeView:e=>x.get(e),nodePaddings:w}}},1819:(e,t,n)=>{n.d(t,{J:()=>i});var o=n(8769),r=n(8185);function i(e){let{cellsRef:t,activeTarget:n,onActiveTargetChange:i}=e;const a=n??null,[l,c]=(0,o.useState)(a);(0,o.useEffect)((()=>{c((e=>(0,r.c)(e,a)?e:a))}),[a]);const s=(0,o.useRef)(!1);return(0,o.useEffect)((()=>{s.current?i(l):s.current=!0}),[l,i]),(0,o.useEffect)((()=>{if(!l)return;const e=e=>{e.composedPath().indexOf(t.current)<=0&&c(null)};return document.addEventListener("click",e),()=>{document.removeEventListener("click",e)}}),[l,t]),l}},1484:(e,t,n)=>{n.d(t,{g:()=>f});var o=n(8769),r=n(7566),i=n(9047),a=n(3033),l=n(531),c=n(908),s=n(6170),d=n(9127);const u=new Map([["center",.5],["left",0],["right",1],["top",0],["bottom",1]]);function h(e,t){if("string"==typeof e){const n=u.get(e);if(void 0!==n)return n;const o=e.match(/^(-?\d+(?:\.\d+)?)%$/);if(o)return Number(o[1])/100;console.error("Unexpected align origin %s:",t,e)}else{if("number"==typeof e)return e;console.error("Unexpected align origin %s, expected %s, received %s:",t,"string | number",typeof e,e)}return.5}function f(e){let{layout:t,layoutOptions:n,rootRef:u,cells:f,zoomable:v,zoomer:g,scaleRange:m,layoutKey:w,allowEdgeToArea:p,dispatch:y}=e;const[x,k]=(0,o.useState)("force"!==t&&"dagre"!==t),E=(0,o.useRef)(w),b=(0,o.useCallback)((()=>++E.current),[]),[C,z]=function(e){let{rootRef:t,cells:n,layoutInitialized:s,zoomable:d,zoomer:u,scaleRange:h}=e;const[f,v]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{const e=t.current;if(!e||!s||f||!n.some((e=>(0,l.N)(e)||(0,l.mH)(e)))||n.some((e=>(0,l.N)(e)&&!e[a.CV])))return;const{k:o,x:g,y:m}=(0,c.r)(n,{canvasWidth:e.clientWidth,canvasHeight:e.clientHeight,scaleRange:d?h:void 0});u.transform((0,r.A)(e),new i.uV(o,g,m)),v(!0)}),[n,f,s,t,h,d,u]),(0,o.useEffect)((()=>{n.some((e=>(0,l.N)(e)||(0,l.mH)(e)))||v(!1)}),[n]),[f,v]}({rootRef:u,layoutInitialized:x,cells:f,zoomable:v,zoomer:g,scaleRange:m}),M=(0,o.useRef)(null);return(0,o.useEffect)((()=>{if(f.some((e=>(0,l.N)(e)&&!e[a.CV]))||0===f.length)return;if("force"!==t&&"dagre"!==t)return void k(!0);if(E.current!==w||(e=M.current,o=f.filter(l.nv),(null==e?void 0:e.length)===o.length&&e.every(((e,t)=>e===o[t]))))return;var e,o;let r,i;({getNodeView:r,nodePaddings:i}="force"===t?(0,s.k)({cells:f,layoutOptions:n,allowEdgeToArea:p}):(0,d.C)({cells:f,layoutOptions:n,allowEdgeToArea:p}));const c=function(e){const t=e??[.5,.5];return[h(t[0],"x"),h(t[1],"y")]}(null==n?void 0:n.alignOrigin),u=f.map((e=>{if(p&&(0,l.o6)(e)||(0,l.N)(e)){const t=r(e.id);return{...e,view:{...e.view,x:t.x-t.width*c[0]+i[3],y:t.y-t.height*c[1]+i[0]},[a.xc]:!0}}return e}));M.current=u.filter(l.nv),y({type:"update-cells",payload:u}),k(!0)}),[f,y,t,w,n]),{centered:C,setCentered:z,getNextLayoutKey:b}}},7531:(e,t,n)=>{n.d(t,{d:()=>c});var o=n(8769),r=n(8566),i=n(1030),a=n(531),l=n(3033);function c(e){let{cells:t,defaultEdgeLines:n,markerPrefix:c}=e;return(0,o.useMemo)((()=>{const e=[{strokeColor:l.mF}],o=new WeakMap;for(const d of t)if((0,a.WW)(d)){const t=r.__secret_internals.legacyDoTransform({edge:d},null==n?void 0:n.find((e=>(0,r.checkIfByTransform)(e,{edge:d}))))??{},a={dashed:!1,strokeColor:l.mF,strokeWidth:l.VO,interactStrokeWidth:l.Ie,showStartArrow:l.XV,showEndArrow:l.Ub,animate:{useAnimate:!1,duration:l.Be},...(0,i.omitBy)(t,i.isUndefined)};void 0===a.parallelGap&&(a.parallelGap=a.interactStrokeWidth);const u=s({strokeColor:a.strokeColor},e);a.markerArrow=`url(#${c}${u})`,o.set(d,a)}return[o,e]}),[t,n,c])}function s(e,t){let n=(0,i.findIndex)(t,e);return-1===n&&(n=t.push(e)-1),n}},8197:(e,t,n)=>{n.d(t,{H:()=>a});var o=n(8769),r=n(531),i=n(3033);function a(e){let{cells:t,layout:n,centered:a}=e;return(0,o.useMemo)((()=>a&&t.every((e=>!(0,r.N)(e)||e[i.CV]&&("force"!==n&&"dagre"!==n||e[i.xc])))),[t,a,n])}},8091:(e,t,n)=>{n.d(t,{f:()=>l});var o=n(8769),r=n(7566),i=n(9047),a=n(3033);function l(e){let{rootRef:t,zoomable:n,scrollable:l,pannable:c,draggable:s,ctrlDraggable:d,scaleRange:u,onSwitchActiveTarget:h}=e;const[f,v]=(0,o.useState)(!1),[g,m]=(0,o.useState)({k:1,x:0,y:0}),w=(0,o.useMemo)((()=>u??[a.sS,a.Yt]),[u]),p=(0,o.useMemo)((()=>(0,i.s_)()),[]);return(0,o.useEffect)((()=>{let e=!1;p.scaleExtent(n?w:[1,1]).on("start",(()=>{e=!1,v(!0)})).on("zoom",(t=>{e=!0,m(t.transform)})).on("end",(()=>{v(!1),e||null==h||h(null)})).filter((e=>("wheel"===e.type||(d?s||e.ctrlKey:!e.ctrlKey))&&!e.button))}),[h,w,n,p,d,s]),(0,o.useEffect)((()=>{if(d){const e=e=>{e.ctrlKey&&e.preventDefault()};return document.addEventListener("contextmenu",e,!0),()=>{document.removeEventListener("contextmenu",e,!0)}}}),[d]),(0,o.useEffect)((()=>{const e=t.current;if(!e)return;const o=(0,r.A)(e),i=()=>{o.on(".zoom",null).on(".zoom.custom",null).on("wheel",null)};if(n||l||c)return(n||l)&&o.on("wheel.zoom.custom",(e=>{e.ctrlKey||(e.stopImmediatePropagation(),l&&(e.preventDefault(),p.translateBy(o,e.wheelDeltaX/5,e.wheelDeltaY/5)))})),o.call(p).on("wheel",(e=>{e.preventDefault()})).on("dblclick.zoom",null),(s||d)&&c||o.on("mousedown.zoom",null),c||o.on("touchstart.zoom",null).on("touchmove.zoom",null).on("touchend.zoom",null),i;i()}),[d,s,c,t,l,n,p]),{grabbing:f,transform:g,zoomer:p,scaleRange:w}}},6237:(e,t,n)=>{n.d(t,{A:()=>l});var o=n(6758),r=n.n(o),i=n(935),a=n.n(i)()(r());a.push([e.id,'.zoom-bar{position:absolute;bottom:20px;right:20px;width:40px;scale:0.8}.zoom-slider,\n.center-button{width:100%;display:flex;align-items:center;border:1px solid var(--antd-background-color-base);border-radius:var(--larger-border-radius);box-shadow:var(--connected-overlay-shadow);background-color:var(--color-fill-bg-container-4)}.zoom-slider{height:140px;padding:8px 0;flex-direction:column}[role="button"]{cursor:pointer}.center-button{justify-content:center;margin-bottom:8px;height:40px}.center-button:hover{border-color:var(--antd-btn-default-hover-border-color)}.center-button path{fill:var(--antd-link-hover-color)}.center-button:hover path{fill:var(--palette-blue-7)}.zoom-button{font-size:16px;line-height:0}.zoom-button svg{width:1em;height:1em;fill:var(--antd-link-hover-color)}.zoom-slider .ant-slider-vertical{padding-inline:5px}.zoom-slider .ant-slider-vertical .ant-slider-rail{width:2px}.zoom-slider .ant-slider-vertical .ant-slider-handle{width:6px;height:6px;inset-inline-start:3px}.zoom-slider .ant-slider .ant-slider-handle:hover::before,\n.zoom-slider .ant-slider .ant-slider-handle:focus::before,\n.zoom-slider .ant-slider .ant-slider-handle::before{width:10px;height:10px;inset-inline-start:-2px}.zoom-slider .ant-slider .ant-slider-handle:hover::after,\n.zoom-slider .ant-slider .ant-slider-handle:focus::after,\n.zoom-slider .ant-slider .ant-slider-handle::after{width:6px;height:6px;inset-block-start:0;inset-inline-start:0}',""]);const l=a.toString()},3012:(e,t,n)=>{n.d(t,{A:()=>l});var o=n(6758),r=n.n(o),i=n(935),a=n.n(i)()(r());a.push([e.id,"*{box-sizing:border-box}:host{display:block;position:relative;overflow:hidden;--animation-dasharray:48;--stroke-dashoffset:96;--dasharray:4}:host,\n.root{width:100%;height:100%}:host([hidden]){display:none}.root{opacity:0}.root.ready{opacity:1}.root:focus{outline:none}@keyframes dashedAnimation{0%{stroke-dashoffset:var(--stroke-dashoffset)}to{stroke-dashoffset:0}}@keyframes solidAnimation{to{stroke-dashoffset:0}}.solid-animation{stroke-dasharray:var(--solid-length);stroke-dashoffset:var(--solid-length);animation:solidAnimation var(--time) linear infinite}.dashed-animation{animation:dashedAnimation var(--time) linear infinite}.decorator-area .area,\n.decorator-container .container{fill:rgba(119,141,195,0.1);stroke:none;stroke-width:0}.node,\n.decorator-text{overflow:visible}.cell.active .decorator-area .area,\n.cell.active .decorator-container .container,\n.cell:not(.read-only) .decorator-container .container:hover,\n.allowEdgeToArea .decorator-area .area:hover,\n.cell.active .line-active-bg{stroke:var(--palette-blue-5);stroke-dasharray:var(--dasharray);stroke-width:1}.container-active .decorator-container .container{stroke:var(--palette-blue-5);stroke-width:1}.cell:not(.read-only){-webkit-user-select:none;user-select:none}.resize-handle{cursor:nwse-resize;opacity:0}.resize-handle rect{fill:transparent;stroke:none}.resize-handle path{fill:none;stroke:var(--palette-gray-5);stroke-width:1.5}.cell.active .decorator-area .resize-handle,\n.decorator-area:hover .resize-handle,\n.decorator-container:hover .resize-handle{opacity:1}.connect-line{pointer-events:none}.connect-line:not(.connecting){display:none}.line.dashed{stroke-dasharray:var(--dasharray)}.cell.active .decorator-text .text-container{outline:1px dashed var(--palette-blue-5)}.decorator-text .text-container{width:max-content;padding:0.5em}.decorator-text .text:focus{outline:none}.cell.faded{opacity:0.3}.cell.container-active{opacity:1}.cell .node{pointer-events:none}.cell .node > *{position:fixed;pointer-events:auto}.degraded{pointer-events:bounding-box}.degraded circle{fill:rgb(119,141,195)}.degraded text{text-anchor:middle;fill:var(--antd-text-color)}.cell.active .degraded circle,\n.cell.active .degraded text,\n.degraded:hover circle,\n.degraded:hover text{fill:var(--color-brand)}.decorator-container{--defaultSize:24px}.decorator-container .text-container{display:flex;align-items:center;justify-content:center;padding:0.5em;text-align:center;font-size:16px;background-color:rgba(119,141,195,0.6);overflow:hidden}.decorator-container .horizontal{height:max-content;width:100%}:is(.decorator-container .horizontal) .text{min-height:var(--defaultSize)}.decorator-container .vertical{width:max-content;height:100%;writing-mode:vertical-lr;text-orientation:upright;letter-spacing:4px}:is(.decorator-container .vertical) .text{min-width:var(--defaultSize)}",""]);const l=a.toString()}}]);
2
- //# sourceMappingURL=1371.226b7bfe.js.map