More control over how gallery selects images from events

This commit is contained in:
space-nuko
2023-05-22 20:42:41 -05:00
parent 6817e6ad95
commit e90773fdc8
14 changed files with 96 additions and 25 deletions

View File

@@ -17,7 +17,7 @@ export default class ComfyNoChangeEvent extends ComfyGraphNode {
}
else {
param = {
value: param,
__widgetValue__: param,
noChangedEvent: true
}
}

View File

@@ -31,6 +31,13 @@ export default class ComfyExecuteSubgraphAction extends ComfyGraphNode {
this.setProperty("tag", tag)
}
override getTitle(): string {
if (this.flags.collapsed) {
return "Execute: " + String(this.properties.targetTag);
}
return this.title;
}
override onAction(action: any, param: any) {
const tag = this.getInputData(1) || this.properties.targetTag;

View File

@@ -27,7 +27,7 @@ export default class ComfyReceiveOutputNode extends ComfyGraphNode {
static slotLayout: SlotLayout = {
outputs: [
{ name: "received", type: BuiltInSlotType.EVENT }
{ name: "received", type: BuiltInSlotType.EVENT, options: { color_off: "fuchsia", color_on: "fuchsia" } }
]
}

View File

@@ -1,5 +1,5 @@
import { parseWhateverIntoImageMetadata, type ComfyBoxImageMetadata, type ComfyUploadImageType } from "$lib/utils";
import { BuiltInSlotType, LiteGraph, type IComboWidget, type ITextWidget, type PropertyLayout, type SlotLayout, type INumberWidget } from "@litegraph-ts/core";
import { BuiltInSlotType, LiteGraph, type IComboWidget, type ITextWidget, type PropertyLayout, type SlotLayout, type INumberWidget, clamp } from "@litegraph-ts/core";
import { get, writable, type Writable } from "svelte/store";
import GalleryWidget from "$lib/widgets/GalleryWidget.svelte";
@@ -9,6 +9,7 @@ import ComfyWidgetNode from "./ComfyWidgetNode";
export interface ComfyGalleryProperties extends ComfyWidgetProperties {
index: number | null,
updateMode: "replace" | "append",
autoSelectOnUpdate: boolean
}
export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetadata[]> {
@@ -17,6 +18,7 @@ export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetad
defaultValue: [],
index: 0,
updateMode: "replace",
autoSelectOnUpdate: true
}
static slotLayout: SlotLayout = {
@@ -42,17 +44,18 @@ export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetad
selectedFilename: string | null = null;
selectedIndexWidget: INumberWidget;
selectedIndexWidget: ITextWidget;
modeWidget: IComboWidget;
imageWidth: Writable<number> = writable(0);
imageHeight: Writable<number> = writable(0);
selectedImage: Writable<number | null> = writable(null);
forceSelectImage: Writable<boolean | null> = writable(null);
constructor(name?: string) {
super(name, [])
this.selectedIndexWidget = this.addWidget("number", "Selected", get(this.selectedImage))
this.selectedIndexWidget = this.addWidget("text", "Selected", String(get(this.selectedImage)))
this.selectedIndexWidget.disabled = true;
this.modeWidget = this.addWidget("combo", "Mode", this.properties.updateMode, null, { property: "updateMode", values: ["replace", "append"] })
}
@@ -69,7 +72,7 @@ export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetad
this.setOutputData(0, value)
this.setOutputData(1, index)
this.selectedIndexWidget.value = index;
this.selectedIndexWidget.value = String(index);
if (index != null && value && value[index] != null) {
const image = value[index];
@@ -86,29 +89,58 @@ export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetad
return `Images: ${value?.length || 0}`
}
override setValue(value: ComfyBoxImageMetadata[], noChangedEvent: boolean = false) {
super.setValue(value, noChangedEvent)
const newIndex = this._newSelectedIndex;
this._newSelectedIndex = null;
if (newIndex != null) {
this.selectedImage.set(newIndex)
this.forceSelectImage.set(true)
}
}
private _newSelectedIndex: number | null = null;
override parseValue(param: any): ComfyBoxImageMetadata[] {
if (param == null)
return []
let updateMode = this.properties.updateMode;
let selectedIndex: number | null = null;
if (typeof param === "object" && param.galleryImages != null) {
selectedIndex = param.selectedIndex;
updateMode = param.updateMode || updateMode;
param = param.galleryImages;
}
const meta = parseWhateverIntoImageMetadata(param) || [];
console.debug("[ComfyGalleryNode] Received output!", param)
if (this.properties.updateMode === "append") {
if (updateMode === "append") {
const currentValue = get(this.value)
if (meta.length > 0)
this.selectedImage.set(currentValue.length);
if (meta.length > 0 && (selectedIndex != null || this.properties.autoSelectOnUpdate)) {
let index = selectedIndex
if (index == null)
index = 0;
this._newSelectedIndex = clamp(currentValue.length + index, 0, currentValue.length + meta.length - 1)
}
return currentValue.concat(meta)
}
else {
this.notifyPropsChanged();
if (meta.length > 0 && (selectedIndex != null || this.properties.autoSelectOnUpdate)) {
let index = selectedIndex;
if (index == null)
index = get(this.selectedImage)
if (index != null)
this._newSelectedIndex = clamp(index, 0, meta.length - 1)
}
return meta;
}
}
override setValue(value: any, noChangedEvent: boolean = false) {
super.setValue(value, noChangedEvent)
}
}
LiteGraph.registerNodeType({

View File

@@ -239,8 +239,8 @@ export default abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
if (action === this.storeActionName) {
let noChangedEvent = false;
let value = param;
if (param != null && typeof param === "object" && "value" in param) {
value = param.value
if (param != null && typeof param === "object" && "__widgetValue__" in param) {
value = param.__widgetValue__
if ("noChangedEvent" in param)
noChangedEvent = Boolean(param.noChangedEvent)
}