@likec4/diagram 1.44.0 → 1.46.0

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

@@ -1,4 +1,5 @@
-import { xyflow, ensureSyncLayout, emitInitialized } from './machine.actions.js';
+import { emitInitialized, assignXYDataFromView } from './machine.actions.js';
+import { fitDiagram } from './machine.actions.layout.js';
 import { machine } from './machine.setup.js';
 import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
 
@@ -15,15 +16,15 @@ const initializing = machine.createStateConfig({
       target: "isReady"
     },
     "update.view": {
-      actions: xstateActions_cjsExports.assign(({ context, event }) => ({
-        initialized: {
-          ...context.initialized,
-          xydata: true
-        },
-        view: event.view,
-        xynodes: event.xynodes,
-        xyedges: event.xyedges
-      })),
+      actions: [
+        assignXYDataFromView(),
+        xstateActions_cjsExports.assign(({ context }) => ({
+          initialized: {
+            ...context.initialized,
+            xydata: true
+          }
+        }))
+      ],
       target: "isReady"
     }
   }
@@ -32,18 +33,17 @@ const isReady = machine.createStateConfig({
   always: [{
     guard: "isReady",
     actions: [
-      xyflow.fitDiagram({ duration: 0 }),
+      fitDiagram({ duration: 0 }),
       xstateActions_cjsExports.assign(({ context }) => ({
         navigationHistory: {
           currentIndex: 0,
           history: [{
             viewId: context.view.id,
-            fromNode: null,
-            viewport: { ...context.xyflow.getViewport() }
+            viewport: { ...context.xyflow.getViewport() },
+            viewportChangedManually: false
           }]
         }
       })),
-      ensureSyncLayout(),
       emitInitialized()
     ],
     target: "ready"

package/dist/likec4diagram/state/machine.state.navigating.d.ts

@@ -1,10 +1,5 @@
-import { CancelAction, ActionFunction, Values } from 'xstate';
-import { Context, Events, EmittedEvents } from './machine.setup';
-import { DiagramView } from '@likec4/core';
-import { SyncLayoutActorLogic } from './syncManualLayoutActor';
-import { HotkeyActorLogic } from './hotkeyActor';
-import { OverlaysActorLogic } from '../../overlays/overlaysActor';
-import { SearchActorLogic } from '../../search/searchActor';
+import { CancelAction } from 'xstate';
+import { Context, Events } from './machine.setup';
 /**
  * State for handling navigation to a different view.
  * Closes overlays and search, stops sync layout and fit diagram actions,
@@ -12,106 +7,8 @@ import { SearchActorLogic } from '../../search/searchActor';
  */
 export declare const navigating: {
     id: string;
-    entry: CancelAction<Context, Events, undefined, Events>[];
-    on: {
-        'update.view': {
-            actions: ActionFunction<Context, {
-                type: "update.view";
-                view: DiagramView;
-                xynodes: import("../types").Types.Node[];
-                xyedges: import("../types").Types.Edge[];
-            }, Events, undefined, Values<{
-                syncManualLayoutActorLogic: {
-                    src: "syncManualLayoutActorLogic";
-                    logic: SyncLayoutActorLogic;
-                    id: "syncLayout";
-                };
-                hotkeyActorLogic: {
-                    src: "hotkeyActorLogic";
-                    logic: HotkeyActorLogic;
-                    id: "hotkey";
-                };
-                overlaysActorLogic: {
-                    src: "overlaysActorLogic";
-                    logic: OverlaysActorLogic;
-                    id: "overlays";
-                };
-                searchActorLogic: {
-                    src: "searchActorLogic";
-                    logic: SearchActorLogic;
-                    id: "search";
-                };
-            }>, never, Values<{
-                isReady: {
-                    type: "isReady";
-                    params: unknown;
-                };
-                "enabled: FitView": {
-                    type: "enabled: FitView";
-                    params: unknown;
-                };
-                "enabled: FocusMode": {
-                    type: "enabled: FocusMode";
-                    params: unknown;
-                };
-                "enabled: Readonly": {
-                    type: "enabled: Readonly";
-                    params: unknown;
-                };
-                "enabled: RelationshipDetails": {
-                    type: "enabled: RelationshipDetails";
-                    params: unknown;
-                };
-                "enabled: Search": {
-                    type: "enabled: Search";
-                    params: unknown;
-                };
-                "enabled: ElementDetails": {
-                    type: "enabled: ElementDetails";
-                    params: unknown;
-                };
-                "enabled: DynamicViewWalkthrough": {
-                    type: "enabled: DynamicViewWalkthrough";
-                    params: unknown;
-                };
-                "not readonly": {
-                    type: "not readonly";
-                    params: unknown;
-                };
-                "is dynamic view": {
-                    type: "is dynamic view";
-                    params: unknown;
-                };
-                "is another view": {
-                    type: "is another view";
-                    params: unknown;
-                };
-                "click: node has modelFqn": {
-                    type: "click: node has modelFqn";
-                    params: unknown;
-                };
-                "click: selected node": {
-                    type: "click: selected node";
-                    params: unknown;
-                };
-                "click: same node": {
-                    type: "click: same node";
-                    params: unknown;
-                };
-                "click: focused node": {
-                    type: "click: focused node";
-                    params: unknown;
-                };
-                "click: node has connections": {
-                    type: "click: node has connections";
-                    params: unknown;
-                };
-                "click: selected edge": {
-                    type: "click: selected edge";
-                    params: unknown;
-                };
-            }>, never, EmittedEvents>;
-            target: string;
-        };
+    always: {
+        target: string;
+        actions: CancelAction<Context, Events, undefined, Events>[];
     };
 };

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

@@ -1,44 +1,196 @@
-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 { isTruthy } from 'remeda';
+import { enqueueActions, assertEvent } from 'xstate';
+import { convertToXYFlow } from '../convert-to-xyflow.js';
+import { mergeXYNodesEdges } from './assign.js';
+import { disableCompareWithLatest } from './machine.actions.js';
+import { machine, targetState } from './machine.setup.js';
+import { calcViewportForBounds, findCorrespondingNode, findNodeByModelFqn, 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());
-        const { fromNode, toNode } = findCorrespondingNode(context, event);
-        if (fromNode && toNode) {
-          enqueue(
-            xyflow.alignNodeFromToAfterNavigate({
-              fromNode: fromNode.id,
-              toPosition: {
-                x: toNode.data.x,
-                y: toNode.data.y
-              }
-            })
+  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;
+        const eventWithXYData = "xynodes" in event ? event : {
+          ...event,
+          ...convertToXYFlow({
+            dynamicViewVariant: context.dynamicViewVariant,
+            view: event.view,
+            where: context.where
+          })
+        };
+        invariant(xyflow, "xyflow is not initialized");
+        const calcZoomTowardsNextViewport = (nextViewport2) => {
+          const zoom = xyflow.getZoom();
+          const coef = nextViewport2.zoom < zoom ? 0.8 : 0.4;
+          return zoom + (nextViewport2.zoom - zoom) * coef;
+        };
+        const fromHistory = history[currentIndex];
+        if (fromHistory && fromHistory.viewId === event.view.id) {
+          enqueue.assign({
+            ...mergeXYNodesEdges(context, eventWithXYData),
+            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, eventWithXYData);
+        if (fromNode && toNode) {
+          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
+        });
+        const focusOnElement = context.lastOnNavigate?.focusOnElement;
+        const nodeToFocus = isTruthy(focusOnElement) ? findNodeByModelFqn(eventWithXYData.xynodes, focusOnElement) : null;
+        enqueue.assign({
+          ...mergeXYNodesEdges(context, eventWithXYData),
+          viewportChangedManually: false,
+          lastOnNavigate: null,
+          navigationHistory: {
+            currentIndex: updatedHistory.length - 1,
+            history: updatedHistory
+          }
+        });
+        if (nodeToFocus) {
+          enqueue.raise({
+            type: "focus.node",
+            nodeId: nodeToFocus.id,
+            autoUnfocus: true
+          }, { delay: 150 });
+        } else {
+          enqueue(raiseFitDiagram({
+            delay: 100
+          }));
+        }
+      })
+    ]
   }
 });