@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/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[];
@@ -39,10 +42,11 @@ declare function useDiagramStoreApi(): {
39
42
  setHoveredEdge: (edgeId: string | null) => void;
40
43
  setLastClickedNode: (nodeId: string | null) => void;
41
44
  setLastClickedEdge: (edgeId: string | null) => void;
45
+ resetLastClicked: () => void;
42
46
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
43
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
47
+ triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
44
48
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
45
- fitDiagram: () => void;
49
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
46
50
  };
47
51
  setState: <A extends string | {
48
52
  type: string;
@@ -52,12 +56,15 @@ declare function useDiagramStoreApi(): {
52
56
  showElementLinks: boolean;
53
57
  fitViewEnabled: boolean;
54
58
  fitViewPadding: number;
59
+ zoomable: boolean;
60
+ pannable: boolean;
55
61
  nodesDraggable: boolean;
56
62
  nodesSelectable: boolean;
57
63
  xyflow: import('..').XYFlowInstance;
58
64
  initialized: boolean;
59
65
  lastClickedNodeId: string | null;
60
66
  lastClickedEdgeId: string | null;
67
+ focusedNodeId: string | null;
61
68
  hoveredNodeId: string | null;
62
69
  hoveredEdgeId: string | null;
63
70
  previousViews: import('@likec4/core').DiagramView[];
@@ -83,22 +90,26 @@ declare function useDiagramStoreApi(): {
83
90
  setHoveredEdge: (edgeId: string | null) => void;
84
91
  setLastClickedNode: (nodeId: string | null) => void;
85
92
  setLastClickedEdge: (edgeId: string | null) => void;
93
+ resetLastClicked: () => void;
86
94
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
87
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
95
+ triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
88
96
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
89
- fitDiagram: () => void;
97
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
90
98
  } | Partial<{
91
99
  view: import('@likec4/core').DiagramView;
92
100
  readonly: boolean;
93
101
  showElementLinks: boolean;
94
102
  fitViewEnabled: boolean;
95
103
  fitViewPadding: number;
104
+ zoomable: boolean;
105
+ pannable: boolean;
96
106
  nodesDraggable: boolean;
97
107
  nodesSelectable: boolean;
98
108
  xyflow: import('..').XYFlowInstance;
99
109
  initialized: boolean;
100
110
  lastClickedNodeId: string | null;
101
111
  lastClickedEdgeId: string | null;
112
+ focusedNodeId: string | null;
102
113
  hoveredNodeId: string | null;
103
114
  hoveredEdgeId: string | null;
104
115
  previousViews: import('@likec4/core').DiagramView[];
@@ -124,22 +135,26 @@ declare function useDiagramStoreApi(): {
124
135
  setHoveredEdge: (edgeId: string | null) => void;
125
136
  setLastClickedNode: (nodeId: string | null) => void;
126
137
  setLastClickedEdge: (edgeId: string | null) => void;
138
+ resetLastClicked: () => void;
127
139
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
128
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
140
+ triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
129
141
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
130
- fitDiagram: () => void;
142
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
131
143
  }> | ((state: {
132
144
  view: import('@likec4/core').DiagramView;
133
145
  readonly: boolean;
134
146
  showElementLinks: boolean;
135
147
  fitViewEnabled: boolean;
136
148
  fitViewPadding: number;
149
+ zoomable: boolean;
150
+ pannable: boolean;
137
151
  nodesDraggable: boolean;
138
152
  nodesSelectable: boolean;
139
153
  xyflow: import('..').XYFlowInstance;
140
154
  initialized: boolean;
141
155
  lastClickedNodeId: string | null;
142
156
  lastClickedEdgeId: string | null;
157
+ focusedNodeId: string | null;
143
158
  hoveredNodeId: string | null;
144
159
  hoveredEdgeId: string | null;
145
160
  previousViews: import('@likec4/core').DiagramView[];
@@ -165,22 +180,26 @@ declare function useDiagramStoreApi(): {
165
180
  setHoveredEdge: (edgeId: string | null) => void;
166
181
  setLastClickedNode: (nodeId: string | null) => void;
167
182
  setLastClickedEdge: (edgeId: string | null) => void;
183
+ resetLastClicked: () => void;
168
184
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
169
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
185
+ triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
170
186
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
171
- fitDiagram: () => void;
187
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
172
188
  }) => {
173
189
  view: import('@likec4/core').DiagramView;
174
190
  readonly: boolean;
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: import('..').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: import('@likec4/core').DiagramView[];
@@ -206,22 +225,26 @@ declare function useDiagramStoreApi(): {
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: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
210
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
230
+ triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
211
231
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
212
- fitDiagram: () => void;
232
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
213
233
  } | Partial<{
214
234
  view: import('@likec4/core').DiagramView;
215
235
  readonly: boolean;
216
236
  showElementLinks: boolean;
217
237
  fitViewEnabled: boolean;
218
238
  fitViewPadding: number;
239
+ zoomable: boolean;
240
+ pannable: boolean;
219
241
  nodesDraggable: boolean;
220
242
  nodesSelectable: boolean;
221
243
  xyflow: import('..').XYFlowInstance;
222
244
  initialized: boolean;
223
245
  lastClickedNodeId: string | null;
224
246
  lastClickedEdgeId: string | null;
247
+ focusedNodeId: string | null;
225
248
  hoveredNodeId: string | null;
226
249
  hoveredEdgeId: string | null;
227
250
  previousViews: import('@likec4/core').DiagramView[];
@@ -247,10 +270,11 @@ declare function useDiagramStoreApi(): {
247
270
  setHoveredEdge: (edgeId: string | null) => void;
248
271
  setLastClickedNode: (nodeId: string | null) => void;
249
272
  setLastClickedEdge: (edgeId: string | null) => void;
273
+ resetLastClicked: () => void;
250
274
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
251
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
275
+ triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
252
276
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
253
- fitDiagram: () => void;
277
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
254
278
  }>), replace?: boolean | undefined, action?: A | undefined) => void;
255
279
  subscribe: {
256
280
  (listener: (selectedState: {
@@ -259,12 +283,15 @@ declare function useDiagramStoreApi(): {
259
283
  showElementLinks: boolean;
260
284
  fitViewEnabled: boolean;
261
285
  fitViewPadding: number;
286
+ zoomable: boolean;
287
+ pannable: boolean;
262
288
  nodesDraggable: boolean;
263
289
  nodesSelectable: boolean;
264
290
  xyflow: import('..').XYFlowInstance;
265
291
  initialized: boolean;
266
292
  lastClickedNodeId: string | null;
267
293
  lastClickedEdgeId: string | null;
294
+ focusedNodeId: string | null;
268
295
  hoveredNodeId: string | null;
269
296
  hoveredEdgeId: string | null;
270
297
  previousViews: import('@likec4/core').DiagramView[];
@@ -290,22 +317,26 @@ declare function useDiagramStoreApi(): {
290
317
  setHoveredEdge: (edgeId: string | null) => void;
291
318
  setLastClickedNode: (nodeId: string | null) => void;
292
319
  setLastClickedEdge: (edgeId: string | null) => void;
320
+ resetLastClicked: () => void;
293
321
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
294
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
322
+ triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
295
323
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
296
- fitDiagram: () => void;
324
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
297
325
  }, previousSelectedState: {
298
326
  view: import('@likec4/core').DiagramView;
299
327
  readonly: boolean;
300
328
  showElementLinks: boolean;
301
329
  fitViewEnabled: boolean;
302
330
  fitViewPadding: number;
331
+ zoomable: boolean;
332
+ pannable: boolean;
303
333
  nodesDraggable: boolean;
304
334
  nodesSelectable: boolean;
305
335
  xyflow: import('..').XYFlowInstance;
306
336
  initialized: boolean;
307
337
  lastClickedNodeId: string | null;
308
338
  lastClickedEdgeId: string | null;
339
+ focusedNodeId: string | null;
309
340
  hoveredNodeId: string | null;
310
341
  hoveredEdgeId: string | null;
311
342
  previousViews: import('@likec4/core').DiagramView[];
@@ -331,10 +362,11 @@ declare function useDiagramStoreApi(): {
331
362
  setHoveredEdge: (edgeId: string | null) => void;
332
363
  setLastClickedNode: (nodeId: string | null) => void;
333
364
  setLastClickedEdge: (edgeId: string | null) => void;
365
+ resetLastClicked: () => void;
334
366
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
335
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
367
+ triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
336
368
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
337
- fitDiagram: () => void;
369
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
338
370
  }) => void): () => void;
339
371
  <U>(selector: (state: {
340
372
  view: import('@likec4/core').DiagramView;
@@ -342,12 +374,15 @@ declare function useDiagramStoreApi(): {
342
374
  showElementLinks: boolean;
343
375
  fitViewEnabled: boolean;
344
376
  fitViewPadding: number;
377
+ zoomable: boolean;
378
+ pannable: boolean;
345
379
  nodesDraggable: boolean;
346
380
  nodesSelectable: boolean;
347
381
  xyflow: import('..').XYFlowInstance;
348
382
  initialized: boolean;
349
383
  lastClickedNodeId: string | null;
350
384
  lastClickedEdgeId: string | null;
385
+ focusedNodeId: string | null;
351
386
  hoveredNodeId: string | null;
352
387
  hoveredEdgeId: string | null;
353
388
  previousViews: import('@likec4/core').DiagramView[];
@@ -373,10 +408,11 @@ declare function useDiagramStoreApi(): {
373
408
  setHoveredEdge: (edgeId: string | null) => void;
374
409
  setLastClickedNode: (nodeId: string | null) => void;
375
410
  setLastClickedEdge: (edgeId: string | null) => void;
411
+ resetLastClicked: () => void;
376
412
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
377
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Change>) => void;
413
+ triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
378
414
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
379
- fitDiagram: () => void;
415
+ fitDiagram: (centerNode?: import('..').XYFlowNode | undefined) => void;
380
416
  }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
381
417
  equalityFn?: (a: U, b: U) => boolean;
382
418
  fireImmediately?: boolean;