@likec4/diagram 1.44.0 → 1.45.0

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

@@ -1,44 +1,177 @@
-import { updateNavigationHistory } from './assign.js';
-import { closeAllOverlays, closeSearch, stopSyncLayout, cancelFitDiagram, trigger, disableCompareWithLatest, findCorrespondingNode, xyflow, updateXYNodesEdges, ensureSyncLayout, raiseFitDiagram } from './machine.actions.js';
-import { machine } from './machine.setup.js';
-import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
+import { BBox } from '@likec4/core/types';
+import { invariant, nonNullable } from '@likec4/core/utils';
+import { enqueueActions, assertEvent } from 'xstate';
+import { mergeXYNodesEdges } from './assign.js';
+import { disableCompareWithLatest } from './machine.actions.js';
+import { machine, targetState } from './machine.setup.js';
+import { calcViewportForBounds, findCorrespondingNode, nodeRef } from './utils.js';
+import { cancelFitDiagram, raiseSetViewport, raiseFitDiagram } from './machine.actions.layout.js';
 
+const handleBrowserForwardBackward = () => machine.assign(({ context, event }) => {
+  assertEvent(event, "update.view");
+  let {
+    lastOnNavigate,
+    navigationHistory: {
+      currentIndex,
+      history
+    }
+  } = context;
+  const stepCurrent = history[currentIndex];
+  if (!stepCurrent || stepCurrent.viewId === event.view.id || !!lastOnNavigate) {
+    return {};
+  }
+  const stepBack = currentIndex > 0 ? nonNullable(history[currentIndex - 1]) : null;
+  if (stepBack && stepBack.viewId === event.view.id) {
+    return {
+      navigationHistory: {
+        currentIndex: currentIndex - 1,
+        history
+      },
+      lastOnNavigate: null
+    };
+  }
+  const stepForward = currentIndex < history.length - 1 ? nonNullable(history[currentIndex + 1]) : null;
+  if (stepForward && stepForward.viewId === event.view.id) {
+    return {
+      navigationHistory: {
+        currentIndex: currentIndex + 1,
+        history
+      },
+      lastOnNavigate: null
+    };
+  }
+  if (event.view._type === "element" && event.view.viewOf) {
+    const toRef = event.view.viewOf;
+    const existingNode = context.xynodes.find((n) => nodeRef(n) === toRef);
+    if (existingNode) {
+      return {
+        lastOnNavigate: {
+          fromView: context.view.id,
+          toView: event.view.id,
+          fromNode: existingNode.id
+        }
+      };
+    }
+  }
+  return {};
+});
 const navigating = machine.createStateConfig({
-  id: "navigating",
-  entry: [
-    closeAllOverlays(),
-    closeSearch(),
-    stopSyncLayout(),
-    cancelFitDiagram(),
-    trigger.navigateTo()
-  ],
-  on: {
-    "update.view": {
-      actions: xstateActions_cjsExports.enqueueActions(({ enqueue, context, event }) => {
-        enqueue(disableCompareWithLatest());
+  id: targetState.navigating.slice(1),
+  always: {
+    target: targetState.idle,
+    actions: [
+      cancelFitDiagram(),
+      handleBrowserForwardBackward(),
+      disableCompareWithLatest(),
+      enqueueActions(({ enqueue, context, event }) => {
+        assertEvent(event, "update.view");
+        const {
+          xyflow,
+          xystore,
+          navigationHistory: {
+            currentIndex,
+            history
+          }
+        } = context;
+        invariant(xyflow, "xyflow is not initialized");
+        const calcZoomTowardsNextViewport = (nextViewport2) => {
+          const zoom = xyflow.getZoom();
+          const coef = nextViewport2.zoom < zoom ? 0.7 : 0.3;
+          return zoom + (nextViewport2.zoom - zoom) * coef;
+        };
+        const fromHistory = history[currentIndex];
+        if (fromHistory && fromHistory.viewId === event.view.id) {
+          console.log("Navigating: fromHistory", fromHistory);
+          enqueue.assign({
+            ...mergeXYNodesEdges(context, event),
+            dynamicViewVariant: fromHistory.dynamicViewVariant ?? context.dynamicViewVariant,
+            viewportChangedManually: fromHistory.viewportChangedManually
+          });
+          const wasFocused = fromHistory.focusedNode;
+          const wasActiveWalkthrough = fromHistory.activeWalkthrough;
+          const viewportBefore = fromHistory.viewportBefore;
+          if (viewportBefore && (wasFocused || wasActiveWalkthrough)) {
+            enqueue.assign({
+              viewport: viewportBefore.value,
+              viewportChangedManually: viewportBefore.wasChangedManually,
+              viewportBefore: null
+            });
+          }
+          const center = BBox.center(event.view.bounds);
+          const zoom = calcZoomTowardsNextViewport(fromHistory.viewport);
+          xyflow.setCenter(
+            center.x,
+            center.y,
+            { zoom, duration: 0 }
+          );
+          if (wasFocused) {
+            enqueue.raise({
+              type: "focus.node",
+              nodeId: wasFocused
+            }, { delay: 50 });
+            return;
+          }
+          if (wasActiveWalkthrough) {
+            enqueue.raise({
+              type: "walkthrough.start",
+              stepId: wasActiveWalkthrough
+            }, { delay: 50 });
+            return;
+          }
+          enqueue(raiseSetViewport({
+            delay: 80,
+            viewport: fromHistory.viewport
+          }));
+          return;
+        }
+        const nextViewport = calcViewportForBounds(
+          context,
+          event.view.bounds
+        );
         const { fromNode, toNode } = findCorrespondingNode(context, event);
         if (fromNode && toNode) {
-          enqueue(
-            xyflow.alignNodeFromToAfterNavigate({
-              fromNode: fromNode.id,
-              toPosition: {
-                x: toNode.data.x,
-                y: toNode.data.y
-              }
-            })
-          );
+          const elFrom = xyflow.getInternalNode(fromNode.id);
+          const fromPoint = xyflow.flowToScreenPosition({
+            x: elFrom.internals.positionAbsolute.x,
+            y: elFrom.internals.positionAbsolute.y
+          });
+          const toPoint = xyflow.flowToScreenPosition({
+            x: toNode.data.x,
+            y: toNode.data.y
+          });
+          xystore.getState().panBy({
+            x: Math.round(fromPoint.x - toPoint.x),
+            y: Math.round(fromPoint.y - toPoint.y)
+          });
         } else {
-          enqueue(
-            xyflow.setViewportCenter()
+          const zoom = calcZoomTowardsNextViewport(nextViewport);
+          const center = BBox.center(event.view.bounds);
+          xyflow.setCenter(
+            center.x,
+            center.y,
+            { zoom, duration: 0 }
           );
         }
-        enqueue.assign(updateNavigationHistory);
-        enqueue(updateXYNodesEdges());
-        enqueue(ensureSyncLayout());
-        enqueue(raiseFitDiagram({ delay: 25 }));
-      }),
-      target: "#idle"
-    }
+        const updatedHistory = currentIndex < history.length - 1 ? history.slice(0, currentIndex + 1) : [...history];
+        updatedHistory.push({
+          viewId: event.view.id,
+          viewport: { ...nextViewport },
+          viewportChangedManually: false
+        });
+        enqueue.assign({
+          ...mergeXYNodesEdges(context, event),
+          viewportChangedManually: false,
+          lastOnNavigate: null,
+          navigationHistory: {
+            currentIndex: updatedHistory.length - 1,
+            history: updatedHistory
+          }
+        });
+        enqueue(raiseFitDiagram({
+          delay: 100
+        }));
+      })
+    ]
   }
 });