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

WOrkflow/layout fixes

Browse Source
This commit is contained in:
space-nuko
2023-05-10 21:49:46 -05:00
parent c0bd46b079
commit 48923ec60f
11 changed files with 933 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/lib/components/AccordionContainer.svelte
View File

@@ -12,7 +12,7 @@
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";
import { writable, type Writable } from "svelte/store";
import { isHidden } from "$lib/widgets/utils";
export let container: ContainerLayout | null = null;
@@ -22,23 +22,27 @@
export let edit: boolean = false;
export let dragDisabled: boolean = false;
export let isMobile: boolean = false;
let isOpen: Writable<boolean> | null = null;
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
if (container.isOpen == null) {
container.isOpen = container.attrs.openOnStartup
}
setupState()
}
else {
children = null;
attrsChanged = null
}
function setupState() {
children = $layoutState.allItems[container.id].children;
if (container.isOpen == null) {
container.isOpen = writable(container.attrs.openOnStartup)
}
isOpen = container.isOpen
console.warn("REBUILD", container.attrs.title, $isOpen)
}
function handleConsider(evt: any) {
@@ -51,8 +55,9 @@
// Ensure dragging is stopped on drag finish
};
function handleClick({ clicked }: CustomEvent<boolean>) {
function handleClick(e: CustomEvent<boolean>) {
navigator.vibrate(20)
$isOpen = e.detail
}
</script>
@@ -104,7 +109,7 @@
</Block>
{:else}
<Block elem_classes={["gradio-accordion"]}>
<Accordion label={container.attrs.title} bind:open={container.isOpen} on:click={handleClick}>
<Accordion label={container.attrs.title} open={$isOpen} on:click={handleClick}>
{#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
<WidgetContainer dragItem={item} zIndex={zIndex+1} {isMobile} />
{/each}

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

@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from "svelte";
import { get } from "svelte/store";
import { get, writable, type Writable } from "svelte/store";
import { Pane, Splitpanes } from 'svelte-splitpanes';
import { Button } from "@gradio/button";
import { BlockTitle } from "@gradio/atoms";

7
src/lib/components/ComfyApp.ts
View File

@@ -383,7 +383,7 @@ export default class ComfyApp {
}
// Distinguish frontend/backend connections
const BACKEND_TYPES = ["CLIP", "CLIP_VISION", "CLIP_VISION_OUTPUT", "CONDITIONING", "CONTROL_NET", "LATENT", "MASK", "MODEL", "STYLE_MODEL", "VAE"]
const BACKEND_TYPES = ["CLIP", "CLIP_VISION", "CLIP_VISION_OUTPUT", "CONDITIONING", "CONTROL_NET", "LATENT", "MASK", "MODEL", "STYLE_MODEL", "VAE", "UPSCALE_MODEL"]
for (const type of BACKEND_TYPES) {
setColor(type, "orange")
}
@@ -497,6 +497,11 @@ export default class ComfyApp {
(node as ComfyGraphNode).onDefaultQueueAction()
}
}
if (get(layoutState).attrs.queuePromptButtonRunWorkflow) {
this.queuePrompt(0, 1);
notify("Prompt queued.");
}
}
querySave() {

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

@@ -11,8 +11,11 @@
let target: IDragItem | null = null;
let node: LGraphNode | null = null;
let attrsChanged: Writable<boolean> | null = null;
let refreshPanel: Writable<number> = writable(0);
let attrsChanged: Writable<number> | null = null;
let refreshPropsPanel: Writable<number> | null
$: refreshPropsPanel = $layoutState.refreshPropsPanel;
$: if ($layoutState.currentSelection.length > 0) {
const targetId = $layoutState.currentSelection.slice(-1)[0]
@@ -50,7 +53,7 @@
let value = spec.defaultValue;
target.attrs[spec.name] = value;
if (spec.refreshPanelOnChange)
$refreshPanel += 1;
$refreshPropsPanel += 1;
}
}
}
@@ -218,9 +221,14 @@
}
}
function doRefreshPanel() {
console.warn("[ComfyProperties] doRefreshPanel")
$refreshPanel += 1;
function getWorkflowAttribute(spec: AttributesSpec): any {
let value = $layoutState.attrs[spec.name]
if (value == null)
value = spec.defaultValue
else if (spec.serialize)
value = spec.serialize(value)
console.debug("[ComfyProperties] getWorkflowAttribute", spec.name, value, spec, $layoutState.attrs[spec.name])
return value
}
function updateWorkflowAttribute(spec: AttributesSpec, value: any) {
@@ -236,6 +244,11 @@
if (spec.refreshPanelOnChange)
doRefreshPanel()
}
function doRefreshPanel() {
console.warn("[ComfyProperties] doRefreshPanel")
$refreshPropsPanel += 1;
}
</script>
<div class="props">
@@ -251,7 +264,7 @@
</div>
</div>
<div class="props-entries">
{#key $refreshPanel}
{#key $refreshPropsPanel}
{#each ALL_ATTRIBUTES as category(category.categoryName)}
<div class="category-name">
<span>
@@ -379,7 +392,7 @@
<div class="props-entry">
{#if spec.type === "string"}
<TextBox
value={$layoutState.attrs[spec.name] || spec.defaultValue}
value={getWorkflowAttribute(spec)}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
on:input={(e) => updateWorkflowAttribute(spec, e.detail)}
label={spec.name}
@@ -388,7 +401,7 @@
/>
{:else if spec.type === "boolean"}
<Checkbox
value={$layoutState.attrs[spec.name] || spec.defaultValue}
value={getWorkflowAttribute(spec)}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
disabled={!$uiState.uiUnlocked || !spec.editable}
label={spec.name}
@@ -396,7 +409,7 @@
{:else if spec.type === "number"}
<ComfyNumberProperty
name={spec.name}
value={$layoutState.attrs[spec.name] || spec.defaultValue}
value={getWorkflowAttribute(spec)}
step={spec.step || 1}
min={spec.min || -1024}
max={spec.max || 1024}
@@ -406,7 +419,7 @@
{:else if spec.type === "enum"}
<ComfyComboProperty
name={spec.name}
value={$layoutState.attrs[spec.name] || spec.defaultValue}
value={getWorkflowAttribute(spec)}
values={spec.values}
disabled={!$uiState.uiUnlocked || !spec.editable}
on:change={(e) => updateWorkflowAttribute(spec, e.detail)}