More control over how gallery selects images from events
This commit is contained in:
@@ -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({
|
||||
|
||||
Reference in New Issue
Block a user