temp

src/lib/widgets/ComboWidget.svelte

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