@likec4/diagram 1.44.0 → 1.46.0

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

@@ -0,0 +1,105 @@
+import { resetLastClickedNode, emitEdgeClick, assignFocusedNode, emitPaneClick, assignLastClickedNode, emitNodeClick, openSourceOfFocusedOrLastClickedNode, openElementDetails, emitOpenSource } from './machine.actions.js';
+import { machine, targetState } from './machine.setup.js';
+import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
+import { x as xstateGuards_cjsExports } from '../../_virtual/xstate-guards.cjs.js';
+import { fitDiagram } from './machine.actions.layout.js';
+
+const idle = machine.createStateConfig({
+  id: targetState.idle.slice(1),
+  on: {
+    "xyflow.nodeClick": [
+      {
+        guard: xstateGuards_cjsExports.and([
+          "enabled: Readonly",
+          "enabled: FocusMode",
+          "click: node has connections",
+          xstateGuards_cjsExports.or([
+            "click: same node",
+            "click: selected node"
+          ])
+        ]),
+        actions: [
+          assignLastClickedNode(),
+          assignFocusedNode(),
+          emitNodeClick()
+        ],
+        target: targetState.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(),
+        xstateActions_cjsExports.enqueueActions(({ context, enqueue, check }) => {
+          if (check("enabled: FitView")) {
+            enqueue(fitDiagram());
+          }
+          enqueue(
+            emitOpenSource({ view: context.view.id })
+          );
+        })
+      ]
+    },
+    "focus.node": [
+      // Focus was initialed by the user searching (autoUnfocus=true) - always allowed
+      {
+        guard: "focus.node: autoUnfocus",
+        actions: assignFocusedNode(),
+        target: targetState.focused
+      },
+      // Regular focus - requires FocusMode to be enabled
+      {
+        guard: "enabled: FocusMode",
+        actions: assignFocusedNode(),
+        target: targetState.focused
+      }
+    ],
+    "xyflow.edgeClick": {
+      guard: xstateGuards_cjsExports.and([
+        "enabled: Readonly",
+        "is dynamic view",
+        "enabled: DynamicViewWalkthrough",
+        "click: selected edge"
+      ]),
+      actions: [
+        resetLastClickedNode(),
+        xstateActions_cjsExports.raise(({ event }) => ({
+          type: "walkthrough.start",
+          stepId: event.edge.id
+        })),
+        emitEdgeClick()
+      ]
+    }
+  }
+});
+
+export { idle };

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

@@ -1,318 +1,38 @@
-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 { updateView, resetLastClickedNode, emitEdgeClick, assignLastClickedNode, emitNodeClick, emitPaneClick, undimEverything, tagHighlight, notationsHighlight, startEditing, onEdgeDoubleClick, stopEditing, onEdgeMouseLeave, onEdgeMouseEnter, onNodeMouseLeave, onNodeMouseEnter, updateFeatures, ensureOverlaysActor, ensureSearchActor, ensureEditorActor, assignToggledFeatures, emitOpenSource, openOverlay, cancelEditing, disableCompareWithLatest, triggerChange, resetEdgesControlPoints, layoutAlign, handleNavigate, closeAllOverlays, closeSearch, stopEditorActor } from './machine.actions.js';
+import { machine, targetState } from './machine.setup.js';
+import { focused } from './machine.state.ready.focused.js';
+import { idle } from './machine.state.ready.idle.js';
+import { printing } from './machine.state.ready.printing.js';
+import { walkthrough } from './machine.state.ready.walkthrough.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';
+import { setViewport, fitDiagram, cancelFitDiagram, raiseFitDiagram } from './machine.actions.layout.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({
+const ready = machine.createStateConfig({
+  initial: "idle",
   entry: [
-    focusOnNodesAndEdges(),
-    xstateActions_cjsExports.assign((s) => ({
-      viewportBeforeFocus: { ...s.context.viewport }
-    })),
-    openSourceOfFocusedOrLastClickedNode(),
-    xstateActions_cjsExports.spawnChild("hotkeyActorLogic", { id: "hotkey" }),
-    xyflow.fitFocusedBounds()
+    xstateActions_cjsExports.spawnChild("mediaPrintActorLogic", { id: "mediaPrint" }),
+    ensureEditorActor(),
+    ensureOverlaysActor(),
+    ensureSearchActor()
   ],
-  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: [
+    cancelFitDiagram(),
+    xstateActions_cjsExports.stopChild("mediaPrint"),
+    closeAllOverlays(),
+    closeSearch(),
+    stopEditorActor()
   ],
-  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",
+  states: {
+    idle,
+    focused,
+    walkthrough,
+    printing
+  },
   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
+    "navigate.*": {
+      actions: handleNavigate()
     },
     "layout.align": {
       guard: "not readonly",
@@ -325,7 +45,7 @@ const ready = machine.createStateConfig({
     "layout.resetEdgeControlPoints": {
       guard: "not readonly",
       actions: [
-        startEditing("node"),
+        startEditing("edge"),
         resetEdgesControlPoints(),
         stopEditing(true)
       ]
@@ -333,14 +53,10 @@ const ready = machine.createStateConfig({
     "layout.resetManualLayout": {
       guard: "not readonly",
       actions: [
-        stopSyncLayout(),
+        cancelEditing(),
         disableCompareWithLatest(),
-        ensureSyncLayout(),
-        xstateActions_cjsExports.emit({
-          type: "onChange",
-          change: {
-            op: "reset-manual-layout"
-          }
+        triggerChange({
+          op: "reset-manual-layout"
         })
       ]
     },
@@ -352,40 +68,34 @@ const ready = machine.createStateConfig({
       ]
     },
     "open.elementDetails": {
-      guard: "enabled: ElementDetails",
-      actions: openElementDetails()
+      actions: openOverlay()
     },
     "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
-      }))
+      actions: openOverlay()
     },
     "open.relationshipDetails": {
-      actions: xstateActions_cjsExports.sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event, self }) => ({
-        type: "open.relationshipDetails",
-        viewId: context.view.id,
-        openSourceActor: self,
-        ...event.params
-      }))
+      actions: openOverlay()
     },
     "open.source": {
+      guard: "enabled: OpenSource",
       actions: emitOpenSource()
     },
     "walkthrough.start": {
       guard: "is dynamic view",
-      target: ".walkthrough"
+      target: targetState.walkthrough
     },
     "toggle.feature": {
       actions: [
-        toggleFeature(),
-        ensureSyncLayout()
+        assignToggledFeatures(),
+        ensureEditorActor()
+      ]
+    },
+    "update.features": {
+      actions: [
+        updateFeatures(),
+        ensureOverlaysActor(),
+        ensureSearchActor(),
+        ensureEditorActor()
       ]
     },
     "xyflow.nodeMouseEnter": {
@@ -401,8 +111,15 @@ const ready = machine.createStateConfig({
       actions: onEdgeMouseLeave()
     },
     "xyflow.edgeDoubleClick": {
-      guard: "not readonly",
-      actions: onEdgeDoubleClick()
+      guard: xstateGuards_cjsExports.and([
+        "not readonly",
+        ({ event }) => !!event.edge.data.controlPoints && event.edge.data.controlPoints.length > 0
+      ]),
+      actions: [
+        startEditing("edge"),
+        onEdgeDoubleClick(),
+        stopEditing(true)
+      ]
     },
     "notations.highlight": {
       actions: notationsHighlight()
@@ -422,16 +139,47 @@ const ready = machine.createStateConfig({
         type: "open",
         search: event.search
       }))
+    },
+    "xyflow.paneClick": {
+      actions: [
+        resetLastClickedNode(),
+        emitPaneClick()
+      ]
+    },
+    "xyflow.nodeClick": {
+      actions: [
+        assignLastClickedNode(),
+        emitNodeClick()
+      ]
+    },
+    "xyflow.edgeClick": {
+      actions: [
+        resetLastClickedNode(),
+        emitEdgeClick()
+      ]
+    },
+    "xyflow.fitDiagram": {
+      guard: "enabled: FitView",
+      actions: fitDiagram()
+    },
+    "xyflow.setViewport": {
+      actions: setViewport()
+    },
+    "update.view": [
+      // Redirect to navigating state if received another view
+      {
+        guard: "is another view",
+        target: targetState.navigating
+      },
+      // Otherwise, just update the view in place
+      {
+        actions: updateView()
+      }
+    ],
+    "media.print.on": {
+      target: targetState.printing
     }
-  },
-  exit: [
-    cancelFitDiagram()
-  ],
-  states: {
-    idle,
-    focused,
-    walkthrough
   }
 });
 
-export { focused, idle, ready, walkthrough };
+export { ready };