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

@@ -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({