@likec4/diagram 1.2.2 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/LikeC4Diagram.d.ts +1 -1
  2. package/dist/LikeC4Diagram.props.d.ts +21 -3
  3. package/dist/index.mjs +1335 -1240
  4. package/dist/state/DiagramContext.d.ts +2263 -175
  5. package/dist/state/diagramStore.d.ts +2272 -180
  6. package/dist/state/useDiagramStore.d.ts +2409 -321
  7. package/dist/style.css +123 -92
  8. package/dist/theme.css.d.ts +0 -1
  9. package/dist/ui/OptionsPanel.d.ts +3 -1
  10. package/dist/xyflow/XYFlow.d.ts +2 -1
  11. package/dist/xyflow/XYFlowInner.d.ts +1 -1
  12. package/dist/xyflow/const.d.ts +1 -1
  13. package/dist/xyflow/diagram-to-xyflow.d.ts +1 -1
  14. package/dist/xyflow/edges/RelationshipEdge.d.ts +3 -4
  15. package/dist/xyflow/edges/utils.d.ts +4 -2
  16. package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts +3 -1
  17. package/dist/xyflow/nodes/element/ElementNode.d.ts +1 -1
  18. package/dist/xyflow/nodes/element/index.d.ts +1 -1
  19. package/dist/xyflow/types.d.ts +2 -2
  20. package/dist/xyflow/utils.d.ts +3 -0
  21. package/package.json +15 -14
  22. package/src/LikeC4Diagram.css.ts +4 -4
  23. package/src/LikeC4Diagram.props.ts +23 -2
  24. package/src/LikeC4Diagram.tsx +79 -31
  25. package/src/globals.css.ts +0 -1
  26. package/src/mantine/theme.ts +1 -0
  27. package/src/state/DiagramContext.tsx +0 -1
  28. package/src/state/diagramStore.ts +177 -100
  29. package/src/theme.css.ts +0 -1
  30. package/src/ui/DiagramTitlePanel.tsx +3 -3
  31. package/src/ui/DynamicViewWalkthrough.css.ts +3 -2
  32. package/src/ui/DynamicViewWalkthrough.tsx +36 -17
  33. package/src/ui/OptionsPanel.tsx +12 -12
  34. package/src/ui/options/NodeOptions.tsx +16 -19
  35. package/src/xyflow/FitviewOnDiagramChange.tsx +15 -23
  36. package/src/xyflow/SelectEdgesOnNodeFocus.tsx +3 -6
  37. package/src/xyflow/SyncWithDiagram.tsx +21 -2
  38. package/src/xyflow/XYFlow.tsx +20 -23
  39. package/src/xyflow/XYFlowEvents.tsx +26 -8
  40. package/src/xyflow/XYFlowInner.tsx +5 -4
  41. package/src/xyflow/const.ts +1 -1
  42. package/src/xyflow/diagram-to-xyflow.ts +5 -31
  43. package/src/xyflow/edges/RelationshipEdge.tsx +158 -112
  44. package/src/xyflow/edges/edges.css.ts +32 -21
  45. package/src/xyflow/edges/utils.ts +5 -2
  46. package/src/xyflow/hooks/useLayoutConstraints.ts +17 -3
  47. package/src/xyflow/nodes/compound/CompoundNode.css.ts +40 -32
  48. package/src/xyflow/nodes/compound/CompoundNode.tsx +36 -26
  49. package/src/xyflow/nodes/element/ElementNode.tsx +20 -6
  50. package/src/xyflow/nodes/element/element.css.ts +15 -15
  51. package/src/xyflow/nodes/element/index.ts +1 -1
  52. package/src/xyflow/nodes/shared/NavigateToBtn.tsx +7 -3
  53. package/src/xyflow/types.ts +5 -2
  54. package/src/xyflow/utils.ts +48 -0
  55. package/dist/ui/index.d.ts +0 -2
  56. package/src/ui/index.ts +0 -3
@@ -1,8 +1,8 @@
1
- import { DiagramNode, DiagramView, Fqn, NonEmptyArray, ViewID } from '@likec4/core';
1
+ import { DiagramNode, DiagramView, Fqn, ViewID } from '@likec4/core';
2
2
  import { XYPosition } from '@xyflow/react';
3
3
  import { MouseEvent as ReactMouseEvent } from 'react';
4
4
  import { Exact, Simplify } from 'type-fest';
5
- import { Change, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
5
+ import { Changes, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
6
6
  import { XYStoreApi } from '../xyflow/hooks';
7
7
  import { XYFlowInstance, XYFlowNode } from '../xyflow/types';
8
8
 
@@ -16,6 +16,9 @@ export type DiagramStore = {
16
16
  pannable: boolean;
17
17
  nodesDraggable: boolean;
18
18
  nodesSelectable: boolean;
19
+ experimentalEdgeEditing: boolean;
20
+ viewSyncState: 'synced' | 'changed';
21
+ viewSyncDebounceTimeout: number | null;
19
22
  xyflow: XYFlowInstance;
20
23
  initialized: boolean;
21
24
  xyflowSynced: boolean;
@@ -31,12 +34,12 @@ export type DiagramStore = {
31
34
  fromView: ViewID;
32
35
  toView: ViewID;
33
36
  element: DiagramNode;
34
- elementCenterScreenPosition: XYPosition;
37
+ elementScreenPosition: XYPosition;
35
38
  positionCorrected: boolean;
36
39
  };
37
40
  viewportChanged: boolean;
38
41
  } & Required<LikeC4DiagramEventHandlers>;
39
- export type DiagramInitialState = Pick<DiagramStore, 'view' | 'readonly' | 'showElementLinks' | 'fitViewEnabled' | 'fitViewPadding' | 'zoomable' | 'pannable' | 'nodesDraggable' | 'nodesSelectable'> & LikeC4DiagramEventHandlers;
42
+ export type DiagramInitialState = Pick<DiagramStore, 'view' | 'readonly' | 'showElementLinks' | 'fitViewEnabled' | 'fitViewPadding' | 'zoomable' | 'pannable' | 'nodesDraggable' | 'nodesSelectable' | 'experimentalEdgeEditing'> & LikeC4DiagramEventHandlers;
40
43
  interface DiagramStoreActions {
41
44
  isDynamicView: () => boolean;
42
45
  updateView: (view: DiagramView) => void;
@@ -47,7 +50,8 @@ interface DiagramStoreActions {
47
50
  setLastClickedEdge: (edgeId: string | null) => void;
48
51
  resetLastClicked: () => void;
49
52
  getElement(id: Fqn): DiagramNode | null;
50
- triggerOnChange: (changes: NonEmptyArray<Change>) => void;
53
+ triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
54
+ triggerSaveManualLayout: (xystore: XYStoreApi) => void;
51
55
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
52
56
  fitDiagram: (xyStore: XYStoreApi) => void;
53
57
  nextDynamicStep: (increment?: number) => void;
@@ -65,6 +69,9 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
65
69
  pannable: boolean;
66
70
  nodesDraggable: boolean;
67
71
  nodesSelectable: boolean;
72
+ experimentalEdgeEditing: boolean;
73
+ viewSyncState: "synced" | "changed";
74
+ viewSyncDebounceTimeout: number | null;
68
75
  xyflow: XYFlowInstance;
69
76
  initialized: boolean;
70
77
  xyflowSynced: boolean;
@@ -80,7 +87,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
80
87
  fromView: ViewID;
81
88
  toView: ViewID;
82
89
  element: DiagramNode;
83
- elementCenterScreenPosition: XYPosition;
90
+ elementScreenPosition: XYPosition;
84
91
  positionCorrected: boolean;
85
92
  } | null;
86
93
  viewportChanged: boolean;
@@ -102,7 +109,236 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
102
109
  setLastClickedEdge: (edgeId: string | null) => void;
103
110
  resetLastClicked: () => void;
104
111
  getElement: (id: Fqn) => DiagramNode | null;
105
- triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
112
+ triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
113
+ triggerSaveManualLayout: (xystore: {
114
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
115
+ source: string;
116
+ target: string;
117
+ sourceHandle?: string | null;
118
+ targetHandle?: string | null;
119
+ animated?: boolean;
120
+ hidden?: boolean;
121
+ deletable?: boolean;
122
+ selectable?: boolean;
123
+ selected?: boolean;
124
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
125
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
126
+ zIndex?: number;
127
+ ariaLabel?: string;
128
+ interactionWidth?: number;
129
+ label?: import('react').ReactNode;
130
+ labelStyle?: import('react').CSSProperties;
131
+ labelShowBg?: boolean;
132
+ labelBgStyle?: import('react').CSSProperties;
133
+ labelBgPadding?: [number, number];
134
+ labelBgBorderRadius?: number;
135
+ style?: import('react').CSSProperties;
136
+ className?: string;
137
+ updatable?: import('@xyflow/react').EdgeUpdatable;
138
+ focusable?: boolean;
139
+ data: import('../xyflow/types').RelationshipData;
140
+ readonly id: string;
141
+ readonly type: "relationship";
142
+ }>;
143
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
144
+ source: string;
145
+ target: string;
146
+ sourceHandle?: string | null;
147
+ targetHandle?: string | null;
148
+ animated?: boolean;
149
+ hidden?: boolean;
150
+ deletable?: boolean;
151
+ selectable?: boolean;
152
+ selected?: boolean;
153
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
154
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
155
+ zIndex?: number;
156
+ ariaLabel?: string;
157
+ interactionWidth?: number;
158
+ label?: import('react').ReactNode;
159
+ labelStyle?: import('react').CSSProperties;
160
+ labelShowBg?: boolean;
161
+ labelBgStyle?: import('react').CSSProperties;
162
+ labelBgPadding?: [number, number];
163
+ labelBgBorderRadius?: number;
164
+ style?: import('react').CSSProperties;
165
+ className?: string;
166
+ updatable?: import('@xyflow/react').EdgeUpdatable;
167
+ focusable?: boolean;
168
+ data: import('../xyflow/types').RelationshipData;
169
+ readonly id: string;
170
+ readonly type: "relationship";
171
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
172
+ source: string;
173
+ target: string;
174
+ sourceHandle?: string | null;
175
+ targetHandle?: string | null;
176
+ animated?: boolean;
177
+ hidden?: boolean;
178
+ deletable?: boolean;
179
+ selectable?: boolean;
180
+ selected?: boolean;
181
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
182
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
183
+ zIndex?: number;
184
+ ariaLabel?: string;
185
+ interactionWidth?: number;
186
+ label?: import('react').ReactNode;
187
+ labelStyle?: import('react').CSSProperties;
188
+ labelShowBg?: boolean;
189
+ labelBgStyle?: import('react').CSSProperties;
190
+ labelBgPadding?: [number, number];
191
+ labelBgBorderRadius?: number;
192
+ style?: import('react').CSSProperties;
193
+ className?: string;
194
+ updatable?: import('@xyflow/react').EdgeUpdatable;
195
+ focusable?: boolean;
196
+ data: import('../xyflow/types').RelationshipData;
197
+ readonly id: string;
198
+ readonly type: "relationship";
199
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
200
+ source: string;
201
+ target: string;
202
+ sourceHandle?: string | null;
203
+ targetHandle?: string | null;
204
+ animated?: boolean;
205
+ hidden?: boolean;
206
+ deletable?: boolean;
207
+ selectable?: boolean;
208
+ selected?: boolean;
209
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
210
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
211
+ zIndex?: number;
212
+ ariaLabel?: string;
213
+ interactionWidth?: number;
214
+ label?: import('react').ReactNode;
215
+ labelStyle?: import('react').CSSProperties;
216
+ labelShowBg?: boolean;
217
+ labelBgStyle?: import('react').CSSProperties;
218
+ labelBgPadding?: [number, number];
219
+ labelBgBorderRadius?: number;
220
+ style?: import('react').CSSProperties;
221
+ className?: string;
222
+ updatable?: import('@xyflow/react').EdgeUpdatable;
223
+ focusable?: boolean;
224
+ data: import('../xyflow/types').RelationshipData;
225
+ readonly id: string;
226
+ readonly type: "relationship";
227
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
228
+ source: string;
229
+ target: string;
230
+ sourceHandle?: string | null;
231
+ targetHandle?: string | null;
232
+ animated?: boolean;
233
+ hidden?: boolean;
234
+ deletable?: boolean;
235
+ selectable?: boolean;
236
+ selected?: boolean;
237
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
238
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
239
+ zIndex?: number;
240
+ ariaLabel?: string;
241
+ interactionWidth?: number;
242
+ label?: import('react').ReactNode;
243
+ labelStyle?: import('react').CSSProperties;
244
+ labelShowBg?: boolean;
245
+ labelBgStyle?: import('react').CSSProperties;
246
+ labelBgPadding?: [number, number];
247
+ labelBgBorderRadius?: number;
248
+ style?: import('react').CSSProperties;
249
+ className?: string;
250
+ updatable?: import('@xyflow/react').EdgeUpdatable;
251
+ focusable?: boolean;
252
+ data: import('../xyflow/types').RelationshipData;
253
+ readonly id: string;
254
+ readonly type: "relationship";
255
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
256
+ source: string;
257
+ target: string;
258
+ sourceHandle?: string | null;
259
+ targetHandle?: string | null;
260
+ animated?: boolean;
261
+ hidden?: boolean;
262
+ deletable?: boolean;
263
+ selectable?: boolean;
264
+ selected?: boolean;
265
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
266
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
267
+ zIndex?: number;
268
+ ariaLabel?: string;
269
+ interactionWidth?: number;
270
+ label?: import('react').ReactNode;
271
+ labelStyle?: import('react').CSSProperties;
272
+ labelShowBg?: boolean;
273
+ labelBgStyle?: import('react').CSSProperties;
274
+ labelBgPadding?: [number, number];
275
+ labelBgBorderRadius?: number;
276
+ style?: import('react').CSSProperties;
277
+ className?: string;
278
+ updatable?: import('@xyflow/react').EdgeUpdatable;
279
+ focusable?: boolean;
280
+ data: import('../xyflow/types').RelationshipData;
281
+ readonly id: string;
282
+ readonly type: "relationship";
283
+ }>>), replace?: boolean | undefined) => void;
284
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
285
+ source: string;
286
+ target: string;
287
+ sourceHandle?: string | null;
288
+ targetHandle?: string | null;
289
+ animated?: boolean;
290
+ hidden?: boolean;
291
+ deletable?: boolean;
292
+ selectable?: boolean;
293
+ selected?: boolean;
294
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
295
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
296
+ zIndex?: number;
297
+ ariaLabel?: string;
298
+ interactionWidth?: number;
299
+ label?: import('react').ReactNode;
300
+ labelStyle?: import('react').CSSProperties;
301
+ labelShowBg?: boolean;
302
+ labelBgStyle?: import('react').CSSProperties;
303
+ labelBgPadding?: [number, number];
304
+ labelBgBorderRadius?: number;
305
+ style?: import('react').CSSProperties;
306
+ className?: string;
307
+ updatable?: import('@xyflow/react').EdgeUpdatable;
308
+ focusable?: boolean;
309
+ data: import('../xyflow/types').RelationshipData;
310
+ readonly id: string;
311
+ readonly type: "relationship";
312
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
313
+ source: string;
314
+ target: string;
315
+ sourceHandle?: string | null;
316
+ targetHandle?: string | null;
317
+ animated?: boolean;
318
+ hidden?: boolean;
319
+ deletable?: boolean;
320
+ selectable?: boolean;
321
+ selected?: boolean;
322
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
323
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
324
+ zIndex?: number;
325
+ ariaLabel?: string;
326
+ interactionWidth?: number;
327
+ label?: import('react').ReactNode;
328
+ labelStyle?: import('react').CSSProperties;
329
+ labelShowBg?: boolean;
330
+ labelBgStyle?: import('react').CSSProperties;
331
+ labelBgPadding?: [number, number];
332
+ labelBgBorderRadius?: number;
333
+ style?: import('react').CSSProperties;
334
+ className?: string;
335
+ updatable?: import('@xyflow/react').EdgeUpdatable;
336
+ focusable?: boolean;
337
+ data: import('../xyflow/types').RelationshipData;
338
+ readonly id: string;
339
+ readonly type: "relationship";
340
+ }>) => void) => () => void;
341
+ }) => void;
106
342
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
107
343
  fitDiagram: (xyStore: {
108
344
  getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
@@ -347,6 +583,9 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
347
583
  pannable: boolean;
348
584
  nodesDraggable: boolean;
349
585
  nodesSelectable: boolean;
586
+ experimentalEdgeEditing: boolean;
587
+ viewSyncState: "synced" | "changed";
588
+ viewSyncDebounceTimeout: number | null;
350
589
  xyflow: XYFlowInstance;
351
590
  initialized: boolean;
352
591
  xyflowSynced: boolean;
@@ -362,7 +601,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
362
601
  fromView: ViewID;
363
602
  toView: ViewID;
364
603
  element: DiagramNode;
365
- elementCenterScreenPosition: XYPosition;
604
+ elementScreenPosition: XYPosition;
366
605
  positionCorrected: boolean;
367
606
  } | null;
368
607
  viewportChanged: boolean;
@@ -384,9 +623,8 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
384
623
  setLastClickedEdge: (edgeId: string | null) => void;
385
624
  resetLastClicked: () => void;
386
625
  getElement: (id: Fqn) => DiagramNode | null;
387
- triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
388
- triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
389
- fitDiagram: (xyStore: {
626
+ triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
627
+ triggerSaveManualLayout: (xystore: {
390
628
  getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
391
629
  source: string;
392
630
  target: string;
@@ -615,56 +853,6 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
615
853
  readonly type: "relationship";
616
854
  }>) => void) => () => void;
617
855
  }) => void;
618
- nextDynamicStep: (increment?: number | undefined) => void;
619
- stopDynamicView: () => void;
620
- }, previousSelectedState: {
621
- view: DiagramView;
622
- readonly: boolean;
623
- showElementLinks: boolean;
624
- fitViewEnabled: boolean;
625
- fitViewPadding: number;
626
- zoomable: boolean;
627
- pannable: boolean;
628
- nodesDraggable: boolean;
629
- nodesSelectable: boolean;
630
- xyflow: XYFlowInstance;
631
- initialized: boolean;
632
- xyflowSynced: boolean;
633
- activeDynamicViewStep: number | null;
634
- lastClickedNodeId: string | null;
635
- lastClickedEdgeId: string | null;
636
- focusedNodeId: string | null;
637
- hoveredNodeId: string | null;
638
- hoveredEdgeId: string | null;
639
- dimmed: ReadonlySet<string>;
640
- previousViews: DiagramView[];
641
- lastOnNavigate: {
642
- fromView: ViewID;
643
- toView: ViewID;
644
- element: DiagramNode;
645
- elementCenterScreenPosition: XYPosition;
646
- positionCorrected: boolean;
647
- } | null;
648
- viewportChanged: boolean;
649
- onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
650
- onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
651
- onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
652
- onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
653
- onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
654
- onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
655
- onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
656
- onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
657
- onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
658
- isDynamicView: () => boolean;
659
- updateView: (view: DiagramView) => void;
660
- focusOnNode: (nodeId: string) => void;
661
- setHoveredNode: (nodeId: string | null) => void;
662
- setHoveredEdge: (edgeId: string | null) => void;
663
- setLastClickedNode: (nodeId: string | null) => void;
664
- setLastClickedEdge: (edgeId: string | null) => void;
665
- resetLastClicked: () => void;
666
- getElement: (id: Fqn) => DiagramNode | null;
667
- triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
668
856
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
669
857
  fitDiagram: (xyStore: {
670
858
  getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
@@ -897,8 +1085,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
897
1085
  }) => void;
898
1086
  nextDynamicStep: (increment?: number | undefined) => void;
899
1087
  stopDynamicView: () => void;
900
- }) => void): () => void;
901
- <U>(selector: (state: {
1088
+ }, previousSelectedState: {
902
1089
  view: DiagramView;
903
1090
  readonly: boolean;
904
1091
  showElementLinks: boolean;
@@ -908,6 +1095,9 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
908
1095
  pannable: boolean;
909
1096
  nodesDraggable: boolean;
910
1097
  nodesSelectable: boolean;
1098
+ experimentalEdgeEditing: boolean;
1099
+ viewSyncState: "synced" | "changed";
1100
+ viewSyncDebounceTimeout: number | null;
911
1101
  xyflow: XYFlowInstance;
912
1102
  initialized: boolean;
913
1103
  xyflowSynced: boolean;
@@ -923,7 +1113,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
923
1113
  fromView: ViewID;
924
1114
  toView: ViewID;
925
1115
  element: DiagramNode;
926
- elementCenterScreenPosition: XYPosition;
1116
+ elementScreenPosition: XYPosition;
927
1117
  positionCorrected: boolean;
928
1118
  } | null;
929
1119
  viewportChanged: boolean;
@@ -945,7 +1135,236 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
945
1135
  setLastClickedEdge: (edgeId: string | null) => void;
946
1136
  resetLastClicked: () => void;
947
1137
  getElement: (id: Fqn) => DiagramNode | null;
948
- triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
1138
+ triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
1139
+ triggerSaveManualLayout: (xystore: {
1140
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
1141
+ source: string;
1142
+ target: string;
1143
+ sourceHandle?: string | null;
1144
+ targetHandle?: string | null;
1145
+ animated?: boolean;
1146
+ hidden?: boolean;
1147
+ deletable?: boolean;
1148
+ selectable?: boolean;
1149
+ selected?: boolean;
1150
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1151
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1152
+ zIndex?: number;
1153
+ ariaLabel?: string;
1154
+ interactionWidth?: number;
1155
+ label?: import('react').ReactNode;
1156
+ labelStyle?: import('react').CSSProperties;
1157
+ labelShowBg?: boolean;
1158
+ labelBgStyle?: import('react').CSSProperties;
1159
+ labelBgPadding?: [number, number];
1160
+ labelBgBorderRadius?: number;
1161
+ style?: import('react').CSSProperties;
1162
+ className?: string;
1163
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1164
+ focusable?: boolean;
1165
+ data: import('../xyflow/types').RelationshipData;
1166
+ readonly id: string;
1167
+ readonly type: "relationship";
1168
+ }>;
1169
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1170
+ source: string;
1171
+ target: string;
1172
+ sourceHandle?: string | null;
1173
+ targetHandle?: string | null;
1174
+ animated?: boolean;
1175
+ hidden?: boolean;
1176
+ deletable?: boolean;
1177
+ selectable?: boolean;
1178
+ selected?: boolean;
1179
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1180
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1181
+ zIndex?: number;
1182
+ ariaLabel?: string;
1183
+ interactionWidth?: number;
1184
+ label?: import('react').ReactNode;
1185
+ labelStyle?: import('react').CSSProperties;
1186
+ labelShowBg?: boolean;
1187
+ labelBgStyle?: import('react').CSSProperties;
1188
+ labelBgPadding?: [number, number];
1189
+ labelBgBorderRadius?: number;
1190
+ style?: import('react').CSSProperties;
1191
+ className?: string;
1192
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1193
+ focusable?: boolean;
1194
+ data: import('../xyflow/types').RelationshipData;
1195
+ readonly id: string;
1196
+ readonly type: "relationship";
1197
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
1198
+ source: string;
1199
+ target: string;
1200
+ sourceHandle?: string | null;
1201
+ targetHandle?: string | null;
1202
+ animated?: boolean;
1203
+ hidden?: boolean;
1204
+ deletable?: boolean;
1205
+ selectable?: boolean;
1206
+ selected?: boolean;
1207
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1208
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1209
+ zIndex?: number;
1210
+ ariaLabel?: string;
1211
+ interactionWidth?: number;
1212
+ label?: import('react').ReactNode;
1213
+ labelStyle?: import('react').CSSProperties;
1214
+ labelShowBg?: boolean;
1215
+ labelBgStyle?: import('react').CSSProperties;
1216
+ labelBgPadding?: [number, number];
1217
+ labelBgBorderRadius?: number;
1218
+ style?: import('react').CSSProperties;
1219
+ className?: string;
1220
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1221
+ focusable?: boolean;
1222
+ data: import('../xyflow/types').RelationshipData;
1223
+ readonly id: string;
1224
+ readonly type: "relationship";
1225
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1226
+ source: string;
1227
+ target: string;
1228
+ sourceHandle?: string | null;
1229
+ targetHandle?: string | null;
1230
+ animated?: boolean;
1231
+ hidden?: boolean;
1232
+ deletable?: boolean;
1233
+ selectable?: boolean;
1234
+ selected?: boolean;
1235
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1236
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1237
+ zIndex?: number;
1238
+ ariaLabel?: string;
1239
+ interactionWidth?: number;
1240
+ label?: import('react').ReactNode;
1241
+ labelStyle?: import('react').CSSProperties;
1242
+ labelShowBg?: boolean;
1243
+ labelBgStyle?: import('react').CSSProperties;
1244
+ labelBgPadding?: [number, number];
1245
+ labelBgBorderRadius?: number;
1246
+ style?: import('react').CSSProperties;
1247
+ className?: string;
1248
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1249
+ focusable?: boolean;
1250
+ data: import('../xyflow/types').RelationshipData;
1251
+ readonly id: string;
1252
+ readonly type: "relationship";
1253
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
1254
+ source: string;
1255
+ target: string;
1256
+ sourceHandle?: string | null;
1257
+ targetHandle?: string | null;
1258
+ animated?: boolean;
1259
+ hidden?: boolean;
1260
+ deletable?: boolean;
1261
+ selectable?: boolean;
1262
+ selected?: boolean;
1263
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1264
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1265
+ zIndex?: number;
1266
+ ariaLabel?: string;
1267
+ interactionWidth?: number;
1268
+ label?: import('react').ReactNode;
1269
+ labelStyle?: import('react').CSSProperties;
1270
+ labelShowBg?: boolean;
1271
+ labelBgStyle?: import('react').CSSProperties;
1272
+ labelBgPadding?: [number, number];
1273
+ labelBgBorderRadius?: number;
1274
+ style?: import('react').CSSProperties;
1275
+ className?: string;
1276
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1277
+ focusable?: boolean;
1278
+ data: import('../xyflow/types').RelationshipData;
1279
+ readonly id: string;
1280
+ readonly type: "relationship";
1281
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
1282
+ source: string;
1283
+ target: string;
1284
+ sourceHandle?: string | null;
1285
+ targetHandle?: string | null;
1286
+ animated?: boolean;
1287
+ hidden?: boolean;
1288
+ deletable?: boolean;
1289
+ selectable?: boolean;
1290
+ selected?: boolean;
1291
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1292
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1293
+ zIndex?: number;
1294
+ ariaLabel?: string;
1295
+ interactionWidth?: number;
1296
+ label?: import('react').ReactNode;
1297
+ labelStyle?: import('react').CSSProperties;
1298
+ labelShowBg?: boolean;
1299
+ labelBgStyle?: import('react').CSSProperties;
1300
+ labelBgPadding?: [number, number];
1301
+ labelBgBorderRadius?: number;
1302
+ style?: import('react').CSSProperties;
1303
+ className?: string;
1304
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1305
+ focusable?: boolean;
1306
+ data: import('../xyflow/types').RelationshipData;
1307
+ readonly id: string;
1308
+ readonly type: "relationship";
1309
+ }>>), replace?: boolean | undefined) => void;
1310
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1311
+ source: string;
1312
+ target: string;
1313
+ sourceHandle?: string | null;
1314
+ targetHandle?: string | null;
1315
+ animated?: boolean;
1316
+ hidden?: boolean;
1317
+ deletable?: boolean;
1318
+ selectable?: boolean;
1319
+ selected?: boolean;
1320
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1321
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1322
+ zIndex?: number;
1323
+ ariaLabel?: string;
1324
+ interactionWidth?: number;
1325
+ label?: import('react').ReactNode;
1326
+ labelStyle?: import('react').CSSProperties;
1327
+ labelShowBg?: boolean;
1328
+ labelBgStyle?: import('react').CSSProperties;
1329
+ labelBgPadding?: [number, number];
1330
+ labelBgBorderRadius?: number;
1331
+ style?: import('react').CSSProperties;
1332
+ className?: string;
1333
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1334
+ focusable?: boolean;
1335
+ data: import('../xyflow/types').RelationshipData;
1336
+ readonly id: string;
1337
+ readonly type: "relationship";
1338
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1339
+ source: string;
1340
+ target: string;
1341
+ sourceHandle?: string | null;
1342
+ targetHandle?: string | null;
1343
+ animated?: boolean;
1344
+ hidden?: boolean;
1345
+ deletable?: boolean;
1346
+ selectable?: boolean;
1347
+ selected?: boolean;
1348
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1349
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1350
+ zIndex?: number;
1351
+ ariaLabel?: string;
1352
+ interactionWidth?: number;
1353
+ label?: import('react').ReactNode;
1354
+ labelStyle?: import('react').CSSProperties;
1355
+ labelShowBg?: boolean;
1356
+ labelBgStyle?: import('react').CSSProperties;
1357
+ labelBgPadding?: [number, number];
1358
+ labelBgBorderRadius?: number;
1359
+ style?: import('react').CSSProperties;
1360
+ className?: string;
1361
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1362
+ focusable?: boolean;
1363
+ data: import('../xyflow/types').RelationshipData;
1364
+ readonly id: string;
1365
+ readonly type: "relationship";
1366
+ }>) => void) => () => void;
1367
+ }) => void;
949
1368
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
950
1369
  fitDiagram: (xyStore: {
951
1370
  getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
@@ -1178,9 +1597,522 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
1178
1597
  }) => void;
1179
1598
  nextDynamicStep: (increment?: number | undefined) => void;
1180
1599
  stopDynamicView: () => void;
1181
- }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
1182
- equalityFn?: (a: U, b: U) => boolean;
1183
- fireImmediately?: boolean;
1600
+ }) => void): () => void;
1601
+ <U>(selector: (state: {
1602
+ view: DiagramView;
1603
+ readonly: boolean;
1604
+ showElementLinks: boolean;
1605
+ fitViewEnabled: boolean;
1606
+ fitViewPadding: number;
1607
+ zoomable: boolean;
1608
+ pannable: boolean;
1609
+ nodesDraggable: boolean;
1610
+ nodesSelectable: boolean;
1611
+ experimentalEdgeEditing: boolean;
1612
+ viewSyncState: "synced" | "changed";
1613
+ viewSyncDebounceTimeout: number | null;
1614
+ xyflow: XYFlowInstance;
1615
+ initialized: boolean;
1616
+ xyflowSynced: boolean;
1617
+ activeDynamicViewStep: number | null;
1618
+ lastClickedNodeId: string | null;
1619
+ lastClickedEdgeId: string | null;
1620
+ focusedNodeId: string | null;
1621
+ hoveredNodeId: string | null;
1622
+ hoveredEdgeId: string | null;
1623
+ dimmed: ReadonlySet<string>;
1624
+ previousViews: DiagramView[];
1625
+ lastOnNavigate: {
1626
+ fromView: ViewID;
1627
+ toView: ViewID;
1628
+ element: DiagramNode;
1629
+ elementScreenPosition: XYPosition;
1630
+ positionCorrected: boolean;
1631
+ } | null;
1632
+ viewportChanged: boolean;
1633
+ onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
1634
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
1635
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
1636
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
1637
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
1638
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
1639
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
1640
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
1641
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
1642
+ isDynamicView: () => boolean;
1643
+ updateView: (view: DiagramView) => void;
1644
+ focusOnNode: (nodeId: string) => void;
1645
+ setHoveredNode: (nodeId: string | null) => void;
1646
+ setHoveredEdge: (edgeId: string | null) => void;
1647
+ setLastClickedNode: (nodeId: string | null) => void;
1648
+ setLastClickedEdge: (edgeId: string | null) => void;
1649
+ resetLastClicked: () => void;
1650
+ getElement: (id: Fqn) => DiagramNode | null;
1651
+ triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
1652
+ triggerSaveManualLayout: (xystore: {
1653
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
1654
+ source: string;
1655
+ target: string;
1656
+ sourceHandle?: string | null;
1657
+ targetHandle?: string | null;
1658
+ animated?: boolean;
1659
+ hidden?: boolean;
1660
+ deletable?: boolean;
1661
+ selectable?: boolean;
1662
+ selected?: boolean;
1663
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1664
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1665
+ zIndex?: number;
1666
+ ariaLabel?: string;
1667
+ interactionWidth?: number;
1668
+ label?: import('react').ReactNode;
1669
+ labelStyle?: import('react').CSSProperties;
1670
+ labelShowBg?: boolean;
1671
+ labelBgStyle?: import('react').CSSProperties;
1672
+ labelBgPadding?: [number, number];
1673
+ labelBgBorderRadius?: number;
1674
+ style?: import('react').CSSProperties;
1675
+ className?: string;
1676
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1677
+ focusable?: boolean;
1678
+ data: import('../xyflow/types').RelationshipData;
1679
+ readonly id: string;
1680
+ readonly type: "relationship";
1681
+ }>;
1682
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1683
+ source: string;
1684
+ target: string;
1685
+ sourceHandle?: string | null;
1686
+ targetHandle?: string | null;
1687
+ animated?: boolean;
1688
+ hidden?: boolean;
1689
+ deletable?: boolean;
1690
+ selectable?: boolean;
1691
+ selected?: boolean;
1692
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1693
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1694
+ zIndex?: number;
1695
+ ariaLabel?: string;
1696
+ interactionWidth?: number;
1697
+ label?: import('react').ReactNode;
1698
+ labelStyle?: import('react').CSSProperties;
1699
+ labelShowBg?: boolean;
1700
+ labelBgStyle?: import('react').CSSProperties;
1701
+ labelBgPadding?: [number, number];
1702
+ labelBgBorderRadius?: number;
1703
+ style?: import('react').CSSProperties;
1704
+ className?: string;
1705
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1706
+ focusable?: boolean;
1707
+ data: import('../xyflow/types').RelationshipData;
1708
+ readonly id: string;
1709
+ readonly type: "relationship";
1710
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
1711
+ source: string;
1712
+ target: string;
1713
+ sourceHandle?: string | null;
1714
+ targetHandle?: string | null;
1715
+ animated?: boolean;
1716
+ hidden?: boolean;
1717
+ deletable?: boolean;
1718
+ selectable?: boolean;
1719
+ selected?: boolean;
1720
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1721
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1722
+ zIndex?: number;
1723
+ ariaLabel?: string;
1724
+ interactionWidth?: number;
1725
+ label?: import('react').ReactNode;
1726
+ labelStyle?: import('react').CSSProperties;
1727
+ labelShowBg?: boolean;
1728
+ labelBgStyle?: import('react').CSSProperties;
1729
+ labelBgPadding?: [number, number];
1730
+ labelBgBorderRadius?: number;
1731
+ style?: import('react').CSSProperties;
1732
+ className?: string;
1733
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1734
+ focusable?: boolean;
1735
+ data: import('../xyflow/types').RelationshipData;
1736
+ readonly id: string;
1737
+ readonly type: "relationship";
1738
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1739
+ source: string;
1740
+ target: string;
1741
+ sourceHandle?: string | null;
1742
+ targetHandle?: string | null;
1743
+ animated?: boolean;
1744
+ hidden?: boolean;
1745
+ deletable?: boolean;
1746
+ selectable?: boolean;
1747
+ selected?: boolean;
1748
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1749
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1750
+ zIndex?: number;
1751
+ ariaLabel?: string;
1752
+ interactionWidth?: number;
1753
+ label?: import('react').ReactNode;
1754
+ labelStyle?: import('react').CSSProperties;
1755
+ labelShowBg?: boolean;
1756
+ labelBgStyle?: import('react').CSSProperties;
1757
+ labelBgPadding?: [number, number];
1758
+ labelBgBorderRadius?: number;
1759
+ style?: import('react').CSSProperties;
1760
+ className?: string;
1761
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1762
+ focusable?: boolean;
1763
+ data: import('../xyflow/types').RelationshipData;
1764
+ readonly id: string;
1765
+ readonly type: "relationship";
1766
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
1767
+ source: string;
1768
+ target: string;
1769
+ sourceHandle?: string | null;
1770
+ targetHandle?: string | null;
1771
+ animated?: boolean;
1772
+ hidden?: boolean;
1773
+ deletable?: boolean;
1774
+ selectable?: boolean;
1775
+ selected?: boolean;
1776
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1777
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1778
+ zIndex?: number;
1779
+ ariaLabel?: string;
1780
+ interactionWidth?: number;
1781
+ label?: import('react').ReactNode;
1782
+ labelStyle?: import('react').CSSProperties;
1783
+ labelShowBg?: boolean;
1784
+ labelBgStyle?: import('react').CSSProperties;
1785
+ labelBgPadding?: [number, number];
1786
+ labelBgBorderRadius?: number;
1787
+ style?: import('react').CSSProperties;
1788
+ className?: string;
1789
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1790
+ focusable?: boolean;
1791
+ data: import('../xyflow/types').RelationshipData;
1792
+ readonly id: string;
1793
+ readonly type: "relationship";
1794
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
1795
+ source: string;
1796
+ target: string;
1797
+ sourceHandle?: string | null;
1798
+ targetHandle?: string | null;
1799
+ animated?: boolean;
1800
+ hidden?: boolean;
1801
+ deletable?: boolean;
1802
+ selectable?: boolean;
1803
+ selected?: boolean;
1804
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1805
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1806
+ zIndex?: number;
1807
+ ariaLabel?: string;
1808
+ interactionWidth?: number;
1809
+ label?: import('react').ReactNode;
1810
+ labelStyle?: import('react').CSSProperties;
1811
+ labelShowBg?: boolean;
1812
+ labelBgStyle?: import('react').CSSProperties;
1813
+ labelBgPadding?: [number, number];
1814
+ labelBgBorderRadius?: number;
1815
+ style?: import('react').CSSProperties;
1816
+ className?: string;
1817
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1818
+ focusable?: boolean;
1819
+ data: import('../xyflow/types').RelationshipData;
1820
+ readonly id: string;
1821
+ readonly type: "relationship";
1822
+ }>>), replace?: boolean | undefined) => void;
1823
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1824
+ source: string;
1825
+ target: string;
1826
+ sourceHandle?: string | null;
1827
+ targetHandle?: string | null;
1828
+ animated?: boolean;
1829
+ hidden?: boolean;
1830
+ deletable?: boolean;
1831
+ selectable?: boolean;
1832
+ selected?: boolean;
1833
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1834
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1835
+ zIndex?: number;
1836
+ ariaLabel?: string;
1837
+ interactionWidth?: number;
1838
+ label?: import('react').ReactNode;
1839
+ labelStyle?: import('react').CSSProperties;
1840
+ labelShowBg?: boolean;
1841
+ labelBgStyle?: import('react').CSSProperties;
1842
+ labelBgPadding?: [number, number];
1843
+ labelBgBorderRadius?: number;
1844
+ style?: import('react').CSSProperties;
1845
+ className?: string;
1846
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1847
+ focusable?: boolean;
1848
+ data: import('../xyflow/types').RelationshipData;
1849
+ readonly id: string;
1850
+ readonly type: "relationship";
1851
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1852
+ source: string;
1853
+ target: string;
1854
+ sourceHandle?: string | null;
1855
+ targetHandle?: string | null;
1856
+ animated?: boolean;
1857
+ hidden?: boolean;
1858
+ deletable?: boolean;
1859
+ selectable?: boolean;
1860
+ selected?: boolean;
1861
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1862
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1863
+ zIndex?: number;
1864
+ ariaLabel?: string;
1865
+ interactionWidth?: number;
1866
+ label?: import('react').ReactNode;
1867
+ labelStyle?: import('react').CSSProperties;
1868
+ labelShowBg?: boolean;
1869
+ labelBgStyle?: import('react').CSSProperties;
1870
+ labelBgPadding?: [number, number];
1871
+ labelBgBorderRadius?: number;
1872
+ style?: import('react').CSSProperties;
1873
+ className?: string;
1874
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1875
+ focusable?: boolean;
1876
+ data: import('../xyflow/types').RelationshipData;
1877
+ readonly id: string;
1878
+ readonly type: "relationship";
1879
+ }>) => void) => () => void;
1880
+ }) => void;
1881
+ triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
1882
+ fitDiagram: (xyStore: {
1883
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
1884
+ source: string;
1885
+ target: string;
1886
+ sourceHandle?: string | null;
1887
+ targetHandle?: string | null;
1888
+ animated?: boolean;
1889
+ hidden?: boolean;
1890
+ deletable?: boolean;
1891
+ selectable?: boolean;
1892
+ selected?: boolean;
1893
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1894
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1895
+ zIndex?: number;
1896
+ ariaLabel?: string;
1897
+ interactionWidth?: number;
1898
+ label?: import('react').ReactNode;
1899
+ labelStyle?: import('react').CSSProperties;
1900
+ labelShowBg?: boolean;
1901
+ labelBgStyle?: import('react').CSSProperties;
1902
+ labelBgPadding?: [number, number];
1903
+ labelBgBorderRadius?: number;
1904
+ style?: import('react').CSSProperties;
1905
+ className?: string;
1906
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1907
+ focusable?: boolean;
1908
+ data: import('../xyflow/types').RelationshipData;
1909
+ readonly id: string;
1910
+ readonly type: "relationship";
1911
+ }>;
1912
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1913
+ source: string;
1914
+ target: string;
1915
+ sourceHandle?: string | null;
1916
+ targetHandle?: string | null;
1917
+ animated?: boolean;
1918
+ hidden?: boolean;
1919
+ deletable?: boolean;
1920
+ selectable?: boolean;
1921
+ selected?: boolean;
1922
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1923
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1924
+ zIndex?: number;
1925
+ ariaLabel?: string;
1926
+ interactionWidth?: number;
1927
+ label?: import('react').ReactNode;
1928
+ labelStyle?: import('react').CSSProperties;
1929
+ labelShowBg?: boolean;
1930
+ labelBgStyle?: import('react').CSSProperties;
1931
+ labelBgPadding?: [number, number];
1932
+ labelBgBorderRadius?: number;
1933
+ style?: import('react').CSSProperties;
1934
+ className?: string;
1935
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1936
+ focusable?: boolean;
1937
+ data: import('../xyflow/types').RelationshipData;
1938
+ readonly id: string;
1939
+ readonly type: "relationship";
1940
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
1941
+ source: string;
1942
+ target: string;
1943
+ sourceHandle?: string | null;
1944
+ targetHandle?: string | null;
1945
+ animated?: boolean;
1946
+ hidden?: boolean;
1947
+ deletable?: boolean;
1948
+ selectable?: boolean;
1949
+ selected?: boolean;
1950
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1951
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1952
+ zIndex?: number;
1953
+ ariaLabel?: string;
1954
+ interactionWidth?: number;
1955
+ label?: import('react').ReactNode;
1956
+ labelStyle?: import('react').CSSProperties;
1957
+ labelShowBg?: boolean;
1958
+ labelBgStyle?: import('react').CSSProperties;
1959
+ labelBgPadding?: [number, number];
1960
+ labelBgBorderRadius?: number;
1961
+ style?: import('react').CSSProperties;
1962
+ className?: string;
1963
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1964
+ focusable?: boolean;
1965
+ data: import('../xyflow/types').RelationshipData;
1966
+ readonly id: string;
1967
+ readonly type: "relationship";
1968
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1969
+ source: string;
1970
+ target: string;
1971
+ sourceHandle?: string | null;
1972
+ targetHandle?: string | null;
1973
+ animated?: boolean;
1974
+ hidden?: boolean;
1975
+ deletable?: boolean;
1976
+ selectable?: boolean;
1977
+ selected?: boolean;
1978
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1979
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1980
+ zIndex?: number;
1981
+ ariaLabel?: string;
1982
+ interactionWidth?: number;
1983
+ label?: import('react').ReactNode;
1984
+ labelStyle?: import('react').CSSProperties;
1985
+ labelShowBg?: boolean;
1986
+ labelBgStyle?: import('react').CSSProperties;
1987
+ labelBgPadding?: [number, number];
1988
+ labelBgBorderRadius?: number;
1989
+ style?: import('react').CSSProperties;
1990
+ className?: string;
1991
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1992
+ focusable?: boolean;
1993
+ data: import('../xyflow/types').RelationshipData;
1994
+ readonly id: string;
1995
+ readonly type: "relationship";
1996
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
1997
+ source: string;
1998
+ target: string;
1999
+ sourceHandle?: string | null;
2000
+ targetHandle?: string | null;
2001
+ animated?: boolean;
2002
+ hidden?: boolean;
2003
+ deletable?: boolean;
2004
+ selectable?: boolean;
2005
+ selected?: boolean;
2006
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2007
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2008
+ zIndex?: number;
2009
+ ariaLabel?: string;
2010
+ interactionWidth?: number;
2011
+ label?: import('react').ReactNode;
2012
+ labelStyle?: import('react').CSSProperties;
2013
+ labelShowBg?: boolean;
2014
+ labelBgStyle?: import('react').CSSProperties;
2015
+ labelBgPadding?: [number, number];
2016
+ labelBgBorderRadius?: number;
2017
+ style?: import('react').CSSProperties;
2018
+ className?: string;
2019
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2020
+ focusable?: boolean;
2021
+ data: import('../xyflow/types').RelationshipData;
2022
+ readonly id: string;
2023
+ readonly type: "relationship";
2024
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
2025
+ source: string;
2026
+ target: string;
2027
+ sourceHandle?: string | null;
2028
+ targetHandle?: string | null;
2029
+ animated?: boolean;
2030
+ hidden?: boolean;
2031
+ deletable?: boolean;
2032
+ selectable?: boolean;
2033
+ selected?: boolean;
2034
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2035
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2036
+ zIndex?: number;
2037
+ ariaLabel?: string;
2038
+ interactionWidth?: number;
2039
+ label?: import('react').ReactNode;
2040
+ labelStyle?: import('react').CSSProperties;
2041
+ labelShowBg?: boolean;
2042
+ labelBgStyle?: import('react').CSSProperties;
2043
+ labelBgPadding?: [number, number];
2044
+ labelBgBorderRadius?: number;
2045
+ style?: import('react').CSSProperties;
2046
+ className?: string;
2047
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2048
+ focusable?: boolean;
2049
+ data: import('../xyflow/types').RelationshipData;
2050
+ readonly id: string;
2051
+ readonly type: "relationship";
2052
+ }>>), replace?: boolean | undefined) => void;
2053
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2054
+ source: string;
2055
+ target: string;
2056
+ sourceHandle?: string | null;
2057
+ targetHandle?: string | null;
2058
+ animated?: boolean;
2059
+ hidden?: boolean;
2060
+ deletable?: boolean;
2061
+ selectable?: boolean;
2062
+ selected?: boolean;
2063
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2064
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2065
+ zIndex?: number;
2066
+ ariaLabel?: string;
2067
+ interactionWidth?: number;
2068
+ label?: import('react').ReactNode;
2069
+ labelStyle?: import('react').CSSProperties;
2070
+ labelShowBg?: boolean;
2071
+ labelBgStyle?: import('react').CSSProperties;
2072
+ labelBgPadding?: [number, number];
2073
+ labelBgBorderRadius?: number;
2074
+ style?: import('react').CSSProperties;
2075
+ className?: string;
2076
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2077
+ focusable?: boolean;
2078
+ data: import('../xyflow/types').RelationshipData;
2079
+ readonly id: string;
2080
+ readonly type: "relationship";
2081
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2082
+ source: string;
2083
+ target: string;
2084
+ sourceHandle?: string | null;
2085
+ targetHandle?: string | null;
2086
+ animated?: boolean;
2087
+ hidden?: boolean;
2088
+ deletable?: boolean;
2089
+ selectable?: boolean;
2090
+ selected?: boolean;
2091
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2092
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2093
+ zIndex?: number;
2094
+ ariaLabel?: string;
2095
+ interactionWidth?: number;
2096
+ label?: import('react').ReactNode;
2097
+ labelStyle?: import('react').CSSProperties;
2098
+ labelShowBg?: boolean;
2099
+ labelBgStyle?: import('react').CSSProperties;
2100
+ labelBgPadding?: [number, number];
2101
+ labelBgBorderRadius?: number;
2102
+ style?: import('react').CSSProperties;
2103
+ className?: string;
2104
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2105
+ focusable?: boolean;
2106
+ data: import('../xyflow/types').RelationshipData;
2107
+ readonly id: string;
2108
+ readonly type: "relationship";
2109
+ }>) => void) => () => void;
2110
+ }) => void;
2111
+ nextDynamicStep: (increment?: number | undefined) => void;
2112
+ stopDynamicView: () => void;
2113
+ }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
2114
+ equalityFn?: (a: U, b: U) => boolean;
2115
+ fireImmediately?: boolean;
1184
2116
  } | undefined): () => void;
1185
2117
  };
1186
2118
  }, "setState"> & {
@@ -1196,6 +2128,1033 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
1196
2128
  pannable: boolean;
1197
2129
  nodesDraggable: boolean;
1198
2130
  nodesSelectable: boolean;
2131
+ experimentalEdgeEditing: boolean;
2132
+ viewSyncState: "synced" | "changed";
2133
+ viewSyncDebounceTimeout: number | null;
2134
+ xyflow: XYFlowInstance;
2135
+ initialized: boolean;
2136
+ xyflowSynced: boolean;
2137
+ activeDynamicViewStep: number | null;
2138
+ lastClickedNodeId: string | null;
2139
+ lastClickedEdgeId: string | null;
2140
+ focusedNodeId: string | null;
2141
+ hoveredNodeId: string | null;
2142
+ hoveredEdgeId: string | null;
2143
+ dimmed: ReadonlySet<string>;
2144
+ previousViews: DiagramView[];
2145
+ lastOnNavigate: {
2146
+ fromView: ViewID;
2147
+ toView: ViewID;
2148
+ element: DiagramNode;
2149
+ elementScreenPosition: XYPosition;
2150
+ positionCorrected: boolean;
2151
+ } | null;
2152
+ viewportChanged: boolean;
2153
+ onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
2154
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
2155
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
2156
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
2157
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
2158
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
2159
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
2160
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
2161
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
2162
+ isDynamicView: () => boolean;
2163
+ updateView: (view: DiagramView) => void;
2164
+ focusOnNode: (nodeId: string) => void;
2165
+ setHoveredNode: (nodeId: string | null) => void;
2166
+ setHoveredEdge: (edgeId: string | null) => void;
2167
+ setLastClickedNode: (nodeId: string | null) => void;
2168
+ setLastClickedEdge: (edgeId: string | null) => void;
2169
+ resetLastClicked: () => void;
2170
+ getElement: (id: Fqn) => DiagramNode | null;
2171
+ triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
2172
+ triggerSaveManualLayout: (xystore: {
2173
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
2174
+ source: string;
2175
+ target: string;
2176
+ sourceHandle?: string | null;
2177
+ targetHandle?: string | null;
2178
+ animated?: boolean;
2179
+ hidden?: boolean;
2180
+ deletable?: boolean;
2181
+ selectable?: boolean;
2182
+ selected?: boolean;
2183
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2184
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2185
+ zIndex?: number;
2186
+ ariaLabel?: string;
2187
+ interactionWidth?: number;
2188
+ label?: import('react').ReactNode;
2189
+ labelStyle?: import('react').CSSProperties;
2190
+ labelShowBg?: boolean;
2191
+ labelBgStyle?: import('react').CSSProperties;
2192
+ labelBgPadding?: [number, number];
2193
+ labelBgBorderRadius?: number;
2194
+ style?: import('react').CSSProperties;
2195
+ className?: string;
2196
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2197
+ focusable?: boolean;
2198
+ data: import('../xyflow/types').RelationshipData;
2199
+ readonly id: string;
2200
+ readonly type: "relationship";
2201
+ }>;
2202
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2203
+ source: string;
2204
+ target: string;
2205
+ sourceHandle?: string | null;
2206
+ targetHandle?: string | null;
2207
+ animated?: boolean;
2208
+ hidden?: boolean;
2209
+ deletable?: boolean;
2210
+ selectable?: boolean;
2211
+ selected?: boolean;
2212
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2213
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2214
+ zIndex?: number;
2215
+ ariaLabel?: string;
2216
+ interactionWidth?: number;
2217
+ label?: import('react').ReactNode;
2218
+ labelStyle?: import('react').CSSProperties;
2219
+ labelShowBg?: boolean;
2220
+ labelBgStyle?: import('react').CSSProperties;
2221
+ labelBgPadding?: [number, number];
2222
+ labelBgBorderRadius?: number;
2223
+ style?: import('react').CSSProperties;
2224
+ className?: string;
2225
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2226
+ focusable?: boolean;
2227
+ data: import('../xyflow/types').RelationshipData;
2228
+ readonly id: string;
2229
+ readonly type: "relationship";
2230
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
2231
+ source: string;
2232
+ target: string;
2233
+ sourceHandle?: string | null;
2234
+ targetHandle?: string | null;
2235
+ animated?: boolean;
2236
+ hidden?: boolean;
2237
+ deletable?: boolean;
2238
+ selectable?: boolean;
2239
+ selected?: boolean;
2240
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2241
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2242
+ zIndex?: number;
2243
+ ariaLabel?: string;
2244
+ interactionWidth?: number;
2245
+ label?: import('react').ReactNode;
2246
+ labelStyle?: import('react').CSSProperties;
2247
+ labelShowBg?: boolean;
2248
+ labelBgStyle?: import('react').CSSProperties;
2249
+ labelBgPadding?: [number, number];
2250
+ labelBgBorderRadius?: number;
2251
+ style?: import('react').CSSProperties;
2252
+ className?: string;
2253
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2254
+ focusable?: boolean;
2255
+ data: import('../xyflow/types').RelationshipData;
2256
+ readonly id: string;
2257
+ readonly type: "relationship";
2258
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2259
+ source: string;
2260
+ target: string;
2261
+ sourceHandle?: string | null;
2262
+ targetHandle?: string | null;
2263
+ animated?: boolean;
2264
+ hidden?: boolean;
2265
+ deletable?: boolean;
2266
+ selectable?: boolean;
2267
+ selected?: boolean;
2268
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2269
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2270
+ zIndex?: number;
2271
+ ariaLabel?: string;
2272
+ interactionWidth?: number;
2273
+ label?: import('react').ReactNode;
2274
+ labelStyle?: import('react').CSSProperties;
2275
+ labelShowBg?: boolean;
2276
+ labelBgStyle?: import('react').CSSProperties;
2277
+ labelBgPadding?: [number, number];
2278
+ labelBgBorderRadius?: number;
2279
+ style?: import('react').CSSProperties;
2280
+ className?: string;
2281
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2282
+ focusable?: boolean;
2283
+ data: import('../xyflow/types').RelationshipData;
2284
+ readonly id: string;
2285
+ readonly type: "relationship";
2286
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
2287
+ source: string;
2288
+ target: string;
2289
+ sourceHandle?: string | null;
2290
+ targetHandle?: string | null;
2291
+ animated?: boolean;
2292
+ hidden?: boolean;
2293
+ deletable?: boolean;
2294
+ selectable?: boolean;
2295
+ selected?: boolean;
2296
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2297
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2298
+ zIndex?: number;
2299
+ ariaLabel?: string;
2300
+ interactionWidth?: number;
2301
+ label?: import('react').ReactNode;
2302
+ labelStyle?: import('react').CSSProperties;
2303
+ labelShowBg?: boolean;
2304
+ labelBgStyle?: import('react').CSSProperties;
2305
+ labelBgPadding?: [number, number];
2306
+ labelBgBorderRadius?: number;
2307
+ style?: import('react').CSSProperties;
2308
+ className?: string;
2309
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2310
+ focusable?: boolean;
2311
+ data: import('../xyflow/types').RelationshipData;
2312
+ readonly id: string;
2313
+ readonly type: "relationship";
2314
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
2315
+ source: string;
2316
+ target: string;
2317
+ sourceHandle?: string | null;
2318
+ targetHandle?: string | null;
2319
+ animated?: boolean;
2320
+ hidden?: boolean;
2321
+ deletable?: boolean;
2322
+ selectable?: boolean;
2323
+ selected?: boolean;
2324
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2325
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2326
+ zIndex?: number;
2327
+ ariaLabel?: string;
2328
+ interactionWidth?: number;
2329
+ label?: import('react').ReactNode;
2330
+ labelStyle?: import('react').CSSProperties;
2331
+ labelShowBg?: boolean;
2332
+ labelBgStyle?: import('react').CSSProperties;
2333
+ labelBgPadding?: [number, number];
2334
+ labelBgBorderRadius?: number;
2335
+ style?: import('react').CSSProperties;
2336
+ className?: string;
2337
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2338
+ focusable?: boolean;
2339
+ data: import('../xyflow/types').RelationshipData;
2340
+ readonly id: string;
2341
+ readonly type: "relationship";
2342
+ }>>), replace?: boolean | undefined) => void;
2343
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2344
+ source: string;
2345
+ target: string;
2346
+ sourceHandle?: string | null;
2347
+ targetHandle?: string | null;
2348
+ animated?: boolean;
2349
+ hidden?: boolean;
2350
+ deletable?: boolean;
2351
+ selectable?: boolean;
2352
+ selected?: boolean;
2353
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2354
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2355
+ zIndex?: number;
2356
+ ariaLabel?: string;
2357
+ interactionWidth?: number;
2358
+ label?: import('react').ReactNode;
2359
+ labelStyle?: import('react').CSSProperties;
2360
+ labelShowBg?: boolean;
2361
+ labelBgStyle?: import('react').CSSProperties;
2362
+ labelBgPadding?: [number, number];
2363
+ labelBgBorderRadius?: number;
2364
+ style?: import('react').CSSProperties;
2365
+ className?: string;
2366
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2367
+ focusable?: boolean;
2368
+ data: import('../xyflow/types').RelationshipData;
2369
+ readonly id: string;
2370
+ readonly type: "relationship";
2371
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2372
+ source: string;
2373
+ target: string;
2374
+ sourceHandle?: string | null;
2375
+ targetHandle?: string | null;
2376
+ animated?: boolean;
2377
+ hidden?: boolean;
2378
+ deletable?: boolean;
2379
+ selectable?: boolean;
2380
+ selected?: boolean;
2381
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2382
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2383
+ zIndex?: number;
2384
+ ariaLabel?: string;
2385
+ interactionWidth?: number;
2386
+ label?: import('react').ReactNode;
2387
+ labelStyle?: import('react').CSSProperties;
2388
+ labelShowBg?: boolean;
2389
+ labelBgStyle?: import('react').CSSProperties;
2390
+ labelBgPadding?: [number, number];
2391
+ labelBgBorderRadius?: number;
2392
+ style?: import('react').CSSProperties;
2393
+ className?: string;
2394
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2395
+ focusable?: boolean;
2396
+ data: import('../xyflow/types').RelationshipData;
2397
+ readonly id: string;
2398
+ readonly type: "relationship";
2399
+ }>) => void) => () => void;
2400
+ }) => void;
2401
+ triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
2402
+ fitDiagram: (xyStore: {
2403
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
2404
+ source: string;
2405
+ target: string;
2406
+ sourceHandle?: string | null;
2407
+ targetHandle?: string | null;
2408
+ animated?: boolean;
2409
+ hidden?: boolean;
2410
+ deletable?: boolean;
2411
+ selectable?: boolean;
2412
+ selected?: boolean;
2413
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2414
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2415
+ zIndex?: number;
2416
+ ariaLabel?: string;
2417
+ interactionWidth?: number;
2418
+ label?: import('react').ReactNode;
2419
+ labelStyle?: import('react').CSSProperties;
2420
+ labelShowBg?: boolean;
2421
+ labelBgStyle?: import('react').CSSProperties;
2422
+ labelBgPadding?: [number, number];
2423
+ labelBgBorderRadius?: number;
2424
+ style?: import('react').CSSProperties;
2425
+ className?: string;
2426
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2427
+ focusable?: boolean;
2428
+ data: import('../xyflow/types').RelationshipData;
2429
+ readonly id: string;
2430
+ readonly type: "relationship";
2431
+ }>;
2432
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2433
+ source: string;
2434
+ target: string;
2435
+ sourceHandle?: string | null;
2436
+ targetHandle?: string | null;
2437
+ animated?: boolean;
2438
+ hidden?: boolean;
2439
+ deletable?: boolean;
2440
+ selectable?: boolean;
2441
+ selected?: boolean;
2442
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2443
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2444
+ zIndex?: number;
2445
+ ariaLabel?: string;
2446
+ interactionWidth?: number;
2447
+ label?: import('react').ReactNode;
2448
+ labelStyle?: import('react').CSSProperties;
2449
+ labelShowBg?: boolean;
2450
+ labelBgStyle?: import('react').CSSProperties;
2451
+ labelBgPadding?: [number, number];
2452
+ labelBgBorderRadius?: number;
2453
+ style?: import('react').CSSProperties;
2454
+ className?: string;
2455
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2456
+ focusable?: boolean;
2457
+ data: import('../xyflow/types').RelationshipData;
2458
+ readonly id: string;
2459
+ readonly type: "relationship";
2460
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
2461
+ source: string;
2462
+ target: string;
2463
+ sourceHandle?: string | null;
2464
+ targetHandle?: string | null;
2465
+ animated?: boolean;
2466
+ hidden?: boolean;
2467
+ deletable?: boolean;
2468
+ selectable?: boolean;
2469
+ selected?: boolean;
2470
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2471
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2472
+ zIndex?: number;
2473
+ ariaLabel?: string;
2474
+ interactionWidth?: number;
2475
+ label?: import('react').ReactNode;
2476
+ labelStyle?: import('react').CSSProperties;
2477
+ labelShowBg?: boolean;
2478
+ labelBgStyle?: import('react').CSSProperties;
2479
+ labelBgPadding?: [number, number];
2480
+ labelBgBorderRadius?: number;
2481
+ style?: import('react').CSSProperties;
2482
+ className?: string;
2483
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2484
+ focusable?: boolean;
2485
+ data: import('../xyflow/types').RelationshipData;
2486
+ readonly id: string;
2487
+ readonly type: "relationship";
2488
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2489
+ source: string;
2490
+ target: string;
2491
+ sourceHandle?: string | null;
2492
+ targetHandle?: string | null;
2493
+ animated?: boolean;
2494
+ hidden?: boolean;
2495
+ deletable?: boolean;
2496
+ selectable?: boolean;
2497
+ selected?: boolean;
2498
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2499
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2500
+ zIndex?: number;
2501
+ ariaLabel?: string;
2502
+ interactionWidth?: number;
2503
+ label?: import('react').ReactNode;
2504
+ labelStyle?: import('react').CSSProperties;
2505
+ labelShowBg?: boolean;
2506
+ labelBgStyle?: import('react').CSSProperties;
2507
+ labelBgPadding?: [number, number];
2508
+ labelBgBorderRadius?: number;
2509
+ style?: import('react').CSSProperties;
2510
+ className?: string;
2511
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2512
+ focusable?: boolean;
2513
+ data: import('../xyflow/types').RelationshipData;
2514
+ readonly id: string;
2515
+ readonly type: "relationship";
2516
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
2517
+ source: string;
2518
+ target: string;
2519
+ sourceHandle?: string | null;
2520
+ targetHandle?: string | null;
2521
+ animated?: boolean;
2522
+ hidden?: boolean;
2523
+ deletable?: boolean;
2524
+ selectable?: boolean;
2525
+ selected?: boolean;
2526
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2527
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2528
+ zIndex?: number;
2529
+ ariaLabel?: string;
2530
+ interactionWidth?: number;
2531
+ label?: import('react').ReactNode;
2532
+ labelStyle?: import('react').CSSProperties;
2533
+ labelShowBg?: boolean;
2534
+ labelBgStyle?: import('react').CSSProperties;
2535
+ labelBgPadding?: [number, number];
2536
+ labelBgBorderRadius?: number;
2537
+ style?: import('react').CSSProperties;
2538
+ className?: string;
2539
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2540
+ focusable?: boolean;
2541
+ data: import('../xyflow/types').RelationshipData;
2542
+ readonly id: string;
2543
+ readonly type: "relationship";
2544
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
2545
+ source: string;
2546
+ target: string;
2547
+ sourceHandle?: string | null;
2548
+ targetHandle?: string | null;
2549
+ animated?: boolean;
2550
+ hidden?: boolean;
2551
+ deletable?: boolean;
2552
+ selectable?: boolean;
2553
+ selected?: boolean;
2554
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2555
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2556
+ zIndex?: number;
2557
+ ariaLabel?: string;
2558
+ interactionWidth?: number;
2559
+ label?: import('react').ReactNode;
2560
+ labelStyle?: import('react').CSSProperties;
2561
+ labelShowBg?: boolean;
2562
+ labelBgStyle?: import('react').CSSProperties;
2563
+ labelBgPadding?: [number, number];
2564
+ labelBgBorderRadius?: number;
2565
+ style?: import('react').CSSProperties;
2566
+ className?: string;
2567
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2568
+ focusable?: boolean;
2569
+ data: import('../xyflow/types').RelationshipData;
2570
+ readonly id: string;
2571
+ readonly type: "relationship";
2572
+ }>>), replace?: boolean | undefined) => void;
2573
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2574
+ source: string;
2575
+ target: string;
2576
+ sourceHandle?: string | null;
2577
+ targetHandle?: string | null;
2578
+ animated?: boolean;
2579
+ hidden?: boolean;
2580
+ deletable?: boolean;
2581
+ selectable?: boolean;
2582
+ selected?: boolean;
2583
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2584
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2585
+ zIndex?: number;
2586
+ ariaLabel?: string;
2587
+ interactionWidth?: number;
2588
+ label?: import('react').ReactNode;
2589
+ labelStyle?: import('react').CSSProperties;
2590
+ labelShowBg?: boolean;
2591
+ labelBgStyle?: import('react').CSSProperties;
2592
+ labelBgPadding?: [number, number];
2593
+ labelBgBorderRadius?: number;
2594
+ style?: import('react').CSSProperties;
2595
+ className?: string;
2596
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2597
+ focusable?: boolean;
2598
+ data: import('../xyflow/types').RelationshipData;
2599
+ readonly id: string;
2600
+ readonly type: "relationship";
2601
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2602
+ source: string;
2603
+ target: string;
2604
+ sourceHandle?: string | null;
2605
+ targetHandle?: string | null;
2606
+ animated?: boolean;
2607
+ hidden?: boolean;
2608
+ deletable?: boolean;
2609
+ selectable?: boolean;
2610
+ selected?: boolean;
2611
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2612
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2613
+ zIndex?: number;
2614
+ ariaLabel?: string;
2615
+ interactionWidth?: number;
2616
+ label?: import('react').ReactNode;
2617
+ labelStyle?: import('react').CSSProperties;
2618
+ labelShowBg?: boolean;
2619
+ labelBgStyle?: import('react').CSSProperties;
2620
+ labelBgPadding?: [number, number];
2621
+ labelBgBorderRadius?: number;
2622
+ style?: import('react').CSSProperties;
2623
+ className?: string;
2624
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2625
+ focusable?: boolean;
2626
+ data: import('../xyflow/types').RelationshipData;
2627
+ readonly id: string;
2628
+ readonly type: "relationship";
2629
+ }>) => void) => () => void;
2630
+ }) => void;
2631
+ nextDynamicStep: (increment?: number | undefined) => void;
2632
+ stopDynamicView: () => void;
2633
+ } | Partial<{
2634
+ view: DiagramView;
2635
+ readonly: boolean;
2636
+ showElementLinks: boolean;
2637
+ fitViewEnabled: boolean;
2638
+ fitViewPadding: number;
2639
+ zoomable: boolean;
2640
+ pannable: boolean;
2641
+ nodesDraggable: boolean;
2642
+ nodesSelectable: boolean;
2643
+ experimentalEdgeEditing: boolean;
2644
+ viewSyncState: "synced" | "changed";
2645
+ viewSyncDebounceTimeout: number | null;
2646
+ xyflow: XYFlowInstance;
2647
+ initialized: boolean;
2648
+ xyflowSynced: boolean;
2649
+ activeDynamicViewStep: number | null;
2650
+ lastClickedNodeId: string | null;
2651
+ lastClickedEdgeId: string | null;
2652
+ focusedNodeId: string | null;
2653
+ hoveredNodeId: string | null;
2654
+ hoveredEdgeId: string | null;
2655
+ dimmed: ReadonlySet<string>;
2656
+ previousViews: DiagramView[];
2657
+ lastOnNavigate: {
2658
+ fromView: ViewID;
2659
+ toView: ViewID;
2660
+ element: DiagramNode;
2661
+ elementScreenPosition: XYPosition;
2662
+ positionCorrected: boolean;
2663
+ } | null;
2664
+ viewportChanged: boolean;
2665
+ onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
2666
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
2667
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
2668
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
2669
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
2670
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
2671
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
2672
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
2673
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
2674
+ isDynamicView: () => boolean;
2675
+ updateView: (view: DiagramView) => void;
2676
+ focusOnNode: (nodeId: string) => void;
2677
+ setHoveredNode: (nodeId: string | null) => void;
2678
+ setHoveredEdge: (edgeId: string | null) => void;
2679
+ setLastClickedNode: (nodeId: string | null) => void;
2680
+ setLastClickedEdge: (edgeId: string | null) => void;
2681
+ resetLastClicked: () => void;
2682
+ getElement: (id: Fqn) => DiagramNode | null;
2683
+ triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
2684
+ triggerSaveManualLayout: (xystore: {
2685
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
2686
+ source: string;
2687
+ target: string;
2688
+ sourceHandle?: string | null;
2689
+ targetHandle?: string | null;
2690
+ animated?: boolean;
2691
+ hidden?: boolean;
2692
+ deletable?: boolean;
2693
+ selectable?: boolean;
2694
+ selected?: boolean;
2695
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2696
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2697
+ zIndex?: number;
2698
+ ariaLabel?: string;
2699
+ interactionWidth?: number;
2700
+ label?: import('react').ReactNode;
2701
+ labelStyle?: import('react').CSSProperties;
2702
+ labelShowBg?: boolean;
2703
+ labelBgStyle?: import('react').CSSProperties;
2704
+ labelBgPadding?: [number, number];
2705
+ labelBgBorderRadius?: number;
2706
+ style?: import('react').CSSProperties;
2707
+ className?: string;
2708
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2709
+ focusable?: boolean;
2710
+ data: import('../xyflow/types').RelationshipData;
2711
+ readonly id: string;
2712
+ readonly type: "relationship";
2713
+ }>;
2714
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2715
+ source: string;
2716
+ target: string;
2717
+ sourceHandle?: string | null;
2718
+ targetHandle?: string | null;
2719
+ animated?: boolean;
2720
+ hidden?: boolean;
2721
+ deletable?: boolean;
2722
+ selectable?: boolean;
2723
+ selected?: boolean;
2724
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2725
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2726
+ zIndex?: number;
2727
+ ariaLabel?: string;
2728
+ interactionWidth?: number;
2729
+ label?: import('react').ReactNode;
2730
+ labelStyle?: import('react').CSSProperties;
2731
+ labelShowBg?: boolean;
2732
+ labelBgStyle?: import('react').CSSProperties;
2733
+ labelBgPadding?: [number, number];
2734
+ labelBgBorderRadius?: number;
2735
+ style?: import('react').CSSProperties;
2736
+ className?: string;
2737
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2738
+ focusable?: boolean;
2739
+ data: import('../xyflow/types').RelationshipData;
2740
+ readonly id: string;
2741
+ readonly type: "relationship";
2742
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
2743
+ source: string;
2744
+ target: string;
2745
+ sourceHandle?: string | null;
2746
+ targetHandle?: string | null;
2747
+ animated?: boolean;
2748
+ hidden?: boolean;
2749
+ deletable?: boolean;
2750
+ selectable?: boolean;
2751
+ selected?: boolean;
2752
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2753
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2754
+ zIndex?: number;
2755
+ ariaLabel?: string;
2756
+ interactionWidth?: number;
2757
+ label?: import('react').ReactNode;
2758
+ labelStyle?: import('react').CSSProperties;
2759
+ labelShowBg?: boolean;
2760
+ labelBgStyle?: import('react').CSSProperties;
2761
+ labelBgPadding?: [number, number];
2762
+ labelBgBorderRadius?: number;
2763
+ style?: import('react').CSSProperties;
2764
+ className?: string;
2765
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2766
+ focusable?: boolean;
2767
+ data: import('../xyflow/types').RelationshipData;
2768
+ readonly id: string;
2769
+ readonly type: "relationship";
2770
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2771
+ source: string;
2772
+ target: string;
2773
+ sourceHandle?: string | null;
2774
+ targetHandle?: string | null;
2775
+ animated?: boolean;
2776
+ hidden?: boolean;
2777
+ deletable?: boolean;
2778
+ selectable?: boolean;
2779
+ selected?: boolean;
2780
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2781
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2782
+ zIndex?: number;
2783
+ ariaLabel?: string;
2784
+ interactionWidth?: number;
2785
+ label?: import('react').ReactNode;
2786
+ labelStyle?: import('react').CSSProperties;
2787
+ labelShowBg?: boolean;
2788
+ labelBgStyle?: import('react').CSSProperties;
2789
+ labelBgPadding?: [number, number];
2790
+ labelBgBorderRadius?: number;
2791
+ style?: import('react').CSSProperties;
2792
+ className?: string;
2793
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2794
+ focusable?: boolean;
2795
+ data: import('../xyflow/types').RelationshipData;
2796
+ readonly id: string;
2797
+ readonly type: "relationship";
2798
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
2799
+ source: string;
2800
+ target: string;
2801
+ sourceHandle?: string | null;
2802
+ targetHandle?: string | null;
2803
+ animated?: boolean;
2804
+ hidden?: boolean;
2805
+ deletable?: boolean;
2806
+ selectable?: boolean;
2807
+ selected?: boolean;
2808
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2809
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2810
+ zIndex?: number;
2811
+ ariaLabel?: string;
2812
+ interactionWidth?: number;
2813
+ label?: import('react').ReactNode;
2814
+ labelStyle?: import('react').CSSProperties;
2815
+ labelShowBg?: boolean;
2816
+ labelBgStyle?: import('react').CSSProperties;
2817
+ labelBgPadding?: [number, number];
2818
+ labelBgBorderRadius?: number;
2819
+ style?: import('react').CSSProperties;
2820
+ className?: string;
2821
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2822
+ focusable?: boolean;
2823
+ data: import('../xyflow/types').RelationshipData;
2824
+ readonly id: string;
2825
+ readonly type: "relationship";
2826
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
2827
+ source: string;
2828
+ target: string;
2829
+ sourceHandle?: string | null;
2830
+ targetHandle?: string | null;
2831
+ animated?: boolean;
2832
+ hidden?: boolean;
2833
+ deletable?: boolean;
2834
+ selectable?: boolean;
2835
+ selected?: boolean;
2836
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2837
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2838
+ zIndex?: number;
2839
+ ariaLabel?: string;
2840
+ interactionWidth?: number;
2841
+ label?: import('react').ReactNode;
2842
+ labelStyle?: import('react').CSSProperties;
2843
+ labelShowBg?: boolean;
2844
+ labelBgStyle?: import('react').CSSProperties;
2845
+ labelBgPadding?: [number, number];
2846
+ labelBgBorderRadius?: number;
2847
+ style?: import('react').CSSProperties;
2848
+ className?: string;
2849
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2850
+ focusable?: boolean;
2851
+ data: import('../xyflow/types').RelationshipData;
2852
+ readonly id: string;
2853
+ readonly type: "relationship";
2854
+ }>>), replace?: boolean | undefined) => void;
2855
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2856
+ source: string;
2857
+ target: string;
2858
+ sourceHandle?: string | null;
2859
+ targetHandle?: string | null;
2860
+ animated?: boolean;
2861
+ hidden?: boolean;
2862
+ deletable?: boolean;
2863
+ selectable?: boolean;
2864
+ selected?: boolean;
2865
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2866
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2867
+ zIndex?: number;
2868
+ ariaLabel?: string;
2869
+ interactionWidth?: number;
2870
+ label?: import('react').ReactNode;
2871
+ labelStyle?: import('react').CSSProperties;
2872
+ labelShowBg?: boolean;
2873
+ labelBgStyle?: import('react').CSSProperties;
2874
+ labelBgPadding?: [number, number];
2875
+ labelBgBorderRadius?: number;
2876
+ style?: import('react').CSSProperties;
2877
+ className?: string;
2878
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2879
+ focusable?: boolean;
2880
+ data: import('../xyflow/types').RelationshipData;
2881
+ readonly id: string;
2882
+ readonly type: "relationship";
2883
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2884
+ source: string;
2885
+ target: string;
2886
+ sourceHandle?: string | null;
2887
+ targetHandle?: string | null;
2888
+ animated?: boolean;
2889
+ hidden?: boolean;
2890
+ deletable?: boolean;
2891
+ selectable?: boolean;
2892
+ selected?: boolean;
2893
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2894
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2895
+ zIndex?: number;
2896
+ ariaLabel?: string;
2897
+ interactionWidth?: number;
2898
+ label?: import('react').ReactNode;
2899
+ labelStyle?: import('react').CSSProperties;
2900
+ labelShowBg?: boolean;
2901
+ labelBgStyle?: import('react').CSSProperties;
2902
+ labelBgPadding?: [number, number];
2903
+ labelBgBorderRadius?: number;
2904
+ style?: import('react').CSSProperties;
2905
+ className?: string;
2906
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2907
+ focusable?: boolean;
2908
+ data: import('../xyflow/types').RelationshipData;
2909
+ readonly id: string;
2910
+ readonly type: "relationship";
2911
+ }>) => void) => () => void;
2912
+ }) => void;
2913
+ triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
2914
+ fitDiagram: (xyStore: {
2915
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
2916
+ source: string;
2917
+ target: string;
2918
+ sourceHandle?: string | null;
2919
+ targetHandle?: string | null;
2920
+ animated?: boolean;
2921
+ hidden?: boolean;
2922
+ deletable?: boolean;
2923
+ selectable?: boolean;
2924
+ selected?: boolean;
2925
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2926
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2927
+ zIndex?: number;
2928
+ ariaLabel?: string;
2929
+ interactionWidth?: number;
2930
+ label?: import('react').ReactNode;
2931
+ labelStyle?: import('react').CSSProperties;
2932
+ labelShowBg?: boolean;
2933
+ labelBgStyle?: import('react').CSSProperties;
2934
+ labelBgPadding?: [number, number];
2935
+ labelBgBorderRadius?: number;
2936
+ style?: import('react').CSSProperties;
2937
+ className?: string;
2938
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2939
+ focusable?: boolean;
2940
+ data: import('../xyflow/types').RelationshipData;
2941
+ readonly id: string;
2942
+ readonly type: "relationship";
2943
+ }>;
2944
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2945
+ source: string;
2946
+ target: string;
2947
+ sourceHandle?: string | null;
2948
+ targetHandle?: string | null;
2949
+ animated?: boolean;
2950
+ hidden?: boolean;
2951
+ deletable?: boolean;
2952
+ selectable?: boolean;
2953
+ selected?: boolean;
2954
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2955
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2956
+ zIndex?: number;
2957
+ ariaLabel?: string;
2958
+ interactionWidth?: number;
2959
+ label?: import('react').ReactNode;
2960
+ labelStyle?: import('react').CSSProperties;
2961
+ labelShowBg?: boolean;
2962
+ labelBgStyle?: import('react').CSSProperties;
2963
+ labelBgPadding?: [number, number];
2964
+ labelBgBorderRadius?: number;
2965
+ style?: import('react').CSSProperties;
2966
+ className?: string;
2967
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2968
+ focusable?: boolean;
2969
+ data: import('../xyflow/types').RelationshipData;
2970
+ readonly id: string;
2971
+ readonly type: "relationship";
2972
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
2973
+ source: string;
2974
+ target: string;
2975
+ sourceHandle?: string | null;
2976
+ targetHandle?: string | null;
2977
+ animated?: boolean;
2978
+ hidden?: boolean;
2979
+ deletable?: boolean;
2980
+ selectable?: boolean;
2981
+ selected?: boolean;
2982
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2983
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2984
+ zIndex?: number;
2985
+ ariaLabel?: string;
2986
+ interactionWidth?: number;
2987
+ label?: import('react').ReactNode;
2988
+ labelStyle?: import('react').CSSProperties;
2989
+ labelShowBg?: boolean;
2990
+ labelBgStyle?: import('react').CSSProperties;
2991
+ labelBgPadding?: [number, number];
2992
+ labelBgBorderRadius?: number;
2993
+ style?: import('react').CSSProperties;
2994
+ className?: string;
2995
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2996
+ focusable?: boolean;
2997
+ data: import('../xyflow/types').RelationshipData;
2998
+ readonly id: string;
2999
+ readonly type: "relationship";
3000
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
3001
+ source: string;
3002
+ target: string;
3003
+ sourceHandle?: string | null;
3004
+ targetHandle?: string | null;
3005
+ animated?: boolean;
3006
+ hidden?: boolean;
3007
+ deletable?: boolean;
3008
+ selectable?: boolean;
3009
+ selected?: boolean;
3010
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
3011
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
3012
+ zIndex?: number;
3013
+ ariaLabel?: string;
3014
+ interactionWidth?: number;
3015
+ label?: import('react').ReactNode;
3016
+ labelStyle?: import('react').CSSProperties;
3017
+ labelShowBg?: boolean;
3018
+ labelBgStyle?: import('react').CSSProperties;
3019
+ labelBgPadding?: [number, number];
3020
+ labelBgBorderRadius?: number;
3021
+ style?: import('react').CSSProperties;
3022
+ className?: string;
3023
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3024
+ focusable?: boolean;
3025
+ data: import('../xyflow/types').RelationshipData;
3026
+ readonly id: string;
3027
+ readonly type: "relationship";
3028
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
3029
+ source: string;
3030
+ target: string;
3031
+ sourceHandle?: string | null;
3032
+ targetHandle?: string | null;
3033
+ animated?: boolean;
3034
+ hidden?: boolean;
3035
+ deletable?: boolean;
3036
+ selectable?: boolean;
3037
+ selected?: boolean;
3038
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
3039
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
3040
+ zIndex?: number;
3041
+ ariaLabel?: string;
3042
+ interactionWidth?: number;
3043
+ label?: import('react').ReactNode;
3044
+ labelStyle?: import('react').CSSProperties;
3045
+ labelShowBg?: boolean;
3046
+ labelBgStyle?: import('react').CSSProperties;
3047
+ labelBgPadding?: [number, number];
3048
+ labelBgBorderRadius?: number;
3049
+ style?: import('react').CSSProperties;
3050
+ className?: string;
3051
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3052
+ focusable?: boolean;
3053
+ data: import('../xyflow/types').RelationshipData;
3054
+ readonly id: string;
3055
+ readonly type: "relationship";
3056
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
3057
+ source: string;
3058
+ target: string;
3059
+ sourceHandle?: string | null;
3060
+ targetHandle?: string | null;
3061
+ animated?: boolean;
3062
+ hidden?: boolean;
3063
+ deletable?: boolean;
3064
+ selectable?: boolean;
3065
+ selected?: boolean;
3066
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
3067
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
3068
+ zIndex?: number;
3069
+ ariaLabel?: string;
3070
+ interactionWidth?: number;
3071
+ label?: import('react').ReactNode;
3072
+ labelStyle?: import('react').CSSProperties;
3073
+ labelShowBg?: boolean;
3074
+ labelBgStyle?: import('react').CSSProperties;
3075
+ labelBgPadding?: [number, number];
3076
+ labelBgBorderRadius?: number;
3077
+ style?: import('react').CSSProperties;
3078
+ className?: string;
3079
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3080
+ focusable?: boolean;
3081
+ data: import('../xyflow/types').RelationshipData;
3082
+ readonly id: string;
3083
+ readonly type: "relationship";
3084
+ }>>), replace?: boolean | undefined) => void;
3085
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
3086
+ source: string;
3087
+ target: string;
3088
+ sourceHandle?: string | null;
3089
+ targetHandle?: string | null;
3090
+ animated?: boolean;
3091
+ hidden?: boolean;
3092
+ deletable?: boolean;
3093
+ selectable?: boolean;
3094
+ selected?: boolean;
3095
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
3096
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
3097
+ zIndex?: number;
3098
+ ariaLabel?: string;
3099
+ interactionWidth?: number;
3100
+ label?: import('react').ReactNode;
3101
+ labelStyle?: import('react').CSSProperties;
3102
+ labelShowBg?: boolean;
3103
+ labelBgStyle?: import('react').CSSProperties;
3104
+ labelBgPadding?: [number, number];
3105
+ labelBgBorderRadius?: number;
3106
+ style?: import('react').CSSProperties;
3107
+ className?: string;
3108
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3109
+ focusable?: boolean;
3110
+ data: import('../xyflow/types').RelationshipData;
3111
+ readonly id: string;
3112
+ readonly type: "relationship";
3113
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
3114
+ source: string;
3115
+ target: string;
3116
+ sourceHandle?: string | null;
3117
+ targetHandle?: string | null;
3118
+ animated?: boolean;
3119
+ hidden?: boolean;
3120
+ deletable?: boolean;
3121
+ selectable?: boolean;
3122
+ selected?: boolean;
3123
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
3124
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
3125
+ zIndex?: number;
3126
+ ariaLabel?: string;
3127
+ interactionWidth?: number;
3128
+ label?: import('react').ReactNode;
3129
+ labelStyle?: import('react').CSSProperties;
3130
+ labelShowBg?: boolean;
3131
+ labelBgStyle?: import('react').CSSProperties;
3132
+ labelBgPadding?: [number, number];
3133
+ labelBgBorderRadius?: number;
3134
+ style?: import('react').CSSProperties;
3135
+ className?: string;
3136
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3137
+ focusable?: boolean;
3138
+ data: import('../xyflow/types').RelationshipData;
3139
+ readonly id: string;
3140
+ readonly type: "relationship";
3141
+ }>) => void) => () => void;
3142
+ }) => void;
3143
+ nextDynamicStep: (increment?: number | undefined) => void;
3144
+ stopDynamicView: () => void;
3145
+ }> | ((state: {
3146
+ view: DiagramView;
3147
+ readonly: boolean;
3148
+ showElementLinks: boolean;
3149
+ fitViewEnabled: boolean;
3150
+ fitViewPadding: number;
3151
+ zoomable: boolean;
3152
+ pannable: boolean;
3153
+ nodesDraggable: boolean;
3154
+ nodesSelectable: boolean;
3155
+ experimentalEdgeEditing: boolean;
3156
+ viewSyncState: "synced" | "changed";
3157
+ viewSyncDebounceTimeout: number | null;
1199
3158
  xyflow: XYFlowInstance;
1200
3159
  initialized: boolean;
1201
3160
  xyflowSynced: boolean;
@@ -1211,7 +3170,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
1211
3170
  fromView: ViewID;
1212
3171
  toView: ViewID;
1213
3172
  element: DiagramNode;
1214
- elementCenterScreenPosition: XYPosition;
3173
+ elementScreenPosition: XYPosition;
1215
3174
  positionCorrected: boolean;
1216
3175
  } | null;
1217
3176
  viewportChanged: boolean;
@@ -1233,7 +3192,236 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
1233
3192
  setLastClickedEdge: (edgeId: string | null) => void;
1234
3193
  resetLastClicked: () => void;
1235
3194
  getElement: (id: Fqn) => DiagramNode | null;
1236
- triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
3195
+ triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
3196
+ triggerSaveManualLayout: (xystore: {
3197
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
3198
+ source: string;
3199
+ target: string;
3200
+ sourceHandle?: string | null;
3201
+ targetHandle?: string | null;
3202
+ animated?: boolean;
3203
+ hidden?: boolean;
3204
+ deletable?: boolean;
3205
+ selectable?: boolean;
3206
+ selected?: boolean;
3207
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
3208
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
3209
+ zIndex?: number;
3210
+ ariaLabel?: string;
3211
+ interactionWidth?: number;
3212
+ label?: import('react').ReactNode;
3213
+ labelStyle?: import('react').CSSProperties;
3214
+ labelShowBg?: boolean;
3215
+ labelBgStyle?: import('react').CSSProperties;
3216
+ labelBgPadding?: [number, number];
3217
+ labelBgBorderRadius?: number;
3218
+ style?: import('react').CSSProperties;
3219
+ className?: string;
3220
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3221
+ focusable?: boolean;
3222
+ data: import('../xyflow/types').RelationshipData;
3223
+ readonly id: string;
3224
+ readonly type: "relationship";
3225
+ }>;
3226
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
3227
+ source: string;
3228
+ target: string;
3229
+ sourceHandle?: string | null;
3230
+ targetHandle?: string | null;
3231
+ animated?: boolean;
3232
+ hidden?: boolean;
3233
+ deletable?: boolean;
3234
+ selectable?: boolean;
3235
+ selected?: boolean;
3236
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
3237
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
3238
+ zIndex?: number;
3239
+ ariaLabel?: string;
3240
+ interactionWidth?: number;
3241
+ label?: import('react').ReactNode;
3242
+ labelStyle?: import('react').CSSProperties;
3243
+ labelShowBg?: boolean;
3244
+ labelBgStyle?: import('react').CSSProperties;
3245
+ labelBgPadding?: [number, number];
3246
+ labelBgBorderRadius?: number;
3247
+ style?: import('react').CSSProperties;
3248
+ className?: string;
3249
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3250
+ focusable?: boolean;
3251
+ data: import('../xyflow/types').RelationshipData;
3252
+ readonly id: string;
3253
+ readonly type: "relationship";
3254
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
3255
+ source: string;
3256
+ target: string;
3257
+ sourceHandle?: string | null;
3258
+ targetHandle?: string | null;
3259
+ animated?: boolean;
3260
+ hidden?: boolean;
3261
+ deletable?: boolean;
3262
+ selectable?: boolean;
3263
+ selected?: boolean;
3264
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
3265
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
3266
+ zIndex?: number;
3267
+ ariaLabel?: string;
3268
+ interactionWidth?: number;
3269
+ label?: import('react').ReactNode;
3270
+ labelStyle?: import('react').CSSProperties;
3271
+ labelShowBg?: boolean;
3272
+ labelBgStyle?: import('react').CSSProperties;
3273
+ labelBgPadding?: [number, number];
3274
+ labelBgBorderRadius?: number;
3275
+ style?: import('react').CSSProperties;
3276
+ className?: string;
3277
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3278
+ focusable?: boolean;
3279
+ data: import('../xyflow/types').RelationshipData;
3280
+ readonly id: string;
3281
+ readonly type: "relationship";
3282
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
3283
+ source: string;
3284
+ target: string;
3285
+ sourceHandle?: string | null;
3286
+ targetHandle?: string | null;
3287
+ animated?: boolean;
3288
+ hidden?: boolean;
3289
+ deletable?: boolean;
3290
+ selectable?: boolean;
3291
+ selected?: boolean;
3292
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
3293
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
3294
+ zIndex?: number;
3295
+ ariaLabel?: string;
3296
+ interactionWidth?: number;
3297
+ label?: import('react').ReactNode;
3298
+ labelStyle?: import('react').CSSProperties;
3299
+ labelShowBg?: boolean;
3300
+ labelBgStyle?: import('react').CSSProperties;
3301
+ labelBgPadding?: [number, number];
3302
+ labelBgBorderRadius?: number;
3303
+ style?: import('react').CSSProperties;
3304
+ className?: string;
3305
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3306
+ focusable?: boolean;
3307
+ data: import('../xyflow/types').RelationshipData;
3308
+ readonly id: string;
3309
+ readonly type: "relationship";
3310
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
3311
+ source: string;
3312
+ target: string;
3313
+ sourceHandle?: string | null;
3314
+ targetHandle?: string | null;
3315
+ animated?: boolean;
3316
+ hidden?: boolean;
3317
+ deletable?: boolean;
3318
+ selectable?: boolean;
3319
+ selected?: boolean;
3320
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
3321
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
3322
+ zIndex?: number;
3323
+ ariaLabel?: string;
3324
+ interactionWidth?: number;
3325
+ label?: import('react').ReactNode;
3326
+ labelStyle?: import('react').CSSProperties;
3327
+ labelShowBg?: boolean;
3328
+ labelBgStyle?: import('react').CSSProperties;
3329
+ labelBgPadding?: [number, number];
3330
+ labelBgBorderRadius?: number;
3331
+ style?: import('react').CSSProperties;
3332
+ className?: string;
3333
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3334
+ focusable?: boolean;
3335
+ data: import('../xyflow/types').RelationshipData;
3336
+ readonly id: string;
3337
+ readonly type: "relationship";
3338
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
3339
+ source: string;
3340
+ target: string;
3341
+ sourceHandle?: string | null;
3342
+ targetHandle?: string | null;
3343
+ animated?: boolean;
3344
+ hidden?: boolean;
3345
+ deletable?: boolean;
3346
+ selectable?: boolean;
3347
+ selected?: boolean;
3348
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
3349
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
3350
+ zIndex?: number;
3351
+ ariaLabel?: string;
3352
+ interactionWidth?: number;
3353
+ label?: import('react').ReactNode;
3354
+ labelStyle?: import('react').CSSProperties;
3355
+ labelShowBg?: boolean;
3356
+ labelBgStyle?: import('react').CSSProperties;
3357
+ labelBgPadding?: [number, number];
3358
+ labelBgBorderRadius?: number;
3359
+ style?: import('react').CSSProperties;
3360
+ className?: string;
3361
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3362
+ focusable?: boolean;
3363
+ data: import('../xyflow/types').RelationshipData;
3364
+ readonly id: string;
3365
+ readonly type: "relationship";
3366
+ }>>), replace?: boolean | undefined) => void;
3367
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
3368
+ source: string;
3369
+ target: string;
3370
+ sourceHandle?: string | null;
3371
+ targetHandle?: string | null;
3372
+ animated?: boolean;
3373
+ hidden?: boolean;
3374
+ deletable?: boolean;
3375
+ selectable?: boolean;
3376
+ selected?: boolean;
3377
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
3378
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
3379
+ zIndex?: number;
3380
+ ariaLabel?: string;
3381
+ interactionWidth?: number;
3382
+ label?: import('react').ReactNode;
3383
+ labelStyle?: import('react').CSSProperties;
3384
+ labelShowBg?: boolean;
3385
+ labelBgStyle?: import('react').CSSProperties;
3386
+ labelBgPadding?: [number, number];
3387
+ labelBgBorderRadius?: number;
3388
+ style?: import('react').CSSProperties;
3389
+ className?: string;
3390
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3391
+ focusable?: boolean;
3392
+ data: import('../xyflow/types').RelationshipData;
3393
+ readonly id: string;
3394
+ readonly type: "relationship";
3395
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
3396
+ source: string;
3397
+ target: string;
3398
+ sourceHandle?: string | null;
3399
+ targetHandle?: string | null;
3400
+ animated?: boolean;
3401
+ hidden?: boolean;
3402
+ deletable?: boolean;
3403
+ selectable?: boolean;
3404
+ selected?: boolean;
3405
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
3406
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
3407
+ zIndex?: number;
3408
+ ariaLabel?: string;
3409
+ interactionWidth?: number;
3410
+ label?: import('react').ReactNode;
3411
+ labelStyle?: import('react').CSSProperties;
3412
+ labelShowBg?: boolean;
3413
+ labelBgStyle?: import('react').CSSProperties;
3414
+ labelBgPadding?: [number, number];
3415
+ labelBgBorderRadius?: number;
3416
+ style?: import('react').CSSProperties;
3417
+ className?: string;
3418
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3419
+ focusable?: boolean;
3420
+ data: import('../xyflow/types').RelationshipData;
3421
+ readonly id: string;
3422
+ readonly type: "relationship";
3423
+ }>) => void) => () => void;
3424
+ }) => void;
1237
3425
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
1238
3426
  fitDiagram: (xyStore: {
1239
3427
  getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
@@ -1466,7 +3654,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
1466
3654
  }) => void;
1467
3655
  nextDynamicStep: (increment?: number | undefined) => void;
1468
3656
  stopDynamicView: () => void;
1469
- } | Partial<{
3657
+ }) => {
1470
3658
  view: DiagramView;
1471
3659
  readonly: boolean;
1472
3660
  showElementLinks: boolean;
@@ -1476,6 +3664,9 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
1476
3664
  pannable: boolean;
1477
3665
  nodesDraggable: boolean;
1478
3666
  nodesSelectable: boolean;
3667
+ experimentalEdgeEditing: boolean;
3668
+ viewSyncState: "synced" | "changed";
3669
+ viewSyncDebounceTimeout: number | null;
1479
3670
  xyflow: XYFlowInstance;
1480
3671
  initialized: boolean;
1481
3672
  xyflowSynced: boolean;
@@ -1491,7 +3682,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
1491
3682
  fromView: ViewID;
1492
3683
  toView: ViewID;
1493
3684
  element: DiagramNode;
1494
- elementCenterScreenPosition: XYPosition;
3685
+ elementScreenPosition: XYPosition;
1495
3686
  positionCorrected: boolean;
1496
3687
  } | null;
1497
3688
  viewportChanged: boolean;
@@ -1513,9 +3704,8 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
1513
3704
  setLastClickedEdge: (edgeId: string | null) => void;
1514
3705
  resetLastClicked: () => void;
1515
3706
  getElement: (id: Fqn) => DiagramNode | null;
1516
- triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
1517
- triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
1518
- fitDiagram: (xyStore: {
3707
+ triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
3708
+ triggerSaveManualLayout: (xystore: {
1519
3709
  getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
1520
3710
  source: string;
1521
3711
  target: string;
@@ -1744,56 +3934,6 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
1744
3934
  readonly type: "relationship";
1745
3935
  }>) => void) => () => void;
1746
3936
  }) => void;
1747
- nextDynamicStep: (increment?: number | undefined) => void;
1748
- stopDynamicView: () => void;
1749
- }> | ((state: {
1750
- view: DiagramView;
1751
- readonly: boolean;
1752
- showElementLinks: boolean;
1753
- fitViewEnabled: boolean;
1754
- fitViewPadding: number;
1755
- zoomable: boolean;
1756
- pannable: boolean;
1757
- nodesDraggable: boolean;
1758
- nodesSelectable: boolean;
1759
- xyflow: XYFlowInstance;
1760
- initialized: boolean;
1761
- xyflowSynced: boolean;
1762
- activeDynamicViewStep: number | null;
1763
- lastClickedNodeId: string | null;
1764
- lastClickedEdgeId: string | null;
1765
- focusedNodeId: string | null;
1766
- hoveredNodeId: string | null;
1767
- hoveredEdgeId: string | null;
1768
- dimmed: ReadonlySet<string>;
1769
- previousViews: DiagramView[];
1770
- lastOnNavigate: {
1771
- fromView: ViewID;
1772
- toView: ViewID;
1773
- element: DiagramNode;
1774
- elementCenterScreenPosition: XYPosition;
1775
- positionCorrected: boolean;
1776
- } | null;
1777
- viewportChanged: boolean;
1778
- onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
1779
- onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
1780
- onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
1781
- onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
1782
- onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
1783
- onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
1784
- onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
1785
- onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
1786
- onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
1787
- isDynamicView: () => boolean;
1788
- updateView: (view: DiagramView) => void;
1789
- focusOnNode: (nodeId: string) => void;
1790
- setHoveredNode: (nodeId: string | null) => void;
1791
- setHoveredEdge: (edgeId: string | null) => void;
1792
- setLastClickedNode: (nodeId: string | null) => void;
1793
- setLastClickedEdge: (edgeId: string | null) => void;
1794
- resetLastClicked: () => void;
1795
- getElement: (id: Fqn) => DiagramNode | null;
1796
- triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
1797
3937
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
1798
3938
  fitDiagram: (xyStore: {
1799
3939
  getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
@@ -2026,7 +4166,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
2026
4166
  }) => void;
2027
4167
  nextDynamicStep: (increment?: number | undefined) => void;
2028
4168
  stopDynamicView: () => void;
2029
- }) => {
4169
+ } | Partial<{
2030
4170
  view: DiagramView;
2031
4171
  readonly: boolean;
2032
4172
  showElementLinks: boolean;
@@ -2036,6 +4176,9 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
2036
4176
  pannable: boolean;
2037
4177
  nodesDraggable: boolean;
2038
4178
  nodesSelectable: boolean;
4179
+ experimentalEdgeEditing: boolean;
4180
+ viewSyncState: "synced" | "changed";
4181
+ viewSyncDebounceTimeout: number | null;
2039
4182
  xyflow: XYFlowInstance;
2040
4183
  initialized: boolean;
2041
4184
  xyflowSynced: boolean;
@@ -2051,7 +4194,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
2051
4194
  fromView: ViewID;
2052
4195
  toView: ViewID;
2053
4196
  element: DiagramNode;
2054
- elementCenterScreenPosition: XYPosition;
4197
+ elementScreenPosition: XYPosition;
2055
4198
  positionCorrected: boolean;
2056
4199
  } | null;
2057
4200
  viewportChanged: boolean;
@@ -2073,9 +4216,8 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
2073
4216
  setLastClickedEdge: (edgeId: string | null) => void;
2074
4217
  resetLastClicked: () => void;
2075
4218
  getElement: (id: Fqn) => DiagramNode | null;
2076
- triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
2077
- triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
2078
- fitDiagram: (xyStore: {
4219
+ triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
4220
+ triggerSaveManualLayout: (xystore: {
2079
4221
  getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
2080
4222
  source: string;
2081
4223
  target: string;
@@ -2304,56 +4446,6 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
2304
4446
  readonly type: "relationship";
2305
4447
  }>) => void) => () => void;
2306
4448
  }) => void;
2307
- nextDynamicStep: (increment?: number | undefined) => void;
2308
- stopDynamicView: () => void;
2309
- } | Partial<{
2310
- view: DiagramView;
2311
- readonly: boolean;
2312
- showElementLinks: boolean;
2313
- fitViewEnabled: boolean;
2314
- fitViewPadding: number;
2315
- zoomable: boolean;
2316
- pannable: boolean;
2317
- nodesDraggable: boolean;
2318
- nodesSelectable: boolean;
2319
- xyflow: XYFlowInstance;
2320
- initialized: boolean;
2321
- xyflowSynced: boolean;
2322
- activeDynamicViewStep: number | null;
2323
- lastClickedNodeId: string | null;
2324
- lastClickedEdgeId: string | null;
2325
- focusedNodeId: string | null;
2326
- hoveredNodeId: string | null;
2327
- hoveredEdgeId: string | null;
2328
- dimmed: ReadonlySet<string>;
2329
- previousViews: DiagramView[];
2330
- lastOnNavigate: {
2331
- fromView: ViewID;
2332
- toView: ViewID;
2333
- element: DiagramNode;
2334
- elementCenterScreenPosition: XYPosition;
2335
- positionCorrected: boolean;
2336
- } | null;
2337
- viewportChanged: boolean;
2338
- onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
2339
- onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
2340
- onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
2341
- onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
2342
- onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
2343
- onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
2344
- onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
2345
- onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
2346
- onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
2347
- isDynamicView: () => boolean;
2348
- updateView: (view: DiagramView) => void;
2349
- focusOnNode: (nodeId: string) => void;
2350
- setHoveredNode: (nodeId: string | null) => void;
2351
- setHoveredEdge: (edgeId: string | null) => void;
2352
- setLastClickedNode: (nodeId: string | null) => void;
2353
- setLastClickedEdge: (edgeId: string | null) => void;
2354
- resetLastClicked: () => void;
2355
- getElement: (id: Fqn) => DiagramNode | null;
2356
- triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
2357
4449
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
2358
4450
  fitDiagram: (xyStore: {
2359
4451
  getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {