@likec4/diagram 1.7.4 → 1.8.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.
- package/dist/LikeC4Diagram.d.ts +1 -1
- package/dist/LikeC4Diagram.props.d.ts +5 -0
- package/dist/index.mjs +289 -45
- package/dist/mantine.css.d.ts +2 -0
- package/dist/state/DiagramContext.d.ts +18 -0
- package/dist/state/diagramStore.d.ts +23 -3
- package/dist/style.css +154 -81
- package/dist/ui/notation/NotationPanel.css.d.ts +6 -0
- package/dist/ui/notation/NotationPanel.d.ts +1 -0
- package/dist/ui/notation/index.d.ts +1 -0
- package/package.json +11 -11
- package/src/LikeC4Diagram.props.ts +6 -0
- package/src/LikeC4Diagram.tsx +2 -0
- package/src/StaticLikeC4Diagram.tsx +1 -0
- package/src/globals.css.ts +9 -29
- package/src/mantine.css.ts +3 -0
- package/src/state/diagram-to-xyflow.ts +8 -13
- package/src/state/diagramStore.ts +31 -4
- package/src/ui/DiagramTitlePanel.css.ts +8 -6
- package/src/ui/DiagramTitlePanel.tsx +11 -12
- package/src/ui/notation/NotationPanel.css.ts +103 -0
- package/src/ui/notation/NotationPanel.tsx +253 -0
- package/src/ui/notation/index.ts +1 -0
- package/src/ui/top-left/TopLeftPanel.tsx +3 -4
- package/src/xyflow/XYFlowBackground.tsx +1 -1
- package/src/xyflow/XYFlowInner.tsx +4 -1
- package/src/xyflow/edges/edges.css.ts +1 -1
- package/src/xyflow/nodes/element/ElementLink.tsx +4 -4
- package/src/xyflow/nodes/element/element.css.ts +2 -2
- package/src/xyflow/nodes/shared/NavigateToBtn.tsx +1 -0
|
@@ -6,6 +6,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
|
|
|
6
6
|
readonly: boolean;
|
|
7
7
|
showElementLinks: boolean;
|
|
8
8
|
showNavigationButtons: boolean;
|
|
9
|
+
showNotations: boolean;
|
|
9
10
|
fitViewEnabled: boolean;
|
|
10
11
|
fitViewPadding: number;
|
|
11
12
|
zoomable: boolean;
|
|
@@ -79,6 +80,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
|
|
|
79
80
|
onInit: (xyflow: import('..').XYFlowInstance) => void;
|
|
80
81
|
onNodesChange: import('@xyflow/react').OnNodesChange<import('..').XYFlowNode>;
|
|
81
82
|
onEdgesChange: import('@xyflow/react').OnEdgesChange<import('..').XYFlowEdge>;
|
|
83
|
+
highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
|
|
82
84
|
}>, "subscribe"> & {
|
|
83
85
|
subscribe: {
|
|
84
86
|
(listener: (selectedState: {
|
|
@@ -86,6 +88,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
|
|
|
86
88
|
readonly: boolean;
|
|
87
89
|
showElementLinks: boolean;
|
|
88
90
|
showNavigationButtons: boolean;
|
|
91
|
+
showNotations: boolean;
|
|
89
92
|
fitViewEnabled: boolean;
|
|
90
93
|
fitViewPadding: number;
|
|
91
94
|
zoomable: boolean;
|
|
@@ -215,11 +218,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
|
|
|
215
218
|
reconnectable?: boolean | import('@xyflow/system').HandleType;
|
|
216
219
|
focusable?: boolean;
|
|
217
220
|
}>;
|
|
221
|
+
highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
|
|
218
222
|
}, previousSelectedState: {
|
|
219
223
|
view: import('@likec4/core').DiagramView;
|
|
220
224
|
readonly: boolean;
|
|
221
225
|
showElementLinks: boolean;
|
|
222
226
|
showNavigationButtons: boolean;
|
|
227
|
+
showNotations: boolean;
|
|
223
228
|
fitViewEnabled: boolean;
|
|
224
229
|
fitViewPadding: number;
|
|
225
230
|
zoomable: boolean;
|
|
@@ -349,12 +354,14 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
|
|
|
349
354
|
reconnectable?: boolean | import('@xyflow/system').HandleType;
|
|
350
355
|
focusable?: boolean;
|
|
351
356
|
}>;
|
|
357
|
+
highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
|
|
352
358
|
}) => void): () => void;
|
|
353
359
|
<U>(selector: (state: {
|
|
354
360
|
view: import('@likec4/core').DiagramView;
|
|
355
361
|
readonly: boolean;
|
|
356
362
|
showElementLinks: boolean;
|
|
357
363
|
showNavigationButtons: boolean;
|
|
364
|
+
showNotations: boolean;
|
|
358
365
|
fitViewEnabled: boolean;
|
|
359
366
|
fitViewPadding: number;
|
|
360
367
|
zoomable: boolean;
|
|
@@ -484,6 +491,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
|
|
|
484
491
|
reconnectable?: boolean | import('@xyflow/system').HandleType;
|
|
485
492
|
focusable?: boolean;
|
|
486
493
|
}>;
|
|
494
|
+
highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
|
|
487
495
|
}) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
|
|
488
496
|
equalityFn?: (a: U, b: U) => boolean;
|
|
489
497
|
fireImmediately?: boolean;
|
|
@@ -497,6 +505,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
|
|
|
497
505
|
readonly: boolean;
|
|
498
506
|
showElementLinks: boolean;
|
|
499
507
|
showNavigationButtons: boolean;
|
|
508
|
+
showNotations: boolean;
|
|
500
509
|
fitViewEnabled: boolean;
|
|
501
510
|
fitViewPadding: number;
|
|
502
511
|
zoomable: boolean;
|
|
@@ -626,11 +635,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
|
|
|
626
635
|
reconnectable?: boolean | import('@xyflow/system').HandleType;
|
|
627
636
|
focusable?: boolean;
|
|
628
637
|
}>;
|
|
638
|
+
highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
|
|
629
639
|
} | Partial<{
|
|
630
640
|
view: import('@likec4/core').DiagramView;
|
|
631
641
|
readonly: boolean;
|
|
632
642
|
showElementLinks: boolean;
|
|
633
643
|
showNavigationButtons: boolean;
|
|
644
|
+
showNotations: boolean;
|
|
634
645
|
fitViewEnabled: boolean;
|
|
635
646
|
fitViewPadding: number;
|
|
636
647
|
zoomable: boolean;
|
|
@@ -760,11 +771,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
|
|
|
760
771
|
reconnectable?: boolean | import('@xyflow/system').HandleType;
|
|
761
772
|
focusable?: boolean;
|
|
762
773
|
}>;
|
|
774
|
+
highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
|
|
763
775
|
}> | ((state: {
|
|
764
776
|
view: import('@likec4/core').DiagramView;
|
|
765
777
|
readonly: boolean;
|
|
766
778
|
showElementLinks: boolean;
|
|
767
779
|
showNavigationButtons: boolean;
|
|
780
|
+
showNotations: boolean;
|
|
768
781
|
fitViewEnabled: boolean;
|
|
769
782
|
fitViewPadding: number;
|
|
770
783
|
zoomable: boolean;
|
|
@@ -894,11 +907,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
|
|
|
894
907
|
reconnectable?: boolean | import('@xyflow/system').HandleType;
|
|
895
908
|
focusable?: boolean;
|
|
896
909
|
}>;
|
|
910
|
+
highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
|
|
897
911
|
}) => {
|
|
898
912
|
view: import('@likec4/core').DiagramView;
|
|
899
913
|
readonly: boolean;
|
|
900
914
|
showElementLinks: boolean;
|
|
901
915
|
showNavigationButtons: boolean;
|
|
916
|
+
showNotations: boolean;
|
|
902
917
|
fitViewEnabled: boolean;
|
|
903
918
|
fitViewPadding: number;
|
|
904
919
|
zoomable: boolean;
|
|
@@ -1028,11 +1043,13 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
|
|
|
1028
1043
|
reconnectable?: boolean | import('@xyflow/system').HandleType;
|
|
1029
1044
|
focusable?: boolean;
|
|
1030
1045
|
}>;
|
|
1046
|
+
highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
|
|
1031
1047
|
} | Partial<{
|
|
1032
1048
|
view: import('@likec4/core').DiagramView;
|
|
1033
1049
|
readonly: boolean;
|
|
1034
1050
|
showElementLinks: boolean;
|
|
1035
1051
|
showNavigationButtons: boolean;
|
|
1052
|
+
showNotations: boolean;
|
|
1036
1053
|
fitViewEnabled: boolean;
|
|
1037
1054
|
fitViewPadding: number;
|
|
1038
1055
|
zoomable: boolean;
|
|
@@ -1162,6 +1179,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
|
|
|
1162
1179
|
reconnectable?: boolean | import('@xyflow/system').HandleType;
|
|
1163
1180
|
focusable?: boolean;
|
|
1164
1181
|
}>;
|
|
1182
|
+
highlightByElementNotation: (notation: import('@likec4/core').ElementNotation, onlyOfKind?: import('@likec4/core').ElementKind) => void;
|
|
1165
1183
|
}>), replace?: boolean | undefined, action?: A | undefined): void;
|
|
1166
1184
|
}> | null>;
|
|
1167
1185
|
export type DiagramContextProviderProps = PropsWithChildren<Omit<DiagramInitialState, 'xystore' | 'xyflow' | 'getContainer'> & {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { DiagramNode, DiagramView, Fqn, NodeId, ViewChange, ViewID } from '@likec4/core';
|
|
1
|
+
import { DiagramNode, DiagramView, ElementKind, ElementNotation, Fqn, NodeId, ViewChange, ViewID } from '@likec4/core';
|
|
2
2
|
import { OnEdgesChange, OnNodesChange } from '@xyflow/react';
|
|
3
3
|
import { MouseEvent as ReactMouseEvent } from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { Simplify } from 'type-fest';
|
|
5
5
|
import { XYStoreApi } from '../hooks/useXYFlow';
|
|
6
6
|
import { ElementIconRenderer, LikeC4DiagramEventHandlers, WhereOperator } from '../LikeC4Diagram.props';
|
|
7
7
|
import { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types';
|
|
@@ -14,6 +14,7 @@ export type DiagramInitialState = {
|
|
|
14
14
|
readonly: boolean;
|
|
15
15
|
showElementLinks: boolean;
|
|
16
16
|
showNavigationButtons: boolean;
|
|
17
|
+
showNotations: boolean;
|
|
17
18
|
fitViewEnabled: boolean;
|
|
18
19
|
fitViewPadding: number;
|
|
19
20
|
zoomable: boolean;
|
|
@@ -79,12 +80,14 @@ export type DiagramState = Simplify<DiagramInitialState & {
|
|
|
79
80
|
onInit: (xyflow: XYFlowInstance) => void;
|
|
80
81
|
onNodesChange: OnNodesChange<XYFlowNode>;
|
|
81
82
|
onEdgesChange: OnEdgesChange<XYFlowEdge>;
|
|
83
|
+
highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
|
|
82
84
|
}>;
|
|
83
|
-
export declare function createDiagramStore
|
|
85
|
+
export declare function createDiagramStore(props: DiagramInitialState): import('zustand/traditional').UseBoundStoreWithEqualityFn<Omit<Omit<import('zustand/vanilla').StoreApi<{
|
|
84
86
|
view: DiagramView;
|
|
85
87
|
readonly: boolean;
|
|
86
88
|
showElementLinks: boolean;
|
|
87
89
|
showNavigationButtons: boolean;
|
|
90
|
+
showNotations: boolean;
|
|
88
91
|
fitViewEnabled: boolean;
|
|
89
92
|
fitViewPadding: number;
|
|
90
93
|
zoomable: boolean;
|
|
@@ -158,6 +161,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
|
|
|
158
161
|
onInit: (xyflow: XYFlowInstance) => void;
|
|
159
162
|
onNodesChange: OnNodesChange<XYFlowNode>;
|
|
160
163
|
onEdgesChange: OnEdgesChange<XYFlowEdge>;
|
|
164
|
+
highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
|
|
161
165
|
}>, "subscribe"> & {
|
|
162
166
|
subscribe: {
|
|
163
167
|
(listener: (selectedState: {
|
|
@@ -165,6 +169,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
|
|
|
165
169
|
readonly: boolean;
|
|
166
170
|
showElementLinks: boolean;
|
|
167
171
|
showNavigationButtons: boolean;
|
|
172
|
+
showNotations: boolean;
|
|
168
173
|
fitViewEnabled: boolean;
|
|
169
174
|
fitViewPadding: number;
|
|
170
175
|
zoomable: boolean;
|
|
@@ -294,11 +299,13 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
|
|
|
294
299
|
reconnectable?: boolean | import('@xyflow/react').HandleType;
|
|
295
300
|
focusable?: boolean;
|
|
296
301
|
}>;
|
|
302
|
+
highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
|
|
297
303
|
}, previousSelectedState: {
|
|
298
304
|
view: DiagramView;
|
|
299
305
|
readonly: boolean;
|
|
300
306
|
showElementLinks: boolean;
|
|
301
307
|
showNavigationButtons: boolean;
|
|
308
|
+
showNotations: boolean;
|
|
302
309
|
fitViewEnabled: boolean;
|
|
303
310
|
fitViewPadding: number;
|
|
304
311
|
zoomable: boolean;
|
|
@@ -428,12 +435,14 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
|
|
|
428
435
|
reconnectable?: boolean | import('@xyflow/react').HandleType;
|
|
429
436
|
focusable?: boolean;
|
|
430
437
|
}>;
|
|
438
|
+
highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
|
|
431
439
|
}) => void): () => void;
|
|
432
440
|
<U>(selector: (state: {
|
|
433
441
|
view: DiagramView;
|
|
434
442
|
readonly: boolean;
|
|
435
443
|
showElementLinks: boolean;
|
|
436
444
|
showNavigationButtons: boolean;
|
|
445
|
+
showNotations: boolean;
|
|
437
446
|
fitViewEnabled: boolean;
|
|
438
447
|
fitViewPadding: number;
|
|
439
448
|
zoomable: boolean;
|
|
@@ -563,6 +572,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
|
|
|
563
572
|
reconnectable?: boolean | import('@xyflow/react').HandleType;
|
|
564
573
|
focusable?: boolean;
|
|
565
574
|
}>;
|
|
575
|
+
highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
|
|
566
576
|
}) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
|
|
567
577
|
equalityFn?: (a: U, b: U) => boolean;
|
|
568
578
|
fireImmediately?: boolean;
|
|
@@ -576,6 +586,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
|
|
|
576
586
|
readonly: boolean;
|
|
577
587
|
showElementLinks: boolean;
|
|
578
588
|
showNavigationButtons: boolean;
|
|
589
|
+
showNotations: boolean;
|
|
579
590
|
fitViewEnabled: boolean;
|
|
580
591
|
fitViewPadding: number;
|
|
581
592
|
zoomable: boolean;
|
|
@@ -705,11 +716,13 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
|
|
|
705
716
|
reconnectable?: boolean | import('@xyflow/react').HandleType;
|
|
706
717
|
focusable?: boolean;
|
|
707
718
|
}>;
|
|
719
|
+
highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
|
|
708
720
|
} | Partial<{
|
|
709
721
|
view: DiagramView;
|
|
710
722
|
readonly: boolean;
|
|
711
723
|
showElementLinks: boolean;
|
|
712
724
|
showNavigationButtons: boolean;
|
|
725
|
+
showNotations: boolean;
|
|
713
726
|
fitViewEnabled: boolean;
|
|
714
727
|
fitViewPadding: number;
|
|
715
728
|
zoomable: boolean;
|
|
@@ -839,11 +852,13 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
|
|
|
839
852
|
reconnectable?: boolean | import('@xyflow/react').HandleType;
|
|
840
853
|
focusable?: boolean;
|
|
841
854
|
}>;
|
|
855
|
+
highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
|
|
842
856
|
}> | ((state: {
|
|
843
857
|
view: DiagramView;
|
|
844
858
|
readonly: boolean;
|
|
845
859
|
showElementLinks: boolean;
|
|
846
860
|
showNavigationButtons: boolean;
|
|
861
|
+
showNotations: boolean;
|
|
847
862
|
fitViewEnabled: boolean;
|
|
848
863
|
fitViewPadding: number;
|
|
849
864
|
zoomable: boolean;
|
|
@@ -973,11 +988,13 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
|
|
|
973
988
|
reconnectable?: boolean | import('@xyflow/react').HandleType;
|
|
974
989
|
focusable?: boolean;
|
|
975
990
|
}>;
|
|
991
|
+
highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
|
|
976
992
|
}) => {
|
|
977
993
|
view: DiagramView;
|
|
978
994
|
readonly: boolean;
|
|
979
995
|
showElementLinks: boolean;
|
|
980
996
|
showNavigationButtons: boolean;
|
|
997
|
+
showNotations: boolean;
|
|
981
998
|
fitViewEnabled: boolean;
|
|
982
999
|
fitViewPadding: number;
|
|
983
1000
|
zoomable: boolean;
|
|
@@ -1107,11 +1124,13 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
|
|
|
1107
1124
|
reconnectable?: boolean | import('@xyflow/react').HandleType;
|
|
1108
1125
|
focusable?: boolean;
|
|
1109
1126
|
}>;
|
|
1127
|
+
highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
|
|
1110
1128
|
} | Partial<{
|
|
1111
1129
|
view: DiagramView;
|
|
1112
1130
|
readonly: boolean;
|
|
1113
1131
|
showElementLinks: boolean;
|
|
1114
1132
|
showNavigationButtons: boolean;
|
|
1133
|
+
showNotations: boolean;
|
|
1115
1134
|
fitViewEnabled: boolean;
|
|
1116
1135
|
fitViewPadding: number;
|
|
1117
1136
|
zoomable: boolean;
|
|
@@ -1241,6 +1260,7 @@ export declare function createDiagramStore<T extends Exact<DiagramInitialState,
|
|
|
1241
1260
|
reconnectable?: boolean | import('@xyflow/react').HandleType;
|
|
1242
1261
|
focusable?: boolean;
|
|
1243
1262
|
}>;
|
|
1263
|
+
highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void;
|
|
1244
1264
|
}>), replace?: boolean | undefined, action?: A | undefined): void;
|
|
1245
1265
|
}>;
|
|
1246
1266
|
export type DiagramZustandStore = ReturnType<typeof createDiagramStore>;
|