diff --git a/src/scripts/app.ts b/src/scripts/app.ts index 4790c0c07..a3d00f54a 100644 --- a/src/scripts/app.ts +++ b/src/scripts/app.ts @@ -5,7 +5,7 @@ import { api } from "./api"; import { defaultGraph } from "./defaultGraph.js"; import { getPngMetadata, getWebpMetadata, importA1111, getLatentMetadata } from "./pnginfo"; import { addDomClippingSetting } from "./domWidget"; -import { createImageHost, calculateImageGrid } from "./ui/imagePreview.js" +import { createImageHost, calculateImageGrid } from "./ui/imagePreview" import type { ComfyExtension } from "/types/comfy"; import type { IWidget, LGraph, LGraphCanvas, LGraphNode } from "/types/litegraph"; diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts index 3af382f41..844bcb271 100644 --- a/src/scripts/ui.ts +++ b/src/scripts/ui.ts @@ -1,7 +1,7 @@ import { api } from "./api"; -import { ComfyDialog as _ComfyDialog } from "./ui/dialog.js"; -import { toggleSwitch } from "./ui/toggleSwitch.js"; -import { ComfySettingsDialog } from "./ui/settings.js"; +import { ComfyDialog as _ComfyDialog } from "./ui/dialog"; +import { toggleSwitch } from "./ui/toggleSwitch"; +import { ComfySettingsDialog } from "./ui/settings"; import { ComfyApp, app } from "./app"; export const ComfyDialog = _ComfyDialog; diff --git a/src/scripts/ui/dialog.js b/src/scripts/ui/dialog.ts similarity index 92% rename from src/scripts/ui/dialog.js rename to src/scripts/ui/dialog.ts index f3407c7e6..b1c522cb8 100644 --- a/src/scripts/ui/dialog.js +++ b/src/scripts/ui/dialog.ts @@ -1,6 +1,9 @@ import { $el } from "../ui"; export class ComfyDialog { + element: HTMLElement; + textElement: HTMLElement; + constructor() { this.element = $el("div.comfy-modal", { parent: document.body }, [ $el("div.comfy-modal-content", [$el("p", { $: (p) => (this.textElement = p) }), ...this.createButtons()]), diff --git a/src/scripts/ui/imagePreview.js b/src/scripts/ui/imagePreview.ts similarity index 96% rename from src/scripts/ui/imagePreview.js rename to src/scripts/ui/imagePreview.ts index 45345603c..388f67aff 100644 --- a/src/scripts/ui/imagePreview.js +++ b/src/scripts/ui/imagePreview.ts @@ -50,7 +50,7 @@ export function createImageHost(node) { if (elH < 190) { elH = 190; } - el.style.setProperty("--comfy-widget-min-height", elH); + el.style.setProperty("--comfy-widget-min-height", elH.toString()); } else { el.style.setProperty("--comfy-widget-min-height", null); } diff --git a/src/scripts/ui/settings.ts b/src/scripts/ui/settings.ts index a18870749..b09df4c2a 100644 --- a/src/scripts/ui/settings.ts +++ b/src/scripts/ui/settings.ts @@ -1,6 +1,6 @@ import { $el } from "../ui"; import { api } from "../api"; -import { ComfyDialog } from "./dialog.js"; +import { ComfyDialog } from "./dialog"; import type { ComfyApp } from "../app"; /* The Setting entry stored in `ComfySettingsDialog` */ diff --git a/src/scripts/ui/spinner.js b/src/scripts/ui/spinner.ts similarity index 100% rename from src/scripts/ui/spinner.js rename to src/scripts/ui/spinner.ts diff --git a/src/scripts/ui/toggleSwitch.js b/src/scripts/ui/toggleSwitch.ts similarity index 90% rename from src/scripts/ui/toggleSwitch.js rename to src/scripts/ui/toggleSwitch.ts index be174dbf8..670beda68 100644 --- a/src/scripts/ui/toggleSwitch.js +++ b/src/scripts/ui/toggleSwitch.ts @@ -6,14 +6,16 @@ import { $el } from "../ui"; /** * Creates a toggle switch element * @param { string } name - * @param { Array | ToggleSwitchItem } items * @param { Object } [opts] * @param { (e: { item: ToggleSwitchItem, prev?: ToggleSwitchItem }) => void } [opts.onChange] */ -export function toggleSwitch(name, items, { onChange } = {}) { +export function toggleSwitch(name, items, e?) { + const onChange = e?.onChange; + let selectedIndex; let elements; - + function updateSelected(index) { if (selectedIndex != null) { elements[selectedIndex].classList.remove("comfy-toggle-selected"); diff --git a/src/scripts/ui/userSelection.js b/src/scripts/ui/userSelection.ts similarity index 84% rename from src/scripts/ui/userSelection.js rename to src/scripts/ui/userSelection.ts index 89f2bc0ce..f810e6621 100644 --- a/src/scripts/ui/userSelection.js +++ b/src/scripts/ui/userSelection.ts @@ -1,10 +1,16 @@ import { api } from "../api"; import { $el } from "../ui"; import { addStylesheet } from "../utils"; -import { createSpinner } from "./spinner.js"; +import { createSpinner } from "./spinner"; + +interface SelectedUser { + username: string; + userId: string; + created: boolean; +} export class UserSelectionScreen { - async show(users, user) { + async show(users, user): Promise{ // This will rarely be hit so move the loading to on demand await addStylesheet(import.meta.url); const userSelection = document.getElementById("comfy-user-selection"); @@ -48,6 +54,9 @@ export class UserSelectionScreen { } // Create new user + // @ts-ignore + // Property 'readonly' does not exist on type 'HTMLSelectElement'.ts(2339) + // Property 'readonly' does not exist on type 'HTMLInputElement'. Did you mean 'readOnly'?ts(2551) input.disabled = select.disabled = input.readonly = select.readonly = true; const spinner = createSpinner(); button.prepend(spinner); @@ -56,7 +65,7 @@ export class UserSelectionScreen { if (resp.status >= 300) { let message = "Error creating user: " + resp.status + " " + resp.statusText; try { - const res = await resp.json(); + const res = await resp.json(); if(res.error) { message = res.error; } @@ -69,6 +78,9 @@ export class UserSelectionScreen { } catch (err) { spinner.remove(); error.textContent = err.message ?? err.statusText ?? err ?? "An unknown error occurred."; + // @ts-ignore + // Property 'readonly' does not exist on type 'HTMLSelectElement'.ts(2339) + // Property 'readonly' does not exist on type 'HTMLInputElement'. Did you mean 'readOnly'?ts(2551) input.disabled = select.disabled = input.readonly = select.readonly = false; return; } @@ -106,7 +118,7 @@ export class UserSelectionScreen { userSelection.classList.add("no-users"); input.focus(); } - }).then((r) => { + }).then((r: SelectedUser) => { userSelection.remove(); return r; });