@likec4/diagram 1.19.2 → 1.20.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 (581) hide show
  1. package/dist/LikeC4Diagram.css.d.ts +0 -1
  2. package/dist/LikeC4Diagram.css.js +1 -5
  3. package/dist/LikeC4Diagram.d.ts +1 -4
  4. package/dist/LikeC4Diagram.js +102 -147
  5. package/dist/LikeC4Diagram.props.d.ts +10 -16
  6. package/dist/LikeC4Search.js +7 -15
  7. package/dist/StaticLikeC4Diagram.d.ts +1 -1
  8. package/dist/base/Background.d.ts +7 -0
  9. package/dist/{xyflow/XYFlowBackground.js → base/Background.js} +5 -6
  10. package/dist/base/BaseXYFlow.d.ts +14 -0
  11. package/dist/base/BaseXYFlow.js +146 -0
  12. package/dist/base/example/RelationshipsBrowser.d.ts +6 -0
  13. package/dist/base/example/_types.d.ts +20 -0
  14. package/dist/base/example/custom.d.ts +71 -0
  15. package/dist/base/example/useViewToNodesEdges.d.ts +6 -0
  16. package/dist/base/index.d.ts +2 -0
  17. package/dist/base/primitives/NodeHandles.d.ts +4 -0
  18. package/dist/base/primitives/NodeHandles.js +14 -0
  19. package/dist/base/primitives/compound/CompoundActionButton.css.d.ts +3 -0
  20. package/dist/base/primitives/compound/CompoundActionButton.css.js +9 -0
  21. package/dist/base/primitives/compound/CompoundActionButton.d.ts +7 -0
  22. package/dist/base/primitives/compound/CompoundActionButton.js +48 -0
  23. package/dist/base/primitives/compound/CompoundDetailsButton.css.d.ts +3 -0
  24. package/dist/base/primitives/compound/CompoundDetailsButton.css.js +9 -0
  25. package/dist/base/primitives/compound/CompoundDetailsButton.d.ts +7 -0
  26. package/dist/base/primitives/compound/CompoundDetailsButton.js +50 -0
  27. package/dist/base/primitives/compound/CompoundNodeContainer.css.d.ts +9 -0
  28. package/dist/base/primitives/compound/CompoundNodeContainer.css.js +17 -0
  29. package/dist/base/primitives/compound/CompoundNodeContainer.d.ts +26 -0
  30. package/dist/base/primitives/compound/CompoundNodeContainer.js +86 -0
  31. package/dist/base/primitives/compound/CompoundTitle.css.d.ts +2 -0
  32. package/dist/base/primitives/compound/CompoundTitle.css.js +7 -0
  33. package/dist/base/primitives/compound/CompoundTitle.d.ts +6 -0
  34. package/dist/base/primitives/compound/CompoundTitle.js +20 -0
  35. package/dist/base/primitives/customEdge.d.ts +41 -0
  36. package/dist/base/primitives/customEdge.js +13 -0
  37. package/dist/base/primitives/customNode.d.ts +7 -0
  38. package/dist/base/primitives/customNode.js +10 -0
  39. package/dist/base/primitives/edge/EdgeActionButton.d.ts +7 -0
  40. package/dist/base/primitives/edge/EdgeActionButton.js +24 -0
  41. package/dist/base/primitives/edge/EdgeContainer.d.ts +10 -0
  42. package/dist/base/primitives/edge/EdgeContainer.js +35 -0
  43. package/dist/{xyflow/edges/edges.css.d.ts → base/primitives/edge/EdgeLabel.css.d.ts} +5 -9
  44. package/dist/base/primitives/edge/EdgeLabel.css.js +25 -0
  45. package/dist/base/primitives/edge/EdgeLabel.d.ts +51 -0
  46. package/dist/base/primitives/edge/EdgeLabel.js +90 -0
  47. package/dist/{xyflow → base/primitives/edge}/EdgeMarkers.d.ts +2 -0
  48. package/dist/{xyflow → base/primitives/edge}/EdgeMarkers.js +29 -1
  49. package/dist/base/primitives/edge/EdgePath.d.ts +44 -0
  50. package/dist/base/primitives/edge/EdgePath.js +77 -0
  51. package/dist/base/primitives/edge/edge.css.d.ts +6 -0
  52. package/dist/base/primitives/edge/edge.css.js +14 -0
  53. package/dist/base/primitives/element/ElementActionButtons.css.d.ts +3 -0
  54. package/dist/base/primitives/element/ElementActionButtons.css.js +9 -0
  55. package/dist/base/primitives/element/ElementActionButtons.d.ts +13 -0
  56. package/dist/base/primitives/element/ElementActionButtons.js +62 -0
  57. package/dist/base/primitives/element/ElementDetailsButton.css.d.ts +3 -0
  58. package/dist/base/primitives/element/ElementDetailsButton.css.js +9 -0
  59. package/dist/base/primitives/element/ElementDetailsButton.d.ts +7 -0
  60. package/dist/base/primitives/element/ElementDetailsButton.js +54 -0
  61. package/dist/base/primitives/element/ElementNodeContainer.css.d.ts +3 -0
  62. package/dist/base/primitives/element/ElementNodeContainer.css.js +7 -0
  63. package/dist/base/primitives/element/ElementNodeContainer.d.ts +26 -0
  64. package/dist/base/primitives/element/ElementNodeContainer.js +60 -0
  65. package/dist/base/primitives/element/ElementShape.css.d.ts +6 -0
  66. package/dist/base/primitives/element/ElementShape.css.js +14 -0
  67. package/dist/base/primitives/element/ElementShape.d.ts +28 -0
  68. package/dist/{xyflow/nodes/element/ElementShapeSvg.js → base/primitives/element/ElementShape.js} +23 -7
  69. package/dist/base/primitives/element/ElementTitle.css.d.ts +8 -0
  70. package/dist/base/primitives/element/ElementTitle.css.js +19 -0
  71. package/dist/base/primitives/element/ElementTitle.d.ts +10 -0
  72. package/dist/base/primitives/element/ElementTitle.js +66 -0
  73. package/dist/base/primitives/index.d.ts +17 -0
  74. package/dist/base/types.d.ts +90 -0
  75. package/dist/base/types.js +54 -0
  76. package/dist/base/updateEdges.d.ts +3 -0
  77. package/dist/base/updateEdges.js +31 -0
  78. package/dist/base/updateNodes.d.ts +3 -0
  79. package/dist/base/updateNodes.js +36 -0
  80. package/dist/base/xyflowMachine.d.ts +212 -0
  81. package/dist/context/DiagramEventHandlers.d.ts +10 -0
  82. package/dist/context/DiagramEventHandlers.js +49 -0
  83. package/dist/context/DiagramFeatures.d.ts +31 -0
  84. package/dist/context/DiagramFeatures.js +140 -0
  85. package/dist/{ui → context}/FramerMotionConfig.js +2 -4
  86. package/dist/context/IconRenderer.d.ts +11 -0
  87. package/dist/{xyflow/nodes/shared/ElementIcon.js → context/IconRenderer.js} +14 -14
  88. package/dist/context/RootContainer.d.ts +9 -0
  89. package/dist/context/RootContainer.js +20 -0
  90. package/dist/context/index.d.ts +7 -0
  91. package/dist/globals.css.js +0 -86
  92. package/dist/hooks/index.d.ts +7 -5
  93. package/dist/hooks/useCurrentViewId.d.ts +2 -0
  94. package/dist/hooks/useCurrentViewId.js +8 -0
  95. package/dist/hooks/useDiagram.d.ts +10725 -0
  96. package/dist/hooks/useDiagram.js +119 -0
  97. package/dist/hooks/useDiagramActor.d.ts +5 -0
  98. package/dist/hooks/useDiagramActor.js +21 -0
  99. package/dist/hooks/useDiagramContext.d.ts +3 -0
  100. package/dist/hooks/useDiagramContext.js +10 -0
  101. package/dist/hooks/useMantinePortalProps.js +2 -2
  102. package/dist/hooks/useXYFlow.d.ts +195 -37
  103. package/dist/hooks/useXYFlow.js +4 -6
  104. package/dist/index.d.ts +3 -2
  105. package/dist/index.js +5 -6
  106. package/dist/likec4diagram/DiagramActor.d.ts +7 -0
  107. package/dist/likec4diagram/DiagramActor.js +71 -0
  108. package/dist/likec4diagram/DiagramUI.d.ts +2 -0
  109. package/dist/likec4diagram/DiagramUI.js +22 -0
  110. package/dist/likec4diagram/XYFlow.d.ts +6 -0
  111. package/dist/likec4diagram/XYFlow.js +122 -0
  112. package/dist/likec4diagram/custom/edges/NotePopover.css.d.ts +2 -0
  113. package/dist/likec4diagram/custom/edges/NotePopover.css.js +7 -0
  114. package/dist/likec4diagram/custom/edges/NotePopover.d.ts +4 -0
  115. package/dist/likec4diagram/custom/edges/NotePopover.js +101 -0
  116. package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts +55 -0
  117. package/dist/likec4diagram/custom/edges/RelationshipEdge.js +307 -0
  118. package/dist/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.css.js +4 -4
  119. package/dist/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.d.ts +5 -5
  120. package/dist/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.js +51 -53
  121. package/dist/likec4diagram/custom/edges/edges.css.d.ts +2 -0
  122. package/dist/likec4diagram/custom/edges/edges.css.js +7 -0
  123. package/dist/likec4diagram/custom/edges/utils.d.ts +22 -0
  124. package/dist/likec4diagram/custom/edges/utils.js +24 -0
  125. package/dist/likec4diagram/custom/index.d.ts +57 -0
  126. package/dist/likec4diagram/custom/index.js +7 -0
  127. package/dist/likec4diagram/custom/nodes/CompoundActions.d.ts +5 -0
  128. package/dist/likec4diagram/custom/nodes/CompoundActions.js +25 -0
  129. package/dist/likec4diagram/custom/nodes/ElementActions.d.ts +7 -0
  130. package/dist/likec4diagram/custom/nodes/ElementActions.js +69 -0
  131. package/dist/likec4diagram/custom/nodes/nodeTypes.d.ts +10 -0
  132. package/dist/likec4diagram/custom/nodes/nodeTypes.js +94 -0
  133. package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.d.ts +21 -0
  134. package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js +159 -0
  135. package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.d.ts +7 -0
  136. package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.js +128 -0
  137. package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.d.ts +7 -0
  138. package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js +149 -0
  139. package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.d.ts +8 -0
  140. package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js +66 -0
  141. package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts +40 -0
  142. package/dist/likec4diagram/custom/nodes/toolbar/_shared.js +131 -0
  143. package/dist/likec4diagram/custom/nodes/toolbar/styles.css.d.ts +1 -0
  144. package/dist/likec4diagram/custom/nodes/toolbar/styles.css.js +5 -0
  145. package/dist/likec4diagram/state/actorContext.d.ts +50849 -0
  146. package/dist/likec4diagram/state/actorContext.js +12 -0
  147. package/dist/{state → likec4diagram/state}/aligners.d.ts +4 -1
  148. package/dist/{state → likec4diagram/state}/aligners.js +31 -5
  149. package/dist/likec4diagram/state/assign.d.ts +18 -0
  150. package/dist/likec4diagram/state/assign.js +343 -0
  151. package/dist/likec4diagram/state/hotkeyActor.d.ts +5 -0
  152. package/dist/likec4diagram/state/hotkeyActor.js +18 -0
  153. package/dist/likec4diagram/state/inspector.d.ts +5 -0
  154. package/dist/likec4diagram/state/machine.d.ts +10751 -0
  155. package/dist/likec4diagram/state/machine.js +783 -0
  156. package/dist/likec4diagram/state/syncManualLayoutActor.d.ts +113 -0
  157. package/dist/likec4diagram/state/syncManualLayoutActor.js +178 -0
  158. package/dist/likec4diagram/state/utils.d.ts +8 -0
  159. package/dist/likec4diagram/state/utils.js +48 -0
  160. package/dist/likec4diagram/types.d.ts +74 -0
  161. package/dist/{ui/top-left → likec4diagram/ui/controls}/ChangeAutoLayoutButton.js +11 -10
  162. package/dist/likec4diagram/ui/controls/Controls.d.ts +2 -0
  163. package/dist/likec4diagram/ui/controls/Controls.js +102 -0
  164. package/dist/likec4diagram/ui/controls/LayoutDriftNotification.d.ts +2 -0
  165. package/dist/likec4diagram/ui/controls/LayoutDriftNotification.js +43 -0
  166. package/dist/{ui/top-left → likec4diagram/ui/controls}/ManualLayoutToolsButton.js +11 -11
  167. package/dist/likec4diagram/ui/controls/NavigationButtons.d.ts +1 -0
  168. package/dist/likec4diagram/ui/controls/NavigationButtons.js +92 -0
  169. package/dist/{ui/top-left → likec4diagram/ui/controls}/_shared.js +2 -1
  170. package/dist/{ui/top-left → likec4diagram/ui/controls}/styles.css.d.ts +1 -1
  171. package/dist/likec4diagram/ui/controls/styles.css.js +17 -0
  172. package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.css.js +11 -0
  173. package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.d.ts +1 -0
  174. package/dist/{ui → likec4diagram/ui/diagram-title}/DiagramTitlePanel.js +3 -3
  175. package/dist/likec4diagram/ui/diagram-title/Link.d.ts +4 -0
  176. package/dist/likec4diagram/ui/index.d.ts +2 -0
  177. package/dist/likec4diagram/ui/notation/NotationPanel.css.js +13 -0
  178. package/dist/likec4diagram/ui/notation/NotationPanel.d.ts +2 -0
  179. package/dist/{ui → likec4diagram/ui}/notation/NotationPanel.js +23 -31
  180. package/dist/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.css.js +4 -4
  181. package/dist/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.js +19 -44
  182. package/dist/{xyflow → likec4diagram}/useLayoutConstraints.d.ts +11 -6
  183. package/dist/{xyflow → likec4diagram}/useLayoutConstraints.js +17 -12
  184. package/dist/likec4diagram/useViewToNodesEdges.d.ts +11 -0
  185. package/dist/likec4diagram/useViewToNodesEdges.js +245 -0
  186. package/dist/likec4model/index.d.ts +1 -1
  187. package/dist/likec4model/useLikeC4Model.d.ts +1 -11
  188. package/dist/likec4model/useLikeC4Model.js +1 -39
  189. package/dist/overlays/Overlays.js +61 -105
  190. package/dist/overlays/element-details/ElementDetailsCard.js +111 -116
  191. package/dist/overlays/element-details/TabPanelDeployments.js +4 -7
  192. package/dist/overlays/element-details/TabPanelRelationships.css.js +0 -2
  193. package/dist/overlays/element-details/TabPanelRelationships.d.ts +1 -1
  194. package/dist/overlays/element-details/TabPanelRelationships.js +35 -64
  195. package/dist/overlays/element-details/TabPanelStructure.d.ts +2 -2
  196. package/dist/overlays/element-details/TabPanelStructure.js +1 -1
  197. package/dist/overlays/overlay/Overlay.css.d.ts +2 -0
  198. package/dist/overlays/overlay/Overlay.css.js +93 -0
  199. package/dist/overlays/overlay/Overlay.d.ts +8 -0
  200. package/dist/overlays/overlay/Overlay.js +86 -0
  201. package/dist/overlays/relationship-details/RelationshipDetails.d.ts +5 -0
  202. package/dist/overlays/relationship-details/RelationshipDetails.js +189 -0
  203. package/dist/overlays/{edge-details → relationship-details}/SelectEdge.css.d.ts +1 -0
  204. package/dist/overlays/relationship-details/SelectEdge.css.js +17 -0
  205. package/dist/overlays/{edge-details → relationship-details}/SelectEdge.d.ts +1 -1
  206. package/dist/overlays/{edge-details → relationship-details}/SelectEdge.js +8 -8
  207. package/dist/overlays/relationship-details/_types.d.ts +36 -0
  208. package/dist/overlays/relationship-details/actor.d.ts +41 -0
  209. package/dist/overlays/relationship-details/actor.js +113 -0
  210. package/dist/overlays/relationship-details/custom/ElementActions.d.ts +5 -0
  211. package/dist/overlays/relationship-details/custom/ElementActions.js +33 -0
  212. package/dist/overlays/relationship-details/custom/edgeTypes.d.ts +49 -0
  213. package/dist/overlays/relationship-details/custom/edgeTypes.js +51 -0
  214. package/dist/overlays/relationship-details/custom/index.d.ts +2 -0
  215. package/dist/overlays/relationship-details/custom/nodeTypes.d.ts +39 -0
  216. package/dist/overlays/relationship-details/custom/nodeTypes.js +89 -0
  217. package/dist/overlays/relationship-details/custom/styles.css.d.ts +1 -0
  218. package/dist/overlays/relationship-details/hooks.d.ts +59 -0
  219. package/dist/overlays/relationship-details/hooks.js +46 -0
  220. package/dist/overlays/{edge-details/use-layouted-edge-details.d.ts → relationship-details/useLayoutedDetails.d.ts} +4 -6
  221. package/dist/overlays/{edge-details/use-layouted-edge-details.js → relationship-details/useLayoutedDetails.js} +68 -64
  222. package/dist/overlays/relationships-browser/-useRelationshipsView.d.ts +39 -0
  223. package/dist/overlays/relationships-browser/-useRelationshipsView.js +488 -0
  224. package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts +5 -0
  225. package/dist/overlays/relationships-browser/RelationshipsBrowser.js +209 -0
  226. package/dist/overlays/{relationships-of → relationships-browser}/SelectElement.css.d.ts +1 -0
  227. package/dist/overlays/relationships-browser/SelectElement.css.js +9 -0
  228. package/dist/overlays/relationships-browser/SelectElement.d.ts +7 -0
  229. package/dist/overlays/{relationships-of → relationships-browser}/SelectElement.js +11 -8
  230. package/dist/overlays/relationships-browser/_types.d.ts +40 -0
  231. package/dist/overlays/relationships-browser/actor.d.ts +66 -0
  232. package/dist/overlays/relationships-browser/actor.js +159 -0
  233. package/dist/overlays/relationships-browser/custom/ElementActions.d.ts +5 -0
  234. package/dist/overlays/relationships-browser/custom/ElementActions.js +43 -0
  235. package/dist/overlays/relationships-browser/custom/EmptyNode.d.ts +5 -0
  236. package/dist/overlays/{relationships-of/xyflow → relationships-browser/custom}/EmptyNode.js +1 -3
  237. package/dist/overlays/relationships-browser/custom/edgeTypes.d.ts +46 -0
  238. package/dist/overlays/relationships-browser/custom/edgeTypes.js +51 -0
  239. package/dist/overlays/relationships-browser/custom/index.d.ts +2 -0
  240. package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts +45 -0
  241. package/dist/overlays/relationships-browser/custom/nodeTypes.js +93 -0
  242. package/dist/overlays/relationships-browser/custom/styles.css.d.ts +1 -0
  243. package/dist/overlays/relationships-browser/custom/styles.css.js +5 -0
  244. package/dist/overlays/relationships-browser/hooks.d.ts +62 -0
  245. package/dist/overlays/relationships-browser/hooks.js +46 -0
  246. package/dist/overlays/relationships-browser/useViewToNodesEdges.d.ts +10 -0
  247. package/dist/overlays/relationships-browser/useViewToNodesEdges.js +160 -0
  248. package/dist/style.css +1 -1
  249. package/dist/utils/index.d.ts +4 -0
  250. package/dist/{xyflow/utils.d.ts → utils/xyflow.d.ts} +4 -4
  251. package/dist/{xyflow/utils.js → utils/xyflow.js} +14 -20
  252. package/package.json +23 -20
  253. package/src/LikeC4Diagram.css.ts +21 -15
  254. package/src/LikeC4Diagram.props.ts +14 -21
  255. package/src/LikeC4Diagram.tsx +105 -150
  256. package/src/LikeC4Search.tsx +21 -28
  257. package/src/StaticLikeC4Diagram.tsx +0 -1
  258. package/src/{xyflow/XYFlowBackground.tsx → base/Background.tsx} +8 -8
  259. package/src/base/BaseXYFlow.tsx +200 -0
  260. package/src/{xyflow → base}/const.ts +1 -1
  261. package/src/base/example/RelationshipsBrowser.tsx +62 -0
  262. package/src/base/example/_types.ts +71 -0
  263. package/src/base/example/custom.tsx +58 -0
  264. package/src/base/example/useViewToNodesEdges.ts +193 -0
  265. package/src/base/index.ts +10 -0
  266. package/src/base/primitives/NodeHandles.tsx +18 -0
  267. package/src/base/primitives/compound/CompoundActionButton.css.ts +55 -0
  268. package/src/base/primitives/compound/CompoundActionButton.tsx +52 -0
  269. package/src/base/primitives/compound/CompoundDetailsButton.css.ts +56 -0
  270. package/src/base/primitives/compound/CompoundDetailsButton.tsx +54 -0
  271. package/src/base/primitives/compound/CompoundNodeContainer.css.ts +161 -0
  272. package/src/base/primitives/compound/CompoundNodeContainer.tsx +95 -0
  273. package/src/base/primitives/compound/CompoundTitle.css.ts +43 -0
  274. package/src/base/primitives/compound/CompoundTitle.tsx +29 -0
  275. package/src/base/primitives/customEdge.ts +32 -0
  276. package/src/base/primitives/customNode.ts +21 -0
  277. package/src/base/primitives/edge/EdgeActionButton.tsx +27 -0
  278. package/src/base/primitives/edge/EdgeContainer.tsx +48 -0
  279. package/src/base/primitives/edge/EdgeLabel.css.ts +196 -0
  280. package/src/base/primitives/edge/EdgeLabel.tsx +136 -0
  281. package/src/{xyflow → base/primitives/edge}/EdgeMarkers.tsx +29 -1
  282. package/src/base/primitives/edge/EdgePath.tsx +89 -0
  283. package/src/base/primitives/edge/edge.css.ts +122 -0
  284. package/src/base/primitives/element/ElementActionButtons.css.ts +48 -0
  285. package/src/base/primitives/element/ElementActionButtons.tsx +73 -0
  286. package/src/base/primitives/element/ElementDetailsButton.css.ts +54 -0
  287. package/src/base/primitives/element/ElementDetailsButton.tsx +59 -0
  288. package/src/base/primitives/element/ElementNodeContainer.css.ts +47 -0
  289. package/src/base/primitives/element/ElementNodeContainer.tsx +72 -0
  290. package/src/base/primitives/element/ElementShape.css.ts +134 -0
  291. package/src/{xyflow/nodes/element/ElementShapeSvg.tsx → base/primitives/element/ElementShape.tsx} +64 -19
  292. package/src/base/primitives/element/ElementTitle.css.ts +156 -0
  293. package/src/base/primitives/element/ElementTitle.tsx +76 -0
  294. package/src/base/primitives/index.ts +17 -0
  295. package/src/base/types.ts +169 -0
  296. package/src/base/updateEdges.ts +40 -0
  297. package/src/base/updateNodes.ts +46 -0
  298. package/src/base/xyflowMachine.ts +75 -0
  299. package/src/context/DiagramEventHandlers.tsx +53 -0
  300. package/src/context/DiagramFeatures.tsx +162 -0
  301. package/src/{ui → context}/FramerMotionConfig.tsx +2 -6
  302. package/src/context/IconRenderer.tsx +45 -0
  303. package/src/context/RootContainer.tsx +31 -0
  304. package/src/context/index.ts +14 -0
  305. package/src/globals.css.ts +32 -32
  306. package/src/hooks/index.ts +7 -5
  307. package/src/hooks/useCurrentViewId.ts +8 -0
  308. package/src/hooks/useDiagram.ts +129 -0
  309. package/src/hooks/useDiagramActor.ts +25 -0
  310. package/src/hooks/useDiagramContext.ts +11 -0
  311. package/src/hooks/useMantinePortalProps.ts +2 -2
  312. package/src/hooks/useXYFlow.ts +12 -38
  313. package/src/index.ts +3 -7
  314. package/src/likec4diagram/DiagramActor.tsx +79 -0
  315. package/src/likec4diagram/DiagramUI.tsx +28 -0
  316. package/src/likec4diagram/XYFlow.tsx +137 -0
  317. package/src/likec4diagram/custom/edges/NotePopover.css.ts +27 -0
  318. package/src/likec4diagram/custom/edges/NotePopover.tsx +96 -0
  319. package/src/likec4diagram/custom/edges/RelationshipEdge.tsx +355 -0
  320. package/src/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.css.ts +7 -7
  321. package/src/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.tsx +91 -70
  322. package/src/likec4diagram/custom/edges/edges.css.ts +39 -0
  323. package/src/likec4diagram/custom/edges/utils.ts +125 -0
  324. package/src/likec4diagram/custom/index.tsx +8 -0
  325. package/src/likec4diagram/custom/nodes/CompoundActions.tsx +27 -0
  326. package/src/likec4diagram/custom/nodes/ElementActions.tsx +74 -0
  327. package/src/likec4diagram/custom/nodes/nodeTypes.tsx +107 -0
  328. package/src/likec4diagram/custom/nodes/toolbar/ColorButton.tsx +175 -0
  329. package/src/likec4diagram/custom/nodes/toolbar/CompoundToolbar.tsx +122 -0
  330. package/src/likec4diagram/custom/nodes/toolbar/ElementToolbar.tsx +140 -0
  331. package/src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx +77 -0
  332. package/src/likec4diagram/custom/nodes/toolbar/_shared.tsx +143 -0
  333. package/src/likec4diagram/custom/nodes/toolbar/styles.css.ts +9 -0
  334. package/src/likec4diagram/state/actorContext.ts +8 -0
  335. package/src/{state → likec4diagram/state}/aligners.ts +67 -40
  336. package/src/likec4diagram/state/assign.ts +384 -0
  337. package/src/likec4diagram/state/hotkeyActor.ts +20 -0
  338. package/src/likec4diagram/state/inspector.ts +23 -0
  339. package/src/likec4diagram/state/machine.ts +946 -0
  340. package/src/likec4diagram/state/syncManualLayoutActor.ts +219 -0
  341. package/src/likec4diagram/state/utils.ts +52 -0
  342. package/src/likec4diagram/types.ts +144 -0
  343. package/src/{ui/top-left → likec4diagram/ui/controls}/ChangeAutoLayoutButton.tsx +32 -28
  344. package/src/likec4diagram/ui/controls/Controls.tsx +107 -0
  345. package/src/likec4diagram/ui/controls/LayoutDriftNotification.tsx +46 -0
  346. package/src/{ui/top-left → likec4diagram/ui/controls}/ManualLayoutToolsButton.tsx +16 -16
  347. package/src/likec4diagram/ui/controls/NavigationButtons.tsx +83 -0
  348. package/src/{ui/top-left → likec4diagram/ui/controls}/_shared.ts +4 -3
  349. package/src/{ui/top-left → likec4diagram/ui/controls}/styles.css.ts +17 -17
  350. package/src/{ui → likec4diagram/ui/diagram-title}/DiagramTitlePanel.css.ts +11 -11
  351. package/src/{ui → likec4diagram/ui/diagram-title}/DiagramTitlePanel.tsx +6 -5
  352. package/src/likec4diagram/ui/diagram-title/Link.tsx +40 -0
  353. package/src/likec4diagram/ui/index.ts +2 -0
  354. package/src/{ui → likec4diagram/ui}/notation/NotationPanel.css.ts +18 -18
  355. package/src/{ui → likec4diagram/ui}/notation/NotationPanel.tsx +44 -44
  356. package/src/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.css.ts +16 -16
  357. package/src/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.tsx +29 -49
  358. package/src/{xyflow → likec4diagram}/useLayoutConstraints.ts +54 -43
  359. package/src/likec4diagram/useViewToNodesEdges.ts +297 -0
  360. package/src/likec4model/index.ts +0 -6
  361. package/src/likec4model/useLikeC4Model.ts +1 -43
  362. package/src/overlays/Overlays.tsx +201 -147
  363. package/src/overlays/element-details/ElementDetailsCard.css.ts +58 -58
  364. package/src/overlays/element-details/ElementDetailsCard.tsx +143 -128
  365. package/src/overlays/element-details/TabPanelDeployments.css.ts +14 -14
  366. package/src/overlays/element-details/TabPanelDeployments.tsx +22 -22
  367. package/src/overlays/element-details/TabPanelRelationships.css.ts +19 -19
  368. package/src/overlays/element-details/TabPanelRelationships.tsx +45 -28
  369. package/src/overlays/element-details/TabPanelStructure.css.ts +7 -7
  370. package/src/overlays/element-details/TabPanelStructure.tsx +11 -11
  371. package/src/overlays/overlay/Overlay.css.ts +73 -0
  372. package/src/overlays/overlay/Overlay.tsx +99 -0
  373. package/src/overlays/relationship-details/RelationshipDetails.tsx +234 -0
  374. package/src/overlays/{edge-details → relationship-details}/SelectEdge.css.ts +20 -13
  375. package/src/overlays/{edge-details → relationship-details}/SelectEdge.tsx +14 -14
  376. package/src/overlays/relationship-details/_types.ts +73 -0
  377. package/src/overlays/relationship-details/actor.ts +162 -0
  378. package/src/overlays/relationship-details/custom/ElementActions.tsx +45 -0
  379. package/src/overlays/relationship-details/custom/edgeTypes.tsx +49 -0
  380. package/src/overlays/relationship-details/custom/index.tsx +2 -0
  381. package/src/overlays/relationship-details/custom/nodeTypes.tsx +108 -0
  382. package/src/overlays/relationship-details/custom/styles.css.ts +13 -0
  383. package/src/overlays/relationship-details/hooks.ts +48 -0
  384. package/src/overlays/{edge-details/use-layouted-edge-details.ts → relationship-details/useLayoutedDetails.ts} +128 -114
  385. package/src/overlays/relationships-browser/-useRelationshipsView.ts +642 -0
  386. package/src/overlays/relationships-browser/RelationshipsBrowser.tsx +247 -0
  387. package/src/overlays/{relationships-of → relationships-browser}/SelectElement.css.ts +12 -5
  388. package/src/overlays/{relationships-of → relationships-browser}/SelectElement.tsx +19 -18
  389. package/src/overlays/relationships-browser/_types.ts +89 -0
  390. package/src/overlays/relationships-browser/actor.ts +224 -0
  391. package/src/overlays/relationships-browser/custom/ElementActions.tsx +44 -0
  392. package/src/overlays/relationships-browser/custom/EmptyNode.tsx +18 -0
  393. package/src/overlays/relationships-browser/custom/edgeTypes.tsx +49 -0
  394. package/src/overlays/relationships-browser/custom/index.tsx +2 -0
  395. package/src/overlays/relationships-browser/custom/nodeTypes.tsx +109 -0
  396. package/src/overlays/relationships-browser/custom/styles.css.ts +13 -0
  397. package/src/overlays/relationships-browser/hooks.ts +48 -0
  398. package/src/overlays/relationships-browser/useViewToNodesEdges.ts +209 -0
  399. package/src/utils/index.ts +15 -0
  400. package/src/{xyflow/utils.ts → utils/xyflow.ts} +22 -8
  401. package/dist/_virtual/_commonjsHelpers.js +0 -6
  402. package/dist/controls/Text.d.ts +0 -2
  403. package/dist/controls/Text.js +0 -7
  404. package/dist/controls/action-button-bar/ActionButtonBar.css.d.ts +0 -1
  405. package/dist/controls/action-button-bar/ActionButtonBar.css.js +0 -5
  406. package/dist/controls/action-button-bar/ActionButtonBar.d.ts +0 -9
  407. package/dist/controls/action-button-bar/ActionButtonBar.js +0 -100
  408. package/dist/controls/action-button-bar/useActionButtonBarCtx.d.ts +0 -10
  409. package/dist/controls/action-button-bar/useActionButtonBarCtx.js +0 -9
  410. package/dist/controls/action-buttons/ActionButton.css.d.ts +0 -1
  411. package/dist/controls/action-buttons/ActionButton.css.js +0 -5
  412. package/dist/controls/action-buttons/ActionButton.d.ts +0 -9
  413. package/dist/controls/action-buttons/ActionButton.js +0 -66
  414. package/dist/controls/action-buttons/ActionButtons.d.ts +0 -12
  415. package/dist/controls/action-buttons/ActionButtons.js +0 -99
  416. package/dist/hooks/useDiagramState.d.ts +0 -6
  417. package/dist/hooks/useDiagramState.js +0 -27
  418. package/dist/overlays/OverlayContext.d.ts +0 -10
  419. package/dist/overlays/OverlayContext.js +0 -9
  420. package/dist/overlays/Overlays.css.d.ts +0 -3
  421. package/dist/overlays/Overlays.css.js +0 -7
  422. package/dist/overlays/edge-details/EdgeDetailsXYFlow.d.ts +0 -5
  423. package/dist/overlays/edge-details/EdgeDetailsXYFlow.js +0 -185
  424. package/dist/overlays/edge-details/SelectEdge.css.js +0 -17
  425. package/dist/overlays/edge-details/_types.d.ts +0 -14
  426. package/dist/overlays/edge-details/xyflow/CompoundNode.d.ts +0 -5
  427. package/dist/overlays/edge-details/xyflow/CompoundNode.js +0 -76
  428. package/dist/overlays/edge-details/xyflow/ElementNode.d.ts +0 -5
  429. package/dist/overlays/edge-details/xyflow/ElementNode.js +0 -159
  430. package/dist/overlays/edge-details/xyflow/RelationshipEdge.d.ts +0 -3
  431. package/dist/overlays/edge-details/xyflow/RelationshipEdge.js +0 -84
  432. package/dist/overlays/edge-details/xyflow/styles.css.d.ts +0 -9
  433. package/dist/overlays/edge-details/xyflow/styles.css.js +0 -21
  434. package/dist/overlays/index.d.ts +0 -1
  435. package/dist/overlays/relationships-of/RelationshipsOverlay.d.ts +0 -5
  436. package/dist/overlays/relationships-of/RelationshipsOverlay.js +0 -193
  437. package/dist/overlays/relationships-of/RelationshipsXYFlow.d.ts +0 -19
  438. package/dist/overlays/relationships-of/RelationshipsXYFlow.js +0 -290
  439. package/dist/overlays/relationships-of/SelectElement.css.js +0 -7
  440. package/dist/overlays/relationships-of/SelectElement.d.ts +0 -7
  441. package/dist/overlays/relationships-of/_types.d.ts +0 -28
  442. package/dist/overlays/relationships-of/use-layouted-relationships.d.ts +0 -22
  443. package/dist/overlays/relationships-of/use-layouted-relationships.js +0 -496
  444. package/dist/overlays/relationships-of/xyflow/CompoundNode.d.ts +0 -6
  445. package/dist/overlays/relationships-of/xyflow/CompoundNode.js +0 -120
  446. package/dist/overlays/relationships-of/xyflow/ElementNode.d.ts +0 -6
  447. package/dist/overlays/relationships-of/xyflow/ElementNode.js +0 -194
  448. package/dist/overlays/relationships-of/xyflow/EmptyNode.d.ts +0 -5
  449. package/dist/overlays/relationships-of/xyflow/RelationshipEdge.d.ts +0 -3
  450. package/dist/overlays/relationships-of/xyflow/RelationshipEdge.js +0 -123
  451. package/dist/overlays/relationships-of/xyflow/styles.css.d.ts +0 -14
  452. package/dist/overlays/relationships-of/xyflow/styles.css.js +0 -24
  453. package/dist/overlays/shared/xyflow/RelationshipEdge.css.d.ts +0 -4
  454. package/dist/overlays/shared/xyflow/RelationshipEdge.css.js +0 -12
  455. package/dist/overlays/shared/xyflow/_types.d.ts +0 -77
  456. package/dist/state/DiagramContext.d.ts +0 -1609
  457. package/dist/state/DiagramContext.js +0 -101
  458. package/dist/state/diagram-to-xyflow.d.ts +0 -11
  459. package/dist/state/diagram-to-xyflow.js +0 -113
  460. package/dist/state/diagramStore.d.ts +0 -1705
  461. package/dist/state/diagramStore.js +0 -808
  462. package/dist/state/diagramStore.layout.d.ts +0 -4
  463. package/dist/state/diagramStore.layout.js +0 -56
  464. package/dist/ui/DiagramTitlePanel.css.js +0 -11
  465. package/dist/ui/DiagramTitlePanel.d.ts +0 -1
  466. package/dist/ui/notation/NotationPanel.css.js +0 -16
  467. package/dist/ui/notation/NotationPanel.d.ts +0 -1
  468. package/dist/ui/top-left/TopLeftPanel.d.ts +0 -4
  469. package/dist/ui/top-left/TopLeftPanel.js +0 -211
  470. package/dist/ui/top-left/styles.css.js +0 -17
  471. package/dist/xyflow/FitviewOnDiagramChange.d.ts +0 -4
  472. package/dist/xyflow/FitviewOnDiagramChange.js +0 -72
  473. package/dist/xyflow/SelectEdgesOnNodeFocus.d.ts +0 -1
  474. package/dist/xyflow/SelectEdgesOnNodeFocus.js +0 -96
  475. package/dist/xyflow/XYFlow.d.ts +0 -8
  476. package/dist/xyflow/XYFlow.js +0 -145
  477. package/dist/xyflow/XYFlowBackground.d.ts +0 -10
  478. package/dist/xyflow/XYFlowInner.d.ts +0 -8
  479. package/dist/xyflow/XYFlowInner.js +0 -41
  480. package/dist/xyflow/edges/EdgeLabel.d.ts +0 -7
  481. package/dist/xyflow/edges/EdgeLabel.js +0 -160
  482. package/dist/xyflow/edges/RelationshipEdge.d.ts +0 -6
  483. package/dist/xyflow/edges/RelationshipEdge.js +0 -443
  484. package/dist/xyflow/edges/edges.css.js +0 -37
  485. package/dist/xyflow/edges/utils.d.ts +0 -16
  486. package/dist/xyflow/edges/utils.js +0 -24
  487. package/dist/xyflow/nodes/AnimateVariants.d.ts +0 -1313
  488. package/dist/xyflow/nodes/AnimateVariants.js +0 -123
  489. package/dist/xyflow/nodes/Node.css.d.ts +0 -3
  490. package/dist/xyflow/nodes/Node.css.js +0 -9
  491. package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts +0 -14
  492. package/dist/xyflow/nodes/compound/CompoundNode.css.js +0 -27
  493. package/dist/xyflow/nodes/compound/CompoundNode.d.ts +0 -6
  494. package/dist/xyflow/nodes/compound/CompoundNode.js +0 -216
  495. package/dist/xyflow/nodes/compound/index.d.ts +0 -1
  496. package/dist/xyflow/nodes/element/ElementLink.css.d.ts +0 -3
  497. package/dist/xyflow/nodes/element/ElementLink.d.ts +0 -6
  498. package/dist/xyflow/nodes/element/ElementNode.d.ts +0 -6
  499. package/dist/xyflow/nodes/element/ElementNode.js +0 -190
  500. package/dist/xyflow/nodes/element/ElementShapeSvg.d.ts +0 -17
  501. package/dist/xyflow/nodes/element/element.css.d.ts +0 -18
  502. package/dist/xyflow/nodes/element/element.css.js +0 -31
  503. package/dist/xyflow/nodes/element/index.d.ts +0 -1
  504. package/dist/xyflow/nodes/shared/ElementIcon.d.ts +0 -8
  505. package/dist/xyflow/nodes/shared/Toolbar.d.ts +0 -9
  506. package/dist/xyflow/nodes/shared/Toolbar.js +0 -436
  507. package/dist/xyflow/types.d.ts +0 -36
  508. package/dist/xyflow/useXYFlowEvents.d.ts +0 -160
  509. package/dist/xyflow/useXYFlowEvents.js +0 -275
  510. package/src/controls/Text.ts +0 -5
  511. package/src/controls/action-button-bar/ActionButtonBar.css.ts +0 -13
  512. package/src/controls/action-button-bar/ActionButtonBar.tsx +0 -138
  513. package/src/controls/action-button-bar/useActionButtonBarCtx.ts +0 -13
  514. package/src/controls/action-buttons/ActionButton.css.ts +0 -29
  515. package/src/controls/action-buttons/ActionButton.tsx +0 -66
  516. package/src/controls/action-buttons/ActionButtons.tsx +0 -138
  517. package/src/hooks/useDiagramState.ts +0 -36
  518. package/src/overlays/OverlayContext.tsx +0 -11
  519. package/src/overlays/Overlays.css.ts +0 -136
  520. package/src/overlays/edge-details/EdgeDetailsXYFlow.tsx +0 -255
  521. package/src/overlays/edge-details/_types.ts +0 -18
  522. package/src/overlays/edge-details/xyflow/CompoundNode.tsx +0 -72
  523. package/src/overlays/edge-details/xyflow/ElementNode.tsx +0 -152
  524. package/src/overlays/edge-details/xyflow/RelationshipEdge.tsx +0 -85
  525. package/src/overlays/edge-details/xyflow/styles.css.ts +0 -144
  526. package/src/overlays/index.tsx +0 -1
  527. package/src/overlays/relationships-of/RelationshipsOverlay.tsx +0 -185
  528. package/src/overlays/relationships-of/RelationshipsXYFlow.tsx +0 -378
  529. package/src/overlays/relationships-of/_types.ts +0 -40
  530. package/src/overlays/relationships-of/use-layouted-relationships.ts +0 -699
  531. package/src/overlays/relationships-of/xyflow/CompoundNode.tsx +0 -124
  532. package/src/overlays/relationships-of/xyflow/ElementNode.tsx +0 -194
  533. package/src/overlays/relationships-of/xyflow/EmptyNode.tsx +0 -19
  534. package/src/overlays/relationships-of/xyflow/RelationshipEdge.tsx +0 -127
  535. package/src/overlays/relationships-of/xyflow/styles.css.ts +0 -214
  536. package/src/overlays/shared/xyflow/RelationshipEdge.css.ts +0 -60
  537. package/src/overlays/shared/xyflow/_types.ts +0 -87
  538. package/src/state/DiagramContext.tsx +0 -107
  539. package/src/state/diagram-to-xyflow.ts +0 -150
  540. package/src/state/diagramStore.layout.ts +0 -66
  541. package/src/state/diagramStore.ts +0 -1099
  542. package/src/ui/top-left/TopLeftPanel.tsx +0 -220
  543. package/src/xyflow/FitviewOnDiagramChange.tsx +0 -83
  544. package/src/xyflow/SelectEdgesOnNodeFocus.tsx +0 -106
  545. package/src/xyflow/XYFlow.tsx +0 -179
  546. package/src/xyflow/XYFlowInner.tsx +0 -48
  547. package/src/xyflow/edges/EdgeLabel.tsx +0 -193
  548. package/src/xyflow/edges/RelationshipEdge.tsx +0 -547
  549. package/src/xyflow/edges/edges.css.ts +0 -288
  550. package/src/xyflow/edges/utils.ts +0 -153
  551. package/src/xyflow/nodes/AnimateVariants.ts +0 -143
  552. package/src/xyflow/nodes/Node.css.ts +0 -44
  553. package/src/xyflow/nodes/compound/CompoundNode.css.ts +0 -258
  554. package/src/xyflow/nodes/compound/CompoundNode.tsx +0 -227
  555. package/src/xyflow/nodes/compound/index.ts +0 -1
  556. package/src/xyflow/nodes/element/ElementLink.css.ts +0 -67
  557. package/src/xyflow/nodes/element/ElementLink.tsx +0 -97
  558. package/src/xyflow/nodes/element/ElementNode.tsx +0 -209
  559. package/src/xyflow/nodes/element/element.css.ts +0 -369
  560. package/src/xyflow/nodes/element/index.ts +0 -1
  561. package/src/xyflow/nodes/shared/ElementIcon.tsx +0 -43
  562. package/src/xyflow/nodes/shared/Toolbar.tsx +0 -496
  563. package/src/xyflow/types.ts +0 -57
  564. package/src/xyflow/useXYFlowEvents.ts +0 -315
  565. /package/dist/{xyflow → base}/const.d.ts +0 -0
  566. /package/dist/{xyflow → base}/const.js +0 -0
  567. /package/dist/{ui → context}/EnsureMantine.d.ts +0 -0
  568. /package/dist/{ui → context}/EnsureMantine.js +0 -0
  569. /package/dist/{ui → context}/FramerMotionConfig.d.ts +0 -0
  570. /package/dist/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.css.d.ts +0 -0
  571. /package/dist/{ui/top-left → likec4diagram/ui/controls}/ChangeAutoLayoutButton.d.ts +0 -0
  572. /package/dist/{ui/top-left → likec4diagram/ui/controls}/ManualLayoutToolsButton.d.ts +0 -0
  573. /package/dist/{ui/top-left → likec4diagram/ui/controls}/_shared.d.ts +0 -0
  574. /package/dist/{ui → likec4diagram/ui/diagram-title}/DiagramTitlePanel.css.d.ts +0 -0
  575. /package/dist/{ui → likec4diagram/ui/diagram-title}/Link.js +0 -0
  576. /package/dist/{ui → likec4diagram/ui}/notation/NotationPanel.css.d.ts +0 -0
  577. /package/dist/{ui → likec4diagram/ui}/notation/index.d.ts +0 -0
  578. /package/dist/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.css.d.ts +0 -0
  579. /package/dist/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.d.ts +0 -0
  580. /package/src/{ui → context}/EnsureMantine.tsx +0 -0
  581. /package/src/{ui → likec4diagram/ui}/notation/index.ts +0 -0
@@ -1,1609 +0,0 @@
1
- import { PropsWithChildren, Context, MouseEvent, ReactNode, CSSProperties } from 'react';
2
- import { DiagramInitialState, DiagramState } from './diagramStore';
3
- import { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
4
- import { StoreApi } from 'zustand/vanilla';
5
- import { DiagramView, WhereOperator, ViewId, Fqn, EdgeId, StepEdgeId, NodeId, DiagramNode, ElementNotation } from '@likec4/core';
6
- import { ElementIconRenderer, OnChange, OnNavigateTo, OnNodeClick, OnCanvasClick, OnEdgeClick, OpenSourceParams } from '..';
7
- import { XYStoreApi } from '../hooks';
8
- import { RequireExactlyOne } from 'type-fest';
9
- import { OnNodesChange, OnEdgesChange } from '@xyflow/react';
10
- import { AlignmentMode } from './diagramStore.layout';
11
- import { EdgeMarkerType, HandleType } from '@xyflow/system';
12
- export declare const DiagramContext: Context< UseBoundStoreWithEqualityFn<Omit<Omit< StoreApi<{
13
- view: DiagramView;
14
- readonly: boolean;
15
- hasLikeC4Model: boolean;
16
- controls: boolean;
17
- showNavigationButtons: boolean;
18
- showNotations: boolean;
19
- fitViewEnabled: boolean;
20
- fitViewPadding: number;
21
- zoomable: boolean;
22
- pannable: boolean;
23
- nodesDraggable: boolean;
24
- nodesSelectable: boolean;
25
- experimentalEdgeEditing: boolean;
26
- enableFocusMode: boolean;
27
- enableElementDetails: boolean;
28
- enableRelationshipBrowser: boolean;
29
- enableRelationshipDetails: boolean;
30
- enableSearch: boolean;
31
- renderIcon: ElementIconRenderer | null;
32
- whereFilter: WhereOperator<string, string> | null;
33
- enableDynamicViewWalkthrough: boolean;
34
- xyflow: import("..").DiagramFlowTypes.XYFlowInstance;
35
- xystore: XYStoreApi;
36
- getContainer: () => HTMLDivElement | null;
37
- onChange: OnChange | null;
38
- onNavigateTo: OnNavigateTo<ViewId> | null;
39
- onNodeClick: OnNodeClick | null;
40
- onNodeContextMenu: OnNodeClick | null;
41
- onCanvasContextMenu: OnCanvasClick | null;
42
- onEdgeClick: OnEdgeClick | null;
43
- onEdgeContextMenu: OnEdgeClick | null;
44
- onCanvasClick: OnCanvasClick | null;
45
- onCanvasDblClick: OnCanvasClick | null;
46
- onBurgerMenuClick: (() => void) | null;
47
- onOpenSource: ((params: OpenSourceParams) => void) | null;
48
- readonly storeDevId: string;
49
- xynodes: import("..").DiagramFlowTypes.Node[];
50
- xyedges: import("..").DiagramFlowTypes.Edge[];
51
- viewSyncDebounceTimeout: number | null;
52
- viewportChanged: boolean;
53
- initialized: boolean;
54
- activeOverlay: null | RequireExactlyOne<{
55
- elementDetails: Fqn;
56
- relationshipsOf: Fqn;
57
- edgeDetails: EdgeId;
58
- }>;
59
- isEditable: () => boolean;
60
- isDynamicView: boolean;
61
- activeWalkthrough: null | {
62
- stepId: StepEdgeId;
63
- hasPrevious: boolean;
64
- hasNext: boolean;
65
- parallelPrefix: string | null;
66
- };
67
- lastClickedNodeId: string | null;
68
- lastClickedEdgeId: string | null;
69
- focusedNodeId: string | null;
70
- hoveredEdgeId: string | null;
71
- dimmed: ReadonlySet<string>;
72
- lastOnNavigate: null | {
73
- fromView: ViewId;
74
- toView: ViewId;
75
- fromNode: NodeId | null;
76
- };
77
- navigationHistory: Array<{
78
- viewId: ViewId;
79
- nodeId: NodeId | null;
80
- }>;
81
- navigationHistoryIndex: number;
82
- updateView: (view: DiagramView) => void;
83
- focusOnNode: (nodeId: string | false) => void;
84
- setHoveredEdge: (edgeId: string | null) => void;
85
- setLastClickedNode: (nodeId: string | null) => void;
86
- setLastClickedEdge: (edgeId: string | null) => void;
87
- resetFocusAndLastClicked: () => void;
88
- getElement: (id: Fqn) => DiagramNode | null;
89
- triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
90
- cancelSaveManualLayout: () => boolean;
91
- scheduleSaveManualLayout: () => void;
92
- triggerSaveManualLayout: () => void;
93
- triggerOnNavigateTo: (xynodeId: string, event: MouseEvent) => void;
94
- fitDiagram: (duration?: number) => void;
95
- goBack: () => void;
96
- goForward: () => void;
97
- nextDynamicStep: (increment?: number) => void;
98
- activateWalkthrough: (step: EdgeId | import("..").DiagramFlowTypes.Edge) => void;
99
- stopWalkthrough: () => void;
100
- openOverlay: (overlay: NonNullable< DiagramState["activeOverlay"]>) => void;
101
- closeOverlay: () => void;
102
- onInit: (xyflow: import("..").DiagramFlowTypes.XYFlowInstance) => void;
103
- onNodesChange: OnNodesChange<import("..").DiagramFlowTypes.Node>;
104
- onEdgesChange: OnEdgesChange<import("..").DiagramFlowTypes.Edge>;
105
- highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: string) => void;
106
- resetEdgeControlPoints: () => void;
107
- align: (mode: AlignmentMode) => void;
108
- onOpenSourceView: () => void;
109
- }>, "subscribe"> & {
110
- subscribe: {
111
- (listener: (selectedState: {
112
- view: DiagramView;
113
- readonly: boolean;
114
- hasLikeC4Model: boolean;
115
- controls: boolean;
116
- showNavigationButtons: boolean;
117
- showNotations: boolean;
118
- fitViewEnabled: boolean;
119
- fitViewPadding: number;
120
- zoomable: boolean;
121
- pannable: boolean;
122
- nodesDraggable: boolean;
123
- nodesSelectable: boolean;
124
- experimentalEdgeEditing: boolean;
125
- enableFocusMode: boolean;
126
- enableElementDetails: boolean;
127
- enableRelationshipBrowser: boolean;
128
- enableRelationshipDetails: boolean;
129
- enableSearch: boolean;
130
- renderIcon: ElementIconRenderer | null;
131
- whereFilter: WhereOperator<string, string> | null;
132
- enableDynamicViewWalkthrough: boolean;
133
- xyflow: import("..").DiagramFlowTypes.XYFlowInstance;
134
- xystore: XYStoreApi;
135
- getContainer: () => HTMLDivElement | null;
136
- onChange: OnChange | null;
137
- onNavigateTo: OnNavigateTo<ViewId> | null;
138
- onNodeClick: OnNodeClick | null;
139
- onNodeContextMenu: OnNodeClick | null;
140
- onCanvasContextMenu: OnCanvasClick | null;
141
- onEdgeClick: OnEdgeClick | null;
142
- onEdgeContextMenu: OnEdgeClick | null;
143
- onCanvasClick: OnCanvasClick | null;
144
- onCanvasDblClick: OnCanvasClick | null;
145
- onBurgerMenuClick: (() => void) | null;
146
- onOpenSource: ((params: OpenSourceParams) => void) | null;
147
- readonly storeDevId: string;
148
- xynodes: import("..").DiagramFlowTypes.Node[];
149
- xyedges: {
150
- id: string;
151
- type: "relationship";
152
- source: string;
153
- target: string;
154
- sourceHandle?: string | null;
155
- targetHandle?: string | null;
156
- animated?: boolean;
157
- hidden?: boolean;
158
- deletable?: boolean;
159
- selectable?: boolean;
160
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
161
- selected?: boolean;
162
- markerStart?: EdgeMarkerType;
163
- markerEnd?: EdgeMarkerType;
164
- zIndex?: number;
165
- ariaLabel?: string;
166
- interactionWidth?: number;
167
- label?: ReactNode;
168
- labelStyle?: CSSProperties;
169
- labelShowBg?: boolean;
170
- labelBgStyle?: CSSProperties;
171
- labelBgPadding?: [number, number];
172
- labelBgBorderRadius?: number;
173
- style?: CSSProperties;
174
- className?: string;
175
- reconnectable?: boolean | HandleType;
176
- focusable?: boolean;
177
- }[];
178
- viewSyncDebounceTimeout: number | null;
179
- viewportChanged: boolean;
180
- initialized: boolean;
181
- activeOverlay: null | RequireExactlyOne<{
182
- elementDetails: Fqn;
183
- relationshipsOf: Fqn;
184
- edgeDetails: EdgeId;
185
- }>;
186
- isEditable: () => boolean;
187
- isDynamicView: boolean;
188
- activeWalkthrough: null | {
189
- stepId: StepEdgeId;
190
- hasPrevious: boolean;
191
- hasNext: boolean;
192
- parallelPrefix: string | null;
193
- };
194
- lastClickedNodeId: string | null;
195
- lastClickedEdgeId: string | null;
196
- focusedNodeId: string | null;
197
- hoveredEdgeId: string | null;
198
- dimmed: ReadonlySet<string>;
199
- lastOnNavigate: null | {
200
- fromView: ViewId;
201
- toView: ViewId;
202
- fromNode: NodeId | null;
203
- };
204
- navigationHistory: Array<{
205
- viewId: ViewId;
206
- nodeId: NodeId | null;
207
- }>;
208
- navigationHistoryIndex: number;
209
- updateView: (view: DiagramView) => void;
210
- focusOnNode: (nodeId: string | false) => void;
211
- setHoveredEdge: (edgeId: string | null) => void;
212
- setLastClickedNode: (nodeId: string | null) => void;
213
- setLastClickedEdge: (edgeId: string | null) => void;
214
- resetFocusAndLastClicked: () => void;
215
- getElement: (id: Fqn) => DiagramNode | null;
216
- triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
217
- cancelSaveManualLayout: () => boolean;
218
- scheduleSaveManualLayout: () => void;
219
- triggerSaveManualLayout: () => void;
220
- triggerOnNavigateTo: (xynodeId: string, event: MouseEvent) => void;
221
- fitDiagram: (duration?: number) => void;
222
- goBack: () => void;
223
- goForward: () => void;
224
- nextDynamicStep: (increment?: number) => void;
225
- activateWalkthrough: (step: EdgeId | {
226
- id: string;
227
- type: "relationship";
228
- source: string;
229
- target: string;
230
- sourceHandle?: string | null;
231
- targetHandle?: string | null;
232
- animated?: boolean;
233
- hidden?: boolean;
234
- deletable?: boolean;
235
- selectable?: boolean;
236
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
237
- selected?: boolean;
238
- markerStart?: EdgeMarkerType;
239
- markerEnd?: EdgeMarkerType;
240
- zIndex?: number;
241
- ariaLabel?: string;
242
- interactionWidth?: number;
243
- label?: ReactNode;
244
- labelStyle?: CSSProperties;
245
- labelShowBg?: boolean;
246
- labelBgStyle?: CSSProperties;
247
- labelBgPadding?: [number, number];
248
- labelBgBorderRadius?: number;
249
- style?: CSSProperties;
250
- className?: string;
251
- reconnectable?: boolean | HandleType;
252
- focusable?: boolean;
253
- }) => void;
254
- stopWalkthrough: () => void;
255
- openOverlay: (overlay: NonNullable< RequireExactlyOne<{
256
- elementDetails: Fqn;
257
- relationshipsOf: Fqn;
258
- edgeDetails: EdgeId;
259
- }> | null>) => void;
260
- closeOverlay: () => void;
261
- onInit: (xyflow: import("..").DiagramFlowTypes.XYFlowInstance) => void;
262
- onNodesChange: OnNodesChange<import("..").DiagramFlowTypes.Node>;
263
- onEdgesChange: OnEdgesChange<{
264
- id: string;
265
- type: "relationship";
266
- source: string;
267
- target: string;
268
- sourceHandle?: string | null;
269
- targetHandle?: string | null;
270
- animated?: boolean;
271
- hidden?: boolean;
272
- deletable?: boolean;
273
- selectable?: boolean;
274
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
275
- selected?: boolean;
276
- markerStart?: EdgeMarkerType;
277
- markerEnd?: EdgeMarkerType;
278
- zIndex?: number;
279
- ariaLabel?: string;
280
- interactionWidth?: number;
281
- label?: ReactNode;
282
- labelStyle?: CSSProperties;
283
- labelShowBg?: boolean;
284
- labelBgStyle?: CSSProperties;
285
- labelBgPadding?: [number, number];
286
- labelBgBorderRadius?: number;
287
- style?: CSSProperties;
288
- className?: string;
289
- reconnectable?: boolean | HandleType;
290
- focusable?: boolean;
291
- }>;
292
- highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: string) => void;
293
- resetEdgeControlPoints: () => void;
294
- align: (mode: AlignmentMode) => void;
295
- onOpenSourceView: () => void;
296
- }, previousSelectedState: {
297
- view: DiagramView;
298
- readonly: boolean;
299
- hasLikeC4Model: boolean;
300
- controls: boolean;
301
- showNavigationButtons: boolean;
302
- showNotations: boolean;
303
- fitViewEnabled: boolean;
304
- fitViewPadding: number;
305
- zoomable: boolean;
306
- pannable: boolean;
307
- nodesDraggable: boolean;
308
- nodesSelectable: boolean;
309
- experimentalEdgeEditing: boolean;
310
- enableFocusMode: boolean;
311
- enableElementDetails: boolean;
312
- enableRelationshipBrowser: boolean;
313
- enableRelationshipDetails: boolean;
314
- enableSearch: boolean;
315
- renderIcon: ElementIconRenderer | null;
316
- whereFilter: WhereOperator<string, string> | null;
317
- enableDynamicViewWalkthrough: boolean;
318
- xyflow: import("..").DiagramFlowTypes.XYFlowInstance;
319
- xystore: XYStoreApi;
320
- getContainer: () => HTMLDivElement | null;
321
- onChange: OnChange | null;
322
- onNavigateTo: OnNavigateTo<ViewId> | null;
323
- onNodeClick: OnNodeClick | null;
324
- onNodeContextMenu: OnNodeClick | null;
325
- onCanvasContextMenu: OnCanvasClick | null;
326
- onEdgeClick: OnEdgeClick | null;
327
- onEdgeContextMenu: OnEdgeClick | null;
328
- onCanvasClick: OnCanvasClick | null;
329
- onCanvasDblClick: OnCanvasClick | null;
330
- onBurgerMenuClick: (() => void) | null;
331
- onOpenSource: ((params: OpenSourceParams) => void) | null;
332
- readonly storeDevId: string;
333
- xynodes: import("..").DiagramFlowTypes.Node[];
334
- xyedges: {
335
- id: string;
336
- type: "relationship";
337
- source: string;
338
- target: string;
339
- sourceHandle?: string | null;
340
- targetHandle?: string | null;
341
- animated?: boolean;
342
- hidden?: boolean;
343
- deletable?: boolean;
344
- selectable?: boolean;
345
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
346
- selected?: boolean;
347
- markerStart?: EdgeMarkerType;
348
- markerEnd?: EdgeMarkerType;
349
- zIndex?: number;
350
- ariaLabel?: string;
351
- interactionWidth?: number;
352
- label?: ReactNode;
353
- labelStyle?: CSSProperties;
354
- labelShowBg?: boolean;
355
- labelBgStyle?: CSSProperties;
356
- labelBgPadding?: [number, number];
357
- labelBgBorderRadius?: number;
358
- style?: CSSProperties;
359
- className?: string;
360
- reconnectable?: boolean | HandleType;
361
- focusable?: boolean;
362
- }[];
363
- viewSyncDebounceTimeout: number | null;
364
- viewportChanged: boolean;
365
- initialized: boolean;
366
- activeOverlay: null | RequireExactlyOne<{
367
- elementDetails: Fqn;
368
- relationshipsOf: Fqn;
369
- edgeDetails: EdgeId;
370
- }>;
371
- isEditable: () => boolean;
372
- isDynamicView: boolean;
373
- activeWalkthrough: null | {
374
- stepId: StepEdgeId;
375
- hasPrevious: boolean;
376
- hasNext: boolean;
377
- parallelPrefix: string | null;
378
- };
379
- lastClickedNodeId: string | null;
380
- lastClickedEdgeId: string | null;
381
- focusedNodeId: string | null;
382
- hoveredEdgeId: string | null;
383
- dimmed: ReadonlySet<string>;
384
- lastOnNavigate: null | {
385
- fromView: ViewId;
386
- toView: ViewId;
387
- fromNode: NodeId | null;
388
- };
389
- navigationHistory: Array<{
390
- viewId: ViewId;
391
- nodeId: NodeId | null;
392
- }>;
393
- navigationHistoryIndex: number;
394
- updateView: (view: DiagramView) => void;
395
- focusOnNode: (nodeId: string | false) => void;
396
- setHoveredEdge: (edgeId: string | null) => void;
397
- setLastClickedNode: (nodeId: string | null) => void;
398
- setLastClickedEdge: (edgeId: string | null) => void;
399
- resetFocusAndLastClicked: () => void;
400
- getElement: (id: Fqn) => DiagramNode | null;
401
- triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
402
- cancelSaveManualLayout: () => boolean;
403
- scheduleSaveManualLayout: () => void;
404
- triggerSaveManualLayout: () => void;
405
- triggerOnNavigateTo: (xynodeId: string, event: MouseEvent) => void;
406
- fitDiagram: (duration?: number) => void;
407
- goBack: () => void;
408
- goForward: () => void;
409
- nextDynamicStep: (increment?: number) => void;
410
- activateWalkthrough: (step: EdgeId | {
411
- id: string;
412
- type: "relationship";
413
- source: string;
414
- target: string;
415
- sourceHandle?: string | null;
416
- targetHandle?: string | null;
417
- animated?: boolean;
418
- hidden?: boolean;
419
- deletable?: boolean;
420
- selectable?: boolean;
421
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
422
- selected?: boolean;
423
- markerStart?: EdgeMarkerType;
424
- markerEnd?: EdgeMarkerType;
425
- zIndex?: number;
426
- ariaLabel?: string;
427
- interactionWidth?: number;
428
- label?: ReactNode;
429
- labelStyle?: CSSProperties;
430
- labelShowBg?: boolean;
431
- labelBgStyle?: CSSProperties;
432
- labelBgPadding?: [number, number];
433
- labelBgBorderRadius?: number;
434
- style?: CSSProperties;
435
- className?: string;
436
- reconnectable?: boolean | HandleType;
437
- focusable?: boolean;
438
- }) => void;
439
- stopWalkthrough: () => void;
440
- openOverlay: (overlay: NonNullable< RequireExactlyOne<{
441
- elementDetails: Fqn;
442
- relationshipsOf: Fqn;
443
- edgeDetails: EdgeId;
444
- }> | null>) => void;
445
- closeOverlay: () => void;
446
- onInit: (xyflow: import("..").DiagramFlowTypes.XYFlowInstance) => void;
447
- onNodesChange: OnNodesChange<import("..").DiagramFlowTypes.Node>;
448
- onEdgesChange: OnEdgesChange<{
449
- id: string;
450
- type: "relationship";
451
- source: string;
452
- target: string;
453
- sourceHandle?: string | null;
454
- targetHandle?: string | null;
455
- animated?: boolean;
456
- hidden?: boolean;
457
- deletable?: boolean;
458
- selectable?: boolean;
459
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
460
- selected?: boolean;
461
- markerStart?: EdgeMarkerType;
462
- markerEnd?: EdgeMarkerType;
463
- zIndex?: number;
464
- ariaLabel?: string;
465
- interactionWidth?: number;
466
- label?: ReactNode;
467
- labelStyle?: CSSProperties;
468
- labelShowBg?: boolean;
469
- labelBgStyle?: CSSProperties;
470
- labelBgPadding?: [number, number];
471
- labelBgBorderRadius?: number;
472
- style?: CSSProperties;
473
- className?: string;
474
- reconnectable?: boolean | HandleType;
475
- focusable?: boolean;
476
- }>;
477
- highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: string) => void;
478
- resetEdgeControlPoints: () => void;
479
- align: (mode: AlignmentMode) => void;
480
- onOpenSourceView: () => void;
481
- }) => void): () => void;
482
- <U>(selector: (state: {
483
- view: DiagramView;
484
- readonly: boolean;
485
- hasLikeC4Model: boolean;
486
- controls: boolean;
487
- showNavigationButtons: boolean;
488
- showNotations: boolean;
489
- fitViewEnabled: boolean;
490
- fitViewPadding: number;
491
- zoomable: boolean;
492
- pannable: boolean;
493
- nodesDraggable: boolean;
494
- nodesSelectable: boolean;
495
- experimentalEdgeEditing: boolean;
496
- enableFocusMode: boolean;
497
- enableElementDetails: boolean;
498
- enableRelationshipBrowser: boolean;
499
- enableRelationshipDetails: boolean;
500
- enableSearch: boolean;
501
- renderIcon: ElementIconRenderer | null;
502
- whereFilter: WhereOperator<string, string> | null;
503
- enableDynamicViewWalkthrough: boolean;
504
- xyflow: import("..").DiagramFlowTypes.XYFlowInstance;
505
- xystore: XYStoreApi;
506
- getContainer: () => HTMLDivElement | null;
507
- onChange: OnChange | null;
508
- onNavigateTo: OnNavigateTo<ViewId> | null;
509
- onNodeClick: OnNodeClick | null;
510
- onNodeContextMenu: OnNodeClick | null;
511
- onCanvasContextMenu: OnCanvasClick | null;
512
- onEdgeClick: OnEdgeClick | null;
513
- onEdgeContextMenu: OnEdgeClick | null;
514
- onCanvasClick: OnCanvasClick | null;
515
- onCanvasDblClick: OnCanvasClick | null;
516
- onBurgerMenuClick: (() => void) | null;
517
- onOpenSource: ((params: OpenSourceParams) => void) | null;
518
- readonly storeDevId: string;
519
- xynodes: import("..").DiagramFlowTypes.Node[];
520
- xyedges: {
521
- id: string;
522
- type: "relationship";
523
- source: string;
524
- target: string;
525
- sourceHandle?: string | null;
526
- targetHandle?: string | null;
527
- animated?: boolean;
528
- hidden?: boolean;
529
- deletable?: boolean;
530
- selectable?: boolean;
531
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
532
- selected?: boolean;
533
- markerStart?: EdgeMarkerType;
534
- markerEnd?: EdgeMarkerType;
535
- zIndex?: number;
536
- ariaLabel?: string;
537
- interactionWidth?: number;
538
- label?: ReactNode;
539
- labelStyle?: CSSProperties;
540
- labelShowBg?: boolean;
541
- labelBgStyle?: CSSProperties;
542
- labelBgPadding?: [number, number];
543
- labelBgBorderRadius?: number;
544
- style?: CSSProperties;
545
- className?: string;
546
- reconnectable?: boolean | HandleType;
547
- focusable?: boolean;
548
- }[];
549
- viewSyncDebounceTimeout: number | null;
550
- viewportChanged: boolean;
551
- initialized: boolean;
552
- activeOverlay: null | RequireExactlyOne<{
553
- elementDetails: Fqn;
554
- relationshipsOf: Fqn;
555
- edgeDetails: EdgeId;
556
- }>;
557
- isEditable: () => boolean;
558
- isDynamicView: boolean;
559
- activeWalkthrough: null | {
560
- stepId: StepEdgeId;
561
- hasPrevious: boolean;
562
- hasNext: boolean;
563
- parallelPrefix: string | null;
564
- };
565
- lastClickedNodeId: string | null;
566
- lastClickedEdgeId: string | null;
567
- focusedNodeId: string | null;
568
- hoveredEdgeId: string | null;
569
- dimmed: ReadonlySet<string>;
570
- lastOnNavigate: null | {
571
- fromView: ViewId;
572
- toView: ViewId;
573
- fromNode: NodeId | null;
574
- };
575
- navigationHistory: Array<{
576
- viewId: ViewId;
577
- nodeId: NodeId | null;
578
- }>;
579
- navigationHistoryIndex: number;
580
- updateView: (view: DiagramView) => void;
581
- focusOnNode: (nodeId: string | false) => void;
582
- setHoveredEdge: (edgeId: string | null) => void;
583
- setLastClickedNode: (nodeId: string | null) => void;
584
- setLastClickedEdge: (edgeId: string | null) => void;
585
- resetFocusAndLastClicked: () => void;
586
- getElement: (id: Fqn) => DiagramNode | null;
587
- triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
588
- cancelSaveManualLayout: () => boolean;
589
- scheduleSaveManualLayout: () => void;
590
- triggerSaveManualLayout: () => void;
591
- triggerOnNavigateTo: (xynodeId: string, event: MouseEvent) => void;
592
- fitDiagram: (duration?: number) => void;
593
- goBack: () => void;
594
- goForward: () => void;
595
- nextDynamicStep: (increment?: number) => void;
596
- activateWalkthrough: (step: EdgeId | {
597
- id: string;
598
- type: "relationship";
599
- source: string;
600
- target: string;
601
- sourceHandle?: string | null;
602
- targetHandle?: string | null;
603
- animated?: boolean;
604
- hidden?: boolean;
605
- deletable?: boolean;
606
- selectable?: boolean;
607
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
608
- selected?: boolean;
609
- markerStart?: EdgeMarkerType;
610
- markerEnd?: EdgeMarkerType;
611
- zIndex?: number;
612
- ariaLabel?: string;
613
- interactionWidth?: number;
614
- label?: ReactNode;
615
- labelStyle?: CSSProperties;
616
- labelShowBg?: boolean;
617
- labelBgStyle?: CSSProperties;
618
- labelBgPadding?: [number, number];
619
- labelBgBorderRadius?: number;
620
- style?: CSSProperties;
621
- className?: string;
622
- reconnectable?: boolean | HandleType;
623
- focusable?: boolean;
624
- }) => void;
625
- stopWalkthrough: () => void;
626
- openOverlay: (overlay: NonNullable< RequireExactlyOne<{
627
- elementDetails: Fqn;
628
- relationshipsOf: Fqn;
629
- edgeDetails: EdgeId;
630
- }> | null>) => void;
631
- closeOverlay: () => void;
632
- onInit: (xyflow: import("..").DiagramFlowTypes.XYFlowInstance) => void;
633
- onNodesChange: OnNodesChange<import("..").DiagramFlowTypes.Node>;
634
- onEdgesChange: OnEdgesChange<{
635
- id: string;
636
- type: "relationship";
637
- source: string;
638
- target: string;
639
- sourceHandle?: string | null;
640
- targetHandle?: string | null;
641
- animated?: boolean;
642
- hidden?: boolean;
643
- deletable?: boolean;
644
- selectable?: boolean;
645
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
646
- selected?: boolean;
647
- markerStart?: EdgeMarkerType;
648
- markerEnd?: EdgeMarkerType;
649
- zIndex?: number;
650
- ariaLabel?: string;
651
- interactionWidth?: number;
652
- label?: ReactNode;
653
- labelStyle?: CSSProperties;
654
- labelShowBg?: boolean;
655
- labelBgStyle?: CSSProperties;
656
- labelBgPadding?: [number, number];
657
- labelBgBorderRadius?: number;
658
- style?: CSSProperties;
659
- className?: string;
660
- reconnectable?: boolean | HandleType;
661
- focusable?: boolean;
662
- }>;
663
- highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: string) => void;
664
- resetEdgeControlPoints: () => void;
665
- align: (mode: AlignmentMode) => void;
666
- onOpenSourceView: () => void;
667
- }) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
668
- equalityFn?: (a: U, b: U) => boolean;
669
- fireImmediately?: boolean;
670
- } | undefined): () => void;
671
- };
672
- }, "setState"> & {
673
- setState<A extends string | {
674
- type: string;
675
- }>(partial: {
676
- view: DiagramView;
677
- readonly: boolean;
678
- hasLikeC4Model: boolean;
679
- controls: boolean;
680
- showNavigationButtons: boolean;
681
- showNotations: boolean;
682
- fitViewEnabled: boolean;
683
- fitViewPadding: number;
684
- zoomable: boolean;
685
- pannable: boolean;
686
- nodesDraggable: boolean;
687
- nodesSelectable: boolean;
688
- experimentalEdgeEditing: boolean;
689
- enableFocusMode: boolean;
690
- enableElementDetails: boolean;
691
- enableRelationshipBrowser: boolean;
692
- enableRelationshipDetails: boolean;
693
- enableSearch: boolean;
694
- renderIcon: ElementIconRenderer | null;
695
- whereFilter: WhereOperator<string, string> | null;
696
- enableDynamicViewWalkthrough: boolean;
697
- xyflow: import("..").DiagramFlowTypes.XYFlowInstance;
698
- xystore: XYStoreApi;
699
- getContainer: () => HTMLDivElement | null;
700
- onChange: OnChange | null;
701
- onNavigateTo: OnNavigateTo<ViewId> | null;
702
- onNodeClick: OnNodeClick | null;
703
- onNodeContextMenu: OnNodeClick | null;
704
- onCanvasContextMenu: OnCanvasClick | null;
705
- onEdgeClick: OnEdgeClick | null;
706
- onEdgeContextMenu: OnEdgeClick | null;
707
- onCanvasClick: OnCanvasClick | null;
708
- onCanvasDblClick: OnCanvasClick | null;
709
- onBurgerMenuClick: (() => void) | null;
710
- onOpenSource: ((params: OpenSourceParams) => void) | null;
711
- readonly storeDevId: string;
712
- xynodes: import("..").DiagramFlowTypes.Node[];
713
- xyedges: {
714
- id: string;
715
- type: "relationship";
716
- source: string;
717
- target: string;
718
- sourceHandle?: string | null;
719
- targetHandle?: string | null;
720
- animated?: boolean;
721
- hidden?: boolean;
722
- deletable?: boolean;
723
- selectable?: boolean;
724
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
725
- selected?: boolean;
726
- markerStart?: EdgeMarkerType;
727
- markerEnd?: EdgeMarkerType;
728
- zIndex?: number;
729
- ariaLabel?: string;
730
- interactionWidth?: number;
731
- label?: ReactNode;
732
- labelStyle?: CSSProperties;
733
- labelShowBg?: boolean;
734
- labelBgStyle?: CSSProperties;
735
- labelBgPadding?: [number, number];
736
- labelBgBorderRadius?: number;
737
- style?: CSSProperties;
738
- className?: string;
739
- reconnectable?: boolean | HandleType;
740
- focusable?: boolean;
741
- }[];
742
- viewSyncDebounceTimeout: number | null;
743
- viewportChanged: boolean;
744
- initialized: boolean;
745
- activeOverlay: null | RequireExactlyOne<{
746
- elementDetails: Fqn;
747
- relationshipsOf: Fqn;
748
- edgeDetails: EdgeId;
749
- }>;
750
- isEditable: () => boolean;
751
- isDynamicView: boolean;
752
- activeWalkthrough: null | {
753
- stepId: StepEdgeId;
754
- hasPrevious: boolean;
755
- hasNext: boolean;
756
- parallelPrefix: string | null;
757
- };
758
- lastClickedNodeId: string | null;
759
- lastClickedEdgeId: string | null;
760
- focusedNodeId: string | null;
761
- hoveredEdgeId: string | null;
762
- dimmed: ReadonlySet<string>;
763
- lastOnNavigate: null | {
764
- fromView: ViewId;
765
- toView: ViewId;
766
- fromNode: NodeId | null;
767
- };
768
- navigationHistory: Array<{
769
- viewId: ViewId;
770
- nodeId: NodeId | null;
771
- }>;
772
- navigationHistoryIndex: number;
773
- updateView: (view: DiagramView) => void;
774
- focusOnNode: (nodeId: string | false) => void;
775
- setHoveredEdge: (edgeId: string | null) => void;
776
- setLastClickedNode: (nodeId: string | null) => void;
777
- setLastClickedEdge: (edgeId: string | null) => void;
778
- resetFocusAndLastClicked: () => void;
779
- getElement: (id: Fqn) => DiagramNode | null;
780
- triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
781
- cancelSaveManualLayout: () => boolean;
782
- scheduleSaveManualLayout: () => void;
783
- triggerSaveManualLayout: () => void;
784
- triggerOnNavigateTo: (xynodeId: string, event: MouseEvent) => void;
785
- fitDiagram: (duration?: number) => void;
786
- goBack: () => void;
787
- goForward: () => void;
788
- nextDynamicStep: (increment?: number) => void;
789
- activateWalkthrough: (step: EdgeId | {
790
- id: string;
791
- type: "relationship";
792
- source: string;
793
- target: string;
794
- sourceHandle?: string | null;
795
- targetHandle?: string | null;
796
- animated?: boolean;
797
- hidden?: boolean;
798
- deletable?: boolean;
799
- selectable?: boolean;
800
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
801
- selected?: boolean;
802
- markerStart?: EdgeMarkerType;
803
- markerEnd?: EdgeMarkerType;
804
- zIndex?: number;
805
- ariaLabel?: string;
806
- interactionWidth?: number;
807
- label?: ReactNode;
808
- labelStyle?: CSSProperties;
809
- labelShowBg?: boolean;
810
- labelBgStyle?: CSSProperties;
811
- labelBgPadding?: [number, number];
812
- labelBgBorderRadius?: number;
813
- style?: CSSProperties;
814
- className?: string;
815
- reconnectable?: boolean | HandleType;
816
- focusable?: boolean;
817
- }) => void;
818
- stopWalkthrough: () => void;
819
- openOverlay: (overlay: NonNullable< RequireExactlyOne<{
820
- elementDetails: Fqn;
821
- relationshipsOf: Fqn;
822
- edgeDetails: EdgeId;
823
- }> | null>) => void;
824
- closeOverlay: () => void;
825
- onInit: (xyflow: import("..").DiagramFlowTypes.XYFlowInstance) => void;
826
- onNodesChange: OnNodesChange<import("..").DiagramFlowTypes.Node>;
827
- onEdgesChange: OnEdgesChange<{
828
- id: string;
829
- type: "relationship";
830
- source: string;
831
- target: string;
832
- sourceHandle?: string | null;
833
- targetHandle?: string | null;
834
- animated?: boolean;
835
- hidden?: boolean;
836
- deletable?: boolean;
837
- selectable?: boolean;
838
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
839
- selected?: boolean;
840
- markerStart?: EdgeMarkerType;
841
- markerEnd?: EdgeMarkerType;
842
- zIndex?: number;
843
- ariaLabel?: string;
844
- interactionWidth?: number;
845
- label?: ReactNode;
846
- labelStyle?: CSSProperties;
847
- labelShowBg?: boolean;
848
- labelBgStyle?: CSSProperties;
849
- labelBgPadding?: [number, number];
850
- labelBgBorderRadius?: number;
851
- style?: CSSProperties;
852
- className?: string;
853
- reconnectable?: boolean | HandleType;
854
- focusable?: boolean;
855
- }>;
856
- highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: string) => void;
857
- resetEdgeControlPoints: () => void;
858
- align: (mode: AlignmentMode) => void;
859
- onOpenSourceView: () => void;
860
- } | Partial<{
861
- view: DiagramView;
862
- readonly: boolean;
863
- hasLikeC4Model: boolean;
864
- controls: boolean;
865
- showNavigationButtons: boolean;
866
- showNotations: boolean;
867
- fitViewEnabled: boolean;
868
- fitViewPadding: number;
869
- zoomable: boolean;
870
- pannable: boolean;
871
- nodesDraggable: boolean;
872
- nodesSelectable: boolean;
873
- experimentalEdgeEditing: boolean;
874
- enableFocusMode: boolean;
875
- enableElementDetails: boolean;
876
- enableRelationshipBrowser: boolean;
877
- enableRelationshipDetails: boolean;
878
- enableSearch: boolean;
879
- renderIcon: ElementIconRenderer | null;
880
- whereFilter: WhereOperator<string, string> | null;
881
- enableDynamicViewWalkthrough: boolean;
882
- xyflow: import("..").DiagramFlowTypes.XYFlowInstance;
883
- xystore: XYStoreApi;
884
- getContainer: () => HTMLDivElement | null;
885
- onChange: OnChange | null;
886
- onNavigateTo: OnNavigateTo<ViewId> | null;
887
- onNodeClick: OnNodeClick | null;
888
- onNodeContextMenu: OnNodeClick | null;
889
- onCanvasContextMenu: OnCanvasClick | null;
890
- onEdgeClick: OnEdgeClick | null;
891
- onEdgeContextMenu: OnEdgeClick | null;
892
- onCanvasClick: OnCanvasClick | null;
893
- onCanvasDblClick: OnCanvasClick | null;
894
- onBurgerMenuClick: (() => void) | null;
895
- onOpenSource: ((params: OpenSourceParams) => void) | null;
896
- readonly storeDevId: string;
897
- xynodes: import("..").DiagramFlowTypes.Node[];
898
- xyedges: {
899
- id: string;
900
- type: "relationship";
901
- source: string;
902
- target: string;
903
- sourceHandle?: string | null;
904
- targetHandle?: string | null;
905
- animated?: boolean;
906
- hidden?: boolean;
907
- deletable?: boolean;
908
- selectable?: boolean;
909
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
910
- selected?: boolean;
911
- markerStart?: EdgeMarkerType;
912
- markerEnd?: EdgeMarkerType;
913
- zIndex?: number;
914
- ariaLabel?: string;
915
- interactionWidth?: number;
916
- label?: ReactNode;
917
- labelStyle?: CSSProperties;
918
- labelShowBg?: boolean;
919
- labelBgStyle?: CSSProperties;
920
- labelBgPadding?: [number, number];
921
- labelBgBorderRadius?: number;
922
- style?: CSSProperties;
923
- className?: string;
924
- reconnectable?: boolean | HandleType;
925
- focusable?: boolean;
926
- }[];
927
- viewSyncDebounceTimeout: number | null;
928
- viewportChanged: boolean;
929
- initialized: boolean;
930
- activeOverlay: null | RequireExactlyOne<{
931
- elementDetails: Fqn;
932
- relationshipsOf: Fqn;
933
- edgeDetails: EdgeId;
934
- }>;
935
- isEditable: () => boolean;
936
- isDynamicView: boolean;
937
- activeWalkthrough: null | {
938
- stepId: StepEdgeId;
939
- hasPrevious: boolean;
940
- hasNext: boolean;
941
- parallelPrefix: string | null;
942
- };
943
- lastClickedNodeId: string | null;
944
- lastClickedEdgeId: string | null;
945
- focusedNodeId: string | null;
946
- hoveredEdgeId: string | null;
947
- dimmed: ReadonlySet<string>;
948
- lastOnNavigate: null | {
949
- fromView: ViewId;
950
- toView: ViewId;
951
- fromNode: NodeId | null;
952
- };
953
- navigationHistory: Array<{
954
- viewId: ViewId;
955
- nodeId: NodeId | null;
956
- }>;
957
- navigationHistoryIndex: number;
958
- updateView: (view: DiagramView) => void;
959
- focusOnNode: (nodeId: string | false) => void;
960
- setHoveredEdge: (edgeId: string | null) => void;
961
- setLastClickedNode: (nodeId: string | null) => void;
962
- setLastClickedEdge: (edgeId: string | null) => void;
963
- resetFocusAndLastClicked: () => void;
964
- getElement: (id: Fqn) => DiagramNode | null;
965
- triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
966
- cancelSaveManualLayout: () => boolean;
967
- scheduleSaveManualLayout: () => void;
968
- triggerSaveManualLayout: () => void;
969
- triggerOnNavigateTo: (xynodeId: string, event: MouseEvent) => void;
970
- fitDiagram: (duration?: number) => void;
971
- goBack: () => void;
972
- goForward: () => void;
973
- nextDynamicStep: (increment?: number) => void;
974
- activateWalkthrough: (step: EdgeId | {
975
- id: string;
976
- type: "relationship";
977
- source: string;
978
- target: string;
979
- sourceHandle?: string | null;
980
- targetHandle?: string | null;
981
- animated?: boolean;
982
- hidden?: boolean;
983
- deletable?: boolean;
984
- selectable?: boolean;
985
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
986
- selected?: boolean;
987
- markerStart?: EdgeMarkerType;
988
- markerEnd?: EdgeMarkerType;
989
- zIndex?: number;
990
- ariaLabel?: string;
991
- interactionWidth?: number;
992
- label?: ReactNode;
993
- labelStyle?: CSSProperties;
994
- labelShowBg?: boolean;
995
- labelBgStyle?: CSSProperties;
996
- labelBgPadding?: [number, number];
997
- labelBgBorderRadius?: number;
998
- style?: CSSProperties;
999
- className?: string;
1000
- reconnectable?: boolean | HandleType;
1001
- focusable?: boolean;
1002
- }) => void;
1003
- stopWalkthrough: () => void;
1004
- openOverlay: (overlay: NonNullable< RequireExactlyOne<{
1005
- elementDetails: Fqn;
1006
- relationshipsOf: Fqn;
1007
- edgeDetails: EdgeId;
1008
- }> | null>) => void;
1009
- closeOverlay: () => void;
1010
- onInit: (xyflow: import("..").DiagramFlowTypes.XYFlowInstance) => void;
1011
- onNodesChange: OnNodesChange<import("..").DiagramFlowTypes.Node>;
1012
- onEdgesChange: OnEdgesChange<{
1013
- id: string;
1014
- type: "relationship";
1015
- source: string;
1016
- target: string;
1017
- sourceHandle?: string | null;
1018
- targetHandle?: string | null;
1019
- animated?: boolean;
1020
- hidden?: boolean;
1021
- deletable?: boolean;
1022
- selectable?: boolean;
1023
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
1024
- selected?: boolean;
1025
- markerStart?: EdgeMarkerType;
1026
- markerEnd?: EdgeMarkerType;
1027
- zIndex?: number;
1028
- ariaLabel?: string;
1029
- interactionWidth?: number;
1030
- label?: ReactNode;
1031
- labelStyle?: CSSProperties;
1032
- labelShowBg?: boolean;
1033
- labelBgStyle?: CSSProperties;
1034
- labelBgPadding?: [number, number];
1035
- labelBgBorderRadius?: number;
1036
- style?: CSSProperties;
1037
- className?: string;
1038
- reconnectable?: boolean | HandleType;
1039
- focusable?: boolean;
1040
- }>;
1041
- highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: string) => void;
1042
- resetEdgeControlPoints: () => void;
1043
- align: (mode: AlignmentMode) => void;
1044
- onOpenSourceView: () => void;
1045
- }> | ((state: {
1046
- view: DiagramView;
1047
- readonly: boolean;
1048
- hasLikeC4Model: boolean;
1049
- controls: boolean;
1050
- showNavigationButtons: boolean;
1051
- showNotations: boolean;
1052
- fitViewEnabled: boolean;
1053
- fitViewPadding: number;
1054
- zoomable: boolean;
1055
- pannable: boolean;
1056
- nodesDraggable: boolean;
1057
- nodesSelectable: boolean;
1058
- experimentalEdgeEditing: boolean;
1059
- enableFocusMode: boolean;
1060
- enableElementDetails: boolean;
1061
- enableRelationshipBrowser: boolean;
1062
- enableRelationshipDetails: boolean;
1063
- enableSearch: boolean;
1064
- renderIcon: ElementIconRenderer | null;
1065
- whereFilter: WhereOperator<string, string> | null;
1066
- enableDynamicViewWalkthrough: boolean;
1067
- xyflow: import("..").DiagramFlowTypes.XYFlowInstance;
1068
- xystore: XYStoreApi;
1069
- getContainer: () => HTMLDivElement | null;
1070
- onChange: OnChange | null;
1071
- onNavigateTo: OnNavigateTo<ViewId> | null;
1072
- onNodeClick: OnNodeClick | null;
1073
- onNodeContextMenu: OnNodeClick | null;
1074
- onCanvasContextMenu: OnCanvasClick | null;
1075
- onEdgeClick: OnEdgeClick | null;
1076
- onEdgeContextMenu: OnEdgeClick | null;
1077
- onCanvasClick: OnCanvasClick | null;
1078
- onCanvasDblClick: OnCanvasClick | null;
1079
- onBurgerMenuClick: (() => void) | null;
1080
- onOpenSource: ((params: OpenSourceParams) => void) | null;
1081
- readonly storeDevId: string;
1082
- xynodes: import("..").DiagramFlowTypes.Node[];
1083
- xyedges: {
1084
- id: string;
1085
- type: "relationship";
1086
- source: string;
1087
- target: string;
1088
- sourceHandle?: string | null;
1089
- targetHandle?: string | null;
1090
- animated?: boolean;
1091
- hidden?: boolean;
1092
- deletable?: boolean;
1093
- selectable?: boolean;
1094
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
1095
- selected?: boolean;
1096
- markerStart?: EdgeMarkerType;
1097
- markerEnd?: EdgeMarkerType;
1098
- zIndex?: number;
1099
- ariaLabel?: string;
1100
- interactionWidth?: number;
1101
- label?: ReactNode;
1102
- labelStyle?: CSSProperties;
1103
- labelShowBg?: boolean;
1104
- labelBgStyle?: CSSProperties;
1105
- labelBgPadding?: [number, number];
1106
- labelBgBorderRadius?: number;
1107
- style?: CSSProperties;
1108
- className?: string;
1109
- reconnectable?: boolean | HandleType;
1110
- focusable?: boolean;
1111
- }[];
1112
- viewSyncDebounceTimeout: number | null;
1113
- viewportChanged: boolean;
1114
- initialized: boolean;
1115
- activeOverlay: null | RequireExactlyOne<{
1116
- elementDetails: Fqn;
1117
- relationshipsOf: Fqn;
1118
- edgeDetails: EdgeId;
1119
- }>;
1120
- isEditable: () => boolean;
1121
- isDynamicView: boolean;
1122
- activeWalkthrough: null | {
1123
- stepId: StepEdgeId;
1124
- hasPrevious: boolean;
1125
- hasNext: boolean;
1126
- parallelPrefix: string | null;
1127
- };
1128
- lastClickedNodeId: string | null;
1129
- lastClickedEdgeId: string | null;
1130
- focusedNodeId: string | null;
1131
- hoveredEdgeId: string | null;
1132
- dimmed: ReadonlySet<string>;
1133
- lastOnNavigate: null | {
1134
- fromView: ViewId;
1135
- toView: ViewId;
1136
- fromNode: NodeId | null;
1137
- };
1138
- navigationHistory: Array<{
1139
- viewId: ViewId;
1140
- nodeId: NodeId | null;
1141
- }>;
1142
- navigationHistoryIndex: number;
1143
- updateView: (view: DiagramView) => void;
1144
- focusOnNode: (nodeId: string | false) => void;
1145
- setHoveredEdge: (edgeId: string | null) => void;
1146
- setLastClickedNode: (nodeId: string | null) => void;
1147
- setLastClickedEdge: (edgeId: string | null) => void;
1148
- resetFocusAndLastClicked: () => void;
1149
- getElement: (id: Fqn) => DiagramNode | null;
1150
- triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
1151
- cancelSaveManualLayout: () => boolean;
1152
- scheduleSaveManualLayout: () => void;
1153
- triggerSaveManualLayout: () => void;
1154
- triggerOnNavigateTo: (xynodeId: string, event: MouseEvent) => void;
1155
- fitDiagram: (duration?: number) => void;
1156
- goBack: () => void;
1157
- goForward: () => void;
1158
- nextDynamicStep: (increment?: number) => void;
1159
- activateWalkthrough: (step: EdgeId | {
1160
- id: string;
1161
- type: "relationship";
1162
- source: string;
1163
- target: string;
1164
- sourceHandle?: string | null;
1165
- targetHandle?: string | null;
1166
- animated?: boolean;
1167
- hidden?: boolean;
1168
- deletable?: boolean;
1169
- selectable?: boolean;
1170
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
1171
- selected?: boolean;
1172
- markerStart?: EdgeMarkerType;
1173
- markerEnd?: EdgeMarkerType;
1174
- zIndex?: number;
1175
- ariaLabel?: string;
1176
- interactionWidth?: number;
1177
- label?: ReactNode;
1178
- labelStyle?: CSSProperties;
1179
- labelShowBg?: boolean;
1180
- labelBgStyle?: CSSProperties;
1181
- labelBgPadding?: [number, number];
1182
- labelBgBorderRadius?: number;
1183
- style?: CSSProperties;
1184
- className?: string;
1185
- reconnectable?: boolean | HandleType;
1186
- focusable?: boolean;
1187
- }) => void;
1188
- stopWalkthrough: () => void;
1189
- openOverlay: (overlay: NonNullable< RequireExactlyOne<{
1190
- elementDetails: Fqn;
1191
- relationshipsOf: Fqn;
1192
- edgeDetails: EdgeId;
1193
- }> | null>) => void;
1194
- closeOverlay: () => void;
1195
- onInit: (xyflow: import("..").DiagramFlowTypes.XYFlowInstance) => void;
1196
- onNodesChange: OnNodesChange<import("..").DiagramFlowTypes.Node>;
1197
- onEdgesChange: OnEdgesChange<{
1198
- id: string;
1199
- type: "relationship";
1200
- source: string;
1201
- target: string;
1202
- sourceHandle?: string | null;
1203
- targetHandle?: string | null;
1204
- animated?: boolean;
1205
- hidden?: boolean;
1206
- deletable?: boolean;
1207
- selectable?: boolean;
1208
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
1209
- selected?: boolean;
1210
- markerStart?: EdgeMarkerType;
1211
- markerEnd?: EdgeMarkerType;
1212
- zIndex?: number;
1213
- ariaLabel?: string;
1214
- interactionWidth?: number;
1215
- label?: ReactNode;
1216
- labelStyle?: CSSProperties;
1217
- labelShowBg?: boolean;
1218
- labelBgStyle?: CSSProperties;
1219
- labelBgPadding?: [number, number];
1220
- labelBgBorderRadius?: number;
1221
- style?: CSSProperties;
1222
- className?: string;
1223
- reconnectable?: boolean | HandleType;
1224
- focusable?: boolean;
1225
- }>;
1226
- highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: string) => void;
1227
- resetEdgeControlPoints: () => void;
1228
- align: (mode: AlignmentMode) => void;
1229
- onOpenSourceView: () => void;
1230
- }) => {
1231
- view: DiagramView;
1232
- readonly: boolean;
1233
- hasLikeC4Model: boolean;
1234
- controls: boolean;
1235
- showNavigationButtons: boolean;
1236
- showNotations: boolean;
1237
- fitViewEnabled: boolean;
1238
- fitViewPadding: number;
1239
- zoomable: boolean;
1240
- pannable: boolean;
1241
- nodesDraggable: boolean;
1242
- nodesSelectable: boolean;
1243
- experimentalEdgeEditing: boolean;
1244
- enableFocusMode: boolean;
1245
- enableElementDetails: boolean;
1246
- enableRelationshipBrowser: boolean;
1247
- enableRelationshipDetails: boolean;
1248
- enableSearch: boolean;
1249
- renderIcon: ElementIconRenderer | null;
1250
- whereFilter: WhereOperator<string, string> | null;
1251
- enableDynamicViewWalkthrough: boolean;
1252
- xyflow: import("..").DiagramFlowTypes.XYFlowInstance;
1253
- xystore: XYStoreApi;
1254
- getContainer: () => HTMLDivElement | null;
1255
- onChange: OnChange | null;
1256
- onNavigateTo: OnNavigateTo<ViewId> | null;
1257
- onNodeClick: OnNodeClick | null;
1258
- onNodeContextMenu: OnNodeClick | null;
1259
- onCanvasContextMenu: OnCanvasClick | null;
1260
- onEdgeClick: OnEdgeClick | null;
1261
- onEdgeContextMenu: OnEdgeClick | null;
1262
- onCanvasClick: OnCanvasClick | null;
1263
- onCanvasDblClick: OnCanvasClick | null;
1264
- onBurgerMenuClick: (() => void) | null;
1265
- onOpenSource: ((params: OpenSourceParams) => void) | null;
1266
- readonly storeDevId: string;
1267
- xynodes: import("..").DiagramFlowTypes.Node[];
1268
- xyedges: {
1269
- id: string;
1270
- type: "relationship";
1271
- source: string;
1272
- target: string;
1273
- sourceHandle?: string | null;
1274
- targetHandle?: string | null;
1275
- animated?: boolean;
1276
- hidden?: boolean;
1277
- deletable?: boolean;
1278
- selectable?: boolean;
1279
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
1280
- selected?: boolean;
1281
- markerStart?: EdgeMarkerType;
1282
- markerEnd?: EdgeMarkerType;
1283
- zIndex?: number;
1284
- ariaLabel?: string;
1285
- interactionWidth?: number;
1286
- label?: ReactNode;
1287
- labelStyle?: CSSProperties;
1288
- labelShowBg?: boolean;
1289
- labelBgStyle?: CSSProperties;
1290
- labelBgPadding?: [number, number];
1291
- labelBgBorderRadius?: number;
1292
- style?: CSSProperties;
1293
- className?: string;
1294
- reconnectable?: boolean | HandleType;
1295
- focusable?: boolean;
1296
- }[];
1297
- viewSyncDebounceTimeout: number | null;
1298
- viewportChanged: boolean;
1299
- initialized: boolean;
1300
- activeOverlay: null | RequireExactlyOne<{
1301
- elementDetails: Fqn;
1302
- relationshipsOf: Fqn;
1303
- edgeDetails: EdgeId;
1304
- }>;
1305
- isEditable: () => boolean;
1306
- isDynamicView: boolean;
1307
- activeWalkthrough: null | {
1308
- stepId: StepEdgeId;
1309
- hasPrevious: boolean;
1310
- hasNext: boolean;
1311
- parallelPrefix: string | null;
1312
- };
1313
- lastClickedNodeId: string | null;
1314
- lastClickedEdgeId: string | null;
1315
- focusedNodeId: string | null;
1316
- hoveredEdgeId: string | null;
1317
- dimmed: ReadonlySet<string>;
1318
- lastOnNavigate: null | {
1319
- fromView: ViewId;
1320
- toView: ViewId;
1321
- fromNode: NodeId | null;
1322
- };
1323
- navigationHistory: Array<{
1324
- viewId: ViewId;
1325
- nodeId: NodeId | null;
1326
- }>;
1327
- navigationHistoryIndex: number;
1328
- updateView: (view: DiagramView) => void;
1329
- focusOnNode: (nodeId: string | false) => void;
1330
- setHoveredEdge: (edgeId: string | null) => void;
1331
- setLastClickedNode: (nodeId: string | null) => void;
1332
- setLastClickedEdge: (edgeId: string | null) => void;
1333
- resetFocusAndLastClicked: () => void;
1334
- getElement: (id: Fqn) => DiagramNode | null;
1335
- triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
1336
- cancelSaveManualLayout: () => boolean;
1337
- scheduleSaveManualLayout: () => void;
1338
- triggerSaveManualLayout: () => void;
1339
- triggerOnNavigateTo: (xynodeId: string, event: MouseEvent) => void;
1340
- fitDiagram: (duration?: number) => void;
1341
- goBack: () => void;
1342
- goForward: () => void;
1343
- nextDynamicStep: (increment?: number) => void;
1344
- activateWalkthrough: (step: EdgeId | {
1345
- id: string;
1346
- type: "relationship";
1347
- source: string;
1348
- target: string;
1349
- sourceHandle?: string | null;
1350
- targetHandle?: string | null;
1351
- animated?: boolean;
1352
- hidden?: boolean;
1353
- deletable?: boolean;
1354
- selectable?: boolean;
1355
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
1356
- selected?: boolean;
1357
- markerStart?: EdgeMarkerType;
1358
- markerEnd?: EdgeMarkerType;
1359
- zIndex?: number;
1360
- ariaLabel?: string;
1361
- interactionWidth?: number;
1362
- label?: ReactNode;
1363
- labelStyle?: CSSProperties;
1364
- labelShowBg?: boolean;
1365
- labelBgStyle?: CSSProperties;
1366
- labelBgPadding?: [number, number];
1367
- labelBgBorderRadius?: number;
1368
- style?: CSSProperties;
1369
- className?: string;
1370
- reconnectable?: boolean | HandleType;
1371
- focusable?: boolean;
1372
- }) => void;
1373
- stopWalkthrough: () => void;
1374
- openOverlay: (overlay: NonNullable< RequireExactlyOne<{
1375
- elementDetails: Fqn;
1376
- relationshipsOf: Fqn;
1377
- edgeDetails: EdgeId;
1378
- }> | null>) => void;
1379
- closeOverlay: () => void;
1380
- onInit: (xyflow: import("..").DiagramFlowTypes.XYFlowInstance) => void;
1381
- onNodesChange: OnNodesChange<import("..").DiagramFlowTypes.Node>;
1382
- onEdgesChange: OnEdgesChange<{
1383
- id: string;
1384
- type: "relationship";
1385
- source: string;
1386
- target: string;
1387
- sourceHandle?: string | null;
1388
- targetHandle?: string | null;
1389
- animated?: boolean;
1390
- hidden?: boolean;
1391
- deletable?: boolean;
1392
- selectable?: boolean;
1393
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
1394
- selected?: boolean;
1395
- markerStart?: EdgeMarkerType;
1396
- markerEnd?: EdgeMarkerType;
1397
- zIndex?: number;
1398
- ariaLabel?: string;
1399
- interactionWidth?: number;
1400
- label?: ReactNode;
1401
- labelStyle?: CSSProperties;
1402
- labelShowBg?: boolean;
1403
- labelBgStyle?: CSSProperties;
1404
- labelBgPadding?: [number, number];
1405
- labelBgBorderRadius?: number;
1406
- style?: CSSProperties;
1407
- className?: string;
1408
- reconnectable?: boolean | HandleType;
1409
- focusable?: boolean;
1410
- }>;
1411
- highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: string) => void;
1412
- resetEdgeControlPoints: () => void;
1413
- align: (mode: AlignmentMode) => void;
1414
- onOpenSourceView: () => void;
1415
- } | Partial<{
1416
- view: DiagramView;
1417
- readonly: boolean;
1418
- hasLikeC4Model: boolean;
1419
- controls: boolean;
1420
- showNavigationButtons: boolean;
1421
- showNotations: boolean;
1422
- fitViewEnabled: boolean;
1423
- fitViewPadding: number;
1424
- zoomable: boolean;
1425
- pannable: boolean;
1426
- nodesDraggable: boolean;
1427
- nodesSelectable: boolean;
1428
- experimentalEdgeEditing: boolean;
1429
- enableFocusMode: boolean;
1430
- enableElementDetails: boolean;
1431
- enableRelationshipBrowser: boolean;
1432
- enableRelationshipDetails: boolean;
1433
- enableSearch: boolean;
1434
- renderIcon: ElementIconRenderer | null;
1435
- whereFilter: WhereOperator<string, string> | null;
1436
- enableDynamicViewWalkthrough: boolean;
1437
- xyflow: import("..").DiagramFlowTypes.XYFlowInstance;
1438
- xystore: XYStoreApi;
1439
- getContainer: () => HTMLDivElement | null;
1440
- onChange: OnChange | null;
1441
- onNavigateTo: OnNavigateTo<ViewId> | null;
1442
- onNodeClick: OnNodeClick | null;
1443
- onNodeContextMenu: OnNodeClick | null;
1444
- onCanvasContextMenu: OnCanvasClick | null;
1445
- onEdgeClick: OnEdgeClick | null;
1446
- onEdgeContextMenu: OnEdgeClick | null;
1447
- onCanvasClick: OnCanvasClick | null;
1448
- onCanvasDblClick: OnCanvasClick | null;
1449
- onBurgerMenuClick: (() => void) | null;
1450
- onOpenSource: ((params: OpenSourceParams) => void) | null;
1451
- readonly storeDevId: string;
1452
- xynodes: import("..").DiagramFlowTypes.Node[];
1453
- xyedges: {
1454
- id: string;
1455
- type: "relationship";
1456
- source: string;
1457
- target: string;
1458
- sourceHandle?: string | null;
1459
- targetHandle?: string | null;
1460
- animated?: boolean;
1461
- hidden?: boolean;
1462
- deletable?: boolean;
1463
- selectable?: boolean;
1464
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
1465
- selected?: boolean;
1466
- markerStart?: EdgeMarkerType;
1467
- markerEnd?: EdgeMarkerType;
1468
- zIndex?: number;
1469
- ariaLabel?: string;
1470
- interactionWidth?: number;
1471
- label?: ReactNode;
1472
- labelStyle?: CSSProperties;
1473
- labelShowBg?: boolean;
1474
- labelBgStyle?: CSSProperties;
1475
- labelBgPadding?: [number, number];
1476
- labelBgBorderRadius?: number;
1477
- style?: CSSProperties;
1478
- className?: string;
1479
- reconnectable?: boolean | HandleType;
1480
- focusable?: boolean;
1481
- }[];
1482
- viewSyncDebounceTimeout: number | null;
1483
- viewportChanged: boolean;
1484
- initialized: boolean;
1485
- activeOverlay: null | RequireExactlyOne<{
1486
- elementDetails: Fqn;
1487
- relationshipsOf: Fqn;
1488
- edgeDetails: EdgeId;
1489
- }>;
1490
- isEditable: () => boolean;
1491
- isDynamicView: boolean;
1492
- activeWalkthrough: null | {
1493
- stepId: StepEdgeId;
1494
- hasPrevious: boolean;
1495
- hasNext: boolean;
1496
- parallelPrefix: string | null;
1497
- };
1498
- lastClickedNodeId: string | null;
1499
- lastClickedEdgeId: string | null;
1500
- focusedNodeId: string | null;
1501
- hoveredEdgeId: string | null;
1502
- dimmed: ReadonlySet<string>;
1503
- lastOnNavigate: null | {
1504
- fromView: ViewId;
1505
- toView: ViewId;
1506
- fromNode: NodeId | null;
1507
- };
1508
- navigationHistory: Array<{
1509
- viewId: ViewId;
1510
- nodeId: NodeId | null;
1511
- }>;
1512
- navigationHistoryIndex: number;
1513
- updateView: (view: DiagramView) => void;
1514
- focusOnNode: (nodeId: string | false) => void;
1515
- setHoveredEdge: (edgeId: string | null) => void;
1516
- setLastClickedNode: (nodeId: string | null) => void;
1517
- setLastClickedEdge: (edgeId: string | null) => void;
1518
- resetFocusAndLastClicked: () => void;
1519
- getElement: (id: Fqn) => DiagramNode | null;
1520
- triggerChangeElementStyle: (change: import("@likec4/core").ViewChange.ChangeElementStyle) => void;
1521
- cancelSaveManualLayout: () => boolean;
1522
- scheduleSaveManualLayout: () => void;
1523
- triggerSaveManualLayout: () => void;
1524
- triggerOnNavigateTo: (xynodeId: string, event: MouseEvent) => void;
1525
- fitDiagram: (duration?: number) => void;
1526
- goBack: () => void;
1527
- goForward: () => void;
1528
- nextDynamicStep: (increment?: number) => void;
1529
- activateWalkthrough: (step: EdgeId | {
1530
- id: string;
1531
- type: "relationship";
1532
- source: string;
1533
- target: string;
1534
- sourceHandle?: string | null;
1535
- targetHandle?: string | null;
1536
- animated?: boolean;
1537
- hidden?: boolean;
1538
- deletable?: boolean;
1539
- selectable?: boolean;
1540
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
1541
- selected?: boolean;
1542
- markerStart?: EdgeMarkerType;
1543
- markerEnd?: EdgeMarkerType;
1544
- zIndex?: number;
1545
- ariaLabel?: string;
1546
- interactionWidth?: number;
1547
- label?: ReactNode;
1548
- labelStyle?: CSSProperties;
1549
- labelShowBg?: boolean;
1550
- labelBgStyle?: CSSProperties;
1551
- labelBgPadding?: [number, number];
1552
- labelBgBorderRadius?: number;
1553
- style?: CSSProperties;
1554
- className?: string;
1555
- reconnectable?: boolean | HandleType;
1556
- focusable?: boolean;
1557
- }) => void;
1558
- stopWalkthrough: () => void;
1559
- openOverlay: (overlay: NonNullable< RequireExactlyOne<{
1560
- elementDetails: Fqn;
1561
- relationshipsOf: Fqn;
1562
- edgeDetails: EdgeId;
1563
- }> | null>) => void;
1564
- closeOverlay: () => void;
1565
- onInit: (xyflow: import("..").DiagramFlowTypes.XYFlowInstance) => void;
1566
- onNodesChange: OnNodesChange<import("..").DiagramFlowTypes.Node>;
1567
- onEdgesChange: OnEdgesChange<{
1568
- id: string;
1569
- type: "relationship";
1570
- source: string;
1571
- target: string;
1572
- sourceHandle?: string | null;
1573
- targetHandle?: string | null;
1574
- animated?: boolean;
1575
- hidden?: boolean;
1576
- deletable?: boolean;
1577
- selectable?: boolean;
1578
- data: import("..").DiagramFlowTypes.DiagramEdgeData;
1579
- selected?: boolean;
1580
- markerStart?: EdgeMarkerType;
1581
- markerEnd?: EdgeMarkerType;
1582
- zIndex?: number;
1583
- ariaLabel?: string;
1584
- interactionWidth?: number;
1585
- label?: ReactNode;
1586
- labelStyle?: CSSProperties;
1587
- labelShowBg?: boolean;
1588
- labelBgStyle?: CSSProperties;
1589
- labelBgPadding?: [number, number];
1590
- labelBgBorderRadius?: number;
1591
- style?: CSSProperties;
1592
- className?: string;
1593
- reconnectable?: boolean | HandleType;
1594
- focusable?: boolean;
1595
- }>;
1596
- highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: string) => void;
1597
- resetEdgeControlPoints: () => void;
1598
- align: (mode: AlignmentMode) => void;
1599
- onOpenSourceView: () => void;
1600
- }>), replace?: boolean | undefined, action?: A | undefined): void;
1601
- }> | null>;
1602
- export type DiagramContextProviderProps = PropsWithChildren<Omit<DiagramInitialState, 'xystore' | 'xyflow' | 'getContainer'> & {
1603
- className: string;
1604
- keepAspectRatio: boolean;
1605
- }>;
1606
- export declare function DiagramContextProvider({ children, view, className, keepAspectRatio, whereFilter, ...props }: DiagramContextProviderProps): import("react/jsx-runtime").JSX.Element;
1607
- export declare namespace DiagramContextProvider {
1608
- var displayName: string;
1609
- }