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

Work

Browse Source
This commit is contained in:
space-nuko
2023-05-16 23:03:49 -05:00
parent 0626baba2e
commit af510fe843
20 changed files with 133 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,7 +63,7 @@
class:root-container={zIndex === 0}
class:is-executing={container.isNodeExecuting}
class:mobile={isMobile}
class:edit={edit}>
class:edit>
<Block>
{#if container.attrs.title && container.attrs.title !== ""}
<label for={String(container.id)} class={($uiState.uiUnlocked && $uiState.uiEditMode === "widgets") ? "edit-title-label" : ""}>
@@ -72,7 +72,7 @@
{/if}
<div class="v-pane"
class:empty={children.length === 0}
class:edit={edit}
class:edit
use:dndzone="{{
items: children,
flipDurationMs,
@@ -85,8 +85,9 @@
on:finalize="{handleFinalize}"
>
{#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
{@const hidden = isHidden(item)}
{@const hidden = isHidden(item) && !edit}
<div class="animation-wrapper"
class:edit
class:hidden={hidden}
animate:flip={{duration:flipDurationMs}}
style={item?.attrs?.style || ""}
@@ -119,17 +120,18 @@
.edit {
min-width: 200px;
margin: 0.2rem 0;
}
&:not(.edit) > .animation-wrapper.hidden {
.animation-wrapper.hidden:not(.edit) {
display: none;
}
&.empty {
border-width: 3px;
border-color: var(--color-grey-400);
border-color: var(--comfy-container-empty-border-color);
border-radius: 0;
background: var(--color-grey-300);
background: var(--comfy-container-empty-background-fill);
min-height: 100px;
border-style: dashed;
}
@@ -246,7 +248,7 @@
}
.handle-hidden {
background-color: #40404080;
background-color: #303030A0;
}
.handle-widget:hover {

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

@@ -404,7 +404,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", "UPSCALE_MODEL"]
const BACKEND_TYPES = ["CLIP", "CLIP_VISION", "CLIP_VISION_OUTPUT", "CONDITIONING", "CONTROL_NET", "IMAGE", "LATENT", "MASK", "MODEL", "STYLE_MODEL", "VAE", "UPSCALE_MODEL"]
for (const type of BACKEND_TYPES) {
setColor(type, "orange")
}

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

@@ -132,7 +132,7 @@
value = spec.defaultValue
else if (spec.serialize)
value = spec.serialize(value)
console.debug("[ComfyProperties] getAttribute", spec.name, value, target, spec)
// console.debug("[ComfyProperties] getAttribute", spec.name, value, target, spec)
return value
}
@@ -166,7 +166,7 @@
value = spec.defaultValue
else if (spec.serialize)
value = spec.serialize(value)
console.debug("[ComfyProperties] getProperty", spec, value, node)
// console.debug("[ComfyProperties] getProperty", spec, value, node)
return value
}
@@ -197,7 +197,7 @@
value = spec.defaultValue
else if (spec.serialize)
value = spec.serialize(value)
console.debug("[ComfyProperties] getVar", spec, value, node)
// console.debug("[ComfyProperties] getVar", spec, value, node)
return value
}
@@ -229,7 +229,7 @@
value = spec.defaultValue
else if (spec.serialize)
value = spec.serialize(value)
console.debug("[ComfyProperties] getWorkflowAttribute", spec.name, value, spec, $layoutState.attrs[spec.name])
// console.debug("[ComfyProperties] getWorkflowAttribute", spec.name, value, spec, $layoutState.attrs[spec.name])
return value
}
@@ -238,7 +238,7 @@
return;
const name = spec.name
console.warn("updateWorkflowAttribute", name, value)
console.warn("[ComfyProperties] updateWorkflowAttribute", name, value)
$layoutState.attrs[name] = value
$layoutState = $layoutState

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

@@ -41,8 +41,11 @@
$: {
canUngroup = false;
if ($selectionState.currentSelection.length === 1) {
const item = $layoutState.allItems[$selectionState.currentSelection[0]].dragItem;
canUngroup = item.type === "container"
const entry = $layoutState.allItems[$selectionState.currentSelection[0]]
if (entry != null) {
const item = entry.dragItem;
canUngroup = item.type === "container"
}
}
}
$: if (canUngroup) {
@@ -59,7 +62,11 @@
if (itemID == null)
return;
const item = $layoutState.allItems[$selectionState.currentSelection[0]].dragItem;
const entry = $layoutState.allItems[$selectionState.currentSelection[0]]
if (entry == null)
return
const item = entry.dragItem;
if(item.type !== "container")
return

6
src/lib/components/Container.svelte
View File

@@ -15,8 +15,8 @@
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 { isHidden } from "$lib/widgets/utils";
import type { Writable } from "svelte/store";
import { isHidden } from "$lib/widgets/utils";
export let container: ContainerLayout | null = null;
export let zIndex: number = 0;
@@ -34,7 +34,7 @@
</script>
{#if container}
{@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
{@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets"}
{@const dragDisabled = zIndex === 0 || $selectionState.currentSelection.length > 2 || !$uiState.uiUnlocked}
{#key $attrsChanged}
{#if edit || !isHidden(container)}

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

@@ -65,7 +65,7 @@
<Container {container} {classes} {zIndex} {showHandles} {isMobile} />
{/key}
{:else if widget && widget.node}
{@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
{@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets"}
{@const hidden = isHidden(widget)}
{@const hovered = $uiState.uiUnlocked && $selectionState.currentHovered.has(widget.id)}
{@const selected = $uiState.uiUnlocked && $selectionState.currentSelection.includes(widget.id)}
@@ -136,7 +136,5 @@
.edit {
border: 2px dashed var(--color-blue-400);
margin: 0.2em;
padding: 0.2em;
}
</style>