@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/useDiagramStore.d.ts CHANGED
@@ -8,12 +8,15 @@ declare function useDiagramStoreApi(): {
8
8
  showElementLinks: boolean;
9
9
  fitViewEnabled: boolean;
10
10
  fitViewPadding: number;
11
+ zoomable: boolean;
12
+ pannable: boolean;
11
13
  nodesDraggable: boolean;
12
14
  nodesSelectable: boolean;
13
15
  xyflow: import('..').XYFlowInstance;
14
16
  initialized: boolean;
15
17
  lastClickedNodeId: string | null;
16
18
  lastClickedEdgeId: string | null;
19
+ focusedNodeId: string | null;
17
20
  hoveredNodeId: string | null;
18
21
  hoveredEdgeId: string | null;
19
22
  previousViews: import('@likec4/core').DiagramView[];
@@ -42,7 +45,7 @@ declare function useDiagramStoreApi(): {
42
45
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
43
46
  triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
44
47
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
45
- fitDiagram: () => void;
48
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
46
49
  };
47
50
  setState: <A extends string | {
48
51
  type: string;
@@ -52,12 +55,15 @@ declare function useDiagramStoreApi(): {
52
55
  showElementLinks: boolean;
53
56
  fitViewEnabled: boolean;
54
57
  fitViewPadding: number;
58
+ zoomable: boolean;
59
+ pannable: boolean;
55
60
  nodesDraggable: boolean;
56
61
  nodesSelectable: boolean;
57
62
  xyflow: import('..').XYFlowInstance;
58
63
  initialized: boolean;
59
64
  lastClickedNodeId: string | null;
60
65
  lastClickedEdgeId: string | null;
66
+ focusedNodeId: string | null;
61
67
  hoveredNodeId: string | null;
62
68
  hoveredEdgeId: string | null;
63
69
  previousViews: import('@likec4/core').DiagramView[];
@@ -86,19 +92,22 @@ declare function useDiagramStoreApi(): {
86
92
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
87
93
  triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
88
94
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
89
- fitDiagram: () => void;
95
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
90
96
  } | Partial<{
91
97
  view: import('@likec4/core').DiagramView;
92
98
  readonly: boolean;
93
99
  showElementLinks: boolean;
94
100
  fitViewEnabled: boolean;
95
101
  fitViewPadding: number;
102
+ zoomable: boolean;
103
+ pannable: boolean;
96
104
  nodesDraggable: boolean;
97
105
  nodesSelectable: boolean;
98
106
  xyflow: import('..').XYFlowInstance;
99
107
  initialized: boolean;
100
108
  lastClickedNodeId: string | null;
101
109
  lastClickedEdgeId: string | null;
110
+ focusedNodeId: string | null;
102
111
  hoveredNodeId: string | null;
103
112
  hoveredEdgeId: string | null;
104
113
  previousViews: import('@likec4/core').DiagramView[];
@@ -127,19 +136,22 @@ declare function useDiagramStoreApi(): {
127
136
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
128
137
  triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
129
138
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
130
- fitDiagram: () => void;
139
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
131
140
  }> | ((state: {
132
141
  view: import('@likec4/core').DiagramView;
133
142
  readonly: boolean;
134
143
  showElementLinks: boolean;
135
144
  fitViewEnabled: boolean;
136
145
  fitViewPadding: number;
146
+ zoomable: boolean;
147
+ pannable: boolean;
137
148
  nodesDraggable: boolean;
138
149
  nodesSelectable: boolean;
139
150
  xyflow: import('..').XYFlowInstance;
140
151
  initialized: boolean;
141
152
  lastClickedNodeId: string | null;
142
153
  lastClickedEdgeId: string | null;
154
+ focusedNodeId: string | null;
143
155
  hoveredNodeId: string | null;
144
156
  hoveredEdgeId: string | null;
145
157
  previousViews: import('@likec4/core').DiagramView[];
@@ -168,19 +180,22 @@ declare function useDiagramStoreApi(): {
168
180
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
169
181
  triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
170
182
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
171
- fitDiagram: () => void;
183
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
172
184
  }) => {
173
185
  view: import('@likec4/core').DiagramView;
174
186
  readonly: boolean;
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: import('..').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: import('@likec4/core').DiagramView[];
@@ -209,19 +224,22 @@ declare function useDiagramStoreApi(): {
209
224
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
210
225
  triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
211
226
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
212
- fitDiagram: () => void;
227
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
213
228
  } | Partial<{
214
229
  view: import('@likec4/core').DiagramView;
215
230
  readonly: boolean;
216
231
  showElementLinks: boolean;
217
232
  fitViewEnabled: boolean;
218
233
  fitViewPadding: number;
234
+ zoomable: boolean;
235
+ pannable: boolean;
219
236
  nodesDraggable: boolean;
220
237
  nodesSelectable: boolean;
221
238
  xyflow: import('..').XYFlowInstance;
222
239
  initialized: boolean;
223
240
  lastClickedNodeId: string | null;
224
241
  lastClickedEdgeId: string | null;
242
+ focusedNodeId: string | null;
225
243
  hoveredNodeId: string | null;
226
244
  hoveredEdgeId: string | null;
227
245
  previousViews: import('@likec4/core').DiagramView[];
@@ -250,7 +268,7 @@ declare function useDiagramStoreApi(): {
250
268
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
251
269
  triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
252
270
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
253
- fitDiagram: () => void;
271
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
254
272
  }>), replace?: boolean | undefined, action?: A | undefined) => void;
255
273
  subscribe: {
256
274
  (listener: (selectedState: {
@@ -259,12 +277,15 @@ declare function useDiagramStoreApi(): {
259
277
  showElementLinks: boolean;
260
278
  fitViewEnabled: boolean;
261
279
  fitViewPadding: number;
280
+ zoomable: boolean;
281
+ pannable: boolean;
262
282
  nodesDraggable: boolean;
263
283
  nodesSelectable: boolean;
264
284
  xyflow: import('..').XYFlowInstance;
265
285
  initialized: boolean;
266
286
  lastClickedNodeId: string | null;
267
287
  lastClickedEdgeId: string | null;
288
+ focusedNodeId: string | null;
268
289
  hoveredNodeId: string | null;
269
290
  hoveredEdgeId: string | null;
270
291
  previousViews: import('@likec4/core').DiagramView[];
@@ -293,19 +314,22 @@ declare function useDiagramStoreApi(): {
293
314
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
294
315
  triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
295
316
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
296
- fitDiagram: () => void;
317
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
297
318
  }, previousSelectedState: {
298
319
  view: import('@likec4/core').DiagramView;
299
320
  readonly: boolean;
300
321
  showElementLinks: boolean;
301
322
  fitViewEnabled: boolean;
302
323
  fitViewPadding: number;
324
+ zoomable: boolean;
325
+ pannable: boolean;
303
326
  nodesDraggable: boolean;
304
327
  nodesSelectable: boolean;
305
328
  xyflow: import('..').XYFlowInstance;
306
329
  initialized: boolean;
307
330
  lastClickedNodeId: string | null;
308
331
  lastClickedEdgeId: string | null;
332
+ focusedNodeId: string | null;
309
333
  hoveredNodeId: string | null;
310
334
  hoveredEdgeId: string | null;
311
335
  previousViews: import('@likec4/core').DiagramView[];
@@ -334,7 +358,7 @@ declare function useDiagramStoreApi(): {
334
358
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
335
359
  triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
336
360
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
337
- fitDiagram: () => void;
361
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
338
362
  }) => void): () => void;
339
363
  <U>(selector: (state: {
340
364
  view: import('@likec4/core').DiagramView;
@@ -342,12 +366,15 @@ declare function useDiagramStoreApi(): {
342
366
  showElementLinks: boolean;
343
367
  fitViewEnabled: boolean;
344
368
  fitViewPadding: number;
369
+ zoomable: boolean;
370
+ pannable: boolean;
345
371
  nodesDraggable: boolean;
346
372
  nodesSelectable: boolean;
347
373
  xyflow: import('..').XYFlowInstance;
348
374
  initialized: boolean;
349
375
  lastClickedNodeId: string | null;
350
376
  lastClickedEdgeId: string | null;
377
+ focusedNodeId: string | null;
351
378
  hoveredNodeId: string | null;
352
379
  hoveredEdgeId: string | null;
353
380
  previousViews: import('@likec4/core').DiagramView[];
@@ -376,7 +403,7 @@ declare function useDiagramStoreApi(): {
376
403
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
377
404
  triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
378
405
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
379
- fitDiagram: () => void;
406
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
380
407
  }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
381
408
  equalityFn?: (a: U, b: U) => boolean;
382
409
  fireImmediately?: boolean;