@likec4/diagram 1.24.0 → 1.25.0

package/dist/overlays/relationships-browser/actor.d.ts

@@ -1,6 +1,6 @@
 import { BBox, DiagramView, Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi, GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
-import { ActorLogicFrom, ActorRefFromLogic, SnapshotFrom, PromiseActorLogic, EventObject, StateMachine, Values, NonReducibleUnknown, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, DoneActorEvent, CancelAction } from 'xstate';
+import { ActorLogicFrom, ActorRefFromLogic, SnapshotFrom, PromiseActorLogic, EventObject, StateMachine, Values, NonReducibleUnknown, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction, DoneActorEvent } from 'xstate';
 import { Base } from '../../base';
 import { LayoutRelationshipsViewResult } from './-useRelationshipsView';
 import { RelationshipsBrowserTypes } from './_types';
@@ -52,6 +52,14 @@ export type Events = {
 } | {
     type: 'xyflow.edgeMouseLeave';
     edge: RelationshipsBrowserTypes.Edge;
+} | {
+    type: 'xyflow.selectionChange';
+    nodes: RelationshipsBrowserTypes.Node[];
+    edges: RelationshipsBrowserTypes.Edge[];
+} | {
+    type: 'dim.nonhovered.edges';
+} | {
+    type: 'undim.edges';
 } | {
     type: 'xyflow.updateNodeInternals';
 } | {
@@ -411,7 +419,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<Input & {
         readonly isReady: {
             readonly always: readonly [{
                 readonly guard: "isReady";
-                readonly actions: ActionFunction<Readonly<Input & {
+                readonly actions: readonly [ ActionFunction<Readonly<Input & {
                     closeable: boolean;
                     enableNavigationMenu: boolean;
                     xyflow: XYFLowInstance | null;
@@ -420,7 +428,16 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<Input & {
                     navigateFromNode: string | null;
                     xynodes: RelationshipsBrowserTypes.Node[];
                     xyedges: RelationshipsBrowserTypes.Edge[];
-                }>, Events, Events, undefined, never, never, never, never, never>;
+                }>, Events, Events, undefined, never, never, never, never, never>, ActionFunction<Readonly<Input & {
+                    closeable: boolean;
+                    enableNavigationMenu: boolean;
+                    xyflow: XYFLowInstance | null;
+                    xystore: XYStoreApi | null;
+                    layouted: LayoutRelationshipsViewResult | null;
+                    navigateFromNode: string | null;
+                    xynodes: RelationshipsBrowserTypes.Node[];
+                    xyedges: RelationshipsBrowserTypes.Edge[];
+                }>, Events, Events, undefined, never, never, never, never, never>];
                 readonly target: "active";
             }, {
                 readonly target: "initializing";
@@ -430,7 +447,232 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<Input & {
             readonly initial: "idle";
             readonly tags: readonly ["active"];
             readonly states: {
-                readonly idle: {};
+                readonly idle: {
+                    readonly on: {
+                        readonly 'xyflow.edgeMouseEnter': {
+                            readonly actions: readonly [ ActionFunction<Readonly<Input & {
+                                closeable: boolean;
+                                enableNavigationMenu: boolean;
+                                xyflow: XYFLowInstance | null;
+                                xystore: XYStoreApi | null;
+                                layouted: LayoutRelationshipsViewResult | null;
+                                navigateFromNode: string | null;
+                                xynodes: RelationshipsBrowserTypes.Node[];
+                                xyedges: RelationshipsBrowserTypes.Edge[];
+                            }>, {
+                                type: "xyflow.edgeMouseEnter";
+                                edge: RelationshipsBrowserTypes.Edge;
+                            }, Events, undefined, {
+                                src: "layouter";
+                                logic: PromiseActorLogic<{
+                                    xyedges: RelationshipsBrowserTypes.Edge[];
+                                    xynodes: RelationshipsBrowserTypes.Node[];
+                                }, {
+                                    subjectId: Fqn;
+                                    navigateFromNode: string | null;
+                                    xyflow: XYFLowInstance;
+                                    xystore: XYStoreApi;
+                                    update: LayoutRelationshipsViewResult;
+                                }, EventObject>;
+                                id: "layouter";
+                            }, never, never, never, never>, CancelAction<Readonly<Input & {
+                                closeable: boolean;
+                                enableNavigationMenu: boolean;
+                                xyflow: XYFLowInstance | null;
+                                xystore: XYStoreApi | null;
+                                layouted: LayoutRelationshipsViewResult | null;
+                                navigateFromNode: string | null;
+                                xynodes: RelationshipsBrowserTypes.Node[];
+                                xyedges: RelationshipsBrowserTypes.Edge[];
+                            }>, {
+                                type: "xyflow.edgeMouseEnter";
+                                edge: RelationshipsBrowserTypes.Edge;
+                            }, undefined, Events>, CancelAction<Readonly<Input & {
+                                closeable: boolean;
+                                enableNavigationMenu: boolean;
+                                xyflow: XYFLowInstance | null;
+                                xystore: XYStoreApi | null;
+                                layouted: LayoutRelationshipsViewResult | null;
+                                navigateFromNode: string | null;
+                                xynodes: RelationshipsBrowserTypes.Node[];
+                                xyedges: RelationshipsBrowserTypes.Edge[];
+                            }>, {
+                                type: "xyflow.edgeMouseEnter";
+                                edge: RelationshipsBrowserTypes.Edge;
+                            }, undefined, Events>, ActionFunction<Readonly<Input & {
+                                closeable: boolean;
+                                enableNavigationMenu: boolean;
+                                xyflow: XYFLowInstance | null;
+                                xystore: XYStoreApi | null;
+                                layouted: LayoutRelationshipsViewResult | null;
+                                navigateFromNode: string | null;
+                                xynodes: RelationshipsBrowserTypes.Node[];
+                                xyedges: RelationshipsBrowserTypes.Edge[];
+                            }>, {
+                                type: "xyflow.edgeMouseEnter";
+                                edge: RelationshipsBrowserTypes.Edge;
+                            }, Events, undefined, never, never, never, never, never>];
+                        };
+                        readonly 'xyflow.edgeMouseLeave': {
+                            readonly actions: readonly [ ActionFunction<Readonly<Input & {
+                                closeable: boolean;
+                                enableNavigationMenu: boolean;
+                                xyflow: XYFLowInstance | null;
+                                xystore: XYStoreApi | null;
+                                layouted: LayoutRelationshipsViewResult | null;
+                                navigateFromNode: string | null;
+                                xynodes: RelationshipsBrowserTypes.Node[];
+                                xyedges: RelationshipsBrowserTypes.Edge[];
+                            }>, {
+                                type: "xyflow.edgeMouseLeave";
+                                edge: RelationshipsBrowserTypes.Edge;
+                            }, Events, undefined, {
+                                src: "layouter";
+                                logic: PromiseActorLogic<{
+                                    xyedges: RelationshipsBrowserTypes.Edge[];
+                                    xynodes: RelationshipsBrowserTypes.Node[];
+                                }, {
+                                    subjectId: Fqn;
+                                    navigateFromNode: string | null;
+                                    xyflow: XYFLowInstance;
+                                    xystore: XYStoreApi;
+                                    update: LayoutRelationshipsViewResult;
+                                }, EventObject>;
+                                id: "layouter";
+                            }, never, never, never, never>, CancelAction<Readonly<Input & {
+                                closeable: boolean;
+                                enableNavigationMenu: boolean;
+                                xyflow: XYFLowInstance | null;
+                                xystore: XYStoreApi | null;
+                                layouted: LayoutRelationshipsViewResult | null;
+                                navigateFromNode: string | null;
+                                xynodes: RelationshipsBrowserTypes.Node[];
+                                xyedges: RelationshipsBrowserTypes.Edge[];
+                            }>, {
+                                type: "xyflow.edgeMouseLeave";
+                                edge: RelationshipsBrowserTypes.Edge;
+                            }, undefined, Events>, ActionFunction<Readonly<Input & {
+                                closeable: boolean;
+                                enableNavigationMenu: boolean;
+                                xyflow: XYFLowInstance | null;
+                                xystore: XYStoreApi | null;
+                                layouted: LayoutRelationshipsViewResult | null;
+                                navigateFromNode: string | null;
+                                xynodes: RelationshipsBrowserTypes.Node[];
+                                xyedges: RelationshipsBrowserTypes.Edge[];
+                            }>, {
+                                type: "xyflow.edgeMouseLeave";
+                                edge: RelationshipsBrowserTypes.Edge;
+                            }, Events, undefined, never, never, never, never, never>];
+                        };
+                        readonly 'dim.nonhovered.edges': {
+                            readonly actions: ActionFunction<Readonly<Input & {
+                                closeable: boolean;
+                                enableNavigationMenu: boolean;
+                                xyflow: XYFLowInstance | null;
+                                xystore: XYStoreApi | null;
+                                layouted: LayoutRelationshipsViewResult | null;
+                                navigateFromNode: string | null;
+                                xynodes: RelationshipsBrowserTypes.Node[];
+                                xyedges: RelationshipsBrowserTypes.Edge[];
+                            }>, {
+                                type: "dim.nonhovered.edges";
+                            }, Events, undefined, {
+                                src: "layouter";
+                                logic: PromiseActorLogic<{
+                                    xyedges: RelationshipsBrowserTypes.Edge[];
+                                    xynodes: RelationshipsBrowserTypes.Node[];
+                                }, {
+                                    subjectId: Fqn;
+                                    navigateFromNode: string | null;
+                                    xyflow: XYFLowInstance;
+                                    xystore: XYStoreApi;
+                                    update: LayoutRelationshipsViewResult;
+                                }, EventObject>;
+                                id: "layouter";
+                            }, never, never, never, never>;
+                        };
+                        readonly 'undim.edges': {
+                            readonly actions: ActionFunction<Readonly<Input & {
+                                closeable: boolean;
+                                enableNavigationMenu: boolean;
+                                xyflow: XYFLowInstance | null;
+                                xystore: XYStoreApi | null;
+                                layouted: LayoutRelationshipsViewResult | null;
+                                navigateFromNode: string | null;
+                                xynodes: RelationshipsBrowserTypes.Node[];
+                                xyedges: RelationshipsBrowserTypes.Edge[];
+                            }>, {
+                                type: "undim.edges";
+                            }, Events, undefined, {
+                                src: "layouter";
+                                logic: PromiseActorLogic<{
+                                    xyedges: RelationshipsBrowserTypes.Edge[];
+                                    xynodes: RelationshipsBrowserTypes.Node[];
+                                }, {
+                                    subjectId: Fqn;
+                                    navigateFromNode: string | null;
+                                    xyflow: XYFLowInstance;
+                                    xystore: XYStoreApi;
+                                    update: LayoutRelationshipsViewResult;
+                                }, EventObject>;
+                                id: "layouter";
+                            }, never, never, never, never>;
+                        };
+                        readonly 'xyflow.selectionChange': {
+                            readonly actions: ActionFunction<Readonly<Input & {
+                                closeable: boolean;
+                                enableNavigationMenu: boolean;
+                                xyflow: XYFLowInstance | null;
+                                xystore: XYStoreApi | null;
+                                layouted: LayoutRelationshipsViewResult | null;
+                                navigateFromNode: string | null;
+                                xynodes: RelationshipsBrowserTypes.Node[];
+                                xyedges: RelationshipsBrowserTypes.Edge[];
+                            }>, {
+                                type: "xyflow.selectionChange";
+                                nodes: RelationshipsBrowserTypes.Node[];
+                                edges: RelationshipsBrowserTypes.Edge[];
+                            }, Events, undefined, {
+                                src: "layouter";
+                                logic: PromiseActorLogic<{
+                                    xyedges: RelationshipsBrowserTypes.Edge[];
+                                    xynodes: RelationshipsBrowserTypes.Node[];
+                                }, {
+                                    subjectId: Fqn;
+                                    navigateFromNode: string | null;
+                                    xyflow: XYFLowInstance;
+                                    xystore: XYStoreApi;
+                                    update: LayoutRelationshipsViewResult;
+                                }, EventObject>;
+                                id: "layouter";
+                            }, Values<{
+                                "xyflow.init": {
+                                    type: "xyflow.init";
+                                    params: NonReducibleUnknown;
+                                };
+                                "update.view": {
+                                    type: "update.view";
+                                    params: NonReducibleUnknown;
+                                };
+                                "xyflow:updateNodeInternals": {
+                                    type: "xyflow:updateNodeInternals";
+                                    params: unknown;
+                                };
+                                "xyflow:fitDiagram": {
+                                    type: "xyflow:fitDiagram";
+                                    params: {
+                                        duration?: number;
+                                        bounds?: BBox;
+                                    } | undefined;
+                                };
+                            }>, {
+                                type: "isReady";
+                                params: unknown;
+                            }, never, EventObject>;
+                        };
+                    };
+                };
                 readonly layouting: {
                     readonly invoke: {
                         readonly id: "layouter";
@@ -805,7 +1047,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<Input & {
                         };
                         readonly onDone: {
                             readonly target: "idle";
-                            readonly actions: readonly [ ActionFunction<Readonly<Input & {
+                            readonly actions: ActionFunction<Readonly<Input & {
                                 closeable: boolean;
                                 enableNavigationMenu: boolean;
                                 xyflow: XYFLowInstance | null;
@@ -830,55 +1072,30 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<Input & {
                                     update: LayoutRelationshipsViewResult;
                                 }, EventObject>;
                                 id: "layouter";
-                            }, never, never, never, never>, ActionFunction<Readonly<Input & {
-                                closeable: boolean;
-                                enableNavigationMenu: boolean;
-                                xyflow: XYFLowInstance | null;
-                                xystore: XYStoreApi | null;
-                                layouted: LayoutRelationshipsViewResult | null;
-                                navigateFromNode: string | null;
-                                xynodes: RelationshipsBrowserTypes.Node[];
-                                xyedges: RelationshipsBrowserTypes.Edge[];
-                            }>, DoneActorEvent<{
-                                xyedges: RelationshipsBrowserTypes.Edge[];
-                                xynodes: RelationshipsBrowserTypes.Node[];
-                            }, string>, Events, undefined, never, never, never, never, never>, ActionFunction<Readonly<Input & {
-                                closeable: boolean;
-                                enableNavigationMenu: boolean;
-                                xyflow: XYFLowInstance | null;
-                                xystore: XYStoreApi | null;
-                                layouted: LayoutRelationshipsViewResult | null;
-                                navigateFromNode: string | null;
-                                xynodes: RelationshipsBrowserTypes.Node[];
-                                xyedges: RelationshipsBrowserTypes.Edge[];
-                            }>, DoneActorEvent<{
-                                xyedges: RelationshipsBrowserTypes.Edge[];
-                                xynodes: RelationshipsBrowserTypes.Node[];
-                            }, string>, Events, undefined, never, never, never, never, never>, ActionFunction<Readonly<Input & {
-                                closeable: boolean;
-                                enableNavigationMenu: boolean;
-                                xyflow: XYFLowInstance | null;
-                                xystore: XYStoreApi | null;
-                                layouted: LayoutRelationshipsViewResult | null;
-                                navigateFromNode: string | null;
-                                xynodes: RelationshipsBrowserTypes.Node[];
-                                xyedges: RelationshipsBrowserTypes.Edge[];
-                            }>, DoneActorEvent<{
-                                xyedges: RelationshipsBrowserTypes.Edge[];
-                                xynodes: RelationshipsBrowserTypes.Node[];
-                            }, string>, Events, undefined, never, never, never, never, never>, ActionFunction<Readonly<Input & {
-                                closeable: boolean;
-                                enableNavigationMenu: boolean;
-                                xyflow: XYFLowInstance | null;
-                                xystore: XYStoreApi | null;
-                                layouted: LayoutRelationshipsViewResult | null;
-                                navigateFromNode: string | null;
-                                xynodes: RelationshipsBrowserTypes.Node[];
-                                xyedges: RelationshipsBrowserTypes.Edge[];
-                            }>, DoneActorEvent<{
-                                xyedges: RelationshipsBrowserTypes.Edge[];
-                                xynodes: RelationshipsBrowserTypes.Node[];
-                            }, string>, Events, undefined, never, never, never, never, never>];
+                            }, Values<{
+                                "xyflow.init": {
+                                    type: "xyflow.init";
+                                    params: NonReducibleUnknown;
+                                };
+                                "update.view": {
+                                    type: "update.view";
+                                    params: NonReducibleUnknown;
+                                };
+                                "xyflow:updateNodeInternals": {
+                                    type: "xyflow:updateNodeInternals";
+                                    params: unknown;
+                                };
+                                "xyflow:fitDiagram": {
+                                    type: "xyflow:fitDiagram";
+                                    params: {
+                                        duration?: number;
+                                        bounds?: BBox;
+                                    } | undefined;
+                                };
+                            }>, {
+                                type: "isReady";
+                                params: unknown;
+                            }, never, EventObject>;
                         };
                     };
                     readonly on: {

package/dist/overlays/relationships-browser/actor.js

@@ -8,8 +8,8 @@ import { updateEdges } from "../../base/updateEdges.js";
 import { updateNodes } from "../../base/updateNodes.js";
 import { ViewPadding } from "./const.js";
 import { viewToNodesEdge } from "./useViewToNodesEdges.js";
-import { centerXYInternalNode } from "../../utils/xyflow.js";
 import { Base } from "../../base/types.js";
+import { centerXYInternalNode } from "../../utils/xyflow.js";
 const findRootSubject = (nodes) => nodes.find(
   (n) => n.data.column === "subjects" && isNullish(n.parentId)
 );
@@ -159,7 +159,7 @@ const relationshipsBrowserLogic = setup({
           updates.set(updateId, { id: updateId, nodeElement, force: true });
         }
       }
-      requestAnimationFrame(() => updateNodeInternals(updates, { triggerFitView: false }));
+      updateNodeInternals(updates, { triggerFitView: false });
     },
     "xyflow:fitDiagram": ({ context }, params) => {
       var _a;
@@ -175,16 +175,14 @@ const relationshipsBrowserLogic = setup({
       if (bounds) {
         const { width, height } = xystore.getState();
         const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding);
-        requestAnimationFrame(() => xyflow.setViewport(viewport, duration > 0 ? { duration } : void 0));
+        xyflow.setViewport(viewport, duration > 0 ? { duration } : void 0);
       } else {
-        requestAnimationFrame(
-          () => xyflow.fitView({
-            minZoom: MinZoom,
-            maxZoom,
-            padding: ViewPadding,
-            ...duration > 0 && { duration }
-          })
-        );
+        xyflow.fitView({
+          minZoom: MinZoom,
+          maxZoom,
+          padding: ViewPadding,
+          ...duration > 0 && { duration }
+        });
       }
     }
   }
@@ -236,7 +234,10 @@ const relationshipsBrowserLogic = setup({
     "isReady": {
       always: [{
         guard: "isReady",
-        actions: raise({ type: "fitDiagram", duration: 0 }),
+        actions: [
+          raise({ type: "fitDiagram", duration: 0 }),
+          raise({ type: "xyflow.updateNodeInternals" }, { delay: 100 })
+        ],
         target: "active"
       }, {
         target: "initializing"
@@ -246,7 +247,70 @@ const relationshipsBrowserLogic = setup({
       initial: "idle",
       tags: ["active"],
       states: {
-        "idle": {},
+        "idle": {
+          on: {
+            "xyflow.edgeMouseEnter": {
+              actions: [
+                assign({
+                  xyedges: ({ context, event }) => {
+                    const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed === true);
+                    return context.xyedges.map((edge) => {
+                      if (edge.id === event.edge.id) {
+                        return Base.setData(edge, {
+                          hovered: true,
+                          dimmed: false
+                        });
+                      }
+                      return hasDimmed && !edge.data.dimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
+                    });
+                  }
+                }),
+                cancel("undim.edges"),
+                cancel("dim.nonhovered.edges"),
+                raise({ type: "dim.nonhovered.edges" }, { id: "dim.nonhovered.edges", delay: 100 })
+              ]
+            },
+            "xyflow.edgeMouseLeave": {
+              actions: [
+                assign({
+                  xyedges: ({ context, event }) => context.xyedges.map((edge) => {
+                    if (edge.id === event.edge.id) {
+                      return Base.setHovered(edge, false);
+                    }
+                    return edge;
+                  })
+                }),
+                cancel("dim.nonhovered.edges"),
+                raise({ type: "undim.edges" }, { id: "undim.edges", delay: 400 })
+              ]
+            },
+            "dim.nonhovered.edges": {
+              actions: assign({
+                xyedges: ({ context }) => context.xyedges.map((edge) => Base.setDimmed(edge, edge.data.hovered !== true))
+              })
+            },
+            "undim.edges": {
+              actions: assign({
+                xyedges: ({ context }) => {
+                  const hasSelected = context.xyedges.some((edge) => edge.selected === true);
+                  if (hasSelected) {
+                    return context.xyedges.map(
+                      (edge) => Base.setDimmed(edge, edge.selected !== true ? edge.data.dimmed || "immediate" : false)
+                    );
+                  }
+                  return context.xyedges.map(Base.setDimmed(false));
+                }
+              })
+            },
+            "xyflow.selectionChange": {
+              actions: enqueueActions(({ event, context, enqueue }) => {
+                if (event.edges.length === 0 && context.xyedges.some((e) => e.data.dimmed) && !context.xyedges.some((e) => e.data.hovered)) {
+                  enqueue.raise({ type: "undim.edges" });
+                }
+              })
+            }
+          }
+        },
         "layouting": {
           invoke: {
             id: "layouter",
@@ -262,17 +326,16 @@ const relationshipsBrowserLogic = setup({
             },
             onDone: {
               target: "idle",
-              actions: [
-                assign({
-                  xynodes: ({ event }) => event.output.xynodes,
-                  xyedges: ({ event }) => event.output.xyedges,
+              actions: enqueueActions(({ enqueue, event }) => {
+                enqueue.assign({
+                  xynodes: event.output.xynodes,
+                  xyedges: event.output.xyedges,
                   navigateFromNode: null
-                }),
-                raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 80 }),
-                raise({ type: "xyflow.updateNodeInternals" }, { delay: 100 }),
-                raise({ type: "xyflow.updateNodeInternals" }, { delay: 250 }),
-                raise({ type: "xyflow.updateNodeInternals" }, { delay: 500 })
-              ]
+                }), enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 50 });
+                for (let i = 0; i <= 10; i++) {
+                  enqueue.raise({ type: "xyflow.updateNodeInternals" }, { delay: 100 + i * 50 });
+                }
+              })
             }
           },
           on: {

package/dist/state/DiagramActorProvider.js

@@ -3,7 +3,7 @@ import { useCallbackRef } from "@mantine/hooks";
 import { useActorRef, useSelector } from "@xstate/react";
 import { useStoreApi } from "@xyflow/react";
 import { shallowEqual } from "fast-equals";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useDiagramEventHandlersRef } from "../context/DiagramEventHandlers.js";
 import { useEnabledFeatures, DiagramFeatures } from "../context/DiagramFeatures.js";
 import { DiagramActorSafeContext } from "../hooks/safeContext.js";
@@ -63,8 +63,18 @@ const SyncStore = ({ input: { view, xyedges, xynodes, ...inputs }, actorRef }) =
   useEffect(() => {
     actorRef.send({ type: "update.features", features });
   }, [actorRef, features]);
+  const frameReq = useRef(null);
   useUpdateEffect(() => {
-    actorRef.send({ type: "update.view", view, xyedges, xynodes });
+    frameReq.current = requestAnimationFrame(() => {
+      frameReq.current = null;
+      actorRef.send({ type: "update.view", view, xyedges, xynodes });
+    });
+    return () => {
+      if (frameReq.current != null) {
+        cancelAnimationFrame(frameReq.current);
+      }
+      frameReq.current = null;
+    };
   }, [actorRef, view, xyedges, xynodes]);
   return null;
 };

package/dist/state/assign.js

@@ -136,7 +136,21 @@ function updateNavigationHistory({ context, event }) {
     lastOnNavigate,
     viewport
   } = context;
-  const stepCurrent = nonNullable(history[currentIndex]);
+  const stepCurrent = history[currentIndex];
+  if (!stepCurrent) {
+    return {
+      navigationHistory: {
+        currentIndex: 0,
+        history: [
+          {
+            viewId: event.view.id,
+            fromNode: null,
+            viewport: { ...viewport }
+          }
+        ]
+      }
+    };
+  }
   if (stepCurrent.viewId !== event.view.id) {
     if (!lastOnNavigate) {
       const stepBack = currentIndex > 0 ? nonNullable(history[currentIndex - 1]) : null;