@likec4/diagram 1.0.2 → 1.1.1

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