@likec4/diagram 1.45.0 → 1.46.2

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

@@ -1,12 +1,14 @@
 import { nonNullable, nonexhaustive, invariant } from '@likec4/core';
 import { nodeToRect } from '@xyflow/system';
 import { produce } from 'immer';
-import { isTruthy, hasAtLeast } from 'remeda';
+import { hasAtLeast, isTruthy } from 'remeda';
 import { assertEvent } from 'xstate';
+import { convertToXYFlow } from '../convert-to-xyflow.js';
 import { createLayoutConstraints } from '../useLayoutConstraints.js';
 import { getAligner, toNodeRect } from './aligners.js';
 import { resetEdgeControlPoints, mergeXYNodesEdges, focusNodesEdges } from './assign.js';
-import { createViewChange } from './createViewChange.js';
+import { setViewport, cancelFitDiagram, raiseFitDiagram } from './machine.actions.layout.js';
+export { assignViewportBefore, fitDiagram, fitFocusedBounds, raiseSetViewport, raiseUpdateView, returnViewportBefore } from './machine.actions.layout.js';
 import { machine } from './machine.setup.js';
 import { typedSystem, findDiagramEdge, findDiagramNode } from './utils.js';
 import { Base } from '../../base/Base.js';
@@ -68,18 +70,21 @@ const assignLastClickedNode = () => machine.assign(({ context, event }) => {
 });
 const assignFocusedNode = () => machine.assign(({ event }) => {
   let focusedNode;
+  let autoUnfocusTimer = false;
   switch (event.type) {
     case "xyflow.nodeClick":
       focusedNode = event.node.data.id;
       break;
     case "focus.node":
       focusedNode = event.nodeId;
+      autoUnfocusTimer = event.autoUnfocus === true;
       break;
     default:
       throw new Error(`Unexpected event type: ${event.type} in action 'assign: focusedNode'`);
   }
   return {
-    focusedNode
+    focusedNode,
+    autoUnfocusTimer
   };
 });
 const resetLastClickedNode = () => machine.assign(() => ({
@@ -95,11 +100,19 @@ const updateInputs = () => machine.assign(({ event }) => {
   assertEvent(event, "update.inputs");
   return { ...event.inputs };
 });
-const updateXYNodesEdges = () => machine.assign(({ context, event }) => {
-  assertEvent(event, "update.view");
-  const update = mergeXYNodesEdges(context, event);
-  let { lastClickedNode, focusedNode } = context;
-  if (lastClickedNode || focusedNode) {
+const assignXYDataFromView = (view) => machine.assign(({ context, event }) => {
+  let xydata;
+  {
+    assertEvent(event, "update.view");
+    xydata = "xynodes" in event ? event : convertToXYFlow({
+      dynamicViewVariant: context.dynamicViewVariant,
+      view: event.view,
+      where: context.where
+    });
+  }
+  const update = mergeXYNodesEdges(context, xydata);
+  let { lastClickedNode, focusedNode, activeWalkthrough } = context;
+  if (lastClickedNode || focusedNode || activeWalkthrough) {
     const nodeIds = new Set(update.xynodes.map((n) => n.id));
     if (lastClickedNode && !nodeIds.has(lastClickedNode.id)) {
       lastClickedNode = null;
@@ -107,15 +120,27 @@ const updateXYNodesEdges = () => machine.assign(({ context, event }) => {
     if (focusedNode && !nodeIds.has(focusedNode)) {
       focusedNode = null;
     }
+    const stepId = activeWalkthrough?.stepId;
+    if (stepId && !update.xyedges.some((e) => e.id === stepId)) {
+      activeWalkthrough = null;
+    }
     return {
       ...update,
       lastClickedNode,
-      focusedNode
+      focusedNode,
+      activeWalkthrough
     };
   }
   return update;
 });
-const focusOnNodesAndEdges = () => machine.assign(focusNodesEdges);
+const focusOnNodesAndEdges = () => machine.enqueueActions(({ context, enqueue }) => {
+  const next = focusNodesEdges(context);
+  if (next) {
+    enqueue.assign(next);
+  } else {
+    enqueue.raise({ type: "key.esc" });
+  }
+});
 const undimEverything = () => machine.assign(({ context }) => ({
   xynodes: context.xynodes.map(Base.setDimmed(false)),
   xyedges: context.xyedges.map(Base.setData({
@@ -204,15 +229,22 @@ const emitEdgeClick = () => machine.emit(({ context, event }) => {
     xyedge: event.edge
   };
 });
-const emitOnChange = () => machine.enqueueActions(({ event, enqueue }) => {
-  assertEvent(event, "emit.onChange");
+const triggerChange = (viewChange) => machine.enqueueActions(({ event, enqueue }) => {
+  let change = viewChange;
+  if (!change) {
+    assertEvent(event, "trigger.change");
+    change = event.change;
+  }
   enqueue.assign({
     viewportChangedManually: true
   });
-  enqueue.emit({
-    type: "onChange",
-    change: event.change
-  });
+  enqueue.sendTo(
+    typedSystem.editorActor,
+    {
+      type: "change",
+      change
+    }
+  );
 });
 const emitOnLayoutTypeChange = () => machine.enqueueActions(({ event, system, context, enqueue }) => {
   if (!context.features.enableCompareWithLatest) {
@@ -230,16 +262,9 @@ const emitOnLayoutTypeChange = () => machine.enqueueActions(({ event, system, co
   }
   if (context.toggledFeatures.enableCompareWithLatest === true) {
     if (currentLayoutType === "manual" && nextLayoutType === "auto") {
-      const syncLayoutActor = typedSystem(system).syncLayoutActorRef;
-      const syncState = syncLayoutActor?.getSnapshot().value;
-      const isPending = syncLayoutActor && (syncState === "pending" || syncState === "paused");
-      if (isPending) {
-        enqueue.sendTo(syncLayoutActor, { type: "cancel" });
-        enqueue.emit({
-          type: "onChange",
-          change: createViewChange(context)
-        });
-      }
+      typedSystem(system).editorActorRef?.send({
+        type: "cancel"
+      });
     }
     const currentViewport = context.viewport;
     if (currentLayoutType === "auto") {
@@ -308,26 +333,20 @@ const resetEdgesControlPoints = () => machine.assign(({ context }) => {
     })
   };
 });
-const notationsHighlight = (params) => machine.assign(({ context, event }) => {
-  if (!params) {
-    assertEvent(event, "notations.highlight");
-    params = {
-      ...event
-    };
-  }
-  const notation = params.notation;
-  const kinds = params.kind ? [params.kind] : notation.kinds;
+const notationsHighlight = () => machine.assign(({ context, event }) => {
+  assertEvent(event, "notations.highlight");
+  const { notation, kind } = event;
+  const targetKinds = kind ? [kind] : notation.kinds;
+  const shouldHighlight = (node) => node.notation === notation.title && node.shape === notation.shape && node.color === notation.color && targetKinds.includes(node.kind);
   const xynodes = context.xynodes.map((n) => {
     const node = findDiagramNode(context, n.id);
-    if (node && node.notation === notation.title && node.shape === notation.shape && node.color === notation.color && kinds.includes(node.kind)) {
-      return Base.setDimmed(n, false);
-    }
-    return Base.setDimmed(n, "immediate");
+    const highlighted = node && shouldHighlight(node);
+    return Base.setDimmed(n, highlighted ? false : "immediate");
   });
-  return {
-    xynodes,
-    xyedges: context.xyedges.map(Base.setDimmed("immediate"))
-  };
+  const xyedges = context.xyedges.map((edge) => {
+    return Base.setDimmed(edge, true);
+  });
+  return { xynodes, xyedges };
 });
 const tagHighlight = () => machine.assign(({ context, event }) => {
   assertEvent(event, "tag.highlight");
@@ -352,33 +371,33 @@ const assignToggledFeatures = () => machine.assign(({ context, event }) => {
   };
 });
 const closeSearch = () => machine.sendTo(
-  ({ system }) => typedSystem(system).searchActorRef,
+  typedSystem.searchActor,
   {
     type: "close"
   }
 );
 const closeAllOverlays = () => machine.sendTo(
-  ({ system }) => typedSystem(system).overlaysActorRef,
+  typedSystem.overlaysActor,
   {
     type: "close.all"
   }
 );
-const stopSyncLayout = () => machine.enqueueActions(({ enqueue, system }) => {
-  const syncLayoutActor = typedSystem(system).syncLayoutActorRef;
-  if (!syncLayoutActor) return;
-  enqueue.stopChild(syncLayoutActor);
-});
-const ensureSyncLayoutActor = () => machine.enqueueActions(({ context, enqueue, system, check }) => {
-  const isReadOnly = check("enabled: Readonly");
-  const syncLayoutActor = typedSystem(system).syncLayoutActorRef;
-  if (isReadOnly && syncLayoutActor) {
-    enqueue.stopChild(syncLayoutActor);
+const stopEditorActor = () => machine.enqueueActions(({ enqueue, system }) => {
+  const actor = typedSystem(system).editorActorRef;
+  if (!actor) return;
+  enqueue.stopChild(actor);
+});
+const ensureEditorActor = () => machine.enqueueActions(({ enqueue, context, system, check }) => {
+  const hasEditor = check("enabled: Editor");
+  const editor = typedSystem(system).editorActorRef;
+  if (!hasEditor && editor) {
+    enqueue.stopChild(editor);
     return;
   }
-  if (!isReadOnly && !syncLayoutActor) {
-    enqueue.spawnChild("syncManualLayoutActorLogic", {
-      id: "syncLayout",
-      systemId: "syncLayout",
+  if (hasEditor && !editor) {
+    enqueue.spawnChild("editorActor", {
+      id: "editor",
+      systemId: "editor",
       input: {
         viewId: context.view.id
       },
@@ -387,33 +406,33 @@ const ensureSyncLayoutActor = () => machine.enqueueActions(({ context, enqueue,
   }
 });
 const startEditing = (subject = "node") => machine.sendTo(
-  ({ system }) => typedSystem(system).syncLayoutActorRef,
+  typedSystem.editorActor,
   {
-    type: "editing.start",
+    type: "edit.start",
     subject
   }
 );
 const sendSynced = () => machine.sendTo(
-  ({ system }) => typedSystem(system).syncLayoutActorRef,
+  typedSystem.editorActor,
   {
     type: "synced"
   }
 );
 const stopEditing = (wasChanged = true) => machine.sendTo(
-  ({ system }) => typedSystem(system).syncLayoutActorRef,
+  typedSystem.editorActor,
   {
-    type: "editing.stop",
+    type: "edit.finish",
     wasChanged
   }
 );
 const cancelEditing = () => machine.sendTo(
-  ({ system }) => typedSystem(system).syncLayoutActorRef,
+  typedSystem.editorActor,
   {
     type: "cancel"
   }
 );
 const hasModelFqn = (node) => "modelFqn" in node.data && isTruthy(node.data.modelFqn);
-const openElementDetails = (params) => machine.enqueueActions(({ context, event, enqueue, system }) => {
+const openElementDetails = (params) => machine.enqueueActions(({ context, event, enqueue }) => {
   let initiatedFrom = null;
   let fromNodeId, subject;
   switch (true) {
@@ -467,7 +486,7 @@ const openElementDetails = (params) => machine.enqueueActions(({ context, event,
     };
   }
   enqueue.sendTo(
-    typedSystem(system).overlaysActorRef,
+    typedSystem.overlaysActor,
     {
       type: "open.elementDetails",
       subject,
@@ -476,6 +495,47 @@ const openElementDetails = (params) => machine.enqueueActions(({ context, event,
     }
   );
 });
+const openOverlay = () => machine.enqueueActions(({ context, event, enqueue, check }) => {
+  assertEvent(event, ["open.relationshipsBrowser", "open.relationshipDetails", "open.elementDetails"]);
+  if (!check("enabled: Overlays")) {
+    console.warn("Overlays feature is disabled");
+    return;
+  }
+  switch (event.type) {
+    case "open.elementDetails": {
+      check("enabled: ElementDetails") ? enqueue(openElementDetails()) : console.warn("ElementDetails feature is disabled");
+      break;
+    }
+    case "open.relationshipsBrowser": {
+      enqueue.sendTo(
+        typedSystem.overlaysActor,
+        {
+          type: "open.relationshipsBrowser",
+          subject: event.fqn,
+          viewId: context.view.id,
+          scope: "view",
+          closeable: true,
+          enableChangeScope: true,
+          enableSelectSubject: true
+        }
+      );
+      break;
+    }
+    case "open.relationshipDetails": {
+      enqueue.sendTo(
+        typedSystem.overlaysActor,
+        {
+          type: "open.relationshipDetails",
+          viewId: context.view.id,
+          ...event.params
+        }
+      );
+      break;
+    }
+    default:
+      nonexhaustive(event);
+  }
+});
 const openSourceOfFocusedOrLastClickedNode = () => machine.enqueueActions(({ context, enqueue }) => {
   const nodeId = context.focusedNode ?? context.lastClickedNode?.id;
   if (!nodeId || !context.features.enableVscode) return;
@@ -552,9 +612,15 @@ const onEdgeMouseLeave = () => machine.enqueueActions(({ enqueue, context, event
 });
 const startHotKeyActor = () => machine.spawnChild("hotkeyActorLogic", { id: "hotkey" });
 const stopHotKeyActor = () => machine.stopChild("hotkey");
+const AUTO_UNFOCUS_DELAY = 3e3;
+const startAutoUnfocusTimer = () => machine.enqueueActions(({ context, enqueue }) => {
+  if (context.autoUnfocusTimer && AUTO_UNFOCUS_DELAY > 0) {
+    enqueue.raise({ type: "focus.autoUnfocus" }, { delay: AUTO_UNFOCUS_DELAY, id: "autoUnfocusTimer" });
+  }
+});
+const cancelAutoUnfocusTimer = () => machine.cancel("autoUnfocusTimer");
 const handleNavigate = () => machine.enqueueActions(({ enqueue, context, event }) => {
   assertEvent(event, ["navigate.to", "navigate.back", "navigate.forward"]);
-  console.log(`Handle ${event.type}`);
   const {
     view,
     focusedNode,
@@ -589,10 +655,6 @@ const handleNavigate = () => machine.enqueueActions(({ enqueue, context, event }
     });
     history = [..._history];
     history[currentIndex] = updatedEntry;
-    console.log("Update current history entry", {
-      before: _history[currentIndex],
-      after: updatedEntry
-    });
   }
   switch (event.type) {
     case "navigate.to": {
@@ -604,7 +666,8 @@ const handleNavigate = () => machine.enqueueActions(({ enqueue, context, event }
         lastOnNavigate: {
           fromView: context.view.id,
           toView: event.viewId,
-          fromNode: event.fromNode ?? null
+          fromNode: event.fromNode ?? null,
+          focusOnElement: event.focusOnElement ?? null
         }
       });
       enqueue(emitNavigateTo());
@@ -640,5 +703,53 @@ const handleNavigate = () => machine.enqueueActions(({ enqueue, context, event }
       nonexhaustive(event);
   }
 });
+const updateView = () => machine.enqueueActions(
+  ({ enqueue, event, context }) => {
+    if (event.type !== "update.view") {
+      console.warn(`Ignoring unexpected event type: ${event.type} in action 'update.view'`);
+      return;
+    }
+    const nextView = event.view;
+    const isAnotherView = nextView.id !== context.view.id;
+    if (isAnotherView) {
+      console.warn("updateView called for another view - ignoring", { event });
+      return;
+    }
+    enqueue(assignXYDataFromView());
+    if (event.source === "editor") {
+      return;
+    }
+    enqueue(sendSynced());
+    let recenter = !context.viewportChangedManually && !context.focusedNode && !context.activeWalkthrough;
+    if (context.toggledFeatures.enableCompareWithLatest === true && context.view._layout !== nextView._layout) {
+      if (nextView._layout === "auto" && context.viewportOnAutoLayout) {
+        enqueue(
+          setViewport({
+            viewport: context.viewportOnAutoLayout,
+            duration: 0
+          })
+        );
+        return;
+      }
+      if (nextView._layout === "manual" && context.viewportOnManualLayout) {
+        enqueue(
+          setViewport({
+            viewport: context.viewportOnManualLayout,
+            duration: 0
+          })
+        );
+        return;
+      }
+    }
+    recenter = recenter || nextView._type === "dynamic" && context.view._type === "dynamic" && nextView.variant !== context.view.variant;
+    recenter = recenter || context.toggledFeatures.enableCompareWithLatest === true && !!nextView._layout && context.view._layout !== nextView._layout;
+    if (recenter) {
+      enqueue(cancelFitDiagram());
+      enqueue(raiseFitDiagram({
+        bounds: event.view.bounds
+      }));
+    }
+  }
+);
 
-export { assignDynamicViewVariant, assignFocusedNode, assignLastClickedNode, assignToggledFeatures, cancelEditing, closeAllOverlays, closeSearch, disableCompareWithLatest, emitEdgeClick, emitInitialized, emitNavigateTo, emitNodeClick, emitOnChange, emitOnLayoutTypeChange, emitOpenSource, emitPaneClick, ensureOverlaysActor, ensureSearchActor, ensureSyncLayoutActor, focusOnNodesAndEdges, handleNavigate, layoutAlign, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openElementDetails, openSourceOfFocusedOrLastClickedNode, resetEdgesControlPoints, resetLastClickedNode, sendSynced, startEditing, startHotKeyActor, stopEditing, stopHotKeyActor, stopSyncLayout, tagHighlight, undimEverything, updateFeatures, updateInputs, updateXYNodesEdges };
+export { assignDynamicViewVariant, assignFocusedNode, assignLastClickedNode, assignToggledFeatures, assignXYDataFromView, cancelAutoUnfocusTimer, cancelEditing, cancelFitDiagram, closeAllOverlays, closeSearch, disableCompareWithLatest, emitEdgeClick, emitInitialized, emitNavigateTo, emitNodeClick, emitOnLayoutTypeChange, emitOpenSource, emitPaneClick, ensureEditorActor, ensureOverlaysActor, ensureSearchActor, focusOnNodesAndEdges, handleNavigate, layoutAlign, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openElementDetails, openOverlay, openSourceOfFocusedOrLastClickedNode, raiseFitDiagram, resetEdgesControlPoints, resetLastClickedNode, sendSynced, setViewport, startAutoUnfocusTimer, startEditing, startHotKeyActor, stopEditing, stopEditorActor, stopHotKeyActor, tagHighlight, triggerChange, undimEverything, updateFeatures, updateInputs, updateView };