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

@@ -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', () => {

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
   }