Refresh combo boxes button

src/lib/IComfyInputSlot.ts

@@ -14,6 +14,7 @@ export type ComfyInputConfig = {
 
 export default interface IComfyInputSlot extends INodeInputSlot {
     serialize: boolean,
-    defaultWidgetNode?: new (name?: string) => ComfyWidgetNode,
+    defaultWidgetNode: new (name?: string) => ComfyWidgetNode
+    widgetNodeType?: string,
     config: ComfyInputConfig, // stores range min/max/step, etc.
 }

src/lib/components/ComfyApp.svelte

@@ -135,6 +135,10 @@
 
      refreshView();
  })
+
+ async function doRefreshCombos() {
+     await app.refreshComboInNodes()
+ }
 </script>
 
 <div id="main">
@@ -179,6 +183,9 @@
         <Button variant="secondary" on:click={doRecenter}>
             Recenter
         </Button>
+        <Button variant="secondary" on:click={doRefreshCombos}>
+            🔄
+        </Button>
         <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}/>

src/lib/components/ComfyApp.ts

@@ -23,6 +23,7 @@ import layoutState from "$lib/stores/layoutState";
 import { toast } from '@zerodevx/svelte-toast'
 import ComfyGraph from "$lib/ComfyGraph";
 import { ComfyBackendNode } from "$lib/nodes/ComfyBackendNode";
+import { get } from "svelte/store";
 
 export const COMFYBOX_SERIAL_VERSION = 1;
 
@@ -616,18 +617,29 @@ export default class ComfyApp {
 
             const def = defs[node.type];
 
-            throw "refreshComboInNodes unimplemented!"
+            for (let index = 0; index < node.inputs.length; index++) {
-            // for (const widgetNum in node.widgets) {
+                const input = node.inputs[index];
-            //     const widget = node.widgets[widgetNum]
+                if ("config" in input) {
+                    const comfyInput = input as IComfyInputSlot;
 
-            //     if (widget.type == "combo" && def["input"]["required"][widget.name] !== undefined) {
+                    console.warn("RefreshCombo", comfyInput.defaultWidgetNode, comfyInput)
-            //         widget.options.values = def["input"]["required"][widget.name][0];
 
-            //         if (!widget.options.values.includes(widget.value)) {
+                    if (comfyInput.defaultWidgetNode == nodes.ComfyComboNode && def["input"]["required"][comfyInput.name] !== undefined) {
-            //             widget.value = widget.options.values[0];
+                        comfyInput.config.values = def["input"]["required"][comfyInput.name][0];
-            //         }
+
-            //     }
+                        console.warn("RefreshCombo", comfyInput.config.values, def["input"]["required"][comfyInput.name])
-            // }
+                        const inputNode = node.getInputNode(index)
+
+                        if (inputNode && "doAutoConfig" in inputNode) {
+                            const comfyInputNode = inputNode as nodes.ComfyWidgetNode;
+                            comfyInputNode.doAutoConfig(comfyInput)
+                            if (!comfyInput.config.values.includes(get(comfyInputNode.value))) {
+                                comfyInputNode.setValue(comfyInput.config.defaultValue || comfyInput.config.values[0])
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 

src/lib/nodes/ComfyActionNodes.ts

@@ -91,3 +91,37 @@ LiteGraph.registerNodeType({
     desc: "Copies its input to its output when an event is received",
     type: "actions/copy"
 })
+
+export interface ComfySwapActionProperties extends Record<any, any> {
+}
+
+export class ComfySwapAction extends ComfyGraphNode {
+    override properties: ComfySwapActionProperties = {
+    }
+
+    static slotLayout: SlotLayout = {
+        inputs: [
+            { name: "A", type: "*" },
+            { name: "B", type: "*" },
+            { name: "swap", type: BuiltInSlotType.ACTION }
+        ],
+        outputs: [
+            { name: "B", type: "*" },
+            { name: "A", type: "*" }
+        ],
+    }
+
+    override onAction(action: any, param: any) {
+        const a = this.getInputData(0)
+        const b = this.getInputData(1)
+        this.setOutputData(0, a)
+        this.setOutputData(1, b)
+    };
+}
+
+LiteGraph.registerNodeType({
+    class: ComfySwapAction,
+    title: "Comfy.SwapAction",
+    desc: "Swaps two inputs when triggered",
+    type: "actions/swap"
+})

src/lib/nodes/ComfyGraphNode.ts

@@ -1,9 +1,10 @@
 import type { ComfyInputConfig } from "$lib/IComfyInputSlot";
 import type { SerializedPrompt } from "$lib/components/ComfyApp";
 import type ComfyWidget from "$lib/components/widgets/ComfyWidget";
-import { LGraph, LGraphNode } from "@litegraph-ts/core";
+import { LGraph, LGraphNode, LiteGraph, type SerializedLGraphNode } from "@litegraph-ts/core";
 import type { SvelteComponentDev } from "svelte/internal";
 import type { ComfyWidgetNode } from "./ComfyWidgetNodes";
+import type IComfyInputSlot from "$lib/IComfyInputSlot";
 
 export type DefaultWidgetSpec = {
     defaultWidgetNode: new (name?: string) => ComfyWidgetNode,
@@ -21,4 +22,34 @@ export default class ComfyGraphNode extends LGraphNode {
     onExecuted?(output: any): void;
 
     defaultWidgets?: DefaultWidgetLayout
+
+    override onSerialize(o: SerializedLGraphNode) {
+        for (let index = 0; index < this.inputs.length; index++) {
+            const input = this.inputs[index]
+            const serInput = o.inputs[index]
+            if ("defaultWidgetNode" in input) {
+                const comfyInput = input as IComfyInputSlot
+                const widgetNode = comfyInput.defaultWidgetNode
+                const ty = Object.values(LiteGraph.registered_node_types)
+                    .find(v => v.class === widgetNode)
+                if (ty)
+                    (serInput as any).widgetNodeType = ty.type
+            }
+        }
+    }
+
+    override onConfigure(o: SerializedLGraphNode) {
+        for (let index = 0; index < this.inputs.length; index++) {
+            const input = this.inputs[index]
+            const serInput = o.inputs[index]
+            if ("widgetNodeType" in serInput) {
+                const comfyInput = input as IComfyInputSlot
+                const ty: string = serInput.widgetNodeType as any
+                const widgetNode = Object.values(LiteGraph.registered_node_types)
+                    .find(v => v.type === ty)
+                if (widgetNode)
+                    comfyInput.defaultWidgetNode = widgetNode.class as any
+            }
+        }
+    }
 }

src/lib/nodes/ComfyWidgetNodes.ts

@@ -27,7 +27,7 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
     abstract properties: ComfyWidgetProperties;
 
     value: Writable<T>
-    propsChanged: Writable<boolean> = writable(true) // dummy to indicate if props changed
+    propsChanged: Writable<number> = writable(0) // dummy to indicate if props changed
     unsubscribe: Unsubscriber;
 
     /** Svelte class for the frontend logic */
@@ -119,6 +119,7 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
             if (this.inputs.length >= this.inputIndex) {
                 const data = this.getInputData(this.inputIndex)
                 if (data) { // TODO can "null" be a legitimate value here?
+                    console.log(data)
                     this.setValue(data)
                     const input = this.getInputLink(this.inputIndex)
                     input.data = null;
@@ -145,30 +146,33 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         inputNode: LGraphNode,
         inputIndex: number
     ): boolean {
-        if (this.autoConfig) {
+        if (this.autoConfig && "config" in input) {
-            // Copy properties from default config in input slot
+            this.doAutoConfig(input as IComfyInputSlot)
-            if ("config" in input) {
-                const comfyInput = input as IComfyInputSlot;
-                for (const key in comfyInput.config)
-                    this.setProperty(key, comfyInput.config[key])
-
-                if ("defaultValue" in this.properties)
-                    this.setValue(this.properties.defaultValue)
-
-                const widget = layoutState.findLayoutForNode(this.id)
-                if (widget && input.name !== "") {
-                    widget.attrs.title = input.name;
-                }
-
-                console.debug("Property copy", input, this.properties)
-
-                this.setValue(get(this.value))
-            }
         }
 
         return true;
     }
 
+    doAutoConfig(input: IComfyInputSlot) {
+        // Copy properties from default config in input slot
+        const comfyInput = input as IComfyInputSlot;
+        for (const key in comfyInput.config)
+            this.setProperty(key, comfyInput.config[key])
+
+        if ("defaultValue" in this.properties)
+            this.setValue(this.properties.defaultValue)
+
+        const widget = layoutState.findLayoutForNode(this.id)
+        if (widget && input.name !== "") {
+            widget.attrs.title = input.name;
+        }
+
+        console.debug("Property copy", input, this.properties)
+
+        this.setValue(get(this.value))
+        this.propsChanged.set(get(this.propsChanged) + 1)
+    }
+
     onConnectionsChange(
         type: LConnectionKind,
         slotIndex: number,
@@ -195,12 +199,13 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         }
 
         // Force reactivity change so the frontend can be updated with the new props
-        this.propsChanged.set(!get(this.propsChanged))
+        this.propsChanged.set(get(this.propsChanged) + 1)
     }
 
     clampOneConfig(input: IComfyInputSlot) { }
 
     override onSerialize(o: SerializedLGraphNode) {
+        super.onSerialize(o);
         (o as any).comfyValue = get(this.value);
         (o as any).shownOutputProperties = this.shownOutputProperties
     }

src/lib/nodes/index.ts

@@ -1,5 +1,5 @@
 export { default as ComfyReroute } from "./ComfyReroute"
 export { ComfyWidgetNode, ComfySliderNode, ComfyComboNode, ComfyTextNode } from "./ComfyWidgetNodes"
-export { ComfyCopyAction } from "./ComfyActionNodes"
+export { ComfyCopyAction, ComfySwapAction } from "./ComfyActionNodes"
 export { default as ComfyValueControl } from "./ComfyValueControl"
 export { default as ComfySelector } from "./ComfySelector"

src/lib/widgets.ts

@@ -2,7 +2,7 @@ import type { IWidget, LGraphNode } from "@litegraph-js/core";
 import ComfyValueControlWidget from "./widgets/ComfyValueControlWidget";
 import type { ComfyInputConfig } from "./IComfyInputSlot";
 import type IComfyInputSlot from "./IComfyInputSlot";
-import { BuiltInSlotShape } from "@litegraph-ts/core";
+import { BuiltInSlotShape, LiteGraph } from "@litegraph-ts/core";
 import { ComfyComboNode, ComfySliderNode, ComfyTextNode } from "./nodes";
 
 type WidgetFactory = (node: LGraphNode, inputName: string, inputData: any) => IComfyInputSlot;
@@ -23,6 +23,14 @@ function addComfyInput(node: LGraphNode, inputName: string, extraInfo: Partial<I
     const input = node.addInput(inputName) as IComfyInputSlot
     for (const [k, v] of Object.entries(extraInfo))
         input[k] = v
+
+    if (input.defaultWidgetNode) {
+        const ty = Object.values(LiteGraph.registered_node_types)
+            .find(v => v.class === input.defaultWidgetNode)
+        if (ty)
+            input.widgetNodeType = ty.type
+    }
+
     input.serialize = true;
     return input;
 }

src/lib/widgets/ButtonWidget.svelte

@@ -7,7 +7,7 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfyButtonNode | null = null;
  let nodeValue: Writable<boolean> | null = null;
- let propsChanged: Writable<boolean> | null = null;
+ let propsChanged: Writable<number> | null = null;
 
  $: widget && setNodeValue(widget);
 

src/lib/widgets/ComboWidget.svelte

@@ -7,7 +7,7 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfyComboNode | null = null;
  let nodeValue: Writable<string> | null = null;
- let propsChanged: Writable<boolean> | null = null;
+ let propsChanged: Writable<number> | null = null;
  let option: any
 
  export let debug: boolean = false;
@@ -15,8 +15,14 @@
  $: widget && setNodeValue(widget);
 
  $: if (nodeValue !== null && (!$propsChanged || $propsChanged)) {
-     $nodeValue = option
+     if (node.properties.values.indexOf(option.value) === -1) {
-     setOption($nodeValue)
+         setOption($nodeValue)
+         $nodeValue = option
+     }
+     else {
+         $nodeValue = option
+         setOption($nodeValue)
+     }
      setNodeValue(widget)
      node.properties = node.properties
  }
@@ -46,37 +52,65 @@
          return "???";
      return links[0].data
  }
+
+ let lastPropsChanged: number = 0;
+ let werePropsChanged: boolean = false;
+
+ $: if ($propsChanged !== lastPropsChanged) {
+     werePropsChanged = true;
+     lastPropsChanged = $propsChanged;
+     setTimeout(() => (werePropsChanged = false), 2000);
+ }
 </script>
 
-<div class="wrapper gr-combo">
+<div class="wrapper gr-combo" class:updated={werePropsChanged}>
-    {#if node !== null && nodeValue !== null}
+    {#key $propsChanged}
-        <label>
+        {#if node !== null && nodeValue !== null}
-            <BlockTitle show_label={true}>{widget.attrs.title}</BlockTitle>
+            <label>
-            <Select
+                <BlockTitle show_label={true}>{widget.attrs.title}</BlockTitle>
-                bind:value={option}
+                <Select
-                bind:items={node.properties.values}
+                    bind:value={option}
-                disabled={node.properties.values.length === 0}
+                    bind:items={node.properties.values}
-                clearable={false}
+                    disabled={node.properties.values.length === 0}
-                on:change
+                    clearable={false}
-                on:select
+                    on:change
-                on:filter
+                    on:select
-                on:blur
+                    on:filter
-            />
+                    on:blur
-            {#if debug}
+                />
-                <div>Value: {option?.value}</div>
+                {#if debug}
-                <div>NodeValue: {$nodeValue}</div>
+                    <div>Value: {option?.value}</div>
-                <div>LinkValue: {getLinkValue()}</div>
+                    <div>Items: {node.properties.values}</div>
-            {/if}
+                    <div>NodeValue: {$nodeValue}</div>
-        </label>
+                    <div>LinkValue: {getLinkValue()}</div>
-    {/if}
+                {/if}
+            </label>
+        {/if}
+    {/key}
 </div>
 
-<style>
+<style lang="scss">
  .wrapper {
      padding: 2px;
      width: 100%;
  }
 
+ @keyframes -global-light-up {
+     from {
+         background-color: var(--color-yellow-400);
+     }
+     to {
+         background-color: none;
+     }
+ }
+
+ .updated {
+     animation: light-up 1s ease-out;
+     :global(.svelte-select) {
+         animation: light-up 1s ease-out;
+     }
+ }
+
  :global(.svelte-select-list) {
      z-index: var(--layer-top) !important;
  }

src/lib/widgets/GalleryWidget.svelte

@@ -11,7 +11,7 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfyGalleryNode | null = null;
  let nodeValue: Writable<GradioFileData[]> | null = null;
- let propsChanged: Writable<boolean> | null = null;
+ let propsChanged: Writable<number> | null = null;
  let option: number | null = null;
 
  $: widget && setNodeValue(widget);

src/lib/widgets/RangeWidget.svelte

@@ -6,7 +6,7 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfySliderNode | null = null;
  let nodeValue: Writable<number> | null = null;
- let propsChanged: Writable<boolean> | null = null;
+ let propsChanged: Writable<number> | null = null;
  let option: number | null = null;
 
  $: widget && setNodeValue(widget);

src/lib/widgets/TextWidget.svelte

@@ -6,7 +6,7 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfyComboNode | null = null;
  let nodeValue: Writable<string> | null = null;
- let propsChanged: Writable<boolean> | null = null;
+ let propsChanged: Writable<number> | null = null;
  let itemValue: WidgetUIStateStore | null = null;
 
  $: widget && setNodeValue(widget);