Merge node/widget state

src/lib/components/ComfyApp.svelte

@@ -6,7 +6,6 @@
  import ComfyUIPane from "./ComfyUIPane.svelte";
  import ComfyApp, { type SerializedAppState } from "./ComfyApp";
  import { Checkbox } from "@gradio/form"
- import widgetState from "$lib/stores/widgetState";
  import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
  import { ImageViewer } from "$lib/ImageViewer";
@@ -102,16 +101,11 @@
  onMount(async () => {
      app = new ComfyApp();
 
-     // TODO dedup
      app.eventBus.on("nodeAdded", nodeState.nodeAdded);
      app.eventBus.on("nodeRemoved", nodeState.nodeRemoved);
      app.eventBus.on("configured", nodeState.configureFinished);
      app.eventBus.on("cleared", nodeState.clear);
 
-     app.eventBus.on("nodeAdded", widgetState.nodeAdded);
-     app.eventBus.on("nodeRemoved", widgetState.nodeRemoved);
-     app.eventBus.on("configured", widgetState.configureFinished);
-     app.eventBus.on("cleared", widgetState.clear);
      app.eventBus.on("autosave", doAutosave);
      app.eventBus.on("restored", doRestore);
 

src/lib/components/ComfyApp.ts

@@ -12,7 +12,6 @@ import * as basic from "@litegraph-ts/nodes-basic"
 import * as nodes from "$lib/nodes/index"
 import ComfyGraphCanvas from "$lib/ComfyGraphCanvas";
 import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
-import type { WidgetStateStore, WidgetUIState } from "$lib/stores/widgetState";
 import * as widgets from "$lib/widgets/index"
 import type ComfyWidget from "$lib/widgets/ComfyWidget";
 import queueState from "$lib/stores/queueState";

src/lib/components/ComfyPane.svelte

@@ -3,7 +3,6 @@
  import { get } from "svelte/store"
  import { Block, BlockTitle } from "@gradio/atoms";
  import { Move } from 'radix-icons-svelte';
- import widgetState, { type WidgetDrawState, type WidgetUIState } from "$lib/stores/widgetState";
  import queueState from "$lib/stores/queueState";
  import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
@@ -47,7 +46,7 @@
      dragDisabled = true;
  };
 
- const unsubscribe = widgetState.subscribe(state => {
+ const unsubscribe = nodeState.subscribe(state => {
      dragItems = dragItems.filter(item => item.node.id in state);
  });
 
@@ -88,7 +87,7 @@
                             {/if}
                         </BlockTitle>
                     </label>
-                    {#each $widgetState[id] as item}
+                    {#each $nodeState[id].widgetStates as item}
                         <svelte:component this={getComponentForWidgetState(item)} {item} />
                         {#if dragItem[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
                             <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>

src/lib/components/ComfyUIPane.svelte

@@ -5,7 +5,7 @@
  import ComfyApp  from "./ComfyApp";
  import type { SerializedPanes } from "./ComfyApp"
  import ComfyPane from "./ComfyPane.svelte";
- import widgetState from "$lib/stores/widgetState";
+ import nodeState from "$lib/stores/nodeState";
 	import type { DragItem } from "./ComfyUIPane";
 
  export let app: ComfyApp;
@@ -17,12 +17,12 @@
  function findLeastPopulatedPaneIndex(): number {
      let minWidgetCount = 2 ** 64;
      let minIndex = 0;
-     let state = get(widgetState);
+     let state = get(nodeState);
      for (let i = 0; i < dragItems.length; i++) {
          let widgetCount = 0;
          for (let j = 0; j < dragItems[i].length; j++) {
              const nodeID = dragItems[i][j].node.id;
-             widgetCount += state[nodeID].length;
+             widgetCount += state[nodeID].widgetStates.length;
          }
          if (widgetCount < minWidgetCount) {
              minWidgetCount = widgetCount