@likec4/diagram 1.0.0-next.2 → 1.0.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 (124) hide show
  1. package/dist/LikeC4Diagram.css.d.ts +0 -1
  2. package/dist/LikeC4Diagram.d.ts +1 -2
  3. package/dist/LikeC4Diagram.props.d.ts +24 -25
  4. package/dist/StaticLikeC4Diagram.d.ts +1 -2
  5. package/dist/globals.css.d.ts +1 -0
  6. package/dist/hooks/index.d.ts +2 -3
  7. package/dist/hooks/useSetState.d.ts +3 -0
  8. package/dist/hooks/useUpdateEffect.d.ts +4 -0
  9. package/dist/icons/Clipboard.d.ts +0 -1
  10. package/dist/icons/Link.d.ts +0 -1
  11. package/dist/icons/ZoomIn.d.ts +0 -1
  12. package/dist/icons/index.d.ts +0 -1
  13. package/dist/index.d.ts +1 -4
  14. package/dist/index.mjs +9388 -0
  15. package/dist/mantine/EnsureMantine.d.ts +2 -4
  16. package/dist/mantine/theme.d.ts +3 -0
  17. package/dist/mantine.css.d.ts +1 -0
  18. package/dist/state/DiagramContext.d.ts +386 -0
  19. package/dist/state/WhenInitialized.d.ts +3 -0
  20. package/dist/state/diagramStore.d.ts +428 -0
  21. package/dist/state/index.d.ts +4 -2
  22. package/dist/state/useDiagramStore.d.ts +387 -0
  23. package/dist/style.css +1212 -1
  24. package/dist/theme.css.d.ts +16 -2
  25. package/dist/ui/Camera.d.ts +0 -1
  26. package/dist/ui/KeepAspectRatio.css.d.ts +0 -1
  27. package/dist/ui/KeepAspectRatio.d.ts +0 -1
  28. package/dist/ui/OptionsPanel.css.d.ts +0 -1
  29. package/dist/ui/OptionsPanel.d.ts +0 -1
  30. package/dist/ui/index.d.ts +0 -1
  31. package/dist/ui/options/NodeOptions.d.ts +0 -1
  32. package/dist/xyflow/FitviewOnDiagramChange.d.ts +1 -5
  33. package/dist/xyflow/SyncWithDiagram.d.ts +5 -0
  34. package/dist/xyflow/XYFlowBackground.d.ts +0 -1
  35. package/dist/xyflow/XYFlowEvents.d.ts +5 -15
  36. package/dist/xyflow/XYFlowWrapper.d.ts +4 -5
  37. package/dist/xyflow/const.d.ts +1 -2
  38. package/dist/xyflow/diagram-to-xyflow.d.ts +4 -2
  39. package/dist/xyflow/edges/RelationshipEdge.d.ts +7 -7
  40. package/dist/xyflow/edges/edges.css.d.ts +2 -1
  41. package/dist/xyflow/edges/utils.d.ts +3 -4
  42. package/dist/xyflow/hooks/index.d.ts +2 -37
  43. package/dist/xyflow/hooks/{use-layout-/321/201onstraints.d.ts → useLayoutConstraints.d.ts} +2 -4
  44. package/dist/xyflow/hooks/useXYFlow.d.ts +266 -0
  45. package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts +0 -1
  46. package/dist/xyflow/nodes/compound/CompoundNode.d.ts +0 -1
  47. package/dist/xyflow/nodes/compound/index.d.ts +0 -1
  48. package/dist/xyflow/nodes/element/ElementIcon.d.ts +1 -2
  49. package/dist/xyflow/nodes/element/ElementLink.css.d.ts +0 -1
  50. package/dist/xyflow/nodes/element/ElementLink.d.ts +1 -2
  51. package/dist/xyflow/nodes/element/ElementNode.d.ts +1 -3
  52. package/dist/xyflow/nodes/element/ElementShapeSvg.d.ts +2 -3
  53. package/dist/xyflow/nodes/element/element.css.d.ts +0 -1
  54. package/dist/xyflow/nodes/element/index.d.ts +1 -2
  55. package/dist/xyflow/nodes/shared/NavigateToBtn.d.ts +0 -1
  56. package/dist/xyflow/types.d.ts +20 -8
  57. package/dist/xyflow/utils.d.ts +0 -1
  58. package/package.json +36 -34
  59. package/src/LikeC4Diagram.css.ts +31 -0
  60. package/src/LikeC4Diagram.props.ts +154 -0
  61. package/src/LikeC4Diagram.tsx +119 -0
  62. package/src/StaticLikeC4Diagram.tsx +39 -0
  63. package/src/globals.css.ts +128 -0
  64. package/src/hooks/index.ts +2 -0
  65. package/src/hooks/useSetState.ts +19 -0
  66. package/src/hooks/useUpdateEffect.ts +28 -0
  67. package/src/icons/Clipboard.tsx +24 -0
  68. package/src/icons/Link.tsx +23 -0
  69. package/src/icons/ZoomIn.tsx +25 -0
  70. package/src/icons/index.ts +3 -0
  71. package/src/index.ts +11 -0
  72. package/src/mantine/EnsureMantine.tsx +14 -0
  73. package/src/mantine/theme.ts +19 -0
  74. package/src/mantine.css.ts +4 -0
  75. package/src/reset.d.ts +2 -0
  76. package/src/state/DiagramContext.tsx +42 -0
  77. package/src/state/WhenInitialized.tsx +24 -0
  78. package/src/state/diagramStore.ts +358 -0
  79. package/src/state/index.ts +4 -0
  80. package/src/state/useDiagramStore.ts +39 -0
  81. package/src/theme.css.ts +64 -0
  82. package/src/ui/Camera.tsx +174 -0
  83. package/src/ui/KeepAspectRatio.css.ts +7 -0
  84. package/src/ui/KeepAspectRatio.tsx +35 -0
  85. package/src/ui/OptionsPanel.css.ts +10 -0
  86. package/src/ui/OptionsPanel.tsx +65 -0
  87. package/src/ui/index.ts +3 -0
  88. package/src/ui/options/NodeOptions.tsx +253 -0
  89. package/src/xyflow/FitviewOnDiagramChange.tsx +93 -0
  90. package/src/xyflow/SyncWithDiagram.tsx +113 -0
  91. package/src/xyflow/XYFlowBackground.tsx +33 -0
  92. package/src/xyflow/XYFlowEvents.tsx +100 -0
  93. package/src/xyflow/XYFlowWrapper.tsx +166 -0
  94. package/src/xyflow/const.ts +7 -0
  95. package/src/xyflow/diagram-to-xyflow.ts +197 -0
  96. package/src/xyflow/edges/RelationshipEdge.tsx +288 -0
  97. package/src/xyflow/edges/edges.css.ts +124 -0
  98. package/src/xyflow/edges/utils.ts +110 -0
  99. package/src/xyflow/hooks/index.ts +2 -0
  100. package/src/xyflow/hooks/useLayoutConstraints.ts +289 -0
  101. package/src/xyflow/hooks/useXYFlow.ts +20 -0
  102. package/src/xyflow/nodes/compound/CompoundNode.css.ts +191 -0
  103. package/src/xyflow/nodes/compound/CompoundNode.tsx +105 -0
  104. package/src/xyflow/nodes/compound/index.ts +1 -0
  105. package/src/xyflow/nodes/element/ElementIcon.tsx +44 -0
  106. package/src/xyflow/nodes/element/ElementLink.css.ts +67 -0
  107. package/src/xyflow/nodes/element/ElementLink.tsx +94 -0
  108. package/src/xyflow/nodes/element/ElementNode.tsx +225 -0
  109. package/src/xyflow/nodes/element/ElementShapeSvg.tsx +181 -0
  110. package/src/xyflow/nodes/element/element.css.ts +261 -0
  111. package/src/xyflow/nodes/element/index.ts +1 -0
  112. package/src/xyflow/nodes/shared/NavigateToBtn.tsx +25 -0
  113. package/src/xyflow/types.ts +100 -0
  114. package/src/xyflow/utils.ts +12 -0
  115. package/dist/EmbeddedLikeC4Diagram.css.d.ts +0 -6
  116. package/dist/EmbeddedLikeC4Diagram.d.ts +0 -18
  117. package/dist/bundle.d.ts +0 -3
  118. package/dist/hooks/use-set-state.d.ts +0 -2
  119. package/dist/hooks/use-update-effect.d.ts +0 -4
  120. package/dist/index.css.d.ts +0 -2
  121. package/dist/index.js +0 -13043
  122. package/dist/mantine/index.d.ts +0 -3
  123. package/dist/state/DiagramState.d.ts +0 -162
  124. package/dist/xyflow/UpdateOnDiagramChange.d.ts +0 -10
@@ -1,3 +0,0 @@
1
- export declare const mantine: import('@mantine/vanilla-extract').MantineVars;
2
- export { EnsureMantine } from './EnsureMantine';
3
- //# sourceMappingURL=index.d.ts.map
@@ -1,162 +0,0 @@
1
- import { LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
2
- import { DiagramView } from '@likec4/core';
3
-
4
- type DiagramStateProps = {
5
- /**
6
- * If nodes are interactive, they can be selected, dragged, etc.
7
- */
8
- isNodeInteractive: boolean;
9
- view: DiagramView;
10
- fitViewPadding: number;
11
- readonly: boolean;
12
- disableHovercards: boolean;
13
- eventHandlers: LikeC4DiagramEventHandlers;
14
- };
15
- export declare const DiagramStateProvider: (props: DiagramStateProps & {
16
- children: import('react').ReactNode;
17
- }) => import('react').FunctionComponentElement<import("react").ProviderProps<((statePartial: Partial<{
18
- viewportInitialized: boolean;
19
- viewportMoved: boolean;
20
- hoveredNodeId: string | null;
21
- hoveredEdgeId: string | null;
22
- }> | ((current: {
23
- viewportInitialized: boolean;
24
- viewportMoved: boolean;
25
- hoveredNodeId: string | null;
26
- hoveredEdgeId: string | null;
27
- }) => Partial<{
28
- viewportInitialized: boolean;
29
- viewportMoved: boolean;
30
- hoveredNodeId: string | null;
31
- hoveredEdgeId: string | null;
32
- }>)) => void) | undefined>>, useDiagramStateTracked: () => [{
33
- viewportInitialized: boolean;
34
- viewportMoved: boolean;
35
- hoveredNodeId: string | null;
36
- hoveredEdgeId: string | null;
37
- hasOnChange: boolean;
38
- hasOnNavigateTo: boolean;
39
- hasOnNodeClick: boolean;
40
- hasOnNodeContextMenu: boolean;
41
- hasOnCanvasContextMenu: boolean;
42
- hasOnEdgeContextMenu: boolean;
43
- hasOnContextMenu: boolean;
44
- hasOnEdgeClick: boolean;
45
- hasOnCanvasClick: boolean;
46
- readonly: boolean;
47
- disableHovercards: boolean;
48
- isNodeInteractive: boolean;
49
- viewId: import('@likec4/core').ViewID;
50
- viewLayout: import('@likec4/core').AutoLayoutDirection;
51
- viewWidth: number;
52
- viewHeight: number;
53
- fitViewPadding: number;
54
- }, ((statePartial: Partial<{
55
- viewportInitialized: boolean;
56
- viewportMoved: boolean;
57
- hoveredNodeId: string | null;
58
- hoveredEdgeId: string | null;
59
- }> | ((current: {
60
- viewportInitialized: boolean;
61
- viewportMoved: boolean;
62
- hoveredNodeId: string | null;
63
- hoveredEdgeId: string | null;
64
- }) => Partial<{
65
- viewportInitialized: boolean;
66
- viewportMoved: boolean;
67
- hoveredNodeId: string | null;
68
- hoveredEdgeId: string | null;
69
- }>)) => void) | ((statePartial: Partial<{
70
- viewportInitialized: boolean;
71
- viewportMoved: boolean;
72
- hoveredNodeId: string | null;
73
- hoveredEdgeId: string | null;
74
- }> | ((current: {
75
- viewportInitialized: boolean;
76
- viewportMoved: boolean;
77
- hoveredNodeId: string | null;
78
- hoveredEdgeId: string | null;
79
- }) => Partial<{
80
- viewportInitialized: boolean;
81
- viewportMoved: boolean;
82
- hoveredNodeId: string | null;
83
- hoveredEdgeId: string | null;
84
- }>)) => void)], useDiagramState: () => {
85
- viewportInitialized: boolean;
86
- viewportMoved: boolean;
87
- hoveredNodeId: string | null;
88
- hoveredEdgeId: string | null;
89
- hasOnChange: boolean;
90
- hasOnNavigateTo: boolean;
91
- hasOnNodeClick: boolean;
92
- hasOnNodeContextMenu: boolean;
93
- hasOnCanvasContextMenu: boolean;
94
- hasOnEdgeContextMenu: boolean;
95
- hasOnContextMenu: boolean;
96
- hasOnEdgeClick: boolean;
97
- hasOnCanvasClick: boolean;
98
- readonly: boolean;
99
- disableHovercards: boolean;
100
- isNodeInteractive: boolean;
101
- viewId: import('@likec4/core').ViewID;
102
- viewLayout: import('@likec4/core').AutoLayoutDirection;
103
- viewWidth: number;
104
- viewHeight: number;
105
- fitViewPadding: number;
106
- }, useUpdateDiagramState: (() => (statePartial: Partial<{
107
- viewportInitialized: boolean;
108
- viewportMoved: boolean;
109
- hoveredNodeId: string | null;
110
- hoveredEdgeId: string | null;
111
- }> | ((current: {
112
- viewportInitialized: boolean;
113
- viewportMoved: boolean;
114
- hoveredNodeId: string | null;
115
- hoveredEdgeId: string | null;
116
- }) => Partial<{
117
- viewportInitialized: boolean;
118
- viewportMoved: boolean;
119
- hoveredNodeId: string | null;
120
- hoveredEdgeId: string | null;
121
- }>)) => void) | (() => (statePartial: Partial<{
122
- viewportInitialized: boolean;
123
- viewportMoved: boolean;
124
- hoveredNodeId: string | null;
125
- hoveredEdgeId: string | null;
126
- }> | ((current: {
127
- viewportInitialized: boolean;
128
- viewportMoved: boolean;
129
- hoveredNodeId: string | null;
130
- hoveredEdgeId: string | null;
131
- }) => Partial<{
132
- viewportInitialized: boolean;
133
- viewportMoved: boolean;
134
- hoveredNodeId: string | null;
135
- hoveredEdgeId: string | null;
136
- }>)) => void), useDiagramStateSelector: <Selected>(selector: (state: {
137
- viewportInitialized: boolean;
138
- viewportMoved: boolean;
139
- hoveredNodeId: string | null;
140
- hoveredEdgeId: string | null;
141
- hasOnChange: boolean;
142
- hasOnNavigateTo: boolean;
143
- hasOnNodeClick: boolean;
144
- hasOnNodeContextMenu: boolean;
145
- hasOnCanvasContextMenu: boolean;
146
- hasOnEdgeContextMenu: boolean;
147
- hasOnContextMenu: boolean;
148
- hasOnEdgeClick: boolean;
149
- hasOnCanvasClick: boolean;
150
- readonly: boolean;
151
- disableHovercards: boolean;
152
- isNodeInteractive: boolean;
153
- viewId: import('@likec4/core').ViewID;
154
- viewLayout: import('@likec4/core').AutoLayoutDirection;
155
- viewWidth: number;
156
- viewHeight: number;
157
- fitViewPadding: number;
158
- }) => Selected) => Selected;
159
- export type DiagramState = ReturnType<typeof useDiagramState>;
160
- export type UpdateDiagramState = ReturnType<typeof useUpdateDiagramState>;
161
- export {};
162
- //# sourceMappingURL=DiagramState.d.ts.map
@@ -1,10 +0,0 @@
1
- import { DiagramView } from '@likec4/core';
2
-
3
- /**
4
- * Syncs the diagram state with the XYFlow instance
5
- */
6
- export declare function UpdateOnDiagramChange({ nodesDraggable, view: { nodes, edges } }: {
7
- view: DiagramView;
8
- nodesDraggable: boolean;
9
- }): null;
10
- //# sourceMappingURL=UpdateOnDiagramChange.d.ts.map