From c40143ef88b33ee490ad1647dc8295e8f876ae23 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Fri, 7 Apr 2023 08:43:58 -0500
Subject: [PATCH] Refactor widget wrappers

---
 src/lib/components/ComfyApp.svelte            | 20 +++++---
 src/lib/components/ComfyPane.svelte           | 51 +++----------------
 src/lib/components/ComfyUIPane.svelte         | 43 +++++++++-------
 src/lib/components/widgets/ComboWidget.svelte | 29 +++++++++++
 src/lib/components/widgets/RangeWidget.svelte | 27 ++++++++++
 src/lib/components/widgets/TextWidget.svelte  | 28 ++++++++++
 6 files changed, 130 insertions(+), 68 deletions(-)
 create mode 100644 src/lib/components/widgets/ComboWidget.svelte
 create mode 100644 src/lib/components/widgets/RangeWidget.svelte
 create mode 100644 src/lib/components/widgets/TextWidget.svelte

diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index e620c7a..c2d0955 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -64,9 +64,12 @@
 
      (window as any).app = app;
 
-     let graphPaneDiv = containerElem.querySelector(".canvas-wrapper").parentNode as HTMLDivNode;
-     graphPaneDiv.ontransitionend = () => {
-         app.resizeCanvas()
+     let wrappers = containerElem.querySelectorAll<HTMLDivNode>(".pane-wrapper")
+     for (const wrapper of wrappers) {
+         const paneNode = wrapper.parentNode; // get the node inside the <Pane/>
+         paneNode.ontransitionend = () => {
+             app.resizeCanvas()
+         }
      }
  })
 </script>
@@ -80,14 +83,14 @@
                     <ComfyUIPane bind:this={uiPane} {app} />
                 </Pane>
                 <Pane bind:size={graphSize}>
-                    <div class="canvas-wrapper">
+                    <div class="canvas-wrapper pane-wrapper">
                         <canvas id="graph-canvas" />
                     </div>
                 </Pane>
             </Splitpanes>
         </Pane>
-        <Pane bind size={sidebarSize}>
-            <div>
+        <Pane bind:size={sidebarSize}>
+            <div class="sidebar-wrapper pane-wrapper">
                 Sidebar
             </div>
         </Pane>
@@ -139,6 +142,11 @@
      background-color: #333;
  }
 
+ .sidebar-wrapper {
+     width: 100%;
+     height: 100%;
+ }
+
  .dropzone {
      box-sizing: border-box;
      display: none;
diff --git a/src/lib/components/ComfyPane.svelte b/src/lib/components/ComfyPane.svelte
index dff504a..d507aa1 100644
--- a/src/lib/components/ComfyPane.svelte
+++ b/src/lib/components/ComfyPane.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
  import { onDestroy } from "svelte";
  import { Block, BlockTitle } from "@gradio/atoms";
- import { Dropdown, Range, TextBox } from "@gradio/form";
  import { Move } from 'radix-icons-svelte';
+ import ComboWidget from "./widgets/ComboWidget.svelte";
+ import RangeWidget from "./widgets/RangeWidget.svelte";
+ import TextWidget from "./widgets/TextWidget.svelte";
  import widgetState from "$lib/stores/widgetState";
 
  import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME } from 'svelte-dnd-action';
@@ -59,47 +61,11 @@
                 </label>
                 {#each $widgetState[id] as item, i}
                     {#if item.widget.type == "combo"}
-                        <div class="wrapper">
-                            <Dropdown
-                                bind:value={item.value}
-                                choices={item.widget.options.values}
-                                multiselect={false}
-                                max_choices={1},
-                                label={item.widget.name}
-                                show_label={true}
-                                disabled={item.widget.options.values.length === 0}
-                                on:change
-                                on:select
-                                on:blur
-                            />
-                        </div>
+                        <ComboWidget {item} />
                     {:else if item.widget.type == "number"}
-                        <div class="wrapper">
-                            <Range
-                                bind:value={item.value}
-                                minimum={item.widget.options.min}
-                                maximum={item.widget.options.max}
-                                step={item.widget.options.step}
-                                label={item.widget.name}
-                                show_label={true}
-                                on:change
-                                on:release
-                            />
-                        </div>
+                        <RangeWidget {item} />
                     {:else if item.widget.type == "text"}
-                        <div class="wrapper">
-                            <TextBox
-                                bind:value={item.value}
-                                label={item.widget.name}
-                                lines={item.widget.options.multiline ? 5 : 1}
-                                max_lines={item.widget.options.multiline ? 5 : 1}
-                                show_label={true}
-                                on:change
-                                on:submit
-                                on:blur
-                                on:select
-                            />
-                        </div>
+                        <TextWidget {item} />
                     {/if}
                     {#if dragItem[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
                         <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
@@ -145,9 +111,4 @@
      opacity: 0.5;
      margin: 0;
  }
-
- .wrapper {
-     padding: 2px;
-     width: 100%;
- }
 </style>
diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index c4132c4..617930f 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/src/lib/components/ComfyUIPane.svelte
@@ -12,25 +12,34 @@
 
  export let totalId = 0;
 
+ function addUIForNewNode(node: LGraphNode) {
+     let minWidgetCount = 2 ** 64;
+     let minIndex = 0;
+     let state = get(widgetState);
+     for (let i = 0; i < dragItemss.length; i++) {
+         let widgetCount = 0;
+         for (let j = 0; j < dragItemss[i].length; j++) {
+             const nodeID = dragItemss[i][j].node.id;
+             widgetCount += state[nodeID].length;
+         }
+         if (widgetCount < minWidgetCount) {
+             minWidgetCount = widgetCount
+             minIndex = i;
+         }
+     }
+     dragItemss[minIndex].push({ id: totalId++, node: node });
+ }
+
  $: if(app && !dragConfigured) {
      dragConfigured = true;
-     app.eventBus.on("nodeAdded", (node: LGraphNode) => {
-         let minWidgetCount = 2 ** 64;
-         let minIndex = 0;
-         let state = get(widgetState);
-         for (let i = 0; i < dragItemss.length; i++) {
-             let widgetCount = 0;
-             for (let j = 0; j < dragItemss[i].length; j++) {
-                 const nodeID = dragItemss[i][j].node.id;
-                 widgetCount += state[nodeID].length;
-             }
-             if (widgetCount < minWidgetCount) {
-                 minWidgetCount = widgetCount
-                 minIndex = i;
-             }
-         }
-         dragItemss[minIndex].push({ id: totalId++, node: node });
-     });
+     app.eventBus.on("nodeAdded", addUIForNewNode);
+ }
+
+ /*
+  * Serialize UI panel order so it can be restored when workflow is loaded
+  */
+ function getUIState(): any {
+
  }
 </script>
 
diff --git a/src/lib/components/widgets/ComboWidget.svelte b/src/lib/components/widgets/ComboWidget.svelte
new file mode 100644
index 0000000..26b5687
--- /dev/null
+++ b/src/lib/components/widgets/ComboWidget.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+ import type { WidgetUIState } from "$lib/stores/widgetState";
+ import { Dropdown } from "@gradio/form";
+ export let item: WidgetUIState | null = null;
+</script>
+
+<div class="wrapper">
+    {#if item}
+        <Dropdown
+            bind:value={item.value}
+            choices={item.widget.options.values}
+            multiselect={false}
+            max_choices={1}
+            label={item.widget.name}
+            show_label={true}
+            disabled={item.widget.options.values.length === 0}
+            on:change
+            on:select
+            on:blur
+        />
+    {/if}
+</div>
+
+<style>
+ .wrapper {
+     padding: 2px;
+     width: 100%;
+ }
+</style>
diff --git a/src/lib/components/widgets/RangeWidget.svelte b/src/lib/components/widgets/RangeWidget.svelte
new file mode 100644
index 0000000..821e884
--- /dev/null
+++ b/src/lib/components/widgets/RangeWidget.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+ import type { WidgetUIState } from "$lib/stores/widgetState";
+ import { Range } from "@gradio/form";
+ export let item: WidgetUIState | null = null;
+</script>
+
+<div class="wrapper">
+    {#if item}
+        <Range
+            bind:value={item.value}
+            minimum={item.widget.options.min}
+            maximum={item.widget.options.max}
+            step={item.widget.options.step}
+            label={item.widget.name}
+            show_label={true}
+            on:change
+            on:release
+        />
+    {/if}
+</div>
+
+<style>
+ .wrapper {
+     padding: 2px;
+     width: 100%;
+ }
+</style>
diff --git a/src/lib/components/widgets/TextWidget.svelte b/src/lib/components/widgets/TextWidget.svelte
new file mode 100644
index 0000000..b7521fe
--- /dev/null
+++ b/src/lib/components/widgets/TextWidget.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+ import type { WidgetUIState } from "$lib/stores/widgetState";
+ import { TextBox } from "@gradio/form";
+ export let item: WidgetUIState | null = null;
+</script>
+
+<div class="wrapper">
+    {#if item}
+        <TextBox
+            bind:value={item.value}
+            label={item.widget.name}
+            lines={item.widget.options.multiline ? 5 : 1}
+            max_lines={item.widget.options.multiline ? 5 : 1}
+            show_label={true}
+            on:change
+            on:submit
+            on:blur
+            on:select
+        />
+    {/if}
+</div>
+
+<style>
+ .wrapper {
+     padding: 2px;
+     width: 100%;
+ }
+</style>