@likec4/diagram 1.43.0 → 1.45.0

package/dist/likec4diagram/state/utils.js

@@ -1,14 +1,18 @@
 import { BBox } from '@likec4/core/types';
-import { nonNullable } from '@likec4/core/utils';
-import { getNodesBounds, getNodeDimensions, getEdgePosition } from '@xyflow/system';
+import { nonNullable, nonexhaustive } from '@likec4/core/utils';
+import { getViewportForBounds, getNodesBounds, getNodeDimensions, getEdgePosition } from '@xyflow/system';
+import { MinZoom } from '../../base/const.js';
 
 function typedSystem(system) {
   return {
+    get syncLayoutActorRef() {
+      return system.get("syncLayout") ?? null;
+    },
     get overlaysActorRef() {
       return system.get("overlays") ?? null;
     },
     get diagramActorRef() {
-      return system.get("diagram") ?? null;
+      return nonNullable(system.get("diagram"), "Diagram actor not found");
     },
     get searchActorRef() {
       return system.get("search") ?? null;
@@ -121,5 +125,44 @@ function getEdgeBounds(edge, store) {
     [edgePosition.targetX, edgePosition.targetY]
   ]);
 }
+function nodeRef(node) {
+  switch (node.type) {
+    case "element":
+    case "compound-element":
+    case "seq-actor":
+      return node.data.modelFqn;
+    case "deployment":
+    case "compound-deployment":
+      return node.data.modelFqn ?? node.data.deploymentFqn;
+    case "seq-parallel":
+    case "view-group":
+      return null;
+    default:
+      nonexhaustive(node);
+  }
+}
+function findCorrespondingNode(context, event) {
+  const fromNodeId = context.lastOnNavigate?.fromNode;
+  const fromNode = fromNodeId && context.xynodes.find((n) => n.id === fromNodeId);
+  const fromRef = fromNode && nodeRef(fromNode);
+  const toNode = fromRef && event.xynodes.find((n) => nodeRef(n) === fromRef);
+  return { fromNode, toNode };
+}
+function calcViewportForBounds(context, bounds) {
+  let currentZoom = context.xyflow.getZoom();
+  let {
+    width,
+    height
+  } = context.xystore.getState();
+  const maxZoom = Math.max(currentZoom, 1);
+  return getViewportForBounds(
+    bounds,
+    width,
+    height,
+    MinZoom,
+    maxZoom,
+    context.fitViewPadding
+  );
+}
 
-export { activeSequenceBounds, findDiagramEdge, findDiagramNode, focusedBounds, typedSystem };
+export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, focusedBounds, nodeRef, typedSystem };

package/dist/likec4diagram/types.d.ts

@@ -1,18 +1,17 @@
-import { BBox, DeploymentFqn, DiagramEdge, DiagramNode, ExclusiveUnion, Fqn, IconUrl, RichTextOrEmpty, ViewId } from '@likec4/core/types';
+import { BBox, DeploymentFqn, DiagramEdge, DiagramNode, DiagramNodeDriftReason, ExclusiveUnion, Fqn, IconUrl, MarkdownOrString, NonEmptyReadonlyArray, ViewId } from '@likec4/core/types';
 import { XYPosition } from '@xyflow/system';
 import { FunctionComponent } from 'react';
 import { Simplify } from 'type-fest';
 import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from '../base/types';
 export declare namespace Types {
-    type LeafNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'x' | 'y'>> & {
-        technology: string | null;
-        description: RichTextOrEmpty;
+    type LeafNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'x' | 'y'>> & {
         /**
          * View this node belongs to
          */
         viewId: ViewId;
         isMultiple?: boolean | undefined;
         icon: string | null;
+        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     /**
      * Represents element from logical model
@@ -57,6 +56,7 @@ export declare namespace Types {
         viewId: ViewId;
         depth: number;
         icon?: IconUrl;
+        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     type CompoundElementNodeData = Simplify<CompoundNodeData & {
         modelFqn: Fqn;
@@ -102,13 +102,13 @@ export declare namespace Types {
         type: Type;
     }>;
     type NodeProps<Type extends NodeType = NodeType> = BaseNodeProps<Node<Type>>;
-    type RelationshipEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath'>> & {
-        notes: RichTextOrEmpty;
+    type RelationshipEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath' | 'drifts'>> & {
+        notes: MarkdownOrString | null;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
     }>;
-    type SequenceStepEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath'>> & {
-        notes: RichTextOrEmpty;
+    type SequenceStepEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath' | 'drifts'>> & {
+        notes: MarkdownOrString | null;
         labelXY: XYPosition | null;
         labelBBox: BBox;
         controlPoints: XYPosition[] | undefined | null;

package/dist/likec4diagram/ui/LayoutDriftFrame.d.ts

@@ -0,0 +1,2 @@
+import { MemoExoticComponent } from 'react';
+export declare const LayoutDriftFrame: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/likec4diagram/ui/LayoutDriftFrame.js

@@ -0,0 +1,66 @@
+import { jsx } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
+import { hstack } from '@likec4/styles/patterns';
+import { UnstyledButton } from '@mantine/core';
+import { memo } from 'react';
+import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js';
+
+const LayoutDriftFrame = memo(() => {
+  const [{ layout, isActive }, { toggleCompare }] = useDiagramCompareLayout();
+  const bgColor = layout === "manual" ? "var(--mantine-color-orange-6)" : "var(--mantine-color-green-6)";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: hstack({
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "full",
+        height: "full",
+        border: `default`,
+        borderWidth: 4,
+        pointerEvents: "none",
+        alignItems: "flex-start",
+        justifyContent: "center"
+      }),
+      style: {
+        zIndex: "9999",
+        display: !isActive ? "none" : void 0,
+        borderColor: bgColor
+      },
+      children: /* @__PURE__ */ jsx(
+        Btn,
+        {
+          style: {
+            backgroundColor: bgColor
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            toggleCompare();
+          },
+          children: "Close compare"
+        }
+      )
+    }
+  );
+});
+const Btn = UnstyledButton.withProps({
+  className: css({
+    fontSize: "xs",
+    fontWeight: "medium",
+    py: "1.5",
+    lineHeight: "1",
+    borderBottomLeftRadius: "sm",
+    borderBottomRightRadius: "sm",
+    transform: "translateY(-4px)",
+    px: "4",
+    color: "mantine.colors.gray[9]",
+    pointerEvents: "all",
+    _active: {
+      transform: "translateY(-3px)"
+    }
+  })
+});
+
+export { LayoutDriftFrame };

package/dist/likec4diagram/ui/index.d.ts

@@ -1 +1,2 @@
+export { LayoutDriftFrame } from './LayoutDriftFrame';
 export { NotationPanel } from './notation/NotationPanel';

package/dist/likec4diagram/ui/notation/NotationPanel.css.js

@@ -7,7 +7,10 @@ const container = css({
   padding: "2",
   margin: "0",
   width: "min-content",
-  height: "min-content"
+  height: "min-content",
+  _print: {
+    display: "none"
+  }
 });
 const icon = css({
   ["--ai-radius"]: "0px",
@@ -43,7 +46,7 @@ const elementNotation = css({
   // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   // vars: {
-  //   // [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
+  //   // [stokeFillMix]: `color-mix(in oklab, ${vars.element.stroke} 90%, ${vars.element.fill})`
   // },
   _hover: {
     transition: "all 120ms ease-out",

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -5,13 +5,14 @@ import { useLocalStorage } from '@mantine/hooks';
 import { AnimatePresence, m } from 'motion/react';
 import { memo, useState } from 'react';
 import { ceil, isNonNullish } from 'remeda';
-import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
+import { useDiagramContext } from '../../../hooks/useDiagram.js';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
 import { container, icon, card, tabPanel, shapeBadge, elementNotation } from './NotationPanel.css.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
-import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
-import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
+import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
+import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
+import { useDiagram } from '../../../hooks/safeContext.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
 
 const ElementNotation = ({ value }) => {

package/dist/likec4diagram/useLayoutConstraints.d.ts

@@ -4,21 +4,26 @@ import { XYStoreApi } from '../hooks';
 import { Types } from './types';
 type InternalNode = RFInternalNode<Types.AnyNode>;
 declare abstract class Rect {
-    static readonly LeftPadding = 40;
-    static readonly RightPadding = 40;
-    static readonly TopPadding = 55;
-    static readonly BottomPadding = 40;
+    static readonly LeftPadding = 42;
+    static readonly RightPadding = 42;
+    static readonly TopPadding = 60;
+    static readonly BottomPadding = 42;
     id: string;
     minX: number;
     minY: number;
     maxX: number;
     maxY: number;
+    readonly initialX: number;
+    readonly initialY: number;
     get positionAbsolute(): XYPosition;
+    get initialPositionAbsolute(): XYPosition;
     set positionAbsolute(pos: XYPosition);
     get dimensions(): {
         width: number;
         height: number;
     };
+    get diff(): XYPosition;
+    get isMoved(): boolean;
     get position(): XYPosition;
     protected abstract parent: CompoundRect | null;
     constructor(xynode: InternalNode, parent?: CompoundRect | null);
@@ -34,8 +39,8 @@ declare class Leaf extends Rect {
 }
 export declare function createLayoutConstraints(xyflowApi: XYStoreApi, editingNodeIds: NonEmptyArray<string>): {
     rects: ReadonlyMap<string, Leaf | CompoundRect>;
-    updateXYFlowNodes: () => void;
     onMove: () => void;
+    updateXYFlow: () => void;
 };
 type LayoutConstraints = {
     onNodeDragStart: OnNodeDrag<Types.Node>;

package/dist/likec4diagram/useLayoutConstraints.js

@@ -1,26 +1,40 @@
-import { nonNullable } from '@likec4/core';
+import { DefaultMap, nonNullable, BBox } from '@likec4/core';
+import { isome, invariant } from '@likec4/core/utils';
 import { getNodeDimensions } from '@xyflow/system';
+import { produce } from 'immer';
 import { useRef, useMemo } from 'react';
-import { pipe, filter, hasAtLeast, map } from 'remeda';
-import { useDiagram } from '../hooks/useDiagram.js';
+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';
+import { vector } from '../utils/vector.js';
 
 class Rect {
-  static LeftPadding = 40;
-  static RightPadding = 40;
-  static TopPadding = 55;
-  static BottomPadding = 40;
+  static LeftPadding = 42;
+  static RightPadding = 42;
+  static TopPadding = 60;
+  static BottomPadding = 42;
   id;
   minX = Infinity;
   minY = Infinity;
   maxX = -Infinity;
   maxY = -Infinity;
+  initialX;
+  initialY;
   get positionAbsolute() {
     return {
       x: this.minX,
       y: this.minY
     };
   }
+  get initialPositionAbsolute() {
+    return {
+      x: this.initialX,
+      y: this.initialY
+    };
+  }
   set positionAbsolute(pos) {
     const x = Math.round(pos.x);
     const y = Math.round(pos.y);
@@ -31,10 +45,19 @@ class Rect {
   }
   get dimensions() {
     return {
-      width: this.maxX - this.minX,
-      height: this.maxY - this.minY
+      width: Math.round(this.maxX - this.minX),
+      height: Math.round(this.maxY - this.minY)
+    };
+  }
+  get diff() {
+    return {
+      x: Math.round(this.positionAbsolute.x - this.initialX),
+      y: Math.round(this.positionAbsolute.y - this.initialY)
     };
   }
+  get isMoved() {
+    return this.diff.x !== 0 || this.diff.y !== 0;
+  }
   // Position relative to parent
   get position() {
     const positionAbsolute = this.positionAbsolute;
@@ -56,6 +79,8 @@ class Rect {
     const { width, height } = getNodeDimensions(xynode);
     this.maxX = this.minX + Math.ceil(width);
     this.maxY = this.minY + Math.ceil(height);
+    this.initialX = this.positionAbsolute.x;
+    this.initialY = this.positionAbsolute.y;
     if (parent) {
       parent.children.push(this);
     }
@@ -74,22 +99,132 @@ class Leaf extends Rect {
     this.parent = parent;
   }
 }
+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
+          }));
+        }
+        if (edge.data.labelBBox) {
+          draft.data.labelBBox = {
+            x: edge.data.labelBBox.x + dx,
+            y: edge.data.labelBBox.y + dy,
+            width: edge.data.labelBBox.width,
+            height: edge.data.labelBBox.height
+          };
+        }
+      })
+    };
+  };
+}
+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 p = vector(pt);
+      const staticToP = p.subtract(staticV);
+      const projLength = staticToP.dot(staticToAnchor);
+      const coeff = clamp(projLength / staticToAnchorLength ** 2, {
+        min: -1,
+        max: 1
+      });
+      const newP = p.add(d.multiply(coeff)).round();
+      return {
+        x: newP.x,
+        y: newP.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 } = xyflowApi.getState();
+  const { parentLookup, nodeLookup, edges, edgeLookup } = xyflowApi.getState();
   const rects = /* @__PURE__ */ new Map();
-  const ancestorsOf = (nodeId) => {
-    const ancestors = [];
+  const ancestorsOf = new DefaultMap((nodeId) => {
     const xynode = nodeLookup.get(nodeId);
     let parent = xynode?.parentId;
-    let parentNode;
-    while (parent && (parentNode = nodeLookup.get(parent))) {
-      ancestors.push(parentNode.id);
-      parent = parentNode.parentId;
+    if (!parent) {
+      return [];
     }
-    return ancestors;
-  };
+    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(ancestorsOf)
+    editingNodeIds.flatMap((i) => ancestorsOf.get(i))
   );
   const traverse = [...nodeLookup.values()].flatMap(
     (x) => !x.parentId ? { xynode: x, parent: null } : []
@@ -97,7 +232,7 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
   while (traverse.length > 0) {
     const { xynode, parent } = traverse.shift();
     const isEditing = editingNodeIds.includes(xynode.id);
-    const shouldTraverse = !isEditing && xynode.type !== "element" && xynode.type !== "deployment" && ancestorsOfDraggingNodes.has(xynode.id);
+    const shouldTraverse = !isEditing && ancestorsOfDraggingNodes.has(xynode.id);
     if (shouldTraverse) {
       const rect = new CompoundRect(xynode, parent);
       rects.set(xynode.id, rect);
@@ -107,12 +242,49 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
           parent: rect
         });
       });
-    } else {
-      rects.set(xynode.id, new Leaf(xynode, parent));
+      continue;
     }
+    rects.set(xynode.id, new Leaf(xynode, parent));
   }
   const rectsToUpdate = [...rects.values()];
-  applyConstraints(rectsToUpdate);
+  const edgeModifiers = /* @__PURE__ */ new Map();
+  const findMovingAncestor = (nodeId) => {
+    return rects.get(nodeId) ?? ancestorsOf.get(nodeId).map((id) => rects.get(id)).find((s) => !!s) ?? 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) {
+      let r = rects.get(edge.source) ?? rects.get(edge.target) ?? findMovingAncestor(edge.source) ?? findMovingAncestor(edge.target);
+      if (r) {
+        edgeModifiers.set(edge, makeEdgeModifier(edge, r));
+      }
+      continue;
+    }
+    if (isSourceMoving !== isTargetMoving) {
+      const movingRect = isSourceMoving ? findMovingAncestor(edge.source) : findMovingAncestor(edge.target);
+      if (!movingRect) {
+        continue;
+      }
+      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
+        )
+      );
+      continue;
+    }
+  }
   function applyConstraints(targets) {
     for (const r of targets) {
       if (!(r instanceof CompoundRect)) {
@@ -137,28 +309,33 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
       r.maxY = childrenBB.maxY + Rect.BottomPadding;
     }
   }
-  function updateXYFlowNodes() {
+  const _edgeModifiers = [...edgeModifiers.values()];
+  function updateXYFlow() {
     applyConstraints(rectsToUpdate);
-    xyflowApi.getState().triggerNodeChanges(
-      rectsToUpdate.reduce((acc, r) => {
+    const nodeUpdates = rectsToUpdate.reduce((acc, r) => {
+      acc.push({
+        id: r.id,
+        type: "position",
+        dragging: false,
+        position: r.position,
+        positionAbsolute: r.positionAbsolute
+      });
+      if (r instanceof CompoundRect) {
         acc.push({
           id: r.id,
-          type: "position",
-          dragging: false,
-          position: r.position,
-          positionAbsolute: r.positionAbsolute
+          type: "dimensions",
+          setAttributes: true,
+          dimensions: r.dimensions
         });
-        if (r instanceof CompoundRect) {
-          acc.push({
-            id: r.id,
-            type: "dimensions",
-            setAttributes: true,
-            dimensions: r.dimensions
-          });
-        }
-        return acc;
-      }, [])
-    );
+      }
+      return acc;
+    }, []);
+    const { edgeLookup: edgeLookup2, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState();
+    triggerNodeChanges(nodeUpdates);
+    const changes = _edgeModifiers.map((fm) => fm(edgeLookup2));
+    if (changes.length > 0) {
+      triggerEdgeChanges(changes);
+    }
   }
   let animationFrameId = null;
   function onMove() {
@@ -167,19 +344,26 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     }
     animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null;
-      const { nodeLookup: nodeLookup2 } = xyflowApi.getState();
       for (const id of editingNodeIds) {
-        const rect = nonNullable(rects.get(id));
-        const node = nonNullable(nodeLookup2.get(id));
+        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;
       }
-      updateXYFlowNodes();
+      updateXYFlow();
     });
   }
   return {
     rects,
-    updateXYFlowNodes,
-    onMove
+    onMove,
+    updateXYFlow
   };
 }
 function useLayoutConstraints() {
@@ -187,33 +371,25 @@ function useLayoutConstraints() {
   const diagram = useDiagram();
   const solverRef = useRef(void 0);
   return useMemo(() => {
-    let wasPending = false;
-    const initial = { x: 0, y: 0 };
-    let moved = false;
     return {
       onNodeDragStart: (_event, xynode) => {
-        wasPending = diagram.cancelSaveManualLayout();
+        diagram.startEditing("node");
         const { nodeLookup } = xystore.getState();
         const draggingNodes = pipe(
           Array.from(nodeLookup.values()),
-          filter((n) => n.draggable !== false && (n.dragging === true || n.id === xynode.id || n.selected === true))
+          filter((n) => n.dragging === true || n.id === xynode.id || n.selected === true),
+          map((n) => n.id)
         );
         if (hasAtLeast(draggingNodes, 1)) {
-          solverRef.current = createLayoutConstraints(xystore, map(draggingNodes, (x) => x.id));
+          solverRef.current = createLayoutConstraints(xystore, draggingNodes);
         }
-        initial.x = _event.clientX;
-        initial.y = _event.clientY;
-        moved = false;
       },
       onNodeDrag: (_event) => {
-        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4;
         solverRef.current?.onMove();
       },
       onNodeDragStop: (_event) => {
-        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4;
-        if (wasPending || moved) {
-          diagram.scheduleSaveManualLayout();
-        }
+        const moved = solverRef.current ? isome(solverRef.current.rects.values(), (r) => r.isMoved) : false;
+        diagram.stopEditing(moved);
         solverRef.current = void 0;
       }
     };