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

Node hidden property

Browse Source
This commit is contained in:
space-nuko
2023-05-05 02:11:07 -05:00
parent 7f64b743a7
commit 8fa267982e
7 changed files with 230 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,17 +1,20 @@
<script lang="ts">
import { Block, BlockTitle } from "@gradio/atoms";
import { TextBox, Checkbox } from "@gradio/form";
import layoutState, { ALL_ATTRIBUTES } from "$lib/stores/layoutState"
import { LGraphNode } from "@litegraph-ts/core"
import layoutState, { type IDragItem, type WidgetLayout, ALL_ATTRIBUTES } from "$lib/stores/layoutState"
import { get } from "svelte/store"
import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
import type { ComfyWidgetNode } from "$lib/nodes";
let target: IDragItem | null = null;
let node: LGraphNode | null = null;
$: if ($layoutState.currentSelection.length > 0) {
const targetId = $layoutState.currentSelection.slice(-1)
const targetId = $layoutState.currentSelection.slice(-1)[0]
target = $layoutState.allItems[targetId].dragItem
if (target.type === "widget") {
node = target.node
node = (target as WidgetLayout).node
}
else {
node = null;
@@ -22,19 +25,15 @@
node = null;
}
const _entries = [
{ name: "title" },
{ name: "showTitle" },
{ name: "direction" },
{ name: "classes" },
]
let targetType: string = "???"
function getTargetType(): string {
if (node)
return "Node"
else if (target?.type === "container")
"Group"
return "???"
$: {
if (node != null)
targetType = node.type || "Widget"
else if (target)
targetType = "group"
else
targetType = "???"
}
function updateAttribute(entry: any, value: any) {
@@ -45,8 +44,23 @@
target.attrs[name] = value
target.attrsChanged.set(!get(target.attrsChanged))
if (node) {
node.propsChanged.set(!get(node.propsChanged))
if (node && "propsChanged" in node) {
const comfyNode = node as ComfyWidgetNode
comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
}
}
}
function updateProperty(entry: any, value: any) {
if (node) {
const name = entry.name
console.warn("updateProperty", name, value)
node.properties[name] = value;
if ("propsChanged" in node) {
const comfyNode = node as ComfyWidgetNode
comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
}
}
}
@@ -58,7 +72,7 @@
<div class="target-name">
<span>
<span class="title">{target.attrs.title}</span>
<span class="type">({getTargetType()})</span>
<span class="type">({targetType})</span>
</span>
</div>
</div>
@@ -66,12 +80,11 @@
{#each ALL_ATTRIBUTES as category(category.categoryName)}
<div class="category-name">
<span>
<span class="title">{target.attrs.title}</span>
<span class="title">{category.categoryName}</span>
</span>
</div>
{#each category.specs as spec(spec.name)}
{@const has = spec.name in target.attrs}
{#if has}
{#if spec.location === "widget" && spec.name in target.attrs}
<div class="props-entry">
{#if spec.type === "string"}
<TextBox
@@ -86,6 +99,16 @@
on:change={(e) => updateAttribute(spec, e.detail)}
label={spec.name}
/>
{:else if spec.type === "number"}
<label class="number-wrapper">
<BlockTitle>{spec.name}</BlockTitle>
<input
type="number"
value={target.attrs[spec.name]}
step={1}
on:change={(e) => updateAttribute(spec, e.currentTarget.valueAsNumber)}
/>
</label>
{:else if spec.type === "enum"}
<label class="select-wrapper">
<BlockTitle>{spec.name}</BlockTitle>
@@ -103,6 +126,52 @@
</label>
{/if}
</div>
{:else if node}
{#if spec.location === "nodeProps" && spec.name in node.properties}
<div class="props-entry">
{#if spec.type === "string"}
<TextBox
value={node.properties[spec.name]}
on:change={(e) => updateProperty(spec, e.detail)}
label={spec.name}
max_lines={1}
/>
{:else if spec.type === "boolean"}
<Checkbox
value={node.properties[spec.name]}
on:change={(e) => updateProperty(spec, e.detail)}
label={spec.name}
/>
{:else if spec.type === "number"}
<label class="number-wrapper">
<BlockTitle>{spec.name}</BlockTitle>
<div class="number">
<input
type="number"
value={node.properties[spec.name]}
step={1}
on:change={(e) => updateProperty(spec, e.currentTarget.valueAsNumber)}
/>
</div>
</label>
{:else if spec.type === "enum"}
<label class="select-wrapper">
<BlockTitle>{spec.name}</BlockTitle>
<div class="select">
<select
value={node.properties[spec.name]}
on:change={(e) => updateProperty(spec, e.currentTarget.options[e.currentTarget.selectedIndex].value)}>
{#each spec.values as value}
<option value={value}>
{value}
</option>
{/each}
</select>
</div>
</label>
{/if}
</div>
{/if}
{/if}
{/each}
{/each}
@@ -112,7 +181,9 @@
<style lang="scss">
.props-entry {
padding: 0.5rem 0.5rem 0 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: row;
}
@@ -120,6 +191,7 @@
.target-name {
border-color: var(--neutral-400);
background: var(--neutral-300);
padding: 0.8rem 1.0rem;
.title {
font-weight: bold;
@@ -127,19 +199,31 @@
}
.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);
padding: 0.4rem 1.0rem;
.type {
color: var(--neutral-500);
}
}
.number-wrapper {
width: 100%;
.number {
width: 100%;
input {
width: 100%
}
}
}
.select-wrapper {
width: 100%;