@likec4/diagram 1.0.2 → 1.1.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 (33) hide show
  1. package/dist/KeepAspectRatioContainer.d.ts +9 -0
  2. package/dist/LikeC4Diagram.css.d.ts +1 -0
  3. package/dist/index.mjs +248 -683
  4. package/dist/state/DiagramContext.d.ts +36 -9
  5. package/dist/state/diagramStore.d.ts +42 -12
  6. package/dist/state/useDiagramStore.d.ts +36 -9
  7. package/dist/style.css +600 -53
  8. package/dist/ui/index.d.ts +0 -1
  9. package/dist/xyflow/{XYFlowWrapper.d.ts → XYFlow.d.ts} +2 -2
  10. package/dist/xyflow/XYFlowEvents.d.ts +127 -13
  11. package/dist/xyflow/edges/RelationshipEdge.d.ts +2 -2
  12. package/dist/xyflow/hooks/useXYFlow.d.ts +20 -20
  13. package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts +7 -5
  14. package/dist/xyflow/types.d.ts +2 -2
  15. package/package.json +3 -3
  16. package/src/{ui/KeepAspectRatio.tsx → KeepAspectRatioContainer.tsx} +7 -6
  17. package/src/LikeC4Diagram.css.ts +6 -0
  18. package/src/LikeC4Diagram.tsx +6 -6
  19. package/src/globals.css.ts +42 -37
  20. package/src/state/diagramStore.ts +26 -7
  21. package/src/ui/index.ts +0 -1
  22. package/src/xyflow/FitviewOnDiagramChange.tsx +24 -18
  23. package/src/xyflow/SyncWithDiagram.tsx +23 -20
  24. package/src/xyflow/{XYFlowWrapper.tsx → XYFlow.tsx} +17 -24
  25. package/src/xyflow/XYFlowEvents.tsx +96 -43
  26. package/src/xyflow/diagram-to-xyflow.ts +4 -4
  27. package/src/xyflow/nodes/compound/CompoundNode.css.ts +85 -39
  28. package/src/xyflow/nodes/compound/CompoundNode.tsx +29 -31
  29. package/src/xyflow/nodes/element/ElementNode.tsx +2 -2
  30. package/src/xyflow/nodes/shared/NavigateToBtn.tsx +2 -1
  31. package/dist/ui/KeepAspectRatio.css.d.ts +0 -1
  32. package/dist/ui/KeepAspectRatio.d.ts +0 -9
  33. package/src/ui/KeepAspectRatio.css.ts +0 -7
package/dist/state/DiagramContext.d.ts CHANGED
@@ -7,12 +7,15 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
7
7
  showElementLinks: boolean;
8
8
  fitViewEnabled: boolean;
9
9
  fitViewPadding: number;
10
+ zoomable: boolean;
11
+ pannable: boolean;
10
12
  nodesDraggable: boolean;
11
13
  nodesSelectable: boolean;
12
14
  xyflow: import("..").XYFlowInstance;
13
15
  initialized: boolean;
14
16
  lastClickedNodeId: string | null;
15
17
  lastClickedEdgeId: string | null;
18
+ focusedNodeId: string | null;
16
19
  hoveredNodeId: string | null;
17
20
  hoveredEdgeId: string | null;
18
21
  previousViews: import("@likec4/core").DiagramView[];
@@ -41,7 +44,7 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
41
44
  getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
42
45
  triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
43
46
  triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
44
- fitDiagram: () => void;
47
+ fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
45
48
  }>, "subscribe"> & {
46
49
  subscribe: {
47
50
  (listener: (selectedState: {
@@ -50,12 +53,15 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
50
53
  showElementLinks: boolean;
51
54
  fitViewEnabled: boolean;
52
55
  fitViewPadding: number;
56
+ zoomable: boolean;
57
+ pannable: boolean;
53
58
  nodesDraggable: boolean;
54
59
  nodesSelectable: boolean;
55
60
  xyflow: import("..").XYFlowInstance;
56
61
  initialized: boolean;
57
62
  lastClickedNodeId: string | null;
58
63
  lastClickedEdgeId: string | null;
64
+ focusedNodeId: string | null;
59
65
  hoveredNodeId: string | null;
60
66
  hoveredEdgeId: string | null;
61
67
  previousViews: import("@likec4/core").DiagramView[];
@@ -84,19 +90,22 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
84
90
  getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
85
91
  triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
86
92
  triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
87
- fitDiagram: () => void;
93
+ fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
88
94
  }, previousSelectedState: {
89
95
  view: import("@likec4/core").DiagramView;
90
96
  readonly: boolean;
91
97
  showElementLinks: boolean;
92
98
  fitViewEnabled: boolean;
93
99
  fitViewPadding: number;
100
+ zoomable: boolean;
101
+ pannable: boolean;
94
102
  nodesDraggable: boolean;
95
103
  nodesSelectable: boolean;
96
104
  xyflow: import("..").XYFlowInstance;
97
105
  initialized: boolean;
98
106
  lastClickedNodeId: string | null;
99
107
  lastClickedEdgeId: string | null;
108
+ focusedNodeId: string | null;
100
109
  hoveredNodeId: string | null;
101
110
  hoveredEdgeId: string | null;
102
111
  previousViews: import("@likec4/core").DiagramView[];
@@ -125,7 +134,7 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
125
134
  getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
126
135
  triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
127
136
  triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
128
- fitDiagram: () => void;
137
+ fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
129
138
  }) => void): () => void;
130
139
  <U>(selector: (state: {
131
140
  view: import("@likec4/core").DiagramView;
@@ -133,12 +142,15 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
133
142
  showElementLinks: boolean;
134
143
  fitViewEnabled: boolean;
135
144
  fitViewPadding: number;
145
+ zoomable: boolean;
146
+ pannable: boolean;
136
147
  nodesDraggable: boolean;
137
148
  nodesSelectable: boolean;
138
149
  xyflow: import("..").XYFlowInstance;
139
150
  initialized: boolean;
140
151
  lastClickedNodeId: string | null;
141
152
  lastClickedEdgeId: string | null;
153
+ focusedNodeId: string | null;
142
154
  hoveredNodeId: string | null;
143
155
  hoveredEdgeId: string | null;
144
156
  previousViews: import("@likec4/core").DiagramView[];
@@ -167,7 +179,7 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
167
179
  getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
168
180
  triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
169
181
  triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
170
- fitDiagram: () => void;
182
+ fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
171
183
  }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
172
184
  equalityFn?: (a: U, b: U) => boolean;
173
185
  fireImmediately?: boolean;
@@ -182,12 +194,15 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
182
194
  showElementLinks: boolean;
183
195
  fitViewEnabled: boolean;
184
196
  fitViewPadding: number;
197
+ zoomable: boolean;
198
+ pannable: boolean;
185
199
  nodesDraggable: boolean;
186
200
  nodesSelectable: boolean;
187
201
  xyflow: import("..").XYFlowInstance;
188
202
  initialized: boolean;
189
203
  lastClickedNodeId: string | null;
190
204
  lastClickedEdgeId: string | null;
205
+ focusedNodeId: string | null;
191
206
  hoveredNodeId: string | null;
192
207
  hoveredEdgeId: string | null;
193
208
  previousViews: import("@likec4/core").DiagramView[];
@@ -216,19 +231,22 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
216
231
  getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
217
232
  triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
218
233
  triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
219
- fitDiagram: () => void;
234
+ fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
220
235
  } | Partial<{
221
236
  view: import("@likec4/core").DiagramView;
222
237
  readonly: boolean;
223
238
  showElementLinks: boolean;
224
239
  fitViewEnabled: boolean;
225
240
  fitViewPadding: number;
241
+ zoomable: boolean;
242
+ pannable: boolean;
226
243
  nodesDraggable: boolean;
227
244
  nodesSelectable: boolean;
228
245
  xyflow: import("..").XYFlowInstance;
229
246
  initialized: boolean;
230
247
  lastClickedNodeId: string | null;
231
248
  lastClickedEdgeId: string | null;
249
+ focusedNodeId: string | null;
232
250
  hoveredNodeId: string | null;
233
251
  hoveredEdgeId: string | null;
234
252
  previousViews: import("@likec4/core").DiagramView[];
@@ -257,19 +275,22 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
257
275
  getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
258
276
  triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
259
277
  triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
260
- fitDiagram: () => void;
278
+ fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
261
279
  }> | ((state: {
262
280
  view: import("@likec4/core").DiagramView;
263
281
  readonly: boolean;
264
282
  showElementLinks: boolean;
265
283
  fitViewEnabled: boolean;
266
284
  fitViewPadding: number;
285
+ zoomable: boolean;
286
+ pannable: boolean;
267
287
  nodesDraggable: boolean;
268
288
  nodesSelectable: boolean;
269
289
  xyflow: import("..").XYFlowInstance;
270
290
  initialized: boolean;
271
291
  lastClickedNodeId: string | null;
272
292
  lastClickedEdgeId: string | null;
293
+ focusedNodeId: string | null;
273
294
  hoveredNodeId: string | null;
274
295
  hoveredEdgeId: string | null;
275
296
  previousViews: import("@likec4/core").DiagramView[];
@@ -298,19 +319,22 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
298
319
  getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
299
320
  triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
300
321
  triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
301
- fitDiagram: () => void;
322
+ fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
302
323
  }) => {
303
324
  view: import("@likec4/core").DiagramView;
304
325
  readonly: boolean;
305
326
  showElementLinks: boolean;
306
327
  fitViewEnabled: boolean;
307
328
  fitViewPadding: number;
329
+ zoomable: boolean;
330
+ pannable: boolean;
308
331
  nodesDraggable: boolean;
309
332
  nodesSelectable: boolean;
310
333
  xyflow: import("..").XYFlowInstance;
311
334
  initialized: boolean;
312
335
  lastClickedNodeId: string | null;
313
336
  lastClickedEdgeId: string | null;
337
+ focusedNodeId: string | null;
314
338
  hoveredNodeId: string | null;
315
339
  hoveredEdgeId: string | null;
316
340
  previousViews: import("@likec4/core").DiagramView[];
@@ -339,19 +363,22 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
339
363
  getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
340
364
  triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
341
365
  triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
342
- fitDiagram: () => void;
366
+ fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
343
367
  } | Partial<{
344
368
  view: import("@likec4/core").DiagramView;
345
369
  readonly: boolean;
346
370
  showElementLinks: boolean;
347
371
  fitViewEnabled: boolean;
348
372
  fitViewPadding: number;
373
+ zoomable: boolean;
374
+ pannable: boolean;
349
375
  nodesDraggable: boolean;
350
376
  nodesSelectable: boolean;
351
377
  xyflow: import("..").XYFlowInstance;
352
378
  initialized: boolean;
353
379
  lastClickedNodeId: string | null;
354
380
  lastClickedEdgeId: string | null;
381
+ focusedNodeId: string | null;
355
382
  hoveredNodeId: string | null;
356
383
  hoveredEdgeId: string | null;
357
384
  previousViews: import("@likec4/core").DiagramView[];
@@ -380,7 +407,7 @@ export declare const DiagramContext: import('react').Context<import("zustand/tra
380
407
  getElement: (id: import("@likec4/core").Fqn) => import("@likec4/core").DiagramNode | null;
381
408
  triggerOnChange: (changes: import("@likec4/core").NonEmptyArray<import("..").Change>) => void;
382
409
  triggerOnNavigateTo: (xynodeId: string, event: import("react").MouseEvent<Element, MouseEvent>) => void;
383
- fitDiagram: () => void;
410
+ fitDiagram: (centerNode?: import("..").XYFlowNode | undefined) => void;
384
411
  }>), replace?: boolean | undefined, action?: A | undefined): void;
385
412
  }> | null>;
386
413
  export declare function DiagramContextProvider({ children, view, ...props }: PropsWithChildren<DiagramInitialState>): JSX.Element;
package/dist/state/diagramStore.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { XYFlowInstance } from '../xyflow/types';
1
+ import { XYFlowInstance, XYFlowNode } from '../xyflow/types';
2
2
  import { Change, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
3
3
  import { Exact, Simplify } from 'type-fest';
4
4
  import { MouseEvent as ReactMouseEvent } from 'react';
@@ -11,12 +11,15 @@ export type DiagramStore = {
11
11
  showElementLinks: boolean;
12
12
  fitViewEnabled: boolean;
13
13
  fitViewPadding: number;
14
+ zoomable: boolean;
15
+ pannable: boolean;
14
16
  nodesDraggable: boolean;
15
17
  nodesSelectable: boolean;
16
18
  xyflow: XYFlowInstance;
17
19
  initialized: boolean;
18
20
  lastClickedNodeId: string | null;
19
21
  lastClickedEdgeId: string | null;
22
+ focusedNodeId: string | null;
20
23
  hoveredNodeId: string | null;
21
24
  hoveredEdgeId: string | null;
22
25
  previousViews: DiagramView[];
@@ -29,7 +32,7 @@ export type DiagramStore = {
29
32
  };
30
33
  viewportChanged: boolean;
31
34
  } & Required<LikeC4DiagramEventHandlers>;
32
- export type DiagramInitialState = Pick<DiagramStore, 'view' | 'readonly' | 'showElementLinks' | 'fitViewEnabled' | 'fitViewPadding' | 'nodesDraggable' | 'nodesSelectable'> & LikeC4DiagramEventHandlers;
35
+ export type DiagramInitialState = Pick<DiagramStore, 'view' | 'readonly' | 'showElementLinks' | 'fitViewEnabled' | 'fitViewPadding' | 'zoomable' | 'pannable' | 'nodesDraggable' | 'nodesSelectable'> & LikeC4DiagramEventHandlers;
33
36
  interface DiagramStoreActions {
34
37
  updateView: (view: DiagramView) => void;
35
38
  setHoveredNode: (nodeId: string | null) => void;
@@ -39,7 +42,7 @@ interface DiagramStoreActions {
39
42
  getElement(id: Fqn): DiagramNode | null;
40
43
  triggerOnChange: (changes: NonEmptyArray<Change>) => void;
41
44
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void;
42
- fitDiagram: () => void;
45
+ fitDiagram: (centerNode?: XYFlowNode) => void;
43
46
  }
44
47
  export type DiagramState = Simplify<DiagramStore & DiagramStoreActions>;
45
48
  type CreateDiagramStore = DiagramInitialState & Pick<DiagramStore, 'xyflow'>;
@@ -49,12 +52,15 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
49
52
  showElementLinks: boolean;
50
53
  fitViewEnabled: boolean;
51
54
  fitViewPadding: number;
55
+ zoomable: boolean;
56
+ pannable: boolean;
52
57
  nodesDraggable: boolean;
53
58
  nodesSelectable: boolean;
54
59
  xyflow: XYFlowInstance;
55
60
  initialized: boolean;
56
61
  lastClickedNodeId: string | null;
57
62
  lastClickedEdgeId: string | null;
63
+ focusedNodeId: string | null;
58
64
  hoveredNodeId: string | null;
59
65
  hoveredEdgeId: string | null;
60
66
  previousViews: DiagramView[];
@@ -83,7 +89,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
83
89
  getElement: (id: Fqn) => DiagramNode | null;
84
90
  triggerOnChange: (changes: NonEmptyArray<Change>) => void;
85
91
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
86
- fitDiagram: () => void;
92
+ fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
87
93
  }>, "subscribe"> & {
88
94
  subscribe: {
89
95
  (listener: (selectedState: {
@@ -92,12 +98,15 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
92
98
  showElementLinks: boolean;
93
99
  fitViewEnabled: boolean;
94
100
  fitViewPadding: number;
101
+ zoomable: boolean;
102
+ pannable: boolean;
95
103
  nodesDraggable: boolean;
96
104
  nodesSelectable: boolean;
97
105
  xyflow: XYFlowInstance;
98
106
  initialized: boolean;
99
107
  lastClickedNodeId: string | null;
100
108
  lastClickedEdgeId: string | null;
109
+ focusedNodeId: string | null;
101
110
  hoveredNodeId: string | null;
102
111
  hoveredEdgeId: string | null;
103
112
  previousViews: DiagramView[];
@@ -126,19 +135,22 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
126
135
  getElement: (id: Fqn) => DiagramNode | null;
127
136
  triggerOnChange: (changes: NonEmptyArray<Change>) => void;
128
137
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
129
- fitDiagram: () => void;
138
+ fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
130
139
  }, previousSelectedState: {
131
140
  view: DiagramView;
132
141
  readonly: boolean;
133
142
  showElementLinks: boolean;
134
143
  fitViewEnabled: boolean;
135
144
  fitViewPadding: number;
145
+ zoomable: boolean;
146
+ pannable: boolean;
136
147
  nodesDraggable: boolean;
137
148
  nodesSelectable: boolean;
138
149
  xyflow: XYFlowInstance;
139
150
  initialized: boolean;
140
151
  lastClickedNodeId: string | null;
141
152
  lastClickedEdgeId: string | null;
153
+ focusedNodeId: string | null;
142
154
  hoveredNodeId: string | null;
143
155
  hoveredEdgeId: string | null;
144
156
  previousViews: DiagramView[];
@@ -167,7 +179,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
167
179
  getElement: (id: Fqn) => DiagramNode | null;
168
180
  triggerOnChange: (changes: NonEmptyArray<Change>) => void;
169
181
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
170
- fitDiagram: () => void;
182
+ fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
171
183
  }) => void): () => void;
172
184
  <U>(selector: (state: {
173
185
  view: DiagramView;
@@ -175,12 +187,15 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
175
187
  showElementLinks: boolean;
176
188
  fitViewEnabled: boolean;
177
189
  fitViewPadding: number;
190
+ zoomable: boolean;
191
+ pannable: boolean;
178
192
  nodesDraggable: boolean;
179
193
  nodesSelectable: boolean;
180
194
  xyflow: XYFlowInstance;
181
195
  initialized: boolean;
182
196
  lastClickedNodeId: string | null;
183
197
  lastClickedEdgeId: string | null;
198
+ focusedNodeId: string | null;
184
199
  hoveredNodeId: string | null;
185
200
  hoveredEdgeId: string | null;
186
201
  previousViews: DiagramView[];
@@ -209,7 +224,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
209
224
  getElement: (id: Fqn) => DiagramNode | null;
210
225
  triggerOnChange: (changes: NonEmptyArray<Change>) => void;
211
226
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
212
- fitDiagram: () => void;
227
+ fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
213
228
  }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
214
229
  equalityFn?: (a: U, b: U) => boolean;
215
230
  fireImmediately?: boolean;
@@ -224,12 +239,15 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
224
239
  showElementLinks: boolean;
225
240
  fitViewEnabled: boolean;
226
241
  fitViewPadding: number;
242
+ zoomable: boolean;
243
+ pannable: boolean;
227
244
  nodesDraggable: boolean;
228
245
  nodesSelectable: boolean;
229
246
  xyflow: XYFlowInstance;
230
247
  initialized: boolean;
231
248
  lastClickedNodeId: string | null;
232
249
  lastClickedEdgeId: string | null;
250
+ focusedNodeId: string | null;
233
251
  hoveredNodeId: string | null;
234
252
  hoveredEdgeId: string | null;
235
253
  previousViews: DiagramView[];
@@ -258,19 +276,22 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
258
276
  getElement: (id: Fqn) => DiagramNode | null;
259
277
  triggerOnChange: (changes: NonEmptyArray<Change>) => void;
260
278
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
261
- fitDiagram: () => void;
279
+ fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
262
280
  } | Partial<{
263
281
  view: DiagramView;
264
282
  readonly: boolean;
265
283
  showElementLinks: boolean;
266
284
  fitViewEnabled: boolean;
267
285
  fitViewPadding: number;
286
+ zoomable: boolean;
287
+ pannable: boolean;
268
288
  nodesDraggable: boolean;
269
289
  nodesSelectable: boolean;
270
290
  xyflow: XYFlowInstance;
271
291
  initialized: boolean;
272
292
  lastClickedNodeId: string | null;
273
293
  lastClickedEdgeId: string | null;
294
+ focusedNodeId: string | null;
274
295
  hoveredNodeId: string | null;
275
296
  hoveredEdgeId: string | null;
276
297
  previousViews: DiagramView[];
@@ -299,19 +320,22 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
299
320
  getElement: (id: Fqn) => DiagramNode | null;
300
321
  triggerOnChange: (changes: NonEmptyArray<Change>) => void;
301
322
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
302
- fitDiagram: () => void;
323
+ fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
303
324
  }> | ((state: {
304
325
  view: DiagramView;
305
326
  readonly: boolean;
306
327
  showElementLinks: boolean;
307
328
  fitViewEnabled: boolean;
308
329
  fitViewPadding: number;
330
+ zoomable: boolean;
331
+ pannable: boolean;
309
332
  nodesDraggable: boolean;
310
333
  nodesSelectable: boolean;
311
334
  xyflow: XYFlowInstance;
312
335
  initialized: boolean;
313
336
  lastClickedNodeId: string | null;
314
337
  lastClickedEdgeId: string | null;
338
+ focusedNodeId: string | null;
315
339
  hoveredNodeId: string | null;
316
340
  hoveredEdgeId: string | null;
317
341
  previousViews: DiagramView[];
@@ -340,19 +364,22 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
340
364
  getElement: (id: Fqn) => DiagramNode | null;
341
365
  triggerOnChange: (changes: NonEmptyArray<Change>) => void;
342
366
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
343
- fitDiagram: () => void;
367
+ fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
344
368
  }) => {
345
369
  view: DiagramView;
346
370
  readonly: boolean;
347
371
  showElementLinks: boolean;
348
372
  fitViewEnabled: boolean;
349
373
  fitViewPadding: number;
374
+ zoomable: boolean;
375
+ pannable: boolean;
350
376
  nodesDraggable: boolean;
351
377
  nodesSelectable: boolean;
352
378
  xyflow: XYFlowInstance;
353
379
  initialized: boolean;
354
380
  lastClickedNodeId: string | null;
355
381
  lastClickedEdgeId: string | null;
382
+ focusedNodeId: string | null;
356
383
  hoveredNodeId: string | null;
357
384
  hoveredEdgeId: string | null;
358
385
  previousViews: DiagramView[];
@@ -381,19 +408,22 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
381
408
  getElement: (id: Fqn) => DiagramNode | null;
382
409
  triggerOnChange: (changes: NonEmptyArray<Change>) => void;
383
410
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
384
- fitDiagram: () => void;
411
+ fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
385
412
  } | Partial<{
386
413
  view: DiagramView;
387
414
  readonly: boolean;
388
415
  showElementLinks: boolean;
389
416
  fitViewEnabled: boolean;
390
417
  fitViewPadding: number;
418
+ zoomable: boolean;
419
+ pannable: boolean;
391
420
  nodesDraggable: boolean;
392
421
  nodesSelectable: boolean;
393
422
  xyflow: XYFlowInstance;
394
423
  initialized: boolean;
395
424
  lastClickedNodeId: string | null;
396
425
  lastClickedEdgeId: string | null;
426
+ focusedNodeId: string | null;
397
427
  hoveredNodeId: string | null;
398
428
  hoveredEdgeId: string | null;
399
429
  previousViews: DiagramView[];
@@ -422,7 +452,7 @@ export declare function createDiagramStore<T extends Exact<CreateDiagramStore, T
422
452
  getElement: (id: Fqn) => DiagramNode | null;
423
453
  triggerOnChange: (changes: NonEmptyArray<Change>) => void;
424
454
  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent<Element, MouseEvent>) => void;
425
- fitDiagram: () => void;
455
+ fitDiagram: (centerNode?: XYFlowNode | undefined) => void;
426
456
  }>), replace?: boolean | undefined, action?: A | undefined): void;
427
457
  }>;
428
458
  export {};