@likec4/diagram 1.9.0 → 1.12.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 (113) hide show
  1. package/package.json +20 -43
  2. package/src/LikeC4CustomColors.tsx +5 -2
  3. package/src/LikeC4Diagram.css.ts +1 -1
  4. package/src/LikeC4Diagram.props.ts +40 -94
  5. package/src/LikeC4Diagram.tsx +14 -4
  6. package/src/LikeC4ModelProvider.tsx +21 -0
  7. package/src/StaticLikeC4Diagram.tsx +1 -0
  8. package/src/globals.css.ts +2 -3
  9. package/src/hooks/index.ts +1 -0
  10. package/src/hooks/useMantinePortalProps.ts +8 -0
  11. package/src/hooks/useXYFlow.ts +1 -2
  12. package/src/index.ts +9 -0
  13. package/src/likec4model/LikeC4ModelContext.ts +4 -0
  14. package/src/likec4model/index.ts +1 -0
  15. package/src/likec4model/useLikeC4Model.ts +58 -0
  16. package/src/state/diagram-to-xyflow.ts +1 -2
  17. package/src/state/diagramStore.ts +185 -66
  18. package/src/{theme.css.ts → theme-vars.ts} +11 -4
  19. package/src/ui/DiagramTitlePanel.css.ts +2 -3
  20. package/src/ui/DiagramTitlePanel.tsx +25 -3
  21. package/src/ui/DynamicViewWalkthrough.css.ts +28 -2
  22. package/src/ui/DynamicViewWalkthrough.tsx +97 -52
  23. package/src/ui/OptionsPanel.css.ts +1 -2
  24. package/src/ui/OptionsPanel.tsx +5 -2
  25. package/src/ui/notation/NotationPanel.css.ts +2 -3
  26. package/src/ui/notation/NotationPanel.tsx +10 -11
  27. package/src/ui/options/NodeOptions.tsx +4 -1
  28. package/src/ui/top-left/ChangeAutoLayoutButton.tsx +122 -71
  29. package/src/ui/top-left/TopLeftPanel.tsx +128 -117
  30. package/src/ui/top-left/_shared.ts +7 -6
  31. package/src/ui/top-left/styles.css.ts +48 -8
  32. package/src/utils/vector.ts +57 -0
  33. package/src/xyflow/FitviewOnDiagramChange.tsx +5 -4
  34. package/src/xyflow/SelectEdgesOnNodeFocus.tsx +7 -5
  35. package/src/xyflow/XYFlow.tsx +13 -17
  36. package/src/xyflow/XYFlowEvents.tsx +58 -58
  37. package/src/xyflow/XYFlowInner.tsx +4 -8
  38. package/src/xyflow/edges/EdgeLabel.tsx +185 -0
  39. package/src/xyflow/edges/RelationshipEdge.tsx +170 -137
  40. package/src/xyflow/edges/RelationshipsDropdownMenu.css.ts +60 -0
  41. package/src/xyflow/edges/RelationshipsDropdownMenu.tsx +214 -0
  42. package/src/xyflow/edges/edges.css.ts +75 -7
  43. package/src/xyflow/nodes/compound/CompoundNode.css.ts +1 -2
  44. package/src/xyflow/nodes/compound/CompoundNode.tsx +25 -8
  45. package/src/xyflow/nodes/element/ElementLink.css.ts +1 -1
  46. package/src/xyflow/nodes/element/ElementLink.tsx +4 -8
  47. package/src/xyflow/nodes/element/ElementNode.tsx +47 -8
  48. package/src/xyflow/nodes/element/element.css.ts +1 -2
  49. package/src/xyflow/nodes/shared/Toolbar.tsx +426 -0
  50. package/src/xyflow/types.ts +1 -24
  51. package/src/xyflow/useLayoutConstraints.ts +10 -6
  52. package/dist/LikeC4CustomColors.d.ts +0 -3
  53. package/dist/LikeC4CustomColors.props.d.ts +0 -5
  54. package/dist/LikeC4Diagram.css.d.ts +0 -4
  55. package/dist/LikeC4Diagram.d.ts +0 -7
  56. package/dist/LikeC4Diagram.props.d.ts +0 -154
  57. package/dist/StaticLikeC4Diagram.d.ts +0 -4
  58. package/dist/globals.css.d.ts +0 -1
  59. package/dist/hooks/index.d.ts +0 -4
  60. package/dist/hooks/useDiagramState.d.ts +0 -6
  61. package/dist/hooks/useSetState.d.ts +0 -3
  62. package/dist/hooks/useUpdateEffect.d.ts +0 -5
  63. package/dist/hooks/useXYFlow.d.ts +0 -267
  64. package/dist/index.d.ts +0 -9
  65. package/dist/index.mjs +0 -3684
  66. package/dist/mantine/EnsureMantine.d.ts +0 -8
  67. package/dist/mantine.css.d.ts +0 -3
  68. package/dist/state/DiagramContext.d.ts +0 -1192
  69. package/dist/state/diagram-to-xyflow.d.ts +0 -12
  70. package/dist/state/diagramStore.d.ts +0 -1268
  71. package/dist/style.css +0 -2139
  72. package/dist/theme.css.d.ts +0 -63
  73. package/dist/ui/DiagramTitlePanel.css.d.ts +0 -4
  74. package/dist/ui/DiagramTitlePanel.d.ts +0 -1
  75. package/dist/ui/DynamicViewWalkthrough.css.d.ts +0 -3
  76. package/dist/ui/DynamicViewWalkthrough.d.ts +0 -1
  77. package/dist/ui/OptionsPanel.css.d.ts +0 -1
  78. package/dist/ui/OptionsPanel.d.ts +0 -1
  79. package/dist/ui/notation/NotationPanel.css.d.ts +0 -6
  80. package/dist/ui/notation/NotationPanel.d.ts +0 -1
  81. package/dist/ui/notation/index.d.ts +0 -1
  82. package/dist/ui/options/EdgeOptions.d.ts +0 -19
  83. package/dist/ui/options/NodeOptions.d.ts +0 -19
  84. package/dist/ui/top-left/ChangeAutoLayoutButton.d.ts +0 -3
  85. package/dist/ui/top-left/TopLeftPanel.d.ts +0 -4
  86. package/dist/ui/top-left/_shared.d.ts +0 -5
  87. package/dist/ui/top-left/styles.css.d.ts +0 -3
  88. package/dist/xyflow/EdgeMarkers.d.ts +0 -12
  89. package/dist/xyflow/FitviewOnDiagramChange.d.ts +0 -4
  90. package/dist/xyflow/SelectEdgesOnNodeFocus.d.ts +0 -1
  91. package/dist/xyflow/XYFlow.d.ts +0 -12
  92. package/dist/xyflow/XYFlowBackground.d.ts +0 -11
  93. package/dist/xyflow/XYFlowEvents.d.ts +0 -161
  94. package/dist/xyflow/XYFlowInner.d.ts +0 -10
  95. package/dist/xyflow/const.d.ts +0 -7
  96. package/dist/xyflow/edges/RelationshipEdge.d.ts +0 -32
  97. package/dist/xyflow/edges/edges.css.d.ts +0 -12
  98. package/dist/xyflow/edges/utils.d.ts +0 -17
  99. package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts +0 -11
  100. package/dist/xyflow/nodes/compound/CompoundNode.d.ts +0 -6
  101. package/dist/xyflow/nodes/compound/index.d.ts +0 -1
  102. package/dist/xyflow/nodes/element/ElementLink.css.d.ts +0 -3
  103. package/dist/xyflow/nodes/element/ElementLink.d.ts +0 -7
  104. package/dist/xyflow/nodes/element/ElementNode.d.ts +0 -6
  105. package/dist/xyflow/nodes/element/ElementShapeSvg.d.ts +0 -18
  106. package/dist/xyflow/nodes/element/element.css.d.ts +0 -19
  107. package/dist/xyflow/nodes/element/index.d.ts +0 -1
  108. package/dist/xyflow/nodes/shared/NavigateToBtn.d.ts +0 -5
  109. package/dist/xyflow/types.d.ts +0 -50
  110. package/dist/xyflow/useLayoutConstraints.d.ts +0 -9
  111. package/dist/xyflow/utils.d.ts +0 -18
  112. package/src/mantine.css.ts +0 -7
  113. package/src/reset.d.ts +0 -2
@@ -1,4 +0,0 @@
1
- export * from './useDiagramState';
2
- export * from './useSetState';
3
- export * from './useUpdateEffect';
4
- export * from './useXYFlow';
@@ -1,6 +0,0 @@
1
- import { DiagramState, DiagramStoreApi } from '../state/diagramStore';
2
-
3
- declare function useDiagramState<StateSlice = unknown>(selector: (state: DiagramState) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
4
- declare function useDiagramStoreApi(): DiagramStoreApi;
5
- export type { DiagramState, DiagramStoreApi };
6
- export { useDiagramState, useDiagramStoreApi };
@@ -1,3 +0,0 @@
1
- import { NonEmptyObject } from 'type-fest';
2
-
3
- export declare function useSetState<T extends object>(initialState: T | (() => T)): readonly [T, (statePartial: NonEmptyObject<Partial<T>> | ((current: T) => NonEmptyObject<Partial<T>>)) => void];
@@ -1,5 +0,0 @@
1
- import { DependenciesComparator, EffectHook } from '@react-hookz/web';
2
- import { DependencyList, EffectCallback } from 'react';
3
-
4
- export declare const depsShallowEqual: DependenciesComparator;
5
- export declare function useUpdateEffect<Callback extends EffectCallback = EffectCallback, Deps extends DependencyList = DependencyList>(callback: Callback, deps: Deps, equalityFn?: DependenciesComparator<Deps>, effectHook?: EffectHook<Callback, Deps>): void;
@@ -1,267 +0,0 @@
1
- import { XYFlowEdge, XYFlowNode, XYFlowState } from '../xyflow/types';
2
-
3
- export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<XYFlowNode, {
4
- id: string;
5
- type: "relationship";
6
- source: string;
7
- target: string;
8
- sourceHandle?: string | null;
9
- targetHandle?: string | null;
10
- animated?: boolean;
11
- hidden?: boolean;
12
- deletable?: boolean;
13
- selectable?: boolean;
14
- data: import('../xyflow/types').RelationshipData;
15
- selected?: boolean;
16
- markerStart?: import('@xyflow/react').EdgeMarkerType;
17
- markerEnd?: import('@xyflow/react').EdgeMarkerType;
18
- zIndex?: number;
19
- ariaLabel?: string;
20
- interactionWidth?: number;
21
- label?: string | import('react').ReactNode;
22
- labelStyle?: import('react').CSSProperties;
23
- labelShowBg?: boolean;
24
- labelBgStyle?: import('react').CSSProperties;
25
- labelBgPadding?: [number, number];
26
- labelBgBorderRadius?: number;
27
- style?: import('react').CSSProperties;
28
- className?: string;
29
- reconnectable?: boolean | import('@xyflow/react').HandleType;
30
- focusable?: boolean;
31
- }>;
32
- export declare const useXYNodesData: {
33
- (nodeId: string): Pick<XYFlowNode, "id" | "type" | "data"> | null;
34
- (nodeIds: string[]): Pick<XYFlowNode, "id" | "type" | "data">[];
35
- };
36
- export declare function useXYStore<StateSlice = unknown>(selector: (state: XYFlowState) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
37
- export declare const useXYStoreApi: () => {
38
- getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
39
- id: string;
40
- type: "relationship";
41
- source: string;
42
- target: string;
43
- sourceHandle?: string | null;
44
- targetHandle?: string | null;
45
- animated?: boolean;
46
- hidden?: boolean;
47
- deletable?: boolean;
48
- selectable?: boolean;
49
- data: import('../xyflow/types').RelationshipData;
50
- selected?: boolean;
51
- markerStart?: import('@xyflow/react').EdgeMarkerType;
52
- markerEnd?: import('@xyflow/react').EdgeMarkerType;
53
- zIndex?: number;
54
- ariaLabel?: string;
55
- interactionWidth?: number;
56
- label?: string | import('react').ReactNode;
57
- labelStyle?: import('react').CSSProperties;
58
- labelShowBg?: boolean;
59
- labelBgStyle?: import('react').CSSProperties;
60
- labelBgPadding?: [number, number];
61
- labelBgBorderRadius?: number;
62
- style?: import('react').CSSProperties;
63
- className?: string;
64
- reconnectable?: boolean | import('@xyflow/react').HandleType;
65
- focusable?: boolean;
66
- }>;
67
- setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
68
- id: string;
69
- type: "relationship";
70
- source: string;
71
- target: string;
72
- sourceHandle?: string | null;
73
- targetHandle?: string | null;
74
- animated?: boolean;
75
- hidden?: boolean;
76
- deletable?: boolean;
77
- selectable?: boolean;
78
- data: import('../xyflow/types').RelationshipData;
79
- selected?: boolean;
80
- markerStart?: import('@xyflow/react').EdgeMarkerType;
81
- markerEnd?: import('@xyflow/react').EdgeMarkerType;
82
- zIndex?: number;
83
- ariaLabel?: string;
84
- interactionWidth?: number;
85
- label?: string | import('react').ReactNode;
86
- labelStyle?: import('react').CSSProperties;
87
- labelShowBg?: boolean;
88
- labelBgStyle?: import('react').CSSProperties;
89
- labelBgPadding?: [number, number];
90
- labelBgBorderRadius?: number;
91
- style?: import('react').CSSProperties;
92
- className?: string;
93
- reconnectable?: boolean | import('@xyflow/react').HandleType;
94
- focusable?: boolean;
95
- }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
96
- id: string;
97
- type: "relationship";
98
- source: string;
99
- target: string;
100
- sourceHandle?: string | null;
101
- targetHandle?: string | null;
102
- animated?: boolean;
103
- hidden?: boolean;
104
- deletable?: boolean;
105
- selectable?: boolean;
106
- data: import('../xyflow/types').RelationshipData;
107
- selected?: boolean;
108
- markerStart?: import('@xyflow/react').EdgeMarkerType;
109
- markerEnd?: import('@xyflow/react').EdgeMarkerType;
110
- zIndex?: number;
111
- ariaLabel?: string;
112
- interactionWidth?: number;
113
- label?: string | import('react').ReactNode;
114
- labelStyle?: import('react').CSSProperties;
115
- labelShowBg?: boolean;
116
- labelBgStyle?: import('react').CSSProperties;
117
- labelBgPadding?: [number, number];
118
- labelBgBorderRadius?: number;
119
- style?: import('react').CSSProperties;
120
- className?: string;
121
- reconnectable?: boolean | import('@xyflow/react').HandleType;
122
- focusable?: boolean;
123
- }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
124
- id: string;
125
- type: "relationship";
126
- source: string;
127
- target: string;
128
- sourceHandle?: string | null;
129
- targetHandle?: string | null;
130
- animated?: boolean;
131
- hidden?: boolean;
132
- deletable?: boolean;
133
- selectable?: boolean;
134
- data: import('../xyflow/types').RelationshipData;
135
- selected?: boolean;
136
- markerStart?: import('@xyflow/react').EdgeMarkerType;
137
- markerEnd?: import('@xyflow/react').EdgeMarkerType;
138
- zIndex?: number;
139
- ariaLabel?: string;
140
- interactionWidth?: number;
141
- label?: string | import('react').ReactNode;
142
- labelStyle?: import('react').CSSProperties;
143
- labelShowBg?: boolean;
144
- labelBgStyle?: import('react').CSSProperties;
145
- labelBgPadding?: [number, number];
146
- labelBgBorderRadius?: number;
147
- style?: import('react').CSSProperties;
148
- className?: string;
149
- reconnectable?: boolean | import('@xyflow/react').HandleType;
150
- focusable?: boolean;
151
- }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
152
- id: string;
153
- type: "relationship";
154
- source: string;
155
- target: string;
156
- sourceHandle?: string | null;
157
- targetHandle?: string | null;
158
- animated?: boolean;
159
- hidden?: boolean;
160
- deletable?: boolean;
161
- selectable?: boolean;
162
- data: import('../xyflow/types').RelationshipData;
163
- selected?: boolean;
164
- markerStart?: import('@xyflow/react').EdgeMarkerType;
165
- markerEnd?: import('@xyflow/react').EdgeMarkerType;
166
- zIndex?: number;
167
- ariaLabel?: string;
168
- interactionWidth?: number;
169
- label?: string | import('react').ReactNode;
170
- labelStyle?: import('react').CSSProperties;
171
- labelShowBg?: boolean;
172
- labelBgStyle?: import('react').CSSProperties;
173
- labelBgPadding?: [number, number];
174
- labelBgBorderRadius?: number;
175
- style?: import('react').CSSProperties;
176
- className?: string;
177
- reconnectable?: boolean | import('@xyflow/react').HandleType;
178
- focusable?: boolean;
179
- }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
180
- id: string;
181
- type: "relationship";
182
- source: string;
183
- target: string;
184
- sourceHandle?: string | null;
185
- targetHandle?: string | null;
186
- animated?: boolean;
187
- hidden?: boolean;
188
- deletable?: boolean;
189
- selectable?: boolean;
190
- data: import('../xyflow/types').RelationshipData;
191
- selected?: boolean;
192
- markerStart?: import('@xyflow/react').EdgeMarkerType;
193
- markerEnd?: import('@xyflow/react').EdgeMarkerType;
194
- zIndex?: number;
195
- ariaLabel?: string;
196
- interactionWidth?: number;
197
- label?: string | import('react').ReactNode;
198
- labelStyle?: import('react').CSSProperties;
199
- labelShowBg?: boolean;
200
- labelBgStyle?: import('react').CSSProperties;
201
- labelBgPadding?: [number, number];
202
- labelBgBorderRadius?: number;
203
- style?: import('react').CSSProperties;
204
- className?: string;
205
- reconnectable?: boolean | import('@xyflow/react').HandleType;
206
- focusable?: boolean;
207
- }>>), replace?: boolean | undefined) => void;
208
- subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
209
- id: string;
210
- type: "relationship";
211
- source: string;
212
- target: string;
213
- sourceHandle?: string | null;
214
- targetHandle?: string | null;
215
- animated?: boolean;
216
- hidden?: boolean;
217
- deletable?: boolean;
218
- selectable?: boolean;
219
- data: import('../xyflow/types').RelationshipData;
220
- selected?: boolean;
221
- markerStart?: import('@xyflow/react').EdgeMarkerType;
222
- markerEnd?: import('@xyflow/react').EdgeMarkerType;
223
- zIndex?: number;
224
- ariaLabel?: string;
225
- interactionWidth?: number;
226
- label?: string | import('react').ReactNode;
227
- labelStyle?: import('react').CSSProperties;
228
- labelShowBg?: boolean;
229
- labelBgStyle?: import('react').CSSProperties;
230
- labelBgPadding?: [number, number];
231
- labelBgBorderRadius?: number;
232
- style?: import('react').CSSProperties;
233
- className?: string;
234
- reconnectable?: boolean | import('@xyflow/react').HandleType;
235
- focusable?: boolean;
236
- }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
237
- id: string;
238
- type: "relationship";
239
- source: string;
240
- target: string;
241
- sourceHandle?: string | null;
242
- targetHandle?: string | null;
243
- animated?: boolean;
244
- hidden?: boolean;
245
- deletable?: boolean;
246
- selectable?: boolean;
247
- data: import('../xyflow/types').RelationshipData;
248
- selected?: boolean;
249
- markerStart?: import('@xyflow/react').EdgeMarkerType;
250
- markerEnd?: import('@xyflow/react').EdgeMarkerType;
251
- zIndex?: number;
252
- ariaLabel?: string;
253
- interactionWidth?: number;
254
- label?: string | import('react').ReactNode;
255
- labelStyle?: import('react').CSSProperties;
256
- labelShowBg?: boolean;
257
- labelBgStyle?: import('react').CSSProperties;
258
- labelBgPadding?: [number, number];
259
- labelBgBorderRadius?: number;
260
- style?: import('react').CSSProperties;
261
- className?: string;
262
- reconnectable?: boolean | import('@xyflow/react').HandleType;
263
- focusable?: boolean;
264
- }>) => void) => () => void;
265
- };
266
- export type XYStoreApi = ReturnType<typeof useXYStoreApi>;
267
- export declare function useXYEdgesData(edgeIds: string[]): Pick<XYFlowEdge, 'id' | 'data'>[];
package/dist/index.d.ts DELETED
@@ -1,9 +0,0 @@
1
-
2
- export { LikeC4Diagram } from './LikeC4Diagram';
3
- export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
4
- export { useSetState } from './hooks/useSetState';
5
- export { useUpdateEffect } from './hooks/useUpdateEffect';
6
- export type * from './LikeC4Diagram';
7
- export type * from './LikeC4Diagram.props';
8
- export type * from './StaticLikeC4Diagram';
9
- export type * from './xyflow/types';