neuro_llc/ComfyBox
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Refactor & handle node lifecycle

Browse Source
This commit is contained in:
space-nuko
2023-04-29 16:13:35 -07:00
parent 95133df3d9
commit 59cbff1648
6 changed files with 405 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
src/lib/components/BlockContainer.svelte Normal file
View File

@@ -0,0 +1,269 @@
<script lang="ts">
import { Block, BlockTitle } from "@gradio/atoms";
import uiState from "$lib/stores/uiState";
import WidgetContainer from "./WidgetContainer.svelte"
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 layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
import { startDrag, stopDrag } from "$lib/utils"
export let container: ContainerLayout | null = null;
export let zIndex: number = 0;
export let classes: string[] = [];
export let showHandles: boolean = false;
let children: IDragItem[] | null = null;
const flipDurationMs = 100;
$: if (container) {
children = $layoutState.allItems[container.id].children;
}
else {
children = null;
}
function handleConsider(evt: any) {
children = layoutState.updateChildren(container, evt.detail.items)
// console.log(dragItems);
};
function handleFinalize(evt: any) {
children = layoutState.updateChildren(container, evt.detail.items)
// Ensure dragging is stopped on drag finish
};
</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: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"
class:is-executing={item.isNodeExecuting}
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>
{#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}
<style lang="scss">
.v-pane {
height: 100%;
width: 100%;
overflow: visible;
display: flex;
.edit {
min-width: 200px;
}
&.empty {
border-width: 3px;
border-color: var(--color-grey-400);
border-radius: var(--block-radius);
background: var(--color-grey-300);
min-height: 100px;
border-style: dashed;
}
}
.handle {
cursor: grab;
z-index: 99999;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
}
.handle-container:hover {
background-color: #d8ade680;
}
.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;
}
.container {
display: flex;
:global(.block) {
height: fit-content;
}
&.horizontal {
flex-wrap: wrap;
gap: var(--layout-gap);
width: var(--size-full);
.v-pane {
flex-direction: row;
}
> :global(*), > :global(.form > *) {
flex: 1 1 0%;
flex-wrap: wrap;
min-width: min(160px, 100%);
}
}
&.vertical {
position: relative;
.v-pane {
flex-direction: column;
}
> :global(*), > :global(.form > *), .v-pane {
width: var(--size-full);
}
}
}
.container.selected > :global(.block) {
background: var(--color-yellow-300);
}
.is-executing {
border: 3px dashed var(--color-green-600) !important;
margin: 0.2em;
padding: 0.2em;
}
.animation-wrapper {
position: relative;
&:not(.edit) {
flex-grow: 1;
}
}
.handle {
cursor: grab;
z-index: 99999;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
}
.handle-widget:hover {
background-color: #add8e680;
}
.handle-container:hover {
background-color: #d8ade680;
}
.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 {
z-index: 10000;
position: relative;
}
.edit-title {
z-index: 10000;
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);
}
.container-edit-outline > :global(.block) {
border-color: var(--color-pink-500);
border-width: 2px;
border-style: dashed !important;
margin: 0.2em;
padding: 0.2em;
}
.widget-edit-outline {
border: 2px dashed var(--color-blue-400);
margin: 0.2em;
padding: 0.2em;
}
.root-container > :global(.block) {
padding: 0px;
}
</style>

5
src/lib/components/ComfyApp.svelte
View File

@@ -110,6 +110,11 @@
app.eventBus.on("configured", nodeState.configureFinished);
app.eventBus.on("cleared", nodeState.clear);
app.eventBus.on("nodeAdded", layoutState.nodeAdded);
app.eventBus.on("nodeRemoved", layoutState.nodeRemoved);
app.eventBus.on("configured", layoutState.configureFinished);
app.eventBus.on("cleared", layoutState.clear);
app.eventBus.on("autosave", doAutosave);
app.eventBus.on("restored", doRestore);

11
src/lib/components/ComfyUIPane.svelte
View File

@@ -33,18 +33,11 @@
* Serialize UI panel order so it can be restored when workflow is loaded
*/
export function serialize(): any {
// TODO
}
export function restore(panels: SerializedPanes) {
const id = 0;
$layoutState.root = layoutState.addContainer(null, { direction: "horizontal", showTitle: false });
const left = layoutState.addContainer($layoutState.root.id, { direction: "vertical", showTitle: false });
const right = layoutState.addContainer($layoutState.root.id, { direction: "vertical", showTitle: false });
for (const node of app.lGraph.computeExecutionOrder(false, null)) {
layoutState.nodeAdded(node)
}
console.warn($layoutState)
// TODO
}
function groupWidgets() {

234
src/lib/components/WidgetContainer.svelte
View File

@@ -1,47 +1,34 @@
<script lang="ts">
import { Block, BlockTitle } from "@gradio/atoms";
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 layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
import { getComponentForWidgetState } from "$lib/utils"
import { startDrag, stopDrag, getComponentForWidgetState } from "$lib/utils"
import BlockContainer from "./BlockContainer.svelte"
export let dragItem: IDragItem | null = null;
export let zIndex: number = 0;
export let classes: string[] = [];
export let isRoot: boolean = false;
let dragDisabled: boolean = false;
let container: ContainerLayout | null = null;
let widget: WidgetLayout | null = null;
let widgetState: WidgetUIState | null = null;
let children: IDragItem[] | null = null;
let showHandles: boolean = false;
const flipDurationMs = 100;
$: if (dragItem) {
if (!$layoutState.allItems[dragItem.id]) {
dragItem = null;
widget = null;
widgetState = null;
children = null;
container = null;
}
else if (dragItem.type === "container") {
container = dragItem as ContainerLayout;
children = $layoutState.allItems[dragItem.id].children;
widget = null;
}
else if (dragItem.type === "widget") {
widget = dragItem as WidgetLayout;
widgetState = nodeState.findWidgetByName(widget.nodeId, widget.widgetName)
children = null;
container = null;
}
}
@@ -50,99 +37,15 @@
&& zIndex > 1
&& !$layoutState.isMenuOpen
function handleConsider(evt: any) {
children = layoutState.updateChildren(dragItem, evt.detail.items)
// console.log(dragItems);
};
function handleFinalize(evt: any) {
children = layoutState.updateChildren(dragItem, evt.detail.items)
// Ensure dragging is stopped on drag finish
};
const startDrag = (evt: MouseEvent) => {
const dragItemId: string = evt.target.dataset["dragItemId"];
if (evt.button !== 0) {
if ($layoutState.currentSelection.length <= 1 && !$layoutState.isMenuOpen)
$layoutState.currentSelection = [dragItemId]
return;
}
const item = $layoutState.allItems[dragItemId].dragItem
if (evt.ctrlKey) {
const index = $layoutState.currentSelection.indexOf(item.id)
if (index === -1)
$layoutState.currentSelection.push(item.id);
else
$layoutState.currentSelection.splice(index, 1);
$layoutState.currentSelection = $layoutState.currentSelection;
}
else {
$layoutState.currentSelection = [item.id]
}
};
const stopDrag = (evt: MouseEvent) => {
};
$: if ($queueState && widget) {
widget.isNodeExecuting = $queueState.runningNodeId === widget.nodeId;
children = $layoutState.allItems[widget.id].children;
}
</script>
{#if container && children}
{@const id = container.id}
<div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}"
class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(container.id)}
class:root-container={isRoot}
class:container-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}>
<Block>
{#if container.attrs.showTitle}
<label for={String(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"
class:edit={$uiState.unlocked}
class:is-executing={item.isNodeExecuting}
animate:flip={{duration:flipDurationMs}}>
<svelte:self 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>
{#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 container}
<BlockContainer {container} {classes} {zIndex} {showHandles} />
{:else if widget}
<div class="widget" class:widget-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}
class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
@@ -160,88 +63,16 @@
{/if}
<style lang="scss">
.v-pane {
height: 100%;
width: 100%;
overflow: visible;
display: flex;
.edit {
min-width: 200px;
}
&.empty {
border-width: 3px;
border-color: var(--color-grey-400);
border-radius: var(--block-radius);
background: var(--color-grey-300);
min-height: 100px;
border-style: dashed;
}
}
.container {
display: flex;
:global(.block) {
height: fit-content;
}
&.container-edit-outline {
/* width: 20rem; */
}
&.horizontal {
flex-wrap: wrap;
gap: var(--layout-gap);
width: var(--size-full);
.v-pane {
flex-direction: row;
}
> :global(*), > :global(.form > *) {
flex: 1 1 0%;
flex-wrap: wrap;
min-width: min(160px, 100%);
}
}
&.vertical {
position: relative;
.v-pane {
flex-direction: column;
}
> :global(*), > :global(.form > *), .v-pane {
width: var(--size-full);
}
}
}
.widget.selected {
background: var(--color-yellow-200);
}
.container.selected > :global(.block) {
background: var(--color-yellow-300);
}
.is-executing {
border: 3px dashed var(--color-green-600) !important;
margin: 0.2em;
padding: 0.2em;
}
.animation-wrapper {
position: relative;
&:not(.edit) {
flex-grow: 1;
}
}
.handle {
cursor: grab;
z-index: 99999;
@@ -256,71 +87,14 @@
background-color: #add8e680;
}
.handle-container:hover {
background-color: #d8ade680;
}
.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 {
z-index: 10000;
position: relative;
}
.edit-title {
z-index: 10000;
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);
}
.container-edit-outline > :global(.block) {
border-color: var(--color-pink-500);
border-width: 2px;
border-style: dashed !important;
margin: 0.2em;
padding: 0.2em;
}
.widget-edit-outline {
border: 2px dashed var(--color-blue-400);
margin: 0.2em;
padding: 0.2em;
}
.root-container > :global(.block) {
padding: 0px;
}
</style>

98
src/lib/stores/layoutState.ts
View File

@@ -1,7 +1,7 @@
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"
import type { LGraphNode, IWidget, LGraph } from "@litegraph-ts/core"
import nodeState from "$lib/state/nodeState";
import type { NodeStateStore } from './nodeState';
import { dndzone, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
@@ -17,9 +17,62 @@ export type LayoutState = {
allItems: Record<DragItemID, DragItemEntry>,
currentId: number,
currentSelection: DragItemID[],
isConfiguring: boolean,
isMenuOpen: boolean
}
export type AttributesSpec = {
name: string,
type: string,
editable: boolean
}
export type AttributesCategorySpec = {
categoryName: string,
specs: AttributesSpec[]
}
export type AttributesSpecList = AttributesCategorySpec[]
const ALL_ATTRIBUTES: AttributesSpecList = [
{
categoryName: "appearance",
specs: [
{
name: "title",
type: "string",
editable: true,
},
{
name: "showTitle",
type: "boolean",
editable: true,
},
{
name: "direction",
type: "string",
editable: true,
},
{
name: "classes",
type: "string",
editable: true,
},
]
},
{
categoryName: "behavior",
specs: [
{
name: "associatedNode",
type: "number",
editable: false,
},
]
}
];
export { ALL_ATTRIBUTES };
export type Attributes = {
direction: string,
title: string,
@@ -54,6 +107,7 @@ type LayoutStateOps = {
updateChildren: (parent: IDragItem, children: IDragItem[]) => IDragItem[],
nodeAdded: (node: LGraphNode) => void,
nodeRemoved: (node: LGraphNode) => void,
configureFinished: (graph: LGraph) => void,
groupItems: (dragItems: IDragItem[]) => ContainerLayout,
ungroup: (container: ContainerLayout) => void,
getCurrentSelection: () => IDragItem[],
@@ -64,11 +118,12 @@ type LayoutStateOps = {
export type WritableLayoutStateStore = Writable<LayoutState> & LayoutStateOps;
const store: Writable<LayoutState> = writable({
root: null,
allItems: [],
allItems: {},
currentId: 0,
currentSelection: [],
isMenuOpen: false
})
addContainer(null, { direction: "horizontal", showTitle: false });
function findDefaultContainerForInsertion(): ContainerLayout | null {
const state = get(store);
@@ -160,6 +215,10 @@ function updateChildren(parent: IDragItem, newChildren?: IDragItem[]): IDragItem
}
function nodeAdded(node: LGraphNode) {
const state = get(store)
if (state.isConfiguring)
return;
const parent = findDefaultContainerForInsertion();
// Add default node panel containing all widgets
if (node.widgets && node.widgets.length > 0) {
@@ -187,11 +246,14 @@ function removeEntry(state: LayoutState, id: DragItemID) {
function nodeRemoved(node: LGraphNode) {
const state = get(store)
console.debug("[layoutState] nodeRemoved", node)
// Remove widgets bound to the node
let del = Object.entries(state.allItems).filter(pair =>
pair[1].dragItem.type === "widget"
&& pair[1].dragItem.attrs.associatedNode === node.id)
for (const id in del) {
for (const item of del) {
const [id, dragItem] = item;
console.debug("[layoutState] Remove widget", id, state.allItems[id])
removeEntry(state, id)
}
@@ -209,7 +271,7 @@ function nodeRemoved(node: LGraphNode) {
}
// Remove empty containers bound to the node
for (const id in delContainers) {
for (const id of delContainers) {
console.debug("[layoutState] Remove container", id, state.allItems[id])
removeEntry(state, id)
}
@@ -217,6 +279,24 @@ function nodeRemoved(node: LGraphNode) {
store.set(state)
}
function configureFinished(graph: LGraph) {
const state = get(store)
const id = 0;
state.isConfiguring = false;
state.root = addContainer(null, { direction: "horizontal", showTitle: false });
const left = addContainer(state.root.id, { direction: "vertical", showTitle: false });
const right = addContainer(state.root.id, { direction: "vertical", showTitle: false });
for (const node of graph.computeExecutionOrder(false, null)) {
nodeAdded(node)
}
console.debug("[layoutState] configureFinished", state)
store.set(state)
}
function moveItem(target: IDragItem, to: ContainerLayout, index: number = -1) {
const state = get(store)
const entry = state.allItems[target.id]
@@ -311,6 +391,15 @@ function ungroup(container: ContainerLayout) {
}
function clear() {
store.set({
root: null,
allItems: {},
currentId: 0,
currentSelection: [],
isMenuOpen: false,
isConfiguring: true,
})
addContainer(null, { direction: "horizontal", showTitle: false });
}
function resetLayout() {
@@ -326,6 +415,7 @@ const layoutStateStore: WritableLayoutStateStore =
updateChildren,
nodeAdded,
nodeRemoved,
configureFinished,
getCurrentSelection,
groupItems,
ungroup,

31
src/lib/utils.ts
View File

@@ -3,6 +3,8 @@ import ComboWidget from "$lib/widgets/ComboWidget.svelte";
import RangeWidget from "$lib/widgets/RangeWidget.svelte";
import TextWidget from "$lib/widgets/TextWidget.svelte";
import { type WidgetUIState } from "$lib/stores/nodeState";
import { get } from "svelte/store"
import layoutState from "$lib/stores/layoutState"
export function download(filename: string, text: string, type: string = "text/plain") {
const blob = new Blob([text], { type: type });
@@ -39,3 +41,32 @@ export function getComponentForWidgetState(item: WidgetUIState): any {
return null;
}
export function startDrag(evt: MouseEvent) {
const dragItemId: string = evt.target.dataset["dragItemId"];
const ls = get(layoutState)
if (evt.button !== 0) {
if (ls.currentSelection.length <= 1 && !ls.isMenuOpen)
ls.currentSelection = [dragItemId]
return;
}
const item = ls.allItems[dragItemId].dragItem
if (evt.ctrlKey) {
const index = ls.currentSelection.indexOf(item.id)
if (index === -1)
ls.currentSelection.push(item.id);
else
ls.currentSelection.splice(index, 1);
ls.currentSelection = ls.currentSelection;
}
else {
ls.currentSelection = [item.id]
}
layoutState.set(ls)
};
export function stopDrag(evt: MouseEvent) {
};