@likec4/diagram 1.6.1 → 1.7.0

package/src/state/diagramStore.ts

@@ -1,12 +1,18 @@
-import type { DiagramNode, DiagramView, Fqn, ViewID } from '@likec4/core'
-import { invariant, nonexhaustive, StepEdgeId } from '@likec4/core'
-import { getViewportForBounds, type XYPosition } from '@xyflow/react'
-import { getNodeDimensions } from '@xyflow/system'
+import type { DiagramNode, DiagramView, Fqn, NodeId, ViewID } from '@likec4/core'
+import { getBBoxCenter, invariant, nonexhaustive, nonNullable, StepEdgeId } from '@likec4/core'
+import {
+  applyEdgeChanges,
+  applyNodeChanges,
+  getViewportForBounds,
+  type OnEdgesChange,
+  type OnNodesChange
+} from '@xyflow/react'
+import { boxToRect, getBoundsOfRects, getNodeDimensions } from '@xyflow/system'
 import { DEV } from 'esm-env'
-import { deepEqual, shallowEqual } from 'fast-equals'
+import { deepEqual as eq, shallowEqual } from 'fast-equals'
 import type { MouseEvent as ReactMouseEvent } from 'react'
-import { entries, isEmpty, reduce } from 'remeda'
-import type { Exact, Except, RequiredKeysOf, Simplify } from 'type-fest'
+import { entries, hasAtLeast, isNullish, reduce } from 'remeda'
+import type { ConditionalKeys, Exact, Except, RequiredKeysOf, Simplify } from 'type-fest'
 import { devtools, subscribeWithSelector } from 'zustand/middleware'
 import { shallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
@@ -19,11 +25,14 @@ import type {
 import { MinZoom } from '../xyflow/const'
 import type { XYStoreApi } from '../xyflow/hooks'
 import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
-import { bezierControlPoints, isSamePoint } from '../xyflow/utils'
+import { bezierControlPoints, isSamePoint, toDomPrecision } from '../xyflow/utils'
+import { diagramViewToXYFlowData } from './diagram-to-xyflow'
 
-export type DiagramStore = {
-  readonly storeDevId: string
-  // Incoming props
+type RequiredOrNull<T> = {
+  [P in keyof T]-?: NonNullable<T[P]> | null
+}
+
+export type DiagramInitialState = {
   view: DiagramView
   readonly: boolean
   showElementLinks: boolean
@@ -34,104 +43,106 @@ export type DiagramStore = {
   nodesDraggable: boolean
   nodesSelectable: boolean
   experimentalEdgeEditing: boolean
+  enableFocusMode: boolean
   renderIcon: ElementIconRenderer | null
-  // Diagram Container, see DiagramContainer.tsx
-  getContainer: () => HTMLDivElement | null
-
-  // Internal state
-  viewSyncDebounceTimeout: number | null
+  // If Dynamic View
+  enableDynamicViewWalkthrough: boolean
 
   xyflow: XYFlowInstance
   xystore: XYStoreApi
-  initialized: boolean
-  xyflowSynced: boolean
-
-  // If Dynamic View
-  activeDynamicViewStep: number | null
-
-  // This is XYFlow id's
-  lastClickedNodeId: string | null
-  lastClickedEdgeId: string | null
-  focusedNodeId: string | null
-  hoveredNodeId: string | null
-  hoveredEdgeId: string | null
-
-  // id's of nodes / edges that
-  dimmed: ReadonlySet<string>
-
-  // Stack of previous distinct views (unique id's)
-  previousViews: DiagramView[]
-
-  lastOnNavigate: null | {
-    fromView: ViewID
-    toView: ViewID
-    element: DiagramNode
-    // Position of the element in the source view
-    elementScreenPosition: XYPosition
-    // If node from the target view is placed on the same position as the node from the source view
-    positionCorrected: boolean
-  }
 
-  // User changed the viewport by dragging or zooming
-  viewportChanged: boolean
-} & Required<LikeC4DiagramEventHandlers>
+  // Diagram Container, for Mantine Portal
+  getContainer: () => HTMLDivElement | null
+} & RequiredOrNull<LikeC4DiagramEventHandlers>
 
 const StringSet = Set<string>
 
-export type DiagramInitialState = // Required properties
-  & Pick<
-    DiagramStore,
-    | 'view'
-    | 'renderIcon'
-    | 'readonly'
-    | 'showElementLinks'
-    | 'fitViewEnabled'
-    | 'fitViewPadding'
-    | 'zoomable'
-    | 'pannable'
-    | 'nodesDraggable'
-    | 'nodesSelectable'
-    | 'experimentalEdgeEditing'
-  >
-  & LikeC4DiagramEventHandlers
+export type DiagramState = Simplify<
+  DiagramInitialState & {
+    readonly storeDevId: string
 
-interface DiagramStoreActions {
-  isDynamicView: () => boolean
+    // Internal state
+    xynodes: XYFlowNode[]
+    xyedges: XYFlowEdge[]
+    viewSyncDebounceTimeout: number | null
+    viewportChanged: boolean
 
-  updateView: (view: DiagramView) => void
+    initialized: boolean
 
-  focusOnNode: (nodeId: string) => void
+    // If Dynamic View
+    isDynamicView: boolean
+    activeDynamicViewStep: number | null
 
-  setHoveredNode: (nodeId: string | null) => void
-  setHoveredEdge: (edgeId: string | null) => void
+    // This is XYFlow id's
+    lastClickedNodeId: string | null
+    lastClickedEdgeId: string | null
+    focusedNodeId: string | null
+    hoveredNodeId: string | null
+    hoveredEdgeId: string | null
 
-  setLastClickedNode: (nodeId: string | null) => void
-  setLastClickedEdge: (edgeId: string | null) => void
+    // id's of nodes / edges that
+    dimmed: ReadonlySet<string>
 
-  resetLastClicked: () => void
+    lastOnNavigate: null | {
+      fromView: ViewID
+      toView: ViewID
+      fromNode: NodeId
+    }
+    navigationHistory: Array<{
+      viewId: ViewID
+      nodeId: NodeId | null
+    }>
+    navigationHistoryIndex: number
 
-  getElement(id: Fqn): DiagramNode | null
-  triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void
+    // Actions
+    updateView: (view: DiagramView) => void
 
-  cancelSaveManualLayout: () => void
-  triggerSaveManualLayout: () => void
-  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void
-  fitDiagram: (duration?: number) => void
+    focusOnNode: (nodeId: string) => void
 
-  nextDynamicStep: (increment?: number) => void
-  stopDynamicView: () => void
-}
+    setHoveredNode: (nodeId: string | null) => void
+    setHoveredEdge: (edgeId: string | null) => void
+
+    setLastClickedNode: (nodeId: string | null) => void
+    setLastClickedEdge: (edgeId: string | null) => void
+
+    resetLastClicked: () => void
+
+    getElement(id: Fqn): DiagramNode | null
+    triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void
+
+    /**
+     * @returns true if there was pending save layout
+     */
+    cancelSaveManualLayout: () => boolean
+    scheduleSaveManualLayout: () => void
+    triggerSaveManualLayout: () => void
+
+    triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void
+    fitDiagram: (duration?: number) => void
 
-export type DiagramState = Simplify<DiagramStore & DiagramStoreActions>
+    goBack: () => void
+    goForward: () => void
+
+    nextDynamicStep: (increment?: number) => void
+    activateDynamicStep: (step: number) => void
+    stopDynamicView: () => void
+
+    onInit: (xyflow: XYFlowInstance) => void
+    onNodesChange: OnNodesChange<XYFlowNode>
+    onEdgesChange: OnEdgesChange<XYFlowEdge>
+  }
+>
 
 const DEFAULT_PROPS: Except<
-  DiagramStore,
-  RequiredKeysOf<DiagramInitialState> | 'xystore' | 'xyflow' | 'getContainer' | 'storeDevId'
+  DiagramState,
+  'storeDevId' | 'navigationHistory' | RequiredKeysOf<DiagramInitialState> | ConditionalKeys<DiagramState, Function>
 > = {
+  xyedges: [],
+  xynodes: [],
+  isDynamicView: false,
   viewSyncDebounceTimeout: null,
   initialized: false,
-  xyflowSynced: false,
-  previousViews: [],
+  navigationHistoryIndex: 0,
   viewportChanged: false,
   activeDynamicViewStep: null,
   focusedNodeId: null,
@@ -140,28 +151,24 @@ const DEFAULT_PROPS: Except<
   lastClickedNodeId: null,
   lastClickedEdgeId: null,
   dimmed: new StringSet(),
-  lastOnNavigate: null,
-  onChange: null,
-  onNavigateTo: null,
-  onNodeClick: null,
-  onNodeContextMenu: null,
-  onCanvasContextMenu: null,
-  onEdgeClick: null,
-  onEdgeContextMenu: null,
-  onCanvasClick: null,
-  onCanvasDblClick: null
+  lastOnNavigate: null
 }
 
-export type CreateDiagramStore = DiagramInitialState & Pick<DiagramStore, 'xystore' | 'xyflow' | 'getContainer'>
-
 const noReplace = false
 
 let StoreDevId = 1
 
 const EmptyStringSet: ReadonlySet<string> = new StringSet()
 
-export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props: T) {
+export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(props: T) {
   const storeDevId = 'DiagramStore' + String(StoreDevId++).padStart(2, '0')
+  const {
+    xynodes,
+    xyedges
+  } = diagramViewToXYFlowData(props.view, {
+    draggable: props.nodesDraggable,
+    selectable: props.nodesSelectable
+  })
   return createWithEqualityFn<
     DiagramState,
     [
@@ -172,28 +179,49 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
     subscribeWithSelector(
       devtools(
         (set, get) => ({
-          storeDevId,
           ...DEFAULT_PROPS,
-          ...(props as CreateDiagramStore),
-          isDynamicView: () => {
-            return get().view?.__ === 'dynamic'
+          ...(props as DiagramInitialState),
+          storeDevId,
+          isDynamicView: props.view.__ === 'dynamic',
+          xynodes,
+          xyedges,
+          navigationHistory: [{
+            viewId: props.view.id,
+            nodeId: null as Fqn | null
+          }],
+          navigationHistoryIndex: 0,
+
+          onNodesChange: (changes) => {
+            set({
+              xynodes: applyNodeChanges(changes, get().xynodes)
+            })
+          },
+          onEdgesChange: (changes) => {
+            set({
+              xyedges: applyEdgeChanges(changes, get().xyedges)
+            })
           },
 
           updateView: (nextView) => {
             let {
               viewSyncDebounceTimeout,
               xyflow,
+              xystore,
               dimmed,
-              xyflowSynced,
               view: current,
               lastOnNavigate,
-              previousViews,
+              navigationHistory,
+              navigationHistoryIndex,
               focusedNodeId,
               lastClickedNodeId,
               lastClickedEdgeId,
               activeDynamicViewStep,
+              nodesDraggable,
+              nodesSelectable,
               hoveredEdgeId,
-              hoveredNodeId
+              hoveredNodeId,
+              xyedges,
+              xynodes
             } = get()
 
             if (shallowEqual(current, nextView)) {
@@ -230,7 +258,6 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               if (activeDynamicViewStep && !edgeIds.has(StepEdgeId(activeDynamicViewStep))) {
                 activeDynamicViewStep = null
               }
-              xyflowSynced = deepEqual([current.nodes, current.edges], [nextView.nodes, nextView.edges])
               if (dimmed.size > 0) {
                 let nextDimmed = new StringSet([...dimmed].filter(id => nodeIds.has(id) || edgeIds.has(id)))
                 if (nextDimmed.size !== dimmed.size) {
@@ -239,15 +266,56 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               }
             } else {
               // Reset lastOnNavigate if the view is not the source or target view
-              if (lastOnNavigate) {
-                if (lastOnNavigate.toView !== nextView.id && lastOnNavigate.fromView !== nextView.id) {
-                  lastOnNavigate = null
+              const stepCurrent = nonNullable(navigationHistory[navigationHistoryIndex])
+              if (stepCurrent.viewId !== nextView.id) {
+                navigationHistory = [
+                  ...navigationHistory.slice(0, navigationHistoryIndex + 1),
+                  {
+                    viewId: nextView.id,
+                    nodeId: lastOnNavigate?.fromNode || null
+                  }
+                ]
+                navigationHistoryIndex = navigationHistory.length - 1
+              } else {
+                // We are navigating to the same view as in the history
+                if (stepCurrent.nodeId) {
+                  lastOnNavigate ??= {
+                    fromView: current.id,
+                    toView: nextView.id,
+                    fromNode: stepCurrent.nodeId
+                  }
                 }
               }
 
-              if (!lastOnNavigate) {
+              if (lastOnNavigate && lastOnNavigate.toView !== nextView.id) {
+                lastOnNavigate = null
+              }
+
+              const elTo = lastOnNavigate && nextView.nodes.find(n => n.id === lastOnNavigate?.fromNode)
+              const xynodeFrom = elTo && xyflow.getInternalNode(elTo.id)
+
+              if (!lastOnNavigate || isNullish(elTo) || isNullish(xynodeFrom)) {
                 const zoom = xyflow.getZoom()
-                xyflow.setCenter(nextView.width / 2, nextView.height / 2, { zoom })
+                const { x, y } = getBBoxCenter(nextView.bounds)
+                xyflow.setCenter(x, y, { zoom })
+                lastOnNavigate = null
+              }
+
+              if (lastOnNavigate && !!elTo && !!xynodeFrom) {
+                const fromPos = xyflow.flowToScreenPosition({
+                    x: xynodeFrom.internals.positionAbsolute.x, // + dimensions.width / 2,
+                    y: xynodeFrom.internals.positionAbsolute.y // + dimensions.height / 2
+                  }),
+                  toPos = xyflow.flowToScreenPosition({
+                    x: elTo.position[0], // + elFrom.width / 2,
+                    y: elTo.position[1] // + elFrom.height / 2
+                  }),
+                  diff = {
+                    x: toDomPrecision(fromPos.x - toPos.x),
+                    y: toDomPrecision(fromPos.y - toPos.y)
+                  }
+                xystore.getState().panBy(diff)
+                lastOnNavigate = null
               }
 
               // Reset hovered / clicked node/edge if the view is different
@@ -258,29 +326,64 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               focusedNodeId = null
               activeDynamicViewStep = null
               dimmed = EmptyStringSet
+            }
+
+            const update = diagramViewToXYFlowData(nextView, {
+              draggable: nodesDraggable,
+              selectable: nodesSelectable
+            })
 
-              // Update history stack (back button not implemented yet)
-              previousViews = [
-                current,
-                ...previousViews.filter((v) => v.id !== nextView.id && v.id !== current.id)
-              ]
-              xyflowSynced = false
+            update.xynodes = update.xynodes.map(update => {
+              const existing = xynodes.find(n => n.id === update.id)
+              if (existing && existing.type === update.type && eq(existing.parentId ?? null, update.parentId ?? null)) {
+                if (eq(existing.data.element, update.data.element)) {
+                  return existing
+                }
+                return {
+                  ...existing,
+                  ...update
+                }
+              }
+              return update
+            })
+            // Merge with existing edges, but only if the view is the same
+            // and the edges have no layout drift
+            if (isSameView && !nextView.hasLayoutDrift) {
+              update.xyedges = update.xyedges.map((update): XYFlowEdge => {
+                const existing = xyedges.find(n => n.id === update.id)
+                if (existing) {
+                  if (eq(existing.data, update.data)) {
+                    return existing
+                  }
+                  return {
+                    ...existing,
+                    ...update
+                  }
+                }
+                return update
+              })
             }
 
+            const hasChanges = !isSameView || !shallowEqual(update.xynodes, xynodes)
+              || !shallowEqual(update.xyedges, xyedges)
+
             set(
               {
+                isDynamicView: nextView.__ === 'dynamic',
                 viewSyncDebounceTimeout,
                 view: nextView,
                 activeDynamicViewStep,
-                xyflowSynced,
                 lastOnNavigate,
-                previousViews,
                 lastClickedNodeId,
                 lastClickedEdgeId,
                 focusedNodeId,
                 hoveredEdgeId,
                 hoveredNodeId,
-                dimmed
+                navigationHistory,
+                navigationHistoryIndex,
+                dimmed,
+                xynodes: hasChanges ? update.xynodes : xynodes,
+                xyedges: hasChanges ? update.xyedges : xyedges
               },
               noReplace,
               isSameView ? 'update-view [same]' : 'update-view [another]'
@@ -288,7 +391,8 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
           },
 
           focusOnNode: (nodeId) => {
-            const { focusedNodeId, view } = get()
+            const { focusedNodeId, view, enableFocusMode } = get()
+            invariant(enableFocusMode, 'focus mode is not enabled')
             if (nodeId !== focusedNodeId) {
               const notDimmed = new StringSet([nodeId])
               const dimmed = new StringSet()
@@ -448,70 +552,113 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
             if (viewSyncDebounceTimeout !== null) {
               clearTimeout(viewSyncDebounceTimeout)
               set({ viewSyncDebounceTimeout: null })
+              return true
             }
+            return false
           },
 
           triggerSaveManualLayout: () => {
-            let { viewSyncDebounceTimeout: debounced, onChange } = get()
+            const { xyflow, view, onChange, xystore, viewSyncDebounceTimeout } = get()
+            if (viewSyncDebounceTimeout !== null) {
+              clearTimeout(viewSyncDebounceTimeout)
+              set({ viewSyncDebounceTimeout: null })
+            }
             if (!onChange) {
               DEV && console.debug('ignore triggerSaveManualLayout, as no onChange handler is set')
               return
             }
-            if (debounced) {
-              clearTimeout(debounced)
+            const { nodeLookup } = xystore.getState()
+            const movedNodes = new StringSet()
+            let bounds = {
+              x: 0,
+              y: 0,
+              width: 1,
+              height: 1
             }
-            debounced = setTimeout(() => {
-              const { xyflow, onChange, xystore } = get()
-              const { nodeLookup } = xystore.getState()
-              set({ viewSyncDebounceTimeout: null })
-
-              const movedNodes = new StringSet()
-              const nodes = reduce([...nodeLookup.values()], (acc, node) => {
-                const dimensions = getNodeDimensions(node)
-                if (!isSamePoint(node.internals.positionAbsolute, node.data.element.position)) {
-                  movedNodes.add(node.id)
-                }
-                acc[node.data.fqn] = {
-                  x: node.internals.positionAbsolute.x,
-                  y: node.internals.positionAbsolute.y,
-                  width: dimensions.width,
-                  height: dimensions.height
-                }
-                return acc
-              }, {} as Changes.SaveManualLayout['nodes'])
-              const edges = reduce(xyflow.getEdges(), (acc, { source, target, data }) => {
-                let controlPoints = data.controlPoints
-                // If edge control points are not set, but the source or target node was moved
-                if (!controlPoints && (movedNodes.has(source) || movedNodes.has(target))) {
-                  controlPoints = bezierControlPoints(data.edge)
-                }
-                if (controlPoints) {
-                  acc[data.edge.id] = {
-                    controlPoints
-                  }
-                }
+            const nodes = reduce([...nodeLookup.values()], (acc, node) => {
+              const dimensions = getNodeDimensions(node)
+              if (!isSamePoint(node.internals.positionAbsolute, node.data.element.position)) {
+                movedNodes.add(node.id)
+              }
+              const rect = acc[node.data.fqn] = {
+                isCompound: node.data.element.children.length > 0,
+                x: Math.floor(node.internals.positionAbsolute.x),
+                y: Math.floor(node.internals.positionAbsolute.y),
+                width: Math.ceil(dimensions.width),
+                height: Math.ceil(dimensions.height)
+              }
+              bounds = getBoundsOfRects(bounds, rect)
+              return acc
+            }, {} as Changes.SaveManualLayout['layout']['nodes'])
+            const edges = reduce(xyflow.getEdges(), (acc, { source, target, data }) => {
+              let controlPoints = data.controlPoints
+              const sourceOrTargetMoved = movedNodes.has(source) || movedNodes.has(target)
+              // If edge control points are not set, but the source or target node was moved
+              if ((!controlPoints || controlPoints.length === 0) && sourceOrTargetMoved) {
+                controlPoints = bezierControlPoints(data.edge)
+              }
+              if (data.edge.points.length === 0 && (!controlPoints || controlPoints.length === 0)) {
                 return acc
-              }, {} as Changes.SaveManualLayout['edges'])
-              if (movedNodes.size === 0 && isEmpty(edges)) {
-                DEV && console.debug('ignore triggerSaveManualLayout, as no changes detected')
-                return
               }
+              const _updated: Changes.SaveManualLayout['layout']['edges'][string] = acc[data.edge.id] = {
+                points: data.edge.points
+              }
+              if (data.label?.bbox) {
+                _updated.labelBBox = data.label?.bbox
+              }
+              if (data.edge.labelBBox) {
+                _updated.labelBBox ??= data.edge.labelBBox
+              }
+              if (controlPoints && hasAtLeast(controlPoints, 1)) {
+                _updated.controlPoints = controlPoints
+              }
+              if (!sourceOrTargetMoved && data.edge.dotpos) {
+                _updated.dotpos = data.edge.dotpos
+              }
+              const allX = [...data.edge.points.map(p => p[0]), ...(controlPoints ?? []).map(p => p.x)]
+              const allY = [...data.edge.points.map(p => p[1]), ...(controlPoints ?? []).map(p => p.y)]
+              const rect = boxToRect({
+                x: Math.floor(Math.min(...allX)),
+                y: Math.floor(Math.min(...allY)),
+                x2: Math.ceil(Math.max(...allX)),
+                y2: Math.ceil(Math.max(...allY))
+              })
+              bounds = getBoundsOfRects(bounds, rect)
+              return acc
+            }, {} as Changes.SaveManualLayout['layout']['edges'])
+
+            const change: Changes.SaveManualLayout = {
+              op: 'save-manual-layout',
+              layout: {
+                hash: view.hash,
+                autoLayout: view.autoLayout,
 
-              const change: Changes.SaveManualLayout = {
-                op: 'save-manual-layout',
                 nodes,
-                edges
+                edges,
+                ...bounds
               }
+            }
 
-              if (DEV) {
-                console.debug('triggerSaveManualLayout', change)
-              }
+            if (DEV) {
+              console.debug('triggerSaveManualLayout', change)
+            }
 
-              onChange?.({ change })
-            }, 2000) as any as number // explicit typecast to number to suppress TS error in astro build
+            onChange({ change })
+          },
+          scheduleSaveManualLayout: () => {
+            let { viewSyncDebounceTimeout, onChange } = get()
+            if (!onChange) {
+              DEV && console.debug('ignore triggerSaveManualLayout, as no onChange handler is set')
+              return
+            }
+            if (viewSyncDebounceTimeout) {
+              clearTimeout(viewSyncDebounceTimeout)
+            }
             set(
               {
-                viewSyncDebounceTimeout: debounced
+                viewSyncDebounceTimeout: setTimeout(() => {
+                  get().triggerSaveManualLayout()
+                }, 1000) as any as number // explicit typecast to number to suppress TS error in astro build
               },
               noReplace,
               'debounce sync state'
@@ -519,46 +666,90 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
           },
 
           triggerOnNavigateTo: (xynodeId, event) => {
-            const { xyflow, view } = get()
-            const xynode = xyflow.getInternalNode(xynodeId)
-            invariant(!!xynode, `node not found: ${xynodeId}`)
-            const element = xynode.data.element as DiagramNodeWithNavigate
-            invariant(element.navigateTo, `node is not navigable: ${xynodeId}`)
+            const { view, xynodes, onNavigateTo } = get()
+            if (!onNavigateTo) {
+              return
+            }
+            const xynode = xynodes.find(({ id }) => id === xynodeId)
+            invariant(xynode, `xynode not found: ${xynodeId}`)
+            const element = view.nodes.find(({ id }) => id === xynodeId)
+            invariant(element?.navigateTo, `node is not navigable: ${xynodeId}`)
             set(
               {
                 lastClickedNodeId: xynodeId,
                 lastOnNavigate: {
                   fromView: view.id,
                   toView: element.navigateTo,
-                  element: element,
-                  elementScreenPosition: xyflow.flowToScreenPosition({
-                    x: xynode.internals.positionAbsolute.x, // + dimensions.width / 2,
-                    y: xynode.internals.positionAbsolute.y // + dimensions.height / 2
-                  }),
-                  positionCorrected: false
+                  fromNode: element.id
                 }
               },
               noReplace,
               'triggerOnNavigateTo'
             )
-            get().onNavigateTo?.(
+            onNavigateTo(
               element.navigateTo,
               event,
-              element,
-              xynode.internals.userNode
+              element as DiagramNodeWithNavigate,
+              xynode
             )
           },
 
+          goBack: () => {
+            const { navigationHistory, navigationHistoryIndex, onNavigateTo } = get()
+            const { viewId, nodeId } = nonNullable(navigationHistory[navigationHistoryIndex])
+            const stepBack = (navigationHistoryIndex > 0 && navigationHistory[navigationHistoryIndex - 1]) || null
+            if (stepBack && onNavigateTo) {
+              set(
+                {
+                  lastClickedEdgeId: null,
+                  lastClickedNodeId: null,
+                  navigationHistoryIndex: navigationHistoryIndex - 1,
+                  lastOnNavigate: nodeId
+                    ? {
+                      fromView: viewId,
+                      toView: stepBack.viewId,
+                      fromNode: nodeId as Fqn
+                    }
+                    : null
+                },
+                noReplace,
+                'goBack'
+              )
+              onNavigateTo(stepBack.viewId)
+            }
+          },
+          goForward: () => {
+            const { navigationHistory, navigationHistoryIndex, onNavigateTo } = get()
+            const { viewId } = nonNullable(navigationHistory[navigationHistoryIndex])
+            const stepForward = navigationHistoryIndex < navigationHistory.length - 1
+              ? navigationHistory[navigationHistoryIndex + 1]
+              : null
+            if (stepForward && onNavigateTo) {
+              set(
+                {
+                  lastClickedEdgeId: null,
+                  lastClickedNodeId: null,
+                  navigationHistoryIndex: navigationHistoryIndex + 1,
+                  lastOnNavigate: stepForward.nodeId
+                    ? {
+                      fromView: viewId,
+                      toView: stepForward.viewId,
+                      fromNode: stepForward.nodeId as Fqn
+                    }
+                    : null
+                },
+                noReplace,
+                'goForward'
+              )
+              onNavigateTo(stepForward.viewId)
+            }
+          },
+
           fitDiagram: (duration = 500) => {
             const { fitViewPadding, view, focusedNodeId, activeDynamicViewStep, xystore } = get()
             const { width, height, panZoom, transform } = xystore.getState()
 
-            const bounds = {
-              x: 0,
-              y: 0,
-              width: view.width,
-              height: view.height
-            }
+            const bounds = view.bounds
             const maxZoom = Math.max(1, transform[2])
             const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, fitViewPadding)
             panZoom?.setViewport(viewport, { duration })
@@ -576,12 +767,19 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
           },
 
           nextDynamicStep: (increment = 1) => {
-            const { view, activeDynamicViewStep, xyflow, xystore, fitViewPadding } = get()
-            invariant(view.__ === 'dynamic', 'view is not dynamic')
+            const { activeDynamicViewStep, activateDynamicStep } = get()
             const nextStep = (activeDynamicViewStep ?? 0) + increment
-            if (nextStep <= 0 || nextStep > view.edges.length) {
+            if (nextStep <= 0) {
               return
             }
+            if (nextStep !== activeDynamicViewStep) {
+              activateDynamicStep(nextStep)
+            }
+          },
+
+          activateDynamicStep: (nextStep: number) => {
+            const { isDynamicView, xyflow, xystore, fitViewPadding } = get()
+            invariant(isDynamicView, 'view is not dynamic')
             const edgeId = StepEdgeId(nextStep)
             const dimmed = new StringSet()
             let edge: XYFlowEdge | null = null
@@ -617,7 +815,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
                 dimmed
               },
               noReplace,
-              'nextDynamicStep'
+              'activateDynamicStep'
             )
           },
 
@@ -634,6 +832,20 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               )
               get().fitDiagram()
             }
+          },
+
+          onInit: (instance) => {
+            const { xyflow, initialized } = get()
+            if (!initialized || xyflow !== instance) {
+              set(
+                {
+                  xyflow: instance,
+                  initialized: true
+                },
+                noReplace,
+                'onInit'
+              )
+            }
           }
         }),
         {