neuro_llc/ComfyBox
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Gallery widget selected index

Browse Source
This commit is contained in:
space-nuko
2023-05-05 21:21:56 -05:00
parent ad35826c7b
commit df4f2b2d57
7 changed files with 52 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/ComfyApp.svelte
View File

@@ -47,10 +47,7 @@
function queuePrompt() {
console.log("Queuing!");
let subworkflow = $uiState.subWorkflow;
if (subworkflow === "")
subworkflow = null
app.queuePrompt(0, 1, subworkflow);
app.queuePrompt(0, 1);
}
$: if (app?.lCanvas) app.lCanvas.allow_dragnodes = !$uiState.nodesLocked;
@@ -233,7 +230,6 @@
<!-- <Checkbox label="Lock Nodes" bind:value={$uiState.nodesLocked}/>
<Checkbox label="Disable Interaction" bind:value={$uiState.graphLocked}/> -->
<Checkbox label="Auto-Add UI" bind:value={$uiState.autoAddUI}/>
<TextBox bind:value={$uiState.subWorkflow} label="Subworkflow" show_label={true} lines={1} max_lines={1}/>
<label class="label" for="enable-ui-editing">
<BlockTitle>Enable UI Editing</BlockTitle>
<select id="enable-ui-editing" name="enable-ui-editing" bind:value={$uiState.uiEditMode}>

2
src/lib/components/ComfyComboProperty.svelte
View File

@@ -7,6 +7,7 @@
export let name: string = "";
let value_: string = ""
$: value;
$: handleChange(value);
const dispatch = createEventDispatcher<{
@@ -16,6 +17,7 @@
}>();
function handleChange(val: string) {
console.debug("combo handleChange", val, value_)
if (val != value_)
dispatch("change", val);
value_ = val

18
src/lib/components/ComfyProperties.svelte
View File

@@ -48,7 +48,7 @@
return spec.name in node.properties
}
function updateAttribute(entry: AttributesSpec, value: any) {
function updateAttribute(entry: AttributesSpec, target: IDragItem, value: any) {
if (target) {
const name = entry.name
console.warn("updateAttribute", name, value)
@@ -136,15 +136,15 @@
{#if spec.type === "string"}
<TextBox
value={target.attrs[spec.name]}
on:change={(e) => updateAttribute(spec, e.detail)}
on:input={(e) => updateAttribute(spec, e.detail)}
on:change={(e) => updateAttribute(spec, target, e.detail)}
on:input={(e) => updateAttribute(spec, target, e.detail)}
label={spec.name}
max_lines={1}
/>
{:else if spec.type === "boolean"}
<Checkbox
value={target.attrs[spec.name]}
on:change={(e) => updateAttribute(spec, e.detail)}
on:change={(e) => updateAttribute(spec, target, e.detail)}
label={spec.name}
/>
{:else if spec.type === "number"}
@@ -152,14 +152,14 @@
name={spec.name}
value={target.attrs[spec.name]}
step={1}
on:change={(e) => updateAttribute(spec, e.detail)}
on:change={(e) => updateAttribute(spec, target, e.detail)}
/>
{:else if spec.type === "enum"}
<ComfyComboProperty
name={spec.name}
value={target.attrs[spec.name]}
values={spec.values}
on:changed={(e) => updateAttribute(spec, e.detail)}
on:change={(e) => updateAttribute(spec, target, e.detail)}
/>
{/if}
</div>
@@ -192,7 +192,7 @@
name={spec.name}
value={node.properties[spec.name]}
values={spec.values}
on:changed={(e) => updateProperty(spec, e.detail)}
on:change={(e) => updateProperty(spec, e.detail)}
/>
{/if}
</div>
@@ -224,7 +224,7 @@
name={spec.name}
value={getVar(node, spec)}
values={spec.values}
on:changed={(e) => updateVar(spec, e.detail)}
on:change={(e) => updateVar(spec, e.detail)}
/>
{/if}
</div>
@@ -257,7 +257,7 @@
name={spec.name}
value={$layoutState.attrs[spec.name]}
values={spec.values}
on:changed={(e) => updateWorkflowAttribute(spec, e.detail)}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
/>
{/if}
</div>

4
src/lib/nodes/ComfyImageCacheNode.ts
View File

@@ -96,11 +96,11 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
}
private setIndex(newIndex: number, force: boolean = false) {
console.debug("[ComfyImageCacheNode] setIndex", newIndex, force)
if (newIndex === this.properties.index && !force)
return;
console.debug("[ComfyImageCacheNode] setIndex", newIndex, force)
if (!this.properties.images || newIndex < 0 || newIndex >= this.properties.images.images.length) {
console.debug("[ComfyImageCacheNode] invalid indexes", newIndex, this.properties.images)
return

48
src/lib/nodes/ComfyWidgetNodes.ts
View File

@@ -48,9 +48,9 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
override isBackendNode = false;
override serialize_widgets = true;
outputIndex: number = 0;
outputIndex: number | null = 0;
inputIndex: number = 0;
changedIndex: number = 1;
changedIndex: number | null = 1;
displayWidget: ITextWidget;
@@ -91,10 +91,10 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
console.debug("[Widget] valueUpdated", this, value)
this.displayWidget.value = this.formatValue(value)
if (this.outputs.length >= this.outputIndex) {
if (this.outputIndex !== null && this.outputs.length >= this.outputIndex) {
this.setOutputData(this.outputIndex, get(this.value))
}
if (this.outputs.length >= this.changedIndex) {
if (this.changedIndex !== null & this.outputs.length >= this.changedIndex) {
const changedOutput = this.outputs[this.changedIndex]
if (changedOutput.type === BuiltInSlotType.EVENT)
this.triggerSlot(this.changedIndex, "changed")
@@ -407,34 +407,45 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
static slotLayout: SlotLayout = {
inputs: [
{ name: "images", type: "OUTPUT" },
{ name: "store", type: BuiltInSlotType.ACTION }
{ name: "store", type: BuiltInSlotType.ACTION },
{ name: "clear", type: BuiltInSlotType.ACTION }
],
outputs: [
{ name: "selected_index", type: "number" }
]
}
override svelteComponentType = GalleryWidget
override copyFromInputLink = false;
override outputIndex = null;
override changedIndex = null;
index: number = 0;
constructor(name?: string) {
super(name, [])
}
override afterQueued() {
let queue = get(queueState)
if (!(typeof queue.queueRemaining === "number" && queue.queueRemaining > 1)) {
this.setValue([])
}
override onExecute() {
this.setOutputData(0, this.index)
}
override onAction() {
const link = this.getInputLink(0)
if (link.data && "images" in link.data) {
const data = link.data as GalleryOutput
console.debug("[ComfyGalleryNode] Received output!", data)
override onAction(action: any) {
if (action === "clear") {
this.setValue([])
}
else if (action === "store") {
const link = this.getInputLink(0)
if (link.data && "images" in link.data) {
const data = link.data as GalleryOutput
console.debug("[ComfyGalleryNode] Received output!", data)
const galleryItems: GradioFileData[] = this.convertItems(link.data)
const galleryItems: GradioFileData[] = this.convertItems(link.data)
const currentValue = get(this.value)
this.setValue(currentValue.concat(galleryItems))
// const currentValue = get(this.value)
// this.setValue(currentValue.concat(galleryItems))
this.setValue(galleryItems)
}
}
}
@@ -461,6 +472,7 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
else {
super.setValue([])
}
this.index = 0;
}
}

2
src/lib/stores/uiState.ts
View File

@@ -10,7 +10,6 @@ export type UIState = {
graphLocked: boolean,
autoAddUI: boolean,
uiEditMode: UIEditMode,
subWorkflow: string
}
export type WritableUIStateStore = Writable<UIState>;
@@ -21,7 +20,6 @@ const store: WritableUIStateStore = writable(
nodesLocked: false,
autoAddUI: true,
uiEditMode: "disabled",
subWorkflow: "default"
})
const uiStateStore: WritableUIStateStore =

10
src/lib/widgets/GalleryWidget.svelte
View File

@@ -7,6 +7,7 @@
import type { Writable } from "svelte/store";
import type { ComfyGalleryNode } from "$lib/nodes/ComfyWidgetNodes";
import type { FileData as GradioFileData } from "@gradio/upload";
import type { SelectData as GradioSelectData } from "@gradio/utils";
export let widget: WidgetLayout | null = null;
let node: ComfyGalleryNode | null = null;
@@ -21,6 +22,7 @@
node = widget.node as ComfyGalleryNode
nodeValue = node.value;
propsChanged = node.propsChanged;
node.index = 0;
}
};
@@ -31,7 +33,8 @@
}
let element: HTMLDivElement;
function updateForLightbox() {
function onSelect(e: CustomEvent<GradioSelectData>) {
// Setup lightbox
// Wait for gradio gallery to show the large preview image, if no timeout then
// the event might fire too early
setTimeout(() => {
@@ -41,6 +44,9 @@
}
ImageViewer.instance.updateOnBackgroundChange();
}, 200)
// Update index
node.index = e.detail.index as number;
}
</script>
@@ -55,7 +61,7 @@
{style}
root={""}
root_url={""}
on:select={updateForLightbox}
on:select={onSelect}
/>
</div>
</Block>