@likec4/diagram 1.19.1 → 1.20.0

package/src/{ui → likec4diagram/ui}/notation/NotationPanel.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore
 import { type ComputedNode, type ElementNotation as ElementNotationData } from '@likec4/core'
 import {
   ActionIcon,
@@ -14,19 +15,21 @@ import {
   TabsTab,
   Text,
   ThemeIcon,
-  Tooltip
+  Tooltip,
 } from '@mantine/core'
 import { useLocalStorage } from '@mantine/hooks'
 import { IconAlertTriangle, IconArrowDownRight, IconHelpCircle } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
-import { useState } from 'react'
-import { ceil, isNonNullish, isNullish } from 'remeda'
-import { useXYStore } from '../../hooks'
-import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
-import { useMantinePortalProps } from '../../hooks/useMantinePortalProps'
-import { vars } from '../../theme-vars'
-import { ElementShapeSvg } from '../../xyflow/nodes/element/ElementShapeSvg'
+import { memo, useState } from 'react'
+import { ceil, isNonNullish } from 'remeda'
+// import { ElementShapeSvg } from '../../xyflow/nodes/element/ElementShapeSvg'
+import { ElementShape } from '../../../base/primitives'
+import { type DiagramContext, useMantinePortalProps } from '../../../hooks'
+import { useDiagram } from '../../../hooks/useDiagram'
+import { useDiagramContext } from '../../../hooks/useDiagramContext'
+import { useXYStore } from '../../../hooks/useXYFlow'
+import { vars } from '../../../theme-vars'
 import * as css from './NotationPanel.css'
 
 type NodeKind = ComputedNode['kind']
@@ -35,10 +38,10 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
   const {
     title,
     color = 'primary',
-    shape = 'rectangle'
+    shape = 'rectangle',
   } = value
   const [onlyKind, setOnlyKind] = useState<NodeKind | null>(null)
-  const diagramStore = useDiagramStoreApi()
+  const diagram = useDiagram()
   const w = 300
   const h = 200
   return (
@@ -48,15 +51,15 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
       py={'sm'}
       className={css.elementNotation}
       mod={{
-        'data-likec4-color': color
+        'likec4-color': color,
       }}
       onMouseEnter={() => {
         setOnlyKind(null)
-        diagramStore.getState().highlightByElementNotation(value)
+        // diagramStore.getState().highlightByElementNotation(value)
       }}
       onMouseLeave={() => {
         setOnlyKind(null)
-        diagramStore.setState({ dimmed: new Set() })
+        // diagramStore.setState({ dimmed: new Set() })
       }}
     >
       <Group
@@ -67,21 +70,17 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
         <Box
           flex={'0 0 70px'}
           style={{
+            position: 'relative',
             width: 70,
-            height: ceil(70 * (h / w), 0)
+            height: ceil(70 * (h / w), 0),
           }}>
-          <svg
-            className={clsx(
-              css.shapeSvg
-            )}
-            viewBox={`0 0 ${w} ${h}`}
-          >
-            <ElementShapeSvg
-              shape={shape}
-              w={w}
-              h={h}
-            />
-          </svg>
+          <ElementShape
+            data={{
+              shape,
+              width: w,
+              height: h,
+            }}
+          />
         </Box>
         <Stack gap={4} flex={1}>
           <Group gap={4} flex={'0 0 auto'}>
@@ -91,11 +90,11 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
                 className={css.shapeBadge}
                 onMouseEnter={() => {
                   setOnlyKind(kind)
-                  diagramStore.getState().highlightByElementNotation(value, kind)
+                  // diagramStore.getState().highlightByElementNotation(value, kind)
                 }}
                 onMouseLeave={() => {
                   setOnlyKind(null)
-                  diagramStore.getState().highlightByElementNotation(value)
+                  // diagramStore.getState().highlightByElementNotation(value)
                 }}
                 opacity={isNonNullish(onlyKind) && onlyKind !== kind ? 0.25 : 1}
                 color={isNonNullish(onlyKind) && onlyKind !== kind ? 'gray' : vars.element.fill}
@@ -110,7 +109,7 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
             fw={500}
             lh="1.25"
             style={{
-              textWrap: 'pretty'
+              textWrap: 'pretty',
             }}>
             {title}
           </Text>
@@ -120,22 +119,23 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
   )
 }
 
-const selector = (s: DiagramState) => ({
+const selector = (s: DiagramContext) => ({
   id: s.view.id,
   notations: s.view.notation?.elements ?? [],
-  isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough)
+  isVisible: true,
+  // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
 })
 
-export function NotationPanel() {
+export const NotationPanel = memo(() => {
   const height = useXYStore(s => s.height)
   const {
     id,
     notations,
-    isVisible
-  } = useDiagramState(selector)
+    isVisible,
+  } = useDiagramContext(selector)
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: 'notation-webview-collapsed',
-    defaultValue: true
+    defaultValue: true,
   })
   const hasNotations = notations.length > 0
   const portalProps = useMantinePortalProps()
@@ -149,7 +149,7 @@ export function NotationPanel() {
           animate={{ opacity: 1, translateX: 0 }}
           exit={{
             translateX: '100%',
-            opacity: 0.6
+            opacity: 0.6,
           }}
           className={clsx('react-flow__panel', css.container)}>
           <Tooltip label="View has no notations" color="orange" {...portalProps}>
@@ -171,7 +171,7 @@ export function NotationPanel() {
           animate={{ opacity: 1, translateX: 0 }}
           exit={{
             translateX: '100%',
-            opacity: 0.6
+            opacity: 0.6,
           }}
           className={clsx('react-flow__panel', css.container)}
         >
@@ -195,16 +195,16 @@ export function NotationPanel() {
           initial={{
             opacity: 0.75,
             // translateX: '50%',
-            scale: 0.2
+            scale: 0.2,
           }}
           animate={{ opacity: 1, scale: 1 }}
           exit={{
             opacity: 0,
-            scale: 0.25
+            scale: 0.25,
           }}
           className={clsx('react-flow__panel', css.container)}
           style={{
-            transformOrigin: 'bottom right'
+            transformOrigin: 'bottom right',
           }}
         >
           <Paper
@@ -221,7 +221,7 @@ export function NotationPanel() {
                   color="gray"
                   ml={2}
                   style={{
-                    alignSelf: 'center'
+                    alignSelf: 'center',
                   }}
                   onClick={() => setCollapsed(true)}
                 >
@@ -237,8 +237,8 @@ export function NotationPanel() {
                 <ScrollAreaAutosize
                   viewportProps={{
                     style: {
-                      maxHeight: `min(40vh, ${Math.max(height - 60, 50)}px)`
-                    }
+                      maxHeight: `min(40vh, ${Math.max(height - 60, 50)}px)`,
+                    },
                   }}>
                   <Stack gap={0}>
                     {notations.map((n, i) => <ElementNotation key={i} value={n} />)}
@@ -251,4 +251,4 @@ export function NotationPanel() {
       )}
     </AnimatePresence>
   )
-}
+})

package/src/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.css.ts

@@ -1,5 +1,5 @@
 import { createVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../theme-vars'
+import { mantine } from '../../../theme-vars'
 
 export const container = style({
   position: 'absolute',
@@ -14,9 +14,9 @@ export const container = style({
   alignItems: 'center',
   '@media': {
     [mantine.largerThan('md')]: {
-      gap: '0.6rem'
-    }
-  }
+      gap: '0.6rem',
+    },
+  },
 })
 
 export const buttons = style({
@@ -24,12 +24,12 @@ export const buttons = style({
   transition: 'all 175ms ease-in',
   ':hover': {
     transitionTimingFunction: 'ease-out',
-    transform: 'scale(1.1)'
+    transform: 'scale(1.1)',
   },
   ':active': {
     transitionDuration: '100ms',
-    transform: 'scale(0.98) translateY(3px)'
-  }
+    transform: 'scale(0.98) translateY(3px)',
+  },
 })
 
 var transparency = createVar()
@@ -39,20 +39,20 @@ export const btn = style({
   vars: {
     [transparency]: '35%',
     ['--button-bg']: `color-mix(in srgb, ${mantine.colors.primaryColors.filled}, transparent ${transparency})`,
-    ['--button-hover']: `color-mix(in srgb, ${mantine.colors.primaryColors.filledHover}, transparent ${transparency})`
+    ['--button-hover']: `color-mix(in srgb, ${mantine.colors.primaryColors.filledHover}, transparent ${transparency})`,
   },
   selectors: {
     [mantine.lightSelector]: {
       vars: {
-        [transparency]: '15%'
-      }
-    }
-  }
+        [transparency]: '15%',
+      },
+    },
+  },
 })
 
 globalStyle(`:where(${buttons}, ${btn}) .tabler-icon`, {
   width: '0.85em',
-  height: '0.85em'
+  height: '0.85em',
 })
 
 export const parallelStateFrame = style({
@@ -67,7 +67,7 @@ export const parallelStateFrame = style({
   pointerEvents: 'none',
   '@media': {
     [mantine.largerThan('md')]: {
-      borderWidth: 4
-    }
-  }
+      borderWidth: 4,
+    },
+  },
 })

package/src/{ui → likec4diagram/ui/walkthrough}/DynamicViewWalkthrough.tsx

@@ -1,73 +1,53 @@
-import { nonNullable } from '@likec4/core'
 import { Badge, Box, Button, ButtonGroup } from '@mantine/core'
-import { useHotkeys } from '@mantine/hooks'
 import {
   IconPlayerPlayFilled,
   IconPlayerSkipBackFilled,
   IconPlayerSkipForwardFilled,
-  IconPlayerStopFilled
+  IconPlayerStopFilled,
 } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
-import { first, isNonNull, isTruthy } from 'remeda'
-import { useDiagramState, useDiagramStoreApi, useXYStore } from '../hooks'
+import { isNonNull, isTruthy } from 'remeda'
+import { useXYStore } from '../../../hooks'
+import { useDiagram } from '../../../hooks/useDiagram'
+import { useDiagramContext } from '../../../hooks/useDiagramContext'
 import * as css from './DynamicViewWalkthrough.css'
 
 export function DynamicViewWalkthrough() {
   const isMobile = useXYStore(s => s.width <= 750)
   const {
-    nextDynamicStep,
-    stopDynamicView,
     isActive,
     isParallel,
     hasNext,
-    hasPrevious
-  } = useDiagramState(s => ({
-    nextDynamicStep: s.nextDynamicStep,
-    stopDynamicView: s.stopWalkthrough,
+    hasPrevious,
+  } = useDiagramContext(s => ({
     isActive: isNonNull(s.activeWalkthrough),
     isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
-    hasNext: s.activeWalkthrough?.hasNext ?? false,
-    hasPrevious: s.activeWalkthrough?.hasPrevious ?? false
+    hasNext: s.xyedges.findIndex(e => e.id === s.activeWalkthrough?.stepId) < s.xyedges.length - 1,
+    hasPrevious: s.xyedges.findIndex(e => e.id === s.activeWalkthrough?.stepId) > 0,
   }))
-  const diagramApi = useDiagramStoreApi()
-
-  useHotkeys(
-    isActive
-      ? [
-        ['ArrowLeft', () => nextDynamicStep(-1)],
-        ['ArrowRight', () => nextDynamicStep()],
-        ['Escape', (e) => {
-          e.stopImmediatePropagation()
-          stopDynamicView()
-        }, { preventDefault: true }]
-      ]
-      : [
-        ['ArrowLeft', () => nextDynamicStep()],
-        ['ArrowRight', () => nextDynamicStep()]
-      ]
-  )
+  const diagram = useDiagram()
 
   const buttonProps = {
     className: css.btn,
     size: isMobile ? 'compact-md' : 'lg',
-    radius: isMobile ? 'lg' : 'xl'
+    radius: isMobile ? 'lg' : 'xl',
   }
 
-  const startWalkthrough = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    const {
-      xyedges,
-      activateWalkthrough
-    } = diagramApi.getState()
-    const firstEdge = nonNullable(first(xyedges), 'expected at least one edge')
-    activateWalkthrough(firstEdge.data.edge.id)
-  }
+  // const startWalkthrough = (e: React.MouseEvent) => {
+  //   e.stopPropagation()
+  //   const {
+  //     xyedges,
+  //     activateWalkthrough
+  //   } = diagramApi.getState()
+  //   const firstEdge = nonNullable(first(xyedges), 'expected at least one edge')
+  //   activateWalkthrough(firstEdge.data.edge.id)
+  // }
 
-  const nextStep = (increment = 1) => (e: React.MouseEvent) => {
-    e.stopPropagation()
-    nextDynamicStep(increment)
-  }
+  // const nextStep = (increment = 1) => (e: React.MouseEvent) => {
+  //   e.stopPropagation()
+  //   nextDynamicStep(increment)
+  // }
 
   return (
     <AnimatePresence>
@@ -93,7 +73,7 @@ export function DynamicViewWalkthrough() {
               {...buttonProps}
               className={clsx(css.buttons, css.btn)}
               rightSection={<IconPlayerPlayFilled />}
-              onClick={startWalkthrough}
+              onClick={() => diagram.startWalkthrough()}
               px={'xl'}>
               Start
             </Button>
@@ -106,7 +86,7 @@ export function DynamicViewWalkthrough() {
             animate={{ opacity: 1, transform: 'translateY(0)' }}
             exit={{
               opacity: 0,
-              transform: 'translateY(20px)'
+              transform: 'translateY(20px)',
             }}
             variant="gradient"
             size={isMobile ? 'xs' : 'md'}
@@ -121,7 +101,7 @@ export function DynamicViewWalkthrough() {
               {...buttonProps}
               pl={'lg'}
               disabled={!hasPrevious}
-              onClick={nextStep(-1)}>
+              onClick={() => diagram.walkthroughStep('previous')}>
               <IconPlayerSkipBackFilled />
             </Button>
 
@@ -130,7 +110,7 @@ export function DynamicViewWalkthrough() {
               px={hasNext ? 'md' : 'xl'}
               onClick={e => {
                 e.stopPropagation()
-                stopDynamicView()
+                diagram.stopWalkthrough()
               }}>
               {hasNext && <IconPlayerStopFilled />}
               {!hasNext && 'End'}
@@ -139,7 +119,7 @@ export function DynamicViewWalkthrough() {
               <Button
                 {...buttonProps}
                 pr={'lg'}
-                onClick={nextStep()}>
+                onClick={() => diagram.walkthroughStep('next')}>
                 <IconPlayerSkipForwardFilled />
               </Button>
             )}

package/src/{xyflow → likec4diagram}/useLayoutConstraints.ts

@@ -1,11 +1,15 @@
 import { type NodeId, type NonEmptyArray, nonNullable } from '@likec4/core'
-import type { NodeChange, ReactFlowProps, XYPosition } from '@xyflow/react'
+import { type InternalNode as RFInternalNode, type NodeChange, type OnNodeDrag, type XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { useMemo, useRef } from 'react'
 import { filter, hasAtLeast, isNullish, map, pipe } from 'remeda'
-import { useDiagramStoreApi } from '../hooks'
-import { type XYStoreApi } from '../hooks/useXYFlow'
-import type { DiagramFlowTypes } from './types'
+import { type XYStoreApi, useXYStoreApi } from '../hooks'
+// import { type XYStoreApi } from '../hooks/useXYFlow'
+import { useSyncedRef } from '@react-hookz/web'
+import { useDiagram } from '../hooks/useDiagram'
+import type { Types } from './types'
+
+type InternalNode = RFInternalNode<Types.Node>
 
 abstract class Rect {
   static readonly LeftPadding = 40
@@ -22,22 +26,24 @@ abstract class Rect {
   get positionAbsolute(): XYPosition {
     return {
       x: this.minX,
-      y: this.minY
+      y: this.minY,
     }
   }
 
   set positionAbsolute(pos: XYPosition) {
-    this.maxX += pos.x - this.minX
-    this.maxY += pos.y - this.minY
+    const x = Math.round(pos.x)
+    const y = Math.round(pos.y)
+    this.maxX += x - this.minX
+    this.maxY += y - this.minY
 
-    this.minX = pos.x
-    this.minY = pos.y
+    this.minX = x
+    this.minY = y
   }
 
   get dimensions() {
     return {
       width: this.maxX - this.minX,
-      height: this.maxY - this.minY
+      height: this.maxY - this.minY,
     }
   }
 
@@ -50,7 +56,7 @@ abstract class Rect {
     const parentPosition = this.parent.positionAbsolute
     return {
       x: positionAbsolute.x - parentPosition.x,
-      y: positionAbsolute.y - parentPosition.y
+      y: positionAbsolute.y - parentPosition.y,
     }
   }
   protected abstract parent: Compound | null
@@ -60,8 +66,8 @@ class Compound extends Rect {
   public readonly children = [] as Rect[]
 
   constructor(
-    xynode: DiagramFlowTypes.InternalNode,
-    protected readonly parent: Compound | null = null
+    xynode: InternalNode,
+    protected readonly parent: Compound | null = null,
   ) {
     super()
     this.id = xynode.id
@@ -74,8 +80,8 @@ class Compound extends Rect {
 
 class Leaf extends Rect {
   constructor(
-    xynode: DiagramFlowTypes.InternalNode,
-    public readonly parent: Compound | null = null
+    xynode: InternalNode,
+    public readonly parent: Compound | null = null,
   ) {
     super()
     this.id = xynode.id
@@ -94,12 +100,12 @@ class Leaf extends Rect {
 }
 
 type NodePositionUpdater = (
-  nodes: Array<{ rect: Rect | Compound; node: DiagramFlowTypes.InternalNode }>
+  nodes: Array<{ rect: Rect | Compound; node: InternalNode }>,
 ) => void
 
 export function createLayoutConstraints(
   xyflowApi: XYStoreApi,
-  editingNodeIds: NonEmptyArray<string>
+  editingNodeIds: NonEmptyArray<string>,
 ) {
   const { parentLookup, nodeLookup } = xyflowApi.getState()
   const rects = new Map<string, Leaf | Compound>()
@@ -108,7 +114,7 @@ export function createLayoutConstraints(
     const ancestors = [] as string[]
     const xynode = nodeLookup.get(nodeId)
     let parent = xynode?.parentId
-    let parentNode: DiagramFlowTypes.InternalNode | undefined
+    let parentNode: InternalNode | undefined
     while (parent && (parentNode = nodeLookup.get(parent))) {
       ancestors.push(parentNode.id as NodeId)
       parent = parentNode.parentId
@@ -117,16 +123,16 @@ export function createLayoutConstraints(
   }
 
   const ancestorsOfDraggingNodes = new Set(
-    editingNodeIds.flatMap(ancestorsOf)
+    editingNodeIds.flatMap(ancestorsOf),
   )
 
-  const traverse = new Array<{ xynode: DiagramFlowTypes.InternalNode; parent: Compound | null }>()
+  const traverse = new Array<{ xynode: InternalNode; parent: Compound | null }>()
 
   for (const [, xynode] of nodeLookup) {
     if (isNullish(xynode.parentId)) {
       traverse.push({
         xynode,
-        parent: null
+        parent: null,
       })
     }
   }
@@ -136,7 +142,8 @@ export function createLayoutConstraints(
     const isEditing = editingNodeIds.includes(xynode.id)
 
     // Traverse children if the node is a compound, not dragging, and is an ancestor of the dragging node
-    const shouldTraverse = !isEditing && xynode.type === 'compound'
+    const shouldTraverse = !isEditing &&
+      (xynode.type === 'compound-element' || xynode.type === 'compound-deployment' || xynode.type === 'view-group')
       && ancestorsOfDraggingNodes.has(xynode.id)
 
     const rect = shouldTraverse ? new Compound(xynode, parent) : new Leaf(xynode, parent)
@@ -146,7 +153,7 @@ export function createLayoutConstraints(
       parentLookup.get(xynode.id)?.forEach(child => {
         traverse.push({
           xynode: child,
-          parent: rect as Compound
+          parent: rect as Compound,
         })
       })
     }
@@ -165,12 +172,12 @@ export function createLayoutConstraints(
           minX: Math.min(acc.minX, r.minX),
           minY: Math.min(acc.minY, r.minY),
           maxX: Math.max(acc.maxX, r.maxX),
-          maxY: Math.max(acc.maxY, r.maxY)
+          maxY: Math.max(acc.maxY, r.maxY),
         }), {
           minX: Infinity,
           minY: Infinity,
           maxX: -Infinity,
-          maxY: -Infinity
+          maxY: -Infinity,
         })
 
         r.minX = childrenBB.minX - Rect.LeftPadding
@@ -189,25 +196,25 @@ export function createLayoutConstraints(
           type: 'position',
           dragging: false,
           position: r.position,
-          positionAbsolute: r.positionAbsolute
+          positionAbsolute: r.positionAbsolute,
         })
         if (r instanceof Compound) {
           acc.push({
             id: r.id,
             type: 'dimensions',
             setAttributes: true,
-            dimensions: r.dimensions
+            dimensions: r.dimensions,
           })
         }
         return acc
-      }, [] as NodeChange<DiagramFlowTypes.Node>[])
+      }, [] as NodeChange<Types.Node>[]),
     )
   }
 
   let animationFrameId: number | null = null
 
   function onMove(
-    updater: NodePositionUpdater
+    updater: NodePositionUpdater,
   ) {
     if (rectsToUpdate.length === 0) {
       return
@@ -220,9 +227,9 @@ export function createLayoutConstraints(
           filter(id => rects.has(id) && nodeLookup.has(id)),
           map(id => ({
             rect: nonNullable(rects.get(id)),
-            node: nonNullable(nodeLookup.get(id))
-          }))
-        )
+            node: nonNullable(nodeLookup.get(id)),
+          })),
+        ),
       )
       updateXYFlowNodes()
     })
@@ -230,28 +237,31 @@ export function createLayoutConstraints(
 
   return {
     updateXYFlowNodes,
-    onMove
+    onMove,
   }
 }
 
-type LayoutConstraints = Required<Pick<ReactFlowProps<DiagramFlowTypes.Node>, 'onNodeDragStart' | 'onNodeDrag' | 'onNodeDragStop'>>
+type LayoutConstraints = {
+  onNodeDragStart: OnNodeDrag<Types.Node>
+  onNodeDrag: OnNodeDrag<Types.Node>
+  onNodeDragStop: OnNodeDrag<Types.Node>
+}
 /**
  * Keeps the layout constraints (parent nodes and children) when dragging a node
  */
 export function useLayoutConstraints(): LayoutConstraints {
-  const diagramApi = useDiagramStoreApi()
-  const solverRef = useRef<ReturnType<typeof createLayoutConstraints>>()
+  const xystore = useXYStoreApi()
+  const diagram = useSyncedRef(useDiagram())
+  const solverRef = useRef<ReturnType<typeof createLayoutConstraints>>(undefined)
   return useMemo((): LayoutConstraints => ({
     onNodeDragStart: (_event, xynode) => {
-      const { cancelSaveManualLayout, xystore } = diagramApi.getState()
+      diagram.current.cancelSaveManualLayout()
       const { nodeLookup } = xystore.getState()
-      cancelSaveManualLayout()
-
       const draggingNodes = pipe(
         Array.from(nodeLookup.values()),
         filter(n => n.dragging === true || n.id === xynode.id || n.selected === true),
         filter(n => n.draggable !== false),
-        map(x => x.id)
+        map(x => x.id),
       )
       if (hasAtLeast(draggingNodes, 1)) {
         solverRef.current = createLayoutConstraints(xystore, draggingNodes)
@@ -266,8 +276,9 @@ export function useLayoutConstraints(): LayoutConstraints {
     },
     onNodeDragStop: () => {
       solverRef.current?.updateXYFlowNodes()
-      diagramApi.getState().scheduleSaveManualLayout()
+      diagram.current.scheduleSaveManualLayout()
+      // diagramApi.getState().scheduleSaveManualLayout()
       solverRef.current = undefined
-    }
-  }), [diagramApi])
+    },
+  }), [xystore])
 }