From 92fbe1ea6b89fbd82f7bd12855a04acc36480683 Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Mon, 8 May 2023 19:32:57 -0500 Subject: [PATCH] Image dimensions output for image upload widget --- src/lib/nodes/ComfyActionNodes.ts | 1 - src/lib/nodes/ComfyPickFirstNode.ts | 17 ++++++++++---- src/lib/nodes/ComfyWidgetNodes.ts | 30 ++++++++++++++++++++---- src/lib/widgets/GalleryWidget.svelte | 7 +++--- src/lib/widgets/ImageUploadWidget.svelte | 23 +++++++++++++++++- 5 files changed, 63 insertions(+), 15 deletions(-) diff --git a/src/lib/nodes/ComfyActionNodes.ts b/src/lib/nodes/ComfyActionNodes.ts index 6fafe33..b1d5ccb 100644 --- a/src/lib/nodes/ComfyActionNodes.ts +++ b/src/lib/nodes/ComfyActionNodes.ts @@ -306,7 +306,6 @@ export class ComfySetNodeModeAction extends ComfyGraphNode { } else { newMode = NodeMode.NEVER; } - console.warn("CHANGEMODE", newMode == NodeMode.ALWAYS ? "ALWAYS" : "NEVER", tags, node) node.changeMode(newMode); if ("notifyPropsChanged" in node) (node as ComfyWidgetNode).notifyPropsChanged(); diff --git a/src/lib/nodes/ComfyPickFirstNode.ts b/src/lib/nodes/ComfyPickFirstNode.ts index 481d1fd..ef31b7a 100644 --- a/src/lib/nodes/ComfyPickFirstNode.ts +++ b/src/lib/nodes/ComfyPickFirstNode.ts @@ -1,9 +1,11 @@ -import { BuiltInSlotType, LiteGraph, NodeMode, type INodeInputSlot, type SlotLayout, type INodeOutputSlot, LLink, LConnectionKind, type ITextWidget } from "@litegraph-ts/core"; +import { BuiltInSlotType, LiteGraph, NodeMode, type INodeInputSlot, type SlotLayout, type INodeOutputSlot, LLink, LConnectionKind, type ITextWidget, type SerializedLGraphNode, type IComboWidget } from "@litegraph-ts/core"; import ComfyGraphNode, { type ComfyGraphNodeProperties } from "./ComfyGraphNode"; import { Watch } from "@litegraph-ts/nodes-basic"; +export type PickFirstMode = "anyActiveLink" | "truthy" | "dataNonNull" + export interface ComfyPickFirstNodeProperties extends ComfyGraphNodeProperties { - acceptNullLinkData: boolean + mode: PickFirstMode } function nextLetter(s: string): string { @@ -20,7 +22,7 @@ function nextLetter(s: string): string { export default class ComfyPickFirstNode extends ComfyGraphNode { override properties: ComfyPickFirstNodeProperties = { tags: [], - acceptNullLinkData: false + mode: "dataNonNull" } static slotLayout: SlotLayout = { @@ -38,11 +40,13 @@ export default class ComfyPickFirstNode extends ComfyGraphNode { private selected: number = -1; displayWidget: ITextWidget; + modeWidget: IComboWidget; constructor(title?: string) { super(title); this.displayWidget = this.addWidget("text", "Value", "") this.displayWidget.disabled = true; + this.modeWidget = this.addWidget("combo", "Mode", this.properties.mode, null, { property: "mode", values: ["anyActiveLink", "truthy", "dataNonNull"] }) } override onDrawBackground(ctx: CanvasRenderingContext2D) { @@ -117,7 +121,12 @@ export default class ComfyPickFirstNode extends ComfyGraphNode { return true; } else { - return link.data != null || this.properties.acceptNullLinkData; + if (this.properties.mode === "dataNonNull") + return link.data != null; + else if (this.properties.mode === "truthy") + return Boolean(link.data) + else // anyActiveLink + return true; } } diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts index 58e485e..72a6b35 100644 --- a/src/lib/nodes/ComfyWidgetNodes.ts +++ b/src/lib/nodes/ComfyWidgetNodes.ts @@ -594,6 +594,7 @@ export class ComfyGalleryNode extends ComfyWidgetNode { } override setValue(value: any) { + console.warn("SETVALUE", value) if (Array.isArray(value)) { super.setValue(value) } @@ -669,6 +670,10 @@ export class ComfyCheckboxNode extends ComfyWidgetNode { } static slotLayout: SlotLayout = { + inputs: [ + { name: "value", type: "boolean" }, + { name: "store", type: BuiltInSlotType.ACTION } + ], outputs: [ { name: "value", type: "boolean" }, { name: "changed", type: BuiltInSlotType.EVENT }, @@ -678,6 +683,10 @@ export class ComfyCheckboxNode extends ComfyWidgetNode { override svelteComponentType = CheckboxWidget; override defaultValue = false; + constructor(name?: string) { + super(name, false) + } + override setValue(value: any) { value = Boolean(value) const changed = value != get(this.value); @@ -686,8 +695,9 @@ export class ComfyCheckboxNode extends ComfyWidgetNode { this.triggerSlot(1, value) } - constructor(name?: string) { - super(name, false) + override onAction(action: any, param: any) { + if (action === "store") + this.setValue(Boolean(param)) } } @@ -770,6 +780,8 @@ export class ComfyImageUploadNode extends ComfyWidgetNode> static slotLayout: SlotLayout = { outputs: [ { name: "filename", type: "string" }, // TODO support batches + { name: "width", type: "number" }, + { name: "height", type: "number" }, { name: "changed", type: BuiltInSlotType.EVENT }, ] } @@ -777,7 +789,9 @@ export class ComfyImageUploadNode extends ComfyWidgetNode> override svelteComponentType = ImageUploadWidget; override defaultValue = null; override outputIndex = null; - override changedIndex = 1; + override changedIndex = 3; + + imageSize: Vector2 = [1, 1]; constructor(name?: string) { super(name, []) @@ -787,10 +801,16 @@ export class ComfyImageUploadNode extends ComfyWidgetNode> super.onExecute(param, options); const value = get(this.value) - if (value.length > 0 && value[0].name) + if (value.length > 0 && value[0].name) { this.setOutputData(0, value[0].name) // TODO when ComfyUI LoadImage supports loading an image batch - else + this.setOutputData(1, this.imageSize[0]) + this.setOutputData(2, this.imageSize[1]) + } + else { this.setOutputData(0, "") + this.setOutputData(1, 1) + this.setOutputData(2, 1) + } } override formatValue(value: GradioFileData[]): string { diff --git a/src/lib/widgets/GalleryWidget.svelte b/src/lib/widgets/GalleryWidget.svelte index 2d71fca..03db27e 100644 --- a/src/lib/widgets/GalleryWidget.svelte +++ b/src/lib/widgets/GalleryWidget.svelte @@ -37,8 +37,7 @@ }; let style: Styles = { - grid_cols: [4], - grid_rows: [4], + grid_cols: [3], object_fit: "cover", } let element: HTMLDivElement; @@ -125,11 +124,11 @@ } -{#if widget && node && nodeValue && $nodeValue != null} +{#if widget && node && nodeValue} {#if widget.attrs.variant === "image"}
- {#if $nodeValue.length > 0} + {#if $nodeValue && $nodeValue.length > 0} | null = null; + let imgElem: HTMLImageElement | null = null + let imgWidth: number = 1; + let imgHeight: number = 1; $: widget && setNodeValue(widget); @@ -35,6 +39,18 @@ } }; + $: if (!(node && _value && _value.length > 0 && imgElem)) { + imgWidth = 1 + imgHeight = 1 + node.imageSize = [1, 1] + } + else if (imgWidth > 1 || imgHeight > 1) { + node.imageSize = [imgWidth, imgHeight] + } + else { + node.imageSize = [1, 1] + } + function onChange() { console.warn("CHANGED", _value) $nodeValue = _value || [] @@ -191,7 +207,12 @@ {#if _value && _value.length > 0 && !pending_upload} {@const firstImage = _value[0]} - {firstImage.orig_name} + {firstImage.orig_name} {:else}