From 967989494cfebf2af03a8d8476fdff9e0c6a8a85 Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Wed, 17 May 2023 21:31:37 -0500 Subject: [PATCH] window object does weird things, rename root ID when used with (window as any).app, it uses the element with id #app instead --- index.html | 2 +- mobile/index.html | 2 +- src/App.svelte | 2 +- src/AppMobile.svelte | 1 - src/lib/components/ComfyApp.svelte | 6 ++-- src/lib/components/ComfyApp.ts | 2 +- .../components/gradio/gallery/Gallery.svelte | 8 ++--- .../gradio/image/StaticImage.svelte | 8 ++--- src/lib/nodes/widgets/ComfyGalleryNode.ts | 16 ++++++++-- src/lib/nodes/widgets/ComfyWidgetNode.ts | 3 ++ src/lib/widgets/GalleryWidget.svelte | 29 ++++++++----------- src/lib/widgets/ImageUploadWidget.svelte | 2 -- src/main-desktop.ts | 7 ++++- src/main-mobile.ts | 3 +- src/scss/global.scss | 2 +- 15 files changed, 51 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index 97ded2b..28202f3 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@ } -
+
diff --git a/mobile/index.html b/mobile/index.html index b206f87..b10c4cf 100644 --- a/mobile/index.html +++ b/mobile/index.html @@ -8,7 +8,7 @@ -
+
diff --git a/src/App.svelte b/src/App.svelte index 821d589..11b98f9 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -6,7 +6,7 @@ import { onMount } from 'svelte'; - const app = new ComfyAppState(); + export let app: ComfyAppState; diff --git a/src/AppMobile.svelte b/src/AppMobile.svelte index 8134b60..a120c51 100644 --- a/src/AppMobile.svelte +++ b/src/AppMobile.svelte @@ -53,7 +53,6 @@ onMount(async () => { await app.setup(); - (window as any).app = app; window.addEventListener("backbutton", onBackKeyDown, false); window.addEventListener("popstate", onBackKeyDown, false); }); diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte index e7f1d87..7ded4ef 100644 --- a/src/lib/components/ComfyApp.svelte +++ b/src/lib/components/ComfyApp.svelte @@ -172,8 +172,6 @@ onMount(async () => { await app.setup(); - (window as any).app = app; - (window as any).appPane = uiPane; // await import('../../scss/ux.scss'); @@ -185,10 +183,10 @@ } $: if (uiTheme === "gradio-dark") { - document.getElementById("app").classList.add("dark") + document.getElementById("app-root").classList.add("dark") } else { - document.getElementById("app").classList.remove("dark") + document.getElementById("app-root").classList.remove("dark") } diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts index f842a6e..2793de8 100644 --- a/src/lib/components/ComfyApp.ts +++ b/src/lib/components/ComfyApp.ts @@ -115,7 +115,7 @@ export default class ComfyApp { this.setupColorScheme() - this.rootEl = document.getElementById("app") as HTMLDivElement; + this.rootEl = document.getElementById("app-root") as HTMLDivElement; this.canvasEl = document.getElementById("graph-canvas") as HTMLCanvasElement; this.lGraph = new ComfyGraph(); this.lCanvas = new ComfyGraphCanvas(this, this.canvasEl); diff --git a/src/lib/components/gradio/gallery/Gallery.svelte b/src/lib/components/gradio/gallery/Gallery.svelte index 5643dd0..f70705f 100644 --- a/src/lib/components/gradio/gallery/Gallery.svelte +++ b/src/lib/components/gradio/gallery/Gallery.svelte @@ -21,8 +21,8 @@ object_fit: "cover", height: "auto" }; - export let imageWidth: number = 1; - export let imageHeight: number = 1; + export let imageWidth: number = 0; + export let imageHeight: number = 0; const dispatch = createEventDispatcher<{ select: SelectData; @@ -32,8 +32,8 @@ let was_reset: boolean = true; $: if (selected_image == null || was_reset) { - imageWidth = 1; - imageHeight = 1; + imageWidth = 0; + imageHeight = 0; } $: was_reset = value == null || value.length == 0 ? true : was_reset; diff --git a/src/lib/components/gradio/image/StaticImage.svelte b/src/lib/components/gradio/image/StaticImage.svelte index 3780fcf..eda153d 100644 --- a/src/lib/components/gradio/image/StaticImage.svelte +++ b/src/lib/components/gradio/image/StaticImage.svelte @@ -11,8 +11,8 @@ export let label: string | undefined = undefined; export let show_label: boolean; export let selectable: boolean = false; - export let imageWidth: number = 1; - export let imageHeight: number = 1; + export let imageWidth: number = 0; + export let imageHeight: number = 0; let imageElem: HTMLImageElement | null = null; const dispatch = createEventDispatcher<{ @@ -23,8 +23,8 @@ $: value && dispatch("change", value); $: if (value == null || !imageElem) { - imageWidth = 1; - imageHeight = 1; + imageWidth = 0; + imageHeight = 0; } const handle_click = (evt: MouseEvent) => { diff --git a/src/lib/nodes/widgets/ComfyGalleryNode.ts b/src/lib/nodes/widgets/ComfyGalleryNode.ts index 632b4f9..578e990 100644 --- a/src/lib/nodes/widgets/ComfyGalleryNode.ts +++ b/src/lib/nodes/widgets/ComfyGalleryNode.ts @@ -1,13 +1,13 @@ import { parseWhateverIntoImageMetadata, type ComfyBoxImageMetadata, type ComfyUploadImageType } from "$lib/utils"; import { BuiltInSlotType, LiteGraph, type IComboWidget, type ITextWidget, type PropertyLayout, type SlotLayout } from "@litegraph-ts/core"; -import { get } from "svelte/store"; +import { get, writable, type Writable } from "svelte/store"; import GalleryWidget from "$lib/widgets/GalleryWidget.svelte"; import type { ComfyWidgetProperties } from "./ComfyWidgetNode"; import ComfyWidgetNode from "./ComfyWidgetNode"; export interface ComfyGalleryProperties extends ComfyWidgetProperties { - index: number, + index: number | null, updateMode: "replace" | "append", } @@ -45,6 +45,9 @@ export default class ComfyGalleryNode extends ComfyWidgetNode = writable(0); + imageHeight: Writable = writable(0); + constructor(name?: string) { super(name, []) this.selectedIndexWidget = this.addWidget("text", "Selected", String(this.properties.index), "index") @@ -59,8 +62,15 @@ export default class ComfyGalleryNode extends ComfyWidgetNode extends ComfyGraphNode { } private triggerChangeEvent(value: any) { + if (this.changedEventName == null) + return; + // console.debug("[Widget] trigger changed", this, value) this.trigger(this.changedEventName, value) } diff --git a/src/lib/widgets/GalleryWidget.svelte b/src/lib/widgets/GalleryWidget.svelte index 1c38c39..72361ce 100644 --- a/src/lib/widgets/GalleryWidget.svelte +++ b/src/lib/widgets/GalleryWidget.svelte @@ -6,7 +6,7 @@ import { StaticImage } from "$lib/components/gradio/image"; import type { Styles } from "@gradio/utils"; import type { WidgetLayout } from "$lib/stores/layoutState"; - import type { Writable } from "svelte/store"; + import { writable, type Writable } from "svelte/store"; import type { FileData as GradioFileData } from "@gradio/upload"; import type { SelectData as GradioSelectData } from "@gradio/utils"; import { clamp, comfyBoxImageToComfyURL, type ComfyBoxImageMetadata } from "$lib/utils"; @@ -19,8 +19,8 @@ let nodeValue: Writable | null = null; let propsChanged: Writable | null = null; let option: number | null = null; - let imageWidth: number = 1; - let imageHeight: number = 1; + let imageWidth: Writable = writable(0); + let imageHeight: Writable = writable(0); let selected_image: number | null = null; $: widget && setNodeValue(widget); @@ -30,6 +30,8 @@ node = widget.node as ComfyGalleryNode nodeValue = node.value; propsChanged = node.propsChanged; + imageWidth = node.imageWidth + imageHeight = node.imageHeight if ($nodeValue != null) { if (node.properties.index < 0 || node.properties.index >= $nodeValue.length) { @@ -45,15 +47,6 @@ } let element: HTMLDivElement; - $: if (node) { - if (imageWidth > 1 || imageHeight > 1) { - node.imageSize = [imageWidth, imageHeight] - } - else { - node.imageSize = [1, 1] - } - } - let mobileLightbox = null; function showMobileLightbox(event: Event) { @@ -138,9 +131,11 @@ $: if ($propsChanged > -1 && widget && $nodeValue) { if (widget.attrs.variant === "image") { - selected_image = $nodeValue.length - 1 node.setProperty("index", selected_image) } + else { + node.setProperty("index", $nodeValue.length > 0 ? 0 : null) + } } else { node.setProperty("index", null) @@ -160,8 +155,8 @@ value={url} show_label={widget.attrs.title != ""} label={widget.attrs.title} - bind:imageWidth - bind:imageHeight + bind:imageWidth={$imageWidth} + bind:imageHeight={$imageHeight} /> {:else} @@ -181,8 +176,8 @@ root={""} root_url={""} on:select={onSelect} - bind:imageWidth - bind:imageHeight + bind:imageWidth={$imageWidth} + bind:imageHeight={$imageHeight} bind:selected_image />
diff --git a/src/lib/widgets/ImageUploadWidget.svelte b/src/lib/widgets/ImageUploadWidget.svelte index 1318211..3f448a2 100644 --- a/src/lib/widgets/ImageUploadWidget.svelte +++ b/src/lib/widgets/ImageUploadWidget.svelte @@ -26,8 +26,6 @@ $: widget && setNodeValue(widget); - $: console.warn("IMGSIZE2!!!", $imgWidth, $imgHeight) - function setNodeValue(widget: WidgetLayout) { if (widget) { node = widget.node as ComfyImageEditorNode diff --git a/src/main-desktop.ts b/src/main-desktop.ts index 15f8e17..f2b74ce 100644 --- a/src/main-desktop.ts +++ b/src/main-desktop.ts @@ -1,10 +1,15 @@ +import ComfyApp from '$lib/components/ComfyApp'; import { configureLitegraph } from '$lib/init'; import App from './App.svelte'; configureLitegraph() +const comfyApp = new ComfyApp(); +(window as any).app = comfyApp; + const app = new App({ - target: document.getElementById('app'), + target: document.getElementById("app-root"), + props: { app: comfyApp } }) export default app; diff --git a/src/main-mobile.ts b/src/main-mobile.ts index f306861..560c795 100644 --- a/src/main-mobile.ts +++ b/src/main-mobile.ts @@ -13,9 +13,10 @@ Framework7.use(Framework7Svelte); configureLitegraph(true); const comfyApp = new ComfyApp(); +(window as any).app = comfyApp; const app = new AppMobile({ - target: document.getElementById('app'), + target: document.getElementById("app-root"), props: { app: comfyApp } }) diff --git a/src/scss/global.scss b/src/scss/global.scss index ca7e934..ae2abd8 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -8,7 +8,7 @@ body { overscroll-behavior-y: contain; } -#app { +#app-root { background: var(--body-background-fill); }