@likec4/diagram 1.4.0 → 1.5.0

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -1,20 +1,27 @@
-import { invariant, type NonEmptyArray, nonNullable, type Point } from '@likec4/core'
+import {
+  invariant,
+  type NonEmptyArray,
+  nonexhaustive,
+  nonNullable,
+  type Point,
+  type RelationshipArrowType
+} from '@likec4/core'
 import { Box } from '@mantine/core'
 import { useIsomorphicLayoutEffect } from '@react-hookz/web'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type { EdgeProps, XYPosition } from '@xyflow/react'
 import { EdgeLabelRenderer } from '@xyflow/react'
-import { getNodePositionWithOrigin } from '@xyflow/system'
 import clsx from 'clsx'
 import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
-import { deepEqual as eq } from 'fast-equals'
-import { memo, useRef, useState } from 'react'
+import { deepEqual, deepEqual as eq } from 'fast-equals'
+import { memo, type PointerEvent as ReactPointerEvent, useRef, useState } from 'react'
 import { first, hasAtLeast, isArray, isTruthy, last } from 'remeda'
-import { useDiagramState, useDiagramStoreApi } from '../../state'
+import { useDiagramState, useDiagramStoreApi } from '../../state/hooks'
 import { ZIndexes } from '../const'
+import { EdgeMarkers } from '../EdgeMarkers'
 import { useXYStoreApi } from '../hooks'
-import { type XYFlowEdge } from '../types'
-import { bezierControlPoints, toDomPrecision } from '../utils'
+import { type RelationshipData, type XYFlowEdge } from '../types'
+import { bezierControlPoints } from '../utils'
 import * as edgesCss from './edges.css'
 import { getNodeIntersectionFromCenterToPoint } from './utils'
 // import { getEdgeParams } from './utils'
@@ -49,6 +56,32 @@ import { getNodeIntersectionFromCenterToPoint } from './utils'
 //   return path + segment
 // }
 
+const toMarker = (arrowType?: RelationshipArrowType) => {
+  if (!arrowType || arrowType === 'none') {
+    return undefined
+  }
+  switch (arrowType) {
+    case 'normal':
+    case 'crow':
+      return 'Arrow' as const
+    case 'onormal':
+      return 'OArrow' as const
+    case 'diamond':
+      return 'Diamond' as const
+    case 'odiamond':
+      return 'ODiamond' as const
+    case 'open':
+    case 'vee':
+      return 'Open' as const
+    case 'dot':
+      return 'Dot' as const
+    case 'odot':
+      return `ODot` as const
+    default:
+      nonexhaustive(arrowType)
+  }
+}
+
 function bezierPath(bezierSpline: NonEmptyArray<Point>) {
   let [start, ...points] = bezierSpline
   invariant(start, 'start should be defined')
@@ -83,8 +116,8 @@ const sameControlPoints = (a: XYPosition[] | null, b: XYPosition[] | null) => {
 
 const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>) => (
   prev.id === next.id
-  && prev.source === next.source
-  && prev.target === next.target
+  && eq(prev.source, next.source)
+  && eq(prev.target, next.target)
   && eq(prev.selected ?? false, next.selected ?? false)
   && isSame(prev.sourceX, next.sourceX)
   && isSame(prev.sourceY, next.sourceY)
@@ -103,12 +136,17 @@ const curve = d3line<XYPosition>()
 export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
   id,
   data,
-  selected: _selected,
+  selected,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
   style,
   source,
   target,
   interactionWidth
 }) {
+  const [isControlPointDragging, setIsControlPointDragging] = useState(false)
   const diagramStore = useDiagramStoreApi()
   const xyflowStore = useXYStoreApi()
   const { isActive, isEditable, isEdgePathEditable, isHovered, isDimmed } = useDiagramState(s => ({
@@ -164,16 +202,24 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   if (isModified) {
     labelX = labelPos.x
     labelY = labelPos.y
-    const sourceCenterPos = getNodePositionWithOrigin(sourceNode, [-0.5, -0.5])
-    const targetCenterPos = getNodePositionWithOrigin(targetNode, [-0.5, -0.5])
+    const sourceCenterPos = { x: sourceX, y: sourceY }
+    const targetCenterPos = { x: targetX, y: targetY }
 
-    const points = [
-      sourceCenterPos.positionAbsolute,
-      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints)!),
-      ...controlPoints,
-      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints)!),
-      targetCenterPos.positionAbsolute
-    ]
+    const points = diagramEdge.dir === 'back'
+      ? [
+        targetCenterPos,
+        getNodeIntersectionFromCenterToPoint(targetNode, first(controlPoints) ?? sourceCenterPos),
+        ...controlPoints,
+        getNodeIntersectionFromCenterToPoint(sourceNode, last(controlPoints) ?? targetCenterPos),
+        sourceCenterPos
+      ]
+      : [
+        sourceCenterPos,
+        getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints) ?? targetCenterPos),
+        ...controlPoints,
+        getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints) ?? sourceCenterPos),
+        targetCenterPos
+      ]
 
     edgePath = nonNullable(curve(points))
   } else {
@@ -198,15 +244,31 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     setLabelPosition(current => isSamePoint(current, point) ? current : point)
   }, [edgePath])
 
-  const onControlPointerDown = (index: number, e: React.PointerEvent) => {
+  const onControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>) => {
     const { domNode } = xyflowStore.getState()
-    if (!domNode) return
+    if (!domNode || e.pointerType !== 'mouse') {
+      return
+    }
     const { xyflow } = diagramStore.getState()
+    if (e.button === 2 && controlPoints.length > 1) {
+      const newControlPoints = controlPoints.slice()
+      newControlPoints.splice(index, 1)
+      e.stopPropagation()
+      // Defer the update to avoid conflict with the pointerup event
+      setTimeout(() => {
+        xyflow.updateEdgeData(id, { controlPoints: newControlPoints })
+      }, 10)
+      return
+    }
+    if (e.button !== 0) {
+      return
+    }
     e.stopPropagation()
     let hasMoved = false
     let pointer = { x: e.clientX, y: e.clientY }
     const onPointerMove = (e: PointerEvent) => {
       if (!isSamePoint(pointer, [e.clientX, e.clientY])) {
+        setIsControlPointDragging(true)
         if (!hasMoved) {
           diagramStore.getState().cancelSaveManualLayout()
         }
@@ -215,35 +277,39 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
         const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false })
         const newControlPoints = controlPoints.slice()
         newControlPoints[index] = {
-          x: toDomPrecision(x),
-          y: toDomPrecision(y)
+          x: Math.round(x),
+          y: Math.round(y)
         }
         xyflow.updateEdgeData(id, { controlPoints: newControlPoints })
       }
     }
     const onPointerUp = () => {
+      setIsControlPointDragging(false)
       domNode.removeEventListener('pointermove', onPointerMove)
       domNode.removeEventListener('pointerup', onPointerUp)
       if (hasMoved) {
-        diagramStore.getState().triggerSaveManualLayout(xyflowStore)
+        diagramStore.getState().triggerSaveManualLayout()
       }
     }
     domNode.addEventListener('pointermove', onPointerMove)
     domNode.addEventListener('pointerup', onPointerUp, { once: true })
   }
 
-  const marker = `url(#arrow-${id})`
-  let markerStart = diagramEdge.tailArrow ? marker : undefined
-  let markerEnd = diagramEdge.headArrow ? marker : undefined
-  if (isModified && diagramEdge.dir === 'back') {
-    ;[markerStart, markerEnd] = [markerEnd, markerStart]
+  let markerStartName = toMarker(diagramEdge.tail)
+  let markerEndName = toMarker(diagramEdge.head ?? 'normal')
+  if (diagramEdge.dir === 'back') {
+    ;[markerStartName, markerEndName] = [markerEndName, markerStartName]
   }
 
+  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null
+  const MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null
+
   return (
     <g
       className={clsx([
         edgesCss.container,
-        isDimmed && edgesCss.dimmed
+        isDimmed && edgesCss.dimmed,
+        isControlPointDragging && edgesCss.controlDragging
       ])}
       data-likec4-color={color}
       data-edge-dir={diagramEdge.dir}
@@ -258,19 +324,8 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
       />
       <g className={edgesCss.markerContext}>
         <defs>
-          <marker
-            id={`arrow-${id}`}
-            viewBox="0 0 16 10"
-            // TODO: graphviz cut bezier path at arrow, we don't
-            refX={isModified ? '15' : '1'}
-            refY="5"
-            markerWidth="5"
-            markerHeight="4"
-            markerUnits="strokeWidth"
-            preserveAspectRatio="xMaxYMid meet"
-            orient="auto-start-reverse">
-            <path d="M 0 0 L 16 5 L 0 10 z" stroke="context-stroke" fill="context-stroke" />
-          </marker>
+          {MarkerStart && <MarkerStart id={'start' + id} />}
+          {MarkerEnd && <MarkerEnd id={'end' + id} />}
         </defs>
         <path
           className={clsx('react-flow__edge-path', edgesCss.edgePathBg)}
@@ -285,85 +340,119 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
           style={style}
           strokeLinecap={'round'}
           strokeDasharray={strokeDasharray}
-          markerStart={markerStart}
-          markerEnd={markerEnd}
+          markerStart={MarkerStart ? `url(#start${id})` : undefined}
+          markerEnd={MarkerEnd ? `url(#end${id})` : undefined}
         />
       </g>
-      {isEdgePathEditable && controlPoints.map((p, i) => (
-        <circle
-          onPointerDown={e => onControlPointerDown(i, e)}
-          className={edgesCss.controlPoint}
-          key={i}
-          cx={p.x}
-          cy={p.y}
-          r={3}
-        />
-      ))}
+
+      {isEdgePathEditable && (
+        <g
+          onContextMenu={e => {
+            e.preventDefault()
+            e.stopPropagation()
+          }}>
+          {controlPoints.map((p, i) => (
+            <circle
+              onPointerDown={e => onControlPointerDown(i, e)}
+              className={edgesCss.controlPoint}
+              key={i}
+              cx={p.x}
+              cy={p.y}
+              r={3}
+            />
+          ))}
+        </g>
+      )}
       {(data.label || isStepEdge) && (
-        <EdgeLabelRenderer>
-          <Box
-            className={clsx([
-              edgesCss.container,
-              edgesCss.edgeLabel,
-              isDimmed && edgesCss.dimmed
-            ])}
-            data-likec4-color={color}
-            style={{
-              ...assignInlineVars({
-                [edgesCss.varLabelX]: isModified ? `calc(${labelX}px - 10%)` : `${labelX}px`,
-                [edgesCss.varLabelY]: isModified ? `${labelY - 5}px` : `${labelY}px`
-              }),
-              ...(isEdgePathEditable && {
-                pointerEvents: 'none'
-              }),
-              ...(data.label && {
-                maxWidth: data.label.bbox.width + 12
-              }),
-              zIndex: edgeLookup.get(id)?.zIndex ?? ZIndexes.Edge
-            }}
-            mod={{
-              'data-edge-hovered': isHovered,
-              'data-edge-active': isActive
-            }}
-          >
-            {isStepEdge && (
-              <Box className={edgesCss.stepEdgeNumber}>
-                {data.stepNum}
-              </Box>
-            )}
-            {data.label?.text && (
-              <Box className={edgesCss.edgeLabelText}>
-                {data.label.text}
-              </Box>
-            )}
-            {
-              /* <Popover
-                position="bottom"
-                floatingStrategy="fixed"
-                shadow="lg"
-                disabled={!selected}
-                transitionProps={{
-                  transition: 'pop'
-                }}>
-                <Popover.Target>
-                  <Box className={clsx('nodrag nopan', edgeLabelBody)}>
-                    {data.label.text}
-                  </Box>
-                </Popover.Target>
-                <Popover.Dropdown>
-                  {edge.relations.map((relation) => (
-                    <Box key={relation}>
-                      <Text size='xs'>{relation}</Text>
-                    </Box>
-                  ))}
-                  <TextInput label="Name" placeholder="Name" size="xs" />
-                  <TextInput label="Email" placeholder="john@doe.com" size="xs" mt="xs" />
-                </Popover.Dropdown>
-              </Popover> */
-            }
-          </Box>
-        </EdgeLabelRenderer>
+        <EdgeLabel
+          {...({
+            isDimmed,
+            color,
+            isModified,
+            labelX,
+            labelY,
+            isEdgePathEditable,
+            selected: selected ?? false,
+            stepNum: data.stepNum,
+            label: data.label,
+            zIndex: edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge,
+            isHovered,
+            isActive,
+            isStepEdge
+          })} />
       )}
     </g>
   )
 }, isEqualProps)
+
+type EdgeLabelProps = {
+  isDimmed: boolean
+  color: string
+  isModified: boolean
+  labelX: number
+  labelY: number
+  isEdgePathEditable: boolean
+  selected: boolean
+  stepNum: number | null
+  label: RelationshipData['label']
+  isHovered: boolean
+  isActive: boolean
+  zIndex: number
+}
+
+const EdgeLabel = memo<EdgeLabelProps>(({
+  isDimmed,
+  color,
+  isModified,
+  labelX,
+  labelY,
+  isEdgePathEditable,
+  selected,
+  label,
+  stepNum,
+  isHovered,
+  isActive,
+  zIndex
+}) => {
+  return (
+    <EdgeLabelRenderer>
+      <Box
+        className={clsx([
+          'nodrag nopan',
+          edgesCss.container,
+          edgesCss.edgeLabel,
+          isDimmed && edgesCss.dimmed
+        ])}
+        style={{
+          ...assignInlineVars({
+            [edgesCss.varLabelX]: isModified ? `calc(${labelX}px - 10%)` : `${labelX}px`,
+            [edgesCss.varLabelY]: isModified ? `${labelY - 5}px` : `${labelY}px`
+          }),
+          ...(isEdgePathEditable && selected && {
+            pointerEvents: 'none'
+          }),
+          ...(label && {
+            maxWidth: label.bbox.width + 18
+          }),
+          zIndex
+        }}
+        mod={{
+          'data-likec4-color': color,
+          'data-edge-hovered': isHovered,
+          'data-edge-active': isActive
+        }}
+      >
+        {stepNum !== null && (
+          <Box className={edgesCss.stepEdgeNumber}>
+            {stepNum}
+          </Box>
+        )}
+        {isTruthy(label?.text) && (
+          <Box className={edgesCss.edgeLabelText}>
+            {label.text}
+          </Box>
+        )}
+      </Box>
+    </EdgeLabelRenderer>
+  )
+}, deepEqual)

package/src/xyflow/edges/edges.css.ts

@@ -11,8 +11,8 @@ export const container = style({
     [xyvars.edge.stroke]: vars.relation.lineColor,
     [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
     [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 20%)`,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 35%)`,
-    [xyvars.edge.strokeWidth]: '2.2px'
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 40%)`,
+    [xyvars.edge.strokeWidth]: '3'
   }
 })
 
@@ -20,7 +20,7 @@ globalStyle(`:where([data-mantine-color-scheme="dark"]) ${container}`, {
   vars: {
     [mixColor]: `white`,
     [xyvars.edge.labelColor]: vars.relation.labelColor,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 55%)`
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
   }
 })
 
@@ -29,7 +29,7 @@ const isSelected = '.react-flow__edge.selected'
 globalStyle(`:where(${isSelected}) ${container}`, {
   vars: {
     [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
-    [xyvars.edge.strokeWidth]: '3px'
+    [xyvars.edge.strokeWidth]: '3'
   }
 })
 
@@ -37,13 +37,13 @@ globalStyle(`${container}:is([data-edge-hovered='true'],[data-edge-active='true'
   vars: {
     // [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
     [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
-    [xyvars.edge.strokeWidth]: '3px'
+    [xyvars.edge.strokeWidth]: '3'
   }
 })
 
 globalStyle(`:where(${isSelected}) ${container}[data-edge-hovered='true']`, {
   vars: {
-    [xyvars.edge.strokeWidth]: '3.6px'
+    [xyvars.edge.strokeWidth]: '4'
   }
 })
 // globalStyle(`${container}[data-edge-hovered='true']`, {
@@ -56,6 +56,10 @@ globalStyle(`.react-flow__edges > svg`, {
   mixBlendMode: 'screen'
 })
 
+// globalStyle(`:where([data-mantine-color-scheme="light"]) .react-flow__edges > svg`, {
+//   mixBlendMode: 'screen'
+// })
+
 export const dimmed = style({})
 
 globalStyle(`.react-flow__edges > svg:has(${dimmed})`, {
@@ -67,7 +71,7 @@ globalStyle(`.react-flow__edges > svg:has(${dimmed})`, {
 })
 
 export const edgePathBg = style({
-  strokeWidth: xyvars.edge.strokeWidth,
+  // strokeWidth: xyvars.edge.strokeWidth,
   strokeOpacity: 0.08,
   // transition: 'stroke-width 175ms ease-in-out',
   // transition: 'stroke-width 175ms ease-in-out, stroke-opacity 150ms ease-out',
@@ -76,7 +80,7 @@ export const edgePathBg = style({
   transitionTimingFunction: 'ease-out',
   selectors: {
     [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
-      strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8px)`,
+      strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8)`,
       strokeOpacity: 0.15
     }
   }
@@ -93,7 +97,7 @@ export const controlPoint = style({
   stroke: xyvars.edge.stroke,
   fillOpacity: 0.75,
   strokeWidth: 1,
-  cursor: 'grab',
+  cursor: 'default',
   pointerEvents: 'auto',
   visibility: 'hidden',
   ':hover': {
@@ -112,12 +116,20 @@ export const controlPoint = style({
   }
 })
 
+export const controlDragging = style({
+  cursor: 'grabbing'
+})
+
+globalStyle(`${controlDragging} *`, {
+  cursor: 'grabbing'
+})
+
 const strokeKeyframes = keyframes({
   'from': {
-    strokeDashoffset: 18 * 2
+    strokeDashoffset: 18 * 2 + 10
   },
   'to': {
-    strokeDashoffset: 1
+    strokeDashoffset: 10
   }
 })
 
@@ -125,16 +137,16 @@ export const cssEdgePath = style({
   animationDuration: '800ms',
   animationIterationCount: 'infinite',
   animationTimingFunction: 'linear',
-  animationName: strokeKeyframes,
-  animationPlayState: 'paused',
+  animationFillMode: 'both',
+  strokeDashoffset: 10,
   selectors: {
     [`:where([data-edge-hovered='true']) &`]: {
-      animationPlayState: 'running',
-      animationDelay: '350ms',
+      animationName: strokeKeyframes,
+      animationDelay: '450ms',
       transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out'
     },
     [`:where(${isSelected}, [data-edge-active='true']) &`]: {
-      animationPlayState: 'running',
+      animationName: strokeKeyframes,
       animationDelay: '0ms',
       transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out'
     },
@@ -155,23 +167,25 @@ const varTranslate = createVar('translate')
 export const edgeLabel = style({
   top: 0,
   left: 0,
+  padding: '2px 4px 4px 4px',
   fontFamily: vars.likec4.font,
   position: 'absolute',
   pointerEvents: 'all',
   cursor: 'pointer',
+  width: 'fit-content',
   transformOrigin: '50% 50%',
   mixBlendMode: 'screen',
   color: xyvars.edge.labelColor,
   backgroundColor: xyvars.edge.labelBgColor,
-  borderRadius: '3px',
+  borderRadius: 3,
   transform: varTranslate,
   vars: {
     [varTranslate]: `translate(${fallbackVar(varLabelX, '-50%')}, ${fallbackVar(varLabelY, '-50%')})`
   },
   selectors: {
     '&[data-edge-hovered="true"]': {
-      transition: 'all 140ms ease-out',
-      transform: `${varTranslate} scale(1.1)`
+      transition: 'all 140ms ease-in-out',
+      transform: `${varTranslate} scale(1.12)`
     },
     [`&:is(${dimmed})`]: {
       opacity: 0.6,
@@ -207,8 +221,8 @@ export const stepEdgeNumber = style({
 })
 
 export const edgeLabelText = style({
-  padding: '2px 6px 4px 6px',
   textAlign: 'left',
-  fontSize: rem(12.5),
-  lineHeight: 1.2
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: rem(14),
+  lineHeight: 1.185
 })

package/src/xyflow/edges/utils.ts

@@ -3,6 +3,16 @@ import { Position, type XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import type { InternalXYFlowNode } from '../types'
 
+export function getNodeCenter(node: InternalXYFlowNode): XYPosition {
+  const { width, height } = getNodeDimensions(node)
+  const { x, y } = node.internals.positionAbsolute
+
+  return {
+    x: x + width / 2,
+    y: y + height / 2
+  }
+}
+
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
 export function getNodeIntersectionFromCenterToPoint(

package/src/xyflow/hooks/index.ts

@@ -1,2 +1,4 @@
-export * from './useLayoutConstraints'
-export * from './useXYFlow'
+export { useLayoutConstraints } from './useLayoutConstraints'
+export { useXYFlow, useXYNodesData, useXYStore, useXYStoreApi } from './useXYFlow'
+
+export type * from './useXYFlow'

package/src/xyflow/hooks/useLayoutConstraints.ts

@@ -1,12 +1,11 @@
 import { invariant, isAncestor, nonNullable } from '@likec4/core'
 import { Expression, Expression as Expr, Operator, Solver, Strength, Variable } from '@lume/kiwi'
-import { useDebouncedCallback } from '@react-hookz/web'
 import type { InternalNode, ReactFlowProps, XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { useMemo, useRef } from 'react'
 import { isNullish } from 'remeda'
-import { useDiagramStoreApi } from '../../state'
-import { type XYFlowInstance, XYFlowNode } from '../types'
+import { useDiagramStoreApi } from '../../state/hooks'
+import type { XYFlowInstance, XYFlowNode } from '../types'
 import { isSamePoint } from '../utils'
 import { useXYStoreApi, type XYStoreApi } from './useXYFlow'
 
@@ -296,7 +295,7 @@ export function useLayoutConstraints(): LayoutConstraints {
     },
     onNodeDragStop: (event, _xynode) => {
       if (!isSamePoint(dragStartedAt.current, { x: event.clientX, y: event.clientY })) {
-        diagramApi.getState().triggerSaveManualLayout(xyflowApi)
+        diagramApi.getState().triggerSaveManualLayout()
       }
       solverRef.current = undefined
     }

package/src/xyflow/hooks/useXYFlow.ts

@@ -1,5 +1,6 @@
 import { useNodesData, useReactFlow, useStore, useStoreApi } from '@xyflow/react'
-import { shallowEqual } from 'fast-equals'
+import { deepEqual, shallowEqual } from 'fast-equals'
+import { useCallback } from 'react'
 import type { XYFlowEdge, XYFlowNode, XYFlowState } from '../types'
 
 export const useXYFlow = useReactFlow<XYFlowNode, XYFlowEdge>
@@ -18,3 +19,29 @@ export function useXYStore<StateSlice = unknown>(
 }
 export const useXYStoreApi = useStoreApi<XYFlowNode, XYFlowEdge>
 export type XYStoreApi = ReturnType<typeof useXYStoreApi>
+
+export function useXYEdgesData(edgeIds: string[]): Pick<XYFlowEdge, 'id' | 'data'>[] {
+  const ids = edgeIds.join(',')
+  const edgesData = useXYStore(
+    useCallback(
+      (s) => {
+        const data = [] as Pick<XYFlowEdge, 'id' | 'data'>[]
+        for (const id of edgeIds) {
+          const edge = s.edgeLookup.get(id)
+          if (edge) {
+            data.push({
+              id: edge.id,
+              data: edge.data
+            })
+          }
+        }
+
+        return data
+      },
+      [ids]
+    ),
+    deepEqual
+  )
+
+  return edgesData
+}