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;
} }

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

@@ -4,17 +4,20 @@
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;
let refreshPanel: Writable<number> = writable(0);
$: if ($layoutState.currentSelection.length > 0) { $: if ($layoutState.currentSelection.length > 0) {
const targetId = $layoutState.currentSelection.slice(-1)[0] const targetId = $layoutState.currentSelection.slice(-1)[0]
target = $layoutState.allItems[targetId].dragItem target = $layoutState.allItems[targetId].dragItem
attrsChanged = target.attrsChanged;
if (target.type === "widget") { if (target.type === "widget") {
node = (target as WidgetLayout).node node = (target as WidgetLayout).node
} }
@@ -25,10 +28,29 @@
else if ($layoutState.currentSelectionNodes.length > 0) { else if ($layoutState.currentSelectionNodes.length > 0) {
target = null; target = null;
node = $layoutState.currentSelectionNodes[0] node = $layoutState.currentSelectionNodes[0]
attrsChanged = null;
} }
else { else {
target = null target = null
node = null; node = null;
attrsChanged = null;
}
$: if (target) {
for (const cat of Object.values(ALL_ATTRIBUTES)) {
for (const spec of Object.values(cat.specs)) {
if (spec.location === "widget" && target.attrs[spec.name] == null) {
if (spec.canShow && !spec.canShow(target))
continue;
console.warn("Set default widget attr", spec.name, spec.defaultValue, target)
let value = spec.defaultValue;
target.attrs[spec.name] = value;
if (spec.refreshPanelOnChange)
$refreshPanel += 1;
}
}
}
} }
let targetType: string = "???" let targetType: string = "???"
@@ -64,12 +86,25 @@
return spec.name in widget.attrs return spec.name in widget.attrs
} }
function updateAttribute(entry: AttributesSpec, target: IDragItem | null, value: any) { function getAttribute(target: IDragItem, spec: AttributesSpec): any {
let value = target.attrs[spec.name]
if (value == null)
value = spec.defaultValue
else if (spec.serialize)
value = spec.serialize(value)
console.debug("[ComfyProperties] getAttribute", spec.name, value, target, spec)
return value
}
function updateAttribute(spec: AttributesSpec, target: IDragItem | null, value: any) {
if (target == null) if (target == null)
return; return;
const name = entry.name const name = spec.name
console.warn("updateAttribute", name, value)
console.debug("[ComfyProperties] updateAttribute", spec, value, name, node)
if (spec.deserialize)
value = spec.deserialize(value)
target.attrs[name] = value target.attrs[name] = value
target.attrsChanged.set(!get(target.attrsChanged)) target.attrsChanged.set(!get(target.attrsChanged))
@@ -78,13 +113,19 @@
const comfyNode = node as ComfyWidgetNode const comfyNode = node as ComfyWidgetNode
comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1) comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
} }
console.warn(spec)
if (spec.refreshPanelOnChange) {
console.error("A! refresh")
$refreshPanel += 1;
}
} }
function updateProperty(entry: AttributesSpec, value: any) { function updateProperty(spec: AttributesSpec, value: any) {
if (node == null) if (node == null)
return return
const name = entry.name const name = spec.name
console.warn("updateProperty", name, value) console.warn("updateProperty", name, value)
node.properties[name] = value; node.properties[name] = value;
@@ -93,33 +134,40 @@
const comfyNode = node as ComfyWidgetNode const comfyNode = node as ComfyWidgetNode
comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1) comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
} }
if (spec.refreshPanelOnChange)
$refreshPanel += 1;
} }
function getVar(node: LGraphNode, spec: AttributesSpec) { function getVar(node: LGraphNode, spec: AttributesSpec) {
let value = node[spec.name] || spec.defaultValue let value = node[spec.name]
if (spec.serialize) if (value == null)
value = spec.defaultValue
else if (spec.serialize)
value = spec.serialize(value) value = spec.serialize(value)
console.debug("[ComfyProperties] getVar", spec, value, node) console.debug("[ComfyProperties] getVar", spec, value, node)
return value return value
} }
function updateVar(entry: any, value: any) { function updateVar(spec: AttributesSpec, value: any) {
if (node == null) if (node == null)
return; return;
const name = entry.name const name = spec.name
console.warn("updateVar", name, value)
if (entry.deserialize) console.debug("[ComfyProperties] updateVar", spec, value, name, node)
value = entry.deserialize(value) if (spec.deserialize)
value = spec.deserialize(value)
console.debug("[ComfyProperties] updateVar", entry, value, name, node)
node[name] = value; node[name] = value;
if ("propsChanged" in node) { if ("propsChanged" in node) {
const comfyNode = node as ComfyWidgetNode const comfyNode = node as ComfyWidgetNode
comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1) comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
} }
if (spec.refreshPanelOnChange)
$refreshPanel += 1;
} }
function updateWorkflowAttribute(entry: AttributesSpec, value: any) { function updateWorkflowAttribute(entry: AttributesSpec, value: any) {
@@ -144,162 +192,164 @@
</div> </div>
</div> </div>
<div class="props-entries"> <div class="props-entries">
{#each ALL_ATTRIBUTES as category(category.categoryName)} {#key $refreshPanel}
<div class="category-name"> {#each ALL_ATTRIBUTES as category(category.categoryName)}
<span> <div class="category-name">
<span class="title">{category.categoryName}</span> <span>
</span> <span class="title">{category.categoryName}</span>
</div> </span>
{#each category.specs as spec(spec.id)} </div>
{#if spec.location === "widget" && validWidgetAttribute(spec, target)} {#each category.specs as spec(spec.id)}
<div class="props-entry"> {#if spec.location === "widget" && validWidgetAttribute(spec, target)}
{#if spec.type === "string"} <div class="props-entry">
<TextBox {#if spec.type === "string"}
value={target.attrs[spec.name] || spec.defaultValue} <TextBox
on:change={(e) => updateAttribute(spec, target, e.detail)} value={getAttribute(target, spec)}
on:input={(e) => updateAttribute(spec, target, e.detail)}
disabled={!$uiState.uiUnlocked || !spec.editable}
label={spec.name}
max_lines={1}
/>
{:else if spec.type === "boolean"}
<Checkbox
value={target.attrs[spec.name] || spec.defaultValue}
on:change={(e) => updateAttribute(spec, target, e.detail)} on:change={(e) => updateAttribute(spec, target, e.detail)}
on:input={(e) => updateAttribute(spec, target, e.detail)}
disabled={!$uiState.uiUnlocked || !spec.editable} disabled={!$uiState.uiUnlocked || !spec.editable}
label={spec.name} label={spec.name}
max_lines={1}
/> />
{:else if spec.type === "number"} {:else if spec.type === "boolean"}
<ComfyNumberProperty <Checkbox
name={spec.name} value={getAttribute(target, spec)}
value={target.attrs[spec.name] || spec.defaultValue}
step={1}
disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateAttribute(spec, target, e.detail)} on:change={(e) => updateAttribute(spec, target, e.detail)}
disabled={!$uiState.uiUnlocked || !spec.editable}
label={spec.name}
/> />
{:else if spec.type === "enum"} {:else if spec.type === "number"}
<ComfyComboProperty <ComfyNumberProperty
name={spec.name} name={spec.name}
value={target.attrs[spec.name] || spec.defaultValue} value={getAttribute(target, spec)}
values={spec.values} step={1}
disabled={!$uiState.uiUnlocked || !spec.editable} disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateAttribute(spec, target, e.detail)} on:change={(e) => updateAttribute(spec, target, e.detail)}
/> />
{/if}
</div>
{:else if node}
{#if spec.location === "nodeProps" && validNodeProperty(spec, node)}
<div class="props-entry">
{#if spec.type === "string"}
<TextBox
value={node.properties[spec.name] || spec.defaultValue}
on:change={(e) => updateProperty(spec, e.detail)}
on:input={(e) => updateProperty(spec, e.detail)}
label={spec.name}
disabled={!$uiState.uiUnlocked || !spec.editable}
max_lines={1}
/>
{:else if spec.type === "boolean"}
<Checkbox
value={node.properties[spec.name] || spec.defaultValue}
label={spec.name}
disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateProperty(spec, e.detail)}
/>
{:else if spec.type === "number"}
<ComfyNumberProperty
name={spec.name}
value={node.properties[spec.name] || spec.defaultValue}
step={1}
disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateProperty(spec, e.detail)}
/>
{:else if spec.type === "enum"} {:else if spec.type === "enum"}
<ComfyComboProperty <ComfyComboProperty
name={spec.name} name={spec.name}
value={node.properties[spec.name] || spec.defaultValue} value={getAttribute(target, spec)}
values={spec.values} values={spec.values}
disabled={!$uiState.uiUnlocked || !spec.editable} disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateProperty(spec, e.detail)} on:change={(e) => updateAttribute(spec, target, e.detail)}
/> />
{/if} {/if}
</div> </div>
{:else if spec.location === "nodeVars" && spec.name in node} {:else if node}
{#if spec.location === "nodeProps" && validNodeProperty(spec, node)}
<div class="props-entry">
{#if spec.type === "string"}
<TextBox
value={node.properties[spec.name] || spec.defaultValue}
on:change={(e) => updateProperty(spec, e.detail)}
on:input={(e) => updateProperty(spec, e.detail)}
label={spec.name}
disabled={!$uiState.uiUnlocked || !spec.editable}
max_lines={1}
/>
{:else if spec.type === "boolean"}
<Checkbox
value={node.properties[spec.name] || spec.defaultValue}
label={spec.name}
disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateProperty(spec, e.detail)}
/>
{:else if spec.type === "number"}
<ComfyNumberProperty
name={spec.name}
value={node.properties[spec.name] || spec.defaultValue}
step={1}
disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateProperty(spec, e.detail)}
/>
{:else if spec.type === "enum"}
<ComfyComboProperty
name={spec.name}
value={node.properties[spec.name] || spec.defaultValue}
values={spec.values}
disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateProperty(spec, e.detail)}
/>
{/if}
</div>
{:else if spec.location === "nodeVars" && spec.name in node}
<div class="props-entry">
{#if spec.type === "string"}
<TextBox
value={getVar(node, spec)}
on:change={(e) => updateVar(spec, e.detail)}
on:input={(e) => updateVar(spec, e.detail)}
label={spec.name}
disabled={!$uiState.uiUnlocked || !spec.editable}
max_lines={1}
/>
{:else if spec.type === "boolean"}
<Checkbox
value={getVar(node, spec)}
on:change={(e) => updateVar(spec, e.detail)}
disabled={!$uiState.uiUnlocked || !spec.editable}
label={spec.name}
/>
{:else if spec.type === "number"}
<ComfyNumberProperty
name={spec.name}
value={getVar(node, spec)}
step={1}
disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateVar(spec, e.detail)}
/>
{:else if spec.type === "enum"}
<ComfyComboProperty
name={spec.name}
value={getVar(node, spec)}
values={spec.values}
disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateVar(spec, e.detail)}
/>
{/if}
</div>
{/if}
{:else if spec.location === "workflow" && spec.name in $layoutState.attrs}
<div class="props-entry"> <div class="props-entry">
{#if spec.type === "string"} {#if spec.type === "string"}
<TextBox <TextBox
value={getVar(node, spec)} value={$layoutState.attrs[spec.name] || spec.defaultValue}
on:change={(e) => updateVar(spec, e.detail)} on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
on:input={(e) => updateVar(spec, e.detail)} on:input={(e) => updateWorkflowAttribute(spec, e.detail)}
label={spec.name} label={spec.name}
disabled={!$uiState.uiUnlocked || !spec.editable} disabled={!$uiState.uiUnlocked || !spec.editable}
max_lines={1} max_lines={1}
/> />
{:else if spec.type === "boolean"} {:else if spec.type === "boolean"}
<Checkbox <Checkbox
value={getVar(node, spec)} value={$layoutState.attrs[spec.name] || spec.defaultValue}
on:change={(e) => updateVar(spec, e.detail)} on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
disabled={!$uiState.uiUnlocked || !spec.editable} disabled={!$uiState.uiUnlocked || !spec.editable}
label={spec.name} label={spec.name}
/> />
{:else if spec.type === "number"} {:else if spec.type === "number"}
<ComfyNumberProperty <ComfyNumberProperty
name={spec.name} name={spec.name}
value={getVar(node, spec)} value={$layoutState.attrs[spec.name] || spec.defaultValue}
step={1} step={1}
disabled={!$uiState.uiUnlocked || !spec.editable} disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateVar(spec, e.detail)} on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
/> />
{:else if spec.type === "enum"} {:else if spec.type === "enum"}
<ComfyComboProperty <ComfyComboProperty
name={spec.name} name={spec.name}
value={getVar(node, spec)} value={$layoutState.attrs[spec.name] || spec.defaultValue}
values={spec.values} values={spec.values}
disabled={!$uiState.uiUnlocked || !spec.editable} disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateVar(spec, e.detail)} on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
/> />
{/if} {/if}
</div> </div>
{:else if spec.location === "workflow" && spec.name in $layoutState.attrs} {/if}
<div class="props-entry">
{#if spec.type === "string"}
<TextBox
value={$layoutState.attrs[spec.name] || spec.defaultValue}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
on:input={(e) => updateWorkflowAttribute(spec, e.detail)}
label={spec.name}
disabled={!$uiState.uiUnlocked || !spec.editable}
max_lines={1}
/>
{:else if spec.type === "boolean"}
<Checkbox
value={$layoutState.attrs[spec.name] || spec.defaultValue}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
disabled={!$uiState.uiUnlocked || !spec.editable}
label={spec.name}
/>
{:else if spec.type === "number"}
<ComfyNumberProperty
name={spec.name}
value={$layoutState.attrs[spec.name] || spec.defaultValue}
step={1}
disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
/>
{:else if spec.type === "enum"}
<ComfyComboProperty
name={spec.name}
value={$layoutState.attrs[spec.name] || spec.defaultValue}
values={spec.values}
disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
/>
{/if}
</div>
{/if}
{/each} {/each}
{/each} {/each}
{/key} {/key}
</div> </div>
</div> </div>

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: [