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>
<body>
<div id="app"/>
<div id="app-root"/>
<script type="module" src='/src/main-desktop.ts'></script>
</body>
</html>

2
mobile/index.html
View File

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

2
src/App.svelte
View File

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

1
src/AppMobile.svelte
View File

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

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

@@ -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")
}
</script>

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

@@ -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);

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

@@ -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;

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

@@ -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) => {

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

@@ -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<ComfyBoxImageMetad
selectedIndexWidget: ITextWidget;
modeWidget: IComboWidget;
imageWidth: Writable<number> = writable(0);
imageHeight: Writable<number> = 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<ComfyBoxImageMetad
}
override onExecute() {
this.setOutputData(0, get(this.value))
const value = get(this.value)
this.setOutputData(0, value)
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 }) {

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) {
if (this.changedEventName == null)
return;
// console.debug("[Widget] trigger changed", this, 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 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<ComfyBoxImageMetadata[]> | null = null;
let propsChanged: Writable<number> | null = null;
let option: number | null = null;
let imageWidth: number = 1;
let imageHeight: number = 1;
let imageWidth: Writable<number> = writable(0);
let imageHeight: Writable<number> = 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}
<Empty size="large" unpadded_box={true}><Image /></Empty>
@@ -181,8 +176,8 @@
root={""}
root_url={""}
on:select={onSelect}
bind:imageWidth
bind:imageHeight
bind:imageWidth={$imageWidth}
bind:imageHeight={$imageHeight}
bind:selected_image
/>
</div>

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

@@ -26,8 +26,6 @@
$: widget && setNodeValue(widget);
$: console.warn("IMGSIZE2!!!", $imgWidth, $imgHeight)
function setNodeValue(widget: WidgetLayout) {
if (widget) {
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 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;

3
src/main-mobile.ts
View File

@@ -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 }
})

2
src/scss/global.scss
View File

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