From 31ecb276f81d5b2a833e55aa85afd89883e5740c Mon Sep 17 00:00:00 2001
From: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
Date: Sun, 21 Dec 2025 06:29:10 +0900
Subject: [PATCH] [backport cloud/1.35] Fix buttons displayed behind images in
 litegraph (#7685)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Backport of #7627 to `cloud/1.35`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7685-backport-cloud-1-35-Fix-buttons-displayed-behind-images-in-litegraph-2cf6d73d3650819c9f0aeaaad05abd48)
by [Unito](https://www.unito.io)

Co-authored-by: AustinMroz <austin@comfy.org>
Co-authored-by: github-actions <github-actions@github.com>
---
 browser_tests/tests/widget.spec.ts            |  26 ++++++++++++++++++
 ...ge-preview-close-button-chromium-linux.png | Bin 0 -> 423 bytes
 .../composables/useImagePreviewWidget.ts      |  21 ++++++++------
 3 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 browser_tests/tests/widget.spec.ts-snapshots/image-preview-close-button-chromium-linux.png

diff --git a/browser_tests/tests/widget.spec.ts b/browser_tests/tests/widget.spec.ts
index 002ad2924..27c056920 100644
--- a/browser_tests/tests/widget.spec.ts
+++ b/browser_tests/tests/widget.spec.ts
@@ -205,6 +205,32 @@ test.describe('Image widget', () => {
     const filename = await fileComboWidget.getValue()
     expect(filename).toBe('image32x32.webp')
   })
+  test('Displays buttons when viewing single image of batch', async ({
+    comfyPage
+  }) => {
+    const [x, y] = await comfyPage.page.evaluate(() => {
+      const src =
+        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='512' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' stroke='black'/%3E%3C/svg%3E"
+      const image1 = new Image()
+      image1.src = src
+      const image2 = new Image()
+      image2.src = src
+      const targetNode = graph.nodes[6]
+      targetNode.imgs = [image1, image2]
+      targetNode.imageIndex = 1
+      app.canvas.setDirty(true)
+
+      const x = targetNode.pos[0] + targetNode.size[0] - 41
+      const y = targetNode.pos[1] + targetNode.widgets.at(-1).last_y + 30
+      return app.canvasPosToClientPos([x, y])
+    })
+
+    const clip = { x, y, width: 35, height: 35 }
+    await expect(comfyPage.page).toHaveScreenshot(
+      'image_preview_close_button.png',
+      { clip }
+    )
+  })
 })
 
 test.describe('Animated image widget', () => {
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/image-preview-close-button-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/image-preview-close-button-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..cac60a656e7d35b34e0a01d2077235c563dc08e2
GIT binary patch
literal 423
zcmV;Y0a*TtP)<h;3K|Lk000e1NJLTq001KZ001Kh0ssI2k-H=g00048Nkl<Zc%1B)
zKdXXJ7>D0m5*0yhMQc;g7HzFTV>C2HYb~w1iKCOBz^~!QaM8^_i;KF5f~bSyJ?9Q`
zuUxnu>Ns3{;J~XKeh(ZyuO0^4f`PX9$EN9Yx>ziR!y&`G>dx~#%QDaNqA2=){{xNL
zY_?jh;N94^9fo0b*+XMKp92MIv3RXUqY+S`7K=^&ejg}Mi|zJPXX;Gvqt|fWdcA%;
z9#wt6-+_>(Cc`lH`~CHLMa`b)`5*{@5Zo}9%jKW*%CginjpI1f&Bo)gBuUT!*LAC!
z;5k{Ar6|hnb~~L;Ku*)uLrf-<<M9~B@#S&>atKT;%j&xRd_K?T^JcRFLYkTmhr@2S
z6GhQ9O<9%&K^P1MKmz`{Z?{{ZgQ}`k-F2hR^b`D+7exUSsKsJanx;U3S}ZpCz7G_r
z#o}I$e%O;FL3_UU1-u420iZO;aeg@gw8JL=00960F3jK_00006Nkl<Z0{~9^Yo6fA
R!utRK002ovPDHLkV1nid#2^3w

literal 0
HcmV?d00001

diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
index 304501284..929aa96de 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
@@ -265,14 +265,19 @@ const renderPreview = (
       }
     }
 
-    ctx.fillStyle = fill
-    ctx.beginPath()
-    ctx.roundRect(x, y, sz, sz, [4])
-    ctx.fill()
-    ctx.fillStyle = textFill
-    ctx.font = '12px Inter, sans-serif'
-    ctx.textAlign = 'center'
-    ctx.fillText(text, x + 15, y + 20)
+    deferredImageRenders.push(() => {
+      ctx.save()
+      ctx.setTransform(transform)
+      ctx.fillStyle = fill
+      ctx.beginPath()
+      ctx.roundRect(x, y, sz, sz, [4])
+      ctx.fill()
+      ctx.fillStyle = textFill
+      ctx.font = '12px Inter, sans-serif'
+      ctx.textAlign = 'center'
+      ctx.fillText(text, x + 15, y + 20)
+      ctx.restore()
+    })
 
     return isClicking
   }