From dd00cf52b52de04d3ff6dee2692c7204835decc6 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Mon, 8 May 2023 03:45:22 -0500
Subject: [PATCH] More things

---
 src/lib/nodes/ComfyActionNodes.ts    |  3 +--
 src/lib/nodes/ComfyValueControl.ts   | 24 +++++++++++++++++++++++-
 src/lib/nodes/ComfyWidgetNodes.ts    |  5 +++++
 src/lib/stores/layoutState.ts        |  7 +++++++
 src/lib/widgets/GalleryWidget.svelte |  6 +++---
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/lib/nodes/ComfyActionNodes.ts b/src/lib/nodes/ComfyActionNodes.ts
index 383b3b0..20f5863 100644
--- a/src/lib/nodes/ComfyActionNodes.ts
+++ b/src/lib/nodes/ComfyActionNodes.ts
@@ -11,8 +11,7 @@ export class ComfyQueueEvents extends ComfyGraphNode {
     static slotLayout: SlotLayout = {
         outputs: [
             { name: "beforeQueued", type: BuiltInSlotType.EVENT },
-            { name: "afterQueued", type: BuiltInSlotType.EVENT },
-            { name: "prompt", type: "*" }
+            { name: "afterQueued", type: BuiltInSlotType.EVENT }
         ],
     }
 
diff --git a/src/lib/nodes/ComfyValueControl.ts b/src/lib/nodes/ComfyValueControl.ts
index 570faae..7a3485a 100644
--- a/src/lib/nodes/ComfyValueControl.ts
+++ b/src/lib/nodes/ComfyValueControl.ts
@@ -51,6 +51,11 @@ export default class ComfyValueControl extends ComfyGraphNode {
         }
     }
 
+    delayChangeEvent: boolean = true;
+
+    private _aboutToChange: number = 0;
+    private _aboutToChangeValue: any = null;
+
     constructor(title?: string) {
         super(title);
     }
@@ -60,6 +65,16 @@ export default class ComfyValueControl extends ComfyGraphNode {
         this.setProperty("min", this.getInputData(3))
         this.setProperty("max", this.getInputData(4))
         this.setProperty("step", this.getInputData(5) || 1)
+
+        if (this._aboutToChange > 0) {
+            this._aboutToChange -= 1;
+            if (this._aboutToChange <= 0) {
+                const value = this._aboutToChangeValue;
+                this._aboutToChange = 0;
+                this._aboutToChangeValue = null;
+                this.triggerSlot(1, value)
+            }
+        }
     }
 
     override onAction(action: any, param: any) {
@@ -95,9 +110,16 @@ export default class ComfyValueControl extends ComfyGraphNode {
 
         v = clamp(v, min, max)
         this.setProperty("value", v)
-        this.triggerSlot(1, v)
         this.setOutputData(0, v)
 
+        if (this.delayChangeEvent) {
+            this._aboutToChange = 2;
+            this._aboutToChangeValue = v;
+        }
+        else {
+            this.triggerSlot(1, v)
+        }
+
         console.debug("ValueControl", v, this.properties)
     };
 }
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index 7513566..9b92a3f 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -26,6 +26,11 @@ import RadioWidget from "$lib/widgets/RadioWidget.svelte";
  *   attribute and set `validNodeTypes` to the type of the litegraph node
  * - Add a new entry in the `values` array, like "knob" or "dial" for ComfySliderWidget
  * - Add an {#if widget.attrs.variant === <...>} statement in the corresponding Svelte component
+ *
+ * Also, BEWARE of calling setOutputData() and triggerSlot() on the same frame!
+ * You will have to either implement an internal delay on the event triggering
+ * or use an Event Delay node to ensure the output slot data can propagate to
+ * the rest of the graph first (see `delayChangedEvent` for details)
  */
 
 export interface ComfyWidgetProperties extends ComfyGraphNodeProperties {
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index b6bb944..b9d10d5 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -327,6 +327,13 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 defaultValue: 100,
                 editable: true
             },
+            {
+                name: "height",
+                type: "string",
+                location: "widget",
+                defaultValue: "auto",
+                editable: true
+            },
             {
                 name: "classes",
                 type: "string",
diff --git a/src/lib/widgets/GalleryWidget.svelte b/src/lib/widgets/GalleryWidget.svelte
index e65f2f9..d5087ae 100644
--- a/src/lib/widgets/GalleryWidget.svelte
+++ b/src/lib/widgets/GalleryWidget.svelte
@@ -36,8 +36,8 @@
  };
 
  let style: Styles = {
-     // grid_cols: [2],
-     grid: [3],
+     grid_cols: [4],
+     grid_rows: [4],
      // object_fit: "cover",
  }
  let element: HTMLDivElement;
@@ -126,7 +126,7 @@
 
 {#if widget && node && nodeValue && $nodeValue != null}
     {#if widget.attrs.variant === "image"}
-        <div class="wrapper comfy-image-widget" bind:this={element}>
+        <div class="wrapper comfy-image-widget" style="height: {widget.attrs.height || 'auto'}" bind:this={element}>
             <Block variant="solid" padding={false}>
                 {#if widget.attrs.title}
                     <BlockLabel