From 0977e6e7515ca2416673d22be9e5fcbde5c8b818 Mon Sep 17 00:00:00 2001
From: AustinMroz <austin@comfy.org>
Date: Sat, 20 Dec 2025 13:14:58 -0800
Subject: [PATCH] Fix buttons displayed behind images in litegraph (#7627)

#7394 caused a regression with preview image buttons showing behind the
image in litegraph. This is fixed by also deferring button draws

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/4c3b02e0-4951-403d-98b8-b01a01512d21"/>
| <img width="360" alt="after"
src="https://github.com/user-attachments/assets/7a4fb8e4-8caa-47f3-939d-8d8ddc0e71b4"
/>|

---------

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 61031e79e..c8448f36c 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
   }