@likec4/diagram 1.55.0 → 1.56.0

package/dist/likec4diagram/useLayoutConstraints.js

@@ -1,442 +1,395 @@
-import { DefaultMap, nonNullable } from '@likec4/core';
-import { vector, BBox } from '@likec4/core/geometry';
-import { invariant, isome } from '@likec4/core/utils';
-import { getNodeDimensions } from '@xyflow/system';
-import { produce } from 'immer';
-import { useRef, useMemo } from 'react';
-import { pipe, filter, map, hasAtLeast, flatMap, unique, difference, clamp } from 'remeda';
-import '@xstate/react';
-import 'fast-equals';
-import { useDiagram } from '../hooks/safeContext.js';
-import { nodeToRect, bezierControlPoints } from '../utils/xyflow.js';
-import { useXYStoreApi } from '../hooks/useXYFlow.js';
-
-class Rect {
-  static LeftPadding = 42;
-  static RightPadding = 42;
-  static TopPadding = 60;
-  static BottomPadding = 42;
-  id;
-  minX = Infinity;
-  minY = Infinity;
-  maxX = -Infinity;
-  maxY = -Infinity;
-  // Initial position absolute and dimensions
-  initial;
-  get positionAbsolute() {
-    return {
-      x: this.minX,
-      y: this.minY
-    };
-  }
-  set positionAbsolute(pos) {
-    const x = Math.trunc(pos.x);
-    const y = Math.trunc(pos.y);
-    this.maxX += x - this.minX;
-    this.maxY += y - this.minY;
-    this.minX = x;
-    this.minY = y;
-  }
-  get dimensions() {
-    return {
-      width: Math.ceil(this.maxX - this.minX),
-      height: Math.ceil(this.maxY - this.minY)
-    };
-  }
-  get diff() {
-    const { x, y } = this.positionAbsolute;
-    return {
-      x: Math.trunc(x - this.initial.x),
-      y: Math.trunc(y - this.initial.y)
-    };
-  }
-  get isMoved() {
-    const diff = this.diff;
-    return diff.x !== 0 || diff.y !== 0;
-  }
-  get isResized() {
-    const dim = this.dimensions;
-    return dim.width !== this.initial.width || dim.height !== this.initial.height;
-  }
-  // Position relative to parent
-  get position() {
-    const positionAbsolute = this.positionAbsolute;
-    if (!this.parent) {
-      return positionAbsolute;
-    }
-    const parentPosition = this.parent.positionAbsolute;
-    return {
-      x: positionAbsolute.x - parentPosition.x,
-      y: positionAbsolute.y - parentPosition.y
-    };
-  }
-  constructor(xynode, parent = null) {
-    this.id = xynode.id;
-    this.positionAbsolute = !parent ? xynode.position : {
-      x: xynode.position.x + parent.minX,
-      y: xynode.position.y + parent.minY
-    };
-    const { width, height } = getNodeDimensions(xynode);
-    this.maxX = this.minX + Math.ceil(width);
-    this.maxY = this.minY + Math.ceil(height);
-    this.initial = {
-      x: this.minX,
-      y: this.minY,
-      width: Math.ceil(width),
-      height: Math.ceil(height)
-    };
-    if (parent) {
-      parent.children.push(this);
-    }
-  }
-}
-class CompoundRect extends Rect {
-  constructor(xynode, parent = null) {
-    super(xynode, parent);
-    this.parent = parent;
-  }
-  children = [];
-}
-class Leaf extends Rect {
-  constructor(xynode, parent = null) {
-    super(xynode, parent);
-    this.parent = parent;
-  }
-}
+import "../_virtual/_rolldown/runtime.js";
+import { useXYStoreApi } from "../hooks/useXYFlow.js";
+import { bezierControlPoints, nodeToRect as nodeToRect$1 } from "../utils/xyflow.js";
+import { useDiagram } from "../hooks/safeContext.js";
+import { vector as vector$1 } from "../utils/index.js";
+import { useMemo, useRef } from "react";
+import { clamp, difference, filter, flatMap, hasAtLeast, map, pipe, unique } from "remeda";
+import { DefaultMap, nonNullable } from "@likec4/core";
+import { BBox as BBox$1 } from "@likec4/core/geometry";
+import { invariant as invariant$1, isome } from "@likec4/core/utils";
+import { getNodeDimensions } from "@xyflow/system";
+import { produce } from "immer";
+//#region src/likec4diagram/useLayoutConstraints.ts
+var Rect = class {
+	static LeftPadding = 42;
+	static RightPadding = 42;
+	static TopPadding = 60;
+	static BottomPadding = 42;
+	id;
+	minX = Infinity;
+	minY = Infinity;
+	maxX = -Infinity;
+	maxY = -Infinity;
+	initial;
+	get positionAbsolute() {
+		return {
+			x: this.minX,
+			y: this.minY
+		};
+	}
+	set positionAbsolute(pos) {
+		const x = Math.trunc(pos.x);
+		const y = Math.trunc(pos.y);
+		this.maxX += x - this.minX;
+		this.maxY += y - this.minY;
+		this.minX = x;
+		this.minY = y;
+	}
+	get dimensions() {
+		return {
+			width: Math.ceil(this.maxX - this.minX),
+			height: Math.ceil(this.maxY - this.minY)
+		};
+	}
+	get diff() {
+		const { x, y } = this.positionAbsolute;
+		return {
+			x: Math.trunc(x - this.initial.x),
+			y: Math.trunc(y - this.initial.y)
+		};
+	}
+	get isMoved() {
+		const diff = this.diff;
+		return diff.x !== 0 || diff.y !== 0;
+	}
+	get isResized() {
+		const dim = this.dimensions;
+		return dim.width !== this.initial.width || dim.height !== this.initial.height;
+	}
+	get position() {
+		const positionAbsolute = this.positionAbsolute;
+		if (!this.parent) return positionAbsolute;
+		const parentPosition = this.parent.positionAbsolute;
+		return {
+			x: positionAbsolute.x - parentPosition.x,
+			y: positionAbsolute.y - parentPosition.y
+		};
+	}
+	constructor(xynode, parent = null) {
+		this.id = xynode.id;
+		this.positionAbsolute = !parent ? xynode.position : {
+			x: xynode.position.x + parent.minX,
+			y: xynode.position.y + parent.minY
+		};
+		const { width, height } = getNodeDimensions(xynode);
+		this.maxX = this.minX + Math.ceil(width);
+		this.maxY = this.minY + Math.ceil(height);
+		this.initial = {
+			x: this.minX,
+			y: this.minY,
+			width: Math.ceil(width),
+			height: Math.ceil(height)
+		};
+		if (parent) parent.children.push(this);
+	}
+};
+var CompoundRect = class extends Rect {
+	children = [];
+	constructor(xynode, parent = null) {
+		super(xynode, parent);
+		this.parent = parent;
+	}
+};
+var Leaf = class extends Rect {
+	constructor(xynode, parent = null) {
+		super(xynode, parent);
+		this.parent = parent;
+	}
+};
+/**
+* Creates a modifier function that moves edge points according to the given rectangle's diff.
+*/
 function makeEdgeModifier(edge, anchor) {
-  const controlPoints = edge.data.controlPoints ?? null;
-  return (edgeLookup) => {
-    const current = nonNullable(edgeLookup.get(edge.id), `Edge ${edge.id} not found`);
-    const { x: dx, y: dy } = anchor.diff;
-    if (dx === 0 && dy === 0) {
-      return {
-        id: edge.id,
-        type: "replace",
-        item: produce(current, (draft) => {
-          draft.data.points = edge.data.points;
-          draft.data.controlPoints = controlPoints;
-          draft.data.labelBBox = edge.data.labelBBox;
-        })
-      };
-    }
-    return {
-      id: edge.id,
-      type: "replace",
-      item: produce(current, (draft) => {
-        draft.data.points = map(edge.data.points, (pt) => [pt[0] + dx, pt[1] + dy]);
-        if (controlPoints) {
-          draft.data.controlPoints = controlPoints.map((pt) => ({
-            x: pt.x + dx,
-            y: pt.y + dy
-          }));
-        } else {
-          draft.data.controlPoints = null;
-        }
-        if (edge.data.labelBBox) {
-          draft.data.labelBBox ??= edge.data.labelBBox;
-          draft.data.labelBBox.x = edge.data.labelBBox.x + dx;
-          draft.data.labelBBox.y = edge.data.labelBBox.y + dy;
-        }
-      })
-    };
-  };
+	const controlPoints = edge.data.controlPoints ?? null;
+	return (edgeLookup) => {
+		const current = nonNullable(edgeLookup.get(edge.id), `Edge ${edge.id} not found`);
+		const { x: dx, y: dy } = anchor.diff;
+		if (dx === 0 && dy === 0) return {
+			id: edge.id,
+			type: "replace",
+			item: produce(current, (draft) => {
+				draft.data.points = edge.data.points;
+				draft.data.controlPoints = controlPoints;
+				draft.data.labelBBox = edge.data.labelBBox;
+			})
+		};
+		return {
+			id: edge.id,
+			type: "replace",
+			item: produce(current, (draft) => {
+				draft.data.points = map(edge.data.points, (pt) => [pt[0] + dx, pt[1] + dy]);
+				if (controlPoints) draft.data.controlPoints = controlPoints.map((pt) => ({
+					x: pt.x + dx,
+					y: pt.y + dy
+				}));
+				else draft.data.controlPoints = null;
+				if (edge.data.labelBBox) {
+					draft.data.labelBBox ??= edge.data.labelBBox;
+					draft.data.labelBBox.x = edge.data.labelBBox.x + dx;
+					draft.data.labelBBox.y = edge.data.labelBBox.y + dy;
+				}
+			})
+		};
+	};
 }
+/**
+* Creates a modifier function that moves edge points when one of its nodes is moved.
+*/
 function makeRelativeEdgeModifier(edge, movingRect, anchorNode, staticNode) {
-  const controlPoints = edge.data.controlPoints ?? bezierControlPoints(edge.data.points);
-  const anchorV = vector(BBox.center(anchorNode));
-  const staticV = vector(BBox.center(staticNode));
-  const staticToAnchor = anchorV.subtract(staticV);
-  const staticToAnchorLength = staticToAnchor.length();
-  return (edgeLookup) => {
-    const current = nonNullable(edgeLookup.get(edge.id), `Edge ${edge.id} not found`);
-    const { x: dx, y: dy } = movingRect.diff;
-    if (dx === 0 && dy === 0) {
-      return {
-        id: edge.id,
-        type: "replace",
-        item: produce(current, (draft) => {
-          draft.data.points = edge.data.points;
-          draft.data.controlPoints = edge.data.controlPoints;
-          draft.data.labelBBox = edge.data.labelBBox;
-        })
-      };
-    }
-    const d = vector(dx, dy);
-    const relativePoint = (pt) => {
-      const point = vector(pt);
-      const staticToP = point.subtract(staticV);
-      const projLength = staticToP.dot(staticToAnchor);
-      const coeff = clamp(projLength / staticToAnchorLength ** 2, {
-        min: -1,
-        max: 1
-      });
-      const newPoint = point.add(d.multiply(coeff)).trunc();
-      return {
-        x: newPoint.x,
-        y: newPoint.y
-      };
-    };
-    return {
-      id: edge.id,
-      type: "replace",
-      item: produce(current, (draft) => {
-        draft.data.controlPoints = controlPoints.map(relativePoint);
-        if (edge.data.labelBBox) {
-          draft.data.labelBBox ??= edge.data.labelBBox;
-          const { x, y } = relativePoint(edge.data.labelBBox);
-          draft.data.labelBBox.x = x;
-          draft.data.labelBBox.y = y;
-        }
-      })
-    };
-  };
+	const controlPoints = edge.data.controlPoints ?? bezierControlPoints(edge.data.points);
+	const anchorV = vector$1(BBox$1.center(anchorNode));
+	const staticV = vector$1(BBox$1.center(staticNode));
+	const staticToAnchor = anchorV.subtract(staticV);
+	const staticToAnchorLength = staticToAnchor.length();
+	return (edgeLookup) => {
+		const current = nonNullable(edgeLookup.get(edge.id), `Edge ${edge.id} not found`);
+		const { x: dx, y: dy } = movingRect.diff;
+		if (dx === 0 && dy === 0) return {
+			id: edge.id,
+			type: "replace",
+			item: produce(current, (draft) => {
+				draft.data.points = edge.data.points;
+				draft.data.controlPoints = edge.data.controlPoints;
+				draft.data.labelBBox = edge.data.labelBBox;
+			})
+		};
+		const d = vector$1(dx, dy);
+		const relativePoint = (pt) => {
+			const point = vector$1(pt);
+			const coeff = clamp(point.subtract(staticV).dot(staticToAnchor) / staticToAnchorLength ** 2, {
+				min: -1,
+				max: 1
+			});
+			const newPoint = point.add(d.multiply(coeff)).trunc();
+			return {
+				x: newPoint.x,
+				y: newPoint.y
+			};
+		};
+		return {
+			id: edge.id,
+			type: "replace",
+			item: produce(current, (draft) => {
+				draft.data.controlPoints = controlPoints.map(relativePoint);
+				if (edge.data.labelBBox) {
+					draft.data.labelBBox ??= edge.data.labelBBox;
+					const { x, y } = relativePoint(edge.data.labelBBox);
+					draft.data.labelBBox.x = x;
+					draft.data.labelBBox.y = y;
+				}
+			})
+		};
+	};
 }
 function createLayoutConstraints(xyflowApi, editingNodeIds) {
-  const { parentLookup, nodeLookup, edges } = xyflowApi.getState();
-  const rects = /* @__PURE__ */ new Map();
-  const ancestorsOf = new DefaultMap((nodeId) => {
-    const xynode = nodeLookup.get(nodeId);
-    let parent = xynode?.parentId;
-    if (!parent) {
-      return [];
-    }
-    return [parent, ...ancestorsOf.get(parent)];
-  });
-  const nestedOf = new DefaultMap((nodeId) => {
-    const children = parentLookup.get(nodeId);
-    if (!children || children.size === 0) {
-      return /* @__PURE__ */ new Set();
-    }
-    const nested = /* @__PURE__ */ new Set();
-    for (const child of children.values()) {
-      nested.add(child.id);
-      for (const desc of nestedOf.get(child.id)) {
-        nested.add(desc);
-      }
-    }
-    return nested;
-  });
-  if (hasAtLeast(editingNodeIds, 2)) {
-    const leafsOnly = pipe(
-      editingNodeIds,
-      flatMap((id) => [...nestedOf.get(id)]),
-      unique(),
-      (exclude) => difference(editingNodeIds, exclude)
-    );
-    invariant(hasAtLeast(leafsOnly, 1), "All editing nodes are nested within each other");
-    editingNodeIds = leafsOnly;
-  }
-  const ancestorsOfDraggingNodes = new Set(
-    editingNodeIds.flatMap((i) => ancestorsOf.get(i))
-  );
-  const traverse = [...nodeLookup.values()].flatMap(
-    (x) => !x.parentId ? { xynode: x, parent: null } : []
-  );
-  while (traverse.length > 0) {
-    const { xynode, parent } = traverse.shift();
-    const isEditing = editingNodeIds.includes(xynode.id);
-    const shouldTraverse = !isEditing && ancestorsOfDraggingNodes.has(xynode.id);
-    if (shouldTraverse) {
-      const rect = new CompoundRect(xynode, parent);
-      rects.set(xynode.id, rect);
-      parentLookup.get(xynode.id)?.forEach((child) => {
-        traverse.push({
-          xynode: child,
-          parent: rect
-        });
-      });
-      continue;
-    }
-    rects.set(xynode.id, new Leaf(xynode, parent));
-  }
-  const rectsToUpdate = [...rects.values()];
-  const edgeModifiers = /* @__PURE__ */ new Map();
-  const findMovingAncestor = (nodeId) => {
-    const r = rects.get(nodeId);
-    if (r) {
-      return r;
-    }
-    for (const parent of ancestorsOf.get(nodeId)) {
-      const rect = rects.get(parent);
-      if (rect) {
-        return rect;
-      }
-    }
-    return null;
-  };
-  const movingNodes = new Set(editingNodeIds.flatMap((id) => [id, ...nestedOf.get(id)]));
-  for (const edge of edges) {
-    const isSourceMoving = movingNodes.has(edge.source);
-    const isTargetMoving = movingNodes.has(edge.target);
-    if (!isSourceMoving && !isTargetMoving) {
-      continue;
-    }
-    if (isSourceMoving && isTargetMoving) {
-      let r = rects.get(edge.source) ?? rects.get(edge.target) ?? findMovingAncestor(edge.source) ?? findMovingAncestor(edge.target);
-      invariant(!!r, "At least one of the edge nodes should have a moving ancestor");
-      edgeModifiers.set(edge, makeEdgeModifier(edge, r));
-      continue;
-    }
-    invariant(isSourceMoving !== isTargetMoving, "Logic error");
-    const movingRect = isSourceMoving ? findMovingAncestor(edge.source) : findMovingAncestor(edge.target);
-    invariant(!!movingRect, "Moving endpoint should be found");
-    const [sourceNode, targetNode] = pipe(
-      [edge.source, edge.target],
-      map((id) => nonNullable(nodeLookup.get(id), `Node ${id} not found`)),
-      map(nodeToRect)
-    );
-    const [anchorNode, staticNode] = isSourceMoving ? [sourceNode, targetNode] : [targetNode, sourceNode];
-    edgeModifiers.set(
-      edge,
-      makeRelativeEdgeModifier(
-        edge,
-        movingRect,
-        anchorNode,
-        staticNode
-      )
-    );
-  }
-  function applyConstraints(targets) {
-    for (const r of targets) {
-      if (!(r instanceof CompoundRect)) {
-        continue;
-      }
-      applyConstraints(r.children);
-      const childrenBB = {
-        minX: Infinity,
-        minY: Infinity,
-        maxX: -Infinity,
-        maxY: -Infinity
-      };
-      for (const child of r.children) {
-        childrenBB.minX = Math.min(childrenBB.minX, child.minX);
-        childrenBB.minY = Math.min(childrenBB.minY, child.minY);
-        childrenBB.maxX = Math.max(childrenBB.maxX, child.maxX);
-        childrenBB.maxY = Math.max(childrenBB.maxY, child.maxY);
-      }
-      r.minX = childrenBB.minX - Rect.LeftPadding;
-      r.minY = childrenBB.minY - Rect.TopPadding;
-      r.maxX = childrenBB.maxX + Rect.RightPadding;
-      r.maxY = childrenBB.maxY + Rect.BottomPadding;
-    }
-  }
-  const _edgeModifiers = [...edgeModifiers.values()];
-  function syncFromXYFlow() {
-    const { nodeLookup: nodeLookup2 } = xyflowApi.getState();
-    for (const id of editingNodeIds) {
-      const rect = rects.get(id);
-      if (!rect) {
-        console.warn(`Rect not found for id ${id}`);
-        continue;
-      }
-      const node = nodeLookup2.get(id);
-      if (!node) {
-        console.warn(`Node not found for id ${id}`);
-        continue;
-      }
-      rect.positionAbsolute = node.internals.positionAbsolute;
-    }
-  }
-  function updateXYFlow() {
-    const { edgeLookup, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState();
-    applyConstraints(rectsToUpdate);
-    const nodeUpdates = [];
-    const edgeUpdates = [];
-    for (const r of rectsToUpdate) {
-      nodeUpdates.push({
-        id: r.id,
-        type: "position",
-        dragging: false,
-        position: r.position,
-        positionAbsolute: r.positionAbsolute
-      });
-      if (r instanceof CompoundRect) {
-        nodeUpdates.push({
-          id: r.id,
-          type: "dimensions",
-          setAttributes: true,
-          resizing: false,
-          dimensions: r.dimensions
-        });
-      }
-    }
-    if (nodeUpdates.length > 0) {
-      triggerNodeChanges(nodeUpdates);
-    }
-    for (const fm of _edgeModifiers) {
-      edgeUpdates.push(fm(edgeLookup));
-    }
-    if (edgeUpdates.length > 0) {
-      triggerEdgeChanges(edgeUpdates);
-    }
-  }
-  let animationFrameId = null;
-  function cancelPending() {
-    if (animationFrameId !== null) {
-      cancelAnimationFrame(animationFrameId);
-      animationFrameId = null;
-    }
-  }
-  function flushPending() {
-    cancelPending();
-    syncFromXYFlow();
-    updateXYFlow();
-  }
-  function onMove() {
-    animationFrameId ??= requestAnimationFrame(() => {
-      animationFrameId = null;
-      syncFromXYFlow();
-      updateXYFlow();
-    });
-  }
-  function hasChanges() {
-    return isome(rectsToUpdate, (r) => r.isMoved || r.isResized);
-  }
-  return {
-    rects,
-    onMove,
-    updateXYFlow,
-    hasChanges,
-    cancelPending,
-    flushPending
-  };
+	const { parentLookup, nodeLookup, edges } = xyflowApi.getState();
+	const rects = /* @__PURE__ */ new Map();
+	/** Maps node id to all its ancestors */
+	const ancestorsOf = new DefaultMap((nodeId) => {
+		let parent = nodeLookup.get(nodeId)?.parentId;
+		if (!parent) return [];
+		return [parent, ...ancestorsOf.get(parent)];
+	});
+	/** Maps node id to all its nested descendants */
+	const nestedOf = new DefaultMap((nodeId) => {
+		const children = parentLookup.get(nodeId);
+		if (!children || children.size === 0) return /* @__PURE__ */ new Set();
+		const nested = /* @__PURE__ */ new Set();
+		for (const child of children.values()) {
+			nested.add(child.id);
+			for (const desc of nestedOf.get(child.id)) nested.add(desc);
+		}
+		return nested;
+	});
+	if (hasAtLeast(editingNodeIds, 2)) {
+		const leafsOnly = pipe(editingNodeIds, flatMap((id) => [...nestedOf.get(id)]), unique(), (exclude) => difference(editingNodeIds, exclude));
+		invariant$1(hasAtLeast(leafsOnly, 1), "All editing nodes are nested within each other");
+		editingNodeIds = leafsOnly;
+	}
+	const ancestorsOfDraggingNodes = new Set(editingNodeIds.flatMap((i) => ancestorsOf.get(i)));
+	const traverse = [...nodeLookup.values()].flatMap((x) => !x.parentId ? {
+		xynode: x,
+		parent: null
+	} : []);
+	while (traverse.length > 0) {
+		const { xynode, parent } = traverse.shift();
+		if (!editingNodeIds.includes(xynode.id) && ancestorsOfDraggingNodes.has(xynode.id)) {
+			const rect = new CompoundRect(xynode, parent);
+			rects.set(xynode.id, rect);
+			parentLookup.get(xynode.id)?.forEach((child) => {
+				traverse.push({
+					xynode: child,
+					parent: rect
+				});
+			});
+			continue;
+		}
+		rects.set(xynode.id, new Leaf(xynode, parent));
+	}
+	const rectsToUpdate = [...rects.values()];
+	/**
+	* Edges that need to be updated because both source and target are moved
+	* - source and target are inside a compound node that is moved
+	* - source and target are selected and moved
+	*/
+	const edgeModifiers = /* @__PURE__ */ new Map();
+	const findMovingAncestor = (nodeId) => {
+		const r = rects.get(nodeId);
+		if (r) return r;
+		for (const parent of ancestorsOf.get(nodeId)) {
+			const rect = rects.get(parent);
+			if (rect) return rect;
+		}
+		return null;
+	};
+	const movingNodes = new Set(editingNodeIds.flatMap((id) => [id, ...nestedOf.get(id)]));
+	for (const edge of edges) {
+		const isSourceMoving = movingNodes.has(edge.source);
+		const isTargetMoving = movingNodes.has(edge.target);
+		if (!isSourceMoving && !isTargetMoving) continue;
+		if (isSourceMoving && isTargetMoving) {
+			let r = rects.get(edge.source) ?? rects.get(edge.target) ?? findMovingAncestor(edge.source) ?? findMovingAncestor(edge.target);
+			invariant$1(!!r, "At least one of the edge nodes should have a moving ancestor");
+			edgeModifiers.set(edge, makeEdgeModifier(edge, r));
+			continue;
+		}
+		invariant$1(isSourceMoving !== isTargetMoving, "Logic error");
+		const movingRect = isSourceMoving ? findMovingAncestor(edge.source) : findMovingAncestor(edge.target);
+		invariant$1(!!movingRect, "Moving endpoint should be found");
+		const [sourceNode, targetNode] = pipe([edge.source, edge.target], map((id) => nonNullable(nodeLookup.get(id), `Node ${id} not found`)), map(nodeToRect$1));
+		const [anchorNode, staticNode] = isSourceMoving ? [sourceNode, targetNode] : [targetNode, sourceNode];
+		edgeModifiers.set(edge, makeRelativeEdgeModifier(edge, movingRect, anchorNode, staticNode));
+	}
+	function applyConstraints(targets) {
+		for (const r of targets) {
+			if (!(r instanceof CompoundRect)) continue;
+			applyConstraints(r.children);
+			const childrenBB = {
+				minX: Infinity,
+				minY: Infinity,
+				maxX: -Infinity,
+				maxY: -Infinity
+			};
+			for (const child of r.children) {
+				childrenBB.minX = Math.min(childrenBB.minX, child.minX);
+				childrenBB.minY = Math.min(childrenBB.minY, child.minY);
+				childrenBB.maxX = Math.max(childrenBB.maxX, child.maxX);
+				childrenBB.maxY = Math.max(childrenBB.maxY, child.maxY);
+			}
+			r.minX = childrenBB.minX - Rect.LeftPadding;
+			r.minY = childrenBB.minY - Rect.TopPadding;
+			r.maxX = childrenBB.maxX + Rect.RightPadding;
+			r.maxY = childrenBB.maxY + Rect.BottomPadding;
+		}
+	}
+	const _edgeModifiers = [...edgeModifiers.values()];
+	/**
+	* Read current node positions from XYFlow internal state into rects.
+	* Only needed for drag operations where XYFlow already has the updated positions.
+	*/
+	function syncFromXYFlow() {
+		const { nodeLookup } = xyflowApi.getState();
+		for (const id of editingNodeIds) {
+			const rect = rects.get(id);
+			if (!rect) {
+				console.warn(`Rect not found for id ${id}`);
+				continue;
+			}
+			const node = nodeLookup.get(id);
+			if (!node) {
+				console.warn(`Node not found for id ${id}`);
+				continue;
+			}
+			rect.positionAbsolute = node.internals.positionAbsolute;
+		}
+	}
+	function updateXYFlow() {
+		const { edgeLookup, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState();
+		applyConstraints(rectsToUpdate);
+		const nodeUpdates = [];
+		const edgeUpdates = [];
+		for (const r of rectsToUpdate) {
+			nodeUpdates.push({
+				id: r.id,
+				type: "position",
+				dragging: false,
+				position: r.position,
+				positionAbsolute: r.positionAbsolute
+			});
+			if (r instanceof CompoundRect) nodeUpdates.push({
+				id: r.id,
+				type: "dimensions",
+				setAttributes: true,
+				resizing: false,
+				dimensions: r.dimensions
+			});
+		}
+		if (nodeUpdates.length > 0) triggerNodeChanges(nodeUpdates);
+		for (const fm of _edgeModifiers) edgeUpdates.push(fm(edgeLookup));
+		if (edgeUpdates.length > 0) triggerEdgeChanges(edgeUpdates);
+	}
+	let animationFrameId = null;
+	function cancelPending() {
+		if (animationFrameId !== null) {
+			cancelAnimationFrame(animationFrameId);
+			animationFrameId = null;
+		}
+	}
+	function flushPending() {
+		cancelPending();
+		syncFromXYFlow();
+		updateXYFlow();
+	}
+	function onMove() {
+		animationFrameId ??= requestAnimationFrame(() => {
+			animationFrameId = null;
+			syncFromXYFlow();
+			updateXYFlow();
+		});
+	}
+	function hasChanges() {
+		return isome(rectsToUpdate, (r) => r.isMoved || r.isResized);
+	}
+	return {
+		rects,
+		onMove,
+		updateXYFlow,
+		hasChanges,
+		cancelPending,
+		flushPending
+	};
 }
+/**
+* Keeps the layout constraints (parent nodes and children) when dragging a node
+*/
 function useLayoutConstraints() {
-  const xystore = useXYStoreApi();
-  const diagram = useDiagram();
-  const solverRef = useRef(void 0);
-  return useMemo(() => {
-    return {
-      onNodeDragStart: (_event, xynode) => {
-        const { nodeLookup } = xystore.getState();
-        const draggingNodes = pipe(
-          Array.from(nodeLookup.values()),
-          filter((n) => n.dragging === true || n.id === xynode.id || n.selected === true),
-          map((n) => n.id)
-        );
-        if (hasAtLeast(draggingNodes, 1)) {
-          diagram.startEditing("node");
-          solverRef.current = createLayoutConstraints(xystore, draggingNodes);
-        }
-      },
-      onNodeDrag: (_event) => {
-        solverRef.current?.onMove();
-      },
-      onNodeDragStop: (_event) => {
-        if (!solverRef.current) {
-          return;
-        }
-        const hasChanges = solverRef.current.hasChanges();
-        if (hasChanges) {
-          solverRef.current.flushPending();
-        } else {
-          solverRef.current.cancelPending();
-        }
-        diagram.stopEditing(hasChanges);
-        solverRef.current = void 0;
-      }
-    };
-  }, [xystore, diagram]);
+	const xystore = useXYStoreApi();
+	const diagram = useDiagram();
+	const solverRef = useRef(void 0);
+	return useMemo(() => {
+		return {
+			onNodeDragStart: (_event, xynode) => {
+				const { nodeLookup } = xystore.getState();
+				const draggingNodes = pipe(Array.from(nodeLookup.values()), filter((n) => n.dragging === true || n.id === xynode.id || n.selected === true), map((n) => n.id));
+				if (hasAtLeast(draggingNodes, 1)) {
+					diagram.startEditing("node");
+					solverRef.current = createLayoutConstraints(xystore, draggingNodes);
+				}
+			},
+			onNodeDrag: (_event) => {
+				solverRef.current?.onMove();
+			},
+			onNodeDragStop: (_event) => {
+				if (!solverRef.current) return;
+				const hasChanges = solverRef.current.hasChanges();
+				if (hasChanges) solverRef.current.flushPending();
+				else solverRef.current.cancelPending();
+				diagram.stopEditing(hasChanges);
+				solverRef.current = void 0;
+			}
+		};
+	}, [xystore, diagram]);
 }
-
+//#endregion
 export { createLayoutConstraints, useLayoutConstraints };