@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
@@ -1,13 +0,0 @@
1
- import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
2
- import { editor } from './actor.editor';
3
- import { layouter } from './actor.layouter';
4
- import { Context, EmittedEvents, Events } from './actor.types';
5
- export interface AdhocEditorLogic extends StateMachine<Context, Events, any, any, any, any, any, {
6
- layouter: keyof typeof layouter['states'];
7
- editor: keyof typeof editor['states'];
8
- }, any, any, EmittedEvents, any, any, any> {
9
- }
10
- export declare const adhocEditorLogic: AdhocEditorLogic;
11
- export type AdhocEditorSnapshot = SnapshotFrom<AdhocEditorLogic>;
12
- export interface AdhocEditorActorRef extends ActorRef<AdhocEditorSnapshot, Events, EmittedEvents> {
13
- }
@@ -1,56 +0,0 @@
1
- import { Context, Events, AdhocViewServiceActor, EmittedEvents } from './actor.types';
2
- import { ActionFunction } from 'xstate';
3
- export declare const editor: {
4
- initial: string;
5
- states: {
6
- idle: {
7
- id: string;
8
- on: {
9
- 'select.open': {
10
- target: "#selecting";
11
- };
12
- 'toggle.rule': {
13
- target: "#layouting";
14
- actions: ActionFunction<Context, Events, Events, undefined, {
15
- src: "service";
16
- logic: AdhocViewServiceActor;
17
- id: string | undefined;
18
- }, never, never, never, never>;
19
- };
20
- 'delete.rule': {
21
- target: "#layouting";
22
- actions: ActionFunction<Context, Events, Events, undefined, {
23
- src: "service";
24
- logic: AdhocViewServiceActor;
25
- id: string | undefined;
26
- }, never, never, never, never>;
27
- };
28
- };
29
- };
30
- selecting: {
31
- id: string;
32
- on: {
33
- 'toggle.element': {
34
- actions: ActionFunction<Context, Events, Events, undefined, {
35
- src: "service";
36
- logic: AdhocViewServiceActor;
37
- id: string | undefined;
38
- }, never, {
39
- type: "hasView";
40
- params: unknown;
41
- }, never, EmittedEvents>[];
42
- };
43
- 'select.close': {
44
- target: "#idle";
45
- };
46
- };
47
- };
48
- layouting: {
49
- id: string;
50
- always: {
51
- target: "#idle";
52
- actions: ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
53
- };
54
- };
55
- };
56
- };
@@ -1,167 +0,0 @@
1
- import "../../_virtual/_rolldown/runtime.js";
2
- import { machine } from "./actor.types.js";
3
- import { emitViewUpdate } from "./actor.layouter.js";
4
- import { last } from "remeda";
5
- import { ModelFqnExpr } from "@likec4/core";
6
- import { invariant as invariant$1, nonexhaustive as nonexhaustive$1, stringHash } from "@likec4/core/utils";
7
- import { assertEvent } from "xstate";
8
- //#region src/adhoc-editor/state/actor.editor.ts
9
- var to = {
10
- idle: { target: "#idle" },
11
- selecting: { target: "#selecting" },
12
- layouting: { target: "#layouting" }
13
- };
14
- function nextId({ rules }, salt = "") {
15
- return stringHash((rules.at(-1)?.id ?? (/* @__PURE__ */ new Date()).toISOString()) + salt);
16
- }
17
- var isRuleOf = (fqn) => (rule) => {
18
- return ModelFqnExpr.isModelRef(rule.expr) && rule.expr.ref.model === fqn;
19
- };
20
- var isIncludeOf = (fqn) => (rule) => {
21
- return rule.type === "include" && ModelFqnExpr.isModelRef(rule.expr) && rule.expr.ref.model === fqn;
22
- };
23
- var isExcludeOf = (fqn) => (rule) => {
24
- return rule.type === "exclude" && ModelFqnExpr.isModelRef(rule.expr) && rule.expr.ref.model === fqn;
25
- };
26
- function deriveElementState(id, { rules, view }) {
27
- const ruleOf = rules.find(isRuleOf(id));
28
- if (ruleOf && !ruleOf.enabled) return {
29
- state: "disabled",
30
- ruleId: ruleOf.id
31
- };
32
- const isIncludedInView = view ? view.nodes.some((node) => node.modelRef === id) : false;
33
- const includeRule = rules.find(isIncludeOf(id));
34
- const excludeRule = rules.find(isExcludeOf(id));
35
- switch (true) {
36
- case includeRule && isIncludedInView: return {
37
- state: "include-explicit",
38
- ruleId: includeRule.id
39
- };
40
- case !includeRule && isIncludedInView: return {
41
- state: "include-implicit",
42
- ruleId: void 0
43
- };
44
- case includeRule && !isIncludedInView: return {
45
- state: "not-present",
46
- ruleId: includeRule.id
47
- };
48
- case !!excludeRule: return {
49
- state: "exclude",
50
- ruleId: excludeRule.id
51
- };
52
- default:
53
- invariant$1(isIncludedInView === false, "Element not in view should not be included or excluded by any rule");
54
- return {
55
- state: "not-present",
56
- ruleId: void 0
57
- };
58
- }
59
- }
60
- var enableRule = (ruleId) => machine.assign(({ context }) => {
61
- return { rules: context.rules.map((rule) => {
62
- if (rule.id === ruleId && !rule.enabled) return {
63
- ...rule,
64
- enabled: true
65
- };
66
- return rule;
67
- }) };
68
- });
69
- var addElementRules = (fqn, type) => machine.assign(({ context }) => {
70
- return { rules: [...context.rules, {
71
- id: nextId(context, type + fqn),
72
- expr: { ref: { model: fqn } },
73
- enabled: true,
74
- type
75
- }] };
76
- });
77
- var removeElementRules = (fqn) => machine.assign(({ context }) => {
78
- const isRule = isRuleOf(fqn);
79
- return { rules: context.rules.filter((rule) => {
80
- return !isRule(rule);
81
- }) };
82
- });
83
- var toggleElement = () => machine.enqueueActions(({ context, event, enqueue }) => {
84
- assertEvent(event, "toggle.element");
85
- const isRuleOfTheElement = isRuleOf(event.id);
86
- const lastRule = last(context.rules);
87
- if (lastRule && isRuleOfTheElement(lastRule)) {
88
- enqueue.assign({ rules: context.rules.slice(0, -1) });
89
- return;
90
- }
91
- const state = deriveElementState(event.id, context);
92
- switch (state.state) {
93
- case "disabled":
94
- enqueue(enableRule(state.ruleId));
95
- break;
96
- case "not-present":
97
- enqueue(removeElementRules(event.id));
98
- enqueue(addElementRules(event.id, "include"));
99
- break;
100
- case "include-implicit":
101
- enqueue(removeElementRules(event.id));
102
- enqueue(addElementRules(event.id, "exclude"));
103
- break;
104
- case "include-explicit":
105
- case "exclude":
106
- enqueue(removeElementRules(event.id));
107
- break;
108
- default: nonexhaustive$1(state);
109
- }
110
- });
111
- var toggleRule = () => machine.assign(({ context, event }) => {
112
- assertEvent(event, "toggle.rule");
113
- return { rules: context.rules.map((rule) => {
114
- if (rule.id === event.ruleId) return {
115
- ...rule,
116
- enabled: !rule.enabled
117
- };
118
- return rule;
119
- }) };
120
- });
121
- var deleteRule = () => machine.assign(({ context, event }) => {
122
- assertEvent(event, "delete.rule");
123
- return { rules: context.rules.filter((rule) => rule.id !== event.ruleId) };
124
- });
125
- var scheduleLayout = () => machine.raise({ type: "layout" });
126
- var idle = machine.createStateConfig({
127
- id: "idle",
128
- on: {
129
- "select.open": { ...to.selecting },
130
- "toggle.rule": {
131
- actions: toggleRule(),
132
- ...to.layouting
133
- },
134
- "delete.rule": {
135
- actions: deleteRule(),
136
- ...to.layouting
137
- }
138
- }
139
- });
140
- var selecting = machine.createStateConfig({
141
- id: "selecting",
142
- on: {
143
- "toggle.element": { actions: [
144
- toggleElement(),
145
- emitViewUpdate(),
146
- scheduleLayout()
147
- ] },
148
- "select.close": { ...to.idle }
149
- }
150
- });
151
- var layouting = machine.createStateConfig({
152
- id: "layouting",
153
- always: {
154
- actions: scheduleLayout(),
155
- ...to.idle
156
- }
157
- });
158
- var editor = machine.createStateConfig({
159
- initial: "selecting",
160
- states: {
161
- idle,
162
- selecting,
163
- layouting
164
- }
165
- });
166
- //#endregion
167
- export { editor };
@@ -1,14 +0,0 @@
1
- import { createContext, machine } from "./actor.types.js";
2
- import { layouter } from "./actor.layouter.js";
3
- import { editor } from "./actor.editor.js";
4
- var adhocEditorLogic = machine.createMachine({
5
- id: "adhoc-editor",
6
- context: createContext,
7
- type: "parallel",
8
- states: {
9
- layouter,
10
- editor
11
- }
12
- });
13
- //#endregion
14
- export { adhocEditorLogic };
@@ -1,51 +0,0 @@
1
- import { ActionFunction, LogAction, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, DoneActorEvent, ErrorActorEvent } from 'xstate';
2
- import { Context, Events, EmittedEvents, AdhocViewServiceActor } from './actor.types';
3
- import { AdhocViewPredicate } from '@likec4/core/compute-view';
4
- import { LayoutedElementView } from '@likec4/core';
5
- export declare const emitViewUpdate: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>;
6
- export declare const layouter: {
7
- initial: string;
8
- states: {
9
- idle: {
10
- id: string;
11
- entry: LogAction<Context, Events, undefined, Events>;
12
- exit: LogAction<Context, Events, undefined, Events>;
13
- on: {
14
- layout: {
15
- target: "#layouter-call";
16
- };
17
- };
18
- };
19
- call: {
20
- id: string;
21
- entry: LogAction<Context, Events, undefined, Events>;
22
- exit: LogAction<Context, Events, undefined, Events>;
23
- invoke: {
24
- src: "service";
25
- input: ({ context }: {
26
- context: Context;
27
- event: Events;
28
- self: ActorRef<MachineSnapshot<Context, Events, Record<string, AnyActorRef>, StateValue, string, unknown, any, any>, Events, AnyEventObject>;
29
- }) => {
30
- predicates: AdhocViewPredicate[];
31
- };
32
- onDone: {
33
- target: "#layouter-idle";
34
- actions: ( ActionFunction<Context, DoneActorEvent<{
35
- view: LayoutedElementView;
36
- }, string>, Events, undefined, {
37
- src: "service";
38
- logic: AdhocViewServiceActor;
39
- id: string | undefined;
40
- }, never, never, never, never> | ActionFunction<Context, DoneActorEvent<{
41
- view: LayoutedElementView;
42
- }, string>, Events, undefined, never, never, never, never, EmittedEvents>)[];
43
- };
44
- onError: {
45
- target: "#layouter-idle";
46
- actions: LogAction<Context, ErrorActorEvent<unknown, string>, undefined, Events>[];
47
- };
48
- };
49
- };
50
- };
51
- };
@@ -1,54 +0,0 @@
1
- import "../../_virtual/_rolldown/runtime.js";
2
- import { machine, ruleToPredicate } from "./actor.types.js";
3
- import { filter, map, piped } from "remeda";
4
- import { objectHash } from "@likec4/core/utils";
5
- import { assign, emit, log } from "xstate";
6
- //#region src/adhoc-editor/state/actor.layouter.ts
7
- var to = {
8
- idle: { target: "#layouter-idle" },
9
- call: { target: "#layouter-call" }
10
- };
11
- var idle = machine.createStateConfig({
12
- id: to.idle.target.substring(1),
13
- entry: log("entry idle ->"),
14
- exit: log(" -> idle exit "),
15
- on: { "layout": { ...to.call } }
16
- });
17
- var emitViewUpdate = () => machine.emit({ type: "view.update" });
18
- var selectEnabled = piped(filter((rule) => rule.enabled), map(ruleToPredicate));
19
- var call = machine.createStateConfig({
20
- id: to.call.target.substring(1),
21
- entry: log("entry call ->"),
22
- exit: log(" -> call exit "),
23
- invoke: {
24
- src: "service",
25
- input: ({ context }) => ({ predicates: selectEnabled(context.rules) }),
26
- onDone: {
27
- actions: [assign({
28
- view: ({ context, event }) => {
29
- const id = objectHash(selectEnabled(context.rules));
30
- return {
31
- ...event.output.view,
32
- hash: id,
33
- id
34
- };
35
- },
36
- error: void 0
37
- }), emit({ type: "view.update" })],
38
- ...to.idle
39
- },
40
- onError: {
41
- actions: [log(({ event }) => `error: ${event.error}`), assign({ error: ({ event }) => `${event.error}` })],
42
- ...to.idle
43
- }
44
- }
45
- });
46
- var layouter = machine.createStateConfig({
47
- initial: "idle",
48
- states: {
49
- idle,
50
- call
51
- }
52
- });
53
- //#endregion
54
- export { emitViewUpdate, layouter };
@@ -1,63 +0,0 @@
1
- import { AdhocViewPredicate } from '@likec4/core/compute-view';
2
- import { Fqn, LayoutedElementView, ModelFqnExpr } from '@likec4/core/types';
3
- import { PromiseActorLogic } from 'xstate/actors';
4
- import { SetupReturn, NonReducibleUnknown, MetaObject } from 'xstate';
5
- type CalcAdhocViewInput = {
6
- predicates: AdhocViewPredicate[];
7
- };
8
- type CalcAdhocViewOutput = {
9
- view: LayoutedElementView;
10
- };
11
- export type AdhocViewService = {
12
- process: (input: CalcAdhocViewInput) => Promise<CalcAdhocViewOutput>;
13
- };
14
- export type AdhocViewServiceActor = PromiseActorLogic<CalcAdhocViewOutput, CalcAdhocViewInput>;
15
- export type Input = {};
16
- export type AdhocRule = {
17
- id: string;
18
- expr: ModelFqnExpr.Ref;
19
- enabled: boolean;
20
- type: 'include' | 'exclude';
21
- };
22
- export declare function ruleToPredicate(rule: AdhocRule): AdhocViewPredicate;
23
- export interface Context {
24
- view: LayoutedElementView | null;
25
- error: string | undefined;
26
- rules: AdhocRule[];
27
- }
28
- export type EmittedEvents = {
29
- type: 'navigate.to';
30
- } | {
31
- type: 'view.update';
32
- } | {
33
- type: 'click.element';
34
- id: Fqn;
35
- };
36
- export type Events = {
37
- type: 'toggle.element';
38
- id: Fqn;
39
- } | {
40
- type: 'click.element';
41
- id: Fqn;
42
- } | {
43
- type: 'toggle.rule';
44
- ruleId: string;
45
- } | {
46
- type: 'delete.rule';
47
- ruleId: string;
48
- } | {
49
- type: 'select.open';
50
- } | {
51
- type: 'select.close';
52
- } | {
53
- type: 'layout';
54
- } | {
55
- type: 'dispose';
56
- };
57
- export declare const machine: SetupReturn<Context, Events, {
58
- service: AdhocViewServiceActor;
59
- }, {}, {}, {
60
- hasView: unknown;
61
- }, never, "hasView", NonReducibleUnknown, NonReducibleUnknown, EmittedEvents, MetaObject>;
62
- export declare function createContext(): Context;
63
- export {};
@@ -1,25 +0,0 @@
1
- import "../../_virtual/_rolldown/runtime.js";
2
- import { setup } from "xstate";
3
- //#region src/adhoc-editor/state/actor.types.ts
4
- function ruleToPredicate(rule) {
5
- return rule.type === "include" ? { include: [rule.expr] } : { exclude: [rule.expr] };
6
- }
7
- var machine = setup({
8
- types: {
9
- context: {},
10
- tags: "",
11
- events: {},
12
- emitted: {}
13
- },
14
- actors: { service: {} },
15
- guards: { hasView: ({ context }) => context.view !== null }
16
- });
17
- function createContext() {
18
- return {
19
- view: null,
20
- error: void 0,
21
- rules: []
22
- };
23
- }
24
- //#endregion
25
- export { createContext, machine, ruleToPredicate };
@@ -1,95 +0,0 @@
1
- import { Fqn } from '@likec4/core';
2
- import { StoreSnapshot, Store } from '@xstate/store';
3
- import { TreeCollection } from '@zag-js/collection';
4
- import { PropsWithChildren } from 'react';
5
- import { TreeNodeData } from '../useElementsTree';
6
- type EditorPanelState = {
7
- searchInput: string;
8
- expandedValue: string[];
9
- collection: TreeCollection<TreeNodeData>;
10
- };
11
- declare const createEditorPanelStore: ({ initial, sideEffects, }: {
12
- initial: TreeCollection<TreeNodeData>;
13
- sideEffects: {
14
- onElementStateClick: (payload: {
15
- id: Fqn;
16
- }) => void;
17
- };
18
- }) => Store<EditorPanelState, {
19
- inputChange: {
20
- value: string;
21
- };
22
- inputKeyDown: {};
23
- modelUpdate: {
24
- collection: TreeCollection<TreeNodeData>;
25
- };
26
- elementClick: {
27
- id: Fqn;
28
- };
29
- }, {
30
- type: "inputKeyDown";
31
- }>;
32
- export type EditorPanelStore = ReturnType<typeof createEditorPanelStore>;
33
- export declare const EditorPanelStoreProvider: (props: PropsWithChildren) => import("react").JSX.Element;
34
- export declare function selectEditorPanelState<T>(selector: (state: EditorPanelState) => T): [
35
- selector: (snapshot: StoreSnapshot<EditorPanelState>) => T,
36
- compare: (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean
37
- ];
38
- export declare function selectEditorPanelState<T>(selector: (state: EditorPanelState) => T, compare: (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean): [
39
- selector: (snapshot: StoreSnapshot<EditorPanelState>) => T,
40
- compare: (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean
41
- ];
42
- export declare function useEditorPanelStore(): Store<EditorPanelState, {
43
- inputChange: {
44
- value: string;
45
- };
46
- inputKeyDown: {};
47
- modelUpdate: {
48
- collection: TreeCollection<TreeNodeData>;
49
- };
50
- elementClick: {
51
- id: Fqn;
52
- };
53
- }, {
54
- type: "inputKeyDown";
55
- }>;
56
- export declare function useEditorPanelState<T>(arg1: readonly [
57
- (snapshot: StoreSnapshot<EditorPanelState>) => T,
58
- (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean
59
- ]): T;
60
- export declare function useEditorPanelState<T>(selector: (snapshot: StoreSnapshot<EditorPanelState>) => T, compare?: (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean): T;
61
- /**
62
- * Hook to subscribe to editor panel events
63
- * @param args - The event name and handler function
64
- * @example
65
- * useOnEditorPanelEvent('inputKeyDown', () => {
66
- * console.log('Input key down event')
67
- * })
68
- */
69
- export declare function useOnEditorPanelEvent(...args: Parameters<EditorPanelStore['on']>): void;
70
- /**
71
- * Hook to access the editor panel store trigger or create a wrapped trigger function
72
- *
73
- * @overload
74
- * @returns The store trigger object
75
- *
76
- * @overload
77
- * @template T - The parameter types for the wrapped trigger function
78
- * @param trigger - A function that receives the store trigger as the first parameter
79
- * @returns A wrapped function that calls the trigger with the store trigger prepended
80
- *
81
- * @example
82
- * // Get the trigger object directly
83
- * const trigger = useEditorPanelTrigger()
84
- * trigger.inputChange({ value: 'search' })
85
- *
86
- * @example
87
- * // Create a wrapped trigger function
88
- * const handleInputChange = useEditorPanelTrigger((trigger, value: string) => {
89
- * trigger.inputChange({ value })
90
- * })
91
- * handleInputChange('search')
92
- */
93
- export declare function useEditorPanelTrigger(): EditorPanelStore['trigger'];
94
- export declare function useEditorPanelTrigger<T extends any[]>(trigger: (...params: [trigger: EditorPanelStore['trigger'], ...T]) => void): (...args: T) => void;
95
- export {};
@@ -1,124 +0,0 @@
1
- import "../../_virtual/_rolldown/runtime.js";
2
- import { useCallbackRef } from "../../hooks/useCallbackRef.js";
3
- import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
4
- import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
5
- import { useAdhocEditorActor } from "../hooks.js";
6
- import { createTreeCollection } from "../useElementsTree.js";
7
- import { deriveElementStates } from "./utils.js";
8
- import { createContext, useContext, useEffect, useMemo, useRef } from "react";
9
- import { jsx } from "react/jsx-runtime";
10
- import { hasAtLeast } from "remeda";
11
- import { createStore, shallowEqual } from "@xstate/store";
12
- import { useSelector } from "@xstate/store/react";
13
- //#region src/adhoc-editor/state/panel.tsx
14
- var createEditorPanelStore = ({ initial, sideEffects }) => createStore({
15
- context: {
16
- searchInput: "",
17
- expandedValue: [],
18
- collection: initial
19
- },
20
- emits: { inputKeyDown: (payload) => {} },
21
- on: {
22
- "inputChange": (context, event) => {
23
- return {
24
- ...context,
25
- searchInput: event.value
26
- };
27
- },
28
- "inputKeyDown": (context, event, enqueue) => {
29
- enqueue.emit.inputKeyDown();
30
- },
31
- "modelUpdate": (context, event) => {
32
- return {
33
- ...context,
34
- collection: event.collection
35
- };
36
- },
37
- "elementClick": (context, event, enqueue) => {
38
- const current = context.collection.findNode(event.id);
39
- const path = context.collection.getIndexPath(event.id);
40
- if (!current || !path) return context;
41
- enqueue.effect(() => {
42
- sideEffects.onElementStateClick({ id: event.id });
43
- });
44
- return context;
45
- }
46
- }
47
- });
48
- var EditorPanelStoreContext = createContext(null);
49
- var EditorPanelStoreProvider = (props) => {
50
- const likec4model = useLikeC4Model();
51
- const likec4modelRef = useRef(likec4model);
52
- likec4modelRef.current = likec4model;
53
- const actorRef = useAdhocEditorActor();
54
- const store = useMemo(() => createEditorPanelStore({
55
- initial: createTreeCollection(likec4model),
56
- sideEffects: { onElementStateClick({ id }) {
57
- actorRef.send({
58
- type: "toggle.element",
59
- id
60
- });
61
- } }
62
- }), [actorRef]);
63
- useUpdateEffect(() => {
64
- store.trigger.modelUpdate({ collection: createTreeCollection(likec4model, deriveElementStates(actorRef.getSnapshot().context)) });
65
- }, [likec4model]);
66
- useEffect(() => {
67
- const subscription = actorRef.on("view.update", () => {
68
- store.trigger.modelUpdate({ collection: createTreeCollection(likec4modelRef.current, deriveElementStates(actorRef.getSnapshot().context)) });
69
- });
70
- return () => {
71
- subscription.unsubscribe();
72
- };
73
- }, [actorRef]);
74
- return /* @__PURE__ */ jsx(EditorPanelStoreContext.Provider, {
75
- value: store,
76
- children: props.children
77
- });
78
- };
79
- function selectEditorPanelState(selector, compare) {
80
- return [(snapshot) => selector(snapshot.context), compare ?? shallowEqual];
81
- }
82
- function useEditorPanelStore() {
83
- return useContext(EditorPanelStoreContext);
84
- }
85
- function useEditorPanelState(...args) {
86
- const store = useEditorPanelStore();
87
- let selector;
88
- let compare;
89
- if (args.length === 2) [selector, compare] = args;
90
- else if (args.length === 1 && Array.isArray(args[0]) && hasAtLeast(args[0], 2)) [selector, compare] = args[0];
91
- else if (args.length === 1 && Array.isArray(args[0]) && hasAtLeast(args[0], 1)) [selector, compare] = [args[0], shallowEqual];
92
- else if (args.length === 1 && typeof args[0] === "function") [selector, compare] = [args[0], shallowEqual];
93
- else throw new Error("Invalid arguments for useEditorPanelState");
94
- return useSelector(store, selector, compare);
95
- }
96
- /**
97
- * Hook to subscribe to editor panel events
98
- * @param args - The event name and handler function
99
- * @example
100
- * useOnEditorPanelEvent('inputKeyDown', () => {
101
- * console.log('Input key down event')
102
- * })
103
- */
104
- function useOnEditorPanelEvent(...args) {
105
- const store = useEditorPanelStore();
106
- const event = args[0];
107
- const handler = useCallbackRef(args[1]);
108
- useEffect(() => {
109
- const subscription = store.on(event, handler);
110
- return () => {
111
- subscription.unsubscribe();
112
- };
113
- }, [event, store]);
114
- }
115
- function useEditorPanelTrigger(...args) {
116
- const store = useEditorPanelStore();
117
- if (args.length === 0) return store.trigger;
118
- const trigger = args[0];
119
- return useCallbackRef((...args) => {
120
- trigger(...[store.trigger, ...args]);
121
- });
122
- }
123
- //#endregion
124
- export { EditorPanelStoreProvider, selectEditorPanelState, useEditorPanelState, useEditorPanelTrigger, useOnEditorPanelEvent };
@@ -1,17 +0,0 @@
1
- import { Fqn } from '@likec4/core/types';
2
- import { Context } from './actor.types';
3
- /**
4
- * Derives the state of elements in the view based on the active rules.
5
- *
6
- * Categorizes elements into:
7
- * - Explicitly included: Elements that are both in the view and have an enabled include rule
8
- * - Implicitly included: Elements in the view without an explicit include rule
9
- * - Excluded: Elements with an enabled exclude rule that are not in the view
10
- */
11
- export declare function deriveElementStates({ rules, view }: Pick<Context, 'rules' | 'view'>): {
12
- includedExplicit: Set<Fqn>;
13
- includedImplicit: Set<Fqn>;
14
- excluded: Set<Fqn>;
15
- disabled: Set<Fqn>;
16
- };
17
- export type ElementStates = ReturnType<typeof deriveElementStates>;