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

Checkbox widget

Browse Source
This commit is contained in:
space-nuko
2023-05-06 19:53:33 -05:00
parent 0cf675f847
commit 707d6174dd
10 changed files with 210 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
litegraph

Submodule litegraph updated: cd24bc7356...39b040a0b1

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

@@ -439,7 +439,7 @@ export default class ComfyApp {
const n = workflow.nodes.find((n) => n.id === node_.id);
if (!node_.isBackendNode) {
console.debug("Not serializing node: ", node_.type)
// console.debug("Not serializing node: ", node_.type)
continue;
}
@@ -564,8 +564,8 @@ export default class ComfyApp {
}
}
console.warn({ workflow, output })
console.warn(promptToGraphVis({ workflow, output }))
// console.debug({ workflow, output })
// console.debug(promptToGraphVis({ workflow, output }))
return { workflow, output };
}

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

@@ -99,12 +99,17 @@
if (spec.canShow)
return spec.canShow(widget);
if (widget.type === "widget" && spec.validNodeTypes) {
if (spec.validNodeTypes) {
if (widget.type === "widget") {
const node = (widget as WidgetLayout).node
if (!node)
return false;
return spec.validNodeTypes.indexOf(node.type) !== -1;
}
else if (widget.type === "container") {
return false;
}
}
return spec.name in widget.attrs
}

8
src/lib/nodes/ComfyActionNodes.ts
View File

@@ -112,7 +112,7 @@ export class ComfyCopyAction extends ComfyGraphNode {
{ name: "copy", type: BuiltInSlotType.ACTION }
],
outputs: [
{ name: "out", type: "*" }
{ name: "out", type: BuiltInSlotType.EVENT }
],
}
@@ -130,13 +130,15 @@ export class ComfyCopyAction extends ComfyGraphNode {
}
override onExecute() {
if (this.getInputLink(0))
this.setProperty("value", this.getInputData(0))
}
override onAction(action: any, param: any) {
if (action === "copy") {
this.setProperty("value", this.getInputData(0))
this.setOutputData(0, this.properties.value)
console.log("setData", this.properties.value)
this.triggerSlot(0, this.properties.value)
}
};
}

48
src/lib/nodes/ComfyImageCacheNode.ts
View File

@@ -1,4 +1,4 @@
import { BuiltInSlotType, LiteGraph, type ITextWidget, type SlotLayout, clamp } from "@litegraph-ts/core";
import { BuiltInSlotType, LiteGraph, type ITextWidget, type SlotLayout, clamp, type PropertyLayout, type IComboWidget } from "@litegraph-ts/core";
import ComfyGraphNode from "./ComfyGraphNode";
import type { GalleryOutput } from "./ComfyWidgetNodes";
@@ -6,7 +6,8 @@ export interface ComfyImageCacheNodeProperties extends Record<any, any> {
images: GalleryOutput | null,
index: number,
filenames: Record<number, { filename: string | null, status: ImageCacheState }>,
genNumber: number
genNumber: number,
updateMode: "replace" | "append"
}
type ImageCacheState = "none" | "uploading" | "failed" | "cached"
@@ -20,7 +21,8 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
images: null,
index: 0,
filenames: {},
genNumber: 0
genNumber: 0,
updateMode: "replace"
}
static slotLayout: SlotLayout = {
@@ -36,11 +38,15 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
]
}
static propertyLayout: PropertyLayout = [
{ name: "updateMode", defaultValue: "replace", type: "enum", options: { values: ["replace", "append"] } }
]
private _uploadPromise: Promise<void> | null = null;
private _state: ImageCacheState = "none"
stateWidget: ITextWidget;
filenameWidget: ITextWidget;
modeWidget: IComboWidget;
constructor(name?: string) {
super(name)
@@ -57,6 +63,14 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
""
);
this.filenameWidget.disabled = true;
this.modeWidget = this.addWidget<IComboWidget>(
"combo",
"Mode",
this.properties.updateMode,
null,
{ property: "updateMode", values: ["replace", "append"] }
);
}
override onPropertyChanged(property: string, value: any, prevValue?: any) {
@@ -66,13 +80,23 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
else
this.properties.index = 0
}
else if (property === "updateMode") {
this.modeWidget.value = value;
}
this.updateWidgets()
}
private updateWidgets() {
if (this.properties.filenames && this.properties.images) {
const fileCount = this.properties.images.images.length;
const cachedCount = Object.keys(this.properties.filenames).length
console.warn(cachedCount, this.properties.filenames)
this.filenameWidget.value = `${fileCount} files, ${cachedCount} cached`
}
else {
this.filenameWidget.value = `No files cached`
}
}
override onExecute() {
@@ -185,6 +209,7 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
this.setProperty("images", null)
this.setProperty("filenames", {})
this.setProperty("index", 0)
this.updateWidgets();
return
}
@@ -192,11 +217,24 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
if (link.data && "images" in link.data) {
this.setProperty("genNumber", this.properties.genNumber + 1)
const output = link.data as GalleryOutput;
if (this.properties.updateMode === "append" && this.properties.images != null) {
const newImages = this.properties.images.images.concat(output.images)
this.properties.images.images = newImages
this.setProperty("images", this.properties.images)
}
else {
this.setProperty("images", link.data as GalleryOutput)
this.setProperty("filenames", {})
console.debug("[ComfyImageCacheNode] Received output!", link.data)
}
console.debug("[ComfyImageCacheNode] Received output!", output, this.properties.updateMode, this.properties.images)
this.setIndex(0, true)
}
this.updateWidgets();
}
}

86
src/lib/nodes/ComfyWidgetNodes.ts
View File

@@ -1,10 +1,11 @@
import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, LGraph, type INodeInputSlot, type ITextWidget, type INodeOutputSlot, type SerializedLGraphNode, BuiltInSlotType, type PropertyLayout } from "@litegraph-ts/core";
import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, LGraph, type INodeInputSlot, type ITextWidget, type INodeOutputSlot, type SerializedLGraphNode, BuiltInSlotType, type PropertyLayout, type IComboWidget } from "@litegraph-ts/core";
import ComfyGraphNode from "./ComfyGraphNode";
import ComboWidget from "$lib/widgets/ComboWidget.svelte";
import RangeWidget from "$lib/widgets/RangeWidget.svelte";
import TextWidget from "$lib/widgets/TextWidget.svelte";
import GalleryWidget from "$lib/widgets/GalleryWidget.svelte";
import ButtonWidget from "$lib/widgets/ButtonWidget.svelte";
import CheckboxWidget from "$lib/widgets/CheckboxWidget.svelte";
import type { SvelteComponentDev } from "svelte/internal";
import { Watch } from "@litegraph-ts/nodes-basic";
import type IComfyInputSlot from "$lib/IComfyInputSlot";
@@ -48,8 +49,11 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
override isBackendNode = false;
override serialize_widgets = true;
outputIndex: number | null = 0;
// input slots
inputIndex: number = 0;
// output slots
outputIndex: number | null = 0;
changedIndex: number | null = 1;
displayWidget: ITextWidget;
@@ -94,7 +98,7 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
if (this.outputIndex !== null && this.outputs.length >= this.outputIndex) {
this.setOutputData(this.outputIndex, get(this.value))
}
if (this.changedIndex !== null & this.outputs.length >= this.changedIndex) {
if (this.changedIndex !== null && this.outputs.length >= this.changedIndex) {
const changedOutput = this.outputs[this.changedIndex]
if (changedOutput.type === BuiltInSlotType.EVENT)
this.triggerSlot(this.changedIndex, "changed")
@@ -118,10 +122,8 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
if (this.copyFromInputLink) {
if (this.inputs.length >= this.inputIndex) {
const data = this.getInputData(this.inputIndex)
if (data) { // TODO can "null" be a legitimate value here?
if (data != null) { // TODO can "null" be a legitimate value here?
this.setValue(data)
const input = this.getInputLink(this.inputIndex)
input.data = null;
}
}
}
@@ -231,7 +233,8 @@ export class ComfySliderNode extends ComfyWidgetNode<number> {
static slotLayout: SlotLayout = {
inputs: [
{ name: "value", type: "number" }
{ name: "value", type: "number" },
{ name: "store", type: BuiltInSlotType.ACTION }
],
outputs: [
{ name: "value", type: "number" },
@@ -250,6 +253,11 @@ export class ComfySliderNode extends ComfyWidgetNode<number> {
super(name, 0)
}
override onAction(action: any, param: any) {
if (action === "store" && typeof param === "number")
this.setValue(param)
}
override setValue(value: any) {
if (typeof value !== "number")
return;
@@ -283,7 +291,8 @@ export class ComfyComboNode extends ComfyWidgetNode<string> {
static slotLayout: SlotLayout = {
inputs: [
{ name: "value", type: "string" }
{ name: "value", type: "string" },
{ name: "store", type: BuiltInSlotType.ACTION }
],
outputs: [
{ name: "value", type: "string" },
@@ -323,6 +332,11 @@ export class ComfyComboNode extends ComfyWidgetNode<string> {
return true;
}
override onAction(action: any, param: any) {
if (action === "store" && typeof param === "string")
this.setValue(param)
}
override setValue(value: any) {
if (typeof value !== "string" || this.properties.values.indexOf(value) === -1)
return;
@@ -358,7 +372,8 @@ export class ComfyTextNode extends ComfyWidgetNode<string> {
static slotLayout: SlotLayout = {
inputs: [
{ name: "value", type: "string" }
{ name: "value", type: "string" },
{ name: "store", type: BuiltInSlotType.ACTION }
],
outputs: [
{ name: "value", type: "string" },
@@ -372,6 +387,11 @@ export class ComfyTextNode extends ComfyWidgetNode<string> {
super(name, "")
}
override onAction(action: any, param: any) {
if (action === "store")
this.setValue(param)
}
override setValue(value: any) {
super.setValue(`${value}`)
}
@@ -428,15 +448,24 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
override outputIndex = null;
override changedIndex = null;
modeWidget: IComboWidget;
constructor(name?: string) {
super(name, [])
this.modeWidget = this.addWidget("combo", "Mode", this.properties.updateMode, null, { property: "updateMode", values: ["replace", "append"] })
}
override onPropertyChanged(property: any, value: any) {
if (property === "updateMode") {
this.modeWidget.value = value;
}
}
override onExecute() {
this.setOutputData(0, this.properties.index)
}
override onAction(action: any) {
override onAction(action: any, param: any, options: { action_call?: string }) {
if (action === "clear") {
this.setValue([])
}
@@ -539,3 +568,40 @@ LiteGraph.registerNodeType({
desc: "Button that triggers an event when clicked",
type: "ui/button"
})
export interface ComfyCheckboxProperties extends ComfyWidgetProperties {
}
export class ComfyCheckboxNode extends ComfyWidgetNode<boolean> {
override properties: ComfyCheckboxProperties = {
defaultValue: false,
}
static slotLayout: SlotLayout = {
outputs: [
{ name: "value", type: "boolean" },
{ name: "changed", type: BuiltInSlotType.EVENT },
]
}
override svelteComponentType = CheckboxWidget;
override setValue(value: any) {
value = Boolean(value)
const changed = value != get(this.value);
super.setValue(Boolean(value))
if (changed)
this.triggerSlot(1)
}
constructor(name?: string) {
super(name, false)
}
}
LiteGraph.registerNodeType({
class: ComfyCheckboxNode,
title: "UI.Checkbox",
desc: "Checkbox that stores a boolean value",
type: "ui/checkbox"
})

55
src/lib/widgets/CheckboxWidget.svelte Normal file
View File

@@ -0,0 +1,55 @@
<script lang="ts">
import type { ComfyCheckboxNode } from "$lib/nodes/ComfyWidgetNodes";
import { type WidgetLayout } from "$lib/stores/layoutState";
import { Block } from "@gradio/atoms";
import { Checkbox } from "@gradio/form";
import { get, type Writable, writable } from "svelte/store";
export let widget: WidgetLayout | null = null;
let node: ComfyCheckboxNode | null = null;
let nodeValue: Writable<boolean> | null = null;
let attrsChanged: Writable<boolean> | null = null;
$: widget && setNodeValue(widget);
function setNodeValue(widget: WidgetLayout) {
if (widget) {
node = widget.node as ComfyCheckboxNode
nodeValue = node.value;
attrsChanged = widget.attrsChanged;
}
};
</script>
<div class="wrapper gradio-checkbox">
<div class="inner">
{#key $attrsChanged}
{#if node !== null}
<Block>
<Checkbox disabled={widget.attrs.disabled} label={widget.attrs.title} bind:value={$nodeValue} />
</Block>
{/if}
{/key}
</div>
</div>
<style lang="scss">
.wrapper {
display: flex;
flex-direction: row;
align-items: flex-end;
height: 100%;
> .inner {
padding: 2px;
width: 100%;
display: flex;
flex-direction: row;
height: min-content;
:global(> label) {
height: 100%;
}
}
}
</style>

5
src/lib/widgets/ComboWidget.svelte
View File

@@ -114,6 +114,11 @@
}
}
:global(.svelte-select) {
width: auto;
max-width: 30rem;
}
:global(.svelte-select-list) {
z-index: var(--layer-top) !important;
}

7
src/lib/widgets/GalleryWidget.svelte
View File

@@ -73,10 +73,13 @@
{/if}
</div>
<style>
<style lang="scss">
.wrapper {
padding: 2px;
width: 100%;
:global(> .block) {
border-radius: 0px !important;
}
}
.padding {

4
src/scss/ux.scss
View File

@@ -419,6 +419,10 @@ div.gradio-row>.form{
box-shadow: none !important;
}
.gradio-checkbox > .inner > .block {
background-color: var(--ae-input-bg-color) !important;
}
.wrapper.gradio-textbox textarea {
overflow-y: scroll;
box-sizing: border-box;