Widget instead of node arrangement

src/lib/components/ComfyPane.svelte

@@ -1,177 +0,0 @@
-<script lang="ts">
- import { onDestroy } from "svelte";
- import { get } from "svelte/store"
- import { Block, BlockTitle } from "@gradio/atoms";
- import { Move } from 'radix-icons-svelte';
- import queueState from "$lib/stores/queueState";
- import nodeState from "$lib/stores/nodeState";
- import uiState from "$lib/stores/uiState";
-
- import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME } from 'svelte-dnd-action';
-
- import {fade} from 'svelte/transition';
- // notice - fade in works fine but don't add svelte's fade-out (known issue)
- import {cubicIn} from 'svelte/easing';
- import { flip } from 'svelte/animate';
- import ComfyApp from "./ComfyApp";
- import type { LGraphNode } from "@litegraph-ts/core";
- import type { DragItem } from "./ComfyUIPane";
- import { getComponentForWidgetState } from "$lib/utils"
-
- export let dragItems: DragItem[] = [];
- let dragDisabled = true;
- let unlockUI = false;
- const flipDurationMs = 200;
-
- $: dragDisabled = !$uiState.unlocked;
-
- const handleConsider = evt => {
-     dragItems = evt.detail.items;
-     // console.log(dragItems);
- };
- const handleFinalize = evt => {
-     dragItems = evt.detail.items;
-     // Ensure dragging is stopped on drag finish
-     dragDisabled = true;
- };
-
- const startDrag = () => {
-     if (!$uiState.unlocked)
-         return
-     dragDisabled = false;
- };
- const stopDrag = () => {
-     if (!$uiState.unlocked)
-         return
-     dragDisabled = true;
- };
-
- const unsubscribe = nodeState.subscribe(state => {
-     dragItems = dragItems.filter(item => item.node.id in state);
- });
-
- onDestroy(unsubscribe);
-
- $: if ($queueState) {
-     for (let dragItem of dragItems) {
-         dragItem.isNodeExecuting = $queueState.runningNodeId === dragItem.node.id;
-     }
-     dragItems = dragItems;
- }
-
- function updateNodeName(node: LGraphNode, value: string) {
-     nodeState.nodeStateChanged(node);
- }
-</script>
-
-
-<div class="v-pane"
-     use:dndzone="{{ items: dragItems, dragDisabled, flipDurationMs }}"
-     on:consider="{handleConsider}"
-     on:finalize="{handleFinalize}"
->
-    {#each dragItems as dragItem(dragItem.id)}
-        {@const node = dragItem.node}
-        {@const id = node.id}
-        <div class="animation-wrapper" class:is-executing={dragItem.isNodeExecuting} animate:flip={{duration:flipDurationMs}}>
-            <Block>
-                    <label for={String(id)} class={$uiState.unlocked ? "edit-title-label" : ""}>
-                        <BlockTitle>
-                            {#if $uiState.unlocked}
-                                <input class="edit-title" bind:value={dragItem.node.title} type="text" minlength="1" on:input="{(v) => { updateNodeName(node, v) }}"/>
-                            {:else}
-                                {node.title}
-                            {/if}
-                            {#if node.title !== node.type}
-                                <span class="node-type">({node.type})</span>
-                            {/if}
-                        </BlockTitle>
-                    </label>
-                    {#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'/>
-                        {/if}
-                    {/each}
-                    {#if $uiState.unlocked}
-                        <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
-                    {/if}
-            </Block>
-        </div>
-    {/each}
-</div>
-
-<style>
- .v-pane {
-     border: 1px solid grey;
-     float: left;
-     height: 100%;
-     overflow: auto;
-     position: relative;
-     width: 33%;
- }
-
- .is-executing :global(.block) {
-     border: 5px dashed var(--color-green-600) !important;
- }
-
- .handle {
-     cursor: grab;
-     z-index: 99999;
-     position: absolute;
-     right: 0;
-     top: 0;
-     width: 100%;
-     height: 100%;
- }
-
- .handle:hover {
-     background-color: #add8e680;
- }
-
- .drag-item-shadow {
-     position: absolute;
-     top: 0; left:0; right: 0; bottom: 0;
-     visibility: visible;
-     border: 1px dashed grey;
-     background: lightblue;
-     opacity: 0.5;
-     margin: 0;
- }
-
- .node-type {
-     font-size: smaller;
-     color: var(--neutral-400);
- }
-
- .edit-title-label {
-     position: relative;
-     z-index: 100000;
- }
-
- .edit-title {
-     z-index: 100000;
-     display: block;
-     position: relative;
-     outline: none !important;
-     box-shadow: var(--input-shadow);
-     border: var(--input-border-width) solid var(--input-border-color);
-     border-radius: var(--input-radius);
-     background: var(--input-background-fill);
-     padding: var(--input-padding);
-     width: 100%;
-     color: var(--body-text-color);
-     font-weight: var(--input-text-weight);
-     font-size: var(--input-text-size);
-     line-height: var(--line-sm);
- }
-
- .edit-title:focus {
-     box-shadow: var(--input-shadow-focus);
-     border-color: var(--input-border-color-focus);
- }
-
- .edit-title::placeholder {
-     color: var(--input-placeholder-color);
- }
-</style>

src/lib/components/ComfyUIPane.svelte

@@ -4,101 +4,76 @@
  import type { IWidget } from "@litegraph-ts/core";
  import ComfyApp  from "./ComfyApp";
  import type { SerializedPanes } from "./ComfyApp"
- import ComfyPane from "./ComfyPane.svelte";
+ import WidgetContainer from "./WidgetContainer.svelte";
  import nodeState from "$lib/stores/nodeState";
-	import type { DragItem } from "./ComfyUIPane";
+ import layoutState, { type ContainerLayout, type DragItem } from "$lib/stores/layoutState";
 
  export let app: ComfyApp;
  let dragConfigured: boolean = false;
  export let dragItems: DragItem[][] = []
 
  export let totalId = 0;
-
+ //
- function findLeastPopulatedPaneIndex(): number {
+ //  function addUIForNewNode(node: LGraphNode, paneIndex?: number) {
-     let minWidgetCount = 2 ** 64;
+ //      if (!paneIndex)
-     let minIndex = 0;
+ //          paneIndex = findLeastPopulatedPaneIndex();
-     let state = get(nodeState);
+ //      dragItems[paneIndex].push({ id: totalId++, node: node });
-     for (let i = 0; i < dragItems.length; i++) {
+ //  }
-         let widgetCount = 0;
+ //
-         for (let j = 0; j < dragItems[i].length; j++) {
+ //  $: if(app && !dragConfigured) {
-             const nodeID = dragItems[i][j].node.id;
+ //      dragConfigured = true;
-             widgetCount += state[nodeID].widgetStates.length;
+ //      app.eventBus.on("nodeAdded", addUIForNewNode);
-         }
+ //  }
-         if (widgetCount < minWidgetCount) {
-             minWidgetCount = widgetCount
-             minIndex = i;
-         }
-     }
-     return minIndex
- }
-
- function addUIForNewNode(node: LGraphNode, paneIndex?: number) {
-     if (!paneIndex)
-         paneIndex = findLeastPopulatedPaneIndex();
-     dragItems[paneIndex].push({ id: totalId++, node: node });
- }
-
- $: if(app && !dragConfigured) {
-     dragConfigured = true;
-     app.eventBus.on("nodeAdded", addUIForNewNode);
- }
 
  /*
   * Serialize UI panel order so it can be restored when workflow is loaded
   */
  export function serialize(): any {
-     let panels = []
-     for (let i = 0; i < dragItems.length; i++) {
-         panels[i] = [];
-         for (let j = 0; j < dragItems[i].length; j++) {
-             panels[i].push({ nodeId: dragItems[i][j].node.id });
-         }
-     }
-     return {
-         panels
-     }
  }
 
  export function restore(panels: SerializedPanes) {
-     let nodeIdToDragItem: Record<number, DragItem> = {};
+     const a: ContainerLayout = {
-     for (let i = 0; i < dragItems.length; i++) {
+         type: "container",
-         for (const dragItem of dragItems[i]) {
+         id: "0",
-             nodeIdToDragItem[dragItem.node.id] = dragItem
+         attrs: {
+             title: "root!",
+             direction: "horizontal"
          }
      }
+     $layoutState.root = a;
+     $layoutState.children[0] = [
+         {
+             type: "widget",
+             id: "1",
+             nodeId: 7,
+             widgetName: "text",
+             attrs: {
 
-     for (let i = 0; i < panels.panels.length; i++) {
-         dragItems[i].length = 0;
-         for (const panel of panels.panels[i]) {
-             const dragItem = nodeIdToDragItem[panel.nodeId];
-             if (dragItem) {
-                 delete nodeIdToDragItem[panel.nodeId];
-                 dragItems[i].push(dragItem)
              }
-         }
+         },
-     }
+         {
+             type: "widget",
+             id: "2",
+             nodeId: 6,
+             widgetName: "text",
+             attrs: {
 
-     // Put everything left over into other columns
+             }
-     if (Object.keys(nodeIdToDragItem).length > 0) {
+         },
-         console.warn("Extra panels without ordering found", nodeIdToDragItem, panels)
+     ]
-         for (const nodeId in nodeIdToDragItem) {
+     $layoutState.children[1] = []
-             const dragItem = nodeIdToDragItem[nodeId];
+     $layoutState.children[2] = []
-             const paneIndex = findLeastPopulatedPaneIndex();
-             dragItems[paneIndex].push(dragItem);
-         }
-     }
  }
 </script>
 
 <div id="comfy-ui-panes" >
-    <ComfyPane bind:dragItems={dragItems[0]} />
+    <WidgetContainer bind:dragItem={$layoutState.root} />
-    <ComfyPane bind:dragItems={dragItems[1]} />
-    <ComfyPane bind:dragItems={dragItems[2]} />
 </div>
 
 <style>
  #comfy-ui-panes {
      width: 100%;
      height: 100%;
+     overflow: scroll;
  }
 </style>

src/lib/components/ComfyUIPane.ts

@@ -1,7 +0,0 @@
-import type { LGraphNode } from "@litegraph-ts/core"
-
-export type DragItem = {
-    id: number,
-    node: LGraphNode,
-    isNodeExecuting?: boolean
-}

src/lib/components/WidgetContainer.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+ import { onDestroy } from "svelte";
+ import { get } from "svelte/store"
+ import { Block, BlockTitle } from "@gradio/atoms";
+ import { Move } from 'radix-icons-svelte';
+ import queueState from "$lib/stores/queueState";
+ import nodeState, { type WidgetUIState } from "$lib/stores/nodeState";
+ import uiState from "$lib/stores/uiState";
+
+ import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
+
+ import {fade} from 'svelte/transition';
+ // notice - fade in works fine but don't add svelte's fade-out (known issue)
+ import {cubicIn} from 'svelte/easing';
+ import { flip } from 'svelte/animate';
+ import ComfyApp from "./ComfyApp";
+ import type { LGraphNode } from "@litegraph-ts/core";
+ import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
+ import { getComponentForWidgetState } from "$lib/utils"
+
+ export let dragItem: DragItem | null = null;
+ let container: ContainerLayout | null = null;
+ let widget: WidgetUIState | null = null;
+ let children: IDragItem[] | null = null;
+ let dragDisabled = true;
+ const flipDurationMs = 200;
+
+ $: if (dragItem) {
+     if (dragItem.type === "container") {
+         container = dragItem as ContainerLayout;
+         children = $layoutState.children[dragItem.id];
+         widget = null;
+     }
+     else if (dragItem.type === "widget") {
+         const widgetLayout = dragItem as WidgetLayout;
+         widget = nodeState.findWidgetByName(widgetLayout.nodeId, widgetLayout.widgetName)
+         children = null;
+         container = null;
+     }
+ }
+
+ $: dragDisabled = !$uiState.unlocked;
+
+ const handleConsider = evt => {
+     $layoutState.children[dragItem.id] = evt.detail.items;
+     children = $layoutState.children[dragItem.id];
+     // console.log(dragItems);
+ };
+ const handleFinalize = evt => {
+     $layoutState.children[dragItem.id] = evt.detail.items;
+     children = $layoutState.children[dragItem.id];
+     // Ensure dragging is stopped on drag finish
+     // dragDisabled = true;
+ };
+
+ const startDrag = () => {
+     if (!$uiState.unlocked)
+         return
+     // dragDisabled = false;
+ };
+ const stopDrag = () => {
+     if (!$uiState.unlocked)
+         return
+     // dragDisabled = true;
+ };
+
+ const unsubscribe = nodeState.subscribe(state => {
+     if (container) {
+         $layoutState.children[container.id] = $layoutState.children[container.id].filter(item => item.node.id in state);
+         children = $layoutState.children[container.id];
+     }
+ });
+
+ onDestroy(unsubscribe);
+
+ $: if ($queueState && widget) {
+     widget.isNodeExecuting = $queueState.runningNodeId === widget.nodeId;
+     children = $layoutState.children[widget.nodeId];
+ }
+
+ function updateNodeName(node: LGraphNode, value: string) {
+     nodeState.nodeStateChanged(node);
+ }
+</script>
+
+
+{#if container}
+    {@const node = container.node}
+    {@const id = container.id}
+    <Block>
+        <label for={String(id)} class={$uiState.unlocked ? "edit-title-label" : ""}>
+            <BlockTitle>
+                {#if $uiState.unlocked}
+                    <input class="edit-title" bind:value={container.attrs.title} type="text" minlength="1" on:input="{(v) => { updateNodeName(node, v) }}"/>
+                {:else}
+                    {container.attrs.title}
+                {/if}
+            </BlockTitle>
+        </label>
+        <div class="v-pane"
+             use:dndzone="{{ items: children, dragDisabled, flipDurationMs }}"
+             on:consider="{handleConsider}"
+             on:finalize="{handleFinalize}"
+        >
+			{#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
+                <div class="animation-wrapper" class:is-executing={item.isNodeExecuting} animate:flip={{duration:flipDurationMs}}>
+                    <svelte:self dragItem={item}/>
+                    {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+                        <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    </Block>
+{:else if widget}
+    <svelte:component this={getComponentForWidgetState(widget)} item={widget} />
+    {#if $uiState.unlocked}
+        <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+    {/if}
+{/if}
+
+<style>
+ .v-pane {
+     height: 100%;
+     width: 100%;
+     overflow-y: auto ;
+ }
+
+ .is-executing :global(.block) {
+     border: 5px dashed var(--color-green-600) !important;
+ }
+
+ .animation-wrapper {
+     position: relative;
+     width: 100%;
+     height: 100%;
+ }
+
+ .handle {
+     cursor: grab;
+     z-index: 99999;
+     position: absolute;
+     right: 0;
+     top: 0;
+     width: 100%;
+     height: 100%;
+ }
+
+ .handle:hover {
+     background-color: #add8e680;
+ }
+
+ .drag-item-shadow {
+     position: absolute;
+     top: 0; left:0; right: 0; bottom: 0;
+     visibility: visible;
+     border: 1px dashed grey;
+     background: lightblue;
+     opacity: 0.5;
+     margin: 0;
+ }
+
+ .node-type {
+     font-size: smaller;
+     color: var(--neutral-400);
+ }
+
+ .edit-title-label {
+     position: relative;
+     z-index: var(--layer-1);
+ }
+
+ .edit-title {
+     z-index: var(--layer-1);
+     display: block;
+     position: relative;
+     outline: none !important;
+     box-shadow: var(--input-shadow);
+     border: var(--input-border-width) solid var(--input-border-color);
+     border-radius: var(--input-radius);
+     background: var(--input-background-fill);
+     padding: var(--input-padding);
+     width: 100%;
+     color: var(--body-text-color);
+     font-weight: var(--input-text-weight);
+     font-size: var(--input-text-size);
+     line-height: var(--line-sm);
+ }
+
+ .edit-title:focus {
+     box-shadow: var(--input-shadow-focus);
+     border-color: var(--input-border-color-focus);
+ }
+
+ .edit-title::placeholder {
+     color: var(--input-placeholder-color);
+ }
+</style>

src/lib/stores/layoutState.ts

@@ -0,0 +1,65 @@
+import { get, writable } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
+import type ComfyApp from "$lib/components/ComfyApp"
+import type { LGraphNode, IWidget } from "@litegraph-ts/core"
+
+export type LayoutState = {
+    root: IDragItem | null,
+    children: Record<number, IDragItem[]>,
+}
+
+export type Properties = {
+    direction: string,
+}
+
+export interface IDragItem {
+    type: string,
+    id: number,
+    isNodeExecuting?: boolean,
+    properties: Properties
+}
+
+export interface ContainerLayout extends IDragItem {
+    type: "container",
+}
+
+export interface WidgetLayout extends IDragItem {
+    type: "widget",
+    nodeId: number,
+    widgetName: string
+}
+
+type LayoutStateOps = {
+    findDefaultContainerForInsertion: () => ContainerLayout | null,
+    reset: () => void,
+}
+
+export type WritableLayoutStateStore = Writable<LayoutState> & LayoutStateOps;
+const store: Writable<LayoutState> = writable({
+    root: null,
+    children: []
+})
+
+function findDefaultContainerForInsertion(): ContainerLayout | null {
+    const state = get(store);
+    if ("children" in state.root) {
+        const container = state.root as ContainerLayout;
+        const found = state.children[container.id].find((di) => {"children" in di})
+        if (found && "children" in found)
+            return found as ContainerLayout;
+        return container;
+    }
+    return null
+}
+
+function reset() {
+    // TODO
+}
+
+const uiStateStore: WritableLayoutStateStore =
+{
+    ...store,
+    findDefaultContainerForInsertion,
+    reset
+}
+export default uiStateStore;

src/lib/stores/uiState.ts

@@ -10,7 +10,12 @@ export type UIState = {
 }
 
 export type WritableUIStateStore = Writable<UIState>;
-const store: WritableUIStateStore = writable({ unlocked: false, graphLocked: true, nodesLocked:false })
+const store: WritableUIStateStore = writable(
+    {
+        graphLocked: true,
+        nodesLocked: false,
+        unlocked: true,
+    })
 
 const uiStateStore: WritableUIStateStore =
 {