@likec4/diagram 1.6.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/LikeC4Diagram.d.ts +1 -1
  2. package/dist/LikeC4Diagram.props.d.ts +10 -11
  3. package/dist/hooks/useUpdateEffect.d.ts +1 -0
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.mjs +769 -8587
  6. package/dist/state/DiagramContext.d.ts +746 -181
  7. package/dist/state/diagram-to-xyflow.d.ts +10 -0
  8. package/dist/state/diagramStore.d.ts +782 -202
  9. package/dist/style.css +273 -275
  10. package/dist/types.d.ts +20 -0
  11. package/dist/xyflow/EdgeMarkers.d.ts +1 -0
  12. package/dist/xyflow/FitviewOnDiagramChange.d.ts +1 -1
  13. package/dist/xyflow/XYFlow.d.ts +1 -4
  14. package/dist/xyflow/XYFlowEvents.d.ts +41 -12
  15. package/dist/xyflow/XYFlowInner.d.ts +0 -1
  16. package/dist/xyflow/edges/RelationshipEdge.d.ts +3 -3
  17. package/dist/xyflow/hooks/index.d.ts +0 -1
  18. package/dist/xyflow/hooks/useXYFlow.d.ts +27 -27
  19. package/dist/xyflow/types.d.ts +11 -19
  20. package/dist/xyflow/utils.d.ts +1 -0
  21. package/package.json +11 -11
  22. package/src/LikeC4Diagram.props.ts +17 -13
  23. package/src/LikeC4Diagram.tsx +67 -106
  24. package/src/globals.css.ts +10 -6
  25. package/src/hooks/useUpdateEffect.ts +16 -1
  26. package/src/index.ts +3 -0
  27. package/src/state/DiagramContext.tsx +19 -27
  28. package/src/{xyflow → state}/diagram-to-xyflow.ts +19 -18
  29. package/src/state/diagramStore.ts +404 -192
  30. package/src/types.ts +22 -0
  31. package/src/ui/BackwardForwardPanel.tsx +24 -7
  32. package/src/xyflow/EdgeMarkers.tsx +2 -0
  33. package/src/xyflow/FitviewOnDiagramChange.tsx +42 -75
  34. package/src/xyflow/SelectEdgesOnNodeFocus.tsx +1 -1
  35. package/src/xyflow/XYFlow.tsx +57 -35
  36. package/src/xyflow/XYFlowEvents.tsx +58 -10
  37. package/src/xyflow/XYFlowInner.tsx +9 -8
  38. package/src/xyflow/edges/RelationshipEdge.tsx +43 -29
  39. package/src/xyflow/edges/edges.css.ts +3 -3
  40. package/src/xyflow/edges/utils.ts +0 -1
  41. package/src/xyflow/hooks/index.ts +0 -1
  42. package/src/xyflow/hooks/useLayoutConstraints.ts +42 -65
  43. package/src/xyflow/nodes/element/ElementNode.tsx +8 -11
  44. package/src/xyflow/nodes/element/element.css.ts +8 -6
  45. package/src/xyflow/types.ts +14 -32
  46. package/src/xyflow/utils.ts +4 -0
  47. package/dist/xyflow/SyncWithDiagram.d.ts +0 -4
  48. package/dist/xyflow/diagram-to-xyflow.d.ts +0 -7
  49. package/src/xyflow/SyncWithDiagram.tsx +0 -85
package/dist/state/diagramStore.d.ts CHANGED
@@ -1,13 +1,15 @@
1
- import { DiagramNode, DiagramView, Fqn, ViewID } from '@likec4/core';
2
- import { XYPosition } from '@xyflow/react';
1
+ import { DiagramNode, DiagramView, Fqn, NodeId, ViewID } from '@likec4/core';
2
+ import { OnEdgesChange, OnNodesChange } from '@xyflow/react';
3
3
  import { MouseEvent as ReactMouseEvent } from 'react';
4
4
  import { Exact, Simplify } from 'type-fest';
5
5
  import { Changes, ElementIconRenderer, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
6
6
  import { XYStoreApi } from '../xyflow/hooks';
7
- import { XYFlowInstance } from '../xyflow/types';
7
+ import { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types';
8
8
 
9
- export type DiagramStore = {
10
- readonly storeDevId: string;
9
+ type RequiredOrNull<T> = {
10
+ [P in keyof T]-?: NonNullable<T[P]> | null;
11
+ };
12
+ export type DiagramInitialState = {
11
13
  view: DiagramView;
12
14
  readonly: boolean;
13
15
  showElementLinks: boolean;
@@ -18,13 +20,21 @@ export type DiagramStore = {
18
20
  nodesDraggable: boolean;
19
21
  nodesSelectable: boolean;
20
22
  experimentalEdgeEditing: boolean;
23
+ enableFocusMode: boolean;
21
24
  renderIcon: ElementIconRenderer | null;
22
- getContainer: () => HTMLDivElement | null;
23
- viewSyncDebounceTimeout: number | null;
25
+ enableDynamicViewWalkthrough: boolean;
24
26
  xyflow: XYFlowInstance;
25
27
  xystore: XYStoreApi;
28
+ getContainer: () => HTMLDivElement | null;
29
+ } & RequiredOrNull<LikeC4DiagramEventHandlers>;
30
+ export type DiagramState = Simplify<DiagramInitialState & {
31
+ readonly storeDevId: string;
32
+ xynodes: XYFlowNode[];
33
+ xyedges: XYFlowEdge[];
34
+ viewSyncDebounceTimeout: number | null;
35
+ viewportChanged: boolean;
26
36
  initialized: boolean;
27
- xyflowSynced: boolean;
37
+ isDynamicView: boolean;
28
38
  activeDynamicViewStep: number | null;
29
39
  lastClickedNodeId: string | null;
30
40
  lastClickedEdgeId: string | null;
@@ -32,19 +42,16 @@ export type DiagramStore = {
32
42
  hoveredNodeId: string | null;
33
43
  hoveredEdgeId: string | null;
34
44
  dimmed: ReadonlySet<string>;
35
- previousViews: DiagramView[];
36
45
  lastOnNavigate: null | {
37
46
  fromView: ViewID;
38
47
  toView: ViewID;
39
- element: DiagramNode;
40
- elementScreenPosition: XYPosition;
41
- positionCorrected: boolean;
48
+ fromNode: NodeId;
42
49
  };
43
- viewportChanged: boolean;
44
- } & Required<LikeC4DiagramEventHandlers>;
45
- export type DiagramInitialState = Pick<DiagramStore, 'view' | 'renderIcon' | 'readonly' | 'showElementLinks' | 'fitViewEnabled' | 'fitViewPadding' | 'zoomable' | 'pannable' | 'nodesDraggable' | 'nodesSelectable' | 'experimentalEdgeEditing'> & LikeC4DiagramEventHandlers;
46
- interface DiagramStoreActions {
47
- isDynamicView: () => boolean;
50
+ navigationHistory: Array<{
51
+ viewId: ViewID;
52
+ nodeId: NodeId | null;
53
+ }>;
54
+ navigationHistoryIndex: number;
48
55
  updateView: (view: DiagramView) => void;
49
56
  focusOnNode: (nodeId: string) => void;
50
57
  setHoveredNode: (nodeId: string | null) => void;
@@ -54,17 +61,24 @@ interface DiagramStoreActions {
54
61
  resetLastClicked: () => void;
55
62
  getElement(id: Fqn): DiagramNode | null;
56
63
  triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
57
- cancelSaveManualLayout: () => void;
64
+ /**
65
+ * @returns true if there was pending save layout
66
+ */
67
+ cancelSaveManualLayout: () => boolean;
68
+ scheduleSaveManualLayout: () => void;
58
69
  triggerSaveManualLayout: () => void;
59
70
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
60
71
  fitDiagram: (duration?: number) => void;
72
+ goBack: () => void;
73
+ goForward: () => void;
61
74
  nextDynamicStep: (increment?: number) => void;
75
+ activateDynamicStep: (step: number) => void;
62
76
  stopDynamicView: () => void;
63
- }
64
- export type DiagramState = Simplify<DiagramStore & DiagramStoreActions>;
65
- export type CreateDiagramStore = DiagramInitialState & Pick<DiagramStore, 'xystore' | 'xyflow' | 'getContainer'>;
66
- export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props: T): import('zustand/traditional').UseBoundStoreWithEqualityFn<Omit<Omit<import('zustand/vanilla').StoreApi<{
67
- readonly storeDevId: string;
77
+ onInit: (xyflow: XYFlowInstance) => void;
78
+ onNodesChange: OnNodesChange<XYFlowNode>;
79
+ onEdgesChange: OnEdgesChange<XYFlowEdge>;
80
+ }>;
81
+ export declare function createDiagramStore<T extends Exact<DiagramInitialState, T>>(props: T): import('zustand/traditional').UseBoundStoreWithEqualityFn<Omit<Omit<import('zustand/vanilla').StoreApi<{
68
82
  view: DiagramView;
69
83
  readonly: boolean;
70
84
  showElementLinks: boolean;
@@ -75,13 +89,29 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
75
89
  nodesDraggable: boolean;
76
90
  nodesSelectable: boolean;
77
91
  experimentalEdgeEditing: boolean;
92
+ enableFocusMode: boolean;
78
93
  renderIcon: ElementIconRenderer | null;
79
- getContainer: () => HTMLDivElement | null;
80
- viewSyncDebounceTimeout: number | null;
94
+ enableDynamicViewWalkthrough: boolean;
81
95
  xyflow: XYFlowInstance;
82
96
  xystore: XYStoreApi;
97
+ getContainer: () => HTMLDivElement | null;
98
+ onChange: import('../LikeC4Diagram.props').OnChange | null;
99
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null;
100
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null;
101
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null;
102
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null;
103
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null;
104
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
105
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
106
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
107
+ onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
108
+ readonly storeDevId: string;
109
+ xynodes: XYFlowNode[];
110
+ xyedges: XYFlowEdge[];
111
+ viewSyncDebounceTimeout: number | null;
112
+ viewportChanged: boolean;
83
113
  initialized: boolean;
84
- xyflowSynced: boolean;
114
+ isDynamicView: boolean;
85
115
  activeDynamicViewStep: number | null;
86
116
  lastClickedNodeId: string | null;
87
117
  lastClickedEdgeId: string | null;
@@ -89,25 +119,16 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
89
119
  hoveredNodeId: string | null;
90
120
  hoveredEdgeId: string | null;
91
121
  dimmed: ReadonlySet<string>;
92
- previousViews: DiagramView[];
93
122
  lastOnNavigate: null | {
94
123
  fromView: ViewID;
95
124
  toView: ViewID;
96
- element: DiagramNode;
97
- elementScreenPosition: XYPosition;
98
- positionCorrected: boolean;
125
+ fromNode: NodeId;
99
126
  };
100
- viewportChanged: boolean;
101
- onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
102
- onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
103
- onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
104
- onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
105
- onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
106
- onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
107
- onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
108
- onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
109
- onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
110
- isDynamicView: () => boolean;
127
+ navigationHistory: Array<{
128
+ viewId: ViewID;
129
+ nodeId: NodeId | null;
130
+ }>;
131
+ navigationHistoryIndex: number;
111
132
  updateView: (view: DiagramView) => void;
112
133
  focusOnNode: (nodeId: string) => void;
113
134
  setHoveredNode: (nodeId: string | null) => void;
@@ -117,16 +138,22 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
117
138
  resetLastClicked: () => void;
118
139
  getElement: (id: Fqn) => DiagramNode | null;
119
140
  triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
120
- cancelSaveManualLayout: () => void;
141
+ cancelSaveManualLayout: () => boolean;
142
+ scheduleSaveManualLayout: () => void;
121
143
  triggerSaveManualLayout: () => void;
122
144
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
123
145
  fitDiagram: (duration?: number) => void;
146
+ goBack: () => void;
147
+ goForward: () => void;
124
148
  nextDynamicStep: (increment?: number) => void;
149
+ activateDynamicStep: (step: number) => void;
125
150
  stopDynamicView: () => void;
151
+ onInit: (xyflow: XYFlowInstance) => void;
152
+ onNodesChange: OnNodesChange<XYFlowNode>;
153
+ onEdgesChange: OnEdgesChange<XYFlowEdge>;
126
154
  }>, "subscribe"> & {
127
155
  subscribe: {
128
156
  (listener: (selectedState: {
129
- readonly storeDevId: string;
130
157
  view: DiagramView;
131
158
  readonly: boolean;
132
159
  showElementLinks: boolean;
@@ -137,13 +164,57 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
137
164
  nodesDraggable: boolean;
138
165
  nodesSelectable: boolean;
139
166
  experimentalEdgeEditing: boolean;
167
+ enableFocusMode: boolean;
140
168
  renderIcon: ElementIconRenderer | null;
141
- getContainer: () => HTMLDivElement | null;
142
- viewSyncDebounceTimeout: number | null;
169
+ enableDynamicViewWalkthrough: boolean;
143
170
  xyflow: XYFlowInstance;
144
171
  xystore: XYStoreApi;
172
+ getContainer: () => HTMLDivElement | null;
173
+ onChange: import('../LikeC4Diagram.props').OnChange | null;
174
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null;
175
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null;
176
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null;
177
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null;
178
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null;
179
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
180
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
181
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
182
+ onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
183
+ readonly storeDevId: string;
184
+ xynodes: XYFlowNode[];
185
+ xyedges: {
186
+ id: string;
187
+ type: "relationship";
188
+ source: string;
189
+ target: string;
190
+ sourceHandle?: string | null;
191
+ targetHandle?: string | null;
192
+ animated?: boolean;
193
+ hidden?: boolean;
194
+ deletable?: boolean;
195
+ selectable?: boolean;
196
+ data: import('../xyflow/types').RelationshipData;
197
+ selected?: boolean;
198
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
199
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
200
+ zIndex?: number;
201
+ ariaLabel?: string;
202
+ interactionWidth?: number;
203
+ label?: string | import('react').ReactNode;
204
+ labelStyle?: import('react').CSSProperties;
205
+ labelShowBg?: boolean;
206
+ labelBgStyle?: import('react').CSSProperties;
207
+ labelBgPadding?: [number, number];
208
+ labelBgBorderRadius?: number;
209
+ style?: import('react').CSSProperties;
210
+ className?: string;
211
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
212
+ focusable?: boolean;
213
+ }[];
214
+ viewSyncDebounceTimeout: number | null;
215
+ viewportChanged: boolean;
145
216
  initialized: boolean;
146
- xyflowSynced: boolean;
217
+ isDynamicView: boolean;
147
218
  activeDynamicViewStep: number | null;
148
219
  lastClickedNodeId: string | null;
149
220
  lastClickedEdgeId: string | null;
@@ -151,25 +222,16 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
151
222
  hoveredNodeId: string | null;
152
223
  hoveredEdgeId: string | null;
153
224
  dimmed: ReadonlySet<string>;
154
- previousViews: DiagramView[];
155
225
  lastOnNavigate: null | {
156
226
  fromView: ViewID;
157
227
  toView: ViewID;
158
- element: DiagramNode;
159
- elementScreenPosition: XYPosition;
160
- positionCorrected: boolean;
228
+ fromNode: NodeId;
161
229
  };
162
- viewportChanged: boolean;
163
- onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
164
- onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
165
- onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
166
- onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
167
- onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
168
- onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
169
- onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
170
- onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
171
- onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
172
- isDynamicView: () => boolean;
230
+ navigationHistory: Array<{
231
+ viewId: ViewID;
232
+ nodeId: NodeId | null;
233
+ }>;
234
+ navigationHistoryIndex: number;
173
235
  updateView: (view: DiagramView) => void;
174
236
  focusOnNode: (nodeId: string) => void;
175
237
  setHoveredNode: (nodeId: string | null) => void;
@@ -179,14 +241,48 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
179
241
  resetLastClicked: () => void;
180
242
  getElement: (id: Fqn) => DiagramNode | null;
181
243
  triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
182
- cancelSaveManualLayout: () => void;
244
+ cancelSaveManualLayout: () => boolean;
245
+ scheduleSaveManualLayout: () => void;
183
246
  triggerSaveManualLayout: () => void;
184
247
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
185
248
  fitDiagram: (duration?: number) => void;
249
+ goBack: () => void;
250
+ goForward: () => void;
186
251
  nextDynamicStep: (increment?: number) => void;
252
+ activateDynamicStep: (step: number) => void;
187
253
  stopDynamicView: () => void;
254
+ onInit: (xyflow: XYFlowInstance) => void;
255
+ onNodesChange: OnNodesChange<XYFlowNode>;
256
+ onEdgesChange: OnEdgesChange<{
257
+ id: string;
258
+ type: "relationship";
259
+ source: string;
260
+ target: string;
261
+ sourceHandle?: string | null;
262
+ targetHandle?: string | null;
263
+ animated?: boolean;
264
+ hidden?: boolean;
265
+ deletable?: boolean;
266
+ selectable?: boolean;
267
+ data: import('../xyflow/types').RelationshipData;
268
+ selected?: boolean;
269
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
270
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
271
+ zIndex?: number;
272
+ ariaLabel?: string;
273
+ interactionWidth?: number;
274
+ label?: string | import('react').ReactNode;
275
+ labelStyle?: import('react').CSSProperties;
276
+ labelShowBg?: boolean;
277
+ labelBgStyle?: import('react').CSSProperties;
278
+ labelBgPadding?: [number, number];
279
+ labelBgBorderRadius?: number;
280
+ style?: import('react').CSSProperties;
281
+ className?: string;
282
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
283
+ focusable?: boolean;
284
+ }>;
188
285
  }, previousSelectedState: {
189
- readonly storeDevId: string;
190
286
  view: DiagramView;
191
287
  readonly: boolean;
192
288
  showElementLinks: boolean;
@@ -197,13 +293,57 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
197
293
  nodesDraggable: boolean;
198
294
  nodesSelectable: boolean;
199
295
  experimentalEdgeEditing: boolean;
296
+ enableFocusMode: boolean;
200
297
  renderIcon: ElementIconRenderer | null;
201
- getContainer: () => HTMLDivElement | null;
202
- viewSyncDebounceTimeout: number | null;
298
+ enableDynamicViewWalkthrough: boolean;
203
299
  xyflow: XYFlowInstance;
204
300
  xystore: XYStoreApi;
301
+ getContainer: () => HTMLDivElement | null;
302
+ onChange: import('../LikeC4Diagram.props').OnChange | null;
303
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null;
304
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null;
305
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null;
306
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null;
307
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null;
308
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
309
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
310
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
311
+ onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
312
+ readonly storeDevId: string;
313
+ xynodes: XYFlowNode[];
314
+ xyedges: {
315
+ id: string;
316
+ type: "relationship";
317
+ source: string;
318
+ target: string;
319
+ sourceHandle?: string | null;
320
+ targetHandle?: string | null;
321
+ animated?: boolean;
322
+ hidden?: boolean;
323
+ deletable?: boolean;
324
+ selectable?: boolean;
325
+ data: import('../xyflow/types').RelationshipData;
326
+ selected?: boolean;
327
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
328
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
329
+ zIndex?: number;
330
+ ariaLabel?: string;
331
+ interactionWidth?: number;
332
+ label?: string | import('react').ReactNode;
333
+ labelStyle?: import('react').CSSProperties;
334
+ labelShowBg?: boolean;
335
+ labelBgStyle?: import('react').CSSProperties;
336
+ labelBgPadding?: [number, number];
337
+ labelBgBorderRadius?: number;
338
+ style?: import('react').CSSProperties;
339
+ className?: string;
340
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
341
+ focusable?: boolean;
342
+ }[];
343
+ viewSyncDebounceTimeout: number | null;
344
+ viewportChanged: boolean;
205
345
  initialized: boolean;
206
- xyflowSynced: boolean;
346
+ isDynamicView: boolean;
207
347
  activeDynamicViewStep: number | null;
208
348
  lastClickedNodeId: string | null;
209
349
  lastClickedEdgeId: string | null;
@@ -211,25 +351,16 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
211
351
  hoveredNodeId: string | null;
212
352
  hoveredEdgeId: string | null;
213
353
  dimmed: ReadonlySet<string>;
214
- previousViews: DiagramView[];
215
354
  lastOnNavigate: null | {
216
355
  fromView: ViewID;
217
356
  toView: ViewID;
218
- element: DiagramNode;
219
- elementScreenPosition: XYPosition;
220
- positionCorrected: boolean;
357
+ fromNode: NodeId;
221
358
  };
222
- viewportChanged: boolean;
223
- onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
224
- onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
225
- onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
226
- onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
227
- onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
228
- onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
229
- onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
230
- onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
231
- onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
232
- isDynamicView: () => boolean;
359
+ navigationHistory: Array<{
360
+ viewId: ViewID;
361
+ nodeId: NodeId | null;
362
+ }>;
363
+ navigationHistoryIndex: number;
233
364
  updateView: (view: DiagramView) => void;
234
365
  focusOnNode: (nodeId: string) => void;
235
366
  setHoveredNode: (nodeId: string | null) => void;
@@ -239,15 +370,49 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
239
370
  resetLastClicked: () => void;
240
371
  getElement: (id: Fqn) => DiagramNode | null;
241
372
  triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
242
- cancelSaveManualLayout: () => void;
373
+ cancelSaveManualLayout: () => boolean;
374
+ scheduleSaveManualLayout: () => void;
243
375
  triggerSaveManualLayout: () => void;
244
376
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
245
377
  fitDiagram: (duration?: number) => void;
378
+ goBack: () => void;
379
+ goForward: () => void;
246
380
  nextDynamicStep: (increment?: number) => void;
381
+ activateDynamicStep: (step: number) => void;
247
382
  stopDynamicView: () => void;
383
+ onInit: (xyflow: XYFlowInstance) => void;
384
+ onNodesChange: OnNodesChange<XYFlowNode>;
385
+ onEdgesChange: OnEdgesChange<{
386
+ id: string;
387
+ type: "relationship";
388
+ source: string;
389
+ target: string;
390
+ sourceHandle?: string | null;
391
+ targetHandle?: string | null;
392
+ animated?: boolean;
393
+ hidden?: boolean;
394
+ deletable?: boolean;
395
+ selectable?: boolean;
396
+ data: import('../xyflow/types').RelationshipData;
397
+ selected?: boolean;
398
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
399
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
400
+ zIndex?: number;
401
+ ariaLabel?: string;
402
+ interactionWidth?: number;
403
+ label?: string | import('react').ReactNode;
404
+ labelStyle?: import('react').CSSProperties;
405
+ labelShowBg?: boolean;
406
+ labelBgStyle?: import('react').CSSProperties;
407
+ labelBgPadding?: [number, number];
408
+ labelBgBorderRadius?: number;
409
+ style?: import('react').CSSProperties;
410
+ className?: string;
411
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
412
+ focusable?: boolean;
413
+ }>;
248
414
  }) => void): () => void;
249
415
  <U>(selector: (state: {
250
- readonly storeDevId: string;
251
416
  view: DiagramView;
252
417
  readonly: boolean;
253
418
  showElementLinks: boolean;
@@ -258,13 +423,57 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
258
423
  nodesDraggable: boolean;
259
424
  nodesSelectable: boolean;
260
425
  experimentalEdgeEditing: boolean;
426
+ enableFocusMode: boolean;
261
427
  renderIcon: ElementIconRenderer | null;
262
- getContainer: () => HTMLDivElement | null;
263
- viewSyncDebounceTimeout: number | null;
428
+ enableDynamicViewWalkthrough: boolean;
264
429
  xyflow: XYFlowInstance;
265
430
  xystore: XYStoreApi;
431
+ getContainer: () => HTMLDivElement | null;
432
+ onChange: import('../LikeC4Diagram.props').OnChange | null;
433
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null;
434
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null;
435
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null;
436
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null;
437
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null;
438
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
439
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
440
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
441
+ onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
442
+ readonly storeDevId: string;
443
+ xynodes: XYFlowNode[];
444
+ xyedges: {
445
+ id: string;
446
+ type: "relationship";
447
+ source: string;
448
+ target: string;
449
+ sourceHandle?: string | null;
450
+ targetHandle?: string | null;
451
+ animated?: boolean;
452
+ hidden?: boolean;
453
+ deletable?: boolean;
454
+ selectable?: boolean;
455
+ data: import('../xyflow/types').RelationshipData;
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?: string | 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
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
471
+ focusable?: boolean;
472
+ }[];
473
+ viewSyncDebounceTimeout: number | null;
474
+ viewportChanged: boolean;
266
475
  initialized: boolean;
267
- xyflowSynced: boolean;
476
+ isDynamicView: boolean;
268
477
  activeDynamicViewStep: number | null;
269
478
  lastClickedNodeId: string | null;
270
479
  lastClickedEdgeId: string | null;
@@ -272,25 +481,16 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
272
481
  hoveredNodeId: string | null;
273
482
  hoveredEdgeId: string | null;
274
483
  dimmed: ReadonlySet<string>;
275
- previousViews: DiagramView[];
276
484
  lastOnNavigate: null | {
277
485
  fromView: ViewID;
278
486
  toView: ViewID;
279
- element: DiagramNode;
280
- elementScreenPosition: XYPosition;
281
- positionCorrected: boolean;
487
+ fromNode: NodeId;
282
488
  };
283
- viewportChanged: boolean;
284
- onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
285
- onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
286
- onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
287
- onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
288
- onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
289
- onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
290
- onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
291
- onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
292
- onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
293
- isDynamicView: () => boolean;
489
+ navigationHistory: Array<{
490
+ viewId: ViewID;
491
+ nodeId: NodeId | null;
492
+ }>;
493
+ navigationHistoryIndex: number;
294
494
  updateView: (view: DiagramView) => void;
295
495
  focusOnNode: (nodeId: string) => void;
296
496
  setHoveredNode: (nodeId: string | null) => void;
@@ -300,12 +500,47 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
300
500
  resetLastClicked: () => void;
301
501
  getElement: (id: Fqn) => DiagramNode | null;
302
502
  triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
303
- cancelSaveManualLayout: () => void;
503
+ cancelSaveManualLayout: () => boolean;
504
+ scheduleSaveManualLayout: () => void;
304
505
  triggerSaveManualLayout: () => void;
305
506
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
306
507
  fitDiagram: (duration?: number) => void;
508
+ goBack: () => void;
509
+ goForward: () => void;
307
510
  nextDynamicStep: (increment?: number) => void;
511
+ activateDynamicStep: (step: number) => void;
308
512
  stopDynamicView: () => void;
513
+ onInit: (xyflow: XYFlowInstance) => void;
514
+ onNodesChange: OnNodesChange<XYFlowNode>;
515
+ onEdgesChange: OnEdgesChange<{
516
+ id: string;
517
+ type: "relationship";
518
+ source: string;
519
+ target: string;
520
+ sourceHandle?: string | null;
521
+ targetHandle?: string | null;
522
+ animated?: boolean;
523
+ hidden?: boolean;
524
+ deletable?: boolean;
525
+ selectable?: boolean;
526
+ data: import('../xyflow/types').RelationshipData;
527
+ selected?: boolean;
528
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
529
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
530
+ zIndex?: number;
531
+ ariaLabel?: string;
532
+ interactionWidth?: number;
533
+ label?: string | import('react').ReactNode;
534
+ labelStyle?: import('react').CSSProperties;
535
+ labelShowBg?: boolean;
536
+ labelBgStyle?: import('react').CSSProperties;
537
+ labelBgPadding?: [number, number];
538
+ labelBgBorderRadius?: number;
539
+ style?: import('react').CSSProperties;
540
+ className?: string;
541
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
542
+ focusable?: boolean;
543
+ }>;
309
544
  }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
310
545
  equalityFn?: (a: U, b: U) => boolean;
311
546
  fireImmediately?: boolean;
@@ -315,7 +550,6 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
315
550
  setState<A extends string | {
316
551
  type: string;
317
552
  }>(partial: {
318
- readonly storeDevId: string;
319
553
  view: DiagramView;
320
554
  readonly: boolean;
321
555
  showElementLinks: boolean;
@@ -326,13 +560,57 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
326
560
  nodesDraggable: boolean;
327
561
  nodesSelectable: boolean;
328
562
  experimentalEdgeEditing: boolean;
563
+ enableFocusMode: boolean;
329
564
  renderIcon: ElementIconRenderer | null;
330
- getContainer: () => HTMLDivElement | null;
331
- viewSyncDebounceTimeout: number | null;
565
+ enableDynamicViewWalkthrough: boolean;
332
566
  xyflow: XYFlowInstance;
333
567
  xystore: XYStoreApi;
568
+ getContainer: () => HTMLDivElement | null;
569
+ onChange: import('../LikeC4Diagram.props').OnChange | null;
570
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null;
571
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null;
572
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null;
573
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null;
574
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null;
575
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
576
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
577
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
578
+ onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
579
+ readonly storeDevId: string;
580
+ xynodes: XYFlowNode[];
581
+ xyedges: {
582
+ id: string;
583
+ type: "relationship";
584
+ source: string;
585
+ target: string;
586
+ sourceHandle?: string | null;
587
+ targetHandle?: string | null;
588
+ animated?: boolean;
589
+ hidden?: boolean;
590
+ deletable?: boolean;
591
+ selectable?: boolean;
592
+ data: import('../xyflow/types').RelationshipData;
593
+ selected?: boolean;
594
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
595
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
596
+ zIndex?: number;
597
+ ariaLabel?: string;
598
+ interactionWidth?: number;
599
+ label?: string | import('react').ReactNode;
600
+ labelStyle?: import('react').CSSProperties;
601
+ labelShowBg?: boolean;
602
+ labelBgStyle?: import('react').CSSProperties;
603
+ labelBgPadding?: [number, number];
604
+ labelBgBorderRadius?: number;
605
+ style?: import('react').CSSProperties;
606
+ className?: string;
607
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
608
+ focusable?: boolean;
609
+ }[];
610
+ viewSyncDebounceTimeout: number | null;
611
+ viewportChanged: boolean;
334
612
  initialized: boolean;
335
- xyflowSynced: boolean;
613
+ isDynamicView: boolean;
336
614
  activeDynamicViewStep: number | null;
337
615
  lastClickedNodeId: string | null;
338
616
  lastClickedEdgeId: string | null;
@@ -340,25 +618,16 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
340
618
  hoveredNodeId: string | null;
341
619
  hoveredEdgeId: string | null;
342
620
  dimmed: ReadonlySet<string>;
343
- previousViews: DiagramView[];
344
621
  lastOnNavigate: null | {
345
622
  fromView: ViewID;
346
623
  toView: ViewID;
347
- element: DiagramNode;
348
- elementScreenPosition: XYPosition;
349
- positionCorrected: boolean;
624
+ fromNode: NodeId;
350
625
  };
351
- viewportChanged: boolean;
352
- onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
353
- onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
354
- onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
355
- onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
356
- onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
357
- onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
358
- onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
359
- onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
360
- onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
361
- isDynamicView: () => boolean;
626
+ navigationHistory: Array<{
627
+ viewId: ViewID;
628
+ nodeId: NodeId | null;
629
+ }>;
630
+ navigationHistoryIndex: number;
362
631
  updateView: (view: DiagramView) => void;
363
632
  focusOnNode: (nodeId: string) => void;
364
633
  setHoveredNode: (nodeId: string | null) => void;
@@ -368,14 +637,48 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
368
637
  resetLastClicked: () => void;
369
638
  getElement: (id: Fqn) => DiagramNode | null;
370
639
  triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
371
- cancelSaveManualLayout: () => void;
640
+ cancelSaveManualLayout: () => boolean;
641
+ scheduleSaveManualLayout: () => void;
372
642
  triggerSaveManualLayout: () => void;
373
643
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
374
644
  fitDiagram: (duration?: number) => void;
645
+ goBack: () => void;
646
+ goForward: () => void;
375
647
  nextDynamicStep: (increment?: number) => void;
648
+ activateDynamicStep: (step: number) => void;
376
649
  stopDynamicView: () => void;
650
+ onInit: (xyflow: XYFlowInstance) => void;
651
+ onNodesChange: OnNodesChange<XYFlowNode>;
652
+ onEdgesChange: OnEdgesChange<{
653
+ id: string;
654
+ type: "relationship";
655
+ source: string;
656
+ target: string;
657
+ sourceHandle?: string | null;
658
+ targetHandle?: string | null;
659
+ animated?: boolean;
660
+ hidden?: boolean;
661
+ deletable?: boolean;
662
+ selectable?: boolean;
663
+ data: import('../xyflow/types').RelationshipData;
664
+ selected?: boolean;
665
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
666
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
667
+ zIndex?: number;
668
+ ariaLabel?: string;
669
+ interactionWidth?: number;
670
+ label?: string | import('react').ReactNode;
671
+ labelStyle?: import('react').CSSProperties;
672
+ labelShowBg?: boolean;
673
+ labelBgStyle?: import('react').CSSProperties;
674
+ labelBgPadding?: [number, number];
675
+ labelBgBorderRadius?: number;
676
+ style?: import('react').CSSProperties;
677
+ className?: string;
678
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
679
+ focusable?: boolean;
680
+ }>;
377
681
  } | Partial<{
378
- readonly storeDevId: string;
379
682
  view: DiagramView;
380
683
  readonly: boolean;
381
684
  showElementLinks: boolean;
@@ -386,13 +689,57 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
386
689
  nodesDraggable: boolean;
387
690
  nodesSelectable: boolean;
388
691
  experimentalEdgeEditing: boolean;
692
+ enableFocusMode: boolean;
389
693
  renderIcon: ElementIconRenderer | null;
390
- getContainer: () => HTMLDivElement | null;
391
- viewSyncDebounceTimeout: number | null;
694
+ enableDynamicViewWalkthrough: boolean;
392
695
  xyflow: XYFlowInstance;
393
696
  xystore: XYStoreApi;
697
+ getContainer: () => HTMLDivElement | null;
698
+ onChange: import('../LikeC4Diagram.props').OnChange | null;
699
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null;
700
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null;
701
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null;
702
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null;
703
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null;
704
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
705
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
706
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
707
+ onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
708
+ readonly storeDevId: string;
709
+ xynodes: XYFlowNode[];
710
+ xyedges: {
711
+ id: string;
712
+ type: "relationship";
713
+ source: string;
714
+ target: string;
715
+ sourceHandle?: string | null;
716
+ targetHandle?: string | null;
717
+ animated?: boolean;
718
+ hidden?: boolean;
719
+ deletable?: boolean;
720
+ selectable?: boolean;
721
+ data: import('../xyflow/types').RelationshipData;
722
+ selected?: boolean;
723
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
724
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
725
+ zIndex?: number;
726
+ ariaLabel?: string;
727
+ interactionWidth?: number;
728
+ label?: string | import('react').ReactNode;
729
+ labelStyle?: import('react').CSSProperties;
730
+ labelShowBg?: boolean;
731
+ labelBgStyle?: import('react').CSSProperties;
732
+ labelBgPadding?: [number, number];
733
+ labelBgBorderRadius?: number;
734
+ style?: import('react').CSSProperties;
735
+ className?: string;
736
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
737
+ focusable?: boolean;
738
+ }[];
739
+ viewSyncDebounceTimeout: number | null;
740
+ viewportChanged: boolean;
394
741
  initialized: boolean;
395
- xyflowSynced: boolean;
742
+ isDynamicView: boolean;
396
743
  activeDynamicViewStep: number | null;
397
744
  lastClickedNodeId: string | null;
398
745
  lastClickedEdgeId: string | null;
@@ -400,25 +747,16 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
400
747
  hoveredNodeId: string | null;
401
748
  hoveredEdgeId: string | null;
402
749
  dimmed: ReadonlySet<string>;
403
- previousViews: DiagramView[];
404
750
  lastOnNavigate: null | {
405
751
  fromView: ViewID;
406
752
  toView: ViewID;
407
- element: DiagramNode;
408
- elementScreenPosition: XYPosition;
409
- positionCorrected: boolean;
753
+ fromNode: NodeId;
410
754
  };
411
- viewportChanged: boolean;
412
- onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
413
- onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
414
- onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
415
- onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
416
- onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
417
- onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
418
- onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
419
- onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
420
- onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
421
- isDynamicView: () => boolean;
755
+ navigationHistory: Array<{
756
+ viewId: ViewID;
757
+ nodeId: NodeId | null;
758
+ }>;
759
+ navigationHistoryIndex: number;
422
760
  updateView: (view: DiagramView) => void;
423
761
  focusOnNode: (nodeId: string) => void;
424
762
  setHoveredNode: (nodeId: string | null) => void;
@@ -428,14 +766,48 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
428
766
  resetLastClicked: () => void;
429
767
  getElement: (id: Fqn) => DiagramNode | null;
430
768
  triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
431
- cancelSaveManualLayout: () => void;
769
+ cancelSaveManualLayout: () => boolean;
770
+ scheduleSaveManualLayout: () => void;
432
771
  triggerSaveManualLayout: () => void;
433
772
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
434
773
  fitDiagram: (duration?: number) => void;
774
+ goBack: () => void;
775
+ goForward: () => void;
435
776
  nextDynamicStep: (increment?: number) => void;
777
+ activateDynamicStep: (step: number) => void;
436
778
  stopDynamicView: () => void;
779
+ onInit: (xyflow: XYFlowInstance) => void;
780
+ onNodesChange: OnNodesChange<XYFlowNode>;
781
+ onEdgesChange: OnEdgesChange<{
782
+ id: string;
783
+ type: "relationship";
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
+ data: import('../xyflow/types').RelationshipData;
793
+ selected?: boolean;
794
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
795
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
796
+ zIndex?: number;
797
+ ariaLabel?: string;
798
+ interactionWidth?: number;
799
+ label?: string | import('react').ReactNode;
800
+ labelStyle?: import('react').CSSProperties;
801
+ labelShowBg?: boolean;
802
+ labelBgStyle?: import('react').CSSProperties;
803
+ labelBgPadding?: [number, number];
804
+ labelBgBorderRadius?: number;
805
+ style?: import('react').CSSProperties;
806
+ className?: string;
807
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
808
+ focusable?: boolean;
809
+ }>;
437
810
  }> | ((state: {
438
- readonly storeDevId: string;
439
811
  view: DiagramView;
440
812
  readonly: boolean;
441
813
  showElementLinks: boolean;
@@ -446,13 +818,57 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
446
818
  nodesDraggable: boolean;
447
819
  nodesSelectable: boolean;
448
820
  experimentalEdgeEditing: boolean;
821
+ enableFocusMode: boolean;
449
822
  renderIcon: ElementIconRenderer | null;
450
- getContainer: () => HTMLDivElement | null;
451
- viewSyncDebounceTimeout: number | null;
823
+ enableDynamicViewWalkthrough: boolean;
452
824
  xyflow: XYFlowInstance;
453
825
  xystore: XYStoreApi;
826
+ getContainer: () => HTMLDivElement | null;
827
+ onChange: import('../LikeC4Diagram.props').OnChange | null;
828
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null;
829
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null;
830
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null;
831
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null;
832
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null;
833
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
834
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
835
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
836
+ onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
837
+ readonly storeDevId: string;
838
+ xynodes: XYFlowNode[];
839
+ xyedges: {
840
+ id: string;
841
+ type: "relationship";
842
+ source: string;
843
+ target: string;
844
+ sourceHandle?: string | null;
845
+ targetHandle?: string | null;
846
+ animated?: boolean;
847
+ hidden?: boolean;
848
+ deletable?: boolean;
849
+ selectable?: boolean;
850
+ data: import('../xyflow/types').RelationshipData;
851
+ selected?: boolean;
852
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
853
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
854
+ zIndex?: number;
855
+ ariaLabel?: string;
856
+ interactionWidth?: number;
857
+ label?: string | import('react').ReactNode;
858
+ labelStyle?: import('react').CSSProperties;
859
+ labelShowBg?: boolean;
860
+ labelBgStyle?: import('react').CSSProperties;
861
+ labelBgPadding?: [number, number];
862
+ labelBgBorderRadius?: number;
863
+ style?: import('react').CSSProperties;
864
+ className?: string;
865
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
866
+ focusable?: boolean;
867
+ }[];
868
+ viewSyncDebounceTimeout: number | null;
869
+ viewportChanged: boolean;
454
870
  initialized: boolean;
455
- xyflowSynced: boolean;
871
+ isDynamicView: boolean;
456
872
  activeDynamicViewStep: number | null;
457
873
  lastClickedNodeId: string | null;
458
874
  lastClickedEdgeId: string | null;
@@ -460,25 +876,16 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
460
876
  hoveredNodeId: string | null;
461
877
  hoveredEdgeId: string | null;
462
878
  dimmed: ReadonlySet<string>;
463
- previousViews: DiagramView[];
464
879
  lastOnNavigate: null | {
465
880
  fromView: ViewID;
466
881
  toView: ViewID;
467
- element: DiagramNode;
468
- elementScreenPosition: XYPosition;
469
- positionCorrected: boolean;
882
+ fromNode: NodeId;
470
883
  };
471
- viewportChanged: boolean;
472
- onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
473
- onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
474
- onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
475
- onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
476
- onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
477
- onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
478
- onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
479
- onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
480
- onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
481
- isDynamicView: () => boolean;
884
+ navigationHistory: Array<{
885
+ viewId: ViewID;
886
+ nodeId: NodeId | null;
887
+ }>;
888
+ navigationHistoryIndex: number;
482
889
  updateView: (view: DiagramView) => void;
483
890
  focusOnNode: (nodeId: string) => void;
484
891
  setHoveredNode: (nodeId: string | null) => void;
@@ -488,14 +895,48 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
488
895
  resetLastClicked: () => void;
489
896
  getElement: (id: Fqn) => DiagramNode | null;
490
897
  triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
491
- cancelSaveManualLayout: () => void;
898
+ cancelSaveManualLayout: () => boolean;
899
+ scheduleSaveManualLayout: () => void;
492
900
  triggerSaveManualLayout: () => void;
493
901
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
494
902
  fitDiagram: (duration?: number) => void;
903
+ goBack: () => void;
904
+ goForward: () => void;
495
905
  nextDynamicStep: (increment?: number) => void;
906
+ activateDynamicStep: (step: number) => void;
496
907
  stopDynamicView: () => void;
908
+ onInit: (xyflow: XYFlowInstance) => void;
909
+ onNodesChange: OnNodesChange<XYFlowNode>;
910
+ onEdgesChange: OnEdgesChange<{
911
+ id: string;
912
+ type: "relationship";
913
+ source: string;
914
+ target: string;
915
+ sourceHandle?: string | null;
916
+ targetHandle?: string | null;
917
+ animated?: boolean;
918
+ hidden?: boolean;
919
+ deletable?: boolean;
920
+ selectable?: boolean;
921
+ data: import('../xyflow/types').RelationshipData;
922
+ selected?: boolean;
923
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
924
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
925
+ zIndex?: number;
926
+ ariaLabel?: string;
927
+ interactionWidth?: number;
928
+ label?: string | import('react').ReactNode;
929
+ labelStyle?: import('react').CSSProperties;
930
+ labelShowBg?: boolean;
931
+ labelBgStyle?: import('react').CSSProperties;
932
+ labelBgPadding?: [number, number];
933
+ labelBgBorderRadius?: number;
934
+ style?: import('react').CSSProperties;
935
+ className?: string;
936
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
937
+ focusable?: boolean;
938
+ }>;
497
939
  }) => {
498
- readonly storeDevId: string;
499
940
  view: DiagramView;
500
941
  readonly: boolean;
501
942
  showElementLinks: boolean;
@@ -506,13 +947,57 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
506
947
  nodesDraggable: boolean;
507
948
  nodesSelectable: boolean;
508
949
  experimentalEdgeEditing: boolean;
950
+ enableFocusMode: boolean;
509
951
  renderIcon: ElementIconRenderer | null;
510
- getContainer: () => HTMLDivElement | null;
511
- viewSyncDebounceTimeout: number | null;
952
+ enableDynamicViewWalkthrough: boolean;
512
953
  xyflow: XYFlowInstance;
513
954
  xystore: XYStoreApi;
955
+ getContainer: () => HTMLDivElement | null;
956
+ onChange: import('../LikeC4Diagram.props').OnChange | null;
957
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null;
958
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null;
959
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null;
960
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null;
961
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null;
962
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
963
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
964
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
965
+ onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
966
+ readonly storeDevId: string;
967
+ xynodes: XYFlowNode[];
968
+ xyedges: {
969
+ id: string;
970
+ type: "relationship";
971
+ source: string;
972
+ target: string;
973
+ sourceHandle?: string | null;
974
+ targetHandle?: string | null;
975
+ animated?: boolean;
976
+ hidden?: boolean;
977
+ deletable?: boolean;
978
+ selectable?: boolean;
979
+ data: import('../xyflow/types').RelationshipData;
980
+ selected?: boolean;
981
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
982
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
983
+ zIndex?: number;
984
+ ariaLabel?: string;
985
+ interactionWidth?: number;
986
+ label?: string | import('react').ReactNode;
987
+ labelStyle?: import('react').CSSProperties;
988
+ labelShowBg?: boolean;
989
+ labelBgStyle?: import('react').CSSProperties;
990
+ labelBgPadding?: [number, number];
991
+ labelBgBorderRadius?: number;
992
+ style?: import('react').CSSProperties;
993
+ className?: string;
994
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
995
+ focusable?: boolean;
996
+ }[];
997
+ viewSyncDebounceTimeout: number | null;
998
+ viewportChanged: boolean;
514
999
  initialized: boolean;
515
- xyflowSynced: boolean;
1000
+ isDynamicView: boolean;
516
1001
  activeDynamicViewStep: number | null;
517
1002
  lastClickedNodeId: string | null;
518
1003
  lastClickedEdgeId: string | null;
@@ -520,25 +1005,16 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
520
1005
  hoveredNodeId: string | null;
521
1006
  hoveredEdgeId: string | null;
522
1007
  dimmed: ReadonlySet<string>;
523
- previousViews: DiagramView[];
524
1008
  lastOnNavigate: null | {
525
1009
  fromView: ViewID;
526
1010
  toView: ViewID;
527
- element: DiagramNode;
528
- elementScreenPosition: XYPosition;
529
- positionCorrected: boolean;
1011
+ fromNode: NodeId;
530
1012
  };
531
- viewportChanged: boolean;
532
- onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
533
- onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
534
- onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
535
- onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
536
- onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
537
- onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
538
- onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
539
- onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
540
- onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
541
- isDynamicView: () => boolean;
1013
+ navigationHistory: Array<{
1014
+ viewId: ViewID;
1015
+ nodeId: NodeId | null;
1016
+ }>;
1017
+ navigationHistoryIndex: number;
542
1018
  updateView: (view: DiagramView) => void;
543
1019
  focusOnNode: (nodeId: string) => void;
544
1020
  setHoveredNode: (nodeId: string | null) => void;
@@ -548,14 +1024,48 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
548
1024
  resetLastClicked: () => void;
549
1025
  getElement: (id: Fqn) => DiagramNode | null;
550
1026
  triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
551
- cancelSaveManualLayout: () => void;
1027
+ cancelSaveManualLayout: () => boolean;
1028
+ scheduleSaveManualLayout: () => void;
552
1029
  triggerSaveManualLayout: () => void;
553
1030
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
554
1031
  fitDiagram: (duration?: number) => void;
1032
+ goBack: () => void;
1033
+ goForward: () => void;
555
1034
  nextDynamicStep: (increment?: number) => void;
1035
+ activateDynamicStep: (step: number) => void;
556
1036
  stopDynamicView: () => void;
1037
+ onInit: (xyflow: XYFlowInstance) => void;
1038
+ onNodesChange: OnNodesChange<XYFlowNode>;
1039
+ onEdgesChange: OnEdgesChange<{
1040
+ id: string;
1041
+ type: "relationship";
1042
+ source: string;
1043
+ target: string;
1044
+ sourceHandle?: string | null;
1045
+ targetHandle?: string | null;
1046
+ animated?: boolean;
1047
+ hidden?: boolean;
1048
+ deletable?: boolean;
1049
+ selectable?: boolean;
1050
+ data: import('../xyflow/types').RelationshipData;
1051
+ selected?: boolean;
1052
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1053
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1054
+ zIndex?: number;
1055
+ ariaLabel?: string;
1056
+ interactionWidth?: number;
1057
+ label?: string | import('react').ReactNode;
1058
+ labelStyle?: import('react').CSSProperties;
1059
+ labelShowBg?: boolean;
1060
+ labelBgStyle?: import('react').CSSProperties;
1061
+ labelBgPadding?: [number, number];
1062
+ labelBgBorderRadius?: number;
1063
+ style?: import('react').CSSProperties;
1064
+ className?: string;
1065
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
1066
+ focusable?: boolean;
1067
+ }>;
557
1068
  } | Partial<{
558
- readonly storeDevId: string;
559
1069
  view: DiagramView;
560
1070
  readonly: boolean;
561
1071
  showElementLinks: boolean;
@@ -566,13 +1076,57 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
566
1076
  nodesDraggable: boolean;
567
1077
  nodesSelectable: boolean;
568
1078
  experimentalEdgeEditing: boolean;
1079
+ enableFocusMode: boolean;
569
1080
  renderIcon: ElementIconRenderer | null;
570
- getContainer: () => HTMLDivElement | null;
571
- viewSyncDebounceTimeout: number | null;
1081
+ enableDynamicViewWalkthrough: boolean;
572
1082
  xyflow: XYFlowInstance;
573
1083
  xystore: XYStoreApi;
1084
+ getContainer: () => HTMLDivElement | null;
1085
+ onChange: import('../LikeC4Diagram.props').OnChange | null;
1086
+ onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null;
1087
+ onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null;
1088
+ onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null;
1089
+ onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null;
1090
+ onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null;
1091
+ onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null;
1092
+ onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
1093
+ onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null;
1094
+ onEditorCommand: import('../LikeC4Diagram.props').OnEditorCommand | null;
1095
+ readonly storeDevId: string;
1096
+ xynodes: XYFlowNode[];
1097
+ xyedges: {
1098
+ id: string;
1099
+ type: "relationship";
1100
+ source: string;
1101
+ target: string;
1102
+ sourceHandle?: string | null;
1103
+ targetHandle?: string | null;
1104
+ animated?: boolean;
1105
+ hidden?: boolean;
1106
+ deletable?: boolean;
1107
+ selectable?: boolean;
1108
+ data: import('../xyflow/types').RelationshipData;
1109
+ selected?: boolean;
1110
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1111
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1112
+ zIndex?: number;
1113
+ ariaLabel?: string;
1114
+ interactionWidth?: number;
1115
+ label?: string | import('react').ReactNode;
1116
+ labelStyle?: import('react').CSSProperties;
1117
+ labelShowBg?: boolean;
1118
+ labelBgStyle?: import('react').CSSProperties;
1119
+ labelBgPadding?: [number, number];
1120
+ labelBgBorderRadius?: number;
1121
+ style?: import('react').CSSProperties;
1122
+ className?: string;
1123
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
1124
+ focusable?: boolean;
1125
+ }[];
1126
+ viewSyncDebounceTimeout: number | null;
1127
+ viewportChanged: boolean;
574
1128
  initialized: boolean;
575
- xyflowSynced: boolean;
1129
+ isDynamicView: boolean;
576
1130
  activeDynamicViewStep: number | null;
577
1131
  lastClickedNodeId: string | null;
578
1132
  lastClickedEdgeId: string | null;
@@ -580,25 +1134,16 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
580
1134
  hoveredNodeId: string | null;
581
1135
  hoveredEdgeId: string | null;
582
1136
  dimmed: ReadonlySet<string>;
583
- previousViews: DiagramView[];
584
1137
  lastOnNavigate: null | {
585
1138
  fromView: ViewID;
586
1139
  toView: ViewID;
587
- element: DiagramNode;
588
- elementScreenPosition: XYPosition;
589
- positionCorrected: boolean;
1140
+ fromNode: NodeId;
590
1141
  };
591
- viewportChanged: boolean;
592
- onChange: import('../LikeC4Diagram.props').OnChange | null | undefined;
593
- onNavigateTo: import('../LikeC4Diagram.props').OnNavigateTo | null | undefined;
594
- onNodeClick: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
595
- onNodeContextMenu: import('../LikeC4Diagram.props').OnNodeClick | null | undefined;
596
- onCanvasContextMenu: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
597
- onEdgeClick: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
598
- onEdgeContextMenu: import('../LikeC4Diagram.props').OnEdgeClick | null | undefined;
599
- onCanvasClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
600
- onCanvasDblClick: import('../LikeC4Diagram.props').OnCanvasClick | null | undefined;
601
- isDynamicView: () => boolean;
1142
+ navigationHistory: Array<{
1143
+ viewId: ViewID;
1144
+ nodeId: NodeId | null;
1145
+ }>;
1146
+ navigationHistoryIndex: number;
602
1147
  updateView: (view: DiagramView) => void;
603
1148
  focusOnNode: (nodeId: string) => void;
604
1149
  setHoveredNode: (nodeId: string | null) => void;
@@ -608,12 +1153,47 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
608
1153
  resetLastClicked: () => void;
609
1154
  getElement: (id: Fqn) => DiagramNode | null;
610
1155
  triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void;
611
- cancelSaveManualLayout: () => void;
1156
+ cancelSaveManualLayout: () => boolean;
1157
+ scheduleSaveManualLayout: () => void;
612
1158
  triggerSaveManualLayout: () => void;
613
1159
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
614
1160
  fitDiagram: (duration?: number) => void;
1161
+ goBack: () => void;
1162
+ goForward: () => void;
615
1163
  nextDynamicStep: (increment?: number) => void;
1164
+ activateDynamicStep: (step: number) => void;
616
1165
  stopDynamicView: () => void;
1166
+ onInit: (xyflow: XYFlowInstance) => void;
1167
+ onNodesChange: OnNodesChange<XYFlowNode>;
1168
+ onEdgesChange: OnEdgesChange<{
1169
+ id: string;
1170
+ type: "relationship";
1171
+ source: string;
1172
+ target: string;
1173
+ sourceHandle?: string | null;
1174
+ targetHandle?: string | null;
1175
+ animated?: boolean;
1176
+ hidden?: boolean;
1177
+ deletable?: boolean;
1178
+ selectable?: boolean;
1179
+ data: import('../xyflow/types').RelationshipData;
1180
+ selected?: boolean;
1181
+ markerStart?: import('@xyflow/react').EdgeMarkerType;
1182
+ markerEnd?: import('@xyflow/react').EdgeMarkerType;
1183
+ zIndex?: number;
1184
+ ariaLabel?: string;
1185
+ interactionWidth?: number;
1186
+ label?: string | import('react').ReactNode;
1187
+ labelStyle?: import('react').CSSProperties;
1188
+ labelShowBg?: boolean;
1189
+ labelBgStyle?: import('react').CSSProperties;
1190
+ labelBgPadding?: [number, number];
1191
+ labelBgBorderRadius?: number;
1192
+ style?: import('react').CSSProperties;
1193
+ className?: string;
1194
+ reconnectable?: boolean | import('@xyflow/react').HandleType;
1195
+ focusable?: boolean;
1196
+ }>;
617
1197
  }>), replace?: boolean | undefined, action?: A | undefined): void;
618
1198
  }>;
619
1199
  export {};