From 1053318fe95d34414fa8d047808d87ed974b5f3f Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Sat, 6 May 2023 17:42:12 -0500 Subject: [PATCH] Update mode for gallery, ranges for properties --- litegraph | 2 +- src/lib/ImageViewer.ts | 1 + src/lib/components/AccordionContainer.svelte | 4 ++ src/lib/components/ComfyApp.ts | 4 +- src/lib/components/ComfyNumberProperty.svelte | 4 +- src/lib/components/ComfyProperties.svelte | 28 ++++++++----- src/lib/nodes/ComfyActionNodes.ts | 25 +++++++++--- src/lib/nodes/ComfyGraphNode.ts | 4 +- src/lib/nodes/ComfyWidgetNodes.ts | 22 ++++++++--- src/lib/stores/layoutState.ts | 39 +++++++++++++++---- src/scss/ux.scss | 19 ++++++--- 11 files changed, 112 insertions(+), 40 deletions(-) diff --git a/litegraph b/litegraph index 6cbae97..cd24bc7 160000 --- a/litegraph +++ b/litegraph @@ -1 +1 @@ -Subproject commit 6cbae97b3c385dba16b9100352428af4d6219dae +Subproject commit cd24bc7356572250a5b3ec2320da1b8a73ddf2cc diff --git a/src/lib/ImageViewer.ts b/src/lib/ImageViewer.ts index 0965f7e..66a7467 100644 --- a/src/lib/ImageViewer.ts +++ b/src/lib/ImageViewer.ts @@ -50,6 +50,7 @@ export class ImageViewer { showModal(event: Event) { const source = (event.target || event.srcElement) as HTMLImageElement; const galleryElem = source.closest("div.block") + console.debug("[ImageViewer] showModal", event, source, galleryElem); if (!galleryElem || ImageViewer.all_gallery_buttons(galleryElem).length === 0) { console.error("No buttons found on gallery element!", galleryElem) return; diff --git a/src/lib/components/AccordionContainer.svelte b/src/lib/components/AccordionContainer.svelte index e57dd08..60f1c9b 100644 --- a/src/lib/components/AccordionContainer.svelte +++ b/src/lib/components/AccordionContainer.svelte @@ -163,6 +163,10 @@ } } + :global(.label-wrap > span:not(.icon)) { + color: var(--block-title-text-color); + } + .handle { cursor: grab; z-index: 99999; diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts index 080ec96..1808b6f 100644 --- a/src/lib/components/ComfyApp.ts +++ b/src/lib/components/ComfyApp.ts @@ -590,7 +590,7 @@ export default class ComfyApp { for (let i = 0; i < batchCount; i++) { for (const node of this.lGraph._nodes_in_order) { if ("beforeQueued" in node) { - (node as ComfyGraphNode).beforeQueued(); + (node as ComfyGraphNode).beforeQueued(tag); } } @@ -613,7 +613,7 @@ export default class ComfyApp { for (const n of p.workflow.nodes) { const node = this.lGraph.getNodeById(n.id); if ("afterQueued" in node) { - (node as ComfyGraphNode).afterQueued(p); + (node as ComfyGraphNode).afterQueued(p, tag); } } diff --git a/src/lib/components/ComfyNumberProperty.svelte b/src/lib/components/ComfyNumberProperty.svelte index d4451b5..08be69b 100644 --- a/src/lib/components/ComfyNumberProperty.svelte +++ b/src/lib/components/ComfyNumberProperty.svelte @@ -3,6 +3,8 @@ import { createEventDispatcher } from "svelte"; export let value: number = 0; + export let min: number = -1024 + export let max: number = 1024 export let step: number = 1; export let name: string = ""; export let disabled: boolean = false; @@ -27,7 +29,7 @@ diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte index 9956714..ce208ff 100644 --- a/src/lib/components/ComfyProperties.svelte +++ b/src/lib/components/ComfyProperties.svelte @@ -245,13 +245,15 @@ label={spec.name} /> {:else if spec.type === "number"} - updateAttribute(spec, target, e.detail)} - /> + updateAttribute(spec, target, e.detail)} + /> {:else if spec.type === "enum"} updateProperty(spec, e.detail)} /> @@ -321,7 +325,9 @@ updateVar(spec, e.detail)} /> @@ -358,7 +364,9 @@ updateWorkflowAttribute(spec, e.detail)} /> diff --git a/src/lib/nodes/ComfyActionNodes.ts b/src/lib/nodes/ComfyActionNodes.ts index 9ea6770..ad66194 100644 --- a/src/lib/nodes/ComfyActionNodes.ts +++ b/src/lib/nodes/ComfyActionNodes.ts @@ -4,6 +4,8 @@ import { Watch } from "@litegraph-ts/nodes-basic"; import type { SerializedPrompt } from "$lib/components/ComfyApp"; import { toast } from '@zerodevx/svelte-toast' import type { GalleryOutput } from "./ComfyWidgetNodes"; +import { get } from "svelte/store"; +import queueState from "$lib/stores/queueState"; export interface ComfyQueueEventsProperties extends Record { prompt: SerializedPrompt | null @@ -32,14 +34,27 @@ export class ComfyQueueEvents extends ComfyGraphNode { this.setOutputData(2, this.properties.prompt) } - override beforeQueued() { - this.setProperty("value", null) - this.triggerSlot(0, "bang") + private getActionParams(subgraph: string | null): any { + let queue = get(queueState) + let remaining = 0; + + if (typeof queue.queueRemaining === "number") + remaining = queue.queueRemaining + + return { + queueRemaining: remaining, + subgraph + } } - override afterQueued(p: SerializedPrompt) { + override beforeQueued(subgraph: string | null) { + this.setProperty("value", null) + this.triggerSlot(0, this.getActionParams(subgraph)) + } + + override afterQueued(p: SerializedPrompt, subgraph: string | null) { this.setProperty("value", p) - this.triggerSlot(1, "bang") + this.triggerSlot(1, this.getActionParams(subgraph)) } override onSerialize(o: SerializedLGraphNode) { diff --git a/src/lib/nodes/ComfyGraphNode.ts b/src/lib/nodes/ComfyGraphNode.ts index b722013..ba2b3c6 100644 --- a/src/lib/nodes/ComfyGraphNode.ts +++ b/src/lib/nodes/ComfyGraphNode.ts @@ -20,8 +20,8 @@ export type DefaultWidgetLayout = { export default class ComfyGraphNode extends LGraphNode { isBackendNode?: boolean; - beforeQueued?(): void; - afterQueued?(prompt: SerializedPrompt): void; + beforeQueued?(subgraph: string | null): void; + afterQueued?(prompt: SerializedPrompt, subgraph: string | null): void; onExecuted?(output: any): void; defaultWidgets?: DefaultWidgetLayout diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts index 782efd7..518ed99 100644 --- a/src/lib/nodes/ComfyWidgetNodes.ts +++ b/src/lib/nodes/ComfyWidgetNodes.ts @@ -1,4 +1,4 @@ -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 } 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 } from "@litegraph-ts/core"; import ComfyGraphNode from "./ComfyGraphNode"; import ComboWidget from "$lib/widgets/ComboWidget.svelte"; import RangeWidget from "$lib/widgets/RangeWidget.svelte"; @@ -397,13 +397,15 @@ export type GalleryOutputEntry = { } export interface ComfyGalleryProperties extends ComfyWidgetProperties { - index: number + index: number, + updateMode: "replace" | "append" } export class ComfyGalleryNode extends ComfyWidgetNode { override properties: ComfyGalleryProperties = { defaultValue: [], - index: 0 + index: 0, + updateMode: "replace" } static slotLayout: SlotLayout = { @@ -417,6 +419,10 @@ export class ComfyGalleryNode extends ComfyWidgetNode { ] } + static propertyLayout: PropertyLayout = [ + { name: "updateMode", defaultValue: "replace", type: "enum", options: { values: ["replace", "append"] } } + ] + override svelteComponentType = GalleryWidget override copyFromInputLink = false; override outputIndex = null; @@ -442,9 +448,13 @@ export class ComfyGalleryNode extends ComfyWidgetNode { const galleryItems: GradioFileData[] = this.convertItems(link.data) - // const currentValue = get(this.value) - // this.setValue(currentValue.concat(galleryItems)) - this.setValue(galleryItems) + if (this.properties.updateMode === "append") { + const currentValue = get(this.value) + this.setValue(currentValue.concat(galleryItems)) + } + else { + this.setValue(galleryItems) + } } this.setProperty("index", 0) } diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts index 4e6a204..3f059fe 100644 --- a/src/lib/stores/layoutState.ts +++ b/src/lib/stores/layoutState.ts @@ -106,11 +106,6 @@ export type Attributes = { */ title: string, - /* - * If false, hide the title. - */ - showTitle: boolean, - /* * List of classes to apply to the component. */ @@ -203,6 +198,21 @@ export type AttributesSpec = { */ values?: string[], + /* + * If `type` is "number", step for the slider + */ + step?: number, + + /* + * If `type` is "number", min for the slider + */ + min?: number, + + /* + * If `type` is "number", max for the slider + */ + max?: number, + /* * Valid `LGraphNode.type`s this property applies to if it's located in a node. * These are like "ui/button", "ui/slider". @@ -379,6 +389,8 @@ const ALL_ATTRIBUTES: AttributesSpecList = [ location: "nodeProps", editable: true, defaultValue: 0, + min: -2 ^ 16, + max: 2 ^ 16, validNodeTypes: ["ui/slider"], }, { @@ -387,6 +399,8 @@ const ALL_ATTRIBUTES: AttributesSpecList = [ location: "nodeProps", editable: true, defaultValue: 10, + min: -2 ^ 16, + max: 2 ^ 16, validNodeTypes: ["ui/slider"], }, { @@ -395,6 +409,8 @@ const ALL_ATTRIBUTES: AttributesSpecList = [ location: "nodeProps", editable: true, defaultValue: 1, + min: -2 ^ 16, + max: 2 ^ 16, validNodeTypes: ["ui/slider"], }, @@ -408,6 +424,17 @@ const ALL_ATTRIBUTES: AttributesSpecList = [ defaultValue: "bang" }, + // gallery + { + name: "updateMode", + type: "enum", + location: "nodeProps", + editable: true, + validNodeTypes: ["ui/gallery"], + values: ["replace", "append"], + defaultValue: "replace" + }, + // Workflow { name: "defaultSubgraph", @@ -544,7 +571,6 @@ function addContainer(parent: ContainerLayout | null, attrs: Partial attrsChanged: writable(false), attrs: { title: "Container", - showTitle: true, direction: "vertical", classes: "", containerVariant: "block", @@ -572,7 +598,6 @@ function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partia attrsChanged: writable(false), attrs: { title: widgetName, - showTitle: true, direction: "horizontal", classes: "", flexGrow: 100, diff --git a/src/scss/ux.scss b/src/scss/ux.scss index 443ac6a..ac94828 100644 --- a/src/scss/ux.scss +++ b/src/scss/ux.scss @@ -299,7 +299,10 @@ div.float { padding: var(--ae-accordion-vertical-padding) var(--ae-accordion-horizontal-padding); border-radius: var(--ae-panel-border-radius); line-height: var(--ae-accordion-line-height); - color: var(--ae-label-color); + + > span { + color: var(--ae-label-color) !important; + } /*pointer-events: none !important;*/ } .block.gradio-accordion .hide + .open.label-wrap { @@ -588,12 +591,16 @@ button.primary { border-radius: var(--ae-panel-border-radius) !important; background: var(--ae-input-bg-color) !important; color: var(--ae-input-color) !important; -} -button.secondary:hover, -button.primary:hover { - background: var(--ae-primary-color) !important; - color: var(--ae-input-bg-color) !important; + &:hover { + background: var(--ae-primary-color) !important; + color: var(--ae-input-bg-color) !important; + } + + &:active { + background: var(--ae-input-bg-color) !important; + color: var(--ae-input-color) !important; + } } /**********************/