Bind widget values to special widget nodes

src/lib/widgets/ComboWidget.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
- import type { WidgetDrawState, WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
  import { BlockTitle } from "@gradio/atoms";
- import { Dropdown } from "@gradio/form";
  import Select from 'svelte-select';
  import type { ComfyComboNode } from "$lib/nodes/index";
  import { type WidgetLayout } from "$lib/stores/layoutState";
@@ -9,32 +7,35 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfyComboNode | null = null;
  let nodeValue: Writable<string> | null = null;
- let itemValue: WidgetUIStateStore | null = null;
- let option: any;
+ let option: any
 
- $: if(widget) {
-     node = widget.node as ComfyComboNode
-     nodeValue = node.value;
-     updateOption(); // don't react on option
- };
+ $: widget && setNodeValue(widget);
 
- function updateOption() {
-     option = get(nodeValue);
+ function setNodeValue(widget: WidgetLayout) {
+     if(widget && !node) {
+         node = widget.node as ComfyComboNode
+         nodeValue = node.value;
+         setOption($nodeValue) // don't react on option
+     }
  }
 
- $: if (option && itemValue) {
-     $itemValue = option.value
+ function setOption(value: any) {
+     option = value;
+ }
+
+ $: if (nodeValue && option) {
+     $nodeValue = option.value;
  }
 </script>
 
 <div class="wrapper gr-combo">
-    {#if node !== null && option !== undefined}
+    {#if node !== null && nodeValue !== null}
         <label>
             <BlockTitle show_label={true}>{widget.attrs.title}</BlockTitle>
             <Select
                 bind:value={option}
-                bind:items={node.properties.values}
-                disabled={node.properties.values.length === 0}
+                bind:items={node.properties.options}
+                disabled={node.properties.options.length === 0}
                 clearable={false}
                 on:change
                 on:select

src/lib/widgets/ComfyGalleryWidget.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
  import { onMount } from "svelte";
  import { ImageViewer } from "$lib/ImageViewer";
- import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
  import { Block } from "@gradio/atoms";
  import { Gallery } from "@gradio/gallery";
  import type { Styles } from "@gradio/utils";

src/lib/widgets/ComfyValueControlWidget.ts

@@ -2,7 +2,6 @@ import type { IEnumWidget, IEnumWidgetOptions, INumberWidget, LGraphNode, Widget
 import ComfyWidget from "./ComfyWidget";
 import type { ComfyImageResult } from "$lib/nodes/ComfySaveImageNode";
 import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
-import nodeState from "$lib/stores/nodeState"
 
 export interface ComfyValueControlWidgetOptions extends IEnumWidgetOptions {
 }
@@ -50,6 +49,6 @@ export default class ComfyValueControlWidget extends ComfyWidget<ComfyValueContr
 		if (this.targetWidget.value > max)
 			this.targetWidget.value = max;
 
-        nodeState.widgetStateChanged(this.node.id, this.targetWidget);
+        // nodeState.widgetStateChanged(this.node.id, this.targetWidget);
     }
 }

src/lib/widgets/ComfyWidget.ts

@@ -1,6 +1,5 @@
 import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
 import type { IWidget, LGraphNode, SerializedLGraphNode, Vector2, WidgetCallback, WidgetTypes } from "@litegraph-ts/core";
-import nodeState from "$lib/stores/nodeState";
 
 export default abstract class ComfyWidget<T = any, V = any> implements IWidget<T, V> {
     name: string;
@@ -27,7 +26,6 @@ export default abstract class ComfyWidget<T = any, V = any> implements IWidget<T
 
     setValue(value: V) {
         this.value = value;
-        nodeState.widgetStateChanged(this.node.id, this);
     }
 
     draw?(ctx: CanvasRenderingContext2D, node: LGraphNode, width: number, posY: number, height: number): void;

src/lib/widgets/TextWidget.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
- import type { WidgetUIStateStore } from "$lib/stores/nodeState";
  import { TextBox } from "@gradio/form";
  import type { ComfyComboNode } from "$lib/nodes/index";
  import { type WidgetLayout } from "$lib/stores/layoutState";
@@ -18,7 +17,7 @@
 <div class="wrapper gr-textbox">
     {#if node !== null && nodeValue !== null}
         <TextBox
-            bind:value={$itemValue}
+            bind:value={$nodeValue}
             label={widget.attrs.title}
             lines={node.properties.multiline ? 5 : 1}
             max_lines={node.properties.multiline ? 5 : 1}