@likec4/diagram 1.7.1 → 1.7.3

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 (69) hide show
  1. package/dist/LikeC4Diagram.d.ts +1 -1
  2. package/dist/LikeC4Diagram.props.d.ts +38 -22
  3. package/dist/StaticLikeC4Diagram.d.ts +1 -1
  4. package/dist/globals.css.d.ts +0 -1
  5. package/dist/hooks/index.d.ts +2 -0
  6. package/dist/{state/useDiagramStore.d.ts → hooks/useDiagramState.d.ts} +2 -3
  7. package/dist/{xyflow/hooks → hooks}/useXYFlow.d.ts +10 -10
  8. package/dist/index.d.ts +3 -2
  9. package/dist/index.mjs +755 -401
  10. package/dist/state/DiagramContext.d.ts +74 -30
  11. package/dist/state/diagram-to-xyflow.d.ts +2 -0
  12. package/dist/state/diagramStore.d.ts +71 -22
  13. package/dist/style.css +655 -35
  14. package/dist/ui/top-left/ChangeAutoLayoutButton.d.ts +3 -0
  15. package/dist/ui/top-left/TopLeftPanel.d.ts +4 -0
  16. package/dist/ui/top-left/_shared.d.ts +5 -0
  17. package/dist/ui/top-left/styles.css.d.ts +3 -0
  18. package/dist/xyflow/XYFlowInner.d.ts +0 -1
  19. package/dist/xyflow/edges/edges.css.d.ts +1 -1
  20. package/dist/xyflow/{hooks/useLayoutConstraints.d.ts → useLayoutConstraints.d.ts} +1 -1
  21. package/dist/xyflow/utils.d.ts +11 -1
  22. package/package.json +6 -6
  23. package/src/LikeC4Diagram.props.ts +66 -32
  24. package/src/LikeC4Diagram.tsx +19 -12
  25. package/src/StaticLikeC4Diagram.tsx +2 -0
  26. package/src/globals.css.ts +0 -2
  27. package/src/hooks/index.ts +2 -0
  28. package/src/{state/useDiagramStore.ts → hooks/useDiagramState.ts} +3 -4
  29. package/src/{xyflow/hooks → hooks}/useXYFlow.ts +1 -1
  30. package/src/index.ts +4 -2
  31. package/src/state/DiagramContext.tsx +15 -7
  32. package/src/state/diagram-to-xyflow.ts +17 -3
  33. package/src/state/diagramStore.ts +73 -38
  34. package/src/ui/DiagramTitlePanel.tsx +1 -1
  35. package/src/ui/DynamicViewWalkthrough.tsx +1 -2
  36. package/src/ui/OptionsPanel.tsx +1 -1
  37. package/src/ui/options/EdgeOptions.tsx +1 -16
  38. package/src/ui/options/NodeOptions.tsx +38 -13
  39. package/src/ui/top-left/ChangeAutoLayoutButton.tsx +131 -0
  40. package/src/ui/top-left/TopLeftPanel.tsx +213 -0
  41. package/src/ui/top-left/_shared.ts +19 -0
  42. package/src/ui/top-left/styles.css.ts +38 -0
  43. package/src/xyflow/FitviewOnDiagramChange.tsx +2 -2
  44. package/src/xyflow/SelectEdgesOnNodeFocus.tsx +87 -59
  45. package/src/xyflow/XYFlow.tsx +7 -8
  46. package/src/xyflow/XYFlowEvents.tsx +39 -19
  47. package/src/xyflow/XYFlowInner.tsx +5 -7
  48. package/src/xyflow/edges/RelationshipEdge.tsx +60 -27
  49. package/src/xyflow/edges/edges.css.ts +29 -25
  50. package/src/xyflow/nodes/compound/CompoundNode.tsx +1 -1
  51. package/src/xyflow/nodes/element/ElementLink.tsx +1 -2
  52. package/src/xyflow/nodes/element/ElementNode.tsx +7 -5
  53. package/src/xyflow/nodes/shared/NavigateToBtn.tsx +1 -1
  54. package/src/xyflow/{hooks/useLayoutConstraints.ts → useLayoutConstraints.ts} +3 -3
  55. package/src/xyflow/utils.ts +25 -1
  56. package/dist/state/hooks.d.ts +0 -4
  57. package/dist/state/index.d.ts +0 -2
  58. package/dist/state/useNavigationHistory.d.ts +0 -5
  59. package/dist/types.d.ts +0 -20
  60. package/dist/ui/BackwardForwardPanel.css.d.ts +0 -1
  61. package/dist/ui/BackwardForwardPanel.d.ts +0 -1
  62. package/dist/xyflow/hooks/index.d.ts +0 -2
  63. package/src/state/hooks.ts +0 -5
  64. package/src/state/index.ts +0 -2
  65. package/src/state/useNavigationHistory.ts +0 -39
  66. package/src/types.ts +0 -22
  67. package/src/ui/BackwardForwardPanel.css.ts +0 -22
  68. package/src/ui/BackwardForwardPanel.tsx +0 -76
  69. package/src/xyflow/hooks/index.ts +0 -3
package/dist/state/DiagramContext.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { PropsWithChildren } from 'react';
2
- import { createDiagramStore, DiagramInitialState } from './diagramStore';
2
+ import { DiagramInitialState } from './diagramStore';
3
3
 
4
- export type DiagramZustandStore = ReturnType<typeof createDiagramStore>;
5
4
  export declare const DiagramContext: import('react').Context<import('zustand/traditional').UseBoundStoreWithEqualityFn<Omit<Omit<import('zustand/vanilla').StoreApi<{
6
5
  view: import('@likec4/core').DiagramView;
7
6
  readonly: boolean;
8
7
  showElementLinks: boolean;
8
+ showNavigationButtons: boolean;
9
9
  fitViewEnabled: boolean;
10
10
  fitViewPadding: number;
11
11
  zoomable: boolean;
@@ -15,9 +15,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
15
15
  experimentalEdgeEditing: boolean;
16
16
  enableFocusMode: boolean;
17
17
  renderIcon: import('..').ElementIconRenderer | null;
18
+ whereFilter: import('..').WhereOperator<string, string> | null;
18
19
  enableDynamicViewWalkthrough: boolean;
19
20
  xyflow: import('..').XYFlowInstance;
20
- xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
21
+ xystore: import('../hooks/useXYFlow').XYStoreApi;
21
22
  getContainer: () => HTMLDivElement | null;
22
23
  onChange: import('..').OnChange | null;
23
24
  onNavigateTo: import('..').OnNavigateTo | null;
@@ -28,7 +29,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
28
29
  onEdgeContextMenu: import('..').OnEdgeClick | null;
29
30
  onCanvasClick: import('..').OnCanvasClick | null;
30
31
  onCanvasDblClick: import('..').OnCanvasClick | null;
31
- onEditorCommand: import('..').OnEditorCommand | null;
32
+ onBurgerMenuClick: (() => void) | null;
33
+ onOpenSourceView: (() => void) | null;
34
+ onOpenSourceElement: ((fqn: import('@likec4/core').Fqn) => void) | null;
35
+ onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
32
36
  readonly storeDevId: string;
33
37
  xynodes: import('..').XYFlowNode[];
34
38
  xyedges: import('..').XYFlowEdge[];
@@ -61,7 +65,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
61
65
  setLastClickedEdge: (edgeId: string | null) => void;
62
66
  resetLastClicked: () => void;
63
67
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
64
- triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
68
+ triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
65
69
  cancelSaveManualLayout: () => boolean;
66
70
  scheduleSaveManualLayout: () => void;
67
71
  triggerSaveManualLayout: () => void;
@@ -81,6 +85,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
81
85
  view: import('@likec4/core').DiagramView;
82
86
  readonly: boolean;
83
87
  showElementLinks: boolean;
88
+ showNavigationButtons: boolean;
84
89
  fitViewEnabled: boolean;
85
90
  fitViewPadding: number;
86
91
  zoomable: boolean;
@@ -90,9 +95,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
90
95
  experimentalEdgeEditing: boolean;
91
96
  enableFocusMode: boolean;
92
97
  renderIcon: import('..').ElementIconRenderer | null;
98
+ whereFilter: import('..').WhereOperator<string, string> | null;
93
99
  enableDynamicViewWalkthrough: boolean;
94
100
  xyflow: import('..').XYFlowInstance;
95
- xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
101
+ xystore: import('../hooks/useXYFlow').XYStoreApi;
96
102
  getContainer: () => HTMLDivElement | null;
97
103
  onChange: import('..').OnChange | null;
98
104
  onNavigateTo: import('..').OnNavigateTo | null;
@@ -103,7 +109,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
103
109
  onEdgeContextMenu: import('..').OnEdgeClick | null;
104
110
  onCanvasClick: import('..').OnCanvasClick | null;
105
111
  onCanvasDblClick: import('..').OnCanvasClick | null;
106
- onEditorCommand: import('..').OnEditorCommand | null;
112
+ onBurgerMenuClick: (() => void) | null;
113
+ onOpenSourceView: (() => void) | null;
114
+ onOpenSourceElement: ((fqn: import('@likec4/core').Fqn) => void) | null;
115
+ onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
107
116
  readonly storeDevId: string;
108
117
  xynodes: import('..').XYFlowNode[];
109
118
  xyedges: {
@@ -164,7 +173,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
164
173
  setLastClickedEdge: (edgeId: string | null) => void;
165
174
  resetLastClicked: () => void;
166
175
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
167
- triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
176
+ triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
168
177
  cancelSaveManualLayout: () => boolean;
169
178
  scheduleSaveManualLayout: () => void;
170
179
  triggerSaveManualLayout: () => void;
@@ -210,6 +219,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
210
219
  view: import('@likec4/core').DiagramView;
211
220
  readonly: boolean;
212
221
  showElementLinks: boolean;
222
+ showNavigationButtons: boolean;
213
223
  fitViewEnabled: boolean;
214
224
  fitViewPadding: number;
215
225
  zoomable: boolean;
@@ -219,9 +229,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
219
229
  experimentalEdgeEditing: boolean;
220
230
  enableFocusMode: boolean;
221
231
  renderIcon: import('..').ElementIconRenderer | null;
232
+ whereFilter: import('..').WhereOperator<string, string> | null;
222
233
  enableDynamicViewWalkthrough: boolean;
223
234
  xyflow: import('..').XYFlowInstance;
224
- xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
235
+ xystore: import('../hooks/useXYFlow').XYStoreApi;
225
236
  getContainer: () => HTMLDivElement | null;
226
237
  onChange: import('..').OnChange | null;
227
238
  onNavigateTo: import('..').OnNavigateTo | null;
@@ -232,7 +243,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
232
243
  onEdgeContextMenu: import('..').OnEdgeClick | null;
233
244
  onCanvasClick: import('..').OnCanvasClick | null;
234
245
  onCanvasDblClick: import('..').OnCanvasClick | null;
235
- onEditorCommand: import('..').OnEditorCommand | null;
246
+ onBurgerMenuClick: (() => void) | null;
247
+ onOpenSourceView: (() => void) | null;
248
+ onOpenSourceElement: ((fqn: import('@likec4/core').Fqn) => void) | null;
249
+ onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
236
250
  readonly storeDevId: string;
237
251
  xynodes: import('..').XYFlowNode[];
238
252
  xyedges: {
@@ -293,7 +307,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
293
307
  setLastClickedEdge: (edgeId: string | null) => void;
294
308
  resetLastClicked: () => void;
295
309
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
296
- triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
310
+ triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
297
311
  cancelSaveManualLayout: () => boolean;
298
312
  scheduleSaveManualLayout: () => void;
299
313
  triggerSaveManualLayout: () => void;
@@ -340,6 +354,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
340
354
  view: import('@likec4/core').DiagramView;
341
355
  readonly: boolean;
342
356
  showElementLinks: boolean;
357
+ showNavigationButtons: boolean;
343
358
  fitViewEnabled: boolean;
344
359
  fitViewPadding: number;
345
360
  zoomable: boolean;
@@ -349,9 +364,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
349
364
  experimentalEdgeEditing: boolean;
350
365
  enableFocusMode: boolean;
351
366
  renderIcon: import('..').ElementIconRenderer | null;
367
+ whereFilter: import('..').WhereOperator<string, string> | null;
352
368
  enableDynamicViewWalkthrough: boolean;
353
369
  xyflow: import('..').XYFlowInstance;
354
- xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
370
+ xystore: import('../hooks/useXYFlow').XYStoreApi;
355
371
  getContainer: () => HTMLDivElement | null;
356
372
  onChange: import('..').OnChange | null;
357
373
  onNavigateTo: import('..').OnNavigateTo | null;
@@ -362,7 +378,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
362
378
  onEdgeContextMenu: import('..').OnEdgeClick | null;
363
379
  onCanvasClick: import('..').OnCanvasClick | null;
364
380
  onCanvasDblClick: import('..').OnCanvasClick | null;
365
- onEditorCommand: import('..').OnEditorCommand | null;
381
+ onBurgerMenuClick: (() => void) | null;
382
+ onOpenSourceView: (() => void) | null;
383
+ onOpenSourceElement: ((fqn: import('@likec4/core').Fqn) => void) | null;
384
+ onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
366
385
  readonly storeDevId: string;
367
386
  xynodes: import('..').XYFlowNode[];
368
387
  xyedges: {
@@ -423,7 +442,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
423
442
  setLastClickedEdge: (edgeId: string | null) => void;
424
443
  resetLastClicked: () => void;
425
444
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
426
- triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
445
+ triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
427
446
  cancelSaveManualLayout: () => boolean;
428
447
  scheduleSaveManualLayout: () => void;
429
448
  triggerSaveManualLayout: () => void;
@@ -477,6 +496,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
477
496
  view: import('@likec4/core').DiagramView;
478
497
  readonly: boolean;
479
498
  showElementLinks: boolean;
499
+ showNavigationButtons: boolean;
480
500
  fitViewEnabled: boolean;
481
501
  fitViewPadding: number;
482
502
  zoomable: boolean;
@@ -486,9 +506,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
486
506
  experimentalEdgeEditing: boolean;
487
507
  enableFocusMode: boolean;
488
508
  renderIcon: import('..').ElementIconRenderer | null;
509
+ whereFilter: import('..').WhereOperator<string, string> | null;
489
510
  enableDynamicViewWalkthrough: boolean;
490
511
  xyflow: import('..').XYFlowInstance;
491
- xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
512
+ xystore: import('../hooks/useXYFlow').XYStoreApi;
492
513
  getContainer: () => HTMLDivElement | null;
493
514
  onChange: import('..').OnChange | null;
494
515
  onNavigateTo: import('..').OnNavigateTo | null;
@@ -499,7 +520,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
499
520
  onEdgeContextMenu: import('..').OnEdgeClick | null;
500
521
  onCanvasClick: import('..').OnCanvasClick | null;
501
522
  onCanvasDblClick: import('..').OnCanvasClick | null;
502
- onEditorCommand: import('..').OnEditorCommand | null;
523
+ onBurgerMenuClick: (() => void) | null;
524
+ onOpenSourceView: (() => void) | null;
525
+ onOpenSourceElement: ((fqn: import('@likec4/core').Fqn) => void) | null;
526
+ onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
503
527
  readonly storeDevId: string;
504
528
  xynodes: import('..').XYFlowNode[];
505
529
  xyedges: {
@@ -560,7 +584,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
560
584
  setLastClickedEdge: (edgeId: string | null) => void;
561
585
  resetLastClicked: () => void;
562
586
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
563
- triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
587
+ triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
564
588
  cancelSaveManualLayout: () => boolean;
565
589
  scheduleSaveManualLayout: () => void;
566
590
  triggerSaveManualLayout: () => void;
@@ -606,6 +630,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
606
630
  view: import('@likec4/core').DiagramView;
607
631
  readonly: boolean;
608
632
  showElementLinks: boolean;
633
+ showNavigationButtons: boolean;
609
634
  fitViewEnabled: boolean;
610
635
  fitViewPadding: number;
611
636
  zoomable: boolean;
@@ -615,9 +640,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
615
640
  experimentalEdgeEditing: boolean;
616
641
  enableFocusMode: boolean;
617
642
  renderIcon: import('..').ElementIconRenderer | null;
643
+ whereFilter: import('..').WhereOperator<string, string> | null;
618
644
  enableDynamicViewWalkthrough: boolean;
619
645
  xyflow: import('..').XYFlowInstance;
620
- xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
646
+ xystore: import('../hooks/useXYFlow').XYStoreApi;
621
647
  getContainer: () => HTMLDivElement | null;
622
648
  onChange: import('..').OnChange | null;
623
649
  onNavigateTo: import('..').OnNavigateTo | null;
@@ -628,7 +654,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
628
654
  onEdgeContextMenu: import('..').OnEdgeClick | null;
629
655
  onCanvasClick: import('..').OnCanvasClick | null;
630
656
  onCanvasDblClick: import('..').OnCanvasClick | null;
631
- onEditorCommand: import('..').OnEditorCommand | null;
657
+ onBurgerMenuClick: (() => void) | null;
658
+ onOpenSourceView: (() => void) | null;
659
+ onOpenSourceElement: ((fqn: import('@likec4/core').Fqn) => void) | null;
660
+ onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
632
661
  readonly storeDevId: string;
633
662
  xynodes: import('..').XYFlowNode[];
634
663
  xyedges: {
@@ -689,7 +718,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
689
718
  setLastClickedEdge: (edgeId: string | null) => void;
690
719
  resetLastClicked: () => void;
691
720
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
692
- triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
721
+ triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
693
722
  cancelSaveManualLayout: () => boolean;
694
723
  scheduleSaveManualLayout: () => void;
695
724
  triggerSaveManualLayout: () => void;
@@ -735,6 +764,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
735
764
  view: import('@likec4/core').DiagramView;
736
765
  readonly: boolean;
737
766
  showElementLinks: boolean;
767
+ showNavigationButtons: boolean;
738
768
  fitViewEnabled: boolean;
739
769
  fitViewPadding: number;
740
770
  zoomable: boolean;
@@ -744,9 +774,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
744
774
  experimentalEdgeEditing: boolean;
745
775
  enableFocusMode: boolean;
746
776
  renderIcon: import('..').ElementIconRenderer | null;
777
+ whereFilter: import('..').WhereOperator<string, string> | null;
747
778
  enableDynamicViewWalkthrough: boolean;
748
779
  xyflow: import('..').XYFlowInstance;
749
- xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
780
+ xystore: import('../hooks/useXYFlow').XYStoreApi;
750
781
  getContainer: () => HTMLDivElement | null;
751
782
  onChange: import('..').OnChange | null;
752
783
  onNavigateTo: import('..').OnNavigateTo | null;
@@ -757,7 +788,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
757
788
  onEdgeContextMenu: import('..').OnEdgeClick | null;
758
789
  onCanvasClick: import('..').OnCanvasClick | null;
759
790
  onCanvasDblClick: import('..').OnCanvasClick | null;
760
- onEditorCommand: import('..').OnEditorCommand | null;
791
+ onBurgerMenuClick: (() => void) | null;
792
+ onOpenSourceView: (() => void) | null;
793
+ onOpenSourceElement: ((fqn: import('@likec4/core').Fqn) => void) | null;
794
+ onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
761
795
  readonly storeDevId: string;
762
796
  xynodes: import('..').XYFlowNode[];
763
797
  xyedges: {
@@ -818,7 +852,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
818
852
  setLastClickedEdge: (edgeId: string | null) => void;
819
853
  resetLastClicked: () => void;
820
854
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
821
- triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
855
+ triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
822
856
  cancelSaveManualLayout: () => boolean;
823
857
  scheduleSaveManualLayout: () => void;
824
858
  triggerSaveManualLayout: () => void;
@@ -864,6 +898,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
864
898
  view: import('@likec4/core').DiagramView;
865
899
  readonly: boolean;
866
900
  showElementLinks: boolean;
901
+ showNavigationButtons: boolean;
867
902
  fitViewEnabled: boolean;
868
903
  fitViewPadding: number;
869
904
  zoomable: boolean;
@@ -873,9 +908,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
873
908
  experimentalEdgeEditing: boolean;
874
909
  enableFocusMode: boolean;
875
910
  renderIcon: import('..').ElementIconRenderer | null;
911
+ whereFilter: import('..').WhereOperator<string, string> | null;
876
912
  enableDynamicViewWalkthrough: boolean;
877
913
  xyflow: import('..').XYFlowInstance;
878
- xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
914
+ xystore: import('../hooks/useXYFlow').XYStoreApi;
879
915
  getContainer: () => HTMLDivElement | null;
880
916
  onChange: import('..').OnChange | null;
881
917
  onNavigateTo: import('..').OnNavigateTo | null;
@@ -886,7 +922,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
886
922
  onEdgeContextMenu: import('..').OnEdgeClick | null;
887
923
  onCanvasClick: import('..').OnCanvasClick | null;
888
924
  onCanvasDblClick: import('..').OnCanvasClick | null;
889
- onEditorCommand: import('..').OnEditorCommand | null;
925
+ onBurgerMenuClick: (() => void) | null;
926
+ onOpenSourceView: (() => void) | null;
927
+ onOpenSourceElement: ((fqn: import('@likec4/core').Fqn) => void) | null;
928
+ onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
890
929
  readonly storeDevId: string;
891
930
  xynodes: import('..').XYFlowNode[];
892
931
  xyedges: {
@@ -947,7 +986,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
947
986
  setLastClickedEdge: (edgeId: string | null) => void;
948
987
  resetLastClicked: () => void;
949
988
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
950
- triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
989
+ triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
951
990
  cancelSaveManualLayout: () => boolean;
952
991
  scheduleSaveManualLayout: () => void;
953
992
  triggerSaveManualLayout: () => void;
@@ -993,6 +1032,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
993
1032
  view: import('@likec4/core').DiagramView;
994
1033
  readonly: boolean;
995
1034
  showElementLinks: boolean;
1035
+ showNavigationButtons: boolean;
996
1036
  fitViewEnabled: boolean;
997
1037
  fitViewPadding: number;
998
1038
  zoomable: boolean;
@@ -1002,9 +1042,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1002
1042
  experimentalEdgeEditing: boolean;
1003
1043
  enableFocusMode: boolean;
1004
1044
  renderIcon: import('..').ElementIconRenderer | null;
1045
+ whereFilter: import('..').WhereOperator<string, string> | null;
1005
1046
  enableDynamicViewWalkthrough: boolean;
1006
1047
  xyflow: import('..').XYFlowInstance;
1007
- xystore: import('../xyflow/hooks/useXYFlow').XYStoreApi;
1048
+ xystore: import('../hooks/useXYFlow').XYStoreApi;
1008
1049
  getContainer: () => HTMLDivElement | null;
1009
1050
  onChange: import('..').OnChange | null;
1010
1051
  onNavigateTo: import('..').OnNavigateTo | null;
@@ -1015,7 +1056,10 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1015
1056
  onEdgeContextMenu: import('..').OnEdgeClick | null;
1016
1057
  onCanvasClick: import('..').OnCanvasClick | null;
1017
1058
  onCanvasDblClick: import('..').OnCanvasClick | null;
1018
- onEditorCommand: import('..').OnEditorCommand | null;
1059
+ onBurgerMenuClick: (() => void) | null;
1060
+ onOpenSourceView: (() => void) | null;
1061
+ onOpenSourceElement: ((fqn: import('@likec4/core').Fqn) => void) | null;
1062
+ onOpenSourceRelation: ((id: import('@likec4/core').RelationID) => void) | null;
1019
1063
  readonly storeDevId: string;
1020
1064
  xynodes: import('..').XYFlowNode[];
1021
1065
  xyedges: {
@@ -1076,7 +1120,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
1076
1120
  setLastClickedEdge: (edgeId: string | null) => void;
1077
1121
  resetLastClicked: () => void;
1078
1122
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
1079
- triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
1123
+ triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
1080
1124
  cancelSaveManualLayout: () => boolean;
1081
1125
  scheduleSaveManualLayout: () => void;
1082
1126
  triggerSaveManualLayout: () => void;
@@ -1124,4 +1168,4 @@ export type DiagramContextProviderProps = PropsWithChildren<Omit<DiagramInitialS
1124
1168
  className: string;
1125
1169
  keepAspectRatio: boolean;
1126
1170
  }>;
1127
- export declare function DiagramContextProvider({ children, view, className, keepAspectRatio, ...props }: DiagramContextProviderProps): import("react/jsx-runtime").JSX.Element;
1171
+ export declare function DiagramContextProvider({ children, view, className, keepAspectRatio, whereFilter, ...props }: DiagramContextProviderProps): import("react/jsx-runtime").JSX.Element;
package/dist/state/diagram-to-xyflow.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  import { DiagramView } from '@likec4/core/types';
2
+ import { WhereOperator } from '../LikeC4Diagram.props';
2
3
  import { XYFlowEdge, XYFlowNode } from '../xyflow/types';
3
4
 
4
5
  export declare function diagramViewToXYFlowData(view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__'>, opts: {
6
+ where: WhereOperator<string, string> | null;
5
7
  draggable: boolean;
6
8
  selectable: boolean;
7
9
  }): {