@likec4/diagram 1.6.1 → 1.7.0

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -7,18 +7,18 @@ import {
   type RelationshipArrowType
 } from '@likec4/core'
 import { Box } from '@mantine/core'
-import { useIsomorphicLayoutEffect } from '@react-hookz/web'
+import { useDebouncedEffect } from '@react-hookz/web'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type { EdgeProps, XYPosition } from '@xyflow/react'
 import { EdgeLabelRenderer } from '@xyflow/react'
 import clsx from 'clsx'
 import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { deepEqual, deepEqual as eq } from 'fast-equals'
-import { memo, type PointerEvent as ReactPointerEvent, useRef, useState } from 'react'
+import { memo, type PointerEvent as ReactPointerEvent, useEffect, useRef, useState } from 'react'
 import { first, hasAtLeast, isArray, isTruthy, last } from 'remeda'
 import { useDiagramState, useDiagramStoreApi } from '../../state/useDiagramStore'
 import { ZIndexes } from '../const'
-import { EdgeMarkers } from '../EdgeMarkers'
+import { EdgeMarkers, type EdgeMarkerType } from '../EdgeMarkers'
 import { useXYStoreApi } from '../hooks/useXYFlow'
 import { type RelationshipData, type XYFlowEdge } from '../types'
 import { bezierControlPoints } from '../utils'
@@ -56,7 +56,7 @@ import { getNodeIntersectionFromCenterToPoint } from './utils'
 //   return path + segment
 // }
 
-const toMarker = (arrowType?: RelationshipArrowType) => {
+const toMarker = (arrowType?: RelationshipArrowType): EdgeMarkerType | undefined => {
   if (!arrowType || arrowType === 'none') {
     return undefined
   }
@@ -124,6 +124,7 @@ const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>)
   && isSame(prev.targetX, next.targetX)
   && isSame(prev.targetY, next.targetY)
   && eq(prev.data.stepNum, next.data.stepNum)
+  && eq(prev.data.label, next.data.label)
   && sameControlPoints(prev.data.controlPoints, next.data.controlPoints)
   && eq(prev.data.edge, next.data.edge)
 )
@@ -149,8 +150,7 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   const [isControlPointDragging, setIsControlPointDragging] = useState(false)
   const diagramStore = useDiagramStoreApi()
   const xyflowStore = useXYStoreApi()
-  const { isActive, isEditable, isEdgePathEditable, isHovered, isDimmed } = useDiagramState(s => ({
-    isEditable: s.readonly !== true,
+  const { isActive, isEdgePathEditable, isHovered, isDimmed } = useDiagramState(s => ({
     isEdgePathEditable: s.readonly !== true && s.experimentalEdgeEditing === true,
     isActive: s.focusedNodeId === source || s.focusedNodeId === target
       || (s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum),
@@ -161,10 +161,9 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   const sourceNode = nonNullable(nodeLookup.get(source)!, `source node ${source} not found`)
   const targetNode = nonNullable(nodeLookup.get(target)!, `target node ${target} not found`)
 
-  const isModified = isEditable && (0
-    || isTruthy(data.controlPoints)
+  const isModified = isTruthy(data.controlPoints)
     || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.element.position)
-    || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.element.position))
+    || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.element.position)
 
   const {
     label,
@@ -172,6 +171,7 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
       points: diagramEdgePoints,
       line = 'dashed',
       color = 'gray',
+      labelBBox,
       ...diagramEdge
     }
   } = data
@@ -189,12 +189,12 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     strokeDasharray = '8,10'
   }
 
-  let labelX = label?.bbox.x ?? 0,
-    labelY = label?.bbox.y ?? 0
+  let labelX = labelBBox?.x ?? 0,
+    labelY = labelBBox?.y ?? 0
 
   const [labelPos, setLabelPosition] = useState<XYPosition>({
-    x: labelX,
-    y: labelY
+    x: label?.bbox.x ?? labelX,
+    y: label?.bbox.y ?? labelY
   })
 
   let edgePath: string
@@ -224,16 +224,10 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     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]}`
-    // }
   }
 
   const svgPathRef = useRef<SVGPathElement>(null)
-  useIsomorphicLayoutEffect(() => {
+  useEffect(() => {
     const path = svgPathRef.current
     if (!path) return
     const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5)
@@ -244,6 +238,26 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     setLabelPosition(current => isSamePoint(current, point) ? current : point)
   }, [edgePath])
 
+  useDebouncedEffect(
+    () => {
+      if (!label || label.bbox.x === labelPos.x && label.bbox.y === labelPos.y) {
+        return
+      }
+      diagramStore.getState().xyflow.updateEdgeData(id, {
+        label: {
+          ...label,
+          bbox: {
+            ...label.bbox,
+            ...labelPos
+          }
+        }
+      })
+    },
+    [labelPos],
+    100,
+    300
+  )
+
   const onControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>) => {
     const { domNode } = xyflowStore.getState()
     if (!domNode || e.pointerType !== 'mouse') {
@@ -263,15 +277,13 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     if (e.button !== 0) {
       return
     }
+    const wasCanceled = diagramStore.getState().cancelSaveManualLayout()
     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()
-        }
         hasMoved = true
         pointer = { x: e.clientX, y: e.clientY }
         const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false })
@@ -284,12 +296,12 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
       }
     }
     const onPointerUp = () => {
-      setIsControlPointDragging(false)
       domNode.removeEventListener('pointermove', onPointerMove)
       domNode.removeEventListener('pointerup', onPointerUp)
-      if (hasMoved) {
-        diagramStore.getState().triggerSaveManualLayout()
+      if (hasMoved || wasCanceled) {
+        diagramStore.getState().scheduleSaveManualLayout()
       }
+      setIsControlPointDragging(false)
     }
     domNode.addEventListener('pointermove', onPointerMove)
     domNode.addEventListener('pointerup', onPointerUp, { once: true })
@@ -304,13 +316,15 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null
   const MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null
 
+  const labelZIndex = 1 + (isHovered ? ZIndexes.Element : (edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge))
+
   return (
     <g
-      className={clsx([
+      className={clsx(
         edgesCss.container,
         isDimmed && edgesCss.dimmed,
         isControlPointDragging && edgesCss.controlDragging
-      ])}
+      )}
       data-likec4-color={color}
       data-edge-dir={diagramEdge.dir}
       data-edge-active={isActive}
@@ -375,7 +389,7 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
             selected: selected ?? false,
             stepNum: data.stepNum,
             label: data.label,
-            zIndex: (edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge) + 1,
+            zIndex: labelZIndex,
             isHovered,
             isActive,
             isStepEdge

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

@@ -97,7 +97,7 @@ export const controlPoint = style({
   stroke: xyvars.edge.stroke,
   fillOpacity: 0.75,
   strokeWidth: 1,
-  cursor: 'default',
+  cursor: 'grab',
   pointerEvents: 'auto',
   visibility: 'hidden',
   ':hover': {
@@ -117,11 +117,11 @@ export const controlPoint = style({
 })
 
 export const controlDragging = style({
-  cursor: 'grab'
+  cursor: 'grabbing'
 })
 
 globalStyle(`${controlDragging} *`, {
-  cursor: 'grab'
+  cursor: 'grabbing !important'
 })
 
 const strokeKeyframes = keyframes({

package/src/xyflow/edges/utils.ts

@@ -1,4 +1,3 @@
-import type { Point } from '@likec4/core'
 import { Position, type XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import type { InternalXYFlowNode } from '../types'

package/src/xyflow/hooks/index.ts

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

package/src/xyflow/hooks/useLayoutConstraints.ts

@@ -1,13 +1,12 @@
 import { invariant, isAncestor, nonNullable } from '@likec4/core'
 import { Expression, Expression as Expr, Operator, Solver, Strength, Variable } from '@lume/kiwi'
-import type { InternalNode, ReactFlowProps, XYPosition } from '@xyflow/react'
+import type { InternalNode, NodeChange, ReactFlowProps, XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { useMemo, useRef } from 'react'
 import { isNullish } from 'remeda'
 import { useDiagramStoreApi } from '../../state/useDiagramStore'
-import type { XYFlowInstance, XYFlowNode } from '../types'
-import { isSamePoint } from '../utils'
-import { useXYStoreApi, type XYStoreApi } from './useXYFlow'
+import type { XYFlowNode } from '../types'
+import { type XYStoreApi } from './useXYFlow'
 
 abstract class Rect {
   id!: string
@@ -81,28 +80,28 @@ class Compound extends Rect {
     )
     const { weak } = Strength
     this.solver.createConstraint(leftPadding, Operator.Ge, 40)
-    this.solver.createConstraint(leftPadding, Operator.Eq, 40, weak)
+    this.solver.createConstraint(leftPadding, Operator.Eq, 41, weak)
 
     const topPadding = new Expr(
       rect.minY,
       [-1, this.minY]
     )
-    this.solver.createConstraint(topPadding, Operator.Ge, 60)
-    this.solver.createConstraint(topPadding, Operator.Eq, 60, weak)
+    this.solver.createConstraint(topPadding, Operator.Ge, 54)
+    this.solver.createConstraint(topPadding, Operator.Eq, 55, weak)
 
     const rightPadding = new Expr(
       this.maxX,
       [-1, rect.maxX]
     )
     this.solver.createConstraint(rightPadding, Operator.Ge, 40)
-    this.solver.createConstraint(rightPadding, Operator.Eq, 40, weak)
+    this.solver.createConstraint(rightPadding, Operator.Eq, 41, weak)
 
     const bottomPadding = new Expr(
       this.maxY,
       [-1, rect.maxY]
     )
     this.solver.createConstraint(bottomPadding, Operator.Ge, 40)
-    this.solver.createConstraint(bottomPadding, Operator.Eq, 40, weak)
+    this.solver.createConstraint(bottomPadding, Operator.Eq, 41, weak)
   }
 }
 
@@ -164,7 +163,6 @@ class Leaf extends Rect {
 }
 
 function createLayoutConstraints(
-  xyflow: XYFlowInstance,
   xyflowApi: XYStoreApi,
   draggingNodeId: string
 ) {
@@ -206,40 +204,29 @@ function createLayoutConstraints(
   solver.updateVariables()
   solver.maxIterations = 1000
 
+  const rectsToUpdate = [...rects.values()].filter(r => r.id !== draggingNodeId)
+
   function updateXYFlowNodes() {
     solver.updateVariables()
-
-    xyflow.setNodes(nodes =>
-      nodes.map((n) => {
-        if (n.id === draggingNodeId || n.dragging === true) {
-          return n
-        }
-        const rect = rects.get(n.id)
-        if (!rect) {
-          return n
-        }
-        const dimensions = rect.dimensions
-        const newXY = rect.position
-
-        if (newXY.x !== n.position.x || newXY.y !== n.position.y) {
-          return {
-            ...n,
-            position: rect.position,
-            width: dimensions.width,
-            height: dimensions.height,
-            measured: dimensions
-          }
-        }
-        if (dimensions.width !== n.width || dimensions.height !== n.height) {
-          return {
-            ...n,
-            width: dimensions.width,
-            height: dimensions.height,
-            measured: dimensions
-          }
+    xyflowApi.getState().triggerNodeChanges(
+      rectsToUpdate.reduce((acc, r) => {
+        acc.push({
+          id: r.id,
+          type: 'position',
+          dragging: false,
+          position: r.position,
+          positionAbsolute: r.positionAbsolute
+        })
+        if (r instanceof Compound) {
+          acc.push({
+            id: r.id,
+            type: 'dimensions',
+            setAttributes: true,
+            dimensions: r.dimensions
+          })
         }
-        return n
-      })
+        return acc
+      }, [] as NodeChange<XYFlowNode>[])
     )
   }
 
@@ -249,13 +236,16 @@ function createLayoutConstraints(
    * Move the editing node to the given position.
    */
   function onNodeDrag(xynode: XYFlowNode) {
-    const pos = nodeLookup.get(xynode.id)!.internals.positionAbsolute
-    const rect = nonNullable(rects.get(xynode.id))
-    solver.suggestValue(rect.minX, Math.ceil(pos.x))
-    solver.suggestValue(rect.minY, Math.ceil(pos.y))
+    if (rectsToUpdate.length === 0) {
+      return
+    }
     animationFrameId ??= requestAnimationFrame(() => {
-      updateXYFlowNodes()
       animationFrameId = null
+      const pos = nodeLookup.get(xynode.id)!.internals.positionAbsolute
+      const rect = nonNullable(rects.get(xynode.id))
+      solver.suggestValue(rect.minX, Math.ceil(pos.x))
+      solver.suggestValue(rect.minY, Math.ceil(pos.y))
+      updateXYFlowNodes()
     })
   }
 
@@ -271,33 +261,20 @@ type LayoutConstraints = Required<Pick<ReactFlowProps<XYFlowNode>, 'onNodeDragSt
  */
 export function useLayoutConstraints(): LayoutConstraints {
   const diagramApi = useDiagramStoreApi()
-  const xyflowApi = useXYStoreApi()
   const solverRef = useRef<ReturnType<typeof createLayoutConstraints>>()
-
-  const dragStartedAt = useRef({
-    x: 0,
-    y: 0
-  })
-
   return useMemo((): LayoutConstraints => ({
-    onNodeDragStart: (event, xynode) => {
-      dragStartedAt.current = {
-        x: event.clientX,
-        y: event.clientY
-      }
-      const { xyflow, cancelSaveManualLayout } = diagramApi.getState()
+    onNodeDragStart: (_event, xynode) => {
+      const { cancelSaveManualLayout, xystore } = diagramApi.getState()
       cancelSaveManualLayout()
-      solverRef.current = createLayoutConstraints(xyflow, xyflowApi, xynode.id)
+      solverRef.current = createLayoutConstraints(xystore, xynode.id)
     },
     onNodeDrag: (_event, xynode) => {
       invariant(solverRef.current, 'solverRef.current should be defined')
       solverRef.current?.onNodeDrag(xynode)
     },
-    onNodeDragStop: (event, _xynode) => {
-      if (!isSamePoint(dragStartedAt.current, { x: event.clientX, y: event.clientY })) {
-        diagramApi.getState().triggerSaveManualLayout()
-      }
+    onNodeDragStop: (_event, _xynode) => {
+      diagramApi.getState().scheduleSaveManualLayout()
       solverRef.current = undefined
     }
-  }), [xyflowApi, diagramApi])
+  }), [diagramApi])
 }

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -96,10 +96,6 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     isHovercards: s.showElementLinks,
     hasOnNavigateTo: !!s.onNavigateTo
   }))
-  // const diagramState = useDiagramState()
-  // const isNodeInteractive = diagramState.isNodeInteractive
-  // const isHovercards = diagramState.disableHovercards !== true
-  // const isNavigable = diagramState.hasOnNavigateTo && !!element.navigateTo
   const isNavigable = hasOnNavigateTo && !!element.navigateTo
 
   const w = toDomPrecision(width ?? element.width)

package/src/xyflow/nodes/element/element.css.ts

@@ -197,14 +197,15 @@ export const elementDataContainer = style({
       paddingTop: 32,
       paddingBottom: 28
     },
-    [`&:is(${hasIcon})`]: {
-      paddingRight: 20
-    },
+    // [`&:is(${hasIcon})`]: {
+    //   paddingLeft: 40,
+    //   paddingRight: 20
+    // },
     [`${container}:not(:is([data-likec4-shape="queue"],[data-likec4-shape="mobile"])) &:is(${hasIcon})`]: {
-      paddingLeft: 20
+      paddingLeft: 24,
+      paddingRight: 18
     },
     [`&:has(${description}, ${technology})`]: {
-      alignItems: 'flex-start',
       gap: rem(16),
       vars: {
         [iconSize]: '60px'
@@ -247,7 +248,8 @@ export const elementIcon = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  mixBlendMode: 'hard-light'
+  mixBlendMode: 'hard-light',
+  alignSelf: 'flex-start'
 })
 globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
   width: '100%',

package/src/xyflow/types.ts

@@ -1,4 +1,4 @@
-import type { BBox, DiagramEdge, DiagramNode, Fqn, XYPosition } from '@likec4/core'
+import type { BBox, DiagramEdge, DiagramNode, Fqn, XYPoint } from '@likec4/core'
 import type {
   Edge,
   EdgeMouseHandler,
@@ -13,38 +13,23 @@ import type {
 import { isNode } from '@xyflow/react'
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import { isTruthy } from 'remeda'
-import type { SetReadonly, SetRequired } from 'type-fest'
+import type { Simplify } from 'type-fest'
 
-export type ElementNodeData = {
+export type ElementXYFlowNode = Node<{
   fqn: Fqn
   element: DiagramNode
-}
-
-type TypedXYFlowNode<D extends Record<string, unknown>, T extends string> = SetReadonly<
-  SetRequired<Node<D, T>, 'type'>,
-  'id' | 'type'
->
-type TypedXYFlowEdge<D extends Record<string, unknown>, T extends string> = SetReadonly<
-  SetRequired<Edge<D, T>, 'type' | 'data'>,
-  'id' | 'type'
->
-
-export type ElementXYFlowNode = TypedXYFlowNode<ElementNodeData, 'element'>
+}, 'element'>
 
-export type CompoundNodeData = {
+export type CompoundXYFlowNode = Node<{
   fqn: Fqn
   element: DiagramNode
-}
-
-export type CompoundXYFlowNode = TypedXYFlowNode<CompoundNodeData, 'compound'>
+}, 'compound'>
 
 export type XYFlowNode = ElementXYFlowNode | CompoundXYFlowNode
 
 export type InternalXYFlowNode = InternalNode<XYFlowNode>
 
 export namespace XYFlowNode {
-  export type Data = ElementNodeData | CompoundNodeData
-
   export function isCompound(node: unknown): node is CompoundXYFlowNode {
     return isNode(node) && node.type === 'compound'
   }
@@ -57,12 +42,8 @@ export namespace XYFlowNode {
 
 export type RelationshipData = {
   edge: DiagramEdge
-  // to replace edges on view change
-  // viewId: ViewID
   // if set - edge was changed by user
-  controlPoints: XYPosition[] | null
-  type: 'bezier' | 'poly'
-  // if dynamic view
+  controlPoints: XYPoint[] | null
   stepNum: number | null
   label: null | {
     bbox: BBox
@@ -70,7 +51,13 @@ export type RelationshipData = {
   }
 }
 
-export type RelationshipEdge = TypedXYFlowEdge<RelationshipData, 'relationship'>
+export type RelationshipEdge = Simplify<
+  Edge<RelationshipData, 'relationship'> & {
+    type: 'relationship'
+    // Make field required
+    data: RelationshipData
+  }
+>
 
 export type XYFlowEdge = RelationshipEdge
 
@@ -83,11 +70,6 @@ export namespace XYFlowEdge {
 export type XYFlowInstance = ReactFlowInstance<XYFlowNode, XYFlowEdge>
 export type XYFlowState = ReactFlowState<XYFlowNode, XYFlowEdge>
 
-export type XYFlowData = {
-  nodes: XYFlowNode[]
-  edges: XYFlowEdge[]
-}
-
 export type XYFlowEventHandlers = {
   onPanelClick: (event: ReactMouseEvent) => void
   onNodeContextMenu: NodeMouseHandler<XYFlowNode>

package/src/xyflow/utils.ts

@@ -55,3 +55,7 @@ export function isSamePoint(a: XYPosition | Point, b: XYPosition | Point) {
   const [bx, by] = isArray(b) ? b : [b.x, b.y]
   return isClose(ax, bx) && isClose(ay, by)
 }
+
+export function distanceBetweenPoints(a: XYPosition, b: XYPosition) {
+  return Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2))
+}

package/dist/xyflow/SyncWithDiagram.d.ts

@@ -1,4 +0,0 @@
-/**
- * Syncs the diagram state with the XYFlow instance
- */
-export declare function SyncWithDiagram(): null;

package/dist/xyflow/diagram-to-xyflow.d.ts

@@ -1,7 +0,0 @@
-import { DiagramView } from '@likec4/core/types';
-import { XYFlowData } from '../xyflow/types';
-
-export declare function diagramViewToXYFlowData(view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__' | 'manualLayout'>, opts: {
-    draggable: boolean;
-    selectable: boolean;
-}): XYFlowData;

package/src/xyflow/SyncWithDiagram.tsx

@@ -1,85 +0,0 @@
-import { deepEqual as eq } from 'fast-equals'
-
-import { useEffect } from 'react'
-import { omit } from 'remeda'
-import { useDiagramState, useDiagramStoreApi } from '../state/useDiagramStore'
-import { diagramViewToXYFlowData } from './diagram-to-xyflow'
-
-/**
- * Syncs the diagram state with the XYFlow instance
- */
-export function SyncWithDiagram() {
-  const xyflowSynced = useDiagramState(s => s.xyflowSynced)
-  const diagramStoreApi = useDiagramStoreApi()
-
-  useEffect(() => {
-    if (xyflowSynced) {
-      return
-    }
-    const {
-      view,
-      nodesDraggable,
-      nodesSelectable,
-      focusedNodeId,
-      xystore
-    } = diagramStoreApi.getState()
-    const updates = diagramViewToXYFlowData(view, {
-      draggable: nodesDraggable,
-      selectable: nodesSelectable || focusedNodeId !== null
-    })
-
-    const {
-      nodeLookup,
-      edgeLookup,
-      setNodes,
-      setEdges
-    } = xystore.getState()
-
-    setNodes(updates.nodes.map(update => {
-      const existing = nodeLookup.get(update.id)?.internals.userNode
-      if (existing && existing.type === update.type && eq(existing.parentId, update.parentId)) {
-        if (eq(existing.data.element, update.data.element)) {
-          return existing
-        }
-        return {
-          ...existing,
-          ...update
-        }
-      }
-      return update
-    }))
-
-    setEdges(updates.edges.map(update => {
-      const existing = edgeLookup.get(update.id)
-      if (existing) {
-        if (
-          eq(existing.data.controlPoints, update.data.controlPoints)
-          && eq(existing.markerStart, update.markerStart)
-          && eq(existing.markerEnd, update.markerEnd)
-          && eq(existing.data.edge, update.data.edge)
-        ) {
-          return existing
-        }
-        return {
-          ...omit(existing, ['data', 'markerStart', 'markerEnd']),
-          ...update,
-          data: {
-            ...existing.data,
-            ...update.data
-          }
-        }
-      }
-      return update
-    }))
-
-    diagramStoreApi.setState(
-      {
-        xyflowSynced: true
-      },
-      false,
-      'xyflowSynced'
-    )
-  }, [xyflowSynced, diagramStoreApi])
-
-  return null
-}