Draw canvas image preview in a widget (#2952)

src/composables/node/useNodeAnimatedImage.ts

@@ -29,7 +29,6 @@ export function useNodeAnimatedImage() {
     } else {
       // Create new widget
       const host = createImageHost(node)
-      node.setSizeForImage?.(true)
       // @ts-expect-error host is not a standard DOM widget option.
       const widget = node.addDOMWidget(ANIM_PREVIEW_WIDGET, 'img', host.el, {
         host,

src/composables/node/useNodeCanvasImagePreview.ts

@@ -0,0 +1,49 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+
+import { useImagePreviewWidget } from '@/composables/widgets/useImagePreviewWidget'
+
+const CANVAS_IMAGE_PREVIEW_WIDGET = '$$canvas-image-preview'
+
+/**
+ * Composable for handling canvas image previews in nodes
+ */
+export function useNodeCanvasImagePreview() {
+  const imagePreviewWidget = useImagePreviewWidget()
+  /**
+   * Shows canvas image preview for a node
+   * @param node The graph node to show the preview for
+   */
+  function showCanvasImagePreview(node: LGraphNode) {
+    if (!node.imgs?.length) return
+    if (!node.widgets) return
+
+    if (!node.widgets.find((w) => w.name === CANVAS_IMAGE_PREVIEW_WIDGET)) {
+      imagePreviewWidget(node, {
+        type: 'IMAGE_PREVIEW',
+        name: CANVAS_IMAGE_PREVIEW_WIDGET
+      })
+    }
+  }
+
+  /**
+   * Removes canvas image preview from a node
+   * @param node The graph node to remove the preview from
+   */
+  function removeCanvasImagePreview(node: LGraphNode) {
+    if (!node.widgets) return
+
+    const widgetIdx = node.widgets.findIndex(
+      (w) => w.name === CANVAS_IMAGE_PREVIEW_WIDGET
+    )
+
+    if (widgetIdx > -1) {
+      node.widgets[widgetIdx].onRemove?.()
+      node.widgets.splice(widgetIdx, 1)
+    }
+  }
+
+  return {
+    showCanvasImagePreview,
+    removeCanvasImagePreview
+  }
+}

src/composables/node/useNodeImage.ts

@@ -111,7 +111,6 @@ export const useNodeImage = (node: LGraphNode) => {
   const onLoaded = (elements: HTMLImageElement[]) => {
     node.imageIndex = null
     node.imgs = elements
-    node.setSizeForImage?.()
   }
 
   return useNodePreview(node, {
@@ -159,7 +158,6 @@ export const useNodeVideo = (node: LGraphNode) => {
 
     node.videoContainer.replaceChildren(videoElement)
     node.imageOffset = VIDEO_PIXEL_OFFSET
-    node.setSizeForImage?.(true)
   }
 
   return useNodePreview(node, {