@likec4/diagram 1.58.0 → 1.59.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (229) hide show
  1. package/dist/LikeC4Diagram.js +1 -1
  2. package/dist/LikeC4Diagram.props.d.ts +1 -1
  3. package/dist/LikeC4Styles.js +1 -1
  4. package/dist/LikeC4View.js +2 -2
  5. package/dist/ReactLikeC4.d.ts +1 -1
  6. package/dist/base/Base.d.ts +3 -2
  7. package/dist/base/Base.js +14 -26
  8. package/dist/base/BaseXYFlow.d.ts +2 -1
  9. package/dist/base/BaseXYFlow.js +63 -4
  10. package/dist/base/keyboardZoom.d.ts +3 -0
  11. package/dist/base/keyboardZoom.js +20 -0
  12. package/dist/base/updateEdges.js +7 -16
  13. package/dist/base/updateNodes.js +3 -9
  14. package/dist/base-primitives/compound/CompoundActionButton.d.ts +2 -1
  15. package/dist/base-primitives/compound/CompoundActionButton.js +5 -2
  16. package/dist/base-primitives/compound/CompoundDetailsButton.d.ts +2 -1
  17. package/dist/base-primitives/compound/CompoundDetailsButton.js +5 -2
  18. package/dist/base-primitives/compound/CompoundTitle.d.ts +7 -1
  19. package/dist/base-primitives/compound/CompoundTitle.js +2 -1
  20. package/dist/base-primitives/compound/actionbtns.css.d.ts +1 -1
  21. package/dist/base-primitives/edge/EdgeActionButton.d.ts +2 -1
  22. package/dist/base-primitives/edge/EdgeActionButton.js +2 -1
  23. package/dist/base-primitives/edge/EdgeContainer.d.ts +1 -1
  24. package/dist/base-primitives/edge/EdgeContainer.js +4 -2
  25. package/dist/base-primitives/edge/EdgeLabel.d.ts +2 -0
  26. package/dist/base-primitives/edge/EdgeLabel.js +2 -5
  27. package/dist/base-primitives/element/ElementActionButtons.d.ts +1 -0
  28. package/dist/base-primitives/element/ElementActionButtons.js +4 -1
  29. package/dist/base-primitives/element/ElementData.d.ts +3 -1
  30. package/dist/base-primitives/element/ElementData.js +2 -1
  31. package/dist/base-primitives/element/ElementDetailsButton.d.ts +2 -1
  32. package/dist/base-primitives/element/ElementDetailsButton.js +5 -2
  33. package/dist/base-primitives/element/ElementNodeContainer.js +1 -1
  34. package/dist/base-primitives/element/ElementShape.js +3 -0
  35. package/dist/components/ErrorFallback.js +3 -5
  36. package/dist/components/Link.js +6 -6
  37. package/dist/components/NavigationPanel.js +1 -1
  38. package/dist/components/SearchControl.css.js +11 -11
  39. package/dist/context/TagStylesContext.d.ts +3 -3
  40. package/dist/context/TagStylesContext.js +16 -16
  41. package/dist/custom/index.d.ts +1 -0
  42. package/dist/custom/index.js +3 -2
  43. package/dist/editor/actor/actions.js +1 -1
  44. package/dist/editor/actor/machine.d.ts +4 -6
  45. package/dist/editor/actor/setup.d.ts +16 -2
  46. package/dist/editor/actor/setup.js +5 -4
  47. package/dist/hooks/index.d.ts +1 -1
  48. package/dist/hooks/safeContext.d.ts +156 -3
  49. package/dist/hooks/safeContext.js +60 -12
  50. package/dist/hooks/useCurrentViewModel.js +1 -1
  51. package/dist/hooks/useDiagram.d.ts +8 -0
  52. package/dist/hooks/useDiagram.js +9 -2
  53. package/dist/hooks/useEditorActor.js +1 -1
  54. package/dist/hooks/useLikeC4ElementsTree.js +1 -1
  55. package/dist/hooks/useLikeC4Model.js +1 -1
  56. package/dist/hooks/useXYFlow.d.ts +1 -0
  57. package/dist/hooks/useXYFlow.js +5 -3
  58. package/dist/index.d.ts +1 -1
  59. package/dist/index.js +2 -2
  60. package/dist/likec4diagram/DiagramUI.js +19 -6
  61. package/dist/likec4diagram/DiagramXYFlow.js +39 -14
  62. package/dist/likec4diagram/convert-to-xyflow.d.ts +3 -5
  63. package/dist/likec4diagram/convert-to-xyflow.js +29 -10
  64. package/dist/likec4diagram/custom/edges/RelationshipEdge.js +13 -4
  65. package/dist/likec4diagram/custom/edges/SequenceStepEdge.js +11 -4
  66. package/dist/likec4diagram/custom/edges/edges.css.js +1 -1
  67. package/dist/likec4diagram/custom/index.d.ts +2 -1
  68. package/dist/likec4diagram/custom/index.js +5 -3
  69. package/dist/likec4diagram/custom/nodes/CompoundActions.js +1 -0
  70. package/dist/likec4diagram/custom/nodes/ElementActions.d.ts +2 -2
  71. package/dist/likec4diagram/custom/nodes/ElementActions.js +13 -3
  72. package/dist/likec4diagram/custom/nodes/NodeNotes.js +0 -4
  73. package/dist/likec4diagram/custom/nodes/SequenceActorNode.js +32 -19
  74. package/dist/likec4diagram/custom/nodes/SequenceSubFlow.d.ts +2 -0
  75. package/dist/likec4diagram/custom/nodes/SequenceSubFlow.js +234 -0
  76. package/dist/likec4diagram/custom/nodes/index.d.ts +1 -0
  77. package/dist/likec4diagram/custom/nodes/nodes.js +20 -5
  78. package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js +1 -1
  79. package/dist/likec4diagram/custom/nodes/toolbar/_shared.js +1 -1
  80. package/dist/likec4diagram/relationship-popover/RelationshipPopover.js +15 -14
  81. package/dist/likec4diagram/relationship-popover/components.d.ts +1 -1
  82. package/dist/likec4diagram/state/DiagramActorProvider.js +11 -20
  83. package/dist/likec4diagram/state/aligners.js +1 -1
  84. package/dist/likec4diagram/state/assign.d.ts +1 -1
  85. package/dist/likec4diagram/state/assign.js +1 -1
  86. package/dist/likec4diagram/state/createViewChange.js +1 -1
  87. package/dist/likec4diagram/state/diagram-api.d.ts +18 -10
  88. package/dist/likec4diagram/state/diagram-api.js +333 -229
  89. package/dist/likec4diagram/state/machine.actions.d.ts +1026 -332
  90. package/dist/likec4diagram/state/machine.actions.js +115 -44
  91. package/dist/likec4diagram/state/machine.actions.layout.d.ts +123 -51
  92. package/dist/likec4diagram/state/machine.actions.layout.js +40 -33
  93. package/dist/likec4diagram/state/machine.d.ts +154 -16
  94. package/dist/likec4diagram/state/machine.js +5 -41
  95. package/dist/likec4diagram/state/machine.setup.d.ts +84 -19
  96. package/dist/likec4diagram/state/machine.setup.js +65 -12
  97. package/dist/likec4diagram/state/machine.state.initializing.d.ts +59 -33
  98. package/dist/likec4diagram/state/machine.state.navigating.js +7 -3
  99. package/dist/likec4diagram/state/machine.state.ready.d.ts +1540 -476
  100. package/dist/likec4diagram/state/machine.state.ready.focused.d.ts +294 -53
  101. package/dist/likec4diagram/state/machine.state.ready.focused.js +3 -3
  102. package/dist/likec4diagram/state/machine.state.ready.idle.d.ts +264 -73
  103. package/dist/likec4diagram/state/machine.state.ready.idle.js +31 -6
  104. package/dist/likec4diagram/state/machine.state.ready.js +22 -16
  105. package/dist/likec4diagram/state/machine.state.ready.printing.d.ts +23 -9
  106. package/dist/likec4diagram/state/machine.state.ready.walkthrough.d.ts +288 -84
  107. package/dist/likec4diagram/state/machine.state.ready.walkthrough.js +135 -66
  108. package/dist/likec4diagram/state/types.d.ts +4 -2
  109. package/dist/likec4diagram/state/utils.d.ts +7 -0
  110. package/dist/likec4diagram/state/utils.js +36 -34
  111. package/dist/likec4diagram/types.d.ts +47 -3
  112. package/dist/likec4diagram/ui/FloatingSequenceActors.d.ts +6 -0
  113. package/dist/likec4diagram/ui/FloatingSequenceActors.js +155 -0
  114. package/dist/likec4diagram/ui/LayoutDriftFrame.js +2 -2
  115. package/dist/likec4diagram/ui/index.d.ts +2 -0
  116. package/dist/likec4diagram/ui/notation/NotationPanel.css.js +5 -5
  117. package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.d.ts +2 -0
  118. package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.js +519 -0
  119. package/dist/likec4diagram/ui/sequence-outline/state.d.ts +36 -0
  120. package/dist/likec4diagram/ui/sequence-outline/state.js +55 -0
  121. package/dist/likec4diagram/xyflow-diagram/diagram-view.d.ts +1 -1
  122. package/dist/likec4diagram/xyflow-diagram/diagram-view.js +112 -60
  123. package/dist/likec4diagram/xyflow-sequence/_types.d.ts +55 -5
  124. package/dist/likec4diagram/xyflow-sequence/const.d.ts +5 -5
  125. package/dist/likec4diagram/xyflow-sequence/const.js +4 -4
  126. package/dist/likec4diagram/xyflow-sequence/layouter.d.ts +30 -6
  127. package/dist/likec4diagram/xyflow-sequence/layouter.js +561 -0
  128. package/dist/likec4diagram/xyflow-sequence/{sequence-layout.d.ts → sequence-view-to-xy.d.ts} +8 -2
  129. package/dist/likec4diagram/xyflow-sequence/{sequence-layout.js → sequence-view-to-xy.js} +111 -14
  130. package/dist/likec4diagram/xyflow-sequence/sequence-view.d.ts +2 -7
  131. package/dist/likec4diagram/xyflow-sequence/sequence-view.js +144 -0
  132. package/dist/likec4diagram/xyflow-sequence/utils.d.ts +9 -1
  133. package/dist/likec4diagram/xyflow-sequence/utils.js +96 -0
  134. package/dist/navigationpanel/NavigationPanel.d.ts +5 -2
  135. package/dist/navigationpanel/NavigationPanel.js +58 -59
  136. package/dist/navigationpanel/NavigationPanelDropdown.js +45 -38
  137. package/dist/navigationpanel/_common.js +2 -2
  138. package/dist/navigationpanel/actor.actions.d.ts +19 -0
  139. package/dist/navigationpanel/actor.actions.js +45 -0
  140. package/dist/navigationpanel/actor.d.ts +34 -96
  141. package/dist/navigationpanel/actor.js +21 -84
  142. package/dist/navigationpanel/actor.setup.d.ts +98 -0
  143. package/dist/navigationpanel/actor.setup.js +31 -0
  144. package/dist/navigationpanel/comparepanel/DriftsSummary.js +4 -5
  145. package/dist/navigationpanel/controls/DetailsControls.js +7 -8
  146. package/dist/navigationpanel/dropdown/ProjectsMenu.js +1 -1
  147. package/dist/navigationpanel/editorpanel/styles.js +8 -8
  148. package/dist/navigationpanel/hooks.d.ts +20 -5
  149. package/dist/navigationpanel/hooks.js +4 -18
  150. package/dist/navigationpanel/styles.css.d.ts +1 -1
  151. package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js +2 -2
  152. package/dist/navigationpanel/walkthrough/DynamicViewControls.d.ts +4 -4
  153. package/dist/navigationpanel/walkthrough/DynamicViewControls.js +23 -25
  154. package/dist/navigationpanel/walkthrough/WalkthroughPanel.js +5 -5
  155. package/dist/overlays/Overlays.d.ts +4 -2
  156. package/dist/overlays/Overlays.js +10 -10
  157. package/dist/overlays/element-details/ElementDetailsCard.css.js +17 -17
  158. package/dist/overlays/element-details/MetadataValue.js +15 -15
  159. package/dist/overlays/element-details/TabPanelDeployments.css.js +5 -5
  160. package/dist/overlays/element-details/TabPanelRelationships.css.js +11 -11
  161. package/dist/overlays/element-details/TabPanelRelationships.js +1 -1
  162. package/dist/overlays/element-details/TabPanelStructure.css.js +2 -2
  163. package/dist/overlays/element-details/TabPanelStructure.js +1 -1
  164. package/dist/overlays/element-details/actor.d.ts +2 -3
  165. package/dist/overlays/hooks.d.ts +28 -0
  166. package/dist/overlays/hooks.js +5 -0
  167. package/dist/overlays/overlay/Overlay.js +34 -25
  168. package/dist/overlays/overlaysActor.js +0 -1
  169. package/dist/overlays/relationship-details/custom/nodeTypes.js +1 -1
  170. package/dist/overlays/relationship-details/layout.js +1 -1
  171. package/dist/overlays/relationships-browser/SelectElement.css.js +2 -2
  172. package/dist/overlays/relationships-browser/actor.js +79 -78
  173. package/dist/overlays/relationships-browser/custom/nodeTypes.js +1 -1
  174. package/dist/overlays/relationships-browser/hooks.js +1 -1
  175. package/dist/overlays/relationships-browser/layout.js +2 -2
  176. package/dist/projects-overview/actor.js +4 -4
  177. package/dist/search/Search.js +1 -1
  178. package/dist/search/components/ElementsColumn.css.js +2 -2
  179. package/dist/search/components/ViewsColum.js +1 -1
  180. package/dist/search/components/_shared.css.d.ts +1 -1
  181. package/dist/search/components/_shared.css.js +23 -23
  182. package/dist/search/components/styles.css.js +4 -4
  183. package/dist/shadowroot/ShadowRoot.d.ts +1 -1
  184. package/dist/shadowroot/ShadowRoot.js +76 -28
  185. package/dist/styles2.js +1 -1
  186. package/dist/utils/defineActors.d.ts +21 -0
  187. package/dist/utils/defineActors.js +13 -0
  188. package/dist/utils/index.d.ts +1 -0
  189. package/dist/utils/index.js +5 -4
  190. package/dist/utils/readableText.d.ts +11 -0
  191. package/dist/utils/readableText.js +18 -0
  192. package/package.json +18 -30
  193. package/panda.buildinfo.json +267 -288
  194. package/styles-min.css +1 -1
  195. package/styles.css +1 -1
  196. package/adhoc-editor/package.json +0 -4
  197. package/dist/adhoc-editor/EditorPanel.d.ts +0 -1
  198. package/dist/adhoc-editor/EditorPanel.js +0 -106
  199. package/dist/adhoc-editor/ElementsTree.d.ts +0 -2
  200. package/dist/adhoc-editor/ElementsTree.js +0 -112
  201. package/dist/adhoc-editor/LikeC4AdHocViewEditor.d.ts +0 -4
  202. package/dist/adhoc-editor/LikeC4AdHocViewEditor.js +0 -83
  203. package/dist/adhoc-editor/components/Tree.d.ts +0 -48
  204. package/dist/adhoc-editor/components/Tree.js +0 -213
  205. package/dist/adhoc-editor/hooks.d.ts +0 -14
  206. package/dist/adhoc-editor/hooks.js +0 -34
  207. package/dist/adhoc-editor/index.d.ts +0 -2
  208. package/dist/adhoc-editor/index.js +0 -2
  209. package/dist/adhoc-editor/state/ActorProvider.d.ts +0 -5
  210. package/dist/adhoc-editor/state/ActorProvider.js +0 -37
  211. package/dist/adhoc-editor/state/actor.d.ts +0 -13
  212. package/dist/adhoc-editor/state/actor.editor.d.ts +0 -56
  213. package/dist/adhoc-editor/state/actor.editor.js +0 -167
  214. package/dist/adhoc-editor/state/actor.js +0 -14
  215. package/dist/adhoc-editor/state/actor.layouter.d.ts +0 -51
  216. package/dist/adhoc-editor/state/actor.layouter.js +0 -54
  217. package/dist/adhoc-editor/state/actor.types.d.ts +0 -63
  218. package/dist/adhoc-editor/state/actor.types.js +0 -25
  219. package/dist/adhoc-editor/state/panel.d.ts +0 -95
  220. package/dist/adhoc-editor/state/panel.js +0 -124
  221. package/dist/adhoc-editor/state/utils.d.ts +0 -17
  222. package/dist/adhoc-editor/state/utils.js +0 -25
  223. package/dist/adhoc-editor/useElementsTree.d.ts +0 -18
  224. package/dist/adhoc-editor/useElementsTree.js +0 -98
  225. package/dist/adhoc-editor/viewrules/ViewRulesPanel.d.ts +0 -6
  226. package/dist/context/ShadowRootContext.d.ts +0 -3
  227. package/dist/context/ShadowRootContext.js +0 -5
  228. package/dist/shadowroot/styles.d.ts +0 -13
  229. package/dist/shadowroot/styles.js +0 -60
@@ -6,15 +6,16 @@ import { createLayoutConstraints } from "../useLayoutConstraints.js";
6
6
  import { focusNodesEdges, mergeXYNodesEdges, resetEdgeControlPoints } from "./assign.js";
7
7
  import { convertToXYFlow } from "../convert-to-xyflow.js";
8
8
  import { getAligner, toNodeRect } from "./aligners.js";
9
- import { cancelFitDiagram, raiseFitDiagram, setViewport, setViewportCenter } from "./machine.actions.layout.js";
10
- import { hasAtLeast, isTruthy } from "remeda";
11
- import { exact, invariant, nonNullable, nonexhaustive } from "@likec4/core";
9
+ import { assignViewportBefore, cancelFitDiagram, centerOnNodeOrEdge, fitDiagram, fitFocusedBounds, raiseFitDiagram, raiseSetViewport, raiseUpdateView, returnViewportBefore, setViewport, setViewportCenter } from "./machine.actions.layout.js";
10
+ import { hasAtLeast, isTruthy, mapToObj } from "remeda";
11
+ import { dynamicViewFlow, exact, invariant, isDynamicView, nonNullable, nonexhaustive } from "@likec4/core";
12
12
  import { BBox as BBox$1 } from "@likec4/core/geometry";
13
- import { difference as difference$1 } from "@likec4/core/utils";
13
+ import { difference as difference$1, isString as isString$1 } from "@likec4/core/utils";
14
14
  import { nodeToRect } from "@xyflow/system";
15
15
  import { assertEvent } from "xstate";
16
16
  import { produce } from "immer";
17
17
  //#region src/likec4diagram/state/machine.actions.ts
18
+ var resetSelection = () => machine.raise({ type: "xyflow.resetSelection" });
18
19
  var disableCompareWithLatest = () => machine.assign(({ context }) => {
19
20
  return {
20
21
  toggledFeatures: {
@@ -97,7 +98,8 @@ var assignXYDataFromView = (view) => machine.assign(({ context, event }) => {
97
98
  currentViewId: context.view.id,
98
99
  dynamicViewVariant: context.dynamicViewVariant,
99
100
  view,
100
- where: context.where
101
+ where: context.where,
102
+ collapsedSequenceFlows: context.collapsedSequenceFlows
101
103
  });
102
104
  else {
103
105
  assertEvent(event, "update.view");
@@ -105,7 +107,8 @@ var assignXYDataFromView = (view) => machine.assign(({ context, event }) => {
105
107
  currentViewId: context.view.id,
106
108
  dynamicViewVariant: context.dynamicViewVariant,
107
109
  view: event.view,
108
- where: context.where
110
+ where: context.where,
111
+ collapsedSequenceFlows: context.collapsedSequenceFlows
109
112
  });
110
113
  }
111
114
  const update = mergeXYNodesEdges(context, xydata);
@@ -141,25 +144,19 @@ var assignDynamicViewVariant = () => machine.assign(({ event }) => {
141
144
  assertEvent(event, "switch.dynamicViewVariant");
142
145
  return { dynamicViewVariant: event.variant };
143
146
  });
144
- var onNodeMouseEnter = (params) => machine.assign(({ context, event }) => {
145
- let node = params?.node;
146
- if (!node) {
147
- assertEvent(event, "xyflow.nodeMouseEnter");
148
- node = event.node;
149
- }
147
+ var onNodeMouseEnter = () => machine.assign(({ context, event }) => {
148
+ assertEvent(event, "xyflow.nodeMouseEnter");
149
+ const hoveredNodeId = isString$1(event.node) ? event.node : event.node.id;
150
150
  return { xynodes: context.xynodes.map((n) => {
151
- if (n.id === node.id) return Base.setHovered(n, true);
151
+ if (n.id === hoveredNodeId) return Base.setHovered(n, true);
152
152
  return n;
153
153
  }) };
154
154
  });
155
- var onNodeMouseLeave = (params) => machine.assign(({ context, event }) => {
156
- let node = params?.node;
157
- if (!node) {
158
- assertEvent(event, "xyflow.nodeMouseLeave");
159
- node = event.node;
160
- }
155
+ var onNodeMouseLeave = () => machine.assign(({ context, event }) => {
156
+ assertEvent(event, "xyflow.nodeMouseLeave");
157
+ const leftNodeId = isString$1(event.node) ? event.node : event.node.id;
161
158
  return { xynodes: context.xynodes.map((n) => {
162
- if (n.id === node.id) return Base.setHovered(n, false);
159
+ if (n.id === leftNodeId) return Base.setHovered(n, false);
163
160
  return n;
164
161
  }) };
165
162
  });
@@ -186,13 +183,15 @@ var emitInitialized = () => machine.emit(({ context }) => {
186
183
  instance: context.xyflow
187
184
  };
188
185
  });
189
- var emitNodeClick = () => machine.emit(({ context, event }) => {
186
+ var emitNodeClick = () => machine.enqueueActions(({ context, event, enqueue }) => {
190
187
  assertEvent(event, "xyflow.nodeClick");
191
- return {
188
+ const node = findDiagramNode(context, event.node.id);
189
+ if (!node) return;
190
+ enqueue.emit({
192
191
  type: "nodeClick",
193
- node: nonNullable(findDiagramNode(context, event.node.id), `Node ${event.node.id} not found in diagram`),
192
+ node,
194
193
  xynode: event.node
195
- };
194
+ });
196
195
  });
197
196
  var emitNavigateTo = (params) => machine.emit(({ context }) => ({
198
197
  type: "navigateTo",
@@ -364,7 +363,6 @@ var assignToggledFeatures = () => machine.assign(({ context, event }) => {
364
363
  [feature]: nextValue
365
364
  } };
366
365
  });
367
- var closeSearch = () => machine.sendTo(typedSystem.searchActor, { type: "close" });
368
366
  var closeAllOverlays = () => machine.sendTo(typedSystem.overlaysActor, { type: "close.all" });
369
367
  var stopEditorActor = () => machine.enqueueActions(({ enqueue, system }) => {
370
368
  const actor = typedSystem(system).editorActorRef;
@@ -381,7 +379,7 @@ var ensureEditorActor = () => machine.enqueueActions(({ enqueue, context, system
381
379
  enqueue.stopChild(editor);
382
380
  return;
383
381
  }
384
- if (hasEditor && !editor) enqueue.spawnChild("editorActor", {
382
+ if (hasEditor && !editor) enqueue.spawnChild("editor", {
385
383
  id: "editor",
386
384
  systemId: "editor",
387
385
  input: { viewId: context.view.id },
@@ -519,7 +517,7 @@ var ensureOverlaysActor = () => machine.enqueueActions(({ enqueue, check, system
519
517
  const enabled = check("enabled: Overlays");
520
518
  const running = typedSystem(system).overlaysActorRef;
521
519
  if (enabled && !running) {
522
- enqueue.spawnChild("overlaysActorLogic", {
520
+ enqueue.spawnChild("overlays", {
523
521
  id: "overlays",
524
522
  systemId: "overlays",
525
523
  syncSnapshot: true
@@ -532,13 +530,33 @@ var ensureOverlaysActor = () => machine.enqueueActions(({ enqueue, check, system
532
530
  }
533
531
  });
534
532
  /**
533
+ * Ensure that the navigation panel actor is running or stopped based on the current state
534
+ */
535
+ var ensureNavigationPanelActor = () => machine.enqueueActions(({ enqueue, check, system, context }) => {
536
+ const enabled = check("enabled: NavigationPanel");
537
+ const running = typedSystem(system).navigationActorRef;
538
+ if (enabled && !running) {
539
+ enqueue.spawnChild("navigationPanel", {
540
+ id: "navigationPanel",
541
+ systemId: "navigationPanel",
542
+ input: {
543
+ view: context.view,
544
+ viewModel: null
545
+ },
546
+ syncSnapshot: true
547
+ });
548
+ return;
549
+ }
550
+ if (!enabled && running) enqueue.stopChild(running);
551
+ });
552
+ /**
535
553
  * Ensure that the search actor is running or stopped based on the current feature flags
536
554
  */
537
555
  var ensureSearchActor = () => machine.enqueueActions(({ enqueue, check, system }) => {
538
556
  const enabled = check("enabled: Search");
539
557
  const running = typedSystem(system).searchActorRef;
540
558
  if (enabled && !running) {
541
- enqueue.spawnChild("searchActorLogic", {
559
+ enqueue.spawnChild("search", {
542
560
  id: "search",
543
561
  systemId: "search",
544
562
  syncSnapshot: true
@@ -553,13 +571,20 @@ var ensureSearchActor = () => machine.enqueueActions(({ enqueue, check, system }
553
571
  var onEdgeMouseEnter = () => machine.enqueueActions(({ enqueue, context, event }) => {
554
572
  assertEvent(event, "xyflow.edgeMouseEnter");
555
573
  let edge = event.edge;
556
- enqueue.assign({ xyedges: context.xyedges.map((e) => {
557
- if (e.id === event.edge.id) {
558
- edge = Base.setHovered(e, true);
559
- return edge;
560
- }
561
- return e;
562
- }) });
574
+ let parentFlow = edge.type === "seq-step" && edge.data.parentFlow;
575
+ enqueue.assign({
576
+ xyedges: context.xyedges.map((e) => {
577
+ if (e.id === event.edge.id) {
578
+ edge = Base.setHovered(e, true);
579
+ return edge;
580
+ }
581
+ return e;
582
+ }),
583
+ xynodes: parentFlow ? context.xynodes.map((n) => {
584
+ if (n.type === "seq-subflow" && n.data.flowId === parentFlow.id) return Base.setHovered(n, true);
585
+ return n;
586
+ }) : context.xynodes
587
+ });
563
588
  enqueue.emit({
564
589
  type: "edgeMouseEnter",
565
590
  edge,
@@ -569,20 +594,31 @@ var onEdgeMouseEnter = () => machine.enqueueActions(({ enqueue, context, event }
569
594
  var onEdgeMouseLeave = () => machine.enqueueActions(({ enqueue, context, event }) => {
570
595
  assertEvent(event, "xyflow.edgeMouseLeave");
571
596
  let edge = event.edge;
572
- enqueue.assign({ xyedges: context.xyedges.map((e) => {
573
- if (e.id === event.edge.id) {
574
- edge = Base.setHovered(e, false);
575
- return edge;
576
- }
577
- return e;
578
- }) });
597
+ let parentFlow = edge.type === "seq-step" && edge.data.parentFlow;
598
+ enqueue.assign({
599
+ xyedges: context.xyedges.map((e) => {
600
+ if (e.id === event.edge.id) {
601
+ edge = Base.setHovered(e, false);
602
+ return edge;
603
+ }
604
+ return e;
605
+ }),
606
+ xynodes: parentFlow ? context.xynodes.map((n) => {
607
+ if (n.type === "seq-subflow" && n.data.flowId === parentFlow.id) return Base.setHovered(n, false);
608
+ return n;
609
+ }) : context.xynodes
610
+ });
579
611
  enqueue.emit({
580
612
  type: "edgeMouseLeave",
581
613
  edge,
582
614
  event: event.event
583
615
  });
584
616
  });
585
- var startHotKeyActor = () => machine.spawnChild("hotkeyActorLogic", { id: "hotkey" });
617
+ var startHotKeyActor = () => machine.spawnChild("hotkey", {
618
+ id: "hotkey",
619
+ systemId: "hotkey",
620
+ syncSnapshot: true
621
+ });
586
622
  var stopHotKeyActor = () => machine.stopChild("hotkey");
587
623
  /**
588
624
  * Auto-unfocus timer duration in milliseconds.
@@ -708,5 +744,40 @@ var updateView = () => machine.enqueueActions(({ enqueue, event, context }) => {
708
744
  enqueue(raiseFitDiagram());
709
745
  }
710
746
  });
747
+ /**
748
+ * Ensures all child actors are started/stopped as needed
749
+ */
750
+ var ensureAllActors = () => machine.enqueueActions(({ enqueue }) => {
751
+ enqueue(ensureEditorActor());
752
+ enqueue(ensureOverlaysActor());
753
+ enqueue(ensureSearchActor());
754
+ enqueue(ensureNavigationPanelActor());
755
+ });
756
+ var collapseOrExpandSequenceFlow = () => machine.enqueueActions(({ enqueue, event, context, check }) => {
757
+ assertEvent(event, ["sequence.flow.*"]);
758
+ invariant(isDynamicView(context.view));
759
+ const flowId = event.flowId;
760
+ const flow = dynamicViewFlow(context.view);
761
+ const subflow = flow.isSubflow(flowId) ? flow.lookup(flowId) : null;
762
+ if (!subflow) return;
763
+ let targets;
764
+ let isCollapsed;
765
+ if (flow.guards.isAltOrTry(subflow)) {
766
+ targets = flow.subflows(subflow).map((s) => s.id);
767
+ isCollapsed = targets.some((id) => context.collapsedSequenceFlows[id]);
768
+ } else {
769
+ targets = [flowId];
770
+ isCollapsed = context.collapsedSequenceFlows[flowId] ?? false;
771
+ }
772
+ if (isCollapsed && event.type === "sequence.flow.collapse" || !isCollapsed && event.type === "sequence.flow.expand") return;
773
+ enqueue.assign({ collapsedSequenceFlows: {
774
+ ...context.collapsedSequenceFlows,
775
+ ...mapToObj(targets, (id) => [id, !isCollapsed])
776
+ } });
777
+ if (check("is dynamic view in sequence variant")) {
778
+ enqueue(assignXYDataFromView(context.view));
779
+ if (!context.viewportChangedManually) enqueue(raiseFitDiagram());
780
+ }
781
+ });
711
782
  //#endregion
712
- export { assignDynamicViewVariant, assignFocusedNode, assignLastClickedNode, assignToggledFeatures, assignXYDataFromView, cancelAutoUnfocusTimer, cancelEditing, closeAllOverlays, closeSearch, disableCompareWithLatest, emitEdgeClick, emitInitialized, emitNodeClick, emitOnLayoutTypeChange, emitOpenSource, emitOpenSourceOfView, emitPaneClick, ensureEditorActor, ensureOverlaysActor, ensureSearchActor, focusOnNodesAndEdges, handleNavigate, highlightNodeOrEdge, layoutAlign, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openElementDetails, openOverlay, openSourceOfFocusedOrLastClickedNode, resetEdgesControlPoints, resetLastClickedNode, startAutoUnfocusTimer, startEditing, startHotKeyActor, stopEditing, stopEditorActor, stopHotKeyActor, tagHighlight, triggerChange, undimEverything, updateFeatures, updateInputs, updateView };
783
+ export { assignDynamicViewVariant, assignFocusedNode, assignLastClickedNode, assignToggledFeatures, assignViewportBefore, assignXYDataFromView, cancelAutoUnfocusTimer, cancelEditing, cancelFitDiagram, centerOnNodeOrEdge, closeAllOverlays, collapseOrExpandSequenceFlow, disableCompareWithLatest, emitEdgeClick, emitInitialized, emitNavigateTo, emitNodeClick, emitOnLayoutTypeChange, emitOpenSource, emitOpenSourceOfView, emitPaneClick, ensureAllActors, ensureEditorActor, ensureNavigationPanelActor, ensureOverlaysActor, ensureSearchActor, fitDiagram, fitFocusedBounds, focusOnNodesAndEdges, handleNavigate, highlightNodeOrEdge, layoutAlign, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openElementDetails, openOverlay, openSourceOfFocusedOrLastClickedNode, raiseFitDiagram, raiseSetViewport, raiseUpdateView, resetEdgesControlPoints, resetLastClickedNode, resetSelection, returnViewportBefore, sendSynced, setViewport, setViewportCenter, startAutoUnfocusTimer, startEditing, startHotKeyActor, stopEditing, stopEditorActor, stopHotKeyActor, tagHighlight, triggerChange, undimEverything, updateFeatures, updateInputs, updateView };
@@ -1,36 +1,41 @@
1
1
  import { BBox } from '@likec4/core';
2
2
  import { DiagramView } from '@likec4/core/types';
3
3
  import { Viewport } from '@xyflow/react';
4
- import { ActionFunction, CancelAction } from 'xstate';
5
4
  import { Context, Events, EmittedEvents } from './machine.setup';
5
+ import { ActionFunction, CancelAction } from 'xstate';
6
+ import { SearchActorLogic } from '../../search/searchActor';
6
7
  import { HotkeyActorLogic } from './hotkeyActor';
7
8
  import { OverlaysActorLogic } from '../../overlays/overlaysActor';
8
- import { SearchActorLogic } from '../../search/searchActor';
9
9
  import { MediaPrintActorLogic } from './mediaPrintActor';
10
10
  import { EditorActorLogic } from '../../editor';
11
+ import { NavigationPanelActorLogic } from '../../navigationpanel/actor';
11
12
  export declare const setViewport: (params?: {
12
13
  viewport: Viewport;
13
14
  duration?: number;
14
15
  }) => ActionFunction<Context, Events, Events, unknown, {
15
- src: "hotkeyActorLogic";
16
+ src: "search";
17
+ logic: SearchActorLogic;
18
+ id: "search";
19
+ } | {
20
+ src: "hotkey";
16
21
  logic: HotkeyActorLogic;
17
22
  id: "hotkey";
18
23
  } | {
19
- src: "overlaysActorLogic";
24
+ src: "overlays";
20
25
  logic: OverlaysActorLogic;
21
26
  id: "overlays";
22
27
  } | {
23
- src: "searchActorLogic";
24
- logic: SearchActorLogic;
25
- id: "search";
26
- } | {
27
- src: "mediaPrintActorLogic";
28
+ src: "mediaPrint";
28
29
  logic: MediaPrintActorLogic;
29
30
  id: "mediaPrint";
30
31
  } | {
31
- src: "editorActor";
32
+ src: "editor";
32
33
  logic: EditorActorLogic;
33
34
  id: "editor";
35
+ } | {
36
+ src: "navigationPanel";
37
+ logic: NavigationPanelActorLogic;
38
+ id: "navigationPanel";
34
39
  }, never, {
35
40
  type: "isReady";
36
41
  params: unknown;
@@ -61,6 +66,9 @@ export declare const setViewport: (params?: {
61
66
  } | {
62
67
  type: "enabled: DynamicViewWalkthrough";
63
68
  params: unknown;
69
+ } | {
70
+ type: "enabled: NavigationPanel";
71
+ params: unknown;
64
72
  } | {
65
73
  type: "focus.node: autoUnfocus";
66
74
  params: unknown;
@@ -73,6 +81,9 @@ export declare const setViewport: (params?: {
73
81
  } | {
74
82
  type: "is dynamic view";
75
83
  params: unknown;
84
+ } | {
85
+ type: "is dynamic view in sequence variant";
86
+ params: unknown;
76
87
  } | {
77
88
  type: "is same view";
78
89
  params: unknown;
@@ -91,6 +102,9 @@ export declare const setViewport: (params?: {
91
102
  } | {
92
103
  type: "click: focused node";
93
104
  params: unknown;
105
+ } | {
106
+ type: "click: node.type = seq-subflow";
107
+ params: unknown;
94
108
  } | {
95
109
  type: "click: node has connections";
96
110
  params: unknown;
@@ -105,25 +119,29 @@ export declare const setViewportCenter: (params?: {
105
119
  x: number;
106
120
  y: number;
107
121
  }) => ActionFunction<Context, Events, Events, unknown, {
108
- src: "hotkeyActorLogic";
122
+ src: "search";
123
+ logic: SearchActorLogic;
124
+ id: "search";
125
+ } | {
126
+ src: "hotkey";
109
127
  logic: HotkeyActorLogic;
110
128
  id: "hotkey";
111
129
  } | {
112
- src: "overlaysActorLogic";
130
+ src: "overlays";
113
131
  logic: OverlaysActorLogic;
114
132
  id: "overlays";
115
133
  } | {
116
- src: "searchActorLogic";
117
- logic: SearchActorLogic;
118
- id: "search";
119
- } | {
120
- src: "mediaPrintActorLogic";
134
+ src: "mediaPrint";
121
135
  logic: MediaPrintActorLogic;
122
136
  id: "mediaPrint";
123
137
  } | {
124
- src: "editorActor";
138
+ src: "editor";
125
139
  logic: EditorActorLogic;
126
140
  id: "editor";
141
+ } | {
142
+ src: "navigationPanel";
143
+ logic: NavigationPanelActorLogic;
144
+ id: "navigationPanel";
127
145
  }, never, {
128
146
  type: "isReady";
129
147
  params: unknown;
@@ -154,6 +172,9 @@ export declare const setViewportCenter: (params?: {
154
172
  } | {
155
173
  type: "enabled: DynamicViewWalkthrough";
156
174
  params: unknown;
175
+ } | {
176
+ type: "enabled: NavigationPanel";
177
+ params: unknown;
157
178
  } | {
158
179
  type: "focus.node: autoUnfocus";
159
180
  params: unknown;
@@ -166,6 +187,9 @@ export declare const setViewportCenter: (params?: {
166
187
  } | {
167
188
  type: "is dynamic view";
168
189
  params: unknown;
190
+ } | {
191
+ type: "is dynamic view in sequence variant";
192
+ params: unknown;
169
193
  } | {
170
194
  type: "is same view";
171
195
  params: unknown;
@@ -184,6 +208,9 @@ export declare const setViewportCenter: (params?: {
184
208
  } | {
185
209
  type: "click: focused node";
186
210
  params: unknown;
211
+ } | {
212
+ type: "click: node.type = seq-subflow";
213
+ params: unknown;
187
214
  } | {
188
215
  type: "click: node has connections";
189
216
  params: unknown;
@@ -199,25 +226,29 @@ export declare const fitDiagram: (params?: {
199
226
  duration?: number;
200
227
  bounds?: BBox;
201
228
  }) => ActionFunction<Context, Events, Events, unknown, {
202
- src: "hotkeyActorLogic";
229
+ src: "search";
230
+ logic: SearchActorLogic;
231
+ id: "search";
232
+ } | {
233
+ src: "hotkey";
203
234
  logic: HotkeyActorLogic;
204
235
  id: "hotkey";
205
236
  } | {
206
- src: "overlaysActorLogic";
237
+ src: "overlays";
207
238
  logic: OverlaysActorLogic;
208
239
  id: "overlays";
209
240
  } | {
210
- src: "searchActorLogic";
211
- logic: SearchActorLogic;
212
- id: "search";
213
- } | {
214
- src: "mediaPrintActorLogic";
241
+ src: "mediaPrint";
215
242
  logic: MediaPrintActorLogic;
216
243
  id: "mediaPrint";
217
244
  } | {
218
- src: "editorActor";
245
+ src: "editor";
219
246
  logic: EditorActorLogic;
220
247
  id: "editor";
248
+ } | {
249
+ src: "navigationPanel";
250
+ logic: NavigationPanelActorLogic;
251
+ id: "navigationPanel";
221
252
  }, never, {
222
253
  type: "isReady";
223
254
  params: unknown;
@@ -248,6 +279,9 @@ export declare const fitDiagram: (params?: {
248
279
  } | {
249
280
  type: "enabled: DynamicViewWalkthrough";
250
281
  params: unknown;
282
+ } | {
283
+ type: "enabled: NavigationPanel";
284
+ params: unknown;
251
285
  } | {
252
286
  type: "focus.node: autoUnfocus";
253
287
  params: unknown;
@@ -260,6 +294,9 @@ export declare const fitDiagram: (params?: {
260
294
  } | {
261
295
  type: "is dynamic view";
262
296
  params: unknown;
297
+ } | {
298
+ type: "is dynamic view in sequence variant";
299
+ params: unknown;
263
300
  } | {
264
301
  type: "is same view";
265
302
  params: unknown;
@@ -278,6 +315,9 @@ export declare const fitDiagram: (params?: {
278
315
  } | {
279
316
  type: "click: focused node";
280
317
  params: unknown;
318
+ } | {
319
+ type: "click: node.type = seq-subflow";
320
+ params: unknown;
281
321
  } | {
282
322
  type: "click: node has connections";
283
323
  params: unknown;
@@ -288,26 +328,32 @@ export declare const fitDiagram: (params?: {
288
328
  type: "click: active walkthrough step";
289
329
  params: unknown;
290
330
  }, never, EmittedEvents>;
291
- export declare const fitFocusedBounds: () => ActionFunction<Context, Events, Events, unknown, {
292
- src: "hotkeyActorLogic";
331
+ export declare const fitFocusedBounds: (params?: {
332
+ duration?: number;
333
+ }) => ActionFunction<Context, Events, Events, unknown, {
334
+ src: "search";
335
+ logic: SearchActorLogic;
336
+ id: "search";
337
+ } | {
338
+ src: "hotkey";
293
339
  logic: HotkeyActorLogic;
294
340
  id: "hotkey";
295
341
  } | {
296
- src: "overlaysActorLogic";
342
+ src: "overlays";
297
343
  logic: OverlaysActorLogic;
298
344
  id: "overlays";
299
345
  } | {
300
- src: "searchActorLogic";
301
- logic: SearchActorLogic;
302
- id: "search";
303
- } | {
304
- src: "mediaPrintActorLogic";
346
+ src: "mediaPrint";
305
347
  logic: MediaPrintActorLogic;
306
348
  id: "mediaPrint";
307
349
  } | {
308
- src: "editorActor";
350
+ src: "editor";
309
351
  logic: EditorActorLogic;
310
352
  id: "editor";
353
+ } | {
354
+ src: "navigationPanel";
355
+ logic: NavigationPanelActorLogic;
356
+ id: "navigationPanel";
311
357
  }, never, {
312
358
  type: "isReady";
313
359
  params: unknown;
@@ -338,6 +384,9 @@ export declare const fitFocusedBounds: () => ActionFunction<Context, Events, Eve
338
384
  } | {
339
385
  type: "enabled: DynamicViewWalkthrough";
340
386
  params: unknown;
387
+ } | {
388
+ type: "enabled: NavigationPanel";
389
+ params: unknown;
341
390
  } | {
342
391
  type: "focus.node: autoUnfocus";
343
392
  params: unknown;
@@ -350,6 +399,9 @@ export declare const fitFocusedBounds: () => ActionFunction<Context, Events, Eve
350
399
  } | {
351
400
  type: "is dynamic view";
352
401
  params: unknown;
402
+ } | {
403
+ type: "is dynamic view in sequence variant";
404
+ params: unknown;
353
405
  } | {
354
406
  type: "is same view";
355
407
  params: unknown;
@@ -368,6 +420,9 @@ export declare const fitFocusedBounds: () => ActionFunction<Context, Events, Eve
368
420
  } | {
369
421
  type: "click: focused node";
370
422
  params: unknown;
423
+ } | {
424
+ type: "click: node.type = seq-subflow";
425
+ params: unknown;
371
426
  } | {
372
427
  type: "click: node has connections";
373
428
  params: unknown;
@@ -391,49 +446,57 @@ export declare const raiseFitDiagram: (params?: {
391
446
  }) => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
392
447
  export declare const raiseUpdateView: (view?: DiagramView) => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
393
448
  export declare const assignViewportBefore: (viewport?: Viewport | false) => ActionFunction<Context, Events, Events, undefined, {
394
- src: "hotkeyActorLogic";
449
+ src: "search";
450
+ logic: SearchActorLogic;
451
+ id: "search";
452
+ } | {
453
+ src: "hotkey";
395
454
  logic: HotkeyActorLogic;
396
455
  id: "hotkey";
397
456
  } | {
398
- src: "overlaysActorLogic";
457
+ src: "overlays";
399
458
  logic: OverlaysActorLogic;
400
459
  id: "overlays";
401
460
  } | {
402
- src: "searchActorLogic";
403
- logic: SearchActorLogic;
404
- id: "search";
405
- } | {
406
- src: "mediaPrintActorLogic";
461
+ src: "mediaPrint";
407
462
  logic: MediaPrintActorLogic;
408
463
  id: "mediaPrint";
409
464
  } | {
410
- src: "editorActor";
465
+ src: "editor";
411
466
  logic: EditorActorLogic;
412
467
  id: "editor";
468
+ } | {
469
+ src: "navigationPanel";
470
+ logic: NavigationPanelActorLogic;
471
+ id: "navigationPanel";
413
472
  }, never, never, never, never>;
414
473
  export declare const returnViewportBefore: (params?: {
415
474
  delay?: number;
416
475
  duration?: number;
417
476
  }) => ActionFunction<Context, Events, Events, undefined, {
418
- src: "hotkeyActorLogic";
477
+ src: "search";
478
+ logic: SearchActorLogic;
479
+ id: "search";
480
+ } | {
481
+ src: "hotkey";
419
482
  logic: HotkeyActorLogic;
420
483
  id: "hotkey";
421
484
  } | {
422
- src: "overlaysActorLogic";
485
+ src: "overlays";
423
486
  logic: OverlaysActorLogic;
424
487
  id: "overlays";
425
488
  } | {
426
- src: "searchActorLogic";
427
- logic: SearchActorLogic;
428
- id: "search";
429
- } | {
430
- src: "mediaPrintActorLogic";
489
+ src: "mediaPrint";
431
490
  logic: MediaPrintActorLogic;
432
491
  id: "mediaPrint";
433
492
  } | {
434
- src: "editorActor";
493
+ src: "editor";
435
494
  logic: EditorActorLogic;
436
495
  id: "editor";
496
+ } | {
497
+ src: "navigationPanel";
498
+ logic: NavigationPanelActorLogic;
499
+ id: "navigationPanel";
437
500
  }, never, {
438
501
  type: "isReady";
439
502
  params: unknown;
@@ -464,6 +527,9 @@ export declare const returnViewportBefore: (params?: {
464
527
  } | {
465
528
  type: "enabled: DynamicViewWalkthrough";
466
529
  params: unknown;
530
+ } | {
531
+ type: "enabled: NavigationPanel";
532
+ params: unknown;
467
533
  } | {
468
534
  type: "focus.node: autoUnfocus";
469
535
  params: unknown;
@@ -476,6 +542,9 @@ export declare const returnViewportBefore: (params?: {
476
542
  } | {
477
543
  type: "is dynamic view";
478
544
  params: unknown;
545
+ } | {
546
+ type: "is dynamic view in sequence variant";
547
+ params: unknown;
479
548
  } | {
480
549
  type: "is same view";
481
550
  params: unknown;
@@ -494,6 +563,9 @@ export declare const returnViewportBefore: (params?: {
494
563
  } | {
495
564
  type: "click: focused node";
496
565
  params: unknown;
566
+ } | {
567
+ type: "click: node.type = seq-subflow";
568
+ params: unknown;
497
569
  } | {
498
570
  type: "click: node has connections";
499
571
  params: unknown;