Move state management into svelte store
This commit is contained in:
space-nuko
@@ -5,6 +5,7 @@
|
||||
import { Backpack, Gear } from 'radix-icons-svelte';
|
||||
import ComfyUIPane from "./ComfyUIPane.svelte";
|
||||
import ComfyApp from "./ComfyApp";
|
||||
import widgetState from "$lib/stores/widgetState";
|
||||
|
||||
import { LGraphNode } from "litegraph.js";
|
||||
|
||||
@@ -36,21 +37,10 @@
|
||||
onMount(async () => {
|
||||
app = new ComfyApp();
|
||||
|
||||
app.eventBus.on("nodeAdded", (node: LGraphNode) => {
|
||||
uiPane.addNodeUI(node);
|
||||
});
|
||||
|
||||
app.eventBus.on("nodeRemoved", (node: LGraphNode) => {
|
||||
uiPane.removeNodeUI(node);
|
||||
});
|
||||
|
||||
app.eventBus.on("configured", (graph: LGraph) => {
|
||||
uiPane.configureFinished(graph);
|
||||
});
|
||||
|
||||
app.eventBus.on("cleared", () => {
|
||||
uiPane.clear();
|
||||
});
|
||||
app.eventBus.on("nodeAdded", widgetState.nodeAdded);
|
||||
app.eventBus.on("nodeRemoved", widgetState.nodeRemoved);
|
||||
app.eventBus.on("configured", widgetState.configureFinished);
|
||||
app.eventBus.on("cleared", widgetState.clear);
|
||||
|
||||
await app.setup();
|
||||
refreshView();
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { Button } from "@gradio/button";
|
||||
import { onDestroy } from "svelte";
|
||||
import { Block, BlockTitle } from "@gradio/atoms";
|
||||
import { Dropdown, Range, TextBox } from "@gradio/form";
|
||||
import widgetState from "$lib/stores/widgetState";
|
||||
|
||||
import { dndzone } from 'svelte-dnd-action';
|
||||
import { flip } from 'svelte/animate';
|
||||
|
||||
export let state: Record<number, any[]> = {};
|
||||
export let items: Record<number, { node: LGraphNode, widget: IWidget }[]> = {};
|
||||
import {flip} from 'svelte/animate';
|
||||
|
||||
export let dragItems = [];
|
||||
let dragDisabled = true;
|
||||
@@ -29,6 +27,12 @@
|
||||
const stopDrag = () => {
|
||||
dragDisabled = true;
|
||||
};
|
||||
|
||||
const unsubscribe = widgetState.subscribe(state => {
|
||||
dragItems = dragItems.filter(item => item.node.id in state);
|
||||
});
|
||||
|
||||
onDestroy(unsubscribe);
|
||||
</script>
|
||||
|
||||
|
||||
@@ -40,56 +44,59 @@
|
||||
{#each dragItems as dragItem(dragItem.id)}
|
||||
{@const node = dragItem.node}
|
||||
{@const id = node.id}
|
||||
<Block>
|
||||
<div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
|
||||
<label for={id}>
|
||||
<BlockTitle>{node.title}</BlockTitle>
|
||||
</label>
|
||||
{#each items[id] as item, i}
|
||||
{#if item.widget.type == "combo"}
|
||||
<div class="wrapper">
|
||||
<Dropdown
|
||||
bind:value={state[id][i]}
|
||||
choices={item.widget.options.values}
|
||||
multiselect={false}
|
||||
max_choices={1},
|
||||
label={item.widget.name}
|
||||
show_label={true}
|
||||
disabled={item.widget.options.values.length === 0}
|
||||
on:change
|
||||
on:select
|
||||
on:blur
|
||||
/>
|
||||
</div>
|
||||
{:else if item.widget.type == "number"}
|
||||
<div class="wrapper">
|
||||
<Range
|
||||
bind:value={state[id][i]}
|
||||
minimum={item.widget.options.min}
|
||||
maximum={item.widget.options.max}
|
||||
step={item.widget.options.step}
|
||||
label={item.widget.name}
|
||||
show_label={true}
|
||||
on:change
|
||||
on:release
|
||||
/>
|
||||
</div>
|
||||
{:else if item.widget.type == "text"}
|
||||
<div class="wrapper">
|
||||
<TextBox
|
||||
bind:value={state[id][i]}
|
||||
label={item.widget.name}
|
||||
lines={item.widget.options.multiline ? 5 : 1}
|
||||
show_label={true}
|
||||
on:change
|
||||
on:submit
|
||||
on:blur
|
||||
on:select
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</Block>
|
||||
<div class="animation-wrapper" animate:flip={{duration:flipDurationMs}}>
|
||||
<Block>
|
||||
<div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
|
||||
<label for={id}>
|
||||
<BlockTitle>{node.title}</BlockTitle>
|
||||
</label>
|
||||
{#each $widgetState[id] as item, i}
|
||||
{#if item.widget.type == "combo"}
|
||||
<div class="wrapper">
|
||||
<Dropdown
|
||||
bind:value={item.value}
|
||||
choices={item.widget.options.values}
|
||||
multiselect={false}
|
||||
max_choices={1},
|
||||
label={item.widget.name}
|
||||
show_label={true}
|
||||
disabled={item.widget.options.values.length === 0}
|
||||
on:change
|
||||
on:select
|
||||
on:blur
|
||||
/>
|
||||
</div>
|
||||
{:else if item.widget.type == "number"}
|
||||
<div class="wrapper">
|
||||
<Range
|
||||
bind:value={item.value}
|
||||
minimum={item.widget.options.min}
|
||||
maximum={item.widget.options.max}
|
||||
step={item.widget.options.step}
|
||||
label={item.widget.name}
|
||||
show_label={true}
|
||||
on:change
|
||||
on:release
|
||||
/>
|
||||
</div>
|
||||
{:else if item.widget.type == "text"}
|
||||
<div class="wrapper">
|
||||
<TextBox
|
||||
bind:value={item.value}
|
||||
label={item.widget.name}
|
||||
lines={item.widget.options.multiline ? 5 : 1}
|
||||
max_lines={item.widget.options.multiline ? 5 : 1}
|
||||
show_label={true}
|
||||
on:change
|
||||
on:submit
|
||||
on:blur
|
||||
on:select
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</Block>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,86 +3,26 @@
|
||||
import type { IWidget } from "litegraph.js";
|
||||
import ComfyApp from "./ComfyApp";
|
||||
import ComfyPane from "./ComfyPane.svelte";
|
||||
import widgetState from "$lib/stores/widgetState";
|
||||
|
||||
export let app: ComfyApp;
|
||||
let dragConfigured: boolean = false;
|
||||
export let dragItemss: any[][] = []
|
||||
|
||||
let dragItems = [];
|
||||
export let totalId = 0;
|
||||
|
||||
export function clear() {
|
||||
nodes = {};
|
||||
items = {};
|
||||
state = {};
|
||||
dragItems = []
|
||||
$: if(app && !dragConfigured) {
|
||||
dragConfigured = true;
|
||||
app.eventBus.on("nodeAdded", (node: LGraphNode) => {
|
||||
dragItemss[0].push({ id: totalId++, node: node });
|
||||
});
|
||||
}
|
||||
|
||||
export function addNodeUI(node: LGraphNode) {
|
||||
if (node.widgets) {
|
||||
for (const [i, widget] of node.widgets.entries()) {
|
||||
if (!nodes[node.id]) {
|
||||
dragItems.push({ id: node.id, node: node })
|
||||
}
|
||||
nodes[node.id] = node;
|
||||
|
||||
node.onPropertyChanged = (k, v) => {
|
||||
console.log("PROPCHANGE", k, v)
|
||||
};
|
||||
|
||||
if (!items[node.id]) {
|
||||
items[node.id] = []
|
||||
}
|
||||
items[node.id].push({ node, widget })
|
||||
|
||||
if (!state[node.id]) {
|
||||
state[node.id] = []
|
||||
}
|
||||
state[node.id].push(widget.value);
|
||||
}
|
||||
}
|
||||
|
||||
nodes = nodes;
|
||||
items = items;
|
||||
state = state;
|
||||
}
|
||||
|
||||
export function removeNodeUI(node: LGraphNode) {
|
||||
delete nodes[node.id]
|
||||
delete state[node.id]
|
||||
delete items[node.id]
|
||||
|
||||
dragItems = Array.from(dragItems.filter(e => e.id != node.id));
|
||||
console.log("REM", node.id, dragItems)
|
||||
|
||||
nodes = nodes;
|
||||
items = items;
|
||||
state = state;
|
||||
}
|
||||
|
||||
export function configureFinished(graph: LGraph) {
|
||||
for (const node of graph.computeExecutionOrder(false, null)) {
|
||||
if (node.widgets_values) {
|
||||
for (const [j, value] of node.widgets_values.entries()) {
|
||||
state[node.id][j] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nodes = nodes;
|
||||
state = state;
|
||||
}
|
||||
|
||||
export function getState() {
|
||||
return state;
|
||||
}
|
||||
|
||||
let nodes: Record<number, LGraphNode> = {};
|
||||
let items: Record<number, { node: LGraphNode, widget: IWidget }[]> = {};
|
||||
let state: Record<number, any[]> = {};
|
||||
</script>
|
||||
|
||||
<div id="comfy-ui-panes" >
|
||||
<ComfyPane {dragItems} {items} {state} />
|
||||
<ComfyPane {items} {state} />
|
||||
<ComfyPane {items} {state} />
|
||||
<ComfyPane bind:dragItems={dragItemss[0]} />
|
||||
<ComfyPane bind:dragItems={dragItemss[1]} />
|
||||
<ComfyPane bind:dragItems={dragItemss[2]} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -105,7 +45,7 @@
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 1em;
|
||||
height: 0.5em;
|
||||
height: 1em;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user