@likec4/diagram 1.42.1 → 1.44.0

package/dist/likec4diagram/state/machine.state.ready.js

@@ -0,0 +1,437 @@
+import { isStepEdgeId, getParallelStepsPrefix } from '@likec4/core';
+import { clamp, first } from 'remeda';
+import { assertEvent } from 'xstate';
+import { SeqParallelAreaColor } from '../xyflow-sequence/const.js';
+import { navigateForward, navigateBack } from './assign.js';
+import { cancelFitDiagram, undimEverything, tagHighlight, notationsHighlight, onEdgeDoubleClick, onEdgeMouseLeave, onEdgeMouseEnter, onNodeMouseLeave, onNodeMouseEnter, toggleFeature, ensureSyncLayout, emitOpenSource, openElementDetails, raiseFitDiagram, stopSyncLayout, disableCompareWithLatest, startEditing, resetEdgesControlPoints, stopEditing, layoutAlign, updateActiveWalkthroughState, xyflow, emitEdgeClick, emitWalkthroughStep, emitWalkthroughStarted, emitWalkthroughStopped, focusOnNodesAndEdges, resetLastClickedNode, emitPaneClick, assignFocusedNode, openSourceOfFocusedOrLastClickedNode, emitNodeClick, assignLastClickedNode } from './machine.actions.js';
+import { machine } from './machine.setup.js';
+import { typedSystem } from './utils.js';
+import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
+import { x as xstateGuards_cjsExports } from '../../_virtual/xstate-guards.cjs.js';
+import { Base } from '../../base/Base.js';
+
+const navigating = "#navigating";
+const idle = machine.createStateConfig({
+  id: "idle",
+  on: {
+    "xyflow.nodeClick": [
+      {
+        guard: xstateGuards_cjsExports.and([
+          "enabled: FocusMode",
+          "click: node has connections",
+          xstateGuards_cjsExports.or([
+            "click: same node",
+            "click: selected node"
+          ])
+        ]),
+        actions: [
+          assignLastClickedNode(),
+          assignFocusedNode(),
+          emitNodeClick()
+        ],
+        target: "focused"
+      },
+      {
+        guard: xstateGuards_cjsExports.and([
+          "enabled: Readonly",
+          "enabled: ElementDetails",
+          "click: node has modelFqn",
+          xstateGuards_cjsExports.or([
+            "click: same node",
+            "click: selected node"
+          ])
+        ]),
+        actions: [
+          assignLastClickedNode(),
+          openSourceOfFocusedOrLastClickedNode(),
+          openElementDetails(),
+          emitNodeClick()
+        ]
+      },
+      {
+        actions: [
+          assignLastClickedNode(),
+          openSourceOfFocusedOrLastClickedNode(),
+          emitNodeClick()
+        ]
+      }
+    ],
+    "xyflow.paneClick": {
+      actions: [
+        resetLastClickedNode(),
+        emitPaneClick()
+      ]
+    },
+    "xyflow.paneDblClick": {
+      actions: [
+        resetLastClickedNode(),
+        xyflow.fitDiagram(),
+        xstateActions_cjsExports.enqueueActions(({ context, enqueue }) => {
+          enqueue(
+            emitOpenSource({ view: context.view.id })
+          );
+        })
+      ]
+    },
+    "focus.node": {
+      guard: "enabled: FocusMode",
+      actions: assignFocusedNode(),
+      target: "focused"
+    },
+    "xyflow.edgeClick": {
+      guard: xstateGuards_cjsExports.and([
+        "enabled: Readonly",
+        "is dynamic view",
+        "enabled: DynamicViewWalkthrough",
+        "click: selected edge"
+      ]),
+      actions: [
+        xstateActions_cjsExports.raise(({ event }) => ({
+          type: "walkthrough.start",
+          stepId: event.edge.id
+        })),
+        emitEdgeClick()
+      ]
+    }
+  }
+});
+const focused = machine.createStateConfig({
+  entry: [
+    focusOnNodesAndEdges(),
+    xstateActions_cjsExports.assign((s) => ({
+      viewportBeforeFocus: { ...s.context.viewport }
+    })),
+    openSourceOfFocusedOrLastClickedNode(),
+    xstateActions_cjsExports.spawnChild("hotkeyActorLogic", { id: "hotkey" }),
+    xyflow.fitFocusedBounds()
+  ],
+  exit: xstateActions_cjsExports.enqueueActions(({ enqueue, context }) => {
+    enqueue.stopChild("hotkey");
+    if (context.viewportBeforeFocus) {
+      enqueue(xyflow.setViewport({ viewport: context.viewportBeforeFocus }));
+    } else {
+      enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 20 });
+    }
+    enqueue(undimEverything());
+    enqueue.assign({
+      viewportBeforeFocus: null,
+      focusedNode: null
+    });
+  }),
+  on: {
+    "xyflow.nodeClick": [
+      {
+        guard: xstateGuards_cjsExports.and([
+          "click: focused node",
+          "click: node has modelFqn"
+        ]),
+        actions: [
+          openElementDetails(),
+          emitNodeClick()
+        ]
+      },
+      {
+        guard: "click: focused node",
+        actions: emitNodeClick(),
+        target: "#idle"
+      },
+      {
+        actions: [
+          assignLastClickedNode(),
+          xstateActions_cjsExports.raise(({ event }) => ({
+            type: "focus.node",
+            nodeId: event.node.id
+          })),
+          emitNodeClick()
+        ]
+      }
+    ],
+    "focus.node": {
+      actions: [
+        assignFocusedNode(),
+        focusOnNodesAndEdges(),
+        openSourceOfFocusedOrLastClickedNode(),
+        xyflow.fitFocusedBounds()
+      ]
+    },
+    "key.esc": {
+      target: "idle"
+    },
+    "xyflow.paneClick": {
+      actions: [
+        resetLastClickedNode(),
+        emitPaneClick()
+      ],
+      target: "idle"
+    },
+    "notations.unhighlight": {
+      actions: focusOnNodesAndEdges()
+    },
+    "tag.unhighlight": {
+      actions: focusOnNodesAndEdges()
+    }
+  }
+});
+const walkthrough = machine.createStateConfig({
+  entry: [
+    xstateActions_cjsExports.spawnChild("hotkeyActorLogic", { id: "hotkey" }),
+    xstateActions_cjsExports.assign({
+      viewportBeforeFocus: ({ context }) => context.viewport,
+      activeWalkthrough: ({ context, event }) => {
+        assertEvent(event, "walkthrough.start");
+        const stepId = event.stepId ?? first(context.xyedges).id;
+        return {
+          stepId,
+          parallelPrefix: getParallelStepsPrefix(stepId)
+        };
+      }
+    }),
+    updateActiveWalkthroughState(),
+    xyflow.fitFocusedBounds(),
+    emitWalkthroughStarted()
+  ],
+  exit: xstateActions_cjsExports.enqueueActions(({ enqueue, context }) => {
+    enqueue.stopChild("hotkey");
+    if (context.viewportBeforeFocus) {
+      enqueue(xyflow.setViewport({ viewport: context.viewportBeforeFocus }));
+    } else {
+      enqueue(raiseFitDiagram({ delay: 10 }));
+    }
+    if (context.dynamicViewVariant === "sequence" && context.activeWalkthrough?.parallelPrefix) {
+      enqueue.assign({
+        xynodes: context.xynodes.map((n) => {
+          if (n.type === "seq-parallel") {
+            return Base.setData(n, {
+              color: SeqParallelAreaColor.default
+            });
+          }
+          return n;
+        })
+      });
+    }
+    enqueue(undimEverything());
+    enqueue.assign({
+      activeWalkthrough: null,
+      viewportBeforeFocus: null
+    });
+    enqueue(emitWalkthroughStopped());
+  }),
+  on: {
+    "key.esc": {
+      target: "idle"
+    },
+    "key.arrow.left": {
+      actions: xstateActions_cjsExports.raise({ type: "walkthrough.step", direction: "previous" })
+    },
+    "key.arrow.right": {
+      actions: xstateActions_cjsExports.raise({ type: "walkthrough.step", direction: "next" })
+    },
+    "walkthrough.step": {
+      actions: [
+        xstateActions_cjsExports.assign(({ context, event }) => {
+          const { stepId } = context.activeWalkthrough;
+          const stepIndex = context.xyedges.findIndex((e) => e.id === stepId);
+          const nextStepIndex = clamp(event.direction === "next" ? stepIndex + 1 : stepIndex - 1, {
+            min: 0,
+            max: context.xyedges.length - 1
+          });
+          if (nextStepIndex === stepIndex) {
+            return {};
+          }
+          const nextStepId = context.xyedges[nextStepIndex].id;
+          return {
+            activeWalkthrough: {
+              stepId: nextStepId,
+              parallelPrefix: getParallelStepsPrefix(nextStepId)
+            }
+          };
+        }),
+        updateActiveWalkthroughState(),
+        xyflow.fitFocusedBounds(),
+        emitWalkthroughStep()
+      ]
+    },
+    "xyflow.edgeClick": {
+      actions: [
+        xstateActions_cjsExports.assign(({ event, context }) => {
+          if (!isStepEdgeId(event.edge.id) || event.edge.id === context.activeWalkthrough?.stepId) {
+            return {};
+          }
+          return {
+            activeWalkthrough: {
+              stepId: event.edge.id,
+              parallelPrefix: getParallelStepsPrefix(event.edge.id)
+            }
+          };
+        }),
+        updateActiveWalkthroughState(),
+        xyflow.fitFocusedBounds(),
+        emitEdgeClick(),
+        emitWalkthroughStep()
+      ]
+    },
+    "notations.unhighlight": {
+      actions: updateActiveWalkthroughState()
+    },
+    "tag.unhighlight": {
+      actions: updateActiveWalkthroughState()
+    },
+    "walkthrough.end": {
+      target: "idle"
+    },
+    "xyflow.paneDblClick": {
+      target: "idle"
+    },
+    // We received another view, close overlay and process event again
+    "update.view": {
+      guard: "is another view",
+      actions: xstateActions_cjsExports.raise(({ event }) => event, { delay: 50 }),
+      target: "idle"
+    }
+  }
+});
+const ready = machine.createStateConfig({
+  initial: "idle",
+  on: {
+    "navigate.to": {
+      guard: "is another view",
+      actions: xstateActions_cjsExports.assign({
+        lastOnNavigate: ({ context, event }) => ({
+          fromView: context.view.id,
+          toView: event.viewId,
+          fromNode: event.fromNode ?? null
+        })
+      }),
+      target: navigating
+    },
+    "navigate.back": {
+      guard: ({ context }) => context.navigationHistory.currentIndex > 0,
+      actions: xstateActions_cjsExports.assign(navigateBack),
+      target: navigating
+    },
+    "navigate.forward": {
+      guard: ({ context }) => context.navigationHistory.currentIndex < context.navigationHistory.history.length - 1,
+      actions: xstateActions_cjsExports.assign(navigateForward),
+      target: navigating
+    },
+    "layout.align": {
+      guard: "not readonly",
+      actions: [
+        startEditing("node"),
+        layoutAlign(),
+        stopEditing(true)
+      ]
+    },
+    "layout.resetEdgeControlPoints": {
+      guard: "not readonly",
+      actions: [
+        startEditing("node"),
+        resetEdgesControlPoints(),
+        stopEditing(true)
+      ]
+    },
+    "layout.resetManualLayout": {
+      guard: "not readonly",
+      actions: [
+        stopSyncLayout(),
+        disableCompareWithLatest(),
+        ensureSyncLayout(),
+        xstateActions_cjsExports.emit({
+          type: "onChange",
+          change: {
+            op: "reset-manual-layout"
+          }
+        })
+      ]
+    },
+    "xyflow.resized": {
+      guard: ({ context }) => context.features.enableFitView && !context.viewportChangedManually,
+      actions: [
+        cancelFitDiagram(),
+        raiseFitDiagram({ delay: 200 })
+      ]
+    },
+    "open.elementDetails": {
+      guard: "enabled: ElementDetails",
+      actions: openElementDetails()
+    },
+    "open.relationshipsBrowser": {
+      actions: xstateActions_cjsExports.sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event, self }) => ({
+        type: "open.relationshipsBrowser",
+        subject: event.fqn,
+        viewId: context.view.id,
+        scope: "view",
+        closeable: true,
+        enableChangeScope: true,
+        enableSelectSubject: true,
+        openSourceActor: self
+      }))
+    },
+    "open.relationshipDetails": {
+      actions: xstateActions_cjsExports.sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event, self }) => ({
+        type: "open.relationshipDetails",
+        viewId: context.view.id,
+        openSourceActor: self,
+        ...event.params
+      }))
+    },
+    "open.source": {
+      actions: emitOpenSource()
+    },
+    "walkthrough.start": {
+      guard: "is dynamic view",
+      target: ".walkthrough"
+    },
+    "toggle.feature": {
+      actions: [
+        toggleFeature(),
+        ensureSyncLayout()
+      ]
+    },
+    "xyflow.nodeMouseEnter": {
+      actions: onNodeMouseEnter()
+    },
+    "xyflow.nodeMouseLeave": {
+      actions: onNodeMouseLeave()
+    },
+    "xyflow.edgeMouseEnter": {
+      actions: onEdgeMouseEnter()
+    },
+    "xyflow.edgeMouseLeave": {
+      actions: onEdgeMouseLeave()
+    },
+    "xyflow.edgeDoubleClick": {
+      guard: "not readonly",
+      actions: onEdgeDoubleClick()
+    },
+    "notations.highlight": {
+      actions: notationsHighlight()
+    },
+    "notations.unhighlight": {
+      actions: undimEverything()
+    },
+    "tag.highlight": {
+      actions: tagHighlight()
+    },
+    "tag.unhighlight": {
+      actions: undimEverything()
+    },
+    "open.search": {
+      guard: "enabled: Search",
+      actions: xstateActions_cjsExports.sendTo(({ system }) => typedSystem(system).searchActorRef, ({ event }) => ({
+        type: "open",
+        search: event.search
+      }))
+    }
+  },
+  exit: [
+    cancelFitDiagram()
+  ],
+  states: {
+    idle,
+    focused,
+    walkthrough
+  }
+});
+
+export { focused, idle, ready, walkthrough };