From 7f64b743a7d082a0ff0327636f41b4f0c502226e Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Fri, 5 May 2023 00:49:34 -0500
Subject: [PATCH] Start of properties panel

---
 src/lib/components/BlockContainer.svelte  |  87 ++++++------
 src/lib/components/ComfyApp.svelte        |  38 +++--
 src/lib/components/ComfyProperties.svelte | 166 ++++++++++++++++++++++
 src/lib/components/WidgetContainer.svelte |  35 +++--
 src/lib/stores/layoutState.ts             |  14 +-
 src/lib/widgets/ComboWidget.svelte        |   4 +-
 src/scss/global.scss                      |   2 +-
 7 files changed, 278 insertions(+), 68 deletions(-)
 create mode 100644 src/lib/components/ComfyProperties.svelte

diff --git a/src/lib/components/BlockContainer.svelte b/src/lib/components/BlockContainer.svelte
index 263ebfb..5667c15 100644
--- a/src/lib/components/BlockContainer.svelte
+++ b/src/lib/components/BlockContainer.svelte
@@ -16,14 +16,17 @@
  export let zIndex: number = 0;
  export let classes: string[] = [];
  export let showHandles: boolean = false;
+ let attrsChanged: Writable<boolean> | null = null;
  let children: IDragItem[] | null = null;
  const flipDurationMs = 100;
 
  $: if (container) {
      children = $layoutState.allItems[container.id].children;
+     attrsChanged = container.attrsChanged
  }
  else {
      children = null;
+     attrsChanged = null
  }
 
  function handleConsider(evt: any) {
@@ -38,52 +41,48 @@
 </script>
 
 {#if container && children}
-<div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}"
-     class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(container.id)}
-     class:root-container={zIndex === 0}
-     class:is-executing={container.isNodeExecuting}
-     class:container-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}>
-    <Block>
-        {#if container.attrs.showTitle}
-            <label for={String(container.id)} class={$uiState.uiEditMode === "widgets" ? "edit-title-label" : ""}>
-                <BlockTitle>
-                    {#if $uiState.uiEditMode === "widgets"}
-                        <input class="edit-title" bind:value={container.attrs.title} type="text" minlength="1" />
-                    {:else}
-                        {container.attrs.title}
-                    {/if}
-                </BlockTitle>
-            </label>
-        {/if}
-        <div class="v-pane"
-             class:empty={children.length === 0}
-             class:edit={$uiState.uiEditMode === "widgets" && zIndex > 1}
-            use:dndzone="{{
-                         items: children,
-                         flipDurationMs,
-                         centreDraggedOnCursor: true,
-                         morphDisabled: true,
-                         dropFromOthersDisabled: zIndex === 0,
-                         dragDisabled: zIndex === 0 || $layoutState.currentSelection.length > 2 || $uiState.uiEditMode === "disabled"
-                         }}"
-            on:consider="{handleConsider}"
-            on:finalize="{handleFinalize}"
-            >
-            {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
-                <div class="animation-wrapper"
-                     animate:flip={{duration:flipDurationMs}}>
-                    <WidgetContainer dragItem={item} zIndex={zIndex+1} />
-                    {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                        <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
-                    {/if}
+    {#key $attrsChanged}
+        <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}"
+             class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(container.id)}
+             class:root-container={zIndex === 0}
+             class:is-executing={container.isNodeExecuting}
+             class:container-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}>
+            <Block>
+                {#if container.attrs.showTitle}
+                    <label for={String(container.id)} class={$uiState.uiEditMode === "widgets" ? "edit-title-label" : ""}>
+                        <BlockTitle>{container.attrs.title}</BlockTitle>
+                    </label>
+                {/if}
+                <div class="v-pane"
+                     class:empty={children.length === 0}
+                     class:edit={$uiState.uiEditMode === "widgets" && zIndex > 1}
+                    use:dndzone="{{
+                                 items: children,
+                                 flipDurationMs,
+                                 centreDraggedOnCursor: true,
+                                 morphDisabled: true,
+                                 dropFromOthersDisabled: zIndex === 0,
+                                 dragDisabled: zIndex === 0 || $layoutState.currentSelection.length > 2 || $uiState.uiEditMode === "disabled"
+                                 }}"
+                    on:consider="{handleConsider}"
+                    on:finalize="{handleFinalize}"
+                    >
+                    {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
+                        <div class="animation-wrapper"
+                             animate:flip={{duration:flipDurationMs}}>
+                            <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                            {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+                                <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                            {/if}
+                        </div>
+                    {/each}
                 </div>
-            {/each}
+                {#if showHandles}
+                    <div class="handle handle-container" style="z-index: {zIndex+100}" data-drag-item-id={container.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+                {/if}
+            </Block>
         </div>
-        {#if showHandles}
-            <div class="handle handle-container" style="z-index: {zIndex+100}" data-drag-item-id={container.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
-        {/if}
-    </Block>
-</div>
+    {/key}
 {/if}
 
 <style lang="scss">
diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index 23296bc..a6dfc8a 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -16,6 +16,7 @@
  import { LGraph } from "@litegraph-ts/core";
  import LightboxModal from "./LightboxModal.svelte";
  import ComfyQueue from "./ComfyQueue.svelte";
+ import ComfyProperties from "./ComfyProperties.svelte";
  import queueState from "$lib/stores/queueState";
 
  export let app: ComfyApp = undefined;
@@ -23,6 +24,7 @@
  let queue: ComfyQueue = undefined;
  let mainElem: HTMLDivElement;
  let uiPane: ComfyUIPane = undefined;
+ let props: ComfyProperties = undefined;
  let containerElem: HTMLDivElement;
  let resizeTimeout: NodeJS.Timeout | null;
  let hasShownUIHelpToast: boolean = false;
@@ -64,15 +66,27 @@
      }
  }
 
- let sidebarSize = 20;
+ let propsSidebarSize = 15;
 
- function toggleSidebar() {
-     if (sidebarSize == 0) {
-         sidebarSize = 20;
+ function toggleProps() {
+     if (propsSidebarSize == 0) {
+         propsSidebarSize = 15;
          app.resizeCanvas();
      }
      else {
-         sidebarSize = 0;
+         propsSidebarSize = 0;
+     }
+ }
+
+ let queueSidebarSize = 15;
+
+ function toggleQueue() {
+     if (queueSidebarSize == 0) {
+         queueSidebarSize = 15;
+         app.resizeCanvas();
+     }
+     else {
+         queueSidebarSize = 0;
      }
  }
 
@@ -153,6 +167,11 @@
     <div id="dropzone" class="dropzone"></div>
     <div id="container" bind:this={containerElem}>
         <Splitpanes theme="comfy" on:resize={refreshView}>
+            <Pane bind:size={propsSidebarSize}>
+                <div class="sidebar-wrapper pane-wrapper">
+                    <ComfyProperties bind:this={props} />
+                </div>
+            </Pane>
             <Pane>
                 <Splitpanes theme="comfy" on:resize={refreshView} horizontal="{true}">
                     <Pane>
@@ -165,7 +184,7 @@
                     </Pane>
                 </Splitpanes>
             </Pane>
-            <Pane bind:size={sidebarSize}>
+            <Pane bind:size={queueSidebarSize}>
                 <div class="sidebar-wrapper pane-wrapper">
                     <ComfyQueue bind:this={queue} />
                 </div>
@@ -179,8 +198,11 @@
         <Button variant="secondary" on:click={toggleGraph}>
             Toggle Graph
         </Button>
-        <Button variant="secondary" on:click={toggleSidebar}>
-            Toggle Sidebar
+        <Button variant="secondary" on:click={toggleProps}>
+            Toggle Props
+        </Button>
+        <Button variant="secondary" on:click={toggleQueue}>
+            Toggle Queue
         </Button>
         <Button variant="secondary" on:click={doSave}>
             Save
diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte
new file mode 100644
index 0000000..c430561
--- /dev/null
+++ b/src/lib/components/ComfyProperties.svelte
@@ -0,0 +1,166 @@
+<script lang="ts">
+ import { Block, BlockTitle } from "@gradio/atoms";
+ import { TextBox, Checkbox } from "@gradio/form";
+ import layoutState, { ALL_ATTRIBUTES } from "$lib/stores/layoutState"
+ import { get } from "svelte/store"
+
+ let target: IDragItem | null = null;
+ let node: LGraphNode | null = null;
+
+ $: if ($layoutState.currentSelection.length > 0) {
+     const targetId = $layoutState.currentSelection.slice(-1)
+     target = $layoutState.allItems[targetId].dragItem
+     if (target.type === "widget") {
+         node = target.node
+     }
+     else {
+         node = null;
+     }
+ }
+ else {
+     target = null
+     node = null;
+ }
+
+ const _entries = [
+     { name: "title" },
+     { name: "showTitle" },
+     { name: "direction" },
+     { name: "classes" },
+ ]
+
+ function getTargetType(): string {
+     if (node)
+         return "Node"
+     else if (target?.type === "container")
+         "Group"
+     return "???"
+ }
+
+ function updateAttribute(entry: any, value: any) {
+     if (target) {
+         const name = entry.name
+         console.warn("updateAttribute", name, value)
+
+         target.attrs[name] = value
+         target.attrsChanged.set(!get(target.attrsChanged))
+
+         if (node) {
+             node.propsChanged.set(!get(node.propsChanged))
+         }
+     }
+ }
+</script>
+
+<div class="props">
+    {#if target}
+        <div class="top">
+            <div class="target-name">
+                <span>
+                    <span class="title">{target.attrs.title}</span>
+                    <span class="type">({getTargetType()})</span>
+                </span>
+            </div>
+        </div>
+        <div class="props-entries">
+            {#each ALL_ATTRIBUTES as category(category.categoryName)}
+                <div class="category-name">
+                    <span>
+                        <span class="title">{target.attrs.title}</span>
+                    </span>
+                </div>
+                {#each category.specs as spec(spec.name)}
+                    {@const has = spec.name in target.attrs}
+                    {#if has}
+                        <div class="props-entry">
+                            {#if spec.type === "string"}
+                                <TextBox
+                                    value={target.attrs[spec.name]}
+                                    on:change={(e) => updateAttribute(spec, e.detail)}
+                                    label={spec.name}
+                                    max_lines={1}
+                                    />
+                            {:else if spec.type === "boolean"}
+                                <Checkbox
+                                    value={target.attrs[spec.name]}
+                                    on:change={(e) => updateAttribute(spec, e.detail)}
+                                    label={spec.name}
+                                    />
+                            {:else if spec.type === "enum"}
+                                <label class="select-wrapper">
+                                    <BlockTitle>{spec.name}</BlockTitle>
+                                    <div class="select">
+                                        <select
+                                            value={target.attrs[spec.name]}
+                                            on:change={(e) => updateAttribute(spec, e.currentTarget.options[e.currentTarget.selectedIndex].value)}>
+                                            {#each spec.values as value}
+                                                <option value={value}>
+                                                    {value}
+                                                </option>
+                                            {/each}
+                                        </select>
+                                    </div>
+                                </label>
+                            {/if}
+                        </div>
+                    {/if}
+                {/each}
+            {/each}
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+ .props-entry {
+     padding: 0.5rem 0.5rem 0 0.5rem;
+     display: flex;
+     flex-direction: row;
+ }
+
+ .target-name {
+     border-color: var(--neutral-400);
+     background: var(--neutral-300);
+
+     .title {
+         font-weight: bold;
+     }
+ }
+
+ .category-name {
+     border-color: var(--neutral-300);
+     background: var(--neutral-200);
+ }
+
+ .target-name, .category-name {
+     border-width: var(--block-border-width);
+     padding: 0.4rem 1.0rem;
+
+     .type {
+         color: var(--neutral-500);
+     }
+ }
+
+ .select-wrapper {
+     width: 100%;
+
+     .select {
+         width: 100%;
+
+         select {
+             width: 100%
+         }
+     }
+ }
+
+ .select-title {
+     padding: 0.2rem;
+ }
+
+ .bottom {
+     /* width: 100%;
+        height: auto;
+        position: absolute;
+        bottom: 0;
+        padding: 0.5em; */
+ }
+</style>
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index 1fd3b41..f37712e 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -5,11 +5,13 @@
  import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
  import { startDrag, stopDrag } from "$lib/utils"
  import BlockContainer from "./BlockContainer.svelte"
+ import { type Writable } from "svelte/store"
 
  export let dragItem: IDragItem | null = null;
  export let zIndex: number = 0;
  export let classes: string[] = [];
  let container: ContainerLayout | null = null;
+ let attrsChanged: Writable<boolean> | null = null;
  let widget: WidgetLayout | null = null;
  let showHandles: boolean = false;
 
@@ -17,13 +19,16 @@
      dragItem = null;
      container = null;
      widget = null;
+     attrsChanged = null;
  }
  else if (dragItem.type === "container") {
      container = dragItem as ContainerLayout;
+     attrsChanged = container.attrsChanged;
      widget = null;
  }
  else if (dragItem.type === "widget") {
      widget = dragItem as WidgetLayout;
+     attrsChanged = widget.attrsChanged;
      container = null;
  }
 
@@ -35,21 +40,31 @@
  $: if ($queueState && widget && widget.node) {
      dragItem.isNodeExecuting = $queueState.runningNodeId === widget.node.id;
  }
+
+ function getWidgetClass() {
+     const title = widget.node.type.replace("/", "-").replace(".", "-")
+     return `widget--${title}`
+ }
 </script>
 
 
 {#if container}
-    <BlockContainer {container} {classes} {zIndex} {showHandles} />
+    {#key $attrsChanged}
+        <BlockContainer {container} {classes} {zIndex} {showHandles} />
+    {/key}
 {:else if widget && widget.node}
-    <div class="widget" class:widget-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}
-        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} {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}/>
-    {/if}
+    {#key $attrsChanged}
+        <div class="widget {widget.attrs.classes} {getWidgetClass()}"
+             class:widget-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}
+            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} {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}/>
+        {/if}
+    {/key}
 {/if}
 
 <style lang="scss">
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index a299319..24f158b 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -24,7 +24,8 @@ export type LayoutState = {
 export type AttributesSpec = {
     name: string,
     type: string,
-    editable: boolean
+    editable: boolean,
+    values?: string[]
 }
 
 export type AttributesCategorySpec = {
@@ -50,8 +51,9 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
             },
             {
                 name: "direction",
-                type: "string",
+                type: "enum",
                 editable: true,
+                values: ["horizontal", "vertical"]
             },
             {
                 name: "classes",
@@ -74,7 +76,8 @@ export interface IDragItem {
     type: string,
     id: DragItemID,
     isNodeExecuting?: boolean,
-    attrs: Attributes
+    attrs: Attributes,
+    attrsChanged: Writable<boolean>
 }
 
 export interface ContainerLayout extends IDragItem {
@@ -141,6 +144,7 @@ function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes>
     const dragItem: ContainerLayout = {
         type: "container",
         id: `${state.currentId++}`,
+        attrsChanged: writable(false),
         attrs: {
             title: "Container",
             showTitle: true,
@@ -166,6 +170,7 @@ function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partia
         type: "widget",
         id: `${state.currentId++}`,
         node: node,
+        attrsChanged: writable(false),
         attrs: {
             title: widgetName,
             showTitle: true,
@@ -436,7 +441,8 @@ function deserialize(data: SerializedLayoutState, graph: LGraph) {
         const dragItem: IDragItem = {
             type: entry.dragItem.type,
             id: entry.dragItem.id,
-            attrs: entry.dragItem.attrs
+            attrs: entry.dragItem.attrs,
+            attrsChanged: writable(false)
         };
 
         const dragEntry: DragItemEntry = {
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index 6d1cedf..8f735d5 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/src/lib/widgets/ComboWidget.svelte
@@ -67,7 +67,9 @@
     {#key $propsChanged}
         {#if node !== null && nodeValue !== null}
             <label>
-                <BlockTitle show_label={true}>{widget.attrs.title}</BlockTitle>
+                {#if widget.attrs.showTitle}
+                    <BlockTitle show_label={widget.attrs.showTitle}>{widget.attrs.title}</BlockTitle>
+                {/if}
                 <Select
                     bind:value={option}
                     bind:items={node.properties.values}
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 150b1d6..b63cbc6 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -1 +1 @@
-@import "gradio"
+@import "gradio";