From d3c64d404bec2c2a7373c701bb385c78a077a034 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Tue, 25 Mar 2025 10:51:04 -0400
Subject: [PATCH] [Bug] Fix selection toolbox position on pasted node (#3231)

---
 browser_tests/tests/selectionToolbox.spec.ts | 23 ++++++++++++++++++++
 src/components/graph/SelectionOverlay.vue    |  7 ++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/browser_tests/tests/selectionToolbox.spec.ts b/browser_tests/tests/selectionToolbox.spec.ts
index 7fbd288b2..6bc713b78 100644
--- a/browser_tests/tests/selectionToolbox.spec.ts
+++ b/browser_tests/tests/selectionToolbox.spec.ts
@@ -30,6 +30,29 @@ test.describe('Selection Toolbox', () => {
     ).toBeVisible()
   })
 
+  test('shows at correct position when node is pasted', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('single_ksampler')
+    await comfyPage.selectNodes(['KSampler'])
+    await comfyPage.ctrlC()
+    await comfyPage.page.mouse.move(100, 100)
+    await comfyPage.ctrlV()
+
+    const overlayContainer = comfyPage.page.locator(
+      '.selection-overlay-container'
+    )
+    await expect(overlayContainer).toBeVisible()
+
+    // Verify the absolute position
+    const boundingBox = await overlayContainer.boundingBox()
+    expect(boundingBox).not.toBeNull()
+    // 10px offset for the pasted node
+    expect(Math.round(boundingBox!.x)).toBeCloseTo(90, -1) // Allow ~10px tolerance
+    // 30px offset of node title height
+    expect(Math.round(boundingBox!.y)).toBeCloseTo(60, -1)
+  })
+
   test('shows border only with multiple selections', async ({ comfyPage }) => {
     // Select single node
     await comfyPage.selectNodes(['KSampler'])
diff --git a/src/components/graph/SelectionOverlay.vue b/src/components/graph/SelectionOverlay.vue
index f5d8c8df5..5f13aedb8 100644
--- a/src/components/graph/SelectionOverlay.vue
+++ b/src/components/graph/SelectionOverlay.vue
@@ -52,8 +52,11 @@ watch(
   (canvas: LGraphCanvas | null) => {
     if (!canvas) return
 
-    canvas.onSelectionChange = useChainCallback(canvas.onSelectionChange, () =>
-      positionSelectionOverlay(canvas)
+    canvas.onSelectionChange = useChainCallback(
+      canvas.onSelectionChange,
+      // Wait for next frame as sometimes the selected items haven't been
+      // rendered yet, so the boundingRect is not available on them.
+      () => requestAnimationFrame(() => positionSelectionOverlay(canvas))
     )
   },
   { immediate: true }