- {#each dragItems as dragItem(dragItem.id)}
- {@const node = dragItem.node}
- {@const id = node.id}
-
-
-
- {#each $nodeState[id].widgetStates as item}
-
- {#if dragItem[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-
- {/if}
- {/each}
- {#if $uiState.unlocked}
-
- {/if}
-
-
- {/each}
-
-
-
diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index 962c878..29df71d 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/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 {
- let minWidgetCount = 2 ** 64;
- let minIndex = 0;
- 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].widgetStates.length;
- }
- 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);
- }
+ //
+ // 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
= {};
- for (let i = 0; i < dragItems.length; i++) {
- for (const dragItem of dragItems[i]) {
- nodeIdToDragItem[dragItem.node.id] = dragItem
+ const a: ContainerLayout = {
+ type: "container",
+ id: "0",
+ 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) {
- const dragItem = nodeIdToDragItem[nodeId];
- const paneIndex = findLeastPopulatedPaneIndex();
- dragItems[paneIndex].push(dragItem);
- }
- }
+ }
+ },
+ ]
+ $layoutState.children[1] = []
+ $layoutState.children[2] = []
}
-
-
-
+
diff --git a/src/lib/components/ComfyUIPane.ts b/src/lib/components/ComfyUIPane.ts
deleted file mode 100644
index c555e03..0000000
--- a/src/lib/components/ComfyUIPane.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { LGraphNode } from "@litegraph-ts/core"
-
-export type DragItem = {
- id: number,
- node: LGraphNode,
- isNodeExecuting?: boolean
-}
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
new file mode 100644
index 0000000..6c70a56
--- /dev/null
+++ b/src/lib/components/WidgetContainer.svelte
@@ -0,0 +1,198 @@
+
+
+
+{#if container}
+ {@const node = container.node}
+ {@const id = container.id}
+
+
+
+ {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
+
+
+ {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+
+ {/if}
+
+ {/each}
+
+ {/if}
+{/if}
+
+
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
new file mode 100644
index 0000000..a169c46
--- /dev/null
+++ b/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,
+}
+
+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 & LayoutStateOps;
+const store: Writable = 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;
diff --git a/src/lib/stores/uiState.ts b/src/lib/stores/uiState.ts
index 0fbb6b8..507232f 100644
--- a/src/lib/stores/uiState.ts
+++ b/src/lib/stores/uiState.ts
@@ -10,7 +10,12 @@ export type UIState = {
}
export type WritableUIStateStore = Writable;
-const store: WritableUIStateStore = writable({ unlocked: false, graphLocked: true, nodesLocked:false })
+const store: WritableUIStateStore = writable(
+ {
+ graphLocked: true,
+ nodesLocked: false,
+ unlocked: true,
+ })
const uiStateStore: WritableUIStateStore =
{