@likec4/diagram 1.2.2 → 1.3.0

package/src/xyflow/diagram-to-xyflow.ts

@@ -9,41 +9,15 @@ import {
   type Point
 } from '@likec4/core'
 import { Bezier } from 'bezier-js'
-import { hasAtLeast } from 'remeda'
+import { hasAtLeast, reduce } from 'remeda'
 import type { XYFlowData } from '../xyflow/types'
-
-function deriveEdgePoints(bezierSpline: NonEmptyArray<Point>) {
-  let [start, ...bezierPoints] = bezierSpline
-  invariant(start, 'start should be defined')
-  const handles = [
-    // start
-  ] as Point[]
-
-  while (hasAtLeast(bezierPoints, 3)) {
-    const [cp1, cp2, end, ...rest] = bezierPoints
-    const bezier = new Bezier(start[0], start[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1])
-    // const { x, y } = bezier.get(0.5)
-    const inflections = bezier.inflections()
-    if (inflections.length === 0) {
-      inflections.push(0.5)
-    }
-    inflections.forEach(t => {
-      const { x, y } = bezier.get(t)
-      handles.push([x, y])
-    })
-    bezierPoints = rest
-    start = end
-  }
-  invariant(bezierPoints.length === 0, 'all points should be consumed')
-
-  return handles
-}
+import { toDomPrecision } from './utils'
 
 // const nodeZIndex = (node: DiagramNode) => node.level + (hasAtLeast(node.children, 1) ? 2 : 1)
 const nodeZIndex = (node: DiagramNode) => node.level + 1
 
 export function diagramViewToXYFlowData(
-  view: Pick<DiagramView, 'nodes' | 'edges' | '__'>,
+  view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__' | 'manualLayout'>,
   opts: {
     draggable: boolean
     selectable: boolean
@@ -147,7 +121,7 @@ export function diagramViewToXYFlowData(
     const target = edge.target
     const id = ns + edge.id
     // const points = isElkEdge(edge) ? edge.points : deriveEdgePoints(edge.points)
-    const controlPoints = deriveEdgePoints(edge.points)
+    // const controlPoints = deriveEdgePoints(edge.points)
     // if (edge.tailArrowPoint) {
     //   controlPoints.unshift([...edge.tailArrowPoint])
     // }
@@ -169,7 +143,7 @@ export function diagramViewToXYFlowData(
       data: {
         edge,
         type: 'bezier',
-        controlPoints,
+        controlPoints: view.manualLayout?.edges[edge.id]?.controlPoints || null,
         headPoint: edge.headArrowPoint ?? null,
         tailPoint: edge.tailArrowPoint ?? null,
         stepNum: isDynamicView ? extractStep(edge.id) : null,

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -1,20 +1,22 @@
 import { invariant, type NonEmptyArray, nonNullable, type Point } 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, getBezierPath } 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 { type CSSProperties, memo } from 'react'
-import { first, hasAtLeast, last, zip } from 'remeda'
-import { useDiagramState } from '../../state'
+import { memo, useRef, useState } from 'react'
+import { first, hasAtLeast, isArray, isTruthy, last } from 'remeda'
+import { useDiagramState, useDiagramStoreApi } from '../../state'
 import { ZIndexes } from '../const'
-import { useXYStoreApi } from '../hooks'
+import { useXYFlow, useXYStoreApi } from '../hooks'
 import { type XYFlowEdge } from '../types'
+import { bezierControlPoints, toDomPrecision } from '../utils'
 import * as edgesCss from './edges.css'
-import { getEdgeParams, getNodeIntersectionFromCenterToPoint } from './utils'
+import { getNodeIntersectionFromCenterToPoint } from './utils'
 // import { getEdgeParams } from './utils'
 
 // function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size = 8): string {
@@ -63,12 +65,20 @@ function bezierPath(bezierSpline: NonEmptyArray<Point>) {
 }
 
 // If points are within 3px, consider them the same
-const isSamePoint = (a: number, b: number) => {
+const isSame = (a: number, b: number) => {
   return Math.abs(a - b) < 3.1
 }
 
-const isSamePosition = (a: XYPosition, [bx, by]: Point) => {
-  return isSamePoint(a.x, bx) && isSamePoint(a.y, by)
+const isSamePoint = (a: XYPosition | Point, b: XYPosition | Point) => {
+  const [ax, ay] = isArray(a) ? a : [a.x, a.y]
+  const [bx, by] = isArray(b) ? b : [b.x, b.y]
+  return isSame(ax, bx) && isSame(ay, by)
+}
+
+const sameControlPoints = (a: XYPosition[] | null, b: XYPosition[] | null) => {
+  if (a === b) return true
+  if (!a || !b || a.length !== b.length) return false
+  return a.every((ap, i) => isSamePoint(ap, b[i]!))
 }
 
 const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>) => (
@@ -76,19 +86,19 @@ const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>)
   && prev.source === next.source
   && prev.target === next.target
   && eq(prev.selected ?? false, next.selected ?? false)
-  && isSamePoint(prev.sourceX, next.sourceX)
-  && isSamePoint(prev.sourceY, next.sourceY)
-  && isSamePoint(prev.targetX, next.targetX)
-  && isSamePoint(prev.targetY, next.targetY)
+  && isSame(prev.sourceX, next.sourceX)
+  && isSame(prev.sourceY, next.sourceY)
+  && isSame(prev.targetX, next.targetX)
+  && isSame(prev.targetY, next.targetY)
   && eq(prev.data.stepNum, next.data.stepNum)
+  && sameControlPoints(prev.data.controlPoints, next.data.controlPoints)
   && eq(prev.data.edge, next.data.edge)
-  && zip(prev.data.controlPoints, next.data.controlPoints).every(([a, b]) =>
-    isSamePoint(a[0], b[0]) && isSamePoint(a[1], b[1])
-  )
 )
 
-const curve = d3line<Point>()
+const curve = d3line<XYPosition>()
   .curve(curveCatmullRomOpen)
+  .x(d => d.x)
+  .y(d => d.y)
 
 export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
   id,
@@ -99,26 +109,38 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   target,
   interactionWidth
 }) {
-  const { nodeLookup, edgeLookup } = useXYStoreApi().getState()
+  const diagramStore = useDiagramStoreApi()
+  const xyflowStore = useXYStoreApi()
+  const { isActive, isEditable, isEdgePathEditable, isHovered, isDimmed } = useDiagramState(s => ({
+    isEditable: s.readonly !== true,
+    isEdgePathEditable: s.readonly !== true && s.experimentalEdgeEditing === true,
+    isActive: s.focusedNodeId === source || s.focusedNodeId === target
+      || (s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum),
+    isHovered: s.hoveredEdgeId === id,
+    isDimmed: s.dimmed.has(id)
+  }))
+  const { nodeLookup, edgeLookup } = xyflowStore.getState()
   const sourceNode = nonNullable(nodeLookup.get(source)!, `source node ${source} not found`)
   const targetNode = nonNullable(nodeLookup.get(target)!, `target node ${target} not found`)
 
-  const isModified = !isSamePosition(sourceNode.internals.positionAbsolute, sourceNode.data.element.position)
-    || !isSamePosition(targetNode.internals.positionAbsolute, targetNode.data.element.position)
+  const isModified = isEditable && (0
+    || isTruthy(data.controlPoints)
+    || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.element.position)
+    || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.element.position))
 
-  const { edge: diagramEdge, controlPoints } = data
+  const {
+    label,
+    edge: {
+      points: diagramEdgePoints,
+      line = 'dashed',
+      color = 'gray',
+      ...diagramEdge
+    }
+  } = data
 
-  // const edgePath = bezierPath(edge.points)
+  let controlPoints = data.controlPoints ?? bezierControlPoints(data.edge)
 
-  const color = diagramEdge.color ?? 'gray'
   const isStepEdge = data.stepNum !== null
-  const { isActive, isHovered, isDimmed } = useDiagramState(s => ({
-    isActive: s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum,
-    isHovered: s.hoveredEdgeId === id,
-    isDimmed: s.dimmed.has(id)
-  }))
-
-  const line = diagramEdge.line ?? 'dashed'
   const isDotted = line === 'dotted'
   const isDashed = isDotted || line === 'dashed'
 
@@ -129,45 +151,89 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     strokeDasharray = '8,10'
   }
 
-  const marker = `url(#arrow-${id})`
+  let labelX = label?.bbox.x ?? 0,
+    labelY = label?.bbox.y ?? 0
+
+  const [labelPos, setLabelPosition] = useState<XYPosition>({
+    x: labelX,
+    y: labelY
+  })
+
+  let edgePath: string
 
-  let edgePath: string, labelX: number, labelY: number
+  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 points = [
+      sourceCenterPos.positionAbsolute,
+      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints)!),
+      ...controlPoints,
+      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints)!),
+      targetCenterPos.positionAbsolute
+    ]
 
-  if (!isModified) {
-    edgePath = bezierPath(diagramEdge.points)
+    edgePath = nonNullable(curve(points))
+  } else {
+    edgePath = bezierPath(diagramEdgePoints)
     // if (diagramEdge.tailArrowPoint) {
     //   edgePath = `M ${diagramEdge.tailArrowPoint[0]},${diagramEdge.tailArrowPoint[1]} L ${edgePath.substring(1)}`
     // }
     // if (diagramEdge.headArrowPoint) {
     //   edgePath += ` L ${diagramEdge.headArrowPoint[0]},${diagramEdge.headArrowPoint[1]}`
     // }
-    labelX = data.label?.bbox.x ?? 0
-    labelY = data.label?.bbox.y ?? 0
-  } else {
-    const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode)
+  }
 
-    const [_edgePath, _labelX, _labelY] = getBezierPath({
-      sourceX: sx,
-      sourceY: sy,
-      sourcePosition: sourcePos,
-      targetPosition: targetPos,
-      targetX: tx,
-      targetY: ty
-    })
-    edgePath = _edgePath
-    labelX = _labelX
-    labelY = _labelY
+  const svgPathRef = useRef<SVGPathElement>(null)
+  useIsomorphicLayoutEffect(() => {
+    const path = svgPathRef.current
+    if (!path) return
+    const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5)
+    const point = {
+      x: Math.round(dompoint.x),
+      y: Math.round(dompoint.y)
+    }
+    setLabelPosition(current => isSamePoint(current, point) ? current : point)
+  }, [edgePath])
 
-    const sourceCenterPos = getNodePositionWithOrigin(sourceNode, [-0.5, -0.5])
-    const targetCenterPos = getNodePositionWithOrigin(targetNode, [-0.5, -0.5])
+  const onControlPointerDown = (index: number, e: React.PointerEvent) => {
+    const { domNode } = xyflowStore.getState()
+    if (!domNode) return
+    const { xyflow } = diagramStore.getState()
+    e.stopPropagation()
+    let hasMoved = false
+    let pointer = { x: e.clientX, y: e.clientY }
+    const onPointerMove = (e: PointerEvent) => {
+      if (!isSamePoint(pointer, [e.clientX, e.clientY])) {
+        hasMoved = true
+        pointer = { x: e.clientX, y: e.clientY }
+        const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false })
+        const newControlPoints = controlPoints.slice()
+        newControlPoints[index] = {
+          x: toDomPrecision(x),
+          y: toDomPrecision(y)
+        }
+        xyflow.updateEdgeData(id, { controlPoints: newControlPoints })
+      }
+    }
+    const onPointerUp = () => {
+      domNode.removeEventListener('pointermove', onPointerMove)
+      domNode.removeEventListener('pointerup', onPointerUp)
+      if (hasMoved) {
+        diagramStore.getState().triggerSaveManualLayout(xyflowStore)
+      }
+    }
+    domNode.addEventListener('pointermove', onPointerMove)
+    domNode.addEventListener('pointerup', onPointerUp, { once: true })
+  }
 
-    edgePath = curve([
-      [sourceCenterPos.positionAbsolute.x, sourceCenterPos.positionAbsolute.y],
-      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints)!),
-      ...controlPoints,
-      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints)!),
-      [targetCenterPos.positionAbsolute.x, targetCenterPos.positionAbsolute.y]
-    ])!
+  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]
   }
 
   return (
@@ -185,7 +251,8 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
           <marker
             id={`arrow-${id}`}
             viewBox="0 0 16 10"
-            refX={isModified ? '12' : '10'}
+            // TODO: graphviz cut bezier path at arrow, we don't
+            refX={isModified ? '15' : '1'}
             refY="5"
             markerWidth="5"
             markerHeight="4"
@@ -195,20 +262,37 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
             <path d="M 0 0 L 16 5 L 0 10 z" stroke="context-stroke" fill="context-stroke" />
           </marker>
         </defs>
+        <path
+          className={clsx('react-flow__edge-path', edgesCss.edgePathBg)}
+          d={edgePath}
+          style={style}
+          strokeLinecap={'round'}
+        />
+        <path
+          ref={svgPathRef}
+          className={clsx('react-flow__edge-path', edgesCss.cssEdgePath)}
+          d={edgePath}
+          style={style}
+          strokeLinecap={'round'}
+          strokeDasharray={strokeDasharray}
+          markerStart={markerStart}
+          markerEnd={markerEnd}
+        />
       </g>
-      <RelationshipPath
-        edgePath={edgePath}
-        interactionWidth={interactionWidth ?? 10}
-        strokeDasharray={strokeDasharray}
-        markerStart={diagramEdge.tailArrow ? marker : undefined}
-        markerEnd={diagramEdge.headArrow ? marker : undefined}
-        style={style} />
-      {isModified && controlPoints.map((p, i) => (
+      <path
+        className={clsx('react-flow__edge-interaction')}
+        d={edgePath}
+        fill="none"
+        strokeOpacity={0}
+        strokeWidth={interactionWidth ?? 10}
+      />
+      {isEdgePathEditable && controlPoints.map((p, i) => (
         <circle
+          onPointerDown={e => onControlPointerDown(i, e)}
           className={edgesCss.controlPoint}
           key={i}
-          cx={p[0]}
-          cy={p[1]}
+          cx={p.x}
+          cy={p.y}
           r={3}
         />
       ))}
@@ -223,8 +307,11 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
             data-likec4-color={color}
             style={{
               ...assignInlineVars({
-                [edgesCss.varLabelX]: Math.floor(labelX) + 'px',
-                [edgesCss.varLabelY]: Math.floor(labelY) + 'px'
+                [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
@@ -277,44 +364,3 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     </g>
   )
 }, isEqualProps)
-
-const RelationshipPath = ({
-  edgePath,
-  interactionWidth,
-  strokeDasharray,
-  markerStart,
-  markerEnd,
-  style
-}: {
-  edgePath: string
-  interactionWidth: number
-  strokeDasharray: string | undefined
-  markerStart: string | undefined
-  markerEnd: string | undefined
-  style: CSSProperties | undefined
-}) => (
-  <>
-    <path
-      className={clsx('react-flow__edge-path', edgesCss.edgePathBg)}
-      d={edgePath}
-      style={style}
-      strokeLinecap={'round'}
-    />
-    <path
-      className={clsx('react-flow__edge-path', edgesCss.cssEdgePath)}
-      d={edgePath}
-      style={style}
-      strokeLinecap={'round'}
-      strokeDasharray={strokeDasharray}
-      markerStart={markerStart}
-      markerEnd={markerEnd}
-    />
-    <path
-      className={clsx('react-flow__edge-interaction')}
-      d={edgePath}
-      fill="none"
-      strokeOpacity={0}
-      strokeWidth={interactionWidth}
-    />
-  </>
-)

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

@@ -1,5 +1,6 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, generateIdentifier, globalKeyframes, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../../mantine.css'
 import { vars, xyvars } from '../../theme.css'
 
 const mixColor = createVar('mix-color')
@@ -15,13 +16,6 @@ export const container = style({
   }
 })
 
-export const dimmed = style({})
-
-globalStyle(`svg:has(${dimmed})`, {
-  filter: vars.filterDimmed,
-  transition: 'filter 800ms ease-out'
-})
-
 globalStyle(`:where([data-mantine-color-scheme="dark"]) ${container}`, {
   vars: {
     [mixColor]: `white`,
@@ -61,9 +55,16 @@ globalStyle(`:where(${isSelected}) ${container}[data-edge-hovered='true']`, {
 globalStyle(`.react-flow__edges > svg`, {
   mixBlendMode: 'screen'
 })
-// globalStyle(`:where([data-mantine-color-scheme="dark"]) .react-flow__edges > svg`, {
-//   mixBlendMode: 'lighten'
-// })
+
+export const dimmed = style({})
+
+globalStyle(`.react-flow__edges > svg:has(${dimmed})`, {
+  opacity: 0.8,
+  transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
+  transitionDelay: '200ms',
+  filter: 'grayscale(0.85) blur(1px)',
+  willChange: 'opacity, filter'
+})
 
 export const edgePathBg = style({
   strokeWidth: xyvars.edge.strokeWidth,
@@ -84,8 +85,7 @@ export const edgePathBg = style({
 // To fix issue with marker not inheriting color from path - we need to create container
 export const markerContext = style({
   fill: xyvars.edge.stroke,
-  stroke: xyvars.edge.stroke,
-  pointerEvents: 'none'
+  stroke: xyvars.edge.stroke
 })
 
 export const controlPoint = style({
@@ -94,12 +94,20 @@ export const controlPoint = style({
   fillOpacity: 0.75,
   strokeWidth: 1,
   cursor: 'grab',
-  pointerEvents: 'visible',
+  pointerEvents: 'auto',
+  visibility: 'hidden',
+  ':hover': {
+    stroke: mantine.colors.primaryColors.filledHover,
+    strokeWidth: 9,
+    transition: 'stroke 100ms ease-out, stroke-width 100ms ease-out'
+  },
   selectors: {
-    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
-      transition: 'all 150ms ease-out',
+    [`:where(${isSelected}, [data-edge-hovered='true']) &`]: {
+      visibility: 'visible',
+      transition: 'fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out',
+      transitionDelay: '50ms',
       fillOpacity: 1,
-      strokeWidth: 3
+      strokeWidth: 5
     }
   }
 })
@@ -122,12 +130,12 @@ export const cssEdgePath = style({
     [`:where([data-edge-hovered='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '350ms',
-      transition: 'all 130ms ease-out'
+      transition: 'stroke,stroke-width 130ms ease-out'
     },
     [`:where(${isSelected}, [data-edge-active='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '0ms',
-      transition: 'all 130ms ease-out'
+      transition: 'stroke,stroke-width 130ms ease-out'
     },
     [`:where([data-edge-dir='back']) &`]: {
       animationDirection: 'reverse'
@@ -154,7 +162,7 @@ export const edgeLabel = style({
   borderRadius: '3px',
   transform: varTranslate,
   vars: {
-    [varTranslate]: `translate(${fallbackVar(varLabelX, '50%')}, ${fallbackVar(varLabelY, '50%')})`
+    [varTranslate]: `translate(${fallbackVar(varLabelX, '-50%')}, ${fallbackVar(varLabelY, '-50%')})`
   },
   selectors: {
     '&[data-edge-hovered="true"]': {
@@ -162,8 +170,11 @@ export const edgeLabel = style({
       transform: `${varTranslate} scale(1.1)`
     },
     [`&:is(${dimmed})`]: {
-      transition: 'filter 800ms ease-out',
-      filter: vars.filterDimmed
+      opacity: 0.8,
+      transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
+      transitionDelay: '200ms',
+      filter: 'grayscale(0.85) blur(2px)',
+      willChange: 'opacity, filter'
     }
   }
 })

package/src/xyflow/edges/utils.ts

@@ -5,7 +5,10 @@ import type { InternalXYFlowNode } from '../types'
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
-export function getNodeIntersectionFromCenterToPoint(intersectionNode: InternalXYFlowNode, [x1, y1]: Point) {
+export function getNodeIntersectionFromCenterToPoint(
+  intersectionNode: InternalXYFlowNode,
+  { x: x1, y: y1 }: XYPosition
+) {
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
   const {
     width: intersectionNodeWidth,
@@ -30,7 +33,7 @@ export function getNodeIntersectionFromCenterToPoint(intersectionNode: InternalX
   const x = w * (xx3 + yy3) + x2
   const y = h * (-xx3 + yy3) + y2
 
-  return [x, y] as const
+  return { x, y }
 }
 
 // this helper function returns the intersection point

package/src/xyflow/hooks/useLayoutConstraints.ts

@@ -1,11 +1,13 @@
 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 { isSamePoint } from '../utils'
 import { useXYStoreApi, type XYStoreApi } from './useXYFlow'
 
 abstract class Rect {
@@ -273,8 +275,17 @@ export function useLayoutConstraints(): LayoutConstraints {
   const xyflowApi = useXYStoreApi()
   const solverRef = useRef<ReturnType<typeof createLayoutConstraints>>()
 
+  const dragStartedAt = useRef({
+    x: 0,
+    y: 0
+  })
+
   return useMemo((): LayoutConstraints => ({
-    onNodeDragStart: (_event, xynode) => {
+    onNodeDragStart: (event, xynode) => {
+      dragStartedAt.current = {
+        x: event.clientX,
+        y: event.clientY
+      }
       const { xyflow } = diagramApi.getState()
       solverRef.current = createLayoutConstraints(xyflow, xyflowApi, xynode.id)
     },
@@ -282,8 +293,11 @@ export function useLayoutConstraints(): LayoutConstraints {
       invariant(solverRef.current, 'solverRef.current should be defined')
       solverRef.current?.onNodeDrag(xynode)
     },
-    onNodeDragStop: (_event, _xynode) => {
+    onNodeDragStop: (event, _xynode) => {
+      if (!isSamePoint(dragStartedAt.current, { x: event.clientX, y: event.clientY })) {
+        diagramApi.getState().triggerSaveManualLayout(xyflowApi)
+      }
       solverRef.current = undefined
     }
-  }), [xyflowApi])
+  }), [xyflowApi, diagramApi])
 }