@likec4/diagram 1.42.1 → 1.44.0

package/dist/likec4diagram/state/syncManualLayoutActor.js

@@ -1,92 +1,242 @@
-import { getNodeDimensions, getBoundsOfRects, boxToRect } from '@xyflow/system';
-import { reduce, hasAtLeast } from 'remeda';
-import { setup, assign } from 'xstate';
-import { isSamePoint, bezierControlPoints } from '../../utils/xyflow.js';
+import { deepEqual } from 'fast-equals';
+import { last, map } from 'remeda';
+import { setup, assign, assertEvent } from 'xstate';
+import { createViewChange } from './createViewChange.js';
+import { undoHotKeyActorLogic } from './hotkeyActor.js';
 
-const _syncManualLayoutActorLogic = setup({
+const diagramActorRef = function(system) {
+  return system.get("diagram");
+};
+const syncManualLayout = setup({
   types: {
     context: {},
     input: {},
     events: {},
-    tags: ""
+    tags: "",
+    children: {}
   },
   delays: {
     "timeout": 2e3
   },
-  actions: {
-    "trigger:OnChange": (_, _params) => {
+  guards: {
+    "can undo": ({ context }) => context.history.length > 0
+  },
+  actors: {
+    undoHotKeyActorLogic
+  }
+});
+const pushHistory = syncManualLayout.assign(({ context }) => {
+  const snapshot = context.beforeEditing;
+  if (!snapshot) {
+    return {};
+  }
+  const prevHistoryItem = last(context.history);
+  if (deepEqual(prevHistoryItem?.xyedges, snapshot.xyedges) && deepEqual(prevHistoryItem?.xynodes, snapshot.xynodes)) {
+    return {
+      beforeEditing: null
+    };
+  }
+  return {
+    beforeEditing: null,
+    history: [
+      ...context.history,
+      snapshot
+    ]
+  };
+});
+const popHistory = syncManualLayout.assign(({ context }) => {
+  if (context.history.length === 0) {
+    return {};
+  }
+  return {
+    history: context.history.slice(0, -1)
+  };
+});
+const startEditing = syncManualLayout.assign(({ system, event }) => {
+  assertEvent(event, "editing.start");
+  const parentContext = diagramActorRef(system).getSnapshot().context;
+  return {
+    editing: event.subject,
+    beforeEditing: {
+      xynodes: map(parentContext.xynodes, (n) => ({ ...n })),
+      xyedges: map(parentContext.xyedges, (e) => ({ ...e })),
+      change: createViewChange(parentContext),
+      view: parentContext.view,
+      synched: false
+    }
+  };
+});
+const ensureHotKey = syncManualLayout.enqueueActions(({ check, enqueue, self }) => {
+  const hasUndo = check("can undo");
+  const undoHotKey = self.getSnapshot().children["undoHotKey"];
+  if (undoHotKey && !hasUndo) {
+    enqueue.stopChild(undoHotKey);
+    return;
+  }
+  if (!undoHotKey && hasUndo) {
+    enqueue.spawnChild("undoHotKeyActorLogic", {
+      id: "undoHotKey"
+    });
+  }
+});
+const stopEditing = syncManualLayout.enqueueActions(({ event, enqueue }) => {
+  assertEvent(event, "editing.stop");
+  if (event.wasChanged) {
+    enqueue.cancel("sync");
+    enqueue(pushHistory);
+    enqueue.raise({ type: "sync" }, { id: "sync", delay: 50 });
+  }
+  enqueue.assign({
+    beforeEditing: null,
+    editing: null
+  });
+});
+const emitOnChange = syncManualLayout.sendTo(
+  ({ system }) => diagramActorRef(system),
+  ({ system }) => {
+    const parentContext = diagramActorRef(system).getSnapshot().context;
+    return {
+      type: "emit.onChange",
+      change: createViewChange(parentContext)
+    };
+  }
+);
+const markHistoryAsSynched = syncManualLayout.assign(({ context, event }) => {
+  assertEvent(event, "synced");
+  return {
+    history: context.history.map((i) => ({
+      ...i,
+      synched: true
+    })),
+    beforeEditing: context.beforeEditing ? {
+      ...context.beforeEditing,
+      synched: true
+    } : null
+  };
+});
+const undo = syncManualLayout.enqueueActions(({ context, enqueue, system }) => {
+  const lastHistoryItem = last(context.history);
+  if (!lastHistoryItem) {
+    return;
+  }
+  enqueue(popHistory);
+  enqueue(ensureHotKey);
+  const diagramActor = diagramActorRef(system);
+  enqueue.sendTo(diagramActor, {
+    type: "update.view",
+    view: lastHistoryItem.view,
+    xyedges: lastHistoryItem.xyedges,
+    xynodes: lastHistoryItem.xynodes
+  });
+  if (lastHistoryItem.synched) {
+    enqueue.sendTo(diagramActor, {
+      type: "emit.onChange",
+      change: lastHistoryItem.change
+    });
+  }
+});
+const idle = syncManualLayout.createStateConfig({
+  tags: "ready",
+  entry: [
+    assign({
+      beforeEditing: null,
+      editing: null
+    })
+  ],
+  on: {
+    sync: {
+      target: "pending"
+    },
+    "editing.start": {
+      actions: startEditing,
+      target: "editing"
+    },
+    undo: {
+      guard: "can undo",
+      actions: undo
+    }
+  }
+});
+const editing = syncManualLayout.createStateConfig({
+  on: {
+    "editing.stop": {
+      actions: [
+        stopEditing,
+        ensureHotKey
+      ],
+      target: "idle"
+    },
+    undo: {}
+  }
+});
+const pending = syncManualLayout.createStateConfig({
+  tags: "pending",
+  on: {
+    sync: {
+      target: "pending",
+      reenter: true
+    },
+    "editing.start": {
+      target: "paused",
+      actions: startEditing
+    },
+    undo: {
+      guard: "can undo",
+      actions: undo,
+      target: "idle"
     }
   },
-  guards: {
-    "same view": ({ context }) => context.parent.getSnapshot().context.view.id === context.viewId
+  after: {
+    "timeout": {
+      target: "idle",
+      actions: emitOnChange
+    }
   }
-}).createMachine({
+});
+const paused = syncManualLayout.createStateConfig({
+  tags: "pending",
+  on: {
+    "editing.stop": {
+      actions: [
+        stopEditing,
+        ensureHotKey
+      ],
+      target: "pending"
+    },
+    undo: {}
+  }
+});
+const _syncManualLayoutActorLogic = syncManualLayout.createMachine({
   initial: "idle",
   context: ({ input }) => ({
-    ...input
+    ...input,
+    history: [],
+    beforeEditing: null,
+    editing: null
   }),
   states: {
-    idle: {
-      tags: "ready",
-      on: {
-        sync: {
-          target: "pending"
-        }
-      }
-    },
-    paused: {
-      tags: "pending",
-      on: {
-        sync: {
-          target: "pending"
-        }
-      }
-    },
-    pending: {
-      tags: "pending",
-      on: {
-        sync: {
-          target: "pending",
-          reenter: true
-        },
-        cancel: {
-          target: "paused"
-        }
-      },
-      after: {
-        "timeout": [{
-          guard: "same view",
-          actions: {
-            type: "trigger:OnChange",
-            params: ({ context }) => {
-              const change = createViewChange(context.parent.getSnapshot().context);
-              return { change };
-            }
-          },
-          target: "synced"
-        }, {
-          target: "stopped"
-        }]
-      }
-    },
-    synced: {
-      tags: "ready",
-      on: {
-        sync: {
-          target: "pending"
-        }
-      }
-    },
-    "stopped": {
-      entry: assign({
-        parent: null
-      }),
+    idle,
+    editing,
+    pending,
+    paused,
+    stopped: {
+      entry: [
+        assign({
+          beforeEditing: null,
+          history: []
+        }),
+        ensureHotKey
+      ],
       type: "final"
     }
   },
   on: {
+    cancel: {
+      target: ".idle"
+    },
     synced: {
-      target: ".synced"
+      actions: markHistoryAsSynched,
+      target: ".idle"
     },
     stop: {
       target: ".stopped"
@@ -94,80 +244,5 @@ const _syncManualLayoutActorLogic = setup({
   }
 });
 const syncManualLayoutActorLogic = _syncManualLayoutActorLogic;
-function createViewChange(parentContext) {
-  const { view, xystore, xyflow } = parentContext;
-  const { nodeLookup } = xystore.getState();
-  const movedNodes = /* @__PURE__ */ new Set();
-  let bounds;
-  const nodes = reduce([...nodeLookup.values()], (acc, node) => {
-    const dimensions = getNodeDimensions(node);
-    if (!isSamePoint(node.internals.positionAbsolute, node.data) || node.initialWidth !== dimensions.width || node.initialHeight !== dimensions.height) {
-      movedNodes.add(node.id);
-    }
-    const rect = acc[node.id] = {
-      isCompound: node.type !== "element" && node.type !== "deployment",
-      x: Math.floor(node.internals.positionAbsolute.x),
-      y: Math.floor(node.internals.positionAbsolute.y),
-      width: Math.ceil(dimensions.width),
-      height: Math.ceil(dimensions.height)
-    };
-    bounds = bounds ? getBoundsOfRects(bounds, rect) : rect;
-    return acc;
-  }, {});
-  const edges = reduce(xyflow?.getEdges() ?? [], (acc, { source, target, data }) => {
-    let controlPoints = data.controlPoints ?? [];
-    const sourceOrTargetMoved = movedNodes.has(source) || movedNodes.has(target);
-    if (controlPoints.length === 0 && sourceOrTargetMoved) {
-      controlPoints = bezierControlPoints(data);
-    }
-    if (data.points.length === 0 && controlPoints.length === 0) {
-      return acc;
-    }
-    const _updated = acc[data.id] = {
-      points: data.points
-    };
-    if (data.labelXY && data.labelBBox) {
-      _updated.labelBBox = {
-        ...data.labelBBox,
-        ...data.labelXY
-      };
-    }
-    if (data.labelBBox) {
-      _updated.labelBBox ??= data.labelBBox;
-    }
-    if (hasAtLeast(controlPoints, 1)) {
-      _updated.controlPoints = controlPoints;
-    }
-    const allX = [
-      ...data.points.map((p) => p[0]),
-      ...controlPoints.map((p) => p.x),
-      ..._updated.labelBBox ? [_updated.labelBBox.x, _updated.labelBBox.x + _updated.labelBBox.width] : []
-    ];
-    const allY = [
-      ...data.points.map((p) => p[1]),
-      ...controlPoints.map((p) => p.y),
-      ..._updated.labelBBox ? [_updated.labelBBox.y, _updated.labelBBox.y + _updated.labelBBox.height] : []
-    ];
-    const rect = boxToRect({
-      x: Math.floor(Math.min(...allX)),
-      y: Math.floor(Math.min(...allY)),
-      x2: Math.ceil(Math.max(...allX)),
-      y2: Math.ceil(Math.max(...allY))
-    });
-    bounds = bounds ? getBoundsOfRects(bounds, rect) : rect;
-    return acc;
-  }, {});
-  bounds ??= view.bounds;
-  return {
-    op: "save-manual-layout",
-    layout: {
-      hash: view.hash,
-      autoLayout: view.autoLayout,
-      nodes,
-      edges,
-      ...bounds
-    }
-  };
-}
 
 export { syncManualLayoutActorLogic };

package/dist/likec4diagram/state/types.d.ts

@@ -1,13 +1,14 @@
 import { ActorRefFromLogic, ActorSystem, EventFromLogic, SnapshotFrom } from 'xstate';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
-import { DiagramMachineLogic } from './diagram-machine';
-import { SyncLayoutActorLogic } from './syncManualLayoutActor';
+import { DiagramMachineLogic } from './machine';
+import { SyncLayoutActorRef } from './syncManualLayoutActor';
 export type System = ActorSystem<{
     actors: {
         diagram: ActorRefFromLogic<DiagramMachineLogic>;
         overlays: OverlaysActorRef;
         search: SearchActorRef;
+        syncLayout: SyncLayoutActorRef;
     };
 }>;
 export interface DiagramActorRef extends ActorRefFromLogic<DiagramMachineLogic> {
@@ -15,8 +16,4 @@ export interface DiagramActorRef extends ActorRefFromLogic<DiagramMachineLogic>
 }
 export type DiagramActorSnapshot = SnapshotFrom<DiagramMachineLogic>;
 export type DiagramActorEvent = EventFromLogic<DiagramMachineLogic>;
-export type { Context as DiagramContext, EmittedEvents as DiagramEmittedEvents, } from './diagram-machine';
-export type SyncLayoutActorRef = Omit<ActorRefFromLogic<SyncLayoutActorLogic>, 'system'> & {
-    system: System;
-};
-export type SyncLayoutActorSnapshot = SnapshotFrom<SyncLayoutActorLogic>;
+export type { Context as DiagramContext, EmittedEvents as DiagramEmittedEvents, } from './machine.setup';

package/dist/likec4diagram/state/utils.d.ts

@@ -2,11 +2,13 @@ import { DiagramEdge, DiagramNode, BBox } from '@likec4/core/types';
 import { ActorSystem } from 'xstate';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
-import { Context } from './diagram-machine';
+import { Context } from './machine.setup';
+import { SyncLayoutActorRef } from './syncManualLayoutActor';
 import { DiagramActorRef } from './types';
 export declare function typedSystem(system: ActorSystem<any>): {
+    readonly syncLayoutActorRef: SyncLayoutActorRef | null;
     readonly overlaysActorRef: OverlaysActorRef | null;
-    readonly diagramActorRef: DiagramActorRef | null;
+    readonly diagramActorRef: DiagramActorRef;
     readonly searchActorRef: SearchActorRef | null;
 };
 export declare function findDiagramNode(ctx: Context, xynodeId: string): DiagramNode | null;

package/dist/likec4diagram/state/utils.js

@@ -4,11 +4,14 @@ import { getNodesBounds, getNodeDimensions, getEdgePosition } from '@xyflow/syst
 
 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;

package/dist/likec4diagram/types.d.ts

@@ -1,4 +1,4 @@
-import { BBox, DeploymentFqn, DiagramEdge, DiagramNode, ExclusiveUnion, Fqn, IconUrl, RichTextOrEmpty, ViewId } from '@likec4/core/types';
+import { BBox, DeploymentFqn, DiagramEdge, DiagramEdgeDriftReason, DiagramNode, DiagramNodeDriftReason, ExclusiveUnion, Fqn, IconUrl, NonEmptyReadonlyArray, RichTextOrEmpty, ViewId } from '@likec4/core/types';
 import { XYPosition } from '@xyflow/system';
 import { FunctionComponent } from 'react';
 import { Simplify } from 'type-fest';
@@ -24,6 +24,7 @@ export declare namespace Types {
          * If set - this node has navigation to another view and diagram has handler for this
          */
         navigateTo: ViewId | null;
+        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     /**
      * Represents element from deployment model
@@ -32,6 +33,7 @@ export declare namespace Types {
         navigateTo: ViewId | null;
         deploymentFqn: DeploymentFqn;
         modelFqn: Fqn | null;
+        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     type SequenceActorNodePort = {
         id: string;
@@ -65,6 +67,7 @@ export declare namespace Types {
          * If set - this node has navigation to another view and diagram has handler for this
          */
         navigateTo: ViewId | null;
+        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     type CompoundDeploymentNodeData = Simplify<CompoundNodeData & {
         deploymentFqn: DeploymentFqn;
@@ -76,6 +79,7 @@ export declare namespace Types {
          * If set - this node has navigation to another view and diagram has handler for this
          */
         navigateTo: ViewId | null;
+        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     type ViewGroupNodeData = Simplify<CompoundNodeData & {
         isViewGroup: true;
@@ -106,6 +110,7 @@ export declare namespace Types {
         notes: RichTextOrEmpty;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
+        drifts: NonEmptyReadonlyArray<DiagramEdgeDriftReason> | null;
     }>;
     type SequenceStepEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath'>> & {
         notes: RichTextOrEmpty;

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.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 }) => {
@@ -112,16 +113,13 @@ const ElementNotation = ({ value }) => {
 };
 const selector = (s) => ({
   id: s.view.id,
-  notations: s.view.notation?.nodes ?? [],
-  isVisible: true
-  // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
+  notations: s.view.notation?.nodes ?? []
 });
 const NotationPanel = memo(() => {
   const height = useXYStore((s) => s.height);
   const {
     id,
-    notations,
-    isVisible
+    notations
   } = useDiagramContext(selector);
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: "notation-webview-collapsed",
@@ -130,7 +128,7 @@ const NotationPanel = memo(() => {
   const hasNotations = notations.length > 0;
   const portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    !hasNotations && isVisible && /* @__PURE__ */ jsx(
+    !hasNotations && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -153,7 +151,7 @@ const NotationPanel = memo(() => {
       },
       "empty"
     ),
-    hasNotations && isVisible && isCollapsed && /* @__PURE__ */ jsx(
+    hasNotations && isCollapsed && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -177,7 +175,7 @@ const NotationPanel = memo(() => {
       },
       "collapsed"
     ),
-    hasNotations && isVisible && !isCollapsed && /* @__PURE__ */ jsx(
+    hasNotations && !isCollapsed && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: {

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>;