@likec4/diagram 1.1.1 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/dist/KeepAspectRatioContainer.d.ts +1 -1
  2. package/dist/LikeC4Diagram.d.ts +1 -1
  3. package/dist/LikeC4Diagram.props.d.ts +10 -5
  4. package/dist/StaticLikeC4Diagram.d.ts +1 -1
  5. package/dist/hooks/useUpdateEffect.d.ts +1 -1
  6. package/dist/icons/Clipboard.d.ts +1 -1
  7. package/dist/icons/Link.d.ts +1 -1
  8. package/dist/icons/ZoomIn.d.ts +1 -1
  9. package/dist/index.d.ts +0 -1
  10. package/dist/index.mjs +2604 -1502
  11. package/dist/mantine/EnsureMantine.d.ts +1 -1
  12. package/dist/state/DiagramContext.d.ts +2307 -192
  13. package/dist/state/WhenInitialized.d.ts +1 -1
  14. package/dist/state/diagramStore.d.ts +2220 -97
  15. package/dist/state/useDiagramStore.d.ts +2124 -9
  16. package/dist/style.css +210 -136
  17. package/dist/theme.css.d.ts +1 -0
  18. package/dist/ui/DiagramTitlePanel.d.ts +1 -2
  19. package/dist/ui/DynamicViewWalkthrough.css.d.ts +3 -0
  20. package/dist/ui/DynamicViewWalkthrough.d.ts +1 -0
  21. package/dist/ui/OptionsPanel.d.ts +1 -2
  22. package/dist/ui/index.d.ts +1 -0
  23. package/dist/ui/options/NodeOptions.d.ts +1 -2
  24. package/dist/xyflow/FitviewOnDiagramChange.d.ts +4 -2
  25. package/dist/xyflow/SyncWithDiagram.d.ts +1 -2
  26. package/dist/xyflow/XYFlow.d.ts +5 -8
  27. package/dist/xyflow/XYFlowBackground.d.ts +6 -5
  28. package/dist/xyflow/XYFlowEvents.d.ts +60 -66
  29. package/dist/xyflow/XYFlowInner.d.ts +11 -0
  30. package/dist/xyflow/diagram-to-xyflow.d.ts +2 -2
  31. package/dist/xyflow/edges/RelationshipEdge.d.ts +17 -17
  32. package/dist/xyflow/edges/edges.css.d.ts +4 -2
  33. package/dist/xyflow/edges/utils.d.ts +3 -1
  34. package/dist/xyflow/hooks/useLayoutConstraints.d.ts +1 -1
  35. package/dist/xyflow/hooks/useXYFlow.d.ts +162 -162
  36. package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts +1 -0
  37. package/dist/xyflow/nodes/compound/CompoundNode.d.ts +1 -1
  38. package/dist/xyflow/nodes/element/ElementIcon.d.ts +1 -1
  39. package/dist/xyflow/nodes/element/ElementLink.d.ts +1 -1
  40. package/dist/xyflow/nodes/element/ElementNode.d.ts +2 -2
  41. package/dist/xyflow/nodes/element/ElementShapeSvg.d.ts +2 -2
  42. package/dist/xyflow/nodes/element/element.css.d.ts +2 -1
  43. package/dist/xyflow/nodes/shared/NavigateToBtn.d.ts +1 -2
  44. package/dist/xyflow/types.d.ts +23 -23
  45. package/package.json +23 -21
  46. package/src/KeepAspectRatioContainer.tsx +1 -1
  47. package/src/LikeC4Diagram.css.ts +2 -0
  48. package/src/LikeC4Diagram.props.ts +9 -4
  49. package/src/LikeC4Diagram.tsx +17 -11
  50. package/src/StaticLikeC4Diagram.tsx +1 -0
  51. package/src/globals.css.ts +1 -0
  52. package/src/index.ts +0 -3
  53. package/src/state/DiagramContext.tsx +21 -12
  54. package/src/state/diagramStore.ts +177 -38
  55. package/src/theme.css.ts +1 -0
  56. package/src/ui/DiagramTitlePanel.css.ts +2 -1
  57. package/src/ui/DiagramTitlePanel.tsx +3 -4
  58. package/src/ui/DynamicViewWalkthrough.css.ts +46 -0
  59. package/src/ui/DynamicViewWalkthrough.tsx +86 -0
  60. package/src/ui/OptionsPanel.tsx +5 -3
  61. package/src/ui/index.ts +1 -0
  62. package/src/ui/options/NodeOptions.tsx +23 -24
  63. package/src/xyflow/FitviewOnDiagramChange.tsx +89 -69
  64. package/src/xyflow/SelectEdgesOnNodeFocus.tsx +57 -39
  65. package/src/xyflow/SyncWithDiagram.tsx +55 -107
  66. package/src/xyflow/XYFlow.tsx +51 -35
  67. package/src/xyflow/XYFlowBackground.tsx +7 -5
  68. package/src/xyflow/XYFlowEvents.tsx +100 -95
  69. package/src/xyflow/XYFlowInner.tsx +50 -0
  70. package/src/xyflow/diagram-to-xyflow.ts +16 -21
  71. package/src/xyflow/edges/RelationshipEdge.tsx +70 -34
  72. package/src/xyflow/edges/edges.css.ts +68 -34
  73. package/src/xyflow/edges/utils.ts +31 -0
  74. package/src/xyflow/nodes/compound/CompoundNode.css.ts +6 -2
  75. package/src/xyflow/nodes/compound/CompoundNode.tsx +6 -3
  76. package/src/xyflow/nodes/element/ElementLink.tsx +13 -3
  77. package/src/xyflow/nodes/element/ElementNode.tsx +24 -19
  78. package/src/xyflow/nodes/element/element.css.ts +9 -2
  79. package/src/xyflow/nodes/shared/NavigateToBtn.tsx +1 -0
  80. package/src/xyflow/types.ts +7 -8
package/dist/state/diagramStore.d.ts CHANGED
@@ -1,9 +1,10 @@
1
- import { XYFlowInstance, XYFlowNode } from '../xyflow/types';
2
- import { Change, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
3
- import { Exact, Simplify } from 'type-fest';
4
- import { MouseEvent as ReactMouseEvent } from 'react';
5
- import { XYPosition } from '@xyflow/react';
6
1
  import { DiagramNode, DiagramView, Fqn, NonEmptyArray, ViewID } from '@likec4/core';
2
+ import { XYPosition } from '@xyflow/react';
3
+ import { MouseEvent as ReactMouseEvent } from 'react';
4
+ import { Exact, Simplify } from 'type-fest';
5
+ import { Change, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
6
+ import { XYStoreApi } from '../xyflow/hooks';
7
+ import { XYFlowInstance, XYFlowNode } from '../xyflow/types';
7
8
 
8
9
  export type DiagramStore = {
9
10
  view: DiagramView;
@@ -17,11 +18,14 @@ export type DiagramStore = {
17
18
  nodesSelectable: boolean;
18
19
  xyflow: XYFlowInstance;
19
20
  initialized: boolean;
21
+ xyflowSynced: boolean;
22
+ activeDynamicViewStep: number | null;
20
23
  lastClickedNodeId: string | null;
21
24
  lastClickedEdgeId: string | null;
22
25
  focusedNodeId: string | null;
23
26
  hoveredNodeId: string | null;
24
27
  hoveredEdgeId: string | null;
28
+ dimmed: ReadonlySet<string>;
25
29
  previousViews: DiagramView[];
26
30
  lastOnNavigate: null | {
27
31
  fromView: ViewID;
@@ -34,7 +38,9 @@ export type DiagramStore = {
34
38
  } & Required<LikeC4DiagramEventHandlers>;
35
39
  export type DiagramInitialState = Pick<DiagramStore, 'view' | 'readonly' | 'showElementLinks' | 'fitViewEnabled' | 'fitViewPadding' | 'zoomable' | 'pannable' | 'nodesDraggable' | 'nodesSelectable'> & LikeC4DiagramEventHandlers;
36
40
  interface DiagramStoreActions {
41
+ isDynamicView: () => boolean;
37
42
  updateView: (view: DiagramView) => void;
43
+ focusOnNode: (nodeId: string) => void;
38
44
  setHoveredNode: (nodeId: string | null) => void;
39
45
  setHoveredEdge: (edgeId: string | null) => void;
40
46
  setLastClickedNode: (nodeId: string | null) => void;
@@ -43,11 +49,13 @@ interface DiagramStoreActions {
43
49
  getElement(id: Fqn): DiagramNode | null;
44
50
  triggerOnChange: (changes: NonEmptyArray<Change>) => void;
45
51
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
46
- fitDiagram: (centerNode?: XYFlowNode) => void;
52
+ fitDiagram: (xyStore: XYStoreApi) => void;
53
+ nextDynamicStep: (increment?: number) => void;
54
+ stopDynamicView: () => void;
47
55
  }
48
56
  export type DiagramState = Simplify<DiagramStore & DiagramStoreActions>;
49
57
  type CreateDiagramStore = DiagramInitialState & Pick<DiagramStore, 'xyflow'>;
50
- export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props: T): import('zustand/traditional').UseBoundStoreWithEqualityFn<Omit<Omit<import("zustand/vanilla").StoreApi<{
58
+ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props: T): import('zustand/traditional').UseBoundStoreWithEqualityFn<Omit<Omit<import('zustand/vanilla').StoreApi<{
51
59
  view: DiagramView;
52
60
  readonly: boolean;
53
61
  showElementLinks: boolean;
@@ -59,11 +67,14 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
59
67
  nodesSelectable: boolean;
60
68
  xyflow: XYFlowInstance;
61
69
  initialized: boolean;
70
+ xyflowSynced: boolean;
71
+ activeDynamicViewStep: number | null;
62
72
  lastClickedNodeId: string | null;
63
73
  lastClickedEdgeId: string | null;
64
74
  focusedNodeId: string | null;
65
75
  hoveredNodeId: string | null;
66
76
  hoveredEdgeId: string | null;
77
+ dimmed: ReadonlySet<string>;
67
78
  previousViews: DiagramView[];
68
79
  lastOnNavigate: {
69
80
  fromView: ViewID;
@@ -73,16 +84,18 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
73
84
  positionCorrected: boolean;
74
85
  } | null;
75
86
  viewportChanged: boolean;
76
- onChange: import("../LikeC4Diagram.props").OnChange | null | undefined;
77
- onNavigateTo: import("../LikeC4Diagram.props").OnNavigateTo | null | undefined;
78
- onNodeClick: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
79
- onNodeContextMenu: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
80
- onCanvasContextMenu: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
81
- onEdgeClick: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
82
- onEdgeContextMenu: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
83
- onCanvasClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
84
- onCanvasDblClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
87
+ onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
88
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
89
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
90
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
91
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
92
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
93
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
94
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
95
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
96
+ isDynamicView: () => boolean;
85
97
  updateView: (view: DiagramView) => void;
98
+ focusOnNode: (nodeId: string) => void;
86
99
  setHoveredNode: (nodeId: string | null) => void;
87
100
  setHoveredEdge: (edgeId: string | null) => void;
88
101
  setLastClickedNode: (nodeId: string | null) => void;
@@ -91,7 +104,237 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
91
104
  getElement: (id: Fqn) => DiagramNode | null;
92
105
  triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
93
106
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
94
- fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
107
+ fitDiagram: (xyStore: {
108
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
109
+ source: string;
110
+ target: string;
111
+ sourceHandle?: string | null;
112
+ targetHandle?: string | null;
113
+ animated?: boolean;
114
+ hidden?: boolean;
115
+ deletable?: boolean;
116
+ selectable?: boolean;
117
+ selected?: boolean;
118
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
119
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
120
+ zIndex?: number;
121
+ ariaLabel?: string;
122
+ interactionWidth?: number;
123
+ label?: import('react').ReactNode;
124
+ labelStyle?: import('react').CSSProperties;
125
+ labelShowBg?: boolean;
126
+ labelBgStyle?: import('react').CSSProperties;
127
+ labelBgPadding?: [number, number];
128
+ labelBgBorderRadius?: number;
129
+ style?: import('react').CSSProperties;
130
+ className?: string;
131
+ updatable?: import('@xyflow/react').EdgeUpdatable;
132
+ focusable?: boolean;
133
+ data: import('../xyflow/types').RelationshipData;
134
+ readonly id: string;
135
+ readonly type: "relationship";
136
+ }>;
137
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
138
+ source: string;
139
+ target: string;
140
+ sourceHandle?: string | null;
141
+ targetHandle?: string | null;
142
+ animated?: boolean;
143
+ hidden?: boolean;
144
+ deletable?: boolean;
145
+ selectable?: boolean;
146
+ selected?: boolean;
147
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
148
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
149
+ zIndex?: number;
150
+ ariaLabel?: string;
151
+ interactionWidth?: number;
152
+ label?: import('react').ReactNode;
153
+ labelStyle?: import('react').CSSProperties;
154
+ labelShowBg?: boolean;
155
+ labelBgStyle?: import('react').CSSProperties;
156
+ labelBgPadding?: [number, number];
157
+ labelBgBorderRadius?: number;
158
+ style?: import('react').CSSProperties;
159
+ className?: string;
160
+ updatable?: import('@xyflow/react').EdgeUpdatable;
161
+ focusable?: boolean;
162
+ data: import('../xyflow/types').RelationshipData;
163
+ readonly id: string;
164
+ readonly type: "relationship";
165
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
166
+ source: string;
167
+ target: string;
168
+ sourceHandle?: string | null;
169
+ targetHandle?: string | null;
170
+ animated?: boolean;
171
+ hidden?: boolean;
172
+ deletable?: boolean;
173
+ selectable?: boolean;
174
+ selected?: boolean;
175
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
176
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
177
+ zIndex?: number;
178
+ ariaLabel?: string;
179
+ interactionWidth?: number;
180
+ label?: import('react').ReactNode;
181
+ labelStyle?: import('react').CSSProperties;
182
+ labelShowBg?: boolean;
183
+ labelBgStyle?: import('react').CSSProperties;
184
+ labelBgPadding?: [number, number];
185
+ labelBgBorderRadius?: number;
186
+ style?: import('react').CSSProperties;
187
+ className?: string;
188
+ updatable?: import('@xyflow/react').EdgeUpdatable;
189
+ focusable?: boolean;
190
+ data: import('../xyflow/types').RelationshipData;
191
+ readonly id: string;
192
+ readonly type: "relationship";
193
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
194
+ source: string;
195
+ target: string;
196
+ sourceHandle?: string | null;
197
+ targetHandle?: string | null;
198
+ animated?: boolean;
199
+ hidden?: boolean;
200
+ deletable?: boolean;
201
+ selectable?: boolean;
202
+ selected?: boolean;
203
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
204
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
205
+ zIndex?: number;
206
+ ariaLabel?: string;
207
+ interactionWidth?: number;
208
+ label?: import('react').ReactNode;
209
+ labelStyle?: import('react').CSSProperties;
210
+ labelShowBg?: boolean;
211
+ labelBgStyle?: import('react').CSSProperties;
212
+ labelBgPadding?: [number, number];
213
+ labelBgBorderRadius?: number;
214
+ style?: import('react').CSSProperties;
215
+ className?: string;
216
+ updatable?: import('@xyflow/react').EdgeUpdatable;
217
+ focusable?: boolean;
218
+ data: import('../xyflow/types').RelationshipData;
219
+ readonly id: string;
220
+ readonly type: "relationship";
221
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
222
+ source: string;
223
+ target: string;
224
+ sourceHandle?: string | null;
225
+ targetHandle?: string | null;
226
+ animated?: boolean;
227
+ hidden?: boolean;
228
+ deletable?: boolean;
229
+ selectable?: boolean;
230
+ selected?: boolean;
231
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
232
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
233
+ zIndex?: number;
234
+ ariaLabel?: string;
235
+ interactionWidth?: number;
236
+ label?: import('react').ReactNode;
237
+ labelStyle?: import('react').CSSProperties;
238
+ labelShowBg?: boolean;
239
+ labelBgStyle?: import('react').CSSProperties;
240
+ labelBgPadding?: [number, number];
241
+ labelBgBorderRadius?: number;
242
+ style?: import('react').CSSProperties;
243
+ className?: string;
244
+ updatable?: import('@xyflow/react').EdgeUpdatable;
245
+ focusable?: boolean;
246
+ data: import('../xyflow/types').RelationshipData;
247
+ readonly id: string;
248
+ readonly type: "relationship";
249
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
250
+ source: string;
251
+ target: string;
252
+ sourceHandle?: string | null;
253
+ targetHandle?: string | null;
254
+ animated?: boolean;
255
+ hidden?: boolean;
256
+ deletable?: boolean;
257
+ selectable?: boolean;
258
+ selected?: boolean;
259
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
260
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
261
+ zIndex?: number;
262
+ ariaLabel?: string;
263
+ interactionWidth?: number;
264
+ label?: import('react').ReactNode;
265
+ labelStyle?: import('react').CSSProperties;
266
+ labelShowBg?: boolean;
267
+ labelBgStyle?: import('react').CSSProperties;
268
+ labelBgPadding?: [number, number];
269
+ labelBgBorderRadius?: number;
270
+ style?: import('react').CSSProperties;
271
+ className?: string;
272
+ updatable?: import('@xyflow/react').EdgeUpdatable;
273
+ focusable?: boolean;
274
+ data: import('../xyflow/types').RelationshipData;
275
+ readonly id: string;
276
+ readonly type: "relationship";
277
+ }>>), replace?: boolean | undefined) => void;
278
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
279
+ source: string;
280
+ target: string;
281
+ sourceHandle?: string | null;
282
+ targetHandle?: string | null;
283
+ animated?: boolean;
284
+ hidden?: boolean;
285
+ deletable?: boolean;
286
+ selectable?: boolean;
287
+ selected?: boolean;
288
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
289
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
290
+ zIndex?: number;
291
+ ariaLabel?: string;
292
+ interactionWidth?: number;
293
+ label?: import('react').ReactNode;
294
+ labelStyle?: import('react').CSSProperties;
295
+ labelShowBg?: boolean;
296
+ labelBgStyle?: import('react').CSSProperties;
297
+ labelBgPadding?: [number, number];
298
+ labelBgBorderRadius?: number;
299
+ style?: import('react').CSSProperties;
300
+ className?: string;
301
+ updatable?: import('@xyflow/react').EdgeUpdatable;
302
+ focusable?: boolean;
303
+ data: import('../xyflow/types').RelationshipData;
304
+ readonly id: string;
305
+ readonly type: "relationship";
306
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
307
+ source: string;
308
+ target: string;
309
+ sourceHandle?: string | null;
310
+ targetHandle?: string | null;
311
+ animated?: boolean;
312
+ hidden?: boolean;
313
+ deletable?: boolean;
314
+ selectable?: boolean;
315
+ selected?: boolean;
316
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
317
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
318
+ zIndex?: number;
319
+ ariaLabel?: string;
320
+ interactionWidth?: number;
321
+ label?: import('react').ReactNode;
322
+ labelStyle?: import('react').CSSProperties;
323
+ labelShowBg?: boolean;
324
+ labelBgStyle?: import('react').CSSProperties;
325
+ labelBgPadding?: [number, number];
326
+ labelBgBorderRadius?: number;
327
+ style?: import('react').CSSProperties;
328
+ className?: string;
329
+ updatable?: import('@xyflow/react').EdgeUpdatable;
330
+ focusable?: boolean;
331
+ data: import('../xyflow/types').RelationshipData;
332
+ readonly id: string;
333
+ readonly type: "relationship";
334
+ }>) => void) => () => void;
335
+ }) => void;
336
+ nextDynamicStep: (increment?: number | undefined) => void;
337
+ stopDynamicView: () => void;
95
338
  }>, "subscribe"> & {
96
339
  subscribe: {
97
340
  (listener: (selectedState: {
@@ -106,11 +349,14 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
106
349
  nodesSelectable: boolean;
107
350
  xyflow: XYFlowInstance;
108
351
  initialized: boolean;
352
+ xyflowSynced: boolean;
353
+ activeDynamicViewStep: number | null;
109
354
  lastClickedNodeId: string | null;
110
355
  lastClickedEdgeId: string | null;
111
356
  focusedNodeId: string | null;
112
357
  hoveredNodeId: string | null;
113
358
  hoveredEdgeId: string | null;
359
+ dimmed: ReadonlySet<string>;
114
360
  previousViews: DiagramView[];
115
361
  lastOnNavigate: {
116
362
  fromView: ViewID;
@@ -120,16 +366,18 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
120
366
  positionCorrected: boolean;
121
367
  } | null;
122
368
  viewportChanged: boolean;
123
- onChange: import("../LikeC4Diagram.props").OnChange | null | undefined;
124
- onNavigateTo: import("../LikeC4Diagram.props").OnNavigateTo | null | undefined;
125
- onNodeClick: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
126
- onNodeContextMenu: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
127
- onCanvasContextMenu: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
128
- onEdgeClick: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
129
- onEdgeContextMenu: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
130
- onCanvasClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
131
- onCanvasDblClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
369
+ onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
370
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
371
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
372
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
373
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
374
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
375
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
376
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
377
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
378
+ isDynamicView: () => boolean;
132
379
  updateView: (view: DiagramView) => void;
380
+ focusOnNode: (nodeId: string) => void;
133
381
  setHoveredNode: (nodeId: string | null) => void;
134
382
  setHoveredEdge: (edgeId: string | null) => void;
135
383
  setLastClickedNode: (nodeId: string | null) => void;
@@ -138,7 +386,237 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
138
386
  getElement: (id: Fqn) => DiagramNode | null;
139
387
  triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
140
388
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
141
- fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
389
+ fitDiagram: (xyStore: {
390
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
391
+ source: string;
392
+ target: string;
393
+ sourceHandle?: string | null;
394
+ targetHandle?: string | null;
395
+ animated?: boolean;
396
+ hidden?: boolean;
397
+ deletable?: boolean;
398
+ selectable?: boolean;
399
+ selected?: boolean;
400
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
401
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
402
+ zIndex?: number;
403
+ ariaLabel?: string;
404
+ interactionWidth?: number;
405
+ label?: import('react').ReactNode;
406
+ labelStyle?: import('react').CSSProperties;
407
+ labelShowBg?: boolean;
408
+ labelBgStyle?: import('react').CSSProperties;
409
+ labelBgPadding?: [number, number];
410
+ labelBgBorderRadius?: number;
411
+ style?: import('react').CSSProperties;
412
+ className?: string;
413
+ updatable?: import('@xyflow/react').EdgeUpdatable;
414
+ focusable?: boolean;
415
+ data: import('../xyflow/types').RelationshipData;
416
+ readonly id: string;
417
+ readonly type: "relationship";
418
+ }>;
419
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
420
+ source: string;
421
+ target: string;
422
+ sourceHandle?: string | null;
423
+ targetHandle?: string | null;
424
+ animated?: boolean;
425
+ hidden?: boolean;
426
+ deletable?: boolean;
427
+ selectable?: boolean;
428
+ selected?: boolean;
429
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
430
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
431
+ zIndex?: number;
432
+ ariaLabel?: string;
433
+ interactionWidth?: number;
434
+ label?: import('react').ReactNode;
435
+ labelStyle?: import('react').CSSProperties;
436
+ labelShowBg?: boolean;
437
+ labelBgStyle?: import('react').CSSProperties;
438
+ labelBgPadding?: [number, number];
439
+ labelBgBorderRadius?: number;
440
+ style?: import('react').CSSProperties;
441
+ className?: string;
442
+ updatable?: import('@xyflow/react').EdgeUpdatable;
443
+ focusable?: boolean;
444
+ data: import('../xyflow/types').RelationshipData;
445
+ readonly id: string;
446
+ readonly type: "relationship";
447
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
448
+ source: string;
449
+ target: string;
450
+ sourceHandle?: string | null;
451
+ targetHandle?: string | null;
452
+ animated?: boolean;
453
+ hidden?: boolean;
454
+ deletable?: boolean;
455
+ selectable?: boolean;
456
+ selected?: boolean;
457
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
458
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
459
+ zIndex?: number;
460
+ ariaLabel?: string;
461
+ interactionWidth?: number;
462
+ label?: import('react').ReactNode;
463
+ labelStyle?: import('react').CSSProperties;
464
+ labelShowBg?: boolean;
465
+ labelBgStyle?: import('react').CSSProperties;
466
+ labelBgPadding?: [number, number];
467
+ labelBgBorderRadius?: number;
468
+ style?: import('react').CSSProperties;
469
+ className?: string;
470
+ updatable?: import('@xyflow/react').EdgeUpdatable;
471
+ focusable?: boolean;
472
+ data: import('../xyflow/types').RelationshipData;
473
+ readonly id: string;
474
+ readonly type: "relationship";
475
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
476
+ source: string;
477
+ target: string;
478
+ sourceHandle?: string | null;
479
+ targetHandle?: string | null;
480
+ animated?: boolean;
481
+ hidden?: boolean;
482
+ deletable?: boolean;
483
+ selectable?: boolean;
484
+ selected?: boolean;
485
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
486
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
487
+ zIndex?: number;
488
+ ariaLabel?: string;
489
+ interactionWidth?: number;
490
+ label?: import('react').ReactNode;
491
+ labelStyle?: import('react').CSSProperties;
492
+ labelShowBg?: boolean;
493
+ labelBgStyle?: import('react').CSSProperties;
494
+ labelBgPadding?: [number, number];
495
+ labelBgBorderRadius?: number;
496
+ style?: import('react').CSSProperties;
497
+ className?: string;
498
+ updatable?: import('@xyflow/react').EdgeUpdatable;
499
+ focusable?: boolean;
500
+ data: import('../xyflow/types').RelationshipData;
501
+ readonly id: string;
502
+ readonly type: "relationship";
503
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
504
+ source: string;
505
+ target: string;
506
+ sourceHandle?: string | null;
507
+ targetHandle?: string | null;
508
+ animated?: boolean;
509
+ hidden?: boolean;
510
+ deletable?: boolean;
511
+ selectable?: boolean;
512
+ selected?: boolean;
513
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
514
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
515
+ zIndex?: number;
516
+ ariaLabel?: string;
517
+ interactionWidth?: number;
518
+ label?: import('react').ReactNode;
519
+ labelStyle?: import('react').CSSProperties;
520
+ labelShowBg?: boolean;
521
+ labelBgStyle?: import('react').CSSProperties;
522
+ labelBgPadding?: [number, number];
523
+ labelBgBorderRadius?: number;
524
+ style?: import('react').CSSProperties;
525
+ className?: string;
526
+ updatable?: import('@xyflow/react').EdgeUpdatable;
527
+ focusable?: boolean;
528
+ data: import('../xyflow/types').RelationshipData;
529
+ readonly id: string;
530
+ readonly type: "relationship";
531
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
532
+ source: string;
533
+ target: string;
534
+ sourceHandle?: string | null;
535
+ targetHandle?: string | null;
536
+ animated?: boolean;
537
+ hidden?: boolean;
538
+ deletable?: boolean;
539
+ selectable?: boolean;
540
+ selected?: boolean;
541
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
542
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
543
+ zIndex?: number;
544
+ ariaLabel?: string;
545
+ interactionWidth?: number;
546
+ label?: import('react').ReactNode;
547
+ labelStyle?: import('react').CSSProperties;
548
+ labelShowBg?: boolean;
549
+ labelBgStyle?: import('react').CSSProperties;
550
+ labelBgPadding?: [number, number];
551
+ labelBgBorderRadius?: number;
552
+ style?: import('react').CSSProperties;
553
+ className?: string;
554
+ updatable?: import('@xyflow/react').EdgeUpdatable;
555
+ focusable?: boolean;
556
+ data: import('../xyflow/types').RelationshipData;
557
+ readonly id: string;
558
+ readonly type: "relationship";
559
+ }>>), replace?: boolean | undefined) => void;
560
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
561
+ source: string;
562
+ target: string;
563
+ sourceHandle?: string | null;
564
+ targetHandle?: string | null;
565
+ animated?: boolean;
566
+ hidden?: boolean;
567
+ deletable?: boolean;
568
+ selectable?: boolean;
569
+ selected?: boolean;
570
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
571
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
572
+ zIndex?: number;
573
+ ariaLabel?: string;
574
+ interactionWidth?: number;
575
+ label?: import('react').ReactNode;
576
+ labelStyle?: import('react').CSSProperties;
577
+ labelShowBg?: boolean;
578
+ labelBgStyle?: import('react').CSSProperties;
579
+ labelBgPadding?: [number, number];
580
+ labelBgBorderRadius?: number;
581
+ style?: import('react').CSSProperties;
582
+ className?: string;
583
+ updatable?: import('@xyflow/react').EdgeUpdatable;
584
+ focusable?: boolean;
585
+ data: import('../xyflow/types').RelationshipData;
586
+ readonly id: string;
587
+ readonly type: "relationship";
588
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
589
+ source: string;
590
+ target: string;
591
+ sourceHandle?: string | null;
592
+ targetHandle?: string | null;
593
+ animated?: boolean;
594
+ hidden?: boolean;
595
+ deletable?: boolean;
596
+ selectable?: boolean;
597
+ selected?: boolean;
598
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
599
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
600
+ zIndex?: number;
601
+ ariaLabel?: string;
602
+ interactionWidth?: number;
603
+ label?: import('react').ReactNode;
604
+ labelStyle?: import('react').CSSProperties;
605
+ labelShowBg?: boolean;
606
+ labelBgStyle?: import('react').CSSProperties;
607
+ labelBgPadding?: [number, number];
608
+ labelBgBorderRadius?: number;
609
+ style?: import('react').CSSProperties;
610
+ className?: string;
611
+ updatable?: import('@xyflow/react').EdgeUpdatable;
612
+ focusable?: boolean;
613
+ data: import('../xyflow/types').RelationshipData;
614
+ readonly id: string;
615
+ readonly type: "relationship";
616
+ }>) => void) => () => void;
617
+ }) => void;
618
+ nextDynamicStep: (increment?: number | undefined) => void;
619
+ stopDynamicView: () => void;
142
620
  }, previousSelectedState: {
143
621
  view: DiagramView;
144
622
  readonly: boolean;
@@ -151,11 +629,14 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
151
629
  nodesSelectable: boolean;
152
630
  xyflow: XYFlowInstance;
153
631
  initialized: boolean;
632
+ xyflowSynced: boolean;
633
+ activeDynamicViewStep: number | null;
154
634
  lastClickedNodeId: string | null;
155
635
  lastClickedEdgeId: string | null;
156
636
  focusedNodeId: string | null;
157
637
  hoveredNodeId: string | null;
158
638
  hoveredEdgeId: string | null;
639
+ dimmed: ReadonlySet<string>;
159
640
  previousViews: DiagramView[];
160
641
  lastOnNavigate: {
161
642
  fromView: ViewID;
@@ -165,16 +646,18 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
165
646
  positionCorrected: boolean;
166
647
  } | null;
167
648
  viewportChanged: boolean;
168
- onChange: import("../LikeC4Diagram.props").OnChange | null | undefined;
169
- onNavigateTo: import("../LikeC4Diagram.props").OnNavigateTo | null | undefined;
170
- onNodeClick: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
171
- onNodeContextMenu: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
172
- onCanvasContextMenu: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
173
- onEdgeClick: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
174
- onEdgeContextMenu: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
175
- onCanvasClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
176
- onCanvasDblClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
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;
177
659
  updateView: (view: DiagramView) => void;
660
+ focusOnNode: (nodeId: string) => void;
178
661
  setHoveredNode: (nodeId: string | null) => void;
179
662
  setHoveredEdge: (edgeId: string | null) => void;
180
663
  setLastClickedNode: (nodeId: string | null) => void;
@@ -183,7 +666,237 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
183
666
  getElement: (id: Fqn) => DiagramNode | null;
184
667
  triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
185
668
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
186
- fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
669
+ fitDiagram: (xyStore: {
670
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
671
+ source: string;
672
+ target: string;
673
+ sourceHandle?: string | null;
674
+ targetHandle?: string | null;
675
+ animated?: boolean;
676
+ hidden?: boolean;
677
+ deletable?: boolean;
678
+ selectable?: boolean;
679
+ selected?: boolean;
680
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
681
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
682
+ zIndex?: number;
683
+ ariaLabel?: string;
684
+ interactionWidth?: number;
685
+ label?: import('react').ReactNode;
686
+ labelStyle?: import('react').CSSProperties;
687
+ labelShowBg?: boolean;
688
+ labelBgStyle?: import('react').CSSProperties;
689
+ labelBgPadding?: [number, number];
690
+ labelBgBorderRadius?: number;
691
+ style?: import('react').CSSProperties;
692
+ className?: string;
693
+ updatable?: import('@xyflow/react').EdgeUpdatable;
694
+ focusable?: boolean;
695
+ data: import('../xyflow/types').RelationshipData;
696
+ readonly id: string;
697
+ readonly type: "relationship";
698
+ }>;
699
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
700
+ source: string;
701
+ target: string;
702
+ sourceHandle?: string | null;
703
+ targetHandle?: string | null;
704
+ animated?: boolean;
705
+ hidden?: boolean;
706
+ deletable?: boolean;
707
+ selectable?: boolean;
708
+ selected?: boolean;
709
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
710
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
711
+ zIndex?: number;
712
+ ariaLabel?: string;
713
+ interactionWidth?: number;
714
+ label?: import('react').ReactNode;
715
+ labelStyle?: import('react').CSSProperties;
716
+ labelShowBg?: boolean;
717
+ labelBgStyle?: import('react').CSSProperties;
718
+ labelBgPadding?: [number, number];
719
+ labelBgBorderRadius?: number;
720
+ style?: import('react').CSSProperties;
721
+ className?: string;
722
+ updatable?: import('@xyflow/react').EdgeUpdatable;
723
+ focusable?: boolean;
724
+ data: import('../xyflow/types').RelationshipData;
725
+ readonly id: string;
726
+ readonly type: "relationship";
727
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
728
+ source: string;
729
+ target: string;
730
+ sourceHandle?: string | null;
731
+ targetHandle?: string | null;
732
+ animated?: boolean;
733
+ hidden?: boolean;
734
+ deletable?: boolean;
735
+ selectable?: boolean;
736
+ selected?: boolean;
737
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
738
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
739
+ zIndex?: number;
740
+ ariaLabel?: string;
741
+ interactionWidth?: number;
742
+ label?: import('react').ReactNode;
743
+ labelStyle?: import('react').CSSProperties;
744
+ labelShowBg?: boolean;
745
+ labelBgStyle?: import('react').CSSProperties;
746
+ labelBgPadding?: [number, number];
747
+ labelBgBorderRadius?: number;
748
+ style?: import('react').CSSProperties;
749
+ className?: string;
750
+ updatable?: import('@xyflow/react').EdgeUpdatable;
751
+ focusable?: boolean;
752
+ data: import('../xyflow/types').RelationshipData;
753
+ readonly id: string;
754
+ readonly type: "relationship";
755
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
756
+ source: string;
757
+ target: string;
758
+ sourceHandle?: string | null;
759
+ targetHandle?: string | null;
760
+ animated?: boolean;
761
+ hidden?: boolean;
762
+ deletable?: boolean;
763
+ selectable?: boolean;
764
+ selected?: boolean;
765
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
766
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
767
+ zIndex?: number;
768
+ ariaLabel?: string;
769
+ interactionWidth?: number;
770
+ label?: import('react').ReactNode;
771
+ labelStyle?: import('react').CSSProperties;
772
+ labelShowBg?: boolean;
773
+ labelBgStyle?: import('react').CSSProperties;
774
+ labelBgPadding?: [number, number];
775
+ labelBgBorderRadius?: number;
776
+ style?: import('react').CSSProperties;
777
+ className?: string;
778
+ updatable?: import('@xyflow/react').EdgeUpdatable;
779
+ focusable?: boolean;
780
+ data: import('../xyflow/types').RelationshipData;
781
+ readonly id: string;
782
+ readonly type: "relationship";
783
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
784
+ source: string;
785
+ target: string;
786
+ sourceHandle?: string | null;
787
+ targetHandle?: string | null;
788
+ animated?: boolean;
789
+ hidden?: boolean;
790
+ deletable?: boolean;
791
+ selectable?: boolean;
792
+ selected?: boolean;
793
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
794
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
795
+ zIndex?: number;
796
+ ariaLabel?: string;
797
+ interactionWidth?: number;
798
+ label?: import('react').ReactNode;
799
+ labelStyle?: import('react').CSSProperties;
800
+ labelShowBg?: boolean;
801
+ labelBgStyle?: import('react').CSSProperties;
802
+ labelBgPadding?: [number, number];
803
+ labelBgBorderRadius?: number;
804
+ style?: import('react').CSSProperties;
805
+ className?: string;
806
+ updatable?: import('@xyflow/react').EdgeUpdatable;
807
+ focusable?: boolean;
808
+ data: import('../xyflow/types').RelationshipData;
809
+ readonly id: string;
810
+ readonly type: "relationship";
811
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
812
+ source: string;
813
+ target: string;
814
+ sourceHandle?: string | null;
815
+ targetHandle?: string | null;
816
+ animated?: boolean;
817
+ hidden?: boolean;
818
+ deletable?: boolean;
819
+ selectable?: boolean;
820
+ selected?: boolean;
821
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
822
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
823
+ zIndex?: number;
824
+ ariaLabel?: string;
825
+ interactionWidth?: number;
826
+ label?: import('react').ReactNode;
827
+ labelStyle?: import('react').CSSProperties;
828
+ labelShowBg?: boolean;
829
+ labelBgStyle?: import('react').CSSProperties;
830
+ labelBgPadding?: [number, number];
831
+ labelBgBorderRadius?: number;
832
+ style?: import('react').CSSProperties;
833
+ className?: string;
834
+ updatable?: import('@xyflow/react').EdgeUpdatable;
835
+ focusable?: boolean;
836
+ data: import('../xyflow/types').RelationshipData;
837
+ readonly id: string;
838
+ readonly type: "relationship";
839
+ }>>), replace?: boolean | undefined) => void;
840
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
841
+ source: string;
842
+ target: string;
843
+ sourceHandle?: string | null;
844
+ targetHandle?: string | null;
845
+ animated?: boolean;
846
+ hidden?: boolean;
847
+ deletable?: boolean;
848
+ selectable?: boolean;
849
+ selected?: boolean;
850
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
851
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
852
+ zIndex?: number;
853
+ ariaLabel?: string;
854
+ interactionWidth?: number;
855
+ label?: import('react').ReactNode;
856
+ labelStyle?: import('react').CSSProperties;
857
+ labelShowBg?: boolean;
858
+ labelBgStyle?: import('react').CSSProperties;
859
+ labelBgPadding?: [number, number];
860
+ labelBgBorderRadius?: number;
861
+ style?: import('react').CSSProperties;
862
+ className?: string;
863
+ updatable?: import('@xyflow/react').EdgeUpdatable;
864
+ focusable?: boolean;
865
+ data: import('../xyflow/types').RelationshipData;
866
+ readonly id: string;
867
+ readonly type: "relationship";
868
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
869
+ source: string;
870
+ target: string;
871
+ sourceHandle?: string | null;
872
+ targetHandle?: string | null;
873
+ animated?: boolean;
874
+ hidden?: boolean;
875
+ deletable?: boolean;
876
+ selectable?: boolean;
877
+ selected?: boolean;
878
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
879
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
880
+ zIndex?: number;
881
+ ariaLabel?: string;
882
+ interactionWidth?: number;
883
+ label?: import('react').ReactNode;
884
+ labelStyle?: import('react').CSSProperties;
885
+ labelShowBg?: boolean;
886
+ labelBgStyle?: import('react').CSSProperties;
887
+ labelBgPadding?: [number, number];
888
+ labelBgBorderRadius?: number;
889
+ style?: import('react').CSSProperties;
890
+ className?: string;
891
+ updatable?: import('@xyflow/react').EdgeUpdatable;
892
+ focusable?: boolean;
893
+ data: import('../xyflow/types').RelationshipData;
894
+ readonly id: string;
895
+ readonly type: "relationship";
896
+ }>) => void) => () => void;
897
+ }) => void;
898
+ nextDynamicStep: (increment?: number | undefined) => void;
899
+ stopDynamicView: () => void;
187
900
  }) => void): () => void;
188
901
  <U>(selector: (state: {
189
902
  view: DiagramView;
@@ -197,11 +910,14 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
197
910
  nodesSelectable: boolean;
198
911
  xyflow: XYFlowInstance;
199
912
  initialized: boolean;
913
+ xyflowSynced: boolean;
914
+ activeDynamicViewStep: number | null;
200
915
  lastClickedNodeId: string | null;
201
916
  lastClickedEdgeId: string | null;
202
917
  focusedNodeId: string | null;
203
918
  hoveredNodeId: string | null;
204
919
  hoveredEdgeId: string | null;
920
+ dimmed: ReadonlySet<string>;
205
921
  previousViews: DiagramView[];
206
922
  lastOnNavigate: {
207
923
  fromView: ViewID;
@@ -211,16 +927,18 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
211
927
  positionCorrected: boolean;
212
928
  } | null;
213
929
  viewportChanged: boolean;
214
- onChange: import("../LikeC4Diagram.props").OnChange | null | undefined;
215
- onNavigateTo: import("../LikeC4Diagram.props").OnNavigateTo | null | undefined;
216
- onNodeClick: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
217
- onNodeContextMenu: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
218
- onCanvasContextMenu: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
219
- onEdgeClick: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
220
- onEdgeContextMenu: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
221
- onCanvasClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
222
- onCanvasDblClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
930
+ onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
931
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
932
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
933
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
934
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
935
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
936
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
937
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
938
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
939
+ isDynamicView: () => boolean;
223
940
  updateView: (view: DiagramView) => void;
941
+ focusOnNode: (nodeId: string) => void;
224
942
  setHoveredNode: (nodeId: string | null) => void;
225
943
  setHoveredEdge: (edgeId: string | null) => void;
226
944
  setLastClickedNode: (nodeId: string | null) => void;
@@ -229,7 +947,237 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
229
947
  getElement: (id: Fqn) => DiagramNode | null;
230
948
  triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
231
949
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
232
- fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
950
+ fitDiagram: (xyStore: {
951
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
952
+ source: string;
953
+ target: string;
954
+ sourceHandle?: string | null;
955
+ targetHandle?: string | null;
956
+ animated?: boolean;
957
+ hidden?: boolean;
958
+ deletable?: boolean;
959
+ selectable?: boolean;
960
+ selected?: boolean;
961
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
962
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
963
+ zIndex?: number;
964
+ ariaLabel?: string;
965
+ interactionWidth?: number;
966
+ label?: import('react').ReactNode;
967
+ labelStyle?: import('react').CSSProperties;
968
+ labelShowBg?: boolean;
969
+ labelBgStyle?: import('react').CSSProperties;
970
+ labelBgPadding?: [number, number];
971
+ labelBgBorderRadius?: number;
972
+ style?: import('react').CSSProperties;
973
+ className?: string;
974
+ updatable?: import('@xyflow/react').EdgeUpdatable;
975
+ focusable?: boolean;
976
+ data: import('../xyflow/types').RelationshipData;
977
+ readonly id: string;
978
+ readonly type: "relationship";
979
+ }>;
980
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
981
+ source: string;
982
+ target: string;
983
+ sourceHandle?: string | null;
984
+ targetHandle?: string | null;
985
+ animated?: boolean;
986
+ hidden?: boolean;
987
+ deletable?: boolean;
988
+ selectable?: boolean;
989
+ selected?: boolean;
990
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
991
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
992
+ zIndex?: number;
993
+ ariaLabel?: string;
994
+ interactionWidth?: number;
995
+ label?: import('react').ReactNode;
996
+ labelStyle?: import('react').CSSProperties;
997
+ labelShowBg?: boolean;
998
+ labelBgStyle?: import('react').CSSProperties;
999
+ labelBgPadding?: [number, number];
1000
+ labelBgBorderRadius?: number;
1001
+ style?: import('react').CSSProperties;
1002
+ className?: string;
1003
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1004
+ focusable?: boolean;
1005
+ data: import('../xyflow/types').RelationshipData;
1006
+ readonly id: string;
1007
+ readonly type: "relationship";
1008
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
1009
+ source: string;
1010
+ target: string;
1011
+ sourceHandle?: string | null;
1012
+ targetHandle?: string | null;
1013
+ animated?: boolean;
1014
+ hidden?: boolean;
1015
+ deletable?: boolean;
1016
+ selectable?: boolean;
1017
+ selected?: boolean;
1018
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1019
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1020
+ zIndex?: number;
1021
+ ariaLabel?: string;
1022
+ interactionWidth?: number;
1023
+ label?: import('react').ReactNode;
1024
+ labelStyle?: import('react').CSSProperties;
1025
+ labelShowBg?: boolean;
1026
+ labelBgStyle?: import('react').CSSProperties;
1027
+ labelBgPadding?: [number, number];
1028
+ labelBgBorderRadius?: number;
1029
+ style?: import('react').CSSProperties;
1030
+ className?: string;
1031
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1032
+ focusable?: boolean;
1033
+ data: import('../xyflow/types').RelationshipData;
1034
+ readonly id: string;
1035
+ readonly type: "relationship";
1036
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1037
+ source: string;
1038
+ target: string;
1039
+ sourceHandle?: string | null;
1040
+ targetHandle?: string | null;
1041
+ animated?: boolean;
1042
+ hidden?: boolean;
1043
+ deletable?: boolean;
1044
+ selectable?: boolean;
1045
+ selected?: boolean;
1046
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1047
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1048
+ zIndex?: number;
1049
+ ariaLabel?: string;
1050
+ interactionWidth?: number;
1051
+ label?: import('react').ReactNode;
1052
+ labelStyle?: import('react').CSSProperties;
1053
+ labelShowBg?: boolean;
1054
+ labelBgStyle?: import('react').CSSProperties;
1055
+ labelBgPadding?: [number, number];
1056
+ labelBgBorderRadius?: number;
1057
+ style?: import('react').CSSProperties;
1058
+ className?: string;
1059
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1060
+ focusable?: boolean;
1061
+ data: import('../xyflow/types').RelationshipData;
1062
+ readonly id: string;
1063
+ readonly type: "relationship";
1064
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
1065
+ source: string;
1066
+ target: string;
1067
+ sourceHandle?: string | null;
1068
+ targetHandle?: string | null;
1069
+ animated?: boolean;
1070
+ hidden?: boolean;
1071
+ deletable?: boolean;
1072
+ selectable?: boolean;
1073
+ selected?: boolean;
1074
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1075
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1076
+ zIndex?: number;
1077
+ ariaLabel?: string;
1078
+ interactionWidth?: number;
1079
+ label?: import('react').ReactNode;
1080
+ labelStyle?: import('react').CSSProperties;
1081
+ labelShowBg?: boolean;
1082
+ labelBgStyle?: import('react').CSSProperties;
1083
+ labelBgPadding?: [number, number];
1084
+ labelBgBorderRadius?: number;
1085
+ style?: import('react').CSSProperties;
1086
+ className?: string;
1087
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1088
+ focusable?: boolean;
1089
+ data: import('../xyflow/types').RelationshipData;
1090
+ readonly id: string;
1091
+ readonly type: "relationship";
1092
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
1093
+ source: string;
1094
+ target: string;
1095
+ sourceHandle?: string | null;
1096
+ targetHandle?: string | null;
1097
+ animated?: boolean;
1098
+ hidden?: boolean;
1099
+ deletable?: boolean;
1100
+ selectable?: boolean;
1101
+ selected?: boolean;
1102
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1103
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1104
+ zIndex?: number;
1105
+ ariaLabel?: string;
1106
+ interactionWidth?: number;
1107
+ label?: import('react').ReactNode;
1108
+ labelStyle?: import('react').CSSProperties;
1109
+ labelShowBg?: boolean;
1110
+ labelBgStyle?: import('react').CSSProperties;
1111
+ labelBgPadding?: [number, number];
1112
+ labelBgBorderRadius?: number;
1113
+ style?: import('react').CSSProperties;
1114
+ className?: string;
1115
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1116
+ focusable?: boolean;
1117
+ data: import('../xyflow/types').RelationshipData;
1118
+ readonly id: string;
1119
+ readonly type: "relationship";
1120
+ }>>), replace?: boolean | undefined) => void;
1121
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1122
+ source: string;
1123
+ target: string;
1124
+ sourceHandle?: string | null;
1125
+ targetHandle?: string | null;
1126
+ animated?: boolean;
1127
+ hidden?: boolean;
1128
+ deletable?: boolean;
1129
+ selectable?: boolean;
1130
+ selected?: boolean;
1131
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1132
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1133
+ zIndex?: number;
1134
+ ariaLabel?: string;
1135
+ interactionWidth?: number;
1136
+ label?: import('react').ReactNode;
1137
+ labelStyle?: import('react').CSSProperties;
1138
+ labelShowBg?: boolean;
1139
+ labelBgStyle?: import('react').CSSProperties;
1140
+ labelBgPadding?: [number, number];
1141
+ labelBgBorderRadius?: number;
1142
+ style?: import('react').CSSProperties;
1143
+ className?: string;
1144
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1145
+ focusable?: boolean;
1146
+ data: import('../xyflow/types').RelationshipData;
1147
+ readonly id: string;
1148
+ readonly type: "relationship";
1149
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1150
+ source: string;
1151
+ target: string;
1152
+ sourceHandle?: string | null;
1153
+ targetHandle?: string | null;
1154
+ animated?: boolean;
1155
+ hidden?: boolean;
1156
+ deletable?: boolean;
1157
+ selectable?: boolean;
1158
+ selected?: boolean;
1159
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1160
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1161
+ zIndex?: number;
1162
+ ariaLabel?: string;
1163
+ interactionWidth?: number;
1164
+ label?: import('react').ReactNode;
1165
+ labelStyle?: import('react').CSSProperties;
1166
+ labelShowBg?: boolean;
1167
+ labelBgStyle?: import('react').CSSProperties;
1168
+ labelBgPadding?: [number, number];
1169
+ labelBgBorderRadius?: number;
1170
+ style?: import('react').CSSProperties;
1171
+ className?: string;
1172
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1173
+ focusable?: boolean;
1174
+ data: import('../xyflow/types').RelationshipData;
1175
+ readonly id: string;
1176
+ readonly type: "relationship";
1177
+ }>) => void) => () => void;
1178
+ }) => void;
1179
+ nextDynamicStep: (increment?: number | undefined) => void;
1180
+ stopDynamicView: () => void;
233
1181
  }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
234
1182
  equalityFn?: (a: U, b: U) => boolean;
235
1183
  fireImmediately?: boolean;
@@ -250,11 +1198,14 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
250
1198
  nodesSelectable: boolean;
251
1199
  xyflow: XYFlowInstance;
252
1200
  initialized: boolean;
1201
+ xyflowSynced: boolean;
1202
+ activeDynamicViewStep: number | null;
253
1203
  lastClickedNodeId: string | null;
254
1204
  lastClickedEdgeId: string | null;
255
1205
  focusedNodeId: string | null;
256
1206
  hoveredNodeId: string | null;
257
1207
  hoveredEdgeId: string | null;
1208
+ dimmed: ReadonlySet<string>;
258
1209
  previousViews: DiagramView[];
259
1210
  lastOnNavigate: {
260
1211
  fromView: ViewID;
@@ -264,16 +1215,18 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
264
1215
  positionCorrected: boolean;
265
1216
  } | null;
266
1217
  viewportChanged: boolean;
267
- onChange: import("../LikeC4Diagram.props").OnChange | null | undefined;
268
- onNavigateTo: import("../LikeC4Diagram.props").OnNavigateTo | null | undefined;
269
- onNodeClick: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
270
- onNodeContextMenu: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
271
- onCanvasContextMenu: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
272
- onEdgeClick: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
273
- onEdgeContextMenu: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
274
- onCanvasClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
275
- onCanvasDblClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
1218
+ onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
1219
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
1220
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
1221
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
1222
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
1223
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
1224
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
1225
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
1226
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
1227
+ isDynamicView: () => boolean;
276
1228
  updateView: (view: DiagramView) => void;
1229
+ focusOnNode: (nodeId: string) => void;
277
1230
  setHoveredNode: (nodeId: string | null) => void;
278
1231
  setHoveredEdge: (edgeId: string | null) => void;
279
1232
  setLastClickedNode: (nodeId: string | null) => void;
@@ -282,7 +1235,237 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
282
1235
  getElement: (id: Fqn) => DiagramNode | null;
283
1236
  triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
284
1237
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
285
- fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
1238
+ fitDiagram: (xyStore: {
1239
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
1240
+ source: string;
1241
+ target: string;
1242
+ sourceHandle?: string | null;
1243
+ targetHandle?: string | null;
1244
+ animated?: boolean;
1245
+ hidden?: boolean;
1246
+ deletable?: boolean;
1247
+ selectable?: boolean;
1248
+ selected?: boolean;
1249
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1250
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1251
+ zIndex?: number;
1252
+ ariaLabel?: string;
1253
+ interactionWidth?: number;
1254
+ label?: import('react').ReactNode;
1255
+ labelStyle?: import('react').CSSProperties;
1256
+ labelShowBg?: boolean;
1257
+ labelBgStyle?: import('react').CSSProperties;
1258
+ labelBgPadding?: [number, number];
1259
+ labelBgBorderRadius?: number;
1260
+ style?: import('react').CSSProperties;
1261
+ className?: string;
1262
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1263
+ focusable?: boolean;
1264
+ data: import('../xyflow/types').RelationshipData;
1265
+ readonly id: string;
1266
+ readonly type: "relationship";
1267
+ }>;
1268
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1269
+ source: string;
1270
+ target: string;
1271
+ sourceHandle?: string | null;
1272
+ targetHandle?: string | null;
1273
+ animated?: boolean;
1274
+ hidden?: boolean;
1275
+ deletable?: boolean;
1276
+ selectable?: boolean;
1277
+ selected?: boolean;
1278
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1279
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1280
+ zIndex?: number;
1281
+ ariaLabel?: string;
1282
+ interactionWidth?: number;
1283
+ label?: import('react').ReactNode;
1284
+ labelStyle?: import('react').CSSProperties;
1285
+ labelShowBg?: boolean;
1286
+ labelBgStyle?: import('react').CSSProperties;
1287
+ labelBgPadding?: [number, number];
1288
+ labelBgBorderRadius?: number;
1289
+ style?: import('react').CSSProperties;
1290
+ className?: string;
1291
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1292
+ focusable?: boolean;
1293
+ data: import('../xyflow/types').RelationshipData;
1294
+ readonly id: string;
1295
+ readonly type: "relationship";
1296
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
1297
+ source: string;
1298
+ target: string;
1299
+ sourceHandle?: string | null;
1300
+ targetHandle?: string | null;
1301
+ animated?: boolean;
1302
+ hidden?: boolean;
1303
+ deletable?: boolean;
1304
+ selectable?: boolean;
1305
+ selected?: boolean;
1306
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1307
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1308
+ zIndex?: number;
1309
+ ariaLabel?: string;
1310
+ interactionWidth?: number;
1311
+ label?: import('react').ReactNode;
1312
+ labelStyle?: import('react').CSSProperties;
1313
+ labelShowBg?: boolean;
1314
+ labelBgStyle?: import('react').CSSProperties;
1315
+ labelBgPadding?: [number, number];
1316
+ labelBgBorderRadius?: number;
1317
+ style?: import('react').CSSProperties;
1318
+ className?: string;
1319
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1320
+ focusable?: boolean;
1321
+ data: import('../xyflow/types').RelationshipData;
1322
+ readonly id: string;
1323
+ readonly type: "relationship";
1324
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1325
+ source: string;
1326
+ target: string;
1327
+ sourceHandle?: string | null;
1328
+ targetHandle?: string | null;
1329
+ animated?: boolean;
1330
+ hidden?: boolean;
1331
+ deletable?: boolean;
1332
+ selectable?: boolean;
1333
+ selected?: boolean;
1334
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1335
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1336
+ zIndex?: number;
1337
+ ariaLabel?: string;
1338
+ interactionWidth?: number;
1339
+ label?: import('react').ReactNode;
1340
+ labelStyle?: import('react').CSSProperties;
1341
+ labelShowBg?: boolean;
1342
+ labelBgStyle?: import('react').CSSProperties;
1343
+ labelBgPadding?: [number, number];
1344
+ labelBgBorderRadius?: number;
1345
+ style?: import('react').CSSProperties;
1346
+ className?: string;
1347
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1348
+ focusable?: boolean;
1349
+ data: import('../xyflow/types').RelationshipData;
1350
+ readonly id: string;
1351
+ readonly type: "relationship";
1352
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
1353
+ source: string;
1354
+ target: string;
1355
+ sourceHandle?: string | null;
1356
+ targetHandle?: string | null;
1357
+ animated?: boolean;
1358
+ hidden?: boolean;
1359
+ deletable?: boolean;
1360
+ selectable?: boolean;
1361
+ selected?: boolean;
1362
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1363
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1364
+ zIndex?: number;
1365
+ ariaLabel?: string;
1366
+ interactionWidth?: number;
1367
+ label?: import('react').ReactNode;
1368
+ labelStyle?: import('react').CSSProperties;
1369
+ labelShowBg?: boolean;
1370
+ labelBgStyle?: import('react').CSSProperties;
1371
+ labelBgPadding?: [number, number];
1372
+ labelBgBorderRadius?: number;
1373
+ style?: import('react').CSSProperties;
1374
+ className?: string;
1375
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1376
+ focusable?: boolean;
1377
+ data: import('../xyflow/types').RelationshipData;
1378
+ readonly id: string;
1379
+ readonly type: "relationship";
1380
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
1381
+ source: string;
1382
+ target: string;
1383
+ sourceHandle?: string | null;
1384
+ targetHandle?: string | null;
1385
+ animated?: boolean;
1386
+ hidden?: boolean;
1387
+ deletable?: boolean;
1388
+ selectable?: boolean;
1389
+ selected?: boolean;
1390
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1391
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1392
+ zIndex?: number;
1393
+ ariaLabel?: string;
1394
+ interactionWidth?: number;
1395
+ label?: import('react').ReactNode;
1396
+ labelStyle?: import('react').CSSProperties;
1397
+ labelShowBg?: boolean;
1398
+ labelBgStyle?: import('react').CSSProperties;
1399
+ labelBgPadding?: [number, number];
1400
+ labelBgBorderRadius?: number;
1401
+ style?: import('react').CSSProperties;
1402
+ className?: string;
1403
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1404
+ focusable?: boolean;
1405
+ data: import('../xyflow/types').RelationshipData;
1406
+ readonly id: string;
1407
+ readonly type: "relationship";
1408
+ }>>), replace?: boolean | undefined) => void;
1409
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1410
+ source: string;
1411
+ target: string;
1412
+ sourceHandle?: string | null;
1413
+ targetHandle?: string | null;
1414
+ animated?: boolean;
1415
+ hidden?: boolean;
1416
+ deletable?: boolean;
1417
+ selectable?: boolean;
1418
+ selected?: boolean;
1419
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1420
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1421
+ zIndex?: number;
1422
+ ariaLabel?: string;
1423
+ interactionWidth?: number;
1424
+ label?: import('react').ReactNode;
1425
+ labelStyle?: import('react').CSSProperties;
1426
+ labelShowBg?: boolean;
1427
+ labelBgStyle?: import('react').CSSProperties;
1428
+ labelBgPadding?: [number, number];
1429
+ labelBgBorderRadius?: number;
1430
+ style?: import('react').CSSProperties;
1431
+ className?: string;
1432
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1433
+ focusable?: boolean;
1434
+ data: import('../xyflow/types').RelationshipData;
1435
+ readonly id: string;
1436
+ readonly type: "relationship";
1437
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1438
+ source: string;
1439
+ target: string;
1440
+ sourceHandle?: string | null;
1441
+ targetHandle?: string | null;
1442
+ animated?: boolean;
1443
+ hidden?: boolean;
1444
+ deletable?: boolean;
1445
+ selectable?: boolean;
1446
+ selected?: boolean;
1447
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1448
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1449
+ zIndex?: number;
1450
+ ariaLabel?: string;
1451
+ interactionWidth?: number;
1452
+ label?: import('react').ReactNode;
1453
+ labelStyle?: import('react').CSSProperties;
1454
+ labelShowBg?: boolean;
1455
+ labelBgStyle?: import('react').CSSProperties;
1456
+ labelBgPadding?: [number, number];
1457
+ labelBgBorderRadius?: number;
1458
+ style?: import('react').CSSProperties;
1459
+ className?: string;
1460
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1461
+ focusable?: boolean;
1462
+ data: import('../xyflow/types').RelationshipData;
1463
+ readonly id: string;
1464
+ readonly type: "relationship";
1465
+ }>) => void) => () => void;
1466
+ }) => void;
1467
+ nextDynamicStep: (increment?: number | undefined) => void;
1468
+ stopDynamicView: () => void;
286
1469
  } | Partial<{
287
1470
  view: DiagramView;
288
1471
  readonly: boolean;
@@ -295,11 +1478,14 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
295
1478
  nodesSelectable: boolean;
296
1479
  xyflow: XYFlowInstance;
297
1480
  initialized: boolean;
1481
+ xyflowSynced: boolean;
1482
+ activeDynamicViewStep: number | null;
298
1483
  lastClickedNodeId: string | null;
299
1484
  lastClickedEdgeId: string | null;
300
1485
  focusedNodeId: string | null;
301
1486
  hoveredNodeId: string | null;
302
1487
  hoveredEdgeId: string | null;
1488
+ dimmed: ReadonlySet<string>;
303
1489
  previousViews: DiagramView[];
304
1490
  lastOnNavigate: {
305
1491
  fromView: ViewID;
@@ -309,16 +1495,18 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
309
1495
  positionCorrected: boolean;
310
1496
  } | null;
311
1497
  viewportChanged: boolean;
312
- onChange: import("../LikeC4Diagram.props").OnChange | null | undefined;
313
- onNavigateTo: import("../LikeC4Diagram.props").OnNavigateTo | null | undefined;
314
- onNodeClick: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
315
- onNodeContextMenu: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
316
- onCanvasContextMenu: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
317
- onEdgeClick: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
318
- onEdgeContextMenu: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
319
- onCanvasClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
320
- onCanvasDblClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
1498
+ onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
1499
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
1500
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
1501
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
1502
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
1503
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
1504
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
1505
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
1506
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
1507
+ isDynamicView: () => boolean;
321
1508
  updateView: (view: DiagramView) => void;
1509
+ focusOnNode: (nodeId: string) => void;
322
1510
  setHoveredNode: (nodeId: string | null) => void;
323
1511
  setHoveredEdge: (edgeId: string | null) => void;
324
1512
  setLastClickedNode: (nodeId: string | null) => void;
@@ -327,7 +1515,237 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
327
1515
  getElement: (id: Fqn) => DiagramNode | null;
328
1516
  triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
329
1517
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
330
- fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
1518
+ fitDiagram: (xyStore: {
1519
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
1520
+ source: string;
1521
+ target: string;
1522
+ sourceHandle?: string | null;
1523
+ targetHandle?: string | null;
1524
+ animated?: boolean;
1525
+ hidden?: boolean;
1526
+ deletable?: boolean;
1527
+ selectable?: boolean;
1528
+ selected?: boolean;
1529
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1530
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1531
+ zIndex?: number;
1532
+ ariaLabel?: string;
1533
+ interactionWidth?: number;
1534
+ label?: import('react').ReactNode;
1535
+ labelStyle?: import('react').CSSProperties;
1536
+ labelShowBg?: boolean;
1537
+ labelBgStyle?: import('react').CSSProperties;
1538
+ labelBgPadding?: [number, number];
1539
+ labelBgBorderRadius?: number;
1540
+ style?: import('react').CSSProperties;
1541
+ className?: string;
1542
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1543
+ focusable?: boolean;
1544
+ data: import('../xyflow/types').RelationshipData;
1545
+ readonly id: string;
1546
+ readonly type: "relationship";
1547
+ }>;
1548
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1549
+ source: string;
1550
+ target: string;
1551
+ sourceHandle?: string | null;
1552
+ targetHandle?: string | null;
1553
+ animated?: boolean;
1554
+ hidden?: boolean;
1555
+ deletable?: boolean;
1556
+ selectable?: boolean;
1557
+ selected?: boolean;
1558
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1559
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1560
+ zIndex?: number;
1561
+ ariaLabel?: string;
1562
+ interactionWidth?: number;
1563
+ label?: import('react').ReactNode;
1564
+ labelStyle?: import('react').CSSProperties;
1565
+ labelShowBg?: boolean;
1566
+ labelBgStyle?: import('react').CSSProperties;
1567
+ labelBgPadding?: [number, number];
1568
+ labelBgBorderRadius?: number;
1569
+ style?: import('react').CSSProperties;
1570
+ className?: string;
1571
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1572
+ focusable?: boolean;
1573
+ data: import('../xyflow/types').RelationshipData;
1574
+ readonly id: string;
1575
+ readonly type: "relationship";
1576
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
1577
+ source: string;
1578
+ target: string;
1579
+ sourceHandle?: string | null;
1580
+ targetHandle?: string | null;
1581
+ animated?: boolean;
1582
+ hidden?: boolean;
1583
+ deletable?: boolean;
1584
+ selectable?: boolean;
1585
+ selected?: boolean;
1586
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1587
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1588
+ zIndex?: number;
1589
+ ariaLabel?: string;
1590
+ interactionWidth?: number;
1591
+ label?: import('react').ReactNode;
1592
+ labelStyle?: import('react').CSSProperties;
1593
+ labelShowBg?: boolean;
1594
+ labelBgStyle?: import('react').CSSProperties;
1595
+ labelBgPadding?: [number, number];
1596
+ labelBgBorderRadius?: number;
1597
+ style?: import('react').CSSProperties;
1598
+ className?: string;
1599
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1600
+ focusable?: boolean;
1601
+ data: import('../xyflow/types').RelationshipData;
1602
+ readonly id: string;
1603
+ readonly type: "relationship";
1604
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1605
+ source: string;
1606
+ target: string;
1607
+ sourceHandle?: string | null;
1608
+ targetHandle?: string | null;
1609
+ animated?: boolean;
1610
+ hidden?: boolean;
1611
+ deletable?: boolean;
1612
+ selectable?: boolean;
1613
+ selected?: boolean;
1614
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1615
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1616
+ zIndex?: number;
1617
+ ariaLabel?: string;
1618
+ interactionWidth?: number;
1619
+ label?: import('react').ReactNode;
1620
+ labelStyle?: import('react').CSSProperties;
1621
+ labelShowBg?: boolean;
1622
+ labelBgStyle?: import('react').CSSProperties;
1623
+ labelBgPadding?: [number, number];
1624
+ labelBgBorderRadius?: number;
1625
+ style?: import('react').CSSProperties;
1626
+ className?: string;
1627
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1628
+ focusable?: boolean;
1629
+ data: import('../xyflow/types').RelationshipData;
1630
+ readonly id: string;
1631
+ readonly type: "relationship";
1632
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
1633
+ source: string;
1634
+ target: string;
1635
+ sourceHandle?: string | null;
1636
+ targetHandle?: string | null;
1637
+ animated?: boolean;
1638
+ hidden?: boolean;
1639
+ deletable?: boolean;
1640
+ selectable?: boolean;
1641
+ selected?: boolean;
1642
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1643
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1644
+ zIndex?: number;
1645
+ ariaLabel?: string;
1646
+ interactionWidth?: number;
1647
+ label?: import('react').ReactNode;
1648
+ labelStyle?: import('react').CSSProperties;
1649
+ labelShowBg?: boolean;
1650
+ labelBgStyle?: import('react').CSSProperties;
1651
+ labelBgPadding?: [number, number];
1652
+ labelBgBorderRadius?: number;
1653
+ style?: import('react').CSSProperties;
1654
+ className?: string;
1655
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1656
+ focusable?: boolean;
1657
+ data: import('../xyflow/types').RelationshipData;
1658
+ readonly id: string;
1659
+ readonly type: "relationship";
1660
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
1661
+ source: string;
1662
+ target: string;
1663
+ sourceHandle?: string | null;
1664
+ targetHandle?: string | null;
1665
+ animated?: boolean;
1666
+ hidden?: boolean;
1667
+ deletable?: boolean;
1668
+ selectable?: boolean;
1669
+ selected?: boolean;
1670
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1671
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1672
+ zIndex?: number;
1673
+ ariaLabel?: string;
1674
+ interactionWidth?: number;
1675
+ label?: import('react').ReactNode;
1676
+ labelStyle?: import('react').CSSProperties;
1677
+ labelShowBg?: boolean;
1678
+ labelBgStyle?: import('react').CSSProperties;
1679
+ labelBgPadding?: [number, number];
1680
+ labelBgBorderRadius?: number;
1681
+ style?: import('react').CSSProperties;
1682
+ className?: string;
1683
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1684
+ focusable?: boolean;
1685
+ data: import('../xyflow/types').RelationshipData;
1686
+ readonly id: string;
1687
+ readonly type: "relationship";
1688
+ }>>), replace?: boolean | undefined) => void;
1689
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1690
+ source: string;
1691
+ target: string;
1692
+ sourceHandle?: string | null;
1693
+ targetHandle?: string | null;
1694
+ animated?: boolean;
1695
+ hidden?: boolean;
1696
+ deletable?: boolean;
1697
+ selectable?: boolean;
1698
+ selected?: boolean;
1699
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1700
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1701
+ zIndex?: number;
1702
+ ariaLabel?: string;
1703
+ interactionWidth?: number;
1704
+ label?: import('react').ReactNode;
1705
+ labelStyle?: import('react').CSSProperties;
1706
+ labelShowBg?: boolean;
1707
+ labelBgStyle?: import('react').CSSProperties;
1708
+ labelBgPadding?: [number, number];
1709
+ labelBgBorderRadius?: number;
1710
+ style?: import('react').CSSProperties;
1711
+ className?: string;
1712
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1713
+ focusable?: boolean;
1714
+ data: import('../xyflow/types').RelationshipData;
1715
+ readonly id: string;
1716
+ readonly type: "relationship";
1717
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1718
+ source: string;
1719
+ target: string;
1720
+ sourceHandle?: string | null;
1721
+ targetHandle?: string | null;
1722
+ animated?: boolean;
1723
+ hidden?: boolean;
1724
+ deletable?: boolean;
1725
+ selectable?: boolean;
1726
+ selected?: boolean;
1727
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1728
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1729
+ zIndex?: number;
1730
+ ariaLabel?: string;
1731
+ interactionWidth?: number;
1732
+ label?: import('react').ReactNode;
1733
+ labelStyle?: import('react').CSSProperties;
1734
+ labelShowBg?: boolean;
1735
+ labelBgStyle?: import('react').CSSProperties;
1736
+ labelBgPadding?: [number, number];
1737
+ labelBgBorderRadius?: number;
1738
+ style?: import('react').CSSProperties;
1739
+ className?: string;
1740
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1741
+ focusable?: boolean;
1742
+ data: import('../xyflow/types').RelationshipData;
1743
+ readonly id: string;
1744
+ readonly type: "relationship";
1745
+ }>) => void) => () => void;
1746
+ }) => void;
1747
+ nextDynamicStep: (increment?: number | undefined) => void;
1748
+ stopDynamicView: () => void;
331
1749
  }> | ((state: {
332
1750
  view: DiagramView;
333
1751
  readonly: boolean;
@@ -340,11 +1758,14 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
340
1758
  nodesSelectable: boolean;
341
1759
  xyflow: XYFlowInstance;
342
1760
  initialized: boolean;
1761
+ xyflowSynced: boolean;
1762
+ activeDynamicViewStep: number | null;
343
1763
  lastClickedNodeId: string | null;
344
1764
  lastClickedEdgeId: string | null;
345
1765
  focusedNodeId: string | null;
346
1766
  hoveredNodeId: string | null;
347
1767
  hoveredEdgeId: string | null;
1768
+ dimmed: ReadonlySet<string>;
348
1769
  previousViews: DiagramView[];
349
1770
  lastOnNavigate: {
350
1771
  fromView: ViewID;
@@ -354,16 +1775,18 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
354
1775
  positionCorrected: boolean;
355
1776
  } | null;
356
1777
  viewportChanged: boolean;
357
- onChange: import("../LikeC4Diagram.props").OnChange | null | undefined;
358
- onNavigateTo: import("../LikeC4Diagram.props").OnNavigateTo | null | undefined;
359
- onNodeClick: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
360
- onNodeContextMenu: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
361
- onCanvasContextMenu: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
362
- onEdgeClick: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
363
- onEdgeContextMenu: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
364
- onCanvasClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
365
- onCanvasDblClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
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;
366
1788
  updateView: (view: DiagramView) => void;
1789
+ focusOnNode: (nodeId: string) => void;
367
1790
  setHoveredNode: (nodeId: string | null) => void;
368
1791
  setHoveredEdge: (edgeId: string | null) => void;
369
1792
  setLastClickedNode: (nodeId: string | null) => void;
@@ -372,7 +1795,237 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
372
1795
  getElement: (id: Fqn) => DiagramNode | null;
373
1796
  triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
374
1797
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
375
- fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
1798
+ fitDiagram: (xyStore: {
1799
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
1800
+ source: string;
1801
+ target: string;
1802
+ sourceHandle?: string | null;
1803
+ targetHandle?: string | null;
1804
+ animated?: boolean;
1805
+ hidden?: boolean;
1806
+ deletable?: boolean;
1807
+ selectable?: boolean;
1808
+ selected?: boolean;
1809
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1810
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1811
+ zIndex?: number;
1812
+ ariaLabel?: string;
1813
+ interactionWidth?: number;
1814
+ label?: import('react').ReactNode;
1815
+ labelStyle?: import('react').CSSProperties;
1816
+ labelShowBg?: boolean;
1817
+ labelBgStyle?: import('react').CSSProperties;
1818
+ labelBgPadding?: [number, number];
1819
+ labelBgBorderRadius?: number;
1820
+ style?: import('react').CSSProperties;
1821
+ className?: string;
1822
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1823
+ focusable?: boolean;
1824
+ data: import('../xyflow/types').RelationshipData;
1825
+ readonly id: string;
1826
+ readonly type: "relationship";
1827
+ }>;
1828
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1829
+ source: string;
1830
+ target: string;
1831
+ sourceHandle?: string | null;
1832
+ targetHandle?: string | null;
1833
+ animated?: boolean;
1834
+ hidden?: boolean;
1835
+ deletable?: boolean;
1836
+ selectable?: boolean;
1837
+ selected?: boolean;
1838
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1839
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1840
+ zIndex?: number;
1841
+ ariaLabel?: string;
1842
+ interactionWidth?: number;
1843
+ label?: import('react').ReactNode;
1844
+ labelStyle?: import('react').CSSProperties;
1845
+ labelShowBg?: boolean;
1846
+ labelBgStyle?: import('react').CSSProperties;
1847
+ labelBgPadding?: [number, number];
1848
+ labelBgBorderRadius?: number;
1849
+ style?: import('react').CSSProperties;
1850
+ className?: string;
1851
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1852
+ focusable?: boolean;
1853
+ data: import('../xyflow/types').RelationshipData;
1854
+ readonly id: string;
1855
+ readonly type: "relationship";
1856
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
1857
+ source: string;
1858
+ target: string;
1859
+ sourceHandle?: string | null;
1860
+ targetHandle?: string | null;
1861
+ animated?: boolean;
1862
+ hidden?: boolean;
1863
+ deletable?: boolean;
1864
+ selectable?: boolean;
1865
+ selected?: boolean;
1866
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1867
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1868
+ zIndex?: number;
1869
+ ariaLabel?: string;
1870
+ interactionWidth?: number;
1871
+ label?: import('react').ReactNode;
1872
+ labelStyle?: import('react').CSSProperties;
1873
+ labelShowBg?: boolean;
1874
+ labelBgStyle?: import('react').CSSProperties;
1875
+ labelBgPadding?: [number, number];
1876
+ labelBgBorderRadius?: number;
1877
+ style?: import('react').CSSProperties;
1878
+ className?: string;
1879
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1880
+ focusable?: boolean;
1881
+ data: import('../xyflow/types').RelationshipData;
1882
+ readonly id: string;
1883
+ readonly type: "relationship";
1884
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1885
+ source: string;
1886
+ target: string;
1887
+ sourceHandle?: string | null;
1888
+ targetHandle?: string | null;
1889
+ animated?: boolean;
1890
+ hidden?: boolean;
1891
+ deletable?: boolean;
1892
+ selectable?: boolean;
1893
+ selected?: boolean;
1894
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1895
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1896
+ zIndex?: number;
1897
+ ariaLabel?: string;
1898
+ interactionWidth?: number;
1899
+ label?: import('react').ReactNode;
1900
+ labelStyle?: import('react').CSSProperties;
1901
+ labelShowBg?: boolean;
1902
+ labelBgStyle?: import('react').CSSProperties;
1903
+ labelBgPadding?: [number, number];
1904
+ labelBgBorderRadius?: number;
1905
+ style?: import('react').CSSProperties;
1906
+ className?: string;
1907
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1908
+ focusable?: boolean;
1909
+ data: import('../xyflow/types').RelationshipData;
1910
+ readonly id: string;
1911
+ readonly type: "relationship";
1912
+ }>) => 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
+ }>>), replace?: boolean | undefined) => void;
1969
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1970
+ source: string;
1971
+ target: string;
1972
+ sourceHandle?: string | null;
1973
+ targetHandle?: string | null;
1974
+ animated?: boolean;
1975
+ hidden?: boolean;
1976
+ deletable?: boolean;
1977
+ selectable?: boolean;
1978
+ selected?: boolean;
1979
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1980
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1981
+ zIndex?: number;
1982
+ ariaLabel?: string;
1983
+ interactionWidth?: number;
1984
+ label?: import('react').ReactNode;
1985
+ labelStyle?: import('react').CSSProperties;
1986
+ labelShowBg?: boolean;
1987
+ labelBgStyle?: import('react').CSSProperties;
1988
+ labelBgPadding?: [number, number];
1989
+ labelBgBorderRadius?: number;
1990
+ style?: import('react').CSSProperties;
1991
+ className?: string;
1992
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1993
+ focusable?: boolean;
1994
+ data: import('../xyflow/types').RelationshipData;
1995
+ readonly id: string;
1996
+ readonly type: "relationship";
1997
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
1998
+ source: string;
1999
+ target: string;
2000
+ sourceHandle?: string | null;
2001
+ targetHandle?: string | null;
2002
+ animated?: boolean;
2003
+ hidden?: boolean;
2004
+ deletable?: boolean;
2005
+ selectable?: boolean;
2006
+ selected?: boolean;
2007
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2008
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2009
+ zIndex?: number;
2010
+ ariaLabel?: string;
2011
+ interactionWidth?: number;
2012
+ label?: import('react').ReactNode;
2013
+ labelStyle?: import('react').CSSProperties;
2014
+ labelShowBg?: boolean;
2015
+ labelBgStyle?: import('react').CSSProperties;
2016
+ labelBgPadding?: [number, number];
2017
+ labelBgBorderRadius?: number;
2018
+ style?: import('react').CSSProperties;
2019
+ className?: string;
2020
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2021
+ focusable?: boolean;
2022
+ data: import('../xyflow/types').RelationshipData;
2023
+ readonly id: string;
2024
+ readonly type: "relationship";
2025
+ }>) => void) => () => void;
2026
+ }) => void;
2027
+ nextDynamicStep: (increment?: number | undefined) => void;
2028
+ stopDynamicView: () => void;
376
2029
  }) => {
377
2030
  view: DiagramView;
378
2031
  readonly: boolean;
@@ -385,11 +2038,14 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
385
2038
  nodesSelectable: boolean;
386
2039
  xyflow: XYFlowInstance;
387
2040
  initialized: boolean;
2041
+ xyflowSynced: boolean;
2042
+ activeDynamicViewStep: number | null;
388
2043
  lastClickedNodeId: string | null;
389
2044
  lastClickedEdgeId: string | null;
390
2045
  focusedNodeId: string | null;
391
2046
  hoveredNodeId: string | null;
392
2047
  hoveredEdgeId: string | null;
2048
+ dimmed: ReadonlySet<string>;
393
2049
  previousViews: DiagramView[];
394
2050
  lastOnNavigate: {
395
2051
  fromView: ViewID;
@@ -399,16 +2055,18 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
399
2055
  positionCorrected: boolean;
400
2056
  } | null;
401
2057
  viewportChanged: boolean;
402
- onChange: import("../LikeC4Diagram.props").OnChange | null | undefined;
403
- onNavigateTo: import("../LikeC4Diagram.props").OnNavigateTo | null | undefined;
404
- onNodeClick: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
405
- onNodeContextMenu: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
406
- onCanvasContextMenu: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
407
- onEdgeClick: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
408
- onEdgeContextMenu: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
409
- onCanvasClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
410
- onCanvasDblClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
2058
+ onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
2059
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
2060
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
2061
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
2062
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
2063
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
2064
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
2065
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
2066
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
2067
+ isDynamicView: () => boolean;
411
2068
  updateView: (view: DiagramView) => void;
2069
+ focusOnNode: (nodeId: string) => void;
412
2070
  setHoveredNode: (nodeId: string | null) => void;
413
2071
  setHoveredEdge: (edgeId: string | null) => void;
414
2072
  setLastClickedNode: (nodeId: string | null) => void;
@@ -417,7 +2075,237 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
417
2075
  getElement: (id: Fqn) => DiagramNode | null;
418
2076
  triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
419
2077
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
420
- fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
2078
+ fitDiagram: (xyStore: {
2079
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
2080
+ source: string;
2081
+ target: string;
2082
+ sourceHandle?: string | null;
2083
+ targetHandle?: string | null;
2084
+ animated?: boolean;
2085
+ hidden?: boolean;
2086
+ deletable?: boolean;
2087
+ selectable?: boolean;
2088
+ selected?: boolean;
2089
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2090
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2091
+ zIndex?: number;
2092
+ ariaLabel?: string;
2093
+ interactionWidth?: number;
2094
+ label?: import('react').ReactNode;
2095
+ labelStyle?: import('react').CSSProperties;
2096
+ labelShowBg?: boolean;
2097
+ labelBgStyle?: import('react').CSSProperties;
2098
+ labelBgPadding?: [number, number];
2099
+ labelBgBorderRadius?: number;
2100
+ style?: import('react').CSSProperties;
2101
+ className?: string;
2102
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2103
+ focusable?: boolean;
2104
+ data: import('../xyflow/types').RelationshipData;
2105
+ readonly id: string;
2106
+ readonly type: "relationship";
2107
+ }>;
2108
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2109
+ source: string;
2110
+ target: string;
2111
+ sourceHandle?: string | null;
2112
+ targetHandle?: string | null;
2113
+ animated?: boolean;
2114
+ hidden?: boolean;
2115
+ deletable?: boolean;
2116
+ selectable?: boolean;
2117
+ selected?: boolean;
2118
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2119
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2120
+ zIndex?: number;
2121
+ ariaLabel?: string;
2122
+ interactionWidth?: number;
2123
+ label?: import('react').ReactNode;
2124
+ labelStyle?: import('react').CSSProperties;
2125
+ labelShowBg?: boolean;
2126
+ labelBgStyle?: import('react').CSSProperties;
2127
+ labelBgPadding?: [number, number];
2128
+ labelBgBorderRadius?: number;
2129
+ style?: import('react').CSSProperties;
2130
+ className?: string;
2131
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2132
+ focusable?: boolean;
2133
+ data: import('../xyflow/types').RelationshipData;
2134
+ readonly id: string;
2135
+ readonly type: "relationship";
2136
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
2137
+ source: string;
2138
+ target: string;
2139
+ sourceHandle?: string | null;
2140
+ targetHandle?: string | null;
2141
+ animated?: boolean;
2142
+ hidden?: boolean;
2143
+ deletable?: boolean;
2144
+ selectable?: boolean;
2145
+ selected?: boolean;
2146
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2147
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2148
+ zIndex?: number;
2149
+ ariaLabel?: string;
2150
+ interactionWidth?: number;
2151
+ label?: import('react').ReactNode;
2152
+ labelStyle?: import('react').CSSProperties;
2153
+ labelShowBg?: boolean;
2154
+ labelBgStyle?: import('react').CSSProperties;
2155
+ labelBgPadding?: [number, number];
2156
+ labelBgBorderRadius?: number;
2157
+ style?: import('react').CSSProperties;
2158
+ className?: string;
2159
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2160
+ focusable?: boolean;
2161
+ data: import('../xyflow/types').RelationshipData;
2162
+ readonly id: string;
2163
+ readonly type: "relationship";
2164
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2165
+ source: string;
2166
+ target: string;
2167
+ sourceHandle?: string | null;
2168
+ targetHandle?: string | null;
2169
+ animated?: boolean;
2170
+ hidden?: boolean;
2171
+ deletable?: boolean;
2172
+ selectable?: boolean;
2173
+ selected?: boolean;
2174
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2175
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2176
+ zIndex?: number;
2177
+ ariaLabel?: string;
2178
+ interactionWidth?: number;
2179
+ label?: import('react').ReactNode;
2180
+ labelStyle?: import('react').CSSProperties;
2181
+ labelShowBg?: boolean;
2182
+ labelBgStyle?: import('react').CSSProperties;
2183
+ labelBgPadding?: [number, number];
2184
+ labelBgBorderRadius?: number;
2185
+ style?: import('react').CSSProperties;
2186
+ className?: string;
2187
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2188
+ focusable?: boolean;
2189
+ data: import('../xyflow/types').RelationshipData;
2190
+ readonly id: string;
2191
+ readonly type: "relationship";
2192
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
2193
+ source: string;
2194
+ target: string;
2195
+ sourceHandle?: string | null;
2196
+ targetHandle?: string | null;
2197
+ animated?: boolean;
2198
+ hidden?: boolean;
2199
+ deletable?: boolean;
2200
+ selectable?: boolean;
2201
+ selected?: boolean;
2202
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2203
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2204
+ zIndex?: number;
2205
+ ariaLabel?: string;
2206
+ interactionWidth?: number;
2207
+ label?: import('react').ReactNode;
2208
+ labelStyle?: import('react').CSSProperties;
2209
+ labelShowBg?: boolean;
2210
+ labelBgStyle?: import('react').CSSProperties;
2211
+ labelBgPadding?: [number, number];
2212
+ labelBgBorderRadius?: number;
2213
+ style?: import('react').CSSProperties;
2214
+ className?: string;
2215
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2216
+ focusable?: boolean;
2217
+ data: import('../xyflow/types').RelationshipData;
2218
+ readonly id: string;
2219
+ readonly type: "relationship";
2220
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
2221
+ source: string;
2222
+ target: string;
2223
+ sourceHandle?: string | null;
2224
+ targetHandle?: string | null;
2225
+ animated?: boolean;
2226
+ hidden?: boolean;
2227
+ deletable?: boolean;
2228
+ selectable?: boolean;
2229
+ selected?: boolean;
2230
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2231
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2232
+ zIndex?: number;
2233
+ ariaLabel?: string;
2234
+ interactionWidth?: number;
2235
+ label?: import('react').ReactNode;
2236
+ labelStyle?: import('react').CSSProperties;
2237
+ labelShowBg?: boolean;
2238
+ labelBgStyle?: import('react').CSSProperties;
2239
+ labelBgPadding?: [number, number];
2240
+ labelBgBorderRadius?: number;
2241
+ style?: import('react').CSSProperties;
2242
+ className?: string;
2243
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2244
+ focusable?: boolean;
2245
+ data: import('../xyflow/types').RelationshipData;
2246
+ readonly id: string;
2247
+ readonly type: "relationship";
2248
+ }>>), replace?: boolean | undefined) => void;
2249
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2250
+ source: string;
2251
+ target: string;
2252
+ sourceHandle?: string | null;
2253
+ targetHandle?: string | null;
2254
+ animated?: boolean;
2255
+ hidden?: boolean;
2256
+ deletable?: boolean;
2257
+ selectable?: boolean;
2258
+ selected?: boolean;
2259
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2260
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2261
+ zIndex?: number;
2262
+ ariaLabel?: string;
2263
+ interactionWidth?: number;
2264
+ label?: import('react').ReactNode;
2265
+ labelStyle?: import('react').CSSProperties;
2266
+ labelShowBg?: boolean;
2267
+ labelBgStyle?: import('react').CSSProperties;
2268
+ labelBgPadding?: [number, number];
2269
+ labelBgBorderRadius?: number;
2270
+ style?: import('react').CSSProperties;
2271
+ className?: string;
2272
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2273
+ focusable?: boolean;
2274
+ data: import('../xyflow/types').RelationshipData;
2275
+ readonly id: string;
2276
+ readonly type: "relationship";
2277
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2278
+ source: string;
2279
+ target: string;
2280
+ sourceHandle?: string | null;
2281
+ targetHandle?: string | null;
2282
+ animated?: boolean;
2283
+ hidden?: boolean;
2284
+ deletable?: boolean;
2285
+ selectable?: boolean;
2286
+ selected?: boolean;
2287
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2288
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2289
+ zIndex?: number;
2290
+ ariaLabel?: string;
2291
+ interactionWidth?: number;
2292
+ label?: import('react').ReactNode;
2293
+ labelStyle?: import('react').CSSProperties;
2294
+ labelShowBg?: boolean;
2295
+ labelBgStyle?: import('react').CSSProperties;
2296
+ labelBgPadding?: [number, number];
2297
+ labelBgBorderRadius?: number;
2298
+ style?: import('react').CSSProperties;
2299
+ className?: string;
2300
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2301
+ focusable?: boolean;
2302
+ data: import('../xyflow/types').RelationshipData;
2303
+ readonly id: string;
2304
+ readonly type: "relationship";
2305
+ }>) => void) => () => void;
2306
+ }) => void;
2307
+ nextDynamicStep: (increment?: number | undefined) => void;
2308
+ stopDynamicView: () => void;
421
2309
  } | Partial<{
422
2310
  view: DiagramView;
423
2311
  readonly: boolean;
@@ -430,11 +2318,14 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
430
2318
  nodesSelectable: boolean;
431
2319
  xyflow: XYFlowInstance;
432
2320
  initialized: boolean;
2321
+ xyflowSynced: boolean;
2322
+ activeDynamicViewStep: number | null;
433
2323
  lastClickedNodeId: string | null;
434
2324
  lastClickedEdgeId: string | null;
435
2325
  focusedNodeId: string | null;
436
2326
  hoveredNodeId: string | null;
437
2327
  hoveredEdgeId: string | null;
2328
+ dimmed: ReadonlySet<string>;
438
2329
  previousViews: DiagramView[];
439
2330
  lastOnNavigate: {
440
2331
  fromView: ViewID;
@@ -444,16 +2335,18 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
444
2335
  positionCorrected: boolean;
445
2336
  } | null;
446
2337
  viewportChanged: boolean;
447
- onChange: import("../LikeC4Diagram.props").OnChange | null | undefined;
448
- onNavigateTo: import("../LikeC4Diagram.props").OnNavigateTo | null | undefined;
449
- onNodeClick: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
450
- onNodeContextMenu: import("../LikeC4Diagram.props").OnNodeClick | null | undefined;
451
- onCanvasContextMenu: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
452
- onEdgeClick: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
453
- onEdgeContextMenu: import("../LikeC4Diagram.props").OnEdgeClick | null | undefined;
454
- onCanvasClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
455
- onCanvasDblClick: import("../LikeC4Diagram.props").OnCanvasClick | null | undefined;
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;
456
2348
  updateView: (view: DiagramView) => void;
2349
+ focusOnNode: (nodeId: string) => void;
457
2350
  setHoveredNode: (nodeId: string | null) => void;
458
2351
  setHoveredEdge: (edgeId: string | null) => void;
459
2352
  setLastClickedNode: (nodeId: string | null) => void;
@@ -462,7 +2355,237 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
462
2355
  getElement: (id: Fqn) => DiagramNode | null;
463
2356
  triggerOnChange: (changes: NonEmptyArray<import("../LikeC4Diagram.props").Changes.ChangeElementStyle>) => void;
464
2357
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
465
- fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
2358
+ fitDiagram: (xyStore: {
2359
+ getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
2360
+ source: string;
2361
+ target: string;
2362
+ sourceHandle?: string | null;
2363
+ targetHandle?: string | null;
2364
+ animated?: boolean;
2365
+ hidden?: boolean;
2366
+ deletable?: boolean;
2367
+ selectable?: boolean;
2368
+ selected?: boolean;
2369
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2370
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2371
+ zIndex?: number;
2372
+ ariaLabel?: string;
2373
+ interactionWidth?: number;
2374
+ label?: import('react').ReactNode;
2375
+ labelStyle?: import('react').CSSProperties;
2376
+ labelShowBg?: boolean;
2377
+ labelBgStyle?: import('react').CSSProperties;
2378
+ labelBgPadding?: [number, number];
2379
+ labelBgBorderRadius?: number;
2380
+ style?: import('react').CSSProperties;
2381
+ className?: string;
2382
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2383
+ focusable?: boolean;
2384
+ data: import('../xyflow/types').RelationshipData;
2385
+ readonly id: string;
2386
+ readonly type: "relationship";
2387
+ }>;
2388
+ setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2389
+ source: string;
2390
+ target: string;
2391
+ sourceHandle?: string | null;
2392
+ targetHandle?: string | null;
2393
+ animated?: boolean;
2394
+ hidden?: boolean;
2395
+ deletable?: boolean;
2396
+ selectable?: boolean;
2397
+ selected?: boolean;
2398
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2399
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2400
+ zIndex?: number;
2401
+ ariaLabel?: string;
2402
+ interactionWidth?: number;
2403
+ label?: import('react').ReactNode;
2404
+ labelStyle?: import('react').CSSProperties;
2405
+ labelShowBg?: boolean;
2406
+ labelBgStyle?: import('react').CSSProperties;
2407
+ labelBgPadding?: [number, number];
2408
+ labelBgBorderRadius?: number;
2409
+ style?: import('react').CSSProperties;
2410
+ className?: string;
2411
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2412
+ focusable?: boolean;
2413
+ data: import('../xyflow/types').RelationshipData;
2414
+ readonly id: string;
2415
+ readonly type: "relationship";
2416
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
2417
+ source: string;
2418
+ target: string;
2419
+ sourceHandle?: string | null;
2420
+ targetHandle?: string | null;
2421
+ animated?: boolean;
2422
+ hidden?: boolean;
2423
+ deletable?: boolean;
2424
+ selectable?: boolean;
2425
+ selected?: boolean;
2426
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2427
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2428
+ zIndex?: number;
2429
+ ariaLabel?: string;
2430
+ interactionWidth?: number;
2431
+ label?: import('react').ReactNode;
2432
+ labelStyle?: import('react').CSSProperties;
2433
+ labelShowBg?: boolean;
2434
+ labelBgStyle?: import('react').CSSProperties;
2435
+ labelBgPadding?: [number, number];
2436
+ labelBgBorderRadius?: number;
2437
+ style?: import('react').CSSProperties;
2438
+ className?: string;
2439
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2440
+ focusable?: boolean;
2441
+ data: import('../xyflow/types').RelationshipData;
2442
+ readonly id: string;
2443
+ readonly type: "relationship";
2444
+ }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2445
+ source: string;
2446
+ target: string;
2447
+ sourceHandle?: string | null;
2448
+ targetHandle?: string | null;
2449
+ animated?: boolean;
2450
+ hidden?: boolean;
2451
+ deletable?: boolean;
2452
+ selectable?: boolean;
2453
+ selected?: boolean;
2454
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2455
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2456
+ zIndex?: number;
2457
+ ariaLabel?: string;
2458
+ interactionWidth?: number;
2459
+ label?: import('react').ReactNode;
2460
+ labelStyle?: import('react').CSSProperties;
2461
+ labelShowBg?: boolean;
2462
+ labelBgStyle?: import('react').CSSProperties;
2463
+ labelBgPadding?: [number, number];
2464
+ labelBgBorderRadius?: number;
2465
+ style?: import('react').CSSProperties;
2466
+ className?: string;
2467
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2468
+ focusable?: boolean;
2469
+ data: import('../xyflow/types').RelationshipData;
2470
+ readonly id: string;
2471
+ readonly type: "relationship";
2472
+ }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
2473
+ source: string;
2474
+ target: string;
2475
+ sourceHandle?: string | null;
2476
+ targetHandle?: string | null;
2477
+ animated?: boolean;
2478
+ hidden?: boolean;
2479
+ deletable?: boolean;
2480
+ selectable?: boolean;
2481
+ selected?: boolean;
2482
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2483
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2484
+ zIndex?: number;
2485
+ ariaLabel?: string;
2486
+ interactionWidth?: number;
2487
+ label?: import('react').ReactNode;
2488
+ labelStyle?: import('react').CSSProperties;
2489
+ labelShowBg?: boolean;
2490
+ labelBgStyle?: import('react').CSSProperties;
2491
+ labelBgPadding?: [number, number];
2492
+ labelBgBorderRadius?: number;
2493
+ style?: import('react').CSSProperties;
2494
+ className?: string;
2495
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2496
+ focusable?: boolean;
2497
+ data: import('../xyflow/types').RelationshipData;
2498
+ readonly id: string;
2499
+ readonly type: "relationship";
2500
+ }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
2501
+ source: string;
2502
+ target: string;
2503
+ sourceHandle?: string | null;
2504
+ targetHandle?: string | null;
2505
+ animated?: boolean;
2506
+ hidden?: boolean;
2507
+ deletable?: boolean;
2508
+ selectable?: boolean;
2509
+ selected?: boolean;
2510
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2511
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2512
+ zIndex?: number;
2513
+ ariaLabel?: string;
2514
+ interactionWidth?: number;
2515
+ label?: import('react').ReactNode;
2516
+ labelStyle?: import('react').CSSProperties;
2517
+ labelShowBg?: boolean;
2518
+ labelBgStyle?: import('react').CSSProperties;
2519
+ labelBgPadding?: [number, number];
2520
+ labelBgBorderRadius?: number;
2521
+ style?: import('react').CSSProperties;
2522
+ className?: string;
2523
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2524
+ focusable?: boolean;
2525
+ data: import('../xyflow/types').RelationshipData;
2526
+ readonly id: string;
2527
+ readonly type: "relationship";
2528
+ }>>), replace?: boolean | undefined) => void;
2529
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2530
+ source: string;
2531
+ target: string;
2532
+ sourceHandle?: string | null;
2533
+ targetHandle?: string | null;
2534
+ animated?: boolean;
2535
+ hidden?: boolean;
2536
+ deletable?: boolean;
2537
+ selectable?: boolean;
2538
+ selected?: boolean;
2539
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2540
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2541
+ zIndex?: number;
2542
+ ariaLabel?: string;
2543
+ interactionWidth?: number;
2544
+ label?: import('react').ReactNode;
2545
+ labelStyle?: import('react').CSSProperties;
2546
+ labelShowBg?: boolean;
2547
+ labelBgStyle?: import('react').CSSProperties;
2548
+ labelBgPadding?: [number, number];
2549
+ labelBgBorderRadius?: number;
2550
+ style?: import('react').CSSProperties;
2551
+ className?: string;
2552
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2553
+ focusable?: boolean;
2554
+ data: import('../xyflow/types').RelationshipData;
2555
+ readonly id: string;
2556
+ readonly type: "relationship";
2557
+ }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
2558
+ source: string;
2559
+ target: string;
2560
+ sourceHandle?: string | null;
2561
+ targetHandle?: string | null;
2562
+ animated?: boolean;
2563
+ hidden?: boolean;
2564
+ deletable?: boolean;
2565
+ selectable?: boolean;
2566
+ selected?: boolean;
2567
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
2568
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
2569
+ zIndex?: number;
2570
+ ariaLabel?: string;
2571
+ interactionWidth?: number;
2572
+ label?: import('react').ReactNode;
2573
+ labelStyle?: import('react').CSSProperties;
2574
+ labelShowBg?: boolean;
2575
+ labelBgStyle?: import('react').CSSProperties;
2576
+ labelBgPadding?: [number, number];
2577
+ labelBgBorderRadius?: number;
2578
+ style?: import('react').CSSProperties;
2579
+ className?: string;
2580
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2581
+ focusable?: boolean;
2582
+ data: import('../xyflow/types').RelationshipData;
2583
+ readonly id: string;
2584
+ readonly type: "relationship";
2585
+ }>) => void) => () => void;
2586
+ }) => void;
2587
+ nextDynamicStep: (increment?: number | undefined) => void;
2588
+ stopDynamicView: () => void;
466
2589
  }>), replace?: boolean | undefined, action?: A | undefined): void;
467
2590
  }>;
468
2591
  export {};