diff --git a/src/composables/node/useNodeImage.ts b/src/composables/node/useNodeImage.ts index ad0a041787..aad473ae7c 100644 --- a/src/composables/node/useNodeImage.ts +++ b/src/composables/node/useNodeImage.ts @@ -98,7 +98,7 @@ const useNodePreview = ( /** * Attaches a preview image to a node. */ -export const useNodeImage = (node: LGraphNode) => { +export const useNodeImage = (node: LGraphNode, callback?: () => void) => { node.previewMediaType = 'image' const loadElement = (url: string): Promise => @@ -112,6 +112,7 @@ export const useNodeImage = (node: LGraphNode) => { const onLoaded = (elements: HTMLImageElement[]) => { node.imageIndex = null node.imgs = elements + callback?.() } return useNodePreview(node, { @@ -126,7 +127,7 @@ export const useNodeImage = (node: LGraphNode) => { /** * Attaches a preview video to a node. */ -export const useNodeVideo = (node: LGraphNode) => { +export const useNodeVideo = (node: LGraphNode, callback?: () => void) => { node.previewMediaType = 'video' let minHeight = DEFAULT_VIDEO_SIZE let minWidth = DEFAULT_VIDEO_SIZE @@ -187,6 +188,7 @@ export const useNodeVideo = (node: LGraphNode) => { } node.videoContainer.replaceChildren(videoElement) + callback?.() } return useNodePreview(node, { diff --git a/src/core/graph/subgraph/proxyWidget.ts b/src/core/graph/subgraph/proxyWidget.ts index d7d76a9d10..3879fed8af 100644 --- a/src/core/graph/subgraph/proxyWidget.ts +++ b/src/core/graph/subgraph/proxyWidget.ts @@ -121,7 +121,6 @@ function addProxyWidget( afterQueued: undefined, computedHeight: undefined, isProxyWidget: true, - label: name, last_y: undefined, name, node: subgraphNode, diff --git a/src/core/graph/subgraph/proxyWidgetUtils.ts b/src/core/graph/subgraph/proxyWidgetUtils.ts index e13cc99429..2d4ed5eb04 100644 --- a/src/core/graph/subgraph/proxyWidgetUtils.ts +++ b/src/core/graph/subgraph/proxyWidgetUtils.ts @@ -119,9 +119,15 @@ export function promoteRecommendedWidgets(subgraphNode: SubgraphNode) { const interiorNodes = subgraphNode.subgraph.nodes for (const node of interiorNodes) { node.updateComputedDisabled() - //NOTE: Since this operation is async, previews still don't exist after the single frame - //Add an onLoad callback to updatePreviews? - updatePreviews(node) + function checkWidgets() { + updatePreviews(node) + const widget = node.widgets?.find((w) => w.name.startsWith('$$')) + if (!widget) return + const pw = getProxyWidgets(subgraphNode) + if (pw.some(matchesPropertyItem([node, widget]))) return + promoteWidget(node, widget, [subgraphNode]) + } + requestAnimationFrame(() => updatePreviews(node, checkWidgets)) } const filteredWidgets: WidgetItem[] = interiorNodes .flatMap(nodeWidgets) diff --git a/src/core/schemas/proxyWidget.ts b/src/core/schemas/proxyWidget.ts index 307c4987ac..d2df586fcb 100644 --- a/src/core/schemas/proxyWidget.ts +++ b/src/core/schemas/proxyWidget.ts @@ -9,7 +9,10 @@ export type ProxyWidgetsProperty = z.infer export function parseProxyWidgets( property: NodeProperty | undefined ): ProxyWidgetsProperty { - const result = proxyWidgetsPropertySchema.safeParse(property) + if (typeof property === 'string') property = JSON.parse(property) + const result = proxyWidgetsPropertySchema.safeParse( + typeof property === 'string' ? JSON.parse(property) : property + ) if (result.success) return result.data const error = fromZodError(result.error) diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts index d345acb673..bf9d74db00 100644 --- a/src/services/litegraphService.ts +++ b/src/services/litegraphService.ts @@ -853,14 +853,14 @@ export const useLitegraphService = () => { return [] } } - function updatePreviews(node: LGraphNode) { + function updatePreviews(node: LGraphNode, callback?: () => void) { try { - unsafeUpdatePreviews.call(node) + unsafeUpdatePreviews.call(node, callback) } catch (error) { console.error('Error drawing node background', error) } } - function unsafeUpdatePreviews(this: LGraphNode) { + function unsafeUpdatePreviews(this: LGraphNode, callback?: () => void) { if (this.flags.collapsed) return const nodeOutputStore = useNodeOutputStore() @@ -891,9 +891,9 @@ export const useLitegraphService = () => { (this.animatedImages && !isAnimatedWebp && !isAnimatedPng) || isVideoNode(this) if (isVideo) { - useNodeVideo(this).showPreview() + useNodeVideo(this, callback).showPreview() } else { - useNodeImage(this).showPreview() + useNodeImage(this, callback).showPreview() } }