From cc7c22a428a261f841787169f04147089c80355e Mon Sep 17 00:00:00 2001 From: Austin Mroz Date: Sun, 28 Sep 2025 00:09:19 -0500 Subject: [PATCH] Fix preview initialization --- .../node/useNodeCanvasImagePreview.ts | 2 +- src/core/graph/subgraph/proxyWidget.ts | 19 ++- src/services/litegraphService.ts | 114 +++++++++--------- 3 files changed, 68 insertions(+), 67 deletions(-) diff --git a/src/composables/node/useNodeCanvasImagePreview.ts b/src/composables/node/useNodeCanvasImagePreview.ts index 008119407..3d6c4cc4d 100644 --- a/src/composables/node/useNodeCanvasImagePreview.ts +++ b/src/composables/node/useNodeCanvasImagePreview.ts @@ -1,7 +1,7 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph' import { useImagePreviewWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget' -const CANVAS_IMAGE_PREVIEW_WIDGET = '$$canvas-image-preview' +export const CANVAS_IMAGE_PREVIEW_WIDGET = '$$canvas-image-preview' /** * Composable for handling canvas image previews in nodes diff --git a/src/core/graph/subgraph/proxyWidget.ts b/src/core/graph/subgraph/proxyWidget.ts index d54b1bfc2..bb35091ca 100644 --- a/src/core/graph/subgraph/proxyWidget.ts +++ b/src/core/graph/subgraph/proxyWidget.ts @@ -1,4 +1,4 @@ -import { useNodeImage } from '@/composables/node/useNodeImage' +import { CANVAS_IMAGE_PREVIEW_WIDGET } from '@/composables/node/useNodeCanvasImagePreview' import { parseProxyWidgets } from '@/core/schemas/proxyWidget' import type { LGraph, @@ -11,8 +11,8 @@ import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets.ts' import { disconnectedWidget } from '@/lib/litegraph/src/widgets/DisconnectedWidget' import { useCanvasStore } from '@/renderer/core/canvas/canvasStore' import { DOMWidgetImpl } from '@/scripts/domWidget' +import { useLitegraphService } from '@/services/litegraphService' import { useDomWidgetStore } from '@/stores/domWidgetStore' -import { useNodeOutputStore } from '@/stores/imagePreviewStore' import { getNodeByExecutionId } from '@/utils/graphTraversalUtil' /** @@ -137,23 +137,20 @@ function resolveLinkedWidget( if (!n) return [undefined, undefined] return [n, n.widgets?.find((w: IBaseWidget) => w.name === widgetName)] } + function addProxyFromOverlay(subgraphNode: SubgraphNode, overlay: Overlay) { + const { updatePreviews } = useLitegraphService() let [linkedNode, linkedWidget] = resolveLinkedWidget(overlay) let backingWidget = linkedWidget ?? disconnectedWidget - if (overlay.widgetName == '$$canvas-image-preview') + if (overlay.widgetName == CANVAS_IMAGE_PREVIEW_WIDGET) { overlay.node = new Proxy(subgraphNode, { get(_t, p) { if (p !== 'imgs') return Reflect.get(subgraphNode, p) if (!linkedNode) return [] - const images = - useNodeOutputStore().getNodeOutputs(linkedNode)?.images ?? [] - if (images !== linkedNode.images) { - linkedNode.images = images - useNodeImage(linkedNode).showPreview() - } return linkedNode.imgs } }) + } /** * A set of handlers which define widget interaction * Many arguments are shared between function calls @@ -182,7 +179,9 @@ function addProxyFromOverlay(subgraphNode: SubgraphNode, overlay: Overlay) { let redirectedReceiver = receiver if (property == 'value') redirectedReceiver = backingWidget else if (property == 'computedHeight') { - //update linkage regularly, but no more than once per frame + if (overlay.widgetName == CANVAS_IMAGE_PREVIEW_WIDGET && linkedNode) + updatePreviews(linkedNode) + //update linkage regularly, but no more than once per frame ;[linkedNode, linkedWidget] = resolveLinkedWidget(overlay) backingWidget = linkedWidget ?? disconnectedWidget } diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts index 8289018c7..d345acb67 100644 --- a/src/services/litegraphService.ts +++ b/src/services/litegraphService.ts @@ -853,6 +853,61 @@ export const useLitegraphService = () => { return [] } } + function updatePreviews(node: LGraphNode) { + try { + unsafeUpdatePreviews.call(node) + } catch (error) { + console.error('Error drawing node background', error) + } + } + function unsafeUpdatePreviews(this: LGraphNode) { + if (this.flags.collapsed) return + + const nodeOutputStore = useNodeOutputStore() + const { showAnimatedPreview, removeAnimatedPreview } = + useNodeAnimatedImage() + const { showCanvasImagePreview, removeCanvasImagePreview } = + useNodeCanvasImagePreview() + + const output = nodeOutputStore.getNodeOutputs(this) + const preview = nodeOutputStore.getNodePreviews(this) + + const isNewOutput = output && this.images !== output.images + const isNewPreview = preview && this.preview !== preview + + if (isNewPreview) this.preview = preview + if (isNewOutput) this.images = output.images + + if (isNewOutput || isNewPreview) { + this.animatedImages = output?.animated?.find(Boolean) + + const isAnimatedWebp = + this.animatedImages && + output?.images?.some((img) => img.filename?.includes('webp')) + const isAnimatedPng = + this.animatedImages && + output?.images?.some((img) => img.filename?.includes('png')) + const isVideo = + (this.animatedImages && !isAnimatedWebp && !isAnimatedPng) || + isVideoNode(this) + if (isVideo) { + useNodeVideo(this).showPreview() + } else { + useNodeImage(this).showPreview() + } + } + + // Nothing to do + if (!this.imgs?.length) return + + if (this.animatedImages) { + removeCanvasImagePreview(this) + showAnimatedPreview(this) + } else { + removeAnimatedPreview(this) + showCanvasImagePreview(this) + } + } /** * Adds Custom drawing logic for nodes @@ -868,62 +923,8 @@ export const useLitegraphService = () => { 'node.setSizeForImage is deprecated. Now it has no effect. Please remove the call to it.' ) } - - function unsafeDrawBackground(this: LGraphNode) { - if (this.flags.collapsed) return - - const nodeOutputStore = useNodeOutputStore() - const { showAnimatedPreview, removeAnimatedPreview } = - useNodeAnimatedImage() - const { showCanvasImagePreview, removeCanvasImagePreview } = - useNodeCanvasImagePreview() - - const output = nodeOutputStore.getNodeOutputs(this) - const preview = nodeOutputStore.getNodePreviews(this) - - const isNewOutput = output && this.images !== output.images - const isNewPreview = preview && this.preview !== preview - - if (isNewPreview) this.preview = preview - if (isNewOutput) this.images = output.images - - if (isNewOutput || isNewPreview) { - this.animatedImages = output?.animated?.find(Boolean) - - const isAnimatedWebp = - this.animatedImages && - output?.images?.some((img) => img.filename?.includes('webp')) - const isAnimatedPng = - this.animatedImages && - output?.images?.some((img) => img.filename?.includes('png')) - const isVideo = - (this.animatedImages && !isAnimatedWebp && !isAnimatedPng) || - isVideoNode(this) - if (isVideo) { - useNodeVideo(this).showPreview() - } else { - useNodeImage(this).showPreview() - } - } - - // Nothing to do - if (!this.imgs?.length) return - - if (this.animatedImages) { - removeCanvasImagePreview(this) - showAnimatedPreview(this) - } else { - removeAnimatedPreview(this) - showCanvasImagePreview(this) - } - } - node.prototype.onDrawBackground = function () { - try { - unsafeDrawBackground.call(this) - } catch (error) { - console.error('Error drawing node background', error) - } + updatePreviews(this) } } @@ -1053,6 +1054,7 @@ export const useLitegraphService = () => { getCanvasCenter, goToNode, resetView, - fitView + fitView, + updatePreviews } }