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