Bind widget values to special widget nodes

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 nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
  import layoutState from "$lib/stores/layoutState";
  import { ImageViewer } from "$lib/ImageViewer";
@@ -105,11 +104,6 @@
  onMount(async () => {
      app = new ComfyApp();
 
-     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", layoutState.nodeAdded);
      app.eventBus.on("nodeRemoved", layoutState.nodeRemoved);
      app.eventBus.on("configured", layoutState.configureFinished);

src/lib/components/ComfyApp.ts

@@ -433,7 +433,7 @@ export default class ComfyApp {
         this.clean();
 
         if (!graphData) {
-            // graphData = structuredClone(defaultGraph.workflow)
+            graphData = structuredClone(defaultGraph.workflow)
         }
 
         // Patch T2IAdapterLoader to ControlNetLoader since they are the same node now

src/lib/components/ComfyUIPane.svelte

@@ -6,7 +6,6 @@
  import ComfyApp  from "./ComfyApp";
  import type { SerializedPanes } from "./ComfyApp"
  import WidgetContainer from "./WidgetContainer.svelte";
- import nodeState from "$lib/stores/nodeState";
  import layoutState, { type ContainerLayout, type DragItem } from "$lib/stores/layoutState";
  import uiState from "$lib/stores/uiState";
 

src/lib/components/WidgetContainer.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
  import queueState from "$lib/stores/queueState";
- import nodeState, { type WidgetUIState } from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
 
  import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
- import { startDrag, stopDrag, getComponentForWidgetState } from "$lib/utils"
+ import { startDrag, stopDrag } from "$lib/utils"
  import BlockContainer from "./BlockContainer.svelte"
 
  export let dragItem: IDragItem | null = null;
@@ -12,14 +11,12 @@
  export let classes: string[] = [];
  let container: ContainerLayout | null = null;
  let widget: WidgetLayout | null = null;
- let widgetState: WidgetUIState | null = null;
  let showHandles: boolean = false;
 
  $: if (!dragItem || !$layoutState.allItems[dragItem.id]) {
      dragItem = null;
      container = null;
      widget = null;
-     widgetState = null;
  }
  else if (dragItem.type === "container") {
      container = dragItem as ContainerLayout;
@@ -48,7 +45,7 @@
         class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
         class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.node.id}
         >
-        <svelte:component this={widget.node.svelteComponentType} node={widget.node} />
+        <svelte:component this={widget.node.svelteComponentType} {widget} />
     </div>
     {#if showHandles}
         <div class="handle handle-widget" style="z-index: {zIndex+100}" data-drag-item-id={widget.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>