feat(canvas): implement local node size pinning and reconciliation logic

- Added functions to handle local node size pins, ensuring that node sizes are preserved during reconciliation. - Updated `reconcileCanvasFlowNodes` to incorporate size pinning logic. - Enhanced tests to verify the correct behavior of size pinning in various scenarios. - Updated related components to support new size pinning functionality.
2026-04-10 08:48:34 +02:00
parent 26d008705f
commit 463830f178
12 changed files with 711 additions and 10 deletions
--- a/components/canvas/tests/canvas-flow-reconciliation-helpers.test.ts
+++ b/components/canvas/tests/canvas-flow-reconciliation-helpers.test.ts
@@ -346,6 +346,96 @@ describe("canvas flow reconciliation helpers", () => {
    expect(result.nextPendingLocalNodeDataPins.size).toBe(0);
  });

+  it("keeps pinned local node size until convex catches up", () => {
+    const pinnedSize = { width: 419, height: 466 };
+
+    const result = reconcileCanvasFlowNodes({
+      previousNodes: [
+        {
+          id: "node-1",
+          type: "render",
+          position: { x: 120, y: 80 },
+          data: {},
+          style: pinnedSize,
+        },
+      ],
+      incomingNodes: [
+        {
+          id: "node-1",
+          type: "render",
+          position: { x: 120, y: 80 },
+          data: {},
+          style: { width: 640, height: 360 },
+        },
+      ],
+      convexNodes: [{ _id: asNodeId("node-1"), type: "render" }],
+      deletingNodeIds: new Set(),
+      resolvedRealIdByClientRequest: new Map(),
+      pendingConnectionCreateIds: new Set(),
+      preferLocalPositionNodeIds: new Set(),
+      pendingLocalPositionPins: new Map(),
+      pendingLocalNodeSizePins: new Map([["node-1", pinnedSize]]),
+      pendingMovePins: new Map(),
+    });
+
+    expect(result.nodes).toEqual([
+      {
+        id: "node-1",
+        type: "render",
+        position: { x: 120, y: 80 },
+        data: {},
+        style: pinnedSize,
+      },
+    ]);
+    expect(result.nextPendingLocalNodeSizePins).toEqual(
+      new Map([["node-1", pinnedSize]]),
+    );
+  });
+
+  it("clears pinned local node size once convex matches the persisted size", () => {
+    const pinnedSize = { width: 419, height: 466 };
+
+    const result = reconcileCanvasFlowNodes({
+      previousNodes: [
+        {
+          id: "node-1",
+          type: "render",
+          position: { x: 120, y: 80 },
+          data: {},
+          style: pinnedSize,
+        },
+      ],
+      incomingNodes: [
+        {
+          id: "node-1",
+          type: "render",
+          position: { x: 120, y: 80 },
+          data: {},
+          style: pinnedSize,
+        },
+      ],
+      convexNodes: [{ _id: asNodeId("node-1"), type: "render" }],
+      deletingNodeIds: new Set(),
+      resolvedRealIdByClientRequest: new Map(),
+      pendingConnectionCreateIds: new Set(),
+      preferLocalPositionNodeIds: new Set(),
+      pendingLocalPositionPins: new Map(),
+      pendingLocalNodeSizePins: new Map([["node-1", pinnedSize]]),
+      pendingMovePins: new Map(),
+    });
+
+    expect(result.nodes).toEqual([
+      {
+        id: "node-1",
+        type: "render",
+        position: { x: 120, y: 80 },
+        data: {},
+        style: pinnedSize,
+      },
+    ]);
+    expect(result.nextPendingLocalNodeSizePins.size).toBe(0);
+  });
+
  it("filters deleting nodes from incoming reconciliation results", () => {
    const result = reconcileCanvasFlowNodes({
      previousNodes: [
--- a/components/canvas/tests/use-canvas-flow-reconciliation.test.ts
+++ b/components/canvas/tests/use-canvas-flow-reconciliation.test.ts
@@ -39,6 +39,7 @@ type HarnessProps = {
  previousConvexNodeIdsSnapshot: Set<string>;
  pendingLocalPositionPins?: Map<string, { x: number; y: number }>;
  pendingLocalNodeDataPins?: Map<string, unknown>;
+  pendingLocalNodeSizePins?: Map<string, { width: number; height: number }>;
  preferLocalPositionNodeIds?: Set<string>;
  isResizingRefOverride?: { current: boolean };
 };
@@ -82,6 +83,9 @@ function HookHarness(props: HarnessProps) {
  const pendingLocalNodeDataUntilConvexMatchesRef = useRef(
    props.pendingLocalNodeDataPins ?? new Map<string, unknown>(),
  );
+  const pendingLocalNodeSizeUntilConvexMatchesRef = useRef(
+    props.pendingLocalNodeSizePins ?? new Map<string, { width: number; height: number }>(),
+  );
  const preferLocalPositionNodeIdsRef = useRef(
    props.preferLocalPositionNodeIds ?? new Set<string>(),
  );
@@ -120,6 +124,7 @@ function HookHarness(props: HarnessProps) {
      pendingConnectionCreatesRef,
      pendingLocalPositionUntilConvexMatchesRef,
      pendingLocalNodeDataUntilConvexMatchesRef,
+      pendingLocalNodeSizeUntilConvexMatchesRef,
      preferLocalPositionNodeIdsRef,
      isDragging: isDraggingRef,
      isResizing: isResizingRef,
--- a/components/canvas/tests/use-canvas-sync-engine.test.ts
+++ b/components/canvas/tests/use-canvas-sync-engine.test.ts
@@ -160,7 +160,7 @@ describe("useCanvasSyncEngine", () => {
      getEnqueueSyncMutation: () => enqueueSyncMutation,
      getRunBatchRemoveNodes: () => vi.fn(async () => undefined),
      getRunSplitEdgeAtExistingNode: () => vi.fn(async () => undefined),
-      getSetNodes: () => setNodes,
+      getSetNodes: () => setNodes as never,
    });

    await controller.queueNodeDataUpdate({
@@ -177,4 +177,46 @@ describe("useCanvasSyncEngine", () => {
      data: { blackPoint: 209 },
    });
  });
+
+  it("pins local node size immediately when queueing a resize", async () => {
+    const enqueueSyncMutation = vi.fn(async () => undefined);
+    let nodes = [
+      {
+        id: "node-1",
+        type: "render",
+        position: { x: 0, y: 0 },
+        data: {},
+        style: { width: 640, height: 360 },
+      },
+    ];
+    const setNodes = (updater: (current: typeof nodes) => typeof nodes) => {
+      nodes = updater(nodes);
+      return nodes;
+    };
+
+    const controller = createCanvasSyncEngineController({
+      canvasId: asCanvasId("canvas-1"),
+      isSyncOnline: true,
+      getEnqueueSyncMutation: () => enqueueSyncMutation,
+      getRunBatchRemoveNodes: () => vi.fn(async () => undefined),
+      getRunSplitEdgeAtExistingNode: () => vi.fn(async () => undefined),
+      getSetNodes: () => setNodes as never,
+    });
+
+    await controller.queueNodeResize({
+      nodeId: asNodeId("node-1"),
+      width: 419,
+      height: 466,
+    });
+
+    expect(nodes[0]?.style).toEqual({ width: 419, height: 466 });
+    expect(controller.pendingLocalNodeSizeUntilConvexMatchesRef.current).toEqual(
+      new Map([["node-1", { width: 419, height: 466 }]]),
+    );
+    expect(enqueueSyncMutation).toHaveBeenCalledWith("resizeNode", {
+      nodeId: asNodeId("node-1"),
+      width: 419,
+      height: 466,
+    });
+  });
 });
--- a/components/canvas/canvas-flow-reconciliation-helpers.ts
+++ b/components/canvas/canvas-flow-reconciliation-helpers.ts
@@ -354,6 +354,49 @@ function applyLocalNodeDataPins(args: {
  };
 }

+function nodeStyleIncludesSizePin(
+  style: RFNode["style"] | undefined,
+  pin: { width: number; height: number },
+): boolean {
+  return style?.width === pin.width && style?.height === pin.height;
+}
+
+function applyLocalNodeSizePins(args: {
+  nodes: RFNode[];
+  pendingLocalNodeSizePins: ReadonlyMap<string, { width: number; height: number }>;
+}): {
+  nodes: RFNode[];
+  nextPendingLocalNodeSizePins: Map<string, { width: number; height: number }>;
+} {
+  const nodeIds = new Set(args.nodes.map((node) => node.id));
+  const nextPendingLocalNodeSizePins = new Map(
+    [...args.pendingLocalNodeSizePins].filter(([nodeId]) => nodeIds.has(nodeId)),
+  );
+  const nodes = args.nodes.map((node) => {
+    const pin = nextPendingLocalNodeSizePins.get(node.id);
+    if (!pin) return node;
+
+    if (nodeStyleIncludesSizePin(node.style, pin)) {
+      nextPendingLocalNodeSizePins.delete(node.id);
+      return node;
+    }
+
+    return {
+      ...node,
+      style: {
+        ...(node.style ?? {}),
+        width: pin.width,
+        height: pin.height,
+      },
+    };
+  });
+
+  return {
+    nodes,
+    nextPendingLocalNodeSizePins,
+  };
+}
+
 export function reconcileCanvasFlowNodes(args: {
  previousNodes: RFNode[];
  incomingNodes: RFNode[];
@@ -364,12 +407,14 @@ export function reconcileCanvasFlowNodes(args: {
  preferLocalPositionNodeIds: ReadonlySet<string>;
  pendingLocalPositionPins: ReadonlyMap<string, { x: number; y: number }>;
  pendingLocalNodeDataPins?: ReadonlyMap<string, unknown>;
+  pendingLocalNodeSizePins?: ReadonlyMap<string, { width: number; height: number }>;
  pendingMovePins: ReadonlyMap<string, { x: number; y: number }>;
 }): {
  nodes: RFNode[];
  inferredRealIdByClientRequest: Map<string, Id<"nodes">>;
  nextPendingLocalPositionPins: Map<string, { x: number; y: number }>;
  nextPendingLocalNodeDataPins: Map<string, unknown>;
+  nextPendingLocalNodeSizePins: Map<string, { width: number; height: number }>;
  clearedPreferLocalPositionNodeIds: string[];
 } {
  const inferredRealIdByClientRequest = inferPendingConnectionNodeHandoff({
@@ -392,8 +437,12 @@ export function reconcileCanvasFlowNodes(args: {
    nodes: mergedNodes,
    pendingLocalNodeDataPins: args.pendingLocalNodeDataPins ?? new Map(),
  });
-  const pinnedNodes = applyLocalPositionPins({
+  const sizePinnedNodes = applyLocalNodeSizePins({
    nodes: dataPinnedNodes.nodes,
+    pendingLocalNodeSizePins: args.pendingLocalNodeSizePins ?? new Map(),
+  });
+  const pinnedNodes = applyLocalPositionPins({
+    nodes: sizePinnedNodes.nodes,
    pendingLocalPositionPins: args.pendingLocalPositionPins,
  });
  const nodes = applyPinnedNodePositionsReadOnly(
@@ -419,6 +468,7 @@ export function reconcileCanvasFlowNodes(args: {
    inferredRealIdByClientRequest,
    nextPendingLocalPositionPins: pinnedNodes.nextPendingLocalPositionPins,
    nextPendingLocalNodeDataPins: dataPinnedNodes.nextPendingLocalNodeDataPins,
+    nextPendingLocalNodeSizePins: sizePinnedNodes.nextPendingLocalNodeSizePins,
    clearedPreferLocalPositionNodeIds,
  };
 }
--- a/components/canvas/canvas.tsx
+++ b/components/canvas/canvas.tsx
@@ -119,6 +119,7 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
      pendingConnectionCreatesRef,
      pendingLocalPositionUntilConvexMatchesRef,
      pendingLocalNodeDataUntilConvexMatchesRef,
+      pendingLocalNodeSizeUntilConvexMatchesRef,
      preferLocalPositionNodeIdsRef,
    },
    actions: {
@@ -454,6 +455,7 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
      pendingConnectionCreatesRef,
      pendingLocalPositionUntilConvexMatchesRef,
      pendingLocalNodeDataUntilConvexMatchesRef,
+      pendingLocalNodeSizeUntilConvexMatchesRef,
      preferLocalPositionNodeIdsRef,
      isDragging,
      isResizing,
--- a/components/canvas/use-canvas-flow-reconciliation.ts
+++ b/components/canvas/use-canvas-flow-reconciliation.ts
@@ -21,6 +21,9 @@ type CanvasFlowReconciliationRefs = {
    Map<string, PositionPin>
  >;
  pendingLocalNodeDataUntilConvexMatchesRef: MutableRefObject<Map<string, unknown>>;
+  pendingLocalNodeSizeUntilConvexMatchesRef: MutableRefObject<
+    Map<string, { width: number; height: number }>
+  >;
  preferLocalPositionNodeIdsRef: MutableRefObject<Set<string>>;
  isDragging: MutableRefObject<boolean>;
  isResizing: MutableRefObject<boolean>;
@@ -56,6 +59,7 @@ export function useCanvasFlowReconciliation(args: {
    pendingConnectionCreatesRef,
    pendingLocalPositionUntilConvexMatchesRef,
    pendingLocalNodeDataUntilConvexMatchesRef,
+    pendingLocalNodeSizeUntilConvexMatchesRef,
    preferLocalPositionNodeIdsRef,
    isDragging,
    isResizing,
@@ -135,6 +139,8 @@ export function useCanvasFlowReconciliation(args: {
        pendingLocalPositionPins: pendingLocalPositionUntilConvexMatchesRef.current,
        pendingLocalNodeDataPins:
          pendingLocalNodeDataUntilConvexMatchesRef.current,
+        pendingLocalNodeSizePins:
+          pendingLocalNodeSizeUntilConvexMatchesRef.current,
        pendingMovePins,
      });

@@ -144,6 +150,8 @@ export function useCanvasFlowReconciliation(args: {
        reconciliation.nextPendingLocalPositionPins;
      pendingLocalNodeDataUntilConvexMatchesRef.current =
        reconciliation.nextPendingLocalNodeDataPins;
+      pendingLocalNodeSizeUntilConvexMatchesRef.current =
+        reconciliation.nextPendingLocalNodeSizePins;
      for (const nodeId of reconciliation.clearedPreferLocalPositionNodeIds) {
        preferLocalPositionNodeIdsRef.current.delete(nodeId);
      }
@@ -162,6 +170,7 @@ export function useCanvasFlowReconciliation(args: {
    pendingConnectionCreatesRef,
    pendingLocalPositionUntilConvexMatchesRef,
    pendingLocalNodeDataUntilConvexMatchesRef,
+    pendingLocalNodeSizeUntilConvexMatchesRef,
    preferLocalPositionNodeIdsRef,
    resolvedRealIdByClientRequestRef,
  ]);
--- a/components/canvas/use-canvas-sync-engine.ts
+++ b/components/canvas/use-canvas-sync-engine.ts
@@ -214,6 +214,9 @@ export function createCanvasSyncEngineController({
  const pendingLocalNodeDataUntilConvexMatchesRef = {
    current: new Map<string, unknown>(),
  };
+  const pendingLocalNodeSizeUntilConvexMatchesRef = {
+    current: new Map<string, { width: number; height: number }>(),
+  };
  const preferLocalPositionNodeIdsRef = { current: new Set<string>() };

  const flushPendingResizeForClientRequest = async (
@@ -223,6 +226,10 @@ export function createCanvasSyncEngineController({
    const pendingResize = pendingResizeAfterCreateRef.current.get(clientRequestId);
    if (!pendingResize) return;
    pendingResizeAfterCreateRef.current.delete(clientRequestId);
+    pendingLocalNodeSizeUntilConvexMatchesRef.current.delete(
+      `${OPTIMISTIC_NODE_PREFIX}${clientRequestId}`,
+    );
+    pinNodeSizeLocally(realId as string, pendingResize);
    await getEnqueueSyncMutation()("resizeNode", {
      nodeId: realId,
      width: pendingResize.width,
@@ -245,6 +252,25 @@ export function createCanvasSyncEngineController({
    );
  };

+  const pinNodeSizeLocally = (nodeId: string, size: { width: number; height: number }): void => {
+    pendingLocalNodeSizeUntilConvexMatchesRef.current.set(nodeId, size);
+    const setNodes = getSetNodes?.();
+    setNodes?.((current) =>
+      current.map((node) =>
+        node.id === nodeId
+          ? {
+              ...node,
+              style: {
+                ...(node.style ?? {}),
+                width: size.width,
+                height: size.height,
+              },
+            }
+          : node,
+      ),
+    );
+  };
+
  const flushPendingDataForClientRequest = async (
    clientRequestId: string,
    realId: Id<"nodes">,
@@ -265,6 +291,10 @@ export function createCanvasSyncEngineController({
    height: number;
  }): Promise<void> => {
    const rawNodeId = args.nodeId as string;
+    pinNodeSizeLocally(rawNodeId, {
+      width: args.width,
+      height: args.height,
+    });
    if (!isOptimisticNodeId(rawNodeId) || !getIsSyncOnline()) {
      await getEnqueueSyncMutation()("resizeNode", args);
      return;
@@ -276,6 +306,11 @@ export function createCanvasSyncEngineController({
      : undefined;

    if (resolvedRealId) {
+      pendingLocalNodeSizeUntilConvexMatchesRef.current.delete(rawNodeId);
+      pinNodeSizeLocally(resolvedRealId as string, {
+        width: args.width,
+        height: args.height,
+      });
      await getEnqueueSyncMutation()("resizeNode", {
        nodeId: resolvedRealId,
        width: args.width,
@@ -337,6 +372,7 @@ export function createCanvasSyncEngineController({
        pendingMoveAfterCreateRef.current.delete(clientRequestId);
        pendingResizeAfterCreateRef.current.delete(clientRequestId);
        pendingDataAfterCreateRef.current.delete(clientRequestId);
+        pendingLocalNodeSizeUntilConvexMatchesRef.current.delete(realId as string);
        pendingLocalNodeDataUntilConvexMatchesRef.current.delete(realId as string);
        pendingEdgeSplitByClientRequestRef.current.delete(clientRequestId);
        pendingConnectionCreatesRef.current.delete(clientRequestId);
@@ -487,6 +523,7 @@ export function createCanvasSyncEngineController({
    pendingConnectionCreatesRef,
    pendingLocalPositionUntilConvexMatchesRef,
    pendingLocalNodeDataUntilConvexMatchesRef,
+    pendingLocalNodeSizeUntilConvexMatchesRef,
    preferLocalPositionNodeIdsRef,
    flushPendingResizeForClientRequest,
    flushPendingDataForClientRequest,
@@ -1858,6 +1895,8 @@ export function useCanvasSyncEngine({
        controller.pendingLocalPositionUntilConvexMatchesRef,
      pendingLocalNodeDataUntilConvexMatchesRef:
        controller.pendingLocalNodeDataUntilConvexMatchesRef,
+      pendingLocalNodeSizeUntilConvexMatchesRef:
+        controller.pendingLocalNodeSizeUntilConvexMatchesRef,
      preferLocalPositionNodeIdsRef: controller.preferLocalPositionNodeIdsRef,
      pendingCreatePromiseByClientRequestRef,
    },