Widget instead of node arrangement
This commit is contained in:
space-nuko
@@ -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>
|
||||
@@ -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<number, DragItem> = {};
|
||||
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] = []
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="comfy-ui-panes" >
|
||||
<ComfyPane bind:dragItems={dragItems[0]} />
|
||||
<ComfyPane bind:dragItems={dragItems[1]} />
|
||||
<ComfyPane bind:dragItems={dragItems[2]} />
|
||||
<WidgetContainer bind:dragItem={$layoutState.root} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#comfy-ui-panes {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
import type { LGraphNode } from "@litegraph-ts/core"
|
||||
|
||||
export type DragItem = {
|
||||
id: number,
|
||||
node: LGraphNode,
|
||||
isNodeExecuting?: boolean
|
||||
}
|
||||
198
src/lib/components/WidgetContainer.svelte
Normal file
198
src/lib/components/WidgetContainer.svelte
Normal file
@@ -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>
|
||||
65
src/lib/stores/layoutState.ts
Normal file
65
src/lib/stores/layoutState.ts
Normal file
@@ -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;
|
||||
@@ -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 =
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user