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

Tabs container

Browse Source
This commit is contained in:
space-nuko
2023-05-06 12:56:54 -05:00
parent 27a6f9e2ab
commit b295218afe
10 changed files with 772 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -39,6 +39,7 @@
"@gradio/form": "workspace:*", "@gradio/form": "workspace:*",
"@gradio/gallery": "workspace:*", "@gradio/gallery": "workspace:*",
"@gradio/icons": "workspace:*", "@gradio/icons": "workspace:*",
"@gradio/tabs": "workspace:*",
"@gradio/theme": "workspace:*", "@gradio/theme": "workspace:*",
"@gradio/upload": "workspace:*", "@gradio/upload": "workspace:*",
"@gradio/utils": "workspace:*", "@gradio/utils": "workspace:*",

3
pnpm-lock.yaml generated
View File

@@ -22,6 +22,9 @@ importers:
'@gradio/icons': '@gradio/icons':
specifier: workspace:* specifier: workspace:*
version: link:gradio/js/icons version: link:gradio/js/icons
'@gradio/tabs':
specifier: workspace:*
version: link:gradio/js/tabs
'@gradio/theme': '@gradio/theme':
specifier: workspace:* specifier: workspace:*
version: link:gradio/js/theme version: link:gradio/js/theme

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

@@ -11,11 +11,15 @@
import { flip } from 'svelte/animate'; import { flip } from 'svelte/animate';
import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState"; import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
import { startDrag, stopDrag } from "$lib/utils" import { startDrag, stopDrag } from "$lib/utils"
import type { Writable } from "svelte/store";
export let container: ContainerLayout | null = null; export let container: ContainerLayout | null = null;
export let zIndex: number = 0; export let zIndex: number = 0;
export let classes: string[] = []; export let classes: string[] = [];
export let showHandles: boolean = false; export let showHandles: boolean = false;
export let edit: boolean = false;
export let dragDisabled: boolean = false;
let attrsChanged: Writable<boolean> | null = null; let attrsChanged: Writable<boolean> | null = null;
let children: IDragItem[] | null = null; let children: IDragItem[] | null = null;
const flipDurationMs = 100; const flipDurationMs = 100;
@@ -41,57 +45,54 @@
</script> </script>
{#if container && children} {#if container && children}
{@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1} <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
{#key $attrsChanged} class:hide-block={container.attrs.blockVariant === "hidden"}
<div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}" class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(container.id)}
class:hide-block={container.attrs.blockVariant === "hidden"} class:root-container={zIndex === 0}
class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(container.id)} class:is-executing={container.isNodeExecuting}
class:root-container={zIndex === 0} class:edit={edit}>
class:is-executing={container.isNodeExecuting} <Block>
class:edit={edit}> {#if container.attrs.title && container.attrs.title !== ""}
<Block> <label for={String(container.id)} class={($uiState.uiUnlocked && $uiState.uiEditMode === "widgets") ? "edit-title-label" : ""}>
{#if container.attrs.title !== ""} <BlockTitle>{container.attrs.title}</BlockTitle>
<label for={String(container.id)} class={($uiState.uiUnlocked && $uiState.uiEditMode === "widgets") ? "edit-title-label" : ""}> </label>
<BlockTitle>{container.attrs.title}</BlockTitle> {/if}
</label> <div class="v-pane"
{/if} class:empty={children.length === 0}
<div class="v-pane" class:edit={edit}
class:empty={children.length === 0} use:dndzone="{{
class:edit={edit} items: children,
use:dndzone="{{ flipDurationMs,
items: children, centreDraggedOnCursor: true,
flipDurationMs, morphDisabled: true,
centreDraggedOnCursor: true, dropFromOthersDisabled: zIndex === 0,
morphDisabled: true, dragDisabled
dropFromOthersDisabled: zIndex === 0, }}"
dragDisabled: zIndex === 0 || $layoutState.currentSelection.length > 2 || !$uiState.uiUnlocked on:consider="{handleConsider}"
}}" on:finalize="{handleFinalize}"
on:consider="{handleConsider}" >
on:finalize="{handleFinalize}" {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
{@const hidden = item?.attrs?.hidden}
<div class="animation-wrapper"
class:hidden={hidden}
animate:flip={{duration:flipDurationMs}}
style={item?.attrs?.flexGrow ? `flex-grow: ${item.attrs.flexGrow}` : ""}
> >
{#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)} <WidgetContainer dragItem={item} zIndex={zIndex+1} />
{@const hidden = item?.attrs?.hidden} {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
<div class="animation-wrapper" <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
class:hidden={hidden} {/if}
animate:flip={{duration:flipDurationMs}} </div>
style={item?.attrs?.flexGrow ? `flex-grow: ${item.attrs.flexGrow}` : ""} {/each}
> </div>
<WidgetContainer dragItem={item} zIndex={zIndex+1} /> {#if container.attrs.hidden && edit}
{#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]} <div class="handle handle-hidden" class:hidden={!edit} style="z-index: {zIndex+100}"/>
<div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/> {/if}
{/if} {#if showHandles}
</div> <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}/>
{/each} {/if}
</div> </Block>
{#if container.attrs.hidden && edit} </div>
<div class="handle handle-hidden" class:hidden={!edit} style="z-index: {zIndex+100}"/>
{/if}
{#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>
{/key}
{/if} {/if}
<style lang="scss"> <style lang="scss">
@@ -158,7 +159,7 @@
} }
} }
:global(.block) { > :global(.block) {
height: fit-content; height: fit-content;
} }
@@ -170,7 +171,7 @@
padding: 1.4em; padding: 1.4em;
} }
:global(.hide-block > .block) { > :global(.hide-block > .block) {
padding: 0.5em 0.25em; padding: 0.5em 0.25em;
box-shadow: unset; box-shadow: unset;
border-width: 0; border-width: 0;
@@ -289,12 +290,6 @@
color: var(--input-placeholder-color); color: var(--input-placeholder-color);
} }
.widget-edit-outline {
border: 2px dashed var(--color-blue-400);
margin: 0.2em;
padding: 0.2em;
}
.root-container > :global(.block) { .root-container > :global(.block) {
padding: 0px; padding: 0px;
} }

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

@@ -1,346 +1,396 @@
<script lang="ts"> <script lang="ts">
import { Block, BlockTitle } from "@gradio/atoms"; import { Block, BlockTitle } from "@gradio/atoms";
import { TextBox, Checkbox } from "@gradio/form"; import { TextBox, Checkbox } from "@gradio/form";
import { LGraphNode } from "@litegraph-ts/core" import { LGraphNode } from "@litegraph-ts/core"
import layoutState, { type IDragItem, type WidgetLayout, ALL_ATTRIBUTES, type AttributesSpec } from "$lib/stores/layoutState" import layoutState, { type IDragItem, type WidgetLayout, ALL_ATTRIBUTES, type AttributesSpec } from "$lib/stores/layoutState"
import uiState from "$lib/stores/uiState" import uiState from "$lib/stores/uiState"
import { get } from "svelte/store" import { get, type Writable, writable } from "svelte/store"
import type { ComfyWidgetNode } from "$lib/nodes"; import type { ComfyWidgetNode } from "$lib/nodes";
import ComfyNumberProperty from "./ComfyNumberProperty.svelte"; import ComfyNumberProperty from "./ComfyNumberProperty.svelte";
import ComfyComboProperty from "./ComfyComboProperty.svelte"; import ComfyComboProperty from "./ComfyComboProperty.svelte";
let target: IDragItem | null = null; let target: IDragItem | null = null;
let node: LGraphNode | null = null; let node: LGraphNode | null = null;
let attrsChanged: Writable<boolean> | null = null;
$: if ($layoutState.currentSelection.length > 0) { let refreshPanel: Writable<number> = writable(0);
const targetId = $layoutState.currentSelection.slice(-1)[0]
target = $layoutState.allItems[targetId].dragItem $: if ($layoutState.currentSelection.length > 0) {
if (target.type === "widget") { const targetId = $layoutState.currentSelection.slice(-1)[0]
node = (target as WidgetLayout).node target = $layoutState.allItems[targetId].dragItem
} attrsChanged = target.attrsChanged;
else { if (target.type === "widget") {
node = null; node = (target as WidgetLayout).node
} }
} else {
else if ($layoutState.currentSelectionNodes.length > 0) { node = null;
target = null; }
node = $layoutState.currentSelectionNodes[0] }
} else if ($layoutState.currentSelectionNodes.length > 0) {
else { target = null;
target = null node = $layoutState.currentSelectionNodes[0]
node = null; attrsChanged = null;
} }
else {
let targetType: string = "???" target = null
node = null;
$: { attrsChanged = null;
if (node != null) }
targetType = node.type || "Node"
else if (target) $: if (target) {
targetType = "Group" for (const cat of Object.values(ALL_ATTRIBUTES)) {
else for (const spec of Object.values(cat.specs)) {
targetType = "" if (spec.location === "widget" && target.attrs[spec.name] == null) {
} if (spec.canShow && !spec.canShow(target))
continue;
function validNodeProperty(spec: AttributesSpec, node: LGraphNode | null): boolean {
if (node == null) console.warn("Set default widget attr", spec.name, spec.defaultValue, target)
return false; let value = spec.defaultValue;
target.attrs[spec.name] = value;
if (spec.canShow && !spec.canShow(node)) if (spec.refreshPanelOnChange)
return false; $refreshPanel += 1;
}
if (spec.validNodeTypes) { }
return spec.validNodeTypes.indexOf(node.type) !== -1; }
} }
return spec.name in node.properties
} let targetType: string = "???"
function validWidgetAttribute(spec: AttributesSpec, widget: IDragItem | null): boolean { $: {
if (widget == null) if (node != null)
return false; targetType = node.type || "Node"
if (spec.canShow) else if (target)
return spec.canShow(widget); targetType = "Group"
else
return spec.name in widget.attrs targetType = ""
} }
function updateAttribute(entry: AttributesSpec, target: IDragItem | null, value: any) { function validNodeProperty(spec: AttributesSpec, node: LGraphNode | null): boolean {
if (target == null) if (node == null)
return; return false;
const name = entry.name if (spec.canShow && !spec.canShow(node))
console.warn("updateAttribute", name, value) return false;
target.attrs[name] = value if (spec.validNodeTypes) {
target.attrsChanged.set(!get(target.attrsChanged)) return spec.validNodeTypes.indexOf(node.type) !== -1;
}
if (node && "propsChanged" in node) { return spec.name in node.properties
const comfyNode = node as ComfyWidgetNode }
comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
} function validWidgetAttribute(spec: AttributesSpec, widget: IDragItem | null): boolean {
} if (widget == null)
return false;
function updateProperty(entry: AttributesSpec, value: any) { if (spec.canShow)
if (node == null) return spec.canShow(widget);
return
return spec.name in widget.attrs
const name = entry.name }
console.warn("updateProperty", name, value)
function getAttribute(target: IDragItem, spec: AttributesSpec): any {
node.properties[name] = value; let value = target.attrs[spec.name]
if (value == null)
if ("propsChanged" in node) { value = spec.defaultValue
const comfyNode = node as ComfyWidgetNode else if (spec.serialize)
comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1) value = spec.serialize(value)
} console.debug("[ComfyProperties] getAttribute", spec.name, value, target, spec)
} return value
}
function getVar(node: LGraphNode, spec: AttributesSpec) {
let value = node[spec.name] || spec.defaultValue function updateAttribute(spec: AttributesSpec, target: IDragItem | null, value: any) {
if (spec.serialize) if (target == null)
value = spec.serialize(value) return;
console.debug("[ComfyProperties] getVar", spec, value, node)
return value const name = spec.name
}
console.debug("[ComfyProperties] updateAttribute", spec, value, name, node)
function updateVar(entry: any, value: any) { if (spec.deserialize)
if (node == null) value = spec.deserialize(value)
return;
target.attrs[name] = value
const name = entry.name target.attrsChanged.set(!get(target.attrsChanged))
console.warn("updateVar", name, value)
if (node && "propsChanged" in node) {
if (entry.deserialize) const comfyNode = node as ComfyWidgetNode
value = entry.deserialize(value) comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
}
console.debug("[ComfyProperties] updateVar", entry, value, name, node)
node[name] = value; console.warn(spec)
if (spec.refreshPanelOnChange) {
if ("propsChanged" in node) { console.error("A! refresh")
const comfyNode = node as ComfyWidgetNode $refreshPanel += 1;
comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1) }
} }
}
function updateProperty(spec: AttributesSpec, value: any) {
function updateWorkflowAttribute(entry: AttributesSpec, value: any) { if (node == null)
const name = entry.name return
console.warn("updateWorkflowAttribute", name, value)
const name = spec.name
$layoutState.attrs[name] = value console.warn("updateProperty", name, value)
$layoutState = $layoutState
} node.properties[name] = value;
</script>
if ("propsChanged" in node) {
<div class="props"> const comfyNode = node as ComfyWidgetNode
<div class="top"> comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
<div class="target-name"> }
<span>
<span class="title">{target?.attrs?.title || node?.title || "Workflow"}<span> if (spec.refreshPanelOnChange)
{#if targetType !== ""} $refreshPanel += 1;
<span class="type">({targetType})</span> }
{/if}
</span> function getVar(node: LGraphNode, spec: AttributesSpec) {
</span> let value = node[spec.name]
</div> if (value == null)
</div> value = spec.defaultValue
<div class="props-entries"> else if (spec.serialize)
{#each ALL_ATTRIBUTES as category(category.categoryName)} value = spec.serialize(value)
<div class="category-name"> console.debug("[ComfyProperties] getVar", spec, value, node)
<span> return value
<span class="title">{category.categoryName}</span> }
</span>
</div> function updateVar(spec: AttributesSpec, value: any) {
{#each category.specs as spec(spec.id)} if (node == null)
{#if spec.location === "widget" && validWidgetAttribute(spec, target)} return;
<div class="props-entry">
{#if spec.type === "string"} const name = spec.name
<TextBox
value={target.attrs[spec.name] || spec.defaultValue} console.debug("[ComfyProperties] updateVar", spec, value, name, node)
on:change={(e) => updateAttribute(spec, target, e.detail)} if (spec.deserialize)
on:input={(e) => updateAttribute(spec, target, e.detail)} value = spec.deserialize(value)
disabled={!$uiState.uiUnlocked || !spec.editable}
label={spec.name} node[name] = value;
max_lines={1}
/> if ("propsChanged" in node) {
{:else if spec.type === "boolean"} const comfyNode = node as ComfyWidgetNode
<Checkbox comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
value={target.attrs[spec.name] || spec.defaultValue} }
on:change={(e) => updateAttribute(spec, target, e.detail)}
disabled={!$uiState.uiUnlocked || !spec.editable} if (spec.refreshPanelOnChange)
label={spec.name} $refreshPanel += 1;
/> }
{:else if spec.type === "number"}
<ComfyNumberProperty function updateWorkflowAttribute(entry: AttributesSpec, value: any) {
name={spec.name} const name = entry.name
value={target.attrs[spec.name] || spec.defaultValue} console.warn("updateWorkflowAttribute", name, value)
step={1}
disabled={!$uiState.uiUnlocked || !spec.editable} $layoutState.attrs[name] = value
on:change={(e) => updateAttribute(spec, target, e.detail)} $layoutState = $layoutState
/> }
{:else if spec.type === "enum"} </script>
<ComfyComboProperty
name={spec.name} <div class="props">
value={target.attrs[spec.name] || spec.defaultValue} <div class="top">
values={spec.values} <div class="target-name">
disabled={!$uiState.uiUnlocked || !spec.editable} <span>
on:change={(e) => updateAttribute(spec, target, e.detail)} <span class="title">{target?.attrs?.title || node?.title || "Workflow"}<span>
/> {#if targetType !== ""}
{/if} <span class="type">({targetType})</span>
</div> {/if}
{:else if node} </span>
{#if spec.location === "nodeProps" && validNodeProperty(spec, node)} </span>
<div class="props-entry"> </div>
{#if spec.type === "string"} </div>
<TextBox <div class="props-entries">
value={node.properties[spec.name] || spec.defaultValue} {#key $refreshPanel}
on:change={(e) => updateProperty(spec, e.detail)} {#each ALL_ATTRIBUTES as category(category.categoryName)}
on:input={(e) => updateProperty(spec, e.detail)} <div class="category-name">
label={spec.name} <span>
disabled={!$uiState.uiUnlocked || !spec.editable} <span class="title">{category.categoryName}</span>
max_lines={1} </span>
/> </div>
{:else if spec.type === "boolean"} {#each category.specs as spec(spec.id)}
<Checkbox {#if spec.location === "widget" && validWidgetAttribute(spec, target)}
value={node.properties[spec.name] || spec.defaultValue} <div class="props-entry">
label={spec.name} {#if spec.type === "string"}
disabled={!$uiState.uiUnlocked || !spec.editable} <TextBox
on:change={(e) => updateProperty(spec, e.detail)} value={getAttribute(target, spec)}
/> on:change={(e) => updateAttribute(spec, target, e.detail)}
{:else if spec.type === "number"} on:input={(e) => updateAttribute(spec, target, e.detail)}
<ComfyNumberProperty disabled={!$uiState.uiUnlocked || !spec.editable}
name={spec.name} label={spec.name}
value={node.properties[spec.name] || spec.defaultValue} max_lines={1}
step={1} />
disabled={!$uiState.uiUnlocked || !spec.editable} {:else if spec.type === "boolean"}
on:change={(e) => updateProperty(spec, e.detail)} <Checkbox
/> value={getAttribute(target, spec)}
{:else if spec.type === "enum"} on:change={(e) => updateAttribute(spec, target, e.detail)}
<ComfyComboProperty disabled={!$uiState.uiUnlocked || !spec.editable}
name={spec.name} label={spec.name}
value={node.properties[spec.name] || spec.defaultValue} />
values={spec.values} {:else if spec.type === "number"}
disabled={!$uiState.uiUnlocked || !spec.editable} <ComfyNumberProperty
on:change={(e) => updateProperty(spec, e.detail)} name={spec.name}
/> value={getAttribute(target, spec)}
{/if} step={1}
</div> disabled={!$uiState.uiUnlocked || !spec.editable}
{:else if spec.location === "nodeVars" && spec.name in node} on:change={(e) => updateAttribute(spec, target, e.detail)}
<div class="props-entry"> />
{#if spec.type === "string"} {:else if spec.type === "enum"}
<TextBox <ComfyComboProperty
value={getVar(node, spec)} name={spec.name}
on:change={(e) => updateVar(spec, e.detail)} value={getAttribute(target, spec)}
on:input={(e) => updateVar(spec, e.detail)} values={spec.values}
label={spec.name} disabled={!$uiState.uiUnlocked || !spec.editable}
disabled={!$uiState.uiUnlocked || !spec.editable} on:change={(e) => updateAttribute(spec, target, e.detail)}
max_lines={1} />
/> {/if}
{:else if spec.type === "boolean"} </div>
<Checkbox {:else if node}
value={getVar(node, spec)} {#if spec.location === "nodeProps" && validNodeProperty(spec, node)}
on:change={(e) => updateVar(spec, e.detail)} <div class="props-entry">
disabled={!$uiState.uiUnlocked || !spec.editable} {#if spec.type === "string"}
label={spec.name} <TextBox
/> value={node.properties[spec.name] || spec.defaultValue}
{:else if spec.type === "number"} on:change={(e) => updateProperty(spec, e.detail)}
<ComfyNumberProperty on:input={(e) => updateProperty(spec, e.detail)}
name={spec.name} label={spec.name}
value={getVar(node, spec)} disabled={!$uiState.uiUnlocked || !spec.editable}
step={1} max_lines={1}
disabled={!$uiState.uiUnlocked || !spec.editable} />
on:change={(e) => updateVar(spec, e.detail)} {:else if spec.type === "boolean"}
/> <Checkbox
{:else if spec.type === "enum"} value={node.properties[spec.name] || spec.defaultValue}
<ComfyComboProperty label={spec.name}
name={spec.name} disabled={!$uiState.uiUnlocked || !spec.editable}
value={getVar(node, spec)} on:change={(e) => updateProperty(spec, e.detail)}
values={spec.values} />
disabled={!$uiState.uiUnlocked || !spec.editable} {:else if spec.type === "number"}
on:change={(e) => updateVar(spec, e.detail)} <ComfyNumberProperty
/> name={spec.name}
{/if} value={node.properties[spec.name] || spec.defaultValue}
</div> step={1}
{/if} disabled={!$uiState.uiUnlocked || !spec.editable}
{:else if spec.location === "workflow" && spec.name in $layoutState.attrs} on:change={(e) => updateProperty(spec, e.detail)}
<div class="props-entry"> />
{#if spec.type === "string"} {:else if spec.type === "enum"}
<TextBox <ComfyComboProperty
value={$layoutState.attrs[spec.name] || spec.defaultValue} name={spec.name}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)} value={node.properties[spec.name] || spec.defaultValue}
on:input={(e) => updateWorkflowAttribute(spec, e.detail)} values={spec.values}
label={spec.name} disabled={!$uiState.uiUnlocked || !spec.editable}
disabled={!$uiState.uiUnlocked || !spec.editable} on:change={(e) => updateProperty(spec, e.detail)}
max_lines={1} />
/> {/if}
{:else if spec.type === "boolean"} </div>
<Checkbox {:else if spec.location === "nodeVars" && spec.name in node}
value={$layoutState.attrs[spec.name] || spec.defaultValue} <div class="props-entry">
on:change={(e) => updateWorkflowAttribute(spec, e.detail)} {#if spec.type === "string"}
disabled={!$uiState.uiUnlocked || !spec.editable} <TextBox
label={spec.name} value={getVar(node, spec)}
/> on:change={(e) => updateVar(spec, e.detail)}
{:else if spec.type === "number"} on:input={(e) => updateVar(spec, e.detail)}
<ComfyNumberProperty label={spec.name}
name={spec.name} disabled={!$uiState.uiUnlocked || !spec.editable}
value={$layoutState.attrs[spec.name] || spec.defaultValue} max_lines={1}
step={1} />
disabled={!$uiState.uiUnlocked || !spec.editable} {:else if spec.type === "boolean"}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)} <Checkbox
/> value={getVar(node, spec)}
{:else if spec.type === "enum"} on:change={(e) => updateVar(spec, e.detail)}
<ComfyComboProperty disabled={!$uiState.uiUnlocked || !spec.editable}
name={spec.name} label={spec.name}
value={$layoutState.attrs[spec.name] || spec.defaultValue} />
values={spec.values} {:else if spec.type === "number"}
disabled={!$uiState.uiUnlocked || !spec.editable} <ComfyNumberProperty
on:change={(e) => updateWorkflowAttribute(spec, e.detail)} name={spec.name}
/> value={getVar(node, spec)}
{/if} step={1}
</div> disabled={!$uiState.uiUnlocked || !spec.editable}
{/if} on:change={(e) => updateVar(spec, e.detail)}
{/each} />
{/each} {:else if spec.type === "enum"}
</div> <ComfyComboProperty
</div> name={spec.name}
value={getVar(node, spec)}
<style lang="scss"> values={spec.values}
.props-entry { disabled={!$uiState.uiUnlocked || !spec.editable}
padding-bottom: 0.5rem; on:change={(e) => updateVar(spec, e.detail)}
padding-left: 0.5rem; />
padding-right: 0.5rem; {/if}
display: flex; </div>
flex-direction: row; {/if}
} {:else if spec.location === "workflow" && spec.name in $layoutState.attrs}
<div class="props-entry">
.target-name { {#if spec.type === "string"}
border-color: var(--neutral-400); <TextBox
background: var(--neutral-300); value={$layoutState.attrs[spec.name] || spec.defaultValue}
padding: 0.8rem 1.0rem; on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
on:input={(e) => updateWorkflowAttribute(spec, e.detail)}
.title { label={spec.name}
font-weight: bold; disabled={!$uiState.uiUnlocked || !spec.editable}
} max_lines={1}
} />
{:else if spec.type === "boolean"}
.category-name { <Checkbox
padding: 0.4rem 1.0rem; value={$layoutState.attrs[spec.name] || spec.defaultValue}
border-color: var(--neutral-300); on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
background: var(--neutral-200); disabled={!$uiState.uiUnlocked || !spec.editable}
} label={spec.name}
/>
.target-name, .category-name { {:else if spec.type === "number"}
border-width: var(--block-border-width); <ComfyNumberProperty
name={spec.name}
.type { value={$layoutState.attrs[spec.name] || spec.defaultValue}
color: var(--neutral-500); step={1}
} disabled={!$uiState.uiUnlocked || !spec.editable}
} on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
/>
.bottom { {:else if spec.type === "enum"}
/* width: 100%; <ComfyComboProperty
height: auto; name={spec.name}
position: absolute; value={$layoutState.attrs[spec.name] || spec.defaultValue}
bottom: 0; values={spec.values}
padding: 0.5em; */ disabled={!$uiState.uiUnlocked || !spec.editable}
} on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
</style>
/>
{/if}
</div>
{/if}
{/each}
{/each}
{/key}
</div>
</div>
<style lang="scss">
.props-entry {
padding-bottom: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: row;
}
.target-name {
border-color: var(--neutral-400);
background: var(--neutral-300);
padding: 0.8rem 1.0rem;
.title {
font-weight: bold;
}
}
.category-name {
padding: 0.4rem 1.0rem;
border-color: var(--neutral-300);
background: var(--neutral-200);
}
.target-name, .category-name {
border-width: var(--block-border-width);
.type {
color: var(--neutral-500);
}
}
.bottom {
/* width: 100%;
height: auto;
position: absolute;
bottom: 0;
padding: 0.5em; */
}

41
src/lib/components/Container.svelte Normal file
View File

@@ -0,0 +1,41 @@
<script lang="ts">
import { Block, BlockTitle } from "@gradio/atoms";
import uiState from "$lib/stores/uiState";
import WidgetContainer from "./WidgetContainer.svelte"
import BlockContainer from "./BlockContainer.svelte"
import TabsContainer from "./TabsContainer.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 attrsChanged: Writable<boolean> | null = null;
$: if (container) {
attrsChanged = container.attrsChanged
}
else {
attrsChanged = null
}
</script>
{#if container}
{@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
{@const dragDisabled = zIndex === 0 || $layoutState.currentSelection.length > 2 || !$uiState.uiUnlocked}
{#key $attrsChanged}
{#if container.attrs.variant === "tabs"}
<TabsContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
{:else}
<BlockContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
{/if}
{/key}
{/if}

213
src/lib/components/TabsContainer.svelte Normal file
View File

@@ -0,0 +1,213 @@
<script lang="ts">
import { Block, BlockTitle } from "@gradio/atoms";
import { Tabs, TabItem } from "@gradio/tabs";
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"
import type { Writable } from "svelte/store";
export let container: ContainerLayout | null = null;
export let zIndex: number = 0;
export let classes: string[] = [];
export let showHandles: boolean = false;
export let edit: boolean = false;
export let dragDisabled: boolean = false;
let attrsChanged: Writable<boolean> | null = null;
let children: IDragItem[] | null = null;
const flipDurationMs = 100;
let selectedIndex: number = 0;
$: if (container) {
children = $layoutState.allItems[container.id].children;
attrsChanged = container.attrsChanged
}
else {
children = null;
attrsChanged = 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
};
function getTabName(container: ContainerLayout, i: number): string {
const tabNames = container.attrs.tabNames
if (!tabNames)
return `Tab ${i}`
const tabName = tabNames[i]
if (tabName == null || tabName === "")
return `Tab ${i}`
return tabName
}
</script>
{#if container && children}
<div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
class:hide-block={container.attrs.blockVariant === "hidden"}
class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(container.id)}
class:root-container={zIndex === 0}
class:is-executing={container.isNodeExecuting}
class:edit={edit}>
{#if edit}
<Block>
{#if container.attrs.title && container.attrs.title !== ""}
<BlockTitle show_label={true}>{container.attrs.title}</BlockTitle>
{/if}
<div class="v-pane"
class:empty={children.length === 0}
class:edit={edit}
use:dndzone="{{
items: children,
flipDurationMs,
centreDraggedOnCursor: true,
morphDisabled: true,
dropFromOthersDisabled: zIndex === 0,
dragDisabled
}}"
on:consider="{handleConsider}"
on:finalize="{handleFinalize}"
>
{#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item, i(item.id)}
{@const hidden = item?.attrs?.hidden}
{@const tabName = getTabName(container, i)}
<div class="animation-wrapper"
class:hidden={hidden}
animate:flip={{duration:flipDurationMs}}
style={item?.attrs?.flexGrow ? `flex-grow: ${item.attrs.flexGrow}` : ""}>
<Block>
<label for={String(item.id)}>
<BlockTitle><strong>Tab {i+1}:</strong> {tabName}</BlockTitle>
</label>
<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}
</Block>
</div>
{/each}
</div>
{#if container.attrs.hidden && edit}
<div class="handle handle-hidden" class:hidden={!edit} style="z-index: {zIndex+100}"/>
{/if}
{#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>
{:else}
<Tabs>
{#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item, i(item.id)}
{@const tabName = getTabName(container, i)}
<TabItem name={tabName} on:select={() => console.log("tab " + i)}>
<WidgetContainer dragItem={item} zIndex={zIndex+1} />
</TabItem>
{/each}
</Tabs>
{/if}
</div>
{/if}
<style lang="scss">
.container {
display: flex;
> :global(*) {
border-radius: 0;
}
:global(.v-pane > .block) {
height: fit-content;
}
.edit > :global(.v-pane > .block) {
border-color: var(--color-pink-500);
border-width: 2px;
border-style: dashed !important;
margin: 0.2em;
padding: 1.4em;
}
/* :global(.hide-block > .v-pane > .block) {
padding: 0.5em 0.25em;
box-shadow: unset;
border-width: 0;
border-color: unset;
border-radius: unset;
background: var(--block-background-fill);
width: 100%;
line-height: var(--line-sm);
} */
&.horizontal {
flex-wrap: wrap;
gap: var(--layout-gap);
width: var(--size-full);
> :global(.block > .v-pane) {
flex-direction: row;
}
> :global(*), > :global(.form > *) {
flex: 1 1 0%;
flex-wrap: wrap;
min-width: min(160px, 100%);
}
}
&.vertical {
position: relative;
> :global(.block > .v-pane) {
flex-direction: column;
}
> :global(*), > :global(.form > *), .v-pane {
width: var(--size-full);
}
}
}
.handle {
cursor: grab;
z-index: 99999;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
}
.animation-wrapper {
position: relative;
flex-grow: 100;
}
.handle-widget:hover {
background-color: #add8e680;
}
.handle-container:hover {
background-color: #d8ade680;
}
.container.selected > :global(.block) {
background: var(--color-yellow-300);
}
</style>

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

@@ -4,7 +4,7 @@
import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState"; import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
import { startDrag, stopDrag } from "$lib/utils" import { startDrag, stopDrag } from "$lib/utils"
import BlockContainer from "./BlockContainer.svelte" import Container from "./Container.svelte"
import { type Writable } from "svelte/store" import { type Writable } from "svelte/store"
import type { ComfyWidgetNode } from "$lib/nodes"; import type { ComfyWidgetNode } from "$lib/nodes";
@@ -59,7 +59,7 @@
{#if container} {#if container}
{#key $attrsChanged} {#key $attrsChanged}
<BlockContainer {container} {classes} {zIndex} {showHandles} /> <Container {container} {classes} {zIndex} {showHandles} />
{/key} {/key}
{:else if widget && widget.node} {:else if widget && widget.node}
{@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1} {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}

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

@@ -35,7 +35,12 @@ export type Attributes = {
blockVariant?: "block" | "hidden", blockVariant?: "block" | "hidden",
hidden?: boolean, hidden?: boolean,
disabled?: boolean, disabled?: boolean,
flexGrow?: number flexGrow?: number,
/** Display variant for widgets/containers (e.g. number widget can act as slider/knob/dial) */
variant?: string,
tabNames?: string[]
} }
export type AttributesSpec = { export type AttributesSpec = {
@@ -44,8 +49,8 @@ export type AttributesSpec = {
type: string, type: string,
location: "widget" | "nodeProps" | "nodeVars" | "workflow" location: "widget" | "nodeProps" | "nodeVars" | "workflow"
editable: boolean, editable: boolean,
defaultValue: any,
defaultValue?: any,
values?: string[], values?: string[],
hidden?: boolean, hidden?: boolean,
validNodeTypes?: string[], validNodeTypes?: string[],
@@ -53,6 +58,7 @@ export type AttributesSpec = {
canShow?: (arg: IDragItem | LGraphNode) => boolean, canShow?: (arg: IDragItem | LGraphNode) => boolean,
serialize?: (arg: any) => string, serialize?: (arg: any) => string,
deserialize?: (arg: string) => any, deserialize?: (arg: string) => any,
refreshPanelOnChange?: boolean
} }
export type AttributesCategorySpec = { export type AttributesCategorySpec = {
@@ -62,6 +68,13 @@ export type AttributesCategorySpec = {
export type AttributesSpecList = AttributesCategorySpec[] export type AttributesSpecList = AttributesCategorySpec[]
const serializeStringArray = (arg: string[]) => arg.join(",")
const deserializeStringArray = (arg: string) => {
if (arg === "")
return []
return arg.split(",").map(s => s.trim())
}
const ALL_ATTRIBUTES: AttributesSpecList = [ const ALL_ATTRIBUTES: AttributesSpecList = [
{ {
categoryName: "appearance", categoryName: "appearance",
@@ -70,18 +83,21 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
name: "title", name: "title",
type: "string", type: "string",
location: "widget", location: "widget",
defaultValue: "",
editable: true, editable: true,
}, },
{ {
name: "hidden", name: "hidden",
type: "boolean", type: "boolean",
location: "widget", location: "widget",
defaultValue: false,
editable: true editable: true
}, },
{ {
name: "disabled", name: "disabled",
type: "boolean", type: "boolean",
location: "widget", location: "widget",
defaultValue: false,
editable: true editable: true
}, },
{ {
@@ -107,15 +123,6 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
defaultValue: "", defaultValue: "",
editable: true, editable: true,
}, },
{
name: "blockVariant",
type: "enum",
location: "widget",
editable: true,
values: ["block", "hidden"],
defaultValue: "block",
canShow: (di: IDragItem) => di.type === "container"
},
// Container variants // Container variants
{ {
@@ -125,6 +132,28 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
editable: true, editable: true,
values: ["block", "accordion", "tabs"], values: ["block", "accordion", "tabs"],
defaultValue: "block", defaultValue: "block",
canShow: (di: IDragItem) => di.type === "container",
refreshPanelOnChange: true
},
{
name: "tabNames",
type: "string",
location: "widget",
editable: true,
defaultValue: ["Tab 1", "Tab 2", "Tab 3"],
canShow: (di: IDragItem) => di.type === "container" && di.attrs.variant === "tabs",
serialize: serializeStringArray,
deserialize: deserializeStringArray
},
{
name: "blockVariant",
type: "enum",
location: "widget",
editable: true,
values: ["block", "hidden"],
defaultValue: "block",
canShow: (di: IDragItem) => di.type === "container" canShow: (di: IDragItem) => di.type === "container"
}, },
] ]
@@ -138,12 +167,9 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
type: "string", type: "string",
location: "nodeVars", location: "nodeVars",
editable: true, editable: true,
serialize: (arg: string[]) => arg.join(","), defaultValue: [],
deserialize: (arg: string) => { serialize: serializeStringArray,
if (arg === "") deserialize: deserializeStringArray
return []
return arg.split(",").map(s => s.trim())
}
}, },
// Range // Range
@@ -152,6 +178,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
type: "number", type: "number",
location: "nodeProps", location: "nodeProps",
editable: true, editable: true,
defaultValue: 0,
validNodeTypes: ["ui/slider"], validNodeTypes: ["ui/slider"],
}, },
{ {
@@ -159,6 +186,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
type: "number", type: "number",
location: "nodeProps", location: "nodeProps",
editable: true, editable: true,
defaultValue: 10,
validNodeTypes: ["ui/slider"], validNodeTypes: ["ui/slider"],
}, },
{ {
@@ -166,6 +194,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
type: "number", type: "number",
location: "nodeProps", location: "nodeProps",
editable: true, editable: true,
defaultValue: 1,
validNodeTypes: ["ui/slider"], validNodeTypes: ["ui/slider"],
}, },
@@ -221,8 +250,8 @@ export interface WidgetLayout extends IDragItem {
type DragItemID = string; type DragItemID = string;
type LayoutStateOps = { type LayoutStateOps = {
addContainer: (parent: ContainerLayout | null, attrs: Partial<Attributes>, index: number) => ContainerLayout, addContainer: (parent: ContainerLayout | null, attrs: Partial<Attributes>, index?: number) => ContainerLayout,
addWidget: (parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partial<Attributes>, index: number) => WidgetLayout, addWidget: (parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partial<Attributes>, index?: number) => WidgetLayout,
findDefaultContainerForInsertion: () => ContainerLayout | null, findDefaultContainerForInsertion: () => ContainerLayout | null,
updateChildren: (parent: IDragItem, children: IDragItem[]) => IDragItem[], updateChildren: (parent: IDragItem, children: IDragItem[]) => IDragItem[],
nodeAdded: (node: LGraphNode) => void, nodeAdded: (node: LGraphNode) => void,
@@ -272,7 +301,7 @@ function findDefaultContainerForInsertion(): ContainerLayout | null {
return null return null
} }
function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes> = {}, index: number = -1): ContainerLayout { function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes> = {}, index?: number): ContainerLayout {
const state = get(store); const state = get(store);
const dragItem: ContainerLayout = { const dragItem: ContainerLayout = {
type: "container", type: "container",
@@ -291,14 +320,14 @@ function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes>
const entry: DragItemEntry = { dragItem, children: [], parent: null }; const entry: DragItemEntry = { dragItem, children: [], parent: null };
state.allItems[dragItem.id] = entry; state.allItems[dragItem.id] = entry;
if (parent) { if (parent) {
moveItem(dragItem, parent) moveItem(dragItem, parent, index)
} }
console.debug("[layoutState] addContainer", state) console.debug("[layoutState] addContainer", state)
store.set(state) store.set(state)
return dragItem; return dragItem;
} }
function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partial<Attributes> = {}, index: number = -1): WidgetLayout { function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partial<Attributes> = {}, index?: number): WidgetLayout {
const state = get(store); const state = get(store);
const widgetName = "Widget" const widgetName = "Widget"
const dragItem: WidgetLayout = { const dragItem: WidgetLayout = {
@@ -320,7 +349,7 @@ function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partia
state.allItems[dragItem.id] = entry; state.allItems[dragItem.id] = entry;
state.allItemsByNode[node.id] = entry; state.allItemsByNode[node.id] = entry;
console.debug("[layoutState] addWidget", state) console.debug("[layoutState] addWidget", state)
moveItem(dragItem, parent) moveItem(dragItem, parent, index)
return dragItem; return dragItem;
} }
@@ -398,7 +427,7 @@ function nodeRemoved(node: LGraphNode) {
store.set(state) store.set(state)
} }
function moveItem(target: IDragItem, to: ContainerLayout, index: number = -1) { function moveItem(target: IDragItem, to: ContainerLayout, index?: number) {
const state = get(store) const state = get(store)
const entry = state.allItems[target.id] const entry = state.allItems[target.id]
if (entry.parent && entry.parent.id === to.id) if (entry.parent && entry.parent.id === to.id)
@@ -406,9 +435,9 @@ function moveItem(target: IDragItem, to: ContainerLayout, index: number = -1) {
if (entry.parent) { if (entry.parent) {
const parentEntry = state.allItems[entry.parent.id]; const parentEntry = state.allItems[entry.parent.id];
const index = parentEntry.children.findIndex(c => c.id === target.id) const parentIndex = parentEntry.children.findIndex(c => c.id === target.id)
if (index !== -1) { if (parentIndex !== -1) {
parentEntry.children.splice(index, 1) parentEntry.children.splice(parentIndex, 1)
} }
else { else {
console.error(parentEntry) console.error(parentEntry)
@@ -418,7 +447,7 @@ function moveItem(target: IDragItem, to: ContainerLayout, index: number = -1) {
} }
const toEntry = state.allItems[to.id]; const toEntry = state.allItems[to.id];
if (index !== -1) if (index != null && index >= 0)
toEntry.children.splice(index, 0, target) toEntry.children.splice(index, 0, target)
else else
toEntry.children.push(target) toEntry.children.push(target)

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

@@ -20,7 +20,7 @@ const store: WritableUIStateStore = writable(
graphLocked: false, graphLocked: false,
nodesLocked: false, nodesLocked: false,
autoAddUI: true, autoAddUI: true,
uiUnlocked: false, uiUnlocked: true,
uiEditMode: "widgets" uiEditMode: "widgets"
}) })

6
vite.config.ts
View File

@@ -8,7 +8,11 @@ import { viteStaticCopy } from 'vite-plugin-static-copy'
export default defineConfig({ export default defineConfig({
clearScreen: false, clearScreen: false,
plugins: [ plugins: [
FullReload(["src/**/*.{js,ts,scss,svelte}"]), FullReload([
// "src/**/*.{js,ts,scss,svelte}"
"src/**/*.{scss}",
"src/**/ComfyApp.{ts,svelte}"
]),
svelte(), , svelte(), ,
viteStaticCopy({ viteStaticCopy({
targets: [ targets: [