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

window object does weird things, rename root ID

Browse Source 
when used with (window as any).app, it uses the element with id #app instead
This commit is contained in:
space-nuko
2023-05-17 21:31:37 -05:00
parent 0cecbee21c
commit 967989494c
15 changed files with 51 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -19,7 +19,7 @@
} }
</script> </script>
<body> <body>
<div id="app"/> <div id="app-root"/>
<script type="module" src='/src/main-desktop.ts'></script> <script type="module" src='/src/main-desktop.ts'></script>
</body> </body>
</html> </html>

2
mobile/index.html
View File

@@ -8,7 +8,7 @@
<meta name="theme-color" content="#2196f3"> <meta name="theme-color" content="#2196f3">
</head> </head>
<body> <body>
<div id="app" class="mobile"> <div id="app-root" class="mobile">
<script type="module" src='/src/main-mobile.ts'></script> <script type="module" src='/src/main-mobile.ts'></script>
</body> </body>
</html> </html>

2
src/App.svelte
View File

@@ -6,7 +6,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
const app = new ComfyAppState(); export let app: ComfyAppState;
</script> </script>
<ComfyApp {app}/> <ComfyApp {app}/>

1
src/AppMobile.svelte
View File

@@ -53,7 +53,6 @@
onMount(async () => { onMount(async () => {
await app.setup(); await app.setup();
(window as any).app = app;
window.addEventListener("backbutton", onBackKeyDown, false); window.addEventListener("backbutton", onBackKeyDown, false);
window.addEventListener("popstate", onBackKeyDown, false); window.addEventListener("popstate", onBackKeyDown, false);
}); });

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

@@ -172,8 +172,6 @@
onMount(async () => { onMount(async () => {
await app.setup(); await app.setup();
(window as any).app = app;
(window as any).appPane = uiPane;
// await import('../../scss/ux.scss'); // await import('../../scss/ux.scss');
@@ -185,10 +183,10 @@
} }
$: if (uiTheme === "gradio-dark") { $: if (uiTheme === "gradio-dark") {
document.getElementById("app").classList.add("dark") document.getElementById("app-root").classList.add("dark")
} }
else { else {
document.getElementById("app").classList.remove("dark") document.getElementById("app-root").classList.remove("dark")
} }
</script> </script>

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

@@ -115,7 +115,7 @@ export default class ComfyApp {
this.setupColorScheme() 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.canvasEl = document.getElementById("graph-canvas") as HTMLCanvasElement;
this.lGraph = new ComfyGraph(); this.lGraph = new ComfyGraph();
this.lCanvas = new ComfyGraphCanvas(this, this.canvasEl); this.lCanvas = new ComfyGraphCanvas(this, this.canvasEl);

8
src/lib/components/gradio/gallery/Gallery.svelte
View File

@@ -21,8 +21,8 @@
object_fit: "cover", object_fit: "cover",
height: "auto" height: "auto"
}; };
export let imageWidth: number = 1; export let imageWidth: number = 0;
export let imageHeight: number = 1; export let imageHeight: number = 0;
const dispatch = createEventDispatcher<{ const dispatch = createEventDispatcher<{
select: SelectData; select: SelectData;
@@ -32,8 +32,8 @@
let was_reset: boolean = true; let was_reset: boolean = true;
$: if (selected_image == null || was_reset) { $: if (selected_image == null || was_reset) {
imageWidth = 1; imageWidth = 0;
imageHeight = 1; imageHeight = 0;
} }
$: was_reset = value == null || value.length == 0 ? true : was_reset; $: was_reset = value == null || value.length == 0 ? true : was_reset;

8
src/lib/components/gradio/image/StaticImage.svelte
View File

@@ -11,8 +11,8 @@
export let label: string | undefined = undefined; export let label: string | undefined = undefined;
export let show_label: boolean; export let show_label: boolean;
export let selectable: boolean = false; export let selectable: boolean = false;
export let imageWidth: number = 1; export let imageWidth: number = 0;
export let imageHeight: number = 1; export let imageHeight: number = 0;
let imageElem: HTMLImageElement | null = null; let imageElem: HTMLImageElement | null = null;
const dispatch = createEventDispatcher<{ const dispatch = createEventDispatcher<{
@@ -23,8 +23,8 @@
$: value && dispatch("change", value); $: value && dispatch("change", value);
$: if (value == null || !imageElem) { $: if (value == null || !imageElem) {
imageWidth = 1; imageWidth = 0;
imageHeight = 1; imageHeight = 0;
} }
const handle_click = (evt: MouseEvent) => { const handle_click = (evt: MouseEvent) => {

16
src/lib/nodes/widgets/ComfyGalleryNode.ts
View File

@@ -1,13 +1,13 @@
import { parseWhateverIntoImageMetadata, type ComfyBoxImageMetadata, type ComfyUploadImageType } from "$lib/utils"; 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 { 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 GalleryWidget from "$lib/widgets/GalleryWidget.svelte";
import type { ComfyWidgetProperties } from "./ComfyWidgetNode"; import type { ComfyWidgetProperties } from "./ComfyWidgetNode";
import ComfyWidgetNode from "./ComfyWidgetNode"; import ComfyWidgetNode from "./ComfyWidgetNode";
export interface ComfyGalleryProperties extends ComfyWidgetProperties { export interface ComfyGalleryProperties extends ComfyWidgetProperties {
index: number, index: number | null,
updateMode: "replace" | "append", updateMode: "replace" | "append",
} }
@@ -45,6 +45,9 @@ export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetad
selectedIndexWidget: ITextWidget; selectedIndexWidget: ITextWidget;
modeWidget: IComboWidget; modeWidget: IComboWidget;
imageWidth: Writable<number> = writable(0);
imageHeight: Writable<number> = writable(0);
constructor(name?: string) { constructor(name?: string) {
super(name, []) super(name, [])
this.selectedIndexWidget = this.addWidget("text", "Selected", String(this.properties.index), "index") this.selectedIndexWidget = this.addWidget("text", "Selected", String(this.properties.index), "index")
@@ -59,8 +62,15 @@ export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetad
} }
override onExecute() { override onExecute() {
this.setOutputData(0, get(this.value)) const value = get(this.value)
this.setOutputData(0, value)
this.setOutputData(1, this.properties.index) this.setOutputData(1, this.properties.index)
if (this.properties.index != null && value && value[this.properties.index] != null) {
const image = value[this.properties.index];
image.width = get(this.imageWidth)
image.height = get(this.imageHeight)
}
} }
override onAction(action: any, param: any, options: { action_call?: string }) { override onAction(action: any, param: any, options: { action_call?: string }) {

3
src/lib/nodes/widgets/ComfyWidgetNode.ts
View File

@@ -152,6 +152,9 @@ export default abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
} }
private triggerChangeEvent(value: any) { private triggerChangeEvent(value: any) {
if (this.changedEventName == null)
return;
// console.debug("[Widget] trigger changed", this, value) // console.debug("[Widget] trigger changed", this, value)
this.trigger(this.changedEventName, value) this.trigger(this.changedEventName, value)
} }

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

@@ -6,7 +6,7 @@
import { StaticImage } from "$lib/components/gradio/image"; import { StaticImage } from "$lib/components/gradio/image";
import type { Styles } from "@gradio/utils"; import type { Styles } from "@gradio/utils";
import type { WidgetLayout } from "$lib/stores/layoutState"; 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 { FileData as GradioFileData } from "@gradio/upload";
import type { SelectData as GradioSelectData } from "@gradio/utils"; import type { SelectData as GradioSelectData } from "@gradio/utils";
import { clamp, comfyBoxImageToComfyURL, type ComfyBoxImageMetadata } from "$lib/utils"; import { clamp, comfyBoxImageToComfyURL, type ComfyBoxImageMetadata } from "$lib/utils";
@@ -19,8 +19,8 @@
let nodeValue: Writable<ComfyBoxImageMetadata[]> | null = null; let nodeValue: Writable<ComfyBoxImageMetadata[]> | null = null;
let propsChanged: Writable<number> | null = null; let propsChanged: Writable<number> | null = null;
let option: number | null = null; let option: number | null = null;
let imageWidth: number = 1; let imageWidth: Writable<number> = writable(0);
let imageHeight: number = 1; let imageHeight: Writable<number> = writable(0);
let selected_image: number | null = null; let selected_image: number | null = null;
$: widget && setNodeValue(widget); $: widget && setNodeValue(widget);
@@ -30,6 +30,8 @@
node = widget.node as ComfyGalleryNode node = widget.node as ComfyGalleryNode
nodeValue = node.value; nodeValue = node.value;
propsChanged = node.propsChanged; propsChanged = node.propsChanged;
imageWidth = node.imageWidth
imageHeight = node.imageHeight
if ($nodeValue != null) { if ($nodeValue != null) {
if (node.properties.index < 0 || node.properties.index >= $nodeValue.length) { if (node.properties.index < 0 || node.properties.index >= $nodeValue.length) {
@@ -45,15 +47,6 @@
} }
let element: HTMLDivElement; let element: HTMLDivElement;
$: if (node) {
if (imageWidth > 1 || imageHeight > 1) {
node.imageSize = [imageWidth, imageHeight]
}
else {
node.imageSize = [1, 1]
}
}
let mobileLightbox = null; let mobileLightbox = null;
function showMobileLightbox(event: Event) { function showMobileLightbox(event: Event) {
@@ -138,9 +131,11 @@
$: if ($propsChanged > -1 && widget && $nodeValue) { $: if ($propsChanged > -1 && widget && $nodeValue) {
if (widget.attrs.variant === "image") { if (widget.attrs.variant === "image") {
selected_image = $nodeValue.length - 1
node.setProperty("index", selected_image) node.setProperty("index", selected_image)
} }
else {
node.setProperty("index", $nodeValue.length > 0 ? 0 : null)
}
} }
else { else {
node.setProperty("index", null) node.setProperty("index", null)
@@ -160,8 +155,8 @@
value={url} value={url}
show_label={widget.attrs.title != ""} show_label={widget.attrs.title != ""}
label={widget.attrs.title} label={widget.attrs.title}
bind:imageWidth bind:imageWidth={$imageWidth}
bind:imageHeight bind:imageHeight={$imageHeight}
/> />
{:else} {:else}
<Empty size="large" unpadded_box={true}><Image /></Empty> <Empty size="large" unpadded_box={true}><Image /></Empty>
@@ -181,8 +176,8 @@
root={""} root={""}
root_url={""} root_url={""}
on:select={onSelect} on:select={onSelect}
bind:imageWidth bind:imageWidth={$imageWidth}
bind:imageHeight bind:imageHeight={$imageHeight}
bind:selected_image bind:selected_image
/> />
</div> </div>

2
src/lib/widgets/ImageUploadWidget.svelte
View File

@@ -26,8 +26,6 @@
$: widget && setNodeValue(widget); $: widget && setNodeValue(widget);
$: console.warn("IMGSIZE2!!!", $imgWidth, $imgHeight)
function setNodeValue(widget: WidgetLayout) { function setNodeValue(widget: WidgetLayout) {
if (widget) { if (widget) {
node = widget.node as ComfyImageEditorNode node = widget.node as ComfyImageEditorNode

7
src/main-desktop.ts
View File

@@ -1,10 +1,15 @@
import ComfyApp from '$lib/components/ComfyApp';
import { configureLitegraph } from '$lib/init'; import { configureLitegraph } from '$lib/init';
import App from './App.svelte'; import App from './App.svelte';
configureLitegraph() configureLitegraph()
const comfyApp = new ComfyApp();
(window as any).app = comfyApp;
const app = new App({ const app = new App({
target: document.getElementById('app'), target: document.getElementById("app-root"),
props: { app: comfyApp }
}) })
export default app; export default app;

3
src/main-mobile.ts
View File

@@ -13,9 +13,10 @@ Framework7.use(Framework7Svelte);
configureLitegraph(true); configureLitegraph(true);
const comfyApp = new ComfyApp(); const comfyApp = new ComfyApp();
(window as any).app = comfyApp;
const app = new AppMobile({ const app = new AppMobile({
target: document.getElementById('app'), target: document.getElementById("app-root"),
props: { app: comfyApp } props: { app: comfyApp }
}) })

2
src/scss/global.scss
View File

@@ -8,7 +8,7 @@ body {
overscroll-behavior-y: contain; overscroll-behavior-y: contain;
} }
#app { #app-root {
background: var(--body-background-fill); background: var(--body-background-fill);
} }