From df4f2b2d5789fa750a3ee536a6649e6cb4f7aa58 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Fri, 5 May 2023 21:21:56 -0500
Subject: [PATCH] Gallery widget selected index

---
 src/lib/components/ComfyApp.svelte           |  6 +--
 src/lib/components/ComfyComboProperty.svelte |  2 +
 src/lib/components/ComfyProperties.svelte    | 18 ++++----
 src/lib/nodes/ComfyImageCacheNode.ts         |  4 +-
 src/lib/nodes/ComfyWidgetNodes.ts            | 48 ++++++++++++--------
 src/lib/stores/uiState.ts                    |  2 -
 src/lib/widgets/GalleryWidget.svelte         | 10 +++-
 7 files changed, 52 insertions(+), 38 deletions(-)

diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index 38d7be9..09fc781 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -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}>
diff --git a/src/lib/components/ComfyComboProperty.svelte b/src/lib/components/ComfyComboProperty.svelte
index 2ccc0b3..11b746e 100644
--- a/src/lib/components/ComfyComboProperty.svelte
+++ b/src/lib/components/ComfyComboProperty.svelte
@@ -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
diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte
index 0d2b9c3..2d9c617 100644
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -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>
diff --git a/src/lib/nodes/ComfyImageCacheNode.ts b/src/lib/nodes/ComfyImageCacheNode.ts
index 9ec6933..c147973 100644
--- a/src/lib/nodes/ComfyImageCacheNode.ts
+++ b/src/lib/nodes/ComfyImageCacheNode.ts
@@ -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
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index 81e7d2d..1297510 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -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;
     }
 }
 
diff --git a/src/lib/stores/uiState.ts b/src/lib/stores/uiState.ts
index f602788..ba9396c 100644
--- a/src/lib/stores/uiState.ts
+++ b/src/lib/stores/uiState.ts
@@ -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 =
diff --git a/src/lib/widgets/GalleryWidget.svelte b/src/lib/widgets/GalleryWidget.svelte
index a304187..2c60d1e 100644
--- a/src/lib/widgets/GalleryWidget.svelte
+++ b/src/lib/widgets/GalleryWidget.svelte
@@ -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>