@likec4/diagram 1.23.1 → 1.24.1

package/src/overlays/relationship-details/RelationshipDetails.tsx

@@ -7,6 +7,7 @@ import clsx from 'clsx'
 import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
 import { memo, useEffect, useRef } from 'react'
 import { BaseXYFlow } from '../../base/BaseXYFlow'
+import { Base } from '../../base/types'
 import { updateEdges } from '../../base/updateEdges'
 import { updateNodes } from '../../base/updateNodes'
 import { useUpdateEffect } from '../../hooks'
@@ -45,7 +46,11 @@ export function RelationshipDetails({ actorRef }: RelationshipDetailsProps) {
   return (
     <RelationshipDetailsActorContext.Provider value={actorRef}>
       <ReactFlowProvider {...initialRef.current}>
-        <RelationshipDetailsInner />
+        <LayoutGroup id={actorRef.sessionId} inherit={false}>
+          <AnimatePresence>
+            <RelationshipDetailsInner />
+          </AnimatePresence>
+        </LayoutGroup>
       </ReactFlowProvider>
     </RelationshipDetailsActorContext.Provider>
   )
@@ -55,6 +60,8 @@ const selector = (state: RelationshipDetailsSnapshot) => ({
   edgeId: state.context.edgeId,
   view: state.context.view,
   initialized: state.context.initialized,
+  nodes: state.context.xynodes,
+  edges: state.context.xyedges,
 })
 
 const RelationshipDetailsInner = memo(() => {
@@ -63,6 +70,8 @@ const RelationshipDetailsInner = memo(() => {
     edgeId,
     view,
     initialized,
+    nodes,
+    edges,
   } = useRelationshipDetailsState(selector)
 
   const {
@@ -71,12 +80,9 @@ const RelationshipDetailsInner = memo(() => {
     xyedges,
     bounds,
   } = useLayoutedDetails(edgeId, view)
-  const [nodes, setNodes, onNodesChange] = useNodesState(xynodes)
-  const [edges, setEdges, onEdgesChange] = useEdgesState(xyedges)
 
-  useUpdateEffect(() => {
-    setNodes(updateNodes(xynodes))
-    setEdges(updateEdges(xyedges))
+  useEffect(() => {
+    browser.send({ type: 'update.xydata', xynodes, xyedges })
   }, [xynodes, xyedges])
 
   const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edgeId)
@@ -89,7 +95,7 @@ const RelationshipDetailsInner = memo(() => {
 
   useEffect(() => {
     if (historyEdgeId !== edgeId) {
-      // browser.navigateTo(historyEdgeId)
+      browser.navigateTo(historyEdgeId)
     }
   }, [historyEdgeId])
 
@@ -97,65 +103,76 @@ const RelationshipDetailsInner = memo(() => {
   const hasStepForward = current + 1 < history.length
 
   return (
-    <LayoutGroup>
-      <BaseXYFlow<Types.Node, Types.Edge>
-        id="relationship-details"
-        nodes={nodes}
-        edges={edges}
-        className={clsx(initialized ? 'initialized' : 'not-initialized')}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        onEdgesChange={onEdgesChange}
-        onNodesChange={onNodesChange}
-        fitViewPadding={0.05}
-        onInit={useCallbackRef((instance) => {
-          browser.send({ type: 'xyflow.init', instance })
-        })}
-        onNodeClick={useCallbackRef((e, node) => {
-          e.stopPropagation()
-          browser.send({ type: 'xyflow.nodeClick', node })
-        })}
-        onEdgeClick={useCallbackRef((e, edge) => {
-          e.stopPropagation()
-          browser.send({ type: 'xyflow.edgeClick', edge })
-        })}
-        onPaneClick={useCallbackRef((e) => {
-          e.stopPropagation()
-          browser.send({ type: 'xyflow.paneClick' })
-        })}
-        onViewportResize={useCallbackRef(() => {
-          browser.send({ type: 'xyflow.resized' })
-        })}
-        nodesDraggable={false}
-        fitView={false}
-        pannable
-        zoomable
-      >
-        <TopLeftPanel
-          edge={edge}
-          view={view}
-          hasStepBack={hasStepBack}
-          hasStepForward={hasStepForward}
-          onStepBack={() => historyOps.back()}
-          onStepForward={() => historyOps.forward()}
-        />
-        <Panel position="top-right">
-          <ActionIcon
-            variant="default"
-            color="gray"
-            // color="gray"
-            // size={'lg'}
-            // data-autofocus
-            // autoFocus
-            onClick={(e) => {
-              e.stopPropagation()
-              browser.close()
-            }}>
-            <IconX />
-          </ActionIcon>
-        </Panel>
-      </BaseXYFlow>
-    </LayoutGroup>
+    <BaseXYFlow<Types.Node, Types.Edge>
+      id={`relationships-details-${browser.actor.sessionId}`}
+      nodes={nodes}
+      edges={edges}
+      className={clsx(initialized ? 'initialized' : 'not-initialized')}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      onNodesChange={useCallbackRef((changes) => {
+        browser.send({ type: 'xyflow.applyNodeChanges', changes })
+      })}
+      onEdgesChange={useCallbackRef((changes) => {
+        browser.send({ type: 'xyflow.applyEdgeChanges', changes })
+      })}
+      fitViewPadding={0.05}
+      onInit={useCallbackRef((instance) => {
+        browser.send({ type: 'xyflow.init', instance })
+      })}
+      onNodeClick={useCallbackRef((e, node) => {
+        e.stopPropagation()
+        browser.send({ type: 'xyflow.nodeClick', node })
+      })}
+      onEdgeClick={useCallbackRef((e, edge) => {
+        e.stopPropagation()
+        browser.send({ type: 'xyflow.edgeClick', edge })
+      })}
+      onPaneClick={useCallbackRef((e) => {
+        e.stopPropagation()
+        browser.send({ type: 'xyflow.paneClick' })
+      })}
+      onViewportResize={useCallbackRef(() => {
+        browser.send({ type: 'xyflow.resized' })
+      })}
+      onEdgeMouseEnter={useCallbackRef((_event, edge) => {
+        browser.send({ type: 'xyflow.edgeMouseEnter', edge })
+      })}
+      onEdgeMouseLeave={useCallbackRef((_event, edge) => {
+        browser.send({ type: 'xyflow.edgeMouseLeave', edge })
+      })}
+      onSelectionChange={useCallbackRef((params) => {
+        browser.send({ type: 'xyflow.selectionChange', ...params })
+      })}
+      nodesDraggable={false}
+      fitView={false}
+      pannable
+      zoomable
+    >
+      <TopLeftPanel
+        edge={edge}
+        view={view}
+        hasStepBack={hasStepBack}
+        hasStepForward={hasStepForward}
+        onStepBack={() => historyOps.back()}
+        onStepForward={() => historyOps.forward()}
+      />
+      <Panel position="top-right">
+        <ActionIcon
+          variant="default"
+          color="gray"
+          // color="gray"
+          // size={'lg'}
+          // data-autofocus
+          // autoFocus
+          onClick={(e) => {
+            e.stopPropagation()
+            browser.close()
+          }}>
+          <IconX />
+        </ActionIcon>
+      </Panel>
+    </BaseXYFlow>
   )
 })
 

package/src/overlays/relationship-details/actor.ts

@@ -1,19 +1,23 @@
 import { type BBox, type DiagramView, type EdgeId, invariant } from '@likec4/core'
 import {
+  type EdgeChange,
+  type NodeChange,
   type ReactFlowInstance,
+  applyEdgeChanges,
+  applyNodeChanges,
 } from '@xyflow/react'
 import { prop } from 'remeda'
 import {
-  type ActorLogic,
   type ActorLogicFrom,
   type ActorRefFromLogic,
-  type MachineSnapshot,
   type SnapshotFrom,
   assign,
   cancel,
+  enqueueActions,
   raise,
   setup,
 } from 'xstate'
+import { Base } from '../../base'
 import { MinZoom } from '../../base/const'
 import type { RelationshipDetailsTypes } from './_types'
 
@@ -31,6 +35,8 @@ export type Context = Readonly<
     // parentRef: AnyActorRef | null
     xyflow: XYFLowInstance | null
     initialized: boolean
+    xynodes: RelationshipDetailsTypes.Node[]
+    xyedges: RelationshipDetailsTypes.Edge[]
     // bounds: BBox | null
   }
 >
@@ -39,8 +45,20 @@ export type Events =
   | { type: 'xyflow.init'; instance: XYFLowInstance }
   | { type: 'xyflow.nodeClick'; node: RelationshipDetailsTypes.Node }
   | { type: 'xyflow.edgeClick'; edge: RelationshipDetailsTypes.Edge }
+  | { type: 'xyflow.edgeMouseEnter'; edge: RelationshipDetailsTypes.Edge }
+  | { type: 'xyflow.edgeMouseLeave'; edge: RelationshipDetailsTypes.Edge }
+  | { type: 'dim.nonhovered.edges' }
+  | { type: 'undim.edges' }
+  | { type: 'xyflow.selectionChange'; nodes: RelationshipDetailsTypes.Node[]; edges: RelationshipDetailsTypes.Edge[] }
+  | { type: 'xyflow.applyNodeChanges'; changes: NodeChange<RelationshipDetailsTypes.Node>[] }
+  | { type: 'xyflow.applyEdgeChanges'; changes: EdgeChange<RelationshipDetailsTypes.Edge>[] }
   | { type: 'xyflow.paneClick' }
   | { type: 'xyflow.resized' }
+  | {
+    type: 'update.xydata'
+    xynodes: RelationshipDetailsTypes.Node[]
+    xyedges: RelationshipDetailsTypes.Edge[]
+  }
   // | { type: 'update.bounds'; bounds: BBox }
   | { type: 'fitDiagram'; duration?: number; bounds?: BBox }
   | { type: 'navigate.to'; edgeId: EdgeId }
@@ -82,6 +100,8 @@ export const relationshipDetailsLogic = setup({
     ...input,
     initialized: false,
     xyflow: null,
+    xynodes: [],
+    xyedges: [],
   }),
   states: {
     'opening': {
@@ -104,17 +124,70 @@ export const relationshipDetailsLogic = setup({
         params: { duration: 0 },
       },
       on: {
-        // 'xyflow.nodeClick': {
-        //   actions: enqueueActions(({ event, enqueue }) => {
-        //     if ('fqn' in event.node.data) {
-        //       const fqn = event.node.data.fqn
-        //       enqueue.assign({
-        //         subject: fqn,
-        //       })
-        //       enqueue.raise({ type: 'fitDiagram' }, { delay: 50 })
-        //     }
-        //   }),
-        // },
+        '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' })
+            }
+          }),
+        },
         'navigate.to': {
           actions: [
             assign({
@@ -149,6 +222,26 @@ export const relationshipDetailsLogic = setup({
         raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 200 }),
       ],
     },
+    'update.xydata': {
+      actions: assign({
+        xynodes: ({ event }) => event.xynodes,
+        xyedges: ({ event }) => event.xyedges,
+      }),
+    },
+    'xyflow.applyNodeChanges': {
+      actions: assign({
+        xynodes: ({ context, event }) => {
+          return applyNodeChanges(event.changes, context.xynodes)
+        },
+      }),
+    },
+    'xyflow.applyEdgeChanges': {
+      actions: assign({
+        xyedges: ({ context, event }) => {
+          return applyEdgeChanges(event.changes, context.xyedges)
+        },
+      }),
+    },
   },
 })
 

package/src/overlays/relationship-details/hooks.ts

@@ -3,6 +3,7 @@ import { useCallbackRef } from '@mantine/hooks'
 import { useSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
 import { createContext, useContext, useMemo, useTransition } from 'react'
+import type { OverlaysActorRef } from '../overlaysActor'
 import type { RelationshipDetailsActorRef, RelationshipDetailsSnapshot } from './actor'
 
 export const RelationshipDetailsActorContext = createContext<RelationshipDetailsActorRef | null>(null)
@@ -24,6 +25,7 @@ export function useRelationshipDetails() {
   const actor = useRelationshipDetailsActor()
   const [, startTransition] = useTransition()
   return useMemo(() => ({
+    actor,
     getState: () => actor.getSnapshot().context,
     send: actor.send,
     navigateTo: (edgeId: EdgeId) => {
@@ -40,9 +42,11 @@ export function useRelationshipDetails() {
       })
     },
     close: () => {
-      startTransition(() => {
+      if (actor._parent) {
+        ;(actor._parent as OverlaysActorRef)?.send({ type: 'close', actorId: actor.id })
+      } else {
         actor.send({ type: 'close' })
-      })
+      }
     },
   }), [actor])
 }

package/src/overlays/relationships-browser/-useRelationshipsView.ts

@@ -391,6 +391,16 @@ export function layoutRelationshipsView(data: RelationshipsViewData): LayoutRela
     })
   }
 
+  const edgeCount = g.edgeCount()
+  if (edgeCount > 10) {
+    for (const edge of g.edges()) {
+      g.setEdge(edge, {
+        ...Sizes.edgeLabel,
+        width: edgeCount > 30 ? 800 : 400,
+      })
+    }
+  }
+
   const dagreBounds = applyDagreLayout(g)
 
   // Calculate bounds for all nodes except compounds

package/src/overlays/relationships-browser/RelationshipsBrowser.tsx

@@ -5,8 +5,8 @@ import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
 import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from '@xyflow/react'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
-import { AnimatePresence, LayoutGroup, m, useUnmountEffect } from 'framer-motion'
-import { memo, useEffect, useId, useRef } from 'react'
+import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
+import { memo, useEffect, useRef } from 'react'
 import type { SnapshotFrom } from 'xstate'
 import { BaseXYFlow } from '../../base/BaseXYFlow'
 import { useRelationshipsView } from './-useRelationshipsView'
@@ -18,7 +18,6 @@ import { nodeTypes } from './custom/nodeTypes'
 import {
   RelationshipsBrowserActorContext,
   useRelationshipsBrowser,
-  useRelationshipsBrowserActor,
   useRelationshipsBrowserState,
 } from './hooks'
 import { SelectElement } from './SelectElement'
@@ -32,14 +31,14 @@ export function RelationshipsBrowser({ actorRef }: RelationshipsBrowserProps) {
   //   return null
   // }
   const initialRef = useRef<{
-    defaultNodes: Types.Node[]
-    defaultEdges: Types.Edge[]
+    initialNodes: Types.Node[]
+    initialEdges: Types.Edge[]
   }>(null)
 
   if (initialRef.current == null) {
     initialRef.current = {
-      defaultNodes: [],
-      defaultEdges: [],
+      initialNodes: [],
+      initialEdges: [],
     }
   }
 
@@ -85,6 +84,7 @@ const RelationshipsBrowserXYFlow = memo(() => {
       className={clsx(isActive ? 'initialized' : 'not-initialized')}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
+      fitView={false}
       fitViewPadding={ViewPadding}
       onNodeClick={useCallbackRef((e, node) => {
         e.stopPropagation()
@@ -111,8 +111,16 @@ const RelationshipsBrowserXYFlow = memo(() => {
       onEdgesChange={useCallbackRef((changes) => {
         browser.send({ type: 'xyflow.applyEdgeChanges', changes })
       })}
+      onEdgeMouseEnter={useCallbackRef((_event, edge) => {
+        browser.send({ type: 'xyflow.edgeMouseEnter', edge })
+      })}
+      onEdgeMouseLeave={useCallbackRef((_event, edge) => {
+        browser.send({ type: 'xyflow.edgeMouseLeave', edge })
+      })}
+      onSelectionChange={useCallbackRef((params) => {
+        browser.send({ type: 'xyflow.selectionChange', ...params })
+      })}
       nodesDraggable={false}
-      fitView={false}
       pannable
       zoomable
     >

package/src/overlays/relationships-browser/actor.ts

@@ -77,6 +77,9 @@ export type Events =
   | { type: 'xyflow.resized' }
   | { type: 'xyflow.edgeMouseEnter'; edge: RelationshipsBrowserTypes.Edge }
   | { 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' }
   | { type: 'xyflow.unmount' }
   | { type: 'fitDiagram'; duration?: number; bounds?: BBox }
@@ -274,7 +277,7 @@ export const relationshipsBrowserLogic = setup({
         }
       }
 
-      requestAnimationFrame(() => updateNodeInternals(updates, { triggerFitView: false }))
+      updateNodeInternals(updates, { triggerFitView: false })
     },
     'xyflow:fitDiagram': ({ context }, params?: { duration?: number; bounds?: BBox }) => {
       let {
@@ -289,16 +292,14 @@ export 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 } : undefined))
+        xyflow.setViewport(viewport, duration > 0 ? { duration } : undefined)
       } else {
-        requestAnimationFrame(() =>
-          xyflow.fitView({
-            minZoom: MinZoom,
-            maxZoom,
-            padding: ViewPadding,
-            ...(duration > 0 && { duration }),
-          })
-        )
+        xyflow.fitView({
+          minZoom: MinZoom,
+          maxZoom,
+          padding: ViewPadding,
+          ...(duration > 0 && { duration }),
+        })
       }
     },
   },
@@ -350,7 +351,10 @@ export 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',
@@ -360,7 +364,74 @@ export 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',
@@ -376,17 +447,16 @@ export 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/src/state/DiagramActorProvider.tsx

@@ -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 { type PropsWithChildren, useEffect } from 'react'
+import { type PropsWithChildren, useEffect, useRef } from 'react'
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { DiagramActorSafeContext } from '../hooks/safeContext'
@@ -80,8 +80,19 @@ const SyncStore = (
     actorRef.send({ type: 'update.features', features })
   }, [actorRef, features])
 
+  const frameReq = useRef<number>(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