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

Better bottom bar

Browse Source
This commit is contained in:
space-nuko
2023-05-06 11:04:06 -05:00
parent 89b829f36d
commit ef4723b572
8 changed files with 298 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/BlockContainer.svelte
View File

@@ -41,17 +41,17 @@
</script>
{#if container && children}
{@const edit = $uiState.uiEditMode === "widgets" && zIndex > 1}
{@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
{#key $attrsChanged}
<div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
class:hide-block={container.attrs.blockVariant === "hidden"}
class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(container.id)}
class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(container.id)}
class:root-container={zIndex === 0}
class:is-executing={container.isNodeExecuting}
class:edit={edit}>
<Block>
{#if container.attrs.title !== ""}
<label for={String(container.id)} class={$uiState.uiEditMode === "widgets" ? "edit-title-label" : ""}>
<label for={String(container.id)} class={($uiState.uiUnlocked && $uiState.uiEditMode === "widgets") ? "edit-title-label" : ""}>
<BlockTitle>{container.attrs.title}</BlockTitle>
</label>
{/if}
@@ -64,7 +64,7 @@
centreDraggedOnCursor: true,
morphDisabled: true,
dropFromOthersDisabled: zIndex === 0,
dragDisabled: zIndex === 0 || $layoutState.currentSelection.length > 2 || $uiState.uiEditMode === "disabled"
dragDisabled: zIndex === 0 || $layoutState.currentSelection.length > 2 || !$uiState.uiUnlocked
}}"
on:consider="{handleConsider}"
on:finalize="{handleFinalize}"

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

@@ -19,6 +19,7 @@
import ComfyQueue from "./ComfyQueue.svelte";
import ComfyProperties from "./ComfyProperties.svelte";
import queueState from "$lib/stores/queueState";
import ComfyUnlockUIButton from "./ComfyUnlockUIButton.svelte";
export let app: ComfyApp = undefined;
let imageViewer: ImageViewer;
@@ -29,7 +30,7 @@
let containerElem: HTMLDivElement;
let resizeTimeout: NodeJS.Timeout | null;
let hasShownUIHelpToast: boolean = false;
let uiTheme: string = "anapnoe";
let uiTheme: string = "";
let debugLayout: boolean = false;
@@ -69,7 +70,7 @@
}
}
let propsSidebarSize = 0; //15;
let propsSidebarSize = 15; //15;
function toggleProps() {
if (propsSidebarSize == 0) {
@@ -124,7 +125,7 @@
app.lCanvas.recenter();
}
$: if ($uiState.uiEditMode !== "disabled" && !hasShownUIHelpToast) {
$: if ($uiState.uiUnlocked && !hasShownUIHelpToast) {
hasShownUIHelpToast = true;
toast.push("Right-click to open context menu.")
}
@@ -158,7 +159,7 @@
(window as any).app = app;
(window as any).appPane = uiPane;
await import('../../scss/ux.scss');
// await import('../../scss/ux.scss');
refreshView();
})
@@ -203,50 +204,56 @@
</Splitpanes>
</div>
<div id="bottombar">
<Button variant="primary" on:click={queuePrompt}>
Queue Prompt
</Button>
<Button variant="secondary" on:click={toggleGraph}>
Toggle Graph
</Button>
<Button variant="secondary" on:click={toggleProps}>
Toggle Props
</Button>
<Button variant="secondary" on:click={toggleQueue}>
Toggle Queue
</Button>
<Button variant="secondary" on:click={doSave}>
Save
</Button>
<Button variant="secondary" on:click={doReset}>
Reset
</Button>
<Button variant="secondary" on:click={doLoadDefault}>
Load Default
</Button>
<Button variant="secondary" on:click={doRecenter}>
Recenter
</Button>
<Button variant="secondary" on:click={doRefreshCombos}>
🔄
</Button>
<!-- <Checkbox label="Lock Nodes" bind:value={$uiState.nodesLocked}/>
<Checkbox label="Disable Interaction" bind:value={$uiState.graphLocked}/> -->
<Checkbox label="Auto-Add UI" bind:value={$uiState.autoAddUI}/>
<label class="label" for="enable-ui-editing">
<BlockTitle>Enable UI Editing</BlockTitle>
<select id="enable-ui-editing" name="enable-ui-editing" bind:value={$uiState.uiEditMode}>
<option value="disabled">Disabled</option>
<option value="widgets">Widgets</option>
</select>
</label>
<label class="label" for="ui-theme">
<BlockTitle>Theme</BlockTitle>
<select id="ui-theme" name="ui-theme" bind:value={uiTheme}>
<option value="">None</option>
<option value="anapnoe">Anapnoe</option>
</select>
</label>
<div class="left">
<Button variant="primary" on:click={queuePrompt}>
Queue Prompt
</Button>
<Button variant="secondary" on:click={toggleGraph}>
Toggle Graph
</Button>
<Button variant="secondary" on:click={toggleProps}>
Toggle Props
</Button>
<Button variant="secondary" on:click={toggleQueue}>
Toggle Queue
</Button>
<Button variant="secondary" on:click={doSave}>
Save
</Button>
<Button variant="secondary" on:click={doReset}>
Reset
</Button>
<Button variant="secondary" on:click={doLoadDefault}>
Load Default
</Button>
<Button variant="secondary" on:click={doRecenter}>
Recenter
</Button>
<Button variant="secondary" on:click={doRefreshCombos}>
🔄
</Button>
<!-- <Checkbox label="Lock Nodes" bind:value={$uiState.nodesLocked}/>
<Checkbox label="Disable Interaction" bind:value={$uiState.graphLocked}/> -->
<span style="display: inline-flex !important">
<Checkbox label="Auto-Add UI" bind:value={$uiState.autoAddUI}/>
</span>
<span class="label" for="ui-edit-mode">
<BlockTitle>UI Edit mode</BlockTitle>
<select id="ui-edit-mode" name="ui-edit-mode" bind:value={$uiState.uiEditMode}>
<option value="widgets">Widgets</option>
</select>
</span>
<span class="label" for="ui-theme">
<BlockTitle>Theme</BlockTitle>
<select id="ui-theme" name="ui-theme" bind:value={uiTheme}>
<option value="">None</option>
<option value="anapnoe">Anapnoe</option>
</select>
</span>
</div>
<div class="right">
<ComfyUnlockUIButton bind:toggled={$uiState.uiUnlocked} />
</div>
</div>
<LightboxModal />
</div>
@@ -276,10 +283,23 @@
}
#bottombar {
padding-top: 0.5em;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
gap: var(--layout-gap);
margin: 10px;
padding-left: 1em;
padding-right: 1em;
margin-top: auto;
overflow-x: auto;
> .left {
flex-shrink: 0;
}
> .right {
margin-left: auto
}
}
.canvas-wrapper {
@@ -350,4 +370,8 @@
label.label > :global(span) {
top: 20%;
}
span.left {
right: 0px;
}
</style>

250
src/lib/components/ComfyProperties.svelte
View File

@@ -3,6 +3,7 @@
import { TextBox, Checkbox } from "@gradio/form";
import { LGraphNode } from "@litegraph-ts/core"
import layoutState, { type IDragItem, type WidgetLayout, ALL_ATTRIBUTES, type AttributesSpec } from "$lib/stores/layoutState"
import uiState from "$lib/stores/uiState"
import { get } from "svelte/store"
import type { ComfyWidgetNode } from "$lib/nodes";
import ComfyNumberProperty from "./ComfyNumberProperty.svelte";
@@ -41,74 +42,92 @@
targetType = ""
}
function validNodeProperty(spec: AttributesSpec, node: LGraphNode): boolean {
function validNodeProperty(spec: AttributesSpec, node: LGraphNode | null): boolean {
if (node == null)
return false;
if (spec.canShow && !spec.canShow(node))
return false;
if (spec.validNodeTypes) {
return spec.validNodeTypes.indexOf(node.type) !== -1;
}
return spec.name in node.properties
}
function updateAttribute(entry: AttributesSpec, target: IDragItem, value: any) {
if (target) {
const name = entry.name
console.warn("updateAttribute", name, value)
function validWidgetAttribute(spec: AttributesSpec, widget: IDragItem | null): boolean {
if (widget == null)
return false;
if (spec.canShow)
return spec.canShow(widget);
target.attrs[name] = value
target.attrsChanged.set(!get(target.attrsChanged))
return spec.name in widget.attrs
}
if (node && "propsChanged" in node) {
const comfyNode = node as ComfyWidgetNode
comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
}
function updateAttribute(entry: AttributesSpec, target: IDragItem | null, value: any) {
if (target == null)
return;
const name = entry.name
console.warn("updateAttribute", name, value)
target.attrs[name] = value
target.attrsChanged.set(!get(target.attrsChanged))
if (node && "propsChanged" in node) {
const comfyNode = node as ComfyWidgetNode
comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
}
}
function updateProperty(entry: AttributesSpec, value: any) {
if (node) {
const name = entry.name
console.warn("updateProperty", name, value)
if (node == null)
return
node.properties[name] = value;
const name = entry.name
console.warn("updateProperty", name, value)
if ("propsChanged" in node) {
const comfyNode = node as ComfyWidgetNode
comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
}
node.properties[name] = value;
if ("propsChanged" in node) {
const comfyNode = node as ComfyWidgetNode
comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
}
}
function getVar(node: LGraphNode, entry: AttributesSpec) {
let value = node[entry.name]
if (entry.serialize)
value = entry.serialize(value)
console.debug("[ComfyProperties] getVar", entry, value, node)
function getVar(node: LGraphNode, spec: AttributesSpec) {
let value = node[spec.name] || spec.defaultValue
if (spec.serialize)
value = spec.serialize(value)
console.debug("[ComfyProperties] getVar", spec, value, node)
return value
}
function updateVar(entry: any, value: any) {
if (node) {
const name = entry.name
console.warn("updateProperty", name, value)
if (node == null)
return;
if (entry.deserialize)
value = entry.deserialize(value)
const name = entry.name
console.warn("updateVar", name, value)
console.debug("[ComfyProperties] updateVar", entry, value, name, node)
node[name] = value;
if (entry.deserialize)
value = entry.deserialize(value)
if ("propsChanged" in node) {
const comfyNode = node as ComfyWidgetNode
comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
}
console.debug("[ComfyProperties] updateVar", entry, value, name, node)
node[name] = value;
if ("propsChanged" in node) {
const comfyNode = node as ComfyWidgetNode
comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
}
}
function updateWorkflowAttribute(entry: AttributesSpec, value: any) {
const name = entry.name
console.warn("updateWorkflowAttribute", name, value)
const name = entry.name
console.warn("updateWorkflowAttribute", name, value)
$layoutState.attrs[name] = value
$layoutState = $layoutState
$layoutState.attrs[name] = value
$layoutState = $layoutState
}
</script>
@@ -117,9 +136,10 @@
<div class="target-name">
<span>
<span class="title">{target?.attrs?.title || node?.title || "Workflow"}<span>
{#if targetType !== ""}
<span class="type">({targetType})</span>
{/if}
{#if targetType !== ""}
<span class="type">({targetType})</span>
{/if}
</span>
</span>
</div>
</div>
@@ -130,37 +150,37 @@
<span class="title">{category.categoryName}</span>
</span>
</div>
{#each category.specs as spec(spec.name)}
{#if spec.location === "widget" && target && spec.name in target.attrs}
{#each category.specs as spec(spec.id)}
{#if spec.location === "widget" && validWidgetAttribute(spec, target)}
<div class="props-entry">
{#if spec.type === "string"}
<TextBox
value={target.attrs[spec.name]}
value={target.attrs[spec.name] || spec.defaultValue}
on:change={(e) => updateAttribute(spec, target, e.detail)}
on:input={(e) => updateAttribute(spec, target, e.detail)}
label={spec.name}
max_lines={1}
/>
{:else if spec.type === "boolean"}
<Checkbox
value={target.attrs[spec.name]}
on:change={(e) => updateAttribute(spec, target, e.detail)}
label={spec.name}
/>
<Checkbox
value={target.attrs[spec.name] || spec.defaultValue}
on:change={(e) => updateAttribute(spec, target, e.detail)}
label={spec.name}
/>
{:else if spec.type === "number"}
<ComfyNumberProperty
name={spec.name}
value={target.attrs[spec.name]}
step={1}
on:change={(e) => updateAttribute(spec, target, e.detail)}
/>
<ComfyNumberProperty
name={spec.name}
value={target.attrs[spec.name] || spec.defaultValue}
step={1}
on:change={(e) => updateAttribute(spec, target, e.detail)}
/>
{:else if spec.type === "enum"}
<ComfyComboProperty
name={spec.name}
value={target.attrs[spec.name]}
values={spec.values}
on:change={(e) => updateAttribute(spec, target, e.detail)}
/>
<ComfyComboProperty
name={spec.name}
value={target.attrs[spec.name] || spec.defaultValue}
values={spec.values}
on:change={(e) => updateAttribute(spec, target, e.detail)}
/>
{/if}
</div>
{:else if node}
@@ -168,32 +188,32 @@
<div class="props-entry">
{#if spec.type === "string"}
<TextBox
value={node.properties[spec.name]}
value={node.properties[spec.name] || spec.defaultValue}
on:change={(e) => updateProperty(spec, e.detail)}
on:input={(e) => updateProperty(spec, e.detail)}
label={spec.name}
max_lines={1}
/>
{:else if spec.type === "boolean"}
<Checkbox
value={node.properties[spec.name]}
label={spec.name}
on:change={(e) => updateProperty(spec, e.detail)}
/>
<Checkbox
value={node.properties[spec.name] || spec.defaultValue}
label={spec.name}
on:change={(e) => updateProperty(spec, e.detail)}
/>
{:else if spec.type === "number"}
<ComfyNumberProperty
name={spec.name}
value={node.properties[spec.name]}
step={1}
on:change={(e) => updateProperty(spec, e.detail)}
/>
<ComfyNumberProperty
name={spec.name}
value={node.properties[spec.name] || spec.defaultValue}
step={1}
on:change={(e) => updateProperty(spec, e.detail)}
/>
{:else if spec.type === "enum"}
<ComfyComboProperty
name={spec.name}
value={node.properties[spec.name]}
values={spec.values}
on:change={(e) => updateProperty(spec, e.detail)}
/>
<ComfyComboProperty
name={spec.name}
value={node.properties[spec.name] || spec.defaultValue}
values={spec.values}
on:change={(e) => updateProperty(spec, e.detail)}
/>
{/if}
</div>
{:else if spec.location === "nodeVars" && spec.name in node}
@@ -207,25 +227,25 @@
max_lines={1}
/>
{:else if spec.type === "boolean"}
<Checkbox
value={getVar(node, spec)}
on:change={(e) => updateVar(spec, e.detail)}
label={spec.name}
/>
<Checkbox
value={getVar(node, spec)}
on:change={(e) => updateVar(spec, e.detail)}
label={spec.name}
/>
{:else if spec.type === "number"}
<ComfyNumberProperty
name={spec.name}
value={getVar(node, spec)}
step={1}
on:change={(e) => updateVar(spec, e.detail)}
/>
<ComfyNumberProperty
name={spec.name}
value={getVar(node, spec)}
step={1}
on:change={(e) => updateVar(spec, e.detail)}
/>
{:else if spec.type === "enum"}
<ComfyComboProperty
name={spec.name}
value={getVar(node, spec)}
values={spec.values}
on:change={(e) => updateVar(spec, e.detail)}
/>
<ComfyComboProperty
name={spec.name}
value={getVar(node, spec)}
values={spec.values}
on:change={(e) => updateVar(spec, e.detail)}
/>
{/if}
</div>
{/if}
@@ -233,32 +253,32 @@
<div class="props-entry">
{#if spec.type === "string"}
<TextBox
value={$layoutState.attrs[spec.name]}
value={$layoutState.attrs[spec.name] || spec.defaultValue}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
on:input={(e) => updateWorkflowAttribute(spec, e.detail)}
label={spec.name}
max_lines={1}
/>
{:else if spec.type === "boolean"}
<Checkbox
value={$layoutState.attrs[spec.name]}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
label={spec.name}
/>
<Checkbox
value={$layoutState.attrs[spec.name] || spec.defaultValue}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
label={spec.name}
/>
{:else if spec.type === "number"}
<ComfyNumberProperty
name={spec.name}
value={$layoutState.attrs[spec.name]}
step={1}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
/>
<ComfyNumberProperty
name={spec.name}
value={$layoutState.attrs[spec.name] || spec.defaultValue}
step={1}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
/>
{:else if spec.type === "enum"}
<ComfyComboProperty
name={spec.name}
value={$layoutState.attrs[spec.name]}
values={spec.values}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
/>
<ComfyComboProperty
name={spec.name}
value={$layoutState.attrs[spec.name] || spec.defaultValue}
values={spec.values}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
/>
{/if}
</div>
{/if}

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

@@ -69,7 +69,7 @@
}
async function onRightClick(e) {
if ($uiState.uiEditMode === "disabled")
if (!$uiState.uiUnlocked)
return;
e.preventDefault();

42
src/lib/components/ComfyUnlockUIButton.svelte Normal file
View File

@@ -0,0 +1,42 @@
<script lang="ts">
import { Button } from "@gradio/button"
import { LockOpen2, LockClosed } from "radix-icons-svelte"
export let toggled: boolean = false;
function toggle() {
toggled = !toggled;
}
</script>
<div class="wrapper button lg" class:toggled>
<Button on:click={toggle} variant={toggled ? "primary" : "secondary"}>
{#if toggled}
<LockOpen2 />
{:else}
<LockClosed />
{/if}
</Button>
</div>
<style lang="scss">
.wrapper {
display: inline-flex;
width: var(--size-12);
height: var(--size-12);
> :global(.lg) {
border: var(--button-border-width) solid var(--neutral-400);
}
&.toggled {
:global(svg) {
color: var(--button-primary-text-color);
}
}
:global(svg) {
color: var(--button-secondary-text-color);
}
}
</style>

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

@@ -40,7 +40,8 @@
propsChanged = null;
}
$: showHandles = $uiState.uiEditMode === "widgets" // TODO
$: showHandles = $uiState.uiUnlocked
&& $uiState.uiEditMode === "widgets" // TODO
&& zIndex > 1
&& !$layoutState.isMenuOpen
@@ -61,12 +62,12 @@
<BlockContainer {container} {classes} {zIndex} {showHandles} />
{/key}
{:else if widget && widget.node}
{@const edit = $uiState.uiEditMode === "widgets" && zIndex > 1}
{@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
{#key $attrsChanged}
{#key $propsChanged}
<div class="widget {widget.attrs.classes} {getWidgetClass()}"
class:edit={edit}
class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(widget.id)}
class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.node.id}
class:hidden={widget.attrs.hidden}
>

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

@@ -39,15 +39,18 @@ export type Attributes = {
}
export type AttributesSpec = {
id?: number, // for svelte keyed each
name: string,
type: string,
location: "widget" | "nodeProps" | "nodeVars" | "workflow"
editable: boolean,
defaultValue?: any,
values?: string[],
hidden?: boolean,
validNodeTypes?: string[],
canShow?: (arg: IDragItem | LGraphNode) => boolean,
serialize?: (arg: any) => string,
deserialize?: (arg: string) => any,
}
@@ -86,18 +89,22 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
type: "enum",
location: "widget",
editable: true,
values: ["horizontal", "vertical"]
values: ["horizontal", "vertical"],
defaultValue: "vertical",
canShow: (di: IDragItem) => di.type === "container"
},
{
name: "flexGrow",
type: "number",
location: "widget",
defaultValue: 100,
editable: true
},
{
name: "classes",
type: "string",
location: "widget",
defaultValue: "",
editable: true,
},
{
@@ -105,7 +112,20 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
type: "enum",
location: "widget",
editable: true,
values: ["block", "hidden"]
values: ["block", "hidden"],
defaultValue: "block",
canShow: (di: IDragItem) => di.type === "container"
},
// Container variants
{
name: "variant",
type: "enum",
location: "widget",
editable: true,
values: ["block", "accordion", "tabs"],
defaultValue: "block",
canShow: (di: IDragItem) => di.type === "container"
},
]
},
@@ -156,6 +176,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
location: "nodeProps",
editable: true,
validNodeTypes: ["ui/button"],
defaultValue: "bang"
},
// Workflow
@@ -163,11 +184,21 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
name: "defaultSubgraph",
type: "string",
location: "workflow",
editable: true
editable: true,
defaultValue: ""
}
]
}
];
let i = 0;
for (const cat of Object.values(ALL_ATTRIBUTES)) {
for (const val of Object.values(cat.specs)) {
val.id = i;
i += 1;
}
}
export { ALL_ATTRIBUTES };
export interface IDragItem {

6
src/lib/stores/uiState.ts
View File

@@ -2,13 +2,14 @@ import { writable } from 'svelte/store';
import type { Readable, Writable } from 'svelte/store';
import type ComfyApp from "$lib/components/ComfyApp"
export type UIEditMode = "disabled" | "widgets" | "containers" | "layout";
export type UIEditMode = "widgets" | "containers" | "layout";
export type UIState = {
app: ComfyApp,
nodesLocked: boolean,
graphLocked: boolean,
autoAddUI: boolean,
uiUnlocked: boolean,
uiEditMode: UIEditMode,
}
@@ -19,7 +20,8 @@ const store: WritableUIStateStore = writable(
graphLocked: false,
nodesLocked: false,
autoAddUI: true,
uiEditMode: "disabled",
uiUnlocked: false,
uiEditMode: "widgets"
})
const uiStateStore: WritableUIStateStore =