@likec4/diagram 1.26.2 → 1.27.1

package/src/state/diagram-machine.ts

@@ -42,6 +42,7 @@ import {
   stopChild,
 } from 'xstate'
 import { MinZoom } from '../base/const'
+import { Base } from '../base/types'
 import { type EnabledFeatures, type FeatureName, AllDisabled } from '../context/DiagramFeatures'
 import type { OpenSourceParams } from '../LikeC4Diagram.props'
 import type { Types } from '../likec4diagram/types'
@@ -79,21 +80,25 @@ export interface NavigationHistory {
 
 export interface Input {
   view: DiagramView
-  xynodes: Types.Node[]
-  xyedges: Types.Edge[]
   xystore: XYStoreApi
   zoomable: boolean
   pannable: boolean
   fitViewPadding: number
+  nodesSelectable: boolean
 }
 
 type ToggledFeatures = Partial<EnabledFeatures>
 
 export interface Context extends Input {
+  xynodes: Types.Node[]
+  xyedges: Types.Edge[]
   features: EnabledFeatures
   // This is used to override features from props
   toggledFeatures: ToggledFeatures
-  initialized: boolean
+  initialized: {
+    xydata: boolean
+    xyflow: boolean
+  }
   viewport: Viewport
   viewportChangedManually: boolean
   lastOnNavigate: null | {
@@ -119,7 +124,7 @@ export interface Context extends Input {
   viewportBeforeFocus: null | Viewport
   xyflow: ReactFlowInstance<Types.Node, Types.Edge> | null
 
-  syncLayoutActorRef: ActorRef<Snapshot<unknown>, SyncLayoutEvents, AnyEventObject>
+  syncLayoutActorRef: null | ActorRef<Snapshot<unknown>, SyncLayoutEvents, AnyEventObject>
 
   // If Dynamic View
   activeWalkthrough: null | {
@@ -139,10 +144,14 @@ export type Events =
   | { type: 'xyflow.paneClick' }
   | { type: 'xyflow.paneDblClick' }
   | { type: 'xyflow.resized' }
+  | { type: 'xyflow.nodeMouseEnter'; node: Types.Node }
+  | { type: 'xyflow.nodeMouseLeave'; node: Types.Node }
+  | { type: 'xyflow.edgeMouseEnter'; edge: Types.Edge }
+  | { type: 'xyflow.edgeMouseLeave'; edge: Types.Edge }
   | { type: 'update.nodeData'; nodeId: NodeId; data: Partial<Types.NodeData> }
   | { type: 'update.edgeData'; edgeId: EdgeId; data: Partial<Types.Edge['data']> }
   | { type: 'update.view'; view: DiagramView; xynodes: Types.Node[]; xyedges: Types.Edge[] }
-  | { type: 'update.inputs'; inputs: Partial<Omit<Input, 'view'>> }
+  | { type: 'update.inputs'; inputs: Partial<Omit<Input, 'view' | 'xystore'>> }
   | { type: 'update.features'; features: EnabledFeatures }
   | { type: 'fitDiagram'; duration?: number; bounds?: BBox }
   | ({ type: 'open.source' } & OpenSourceParams)
@@ -183,6 +192,7 @@ export const diagramMachine = setup({
     overlaysActorLogic,
   },
   guards: {
+    'isReady': ({ context }) => context.initialized.xydata && context.initialized.xyflow,
     'enabled: FitView': ({ context }) => context.features.enableFitView,
     'enabled: FocusMode': ({ context }) => context.features.enableFocusMode,
     'enabled: Readonly': ({ context }) => context.features.enableReadOnly,
@@ -329,19 +339,21 @@ export const diagramMachine = setup({
         return
       }
       const constraints = createLayoutConstraints(xystore, nodesToAlign)
-
       const aligner = getAligner(mode)
 
-      constraints.onMove(nodes => {
-        aligner.computeLayout(nodes.map(({ node }) => toNodeRect(node)))
+      const nodes = nodesToAlign.map(id => ({
+        node: nonNullable(nodeLookup.get(id)),
+        rect: nonNullable(constraints.rects.get(id)),
+      }))
+      aligner.computeLayout(nodes.map(({ node }) => toNodeRect(node)))
 
-        nodes.forEach(({ rect, node }) => {
-          rect.positionAbsolute = {
-            ...rect.positionAbsolute,
-            ...aligner.applyPosition(toNodeRect(node)),
-          }
-        })
-      })
+      for (const { rect, node } of nodes) {
+        rect.positionAbsolute = {
+          ...rect.positionAbsolute,
+          ...aligner.applyPosition(toNodeRect(node)),
+        }
+      }
+      constraints.updateXYFlowNodes()
     },
 
     'updateFeatures': enqueueActions(({ enqueue, system, event }) => {
@@ -359,34 +371,90 @@ export const diagramMachine = setup({
         return
       }
       if (!enableOverlays && hasRunning) {
+        enqueue.sendTo(hasRunning, {
+          type: 'close.all',
+        })
         enqueue.stopChild('overlays')
       }
     }),
 
-    'closeAllOverlays': enqueueActions(({ system, enqueue }) => {
-      const overlays = typedSystem(system).overlaysActorRef
-      if (overlays) {
-        enqueue.sendTo(overlays, { type: 'close.all' })
-      }
-    }),
+    'closeAllOverlays': sendTo(
+      ({ system }) => typedSystem(system).overlaysActorRef!,
+      {
+        type: 'close.all',
+      },
+    ),
+
+    'startSyncLayout': assign(({ context, spawn, self }) => ({
+      syncLayoutActorRef: spawn('syncManualLayoutActorLogic', {
+        id: 'syncLayout',
+        input: { parent: self, viewId: context.view.id },
+      }),
+    })),
 
     'stopSyncLayout': enqueueActions(({ context, enqueue }) => {
-      enqueue.sendTo(context.syncLayoutActorRef, { type: 'stop' })
-      enqueue.stopChild(context.syncLayoutActorRef)
+      enqueue.sendTo(context.syncLayoutActorRef!, { type: 'stop' })
+      enqueue.stopChild(context.syncLayoutActorRef!)
       enqueue.assign({
         syncLayoutActorRef: null as any,
       })
     }),
+
+    'onNodeMouseEnter': assign(({ context }, params: { node: Types.Node }) => {
+      return {
+        xynodes: context.xynodes.map(n => {
+          if (n.id === params.node.id) {
+            return Base.setHovered(n, true)
+          }
+          return n
+        }),
+      }
+    }),
+    'onNodeMouseLeave': assign(({ context }, params: { node: Types.Node }) => {
+      return {
+        xynodes: context.xynodes.map(n => {
+          if (n.id === params.node.id) {
+            return Base.setHovered(n, false)
+          }
+          return n
+        }),
+      }
+    }),
+    'onEdgeMouseEnter': assign(({ context }, params: { edge: Types.Edge }) => {
+      return {
+        xyedges: context.xyedges.map(e => {
+          if (e.id === params.edge.id) {
+            return Base.setHovered(e, true)
+          }
+          return e
+        }),
+      }
+    }),
+    'onEdgeMouseLeave': assign(({ context }, params: { edge: Types.Edge }) => {
+      return {
+        xyedges: context.xyedges.map(e => {
+          if (e.id === params.edge.id) {
+            return Base.setHovered(e, false)
+          }
+          return e
+        }),
+      }
+    }),
   },
 }).createMachine({
   initial: 'initializing',
   context: ({ input, self, spawn }) => ({
     ...input,
+    xyedges: [],
+    xynodes: [],
     features: { ...AllDisabled },
     toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
       enableReadOnly: true,
     },
-    initialized: false,
+    initialized: {
+      xydata: false,
+      xyflow: false,
+    },
     viewportChangedManually: false,
     lastOnNavigate: null,
     lastClickedNode: null,
@@ -399,10 +467,7 @@ export const diagramMachine = setup({
     },
     viewport: { x: 0, y: 0, zoom: 1 },
     xyflow: null,
-    syncLayoutActorRef: spawn('syncManualLayoutActorLogic', {
-      id: 'syncLayout',
-      input: { parent: self, viewId: input.view.id },
-    }),
+    syncLayoutActorRef: null,
     activeWalkthrough: null,
   }),
   // entry: ({ spawn }) => spawn(layoutActor, { id: 'layout', input: { parent: self } }),
@@ -410,156 +475,200 @@ export const diagramMachine = setup({
     initializing: {
       on: {
         'xyflow.init': {
-          actions: enqueueActions(({ enqueue, check }) => {
-            enqueue.assign({
-              initialized: true,
-              xyflow: ({ event }) => event.instance,
-              navigationHistory: ({ context, event }) => ({
-                currentIndex: 0,
-                history: [{
-                  viewId: context.view.id,
-                  fromNode: null,
-                  viewport: { ...event.instance.getViewport() },
-                }],
-              }),
-            })
-            if (check('enabled: FitView')) {
-              enqueue({
-                type: 'xyflow:fitDiagram',
-                params: { duration: 0 },
-              })
-            }
-          }),
-          target: 'idle',
+          actions: assign(({ context, event }) => ({
+            initialized: {
+              ...context.initialized,
+              xyflow: true,
+            },
+            xyflow: event.instance,
+          })),
+          target: 'isReady',
+        },
+        'update.view': {
+          actions: assign(({ context, event, spawn, self }) => ({
+            initialized: {
+              ...context.initialized,
+              xydata: true,
+            },
+            view: event.view,
+            xynodes: event.xynodes,
+            xyedges: event.xyedges,
+          })),
+          target: 'isReady',
         },
       },
     },
-    idle: {
-      id: 'idle',
-      on: {
-        'xyflow.nodeClick': [
-          {
-            // TODO: xstate fails to infer the type of the guard
-            guard: and([
-              'enabled: FocusMode',
-              'click: node has connections',
-              or([
-                'click: same node',
-                'click: selected node',
-              ]),
-            ]) as any,
-            actions: [
-              assign({
-                lastClickedNode,
-                focusedNode: ({ event }) => event.node.id as NodeId,
-              }),
-            ],
-            target: 'focused',
-          },
+    'isReady': {
+      always: [{
+        guard: 'isReady',
+        actions: [
           {
-            actions: [
-              'assign lastClickedNode',
-              'open source of focused or last clicked node',
-            ],
+            type: 'xyflow:fitDiagram',
+            params: { duration: 0 },
           },
+          'startSyncLayout',
+          assign(({ context }) => ({
+            navigationHistory: {
+              currentIndex: 0,
+              history: [{
+                viewId: context.view.id,
+                fromNode: null,
+                viewport: { ...context.xyflow!.getViewport() },
+              }],
+            },
+          })),
         ],
-        'xyflow.paneClick': {
-          actions: [
-            assign({
-              lastClickedNode: null,
+        target: 'ready',
+      }, {
+        target: 'initializing',
+      }],
+    },
+    ready: {
+      initial: 'idle',
+      on: {
+        'navigate.to': {
+          guard: 'is another view',
+          actions: assign({
+            lastOnNavigate: ({ context, event }) => ({
+              fromView: context.view.id,
+              toView: event.viewId,
+              fromNode: event.fromNode ?? null,
             }),
-          ],
+          }),
+          target: '#navigating',
+        },
+        'navigate.back': {
+          guard: ({ context }: ActionArg) => context.navigationHistory.currentIndex > 0,
+          actions: assign(navigateBack),
+          target: '#navigating',
         },
-        'xyflow.paneDblClick': {
+        'navigate.forward': {
+          guard: ({ context }: ActionArg) =>
+            context.navigationHistory.currentIndex < context.navigationHistory.history.length - 1,
+          actions: assign(navigateForward),
+          target: '#navigating',
+        },
+        'layout.align': {
+          guard: 'not readonly',
           actions: [
-            { type: 'xyflow:fitDiagram' },
-            { type: 'trigger:OpenSource', params: ({ context }) => ({ view: context.view.id }) },
+            {
+              type: 'layout.align',
+              params: ({ event }) => ({ mode: event.mode }),
+            },
+            raise({ type: 'saveManualLayout.schedule' }),
           ],
         },
-        'saveManualLayout.*': {
+        'layout.resetEdgeControlPoints': {
           guard: 'not readonly',
-          actions: sendTo((c) => c.context.syncLayoutActorRef, ({ event }) => {
-            if (event.type === 'saveManualLayout.schedule') {
-              return { type: 'sync' }
+          actions: [
+            assign(resetEdgeControlPoints),
+            raise({ type: 'saveManualLayout.schedule' }),
+          ],
+        },
+        'xyflow.resized': {
+          guard: ({ context }: { context: Context }) =>
+            context.features.enableFitView && !context.viewportChangedManually,
+          actions: [
+            cancel('fitDiagram'),
+            raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 200 }),
+          ],
+        },
+        'open.elementDetails': {
+          actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => {
+            let initiatedFrom = null as null | {
+              node: NodeId
+              clientRect: Rect
             }
-            if (event.type === 'saveManualLayout.cancel') {
-              return { type: 'cancel' }
+            const fromNodeId = event.fromNode ?? context.view.nodes.find(n => DiagramNode.modelRef(n) === event.fqn)?.id
+            const internalNode = fromNodeId ? context.xystore.getState().nodeLookup.get(fromNodeId) : null
+            if (fromNodeId && internalNode) {
+              const nodeRect = nodeToRect(internalNode)
+              const zoom = context.xyflow!.getZoom()
+
+              const clientRect = {
+                ...context.xyflow!.flowToScreenPosition(nodeRect),
+                width: nodeRect.width * zoom,
+                height: nodeRect.height * zoom,
+              }
+              initiatedFrom = {
+                node: fromNodeId,
+                clientRect,
+              }
             }
-            nonexhaustive(event)
+            return ({
+              type: 'open.elementDetails' as const,
+              subject: event.fqn,
+              currentView: context.view,
+              ...(initiatedFrom && { initiatedFrom }),
+            })
           }),
         },
-        'focus.node': {
-          guard: 'enabled: FocusMode',
+        'open.relationshipsBrowser': {
+          actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => ({
+            type: 'open.relationshipsBrowser',
+            subject: event.fqn,
+            viewId: context.view.id,
+            scope: 'view' as const,
+            closeable: true,
+            enableChangeScope: true,
+            enableSelectSubject: true,
+          })),
+        },
+        'open.relationshipDetails': {
+          actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => ({
+            type: 'open.relationshipDetails',
+            view: context.view,
+            edgeId: event.edgeId,
+          })),
+        },
+        'open.source': {
+          actions: {
+            type: 'trigger:OpenSource',
+            params: prop('event'),
+          },
+        },
+        'walkthrough.start': {
+          guard: 'is dynamic view',
+          target: '.walkthrough',
+        },
+        'toggle.feature': {
           actions: assign({
-            focusedNode: ({ event }) => event.nodeId as NodeId,
+            toggledFeatures: ({ context, event }) => {
+              return DiagramToggledFeaturesPersistence.write({
+                ...context.toggledFeatures,
+                [`enable${event.feature}`]: event.forceValue ??
+                  !(context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`]),
+              })
+            },
           }),
-          target: 'focused',
         },
-      },
-    },
-    focused: {
-      entry: [
-        assign(s => ({
-          ...focusNodesEdges(s),
-          viewportBeforeFocus: { ...s.context.viewport },
-        })),
-        'open source of focused or last clicked node',
-        spawnChild('hotkeyActorLogic', { id: 'hotkey' }),
-        'xyflow:fitFocusedBounds',
-      ],
-      exit: enqueueActions(({ enqueue, context }) => {
-        enqueue.stopChild('hotkey')
-        if (context.viewportBeforeFocus) {
-          enqueue({ type: 'xyflow:setViewport', params: { viewport: context.viewportBeforeFocus } })
-        } else {
-          enqueue({ type: 'xyflow:fitDiagram' })
-        }
-        enqueue.assign((s) => ({
-          ...unfocusNodesEdges(s),
-          viewportBeforeFocus: null,
-          focusedNode: null,
-        }))
-      }),
-      on: {
-        'xyflow.nodeClick': [
-          {
-            guard: 'click: focused node',
-            target: '#idle',
+        'xyflow.nodeMouseEnter': {
+          actions: {
+            type: 'onNodeMouseEnter',
+            params: prop('event'),
           },
-          {
-            actions: [
-              assign({
-                lastClickedNode,
-              }),
-              raise(({ event }) => ({
-                type: 'focus.node',
-                nodeId: event.node.id as NodeId,
-              })),
-            ],
+        },
+        'xyflow.nodeMouseLeave': {
+          actions: {
+            type: 'onNodeMouseLeave',
+            params: prop('event'),
           },
-        ],
-        'focus.node': {
-          actions: [
-            assign({
-              focusedNode: ({ event }) => event.nodeId,
-            }),
-            assign(focusNodesEdges),
-            'open source of focused or last clicked node',
-            'xyflow:fitFocusedBounds',
-          ],
         },
-        'key.esc': {
-          target: 'idle',
+        'xyflow.edgeMouseEnter': {
+          actions: {
+            type: 'onEdgeMouseEnter',
+            params: prop('event'),
+          },
         },
-        'xyflow.paneClick': {
-          actions: assign({
-            lastClickedNode: null,
-          }),
-          target: 'idle',
+        'xyflow.edgeMouseLeave': {
+          actions: {
+            type: 'onEdgeMouseLeave',
+            params: prop('event'),
+          },
         },
         'saveManualLayout.*': {
           guard: 'not readonly',
-          actions: sendTo(c => c.context.syncLayoutActorRef, ({ event }) => {
+          actions: sendTo((c) => c.context.syncLayoutActorRef!, ({ event }) => {
             if (event.type === 'saveManualLayout.schedule') {
               return { type: 'sync' }
             }
@@ -570,9 +679,204 @@ export const diagramMachine = setup({
           }),
         },
       },
+      exit: [
+        cancel('fitDiagram'),
+      ],
+      states: {
+        idle: {
+          id: 'idle',
+          on: {
+            'xyflow.nodeClick': [
+              {
+                // TODO: xstate fails to infer the type of the guard
+                guard: and([
+                  'enabled: FocusMode',
+                  'click: node has connections',
+                  or([
+                    'click: same node',
+                    'click: selected node',
+                  ]),
+                ]) as any,
+                actions: [
+                  assign({
+                    lastClickedNode,
+                    focusedNode: ({ event }) => event.node.id as NodeId,
+                  }),
+                ],
+                target: 'focused',
+              },
+              {
+                actions: [
+                  'assign lastClickedNode',
+                  'open source of focused or last clicked node',
+                ],
+              },
+            ],
+            'xyflow.paneClick': {
+              actions: [
+                assign({
+                  lastClickedNode: null,
+                }),
+              ],
+            },
+            'xyflow.paneDblClick': {
+              actions: [
+                { type: 'xyflow:fitDiagram' },
+                { type: 'trigger:OpenSource', params: ({ context }) => ({ view: context.view.id }) },
+              ],
+            },
+            'focus.node': {
+              guard: 'enabled: FocusMode',
+              actions: assign({
+                focusedNode: ({ event }) => event.nodeId as NodeId,
+              }),
+              target: 'focused',
+            },
+          },
+        },
+        focused: {
+          entry: [
+            assign(s => ({
+              ...focusNodesEdges(s),
+              viewportBeforeFocus: { ...s.context.viewport },
+            })),
+            'open source of focused or last clicked node',
+            spawnChild('hotkeyActorLogic', { id: 'hotkey' }),
+            'xyflow:fitFocusedBounds',
+          ],
+          exit: enqueueActions(({ enqueue, context }) => {
+            enqueue.stopChild('hotkey')
+            if (context.viewportBeforeFocus) {
+              enqueue({ type: 'xyflow:setViewport', params: { viewport: context.viewportBeforeFocus } })
+            } else {
+              enqueue({ type: 'xyflow:fitDiagram' })
+            }
+            enqueue.assign((s) => ({
+              ...unfocusNodesEdges(s),
+              viewportBeforeFocus: null,
+              focusedNode: null,
+            }))
+          }),
+          on: {
+            'xyflow.nodeClick': [
+              {
+                guard: 'click: focused node',
+                target: '#idle',
+              },
+              {
+                actions: [
+                  assign({
+                    lastClickedNode,
+                  }),
+                  raise(({ event }) => ({
+                    type: 'focus.node',
+                    nodeId: event.node.id as NodeId,
+                  })),
+                ],
+              },
+            ],
+            'focus.node': {
+              actions: [
+                assign({
+                  focusedNode: ({ event }) => event.nodeId,
+                }),
+                assign(focusNodesEdges),
+                'open source of focused or last clicked node',
+                'xyflow:fitFocusedBounds',
+              ],
+            },
+            'key.esc': {
+              target: 'idle',
+            },
+            'xyflow.paneClick': {
+              actions: assign({
+                lastClickedNode: null,
+              }),
+              target: 'idle',
+            },
+          },
+        },
+        walkthrough: {
+          entry: [
+            spawnChild('hotkeyActorLogic', { id: 'hotkey' }),
+            assign({
+              viewportBeforeFocus: ({ context }) => context.viewport,
+              activeWalkthrough: ({ context, event }) => {
+                assertEvent(event, 'walkthrough.start')
+                const stepId = event.stepId ?? first(context.xyedges)!.id as StepEdgeId
+                return {
+                  stepId,
+                  parallelPrefix: getParallelStepsPrefix(stepId),
+                }
+              },
+            }),
+            assign(updateActiveWalkthrough),
+            'xyflow:fitFocusedBounds',
+          ],
+          on: {
+            'key.esc': {
+              target: 'idle',
+            },
+            'key.arrow.left': {
+              actions: raise({ type: 'walkthrough.step', direction: 'previous' }),
+            },
+            'key.arrow.right': {
+              actions: raise({ type: 'walkthrough.step', direction: 'next' }),
+            },
+            'walkthrough.step': {
+              actions: enqueueActions(({ enqueue, context, event }) => {
+                const { stepId } = context.activeWalkthrough!
+                const stepIndex = context.xyedges.findIndex(e => e.id === stepId)
+                const nextStepIndex = clamp(event.direction === 'next' ? stepIndex + 1 : stepIndex - 1, {
+                  min: 0,
+                  max: context.xyedges.length - 1,
+                })
+                if (nextStepIndex === stepIndex) {
+                  return
+                }
+                const nextStepId = context.xyedges[nextStepIndex]!.id as StepEdgeId
+                enqueue.assign({
+                  activeWalkthrough: {
+                    stepId: nextStepId,
+                    parallelPrefix: getParallelStepsPrefix(nextStepId),
+                  },
+                })
+                enqueue.assign(updateActiveWalkthrough)
+                enqueue('xyflow:fitFocusedBounds')
+              }),
+            },
+            'walkthrough.end': {
+              target: 'idle',
+            },
+            'xyflow.paneDblClick': {
+              target: 'idle',
+            },
+            // We received another view, close overlay and process event again
+            'update.view': {
+              guard: 'is another view',
+              actions: raise(({ event }) => event, { delay: 50 }),
+              target: 'idle',
+            },
+          },
+          exit: enqueueActions(({ enqueue, context, event }) => {
+            enqueue.stopChild('hotkey')
+            if (context.viewportBeforeFocus) {
+              enqueue({ type: 'xyflow:setViewport', params: { viewport: context.viewportBeforeFocus } })
+            } else {
+              enqueue({ type: 'xyflow:fitDiagram' })
+            }
+            enqueue.assign({
+              activeWalkthrough: null,
+              ...unfocusNodesEdges({ context, event }),
+              viewportBeforeFocus: null,
+            })
+          }),
+        },
+      },
     },
     // Navigating to another view (after `navigateTo` event)
     navigating: {
+      id: 'navigating',
       entry: [
         'closeAllOverlays',
         'stopSyncLayout',
@@ -583,15 +887,6 @@ export const diagramMachine = setup({
           }),
         },
       ],
-      exit: assign({
-        syncLayoutActorRef: ({ self, context, spawn }) =>
-          spawn('syncManualLayoutActorLogic', {
-            id: 'syncLayout',
-            systemId: 'syncLayout',
-            input: { parent: self, viewId: context.view.id },
-          }),
-        // lastOnNavigate: null,
-      }),
       on: {
         'update.view': {
           actions: enqueueActions(({ enqueue, context, event }) => {
@@ -616,91 +911,16 @@ export const diagramMachine = setup({
               enqueue.raise({ type: 'fitDiagram', duration: 200 }, { id: 'fitDiagram', delay: 25 })
             }
             enqueue.assign(updateNavigationHistory)
-            enqueue.assign(mergeXYNodesEdges)
             enqueue.assign({
+              ...mergeXYNodesEdges({ context, event }),
               lastOnNavigate: null,
             })
+            enqueue('startSyncLayout')
           }),
           target: '#idle',
         },
       },
     },
-    walkthrough: {
-      entry: [
-        spawnChild('hotkeyActorLogic', { id: 'hotkey' }),
-        assign({
-          viewportBeforeFocus: ({ context }) => context.viewport,
-          activeWalkthrough: ({ context, event }) => {
-            assertEvent(event, 'walkthrough.start')
-            const stepId = event.stepId ?? first(context.xyedges)!.id as StepEdgeId
-            return {
-              stepId,
-              parallelPrefix: getParallelStepsPrefix(stepId),
-            }
-          },
-        }),
-        assign(updateActiveWalkthrough),
-        'xyflow:fitFocusedBounds',
-      ],
-      on: {
-        'key.esc': {
-          target: 'idle',
-        },
-        'key.arrow.left': {
-          actions: raise({ type: 'walkthrough.step', direction: 'previous' }),
-        },
-        'key.arrow.right': {
-          actions: raise({ type: 'walkthrough.step', direction: 'next' }),
-        },
-        'walkthrough.step': {
-          actions: enqueueActions(({ enqueue, context, event }) => {
-            const { stepId } = context.activeWalkthrough!
-            const stepIndex = context.xyedges.findIndex(e => e.id === stepId)
-            const nextStepIndex = clamp(event.direction === 'next' ? stepIndex + 1 : stepIndex - 1, {
-              min: 0,
-              max: context.xyedges.length - 1,
-            })
-            if (nextStepIndex === stepIndex) {
-              return
-            }
-            const nextStepId = context.xyedges[nextStepIndex]!.id as StepEdgeId
-            enqueue.assign({
-              activeWalkthrough: {
-                stepId: nextStepId,
-                parallelPrefix: getParallelStepsPrefix(nextStepId),
-              },
-            })
-            enqueue.assign(updateActiveWalkthrough)
-            enqueue('xyflow:fitFocusedBounds')
-          }),
-        },
-        'walkthrough.end': {
-          target: 'idle',
-        },
-        'xyflow.paneDblClick': {
-          target: 'idle',
-        },
-        // We received another view, close overlay and process event again
-        'update.view': {
-          guard: 'is another view',
-          actions: raise(({ event }) => event, { delay: 50 }),
-          target: 'idle',
-        },
-      },
-      exit: enqueueActions(({ enqueue, context, event }) => {
-        enqueue.stopChild('hotkey')
-        if (context.viewportBeforeFocus) {
-          enqueue({ type: 'xyflow:setViewport', params: { viewport: context.viewportBeforeFocus } })
-        } else {
-          enqueue({ type: 'xyflow:fitDiagram' })
-        }
-        enqueue.assign({
-          activeWalkthrough: null,
-          ...unfocusNodesEdges({ context, event }),
-          viewportBeforeFocus: null,
-        })
-      }),
-    },
   },
   on: {
     'xyflow.applyNodeChanges': {
@@ -726,27 +946,11 @@ export const diagramMachine = setup({
         params: prop('event'),
       },
     },
-    'navigate.to': {
-      guard: 'is another view',
-      actions: assign({
-        lastOnNavigate: ({ context, event }) => ({
-          fromView: context.view.id,
-          toView: event.viewId,
-          fromNode: event.fromNode ?? null,
-        }),
-      }),
-      target: '.navigating',
-    },
-    'navigate.back': {
-      guard: ({ context }: ActionArg) => context.navigationHistory.currentIndex > 0,
-      actions: assign(navigateBack),
-      target: '.navigating',
+    'update.nodeData': {
+      actions: assign(updateNodeData),
     },
-    'navigate.forward': {
-      guard: ({ context }: ActionArg) =>
-        context.navigationHistory.currentIndex < context.navigationHistory.history.length - 1,
-      actions: assign(navigateForward),
-      target: '.navigating',
+    'update.edgeData': {
+      actions: assign(updateEdgeData),
     },
     'update.view': {
       actions: [
@@ -754,17 +958,10 @@ export const diagramMachine = setup({
         enqueueActions(({ enqueue, event, check, context }) => {
           const isAnotherView = check('is another view')
           if (isAnotherView) {
-            const viewId = event.view.id
-
             enqueue('closeAllOverlays')
             enqueue('stopSyncLayout')
             enqueue.assign({
               focusedNode: null,
-              syncLayoutActorRef: ({ self, spawn }) =>
-                spawn('syncManualLayoutActorLogic', {
-                  id: 'syncLayout',
-                  input: { parent: self, viewId },
-                }),
             })
             const { fromNode, toNode } = findCorrespondingNode(context, event)
             if (fromNode && toNode) {
@@ -786,16 +983,19 @@ export const diagramMachine = setup({
               })
               enqueue.raise({ type: 'fitDiagram', duration: 200 }, { id: 'fitDiagram', delay: 25 })
             }
+          }
+          enqueue.assign({
+            ...mergeXYNodesEdges({ context, event }),
+            lastOnNavigate: null,
+          })
+          if (isAnotherView) {
+            enqueue('startSyncLayout')
           } else {
-            enqueue.sendTo(c => c.context.syncLayoutActorRef, { type: 'synced' })
+            enqueue.sendTo(c => c.context.syncLayoutActorRef!, { type: 'synced' })
             if (!context.viewportChangedManually) {
               enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 50 })
             }
           }
-          enqueue.assign(mergeXYNodesEdges)
-          enqueue.assign({
-            lastOnNavigate: null,
-          })
         }),
       ],
     },
@@ -805,109 +1005,20 @@ export const diagramMachine = setup({
     'update.features': {
       actions: 'updateFeatures',
     },
-    'update.nodeData': {
-      actions: assign(updateNodeData),
-    },
-    'update.edgeData': {
-      actions: assign(updateEdgeData),
-    },
-    'layout.align': {
-      guard: 'not readonly',
-      actions: [
-        {
-          type: 'layout.align',
-          params: ({ event }) => ({ mode: event.mode }),
-        },
-        raise({ type: 'saveManualLayout.schedule' }),
-      ],
-    },
-    'layout.resetEdgeControlPoints': {
-      guard: 'not readonly',
-      actions: [
-        assign(resetEdgeControlPoints),
-        raise({ type: 'saveManualLayout.schedule' }),
-      ],
-    },
-    'xyflow.resized': {
-      guard: ({ context }: { context: Context }) => context.features.enableFitView && !context.viewportChangedManually,
-      actions: [
-        cancel('fitDiagram'),
-        raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 200 }),
-      ],
-    },
-    'open.elementDetails': {
-      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => {
-        let initiatedFrom = null as null | {
-          node: NodeId
-          clientRect: Rect
-        }
-        const fromNodeId = event.fromNode ?? context.view.nodes.find(n => DiagramNode.modelRef(n) === event.fqn)?.id
-        const internalNode = fromNodeId ? context.xystore.getState().nodeLookup.get(fromNodeId) : null
-        if (fromNodeId && internalNode) {
-          const nodeRect = nodeToRect(internalNode)
-          const zoom = context.xyflow!.getZoom()
-
-          const clientRect = {
-            ...context.xyflow!.flowToScreenPosition(nodeRect),
-            width: nodeRect.width * zoom,
-            height: nodeRect.height * zoom,
-          }
-          initiatedFrom = {
-            node: fromNodeId,
-            clientRect,
-          }
-        }
-        return ({
-          type: 'open.elementDetails' as const,
-          subject: event.fqn,
-          currentView: context.view,
-          ...(initiatedFrom && { initiatedFrom }),
-        })
-      }),
-    },
-    'open.relationshipsBrowser': {
-      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => ({
-        type: 'open.relationshipsBrowser',
-        subject: event.fqn,
-        scope: context.view,
-      })),
-    },
-    'open.relationshipDetails': {
-      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => ({
-        type: 'open.relationshipDetails',
-        view: context.view,
-        edgeId: event.edgeId,
-      })),
-    },
-    'open.source': {
-      actions: {
-        type: 'trigger:OpenSource',
-        params: prop('event'),
-      },
-    },
-    'walkthrough.start': {
-      guard: 'is dynamic view',
-      target: '.walkthrough',
-    },
-    'toggle.feature': {
-      actions: assign({
-        toggledFeatures: ({ context, event }) => {
-          return DiagramToggledFeaturesPersistence.write({
-            ...context.toggledFeatures,
-            [`enable${event.feature}`]: event.forceValue ??
-              !(context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`]),
-          })
-        },
-      }),
-    },
   },
   exit: [
     'stopSyncLayout',
+    cancel('fitDiagram'),
     stopChild('hotkey'),
     assign({
       xyflow: null,
       xystore: null as any,
-      initialized: false,
+      xyedges: [],
+      xynodes: [],
+      initialized: {
+        xydata: false,
+        xyflow: false,
+      },
       syncLayoutActorRef: null as any,
     }),
   ],