mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-28 18:54:09 +00:00
Apply new code format standard (#217)
This commit is contained in:
Chenlei Hu
@@ -1,60 +1,60 @@
|
||||
import { $el } from "../ui";
|
||||
import { api } from "../api";
|
||||
import { ComfyDialog } from "./dialog";
|
||||
import type { ComfyApp } from "../app";
|
||||
import type { Setting, SettingParams } from "@/types/settingTypes";
|
||||
import { useSettingStore } from "@/stores/settingStore";
|
||||
import { $el } from '../ui'
|
||||
import { api } from '../api'
|
||||
import { ComfyDialog } from './dialog'
|
||||
import type { ComfyApp } from '../app'
|
||||
import type { Setting, SettingParams } from '@/types/settingTypes'
|
||||
import { useSettingStore } from '@/stores/settingStore'
|
||||
|
||||
export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
|
||||
app: ComfyApp;
|
||||
settingsValues: any;
|
||||
settingsLookup: Record<string, Setting>;
|
||||
settingsParamLookup: Record<string, SettingParams>;
|
||||
app: ComfyApp
|
||||
settingsValues: any
|
||||
settingsLookup: Record<string, Setting>
|
||||
settingsParamLookup: Record<string, SettingParams>
|
||||
|
||||
constructor(app: ComfyApp) {
|
||||
super();
|
||||
const frontendVersion = window["__COMFYUI_FRONTEND_VERSION__"];
|
||||
this.app = app;
|
||||
this.settingsValues = {};
|
||||
this.settingsLookup = {};
|
||||
this.settingsParamLookup = {};
|
||||
super()
|
||||
const frontendVersion = window['__COMFYUI_FRONTEND_VERSION__']
|
||||
this.app = app
|
||||
this.settingsValues = {}
|
||||
this.settingsLookup = {}
|
||||
this.settingsParamLookup = {}
|
||||
this.element = $el(
|
||||
"dialog",
|
||||
'dialog',
|
||||
{
|
||||
id: "comfy-settings-dialog",
|
||||
parent: document.body,
|
||||
id: 'comfy-settings-dialog',
|
||||
parent: document.body
|
||||
},
|
||||
[
|
||||
$el("table.comfy-modal-content.comfy-table", [
|
||||
$el('table.comfy-modal-content.comfy-table', [
|
||||
$el(
|
||||
"caption",
|
||||
'caption',
|
||||
{ textContent: `Settings (v${frontendVersion})` },
|
||||
$el("button.comfy-btn", {
|
||||
type: "button",
|
||||
textContent: "\u00d7",
|
||||
$el('button.comfy-btn', {
|
||||
type: 'button',
|
||||
textContent: '\u00d7',
|
||||
onclick: () => {
|
||||
this.element.close();
|
||||
},
|
||||
this.element.close()
|
||||
}
|
||||
})
|
||||
),
|
||||
$el("tbody", { $: (tbody) => (this.textElement = tbody) }),
|
||||
$el("button", {
|
||||
type: "button",
|
||||
textContent: "Close",
|
||||
$el('tbody', { $: (tbody) => (this.textElement = tbody) }),
|
||||
$el('button', {
|
||||
type: 'button',
|
||||
textContent: 'Close',
|
||||
style: {
|
||||
cursor: "pointer",
|
||||
cursor: 'pointer'
|
||||
},
|
||||
onclick: () => {
|
||||
this.element.close();
|
||||
},
|
||||
}),
|
||||
]),
|
||||
this.element.close()
|
||||
}
|
||||
})
|
||||
])
|
||||
]
|
||||
) as HTMLDialogElement;
|
||||
) as HTMLDialogElement
|
||||
}
|
||||
|
||||
get settings() {
|
||||
return Object.values(this.settingsLookup);
|
||||
return Object.values(this.settingsLookup)
|
||||
}
|
||||
|
||||
#dispatchChange<T>(id: string, value: T, oldValue?: T) {
|
||||
@@ -63,84 +63,84 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
|
||||
// `load` re-dispatch the change for any settings added before load so
|
||||
// settingStore is always up to date.
|
||||
if (this.app.vueAppReady) {
|
||||
useSettingStore().settingValues[id] = value;
|
||||
useSettingStore().settingValues[id] = value
|
||||
}
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent(id + ".change", {
|
||||
new CustomEvent(id + '.change', {
|
||||
detail: {
|
||||
value,
|
||||
oldValue,
|
||||
},
|
||||
oldValue
|
||||
}
|
||||
})
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
async load() {
|
||||
if (this.app.storageLocation === "browser") {
|
||||
this.settingsValues = localStorage;
|
||||
if (this.app.storageLocation === 'browser') {
|
||||
this.settingsValues = localStorage
|
||||
} else {
|
||||
this.settingsValues = await api.getSettings();
|
||||
this.settingsValues = await api.getSettings()
|
||||
}
|
||||
|
||||
// Trigger onChange for any settings added before load
|
||||
for (const id in this.settingsLookup) {
|
||||
const value = this.settingsValues[this.getId(id)];
|
||||
this.settingsLookup[id].onChange?.(value);
|
||||
this.#dispatchChange(id, value);
|
||||
const value = this.settingsValues[this.getId(id)]
|
||||
this.settingsLookup[id].onChange?.(value)
|
||||
this.#dispatchChange(id, value)
|
||||
}
|
||||
}
|
||||
|
||||
getId(id: string) {
|
||||
if (this.app.storageLocation === "browser") {
|
||||
id = "Comfy.Settings." + id;
|
||||
if (this.app.storageLocation === 'browser') {
|
||||
id = 'Comfy.Settings.' + id
|
||||
}
|
||||
return id;
|
||||
return id
|
||||
}
|
||||
|
||||
getSettingValue<T>(id: string, defaultValue?: T): T {
|
||||
let value = this.settingsValues[this.getId(id)];
|
||||
let value = this.settingsValues[this.getId(id)]
|
||||
if (value != null) {
|
||||
if (this.app.storageLocation === "browser") {
|
||||
if (this.app.storageLocation === 'browser') {
|
||||
try {
|
||||
value = JSON.parse(value) as T;
|
||||
value = JSON.parse(value) as T
|
||||
} catch (error) {}
|
||||
}
|
||||
}
|
||||
return value ?? defaultValue;
|
||||
return value ?? defaultValue
|
||||
}
|
||||
|
||||
getSettingDefaultValue(id: string) {
|
||||
const param = this.settingsParamLookup[id];
|
||||
return param?.defaultValue;
|
||||
const param = this.settingsParamLookup[id]
|
||||
return param?.defaultValue
|
||||
}
|
||||
|
||||
async setSettingValueAsync(id: string, value: any) {
|
||||
const json = JSON.stringify(value);
|
||||
localStorage["Comfy.Settings." + id] = json; // backwards compatibility for extensions keep setting in storage
|
||||
const json = JSON.stringify(value)
|
||||
localStorage['Comfy.Settings.' + id] = json // backwards compatibility for extensions keep setting in storage
|
||||
|
||||
let oldValue = this.getSettingValue(id, undefined);
|
||||
this.settingsValues[this.getId(id)] = value;
|
||||
let oldValue = this.getSettingValue(id, undefined)
|
||||
this.settingsValues[this.getId(id)] = value
|
||||
|
||||
if (id in this.settingsLookup) {
|
||||
this.settingsLookup[id].onChange?.(value, oldValue);
|
||||
this.settingsLookup[id].onChange?.(value, oldValue)
|
||||
}
|
||||
this.#dispatchChange(id, value, oldValue);
|
||||
this.#dispatchChange(id, value, oldValue)
|
||||
|
||||
await api.storeSetting(id, value);
|
||||
await api.storeSetting(id, value)
|
||||
}
|
||||
|
||||
setSettingValue(id: string, value: any) {
|
||||
this.setSettingValueAsync(id, value).catch((err) => {
|
||||
alert(`Error saving setting '${id}'`);
|
||||
console.error(err);
|
||||
});
|
||||
alert(`Error saving setting '${id}'`)
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
refreshSetting(id: string) {
|
||||
const value = this.getSettingValue(id);
|
||||
this.settingsLookup[id].onChange?.(value);
|
||||
this.#dispatchChange(id, value);
|
||||
const value = this.getSettingValue(id)
|
||||
this.settingsLookup[id].onChange?.(value)
|
||||
this.#dispatchChange(id, value)
|
||||
}
|
||||
|
||||
addSetting(params: SettingParams) {
|
||||
@@ -151,232 +151,231 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
|
||||
defaultValue,
|
||||
onChange,
|
||||
attrs = {},
|
||||
tooltip = "",
|
||||
options = undefined,
|
||||
} = params;
|
||||
tooltip = '',
|
||||
options = undefined
|
||||
} = params
|
||||
if (!id) {
|
||||
throw new Error("Settings must have an ID");
|
||||
throw new Error('Settings must have an ID')
|
||||
}
|
||||
|
||||
if (id in this.settingsLookup) {
|
||||
throw new Error(`Setting ${id} of type ${type} must have a unique ID.`);
|
||||
throw new Error(`Setting ${id} of type ${type} must have a unique ID.`)
|
||||
}
|
||||
|
||||
let skipOnChange = false;
|
||||
let value = this.getSettingValue(id);
|
||||
let skipOnChange = false
|
||||
let value = this.getSettingValue(id)
|
||||
if (value == null) {
|
||||
if (this.app.isNewUserSession) {
|
||||
// Check if we have a localStorage value but not a setting value and we are a new user
|
||||
const localValue = localStorage["Comfy.Settings." + id];
|
||||
const localValue = localStorage['Comfy.Settings.' + id]
|
||||
if (localValue) {
|
||||
value = JSON.parse(localValue);
|
||||
this.setSettingValue(id, value); // Store on the server
|
||||
value = JSON.parse(localValue)
|
||||
this.setSettingValue(id, value) // Store on the server
|
||||
}
|
||||
}
|
||||
if (value == null) {
|
||||
value = defaultValue;
|
||||
value = defaultValue
|
||||
}
|
||||
}
|
||||
|
||||
// Trigger initial setting of value
|
||||
if (!skipOnChange) {
|
||||
onChange?.(value, undefined);
|
||||
this.#dispatchChange(id, value);
|
||||
onChange?.(value, undefined)
|
||||
this.#dispatchChange(id, value)
|
||||
}
|
||||
|
||||
this.settingsParamLookup[id] = params;
|
||||
this.settingsParamLookup[id] = params
|
||||
this.settingsLookup[id] = {
|
||||
id,
|
||||
onChange,
|
||||
name,
|
||||
render: () => {
|
||||
if (type === "hidden") return;
|
||||
if (type === 'hidden') return
|
||||
|
||||
const setter = (v) => {
|
||||
if (onChange) {
|
||||
onChange(v, value);
|
||||
onChange(v, value)
|
||||
}
|
||||
|
||||
this.setSettingValue(id, v);
|
||||
value = v;
|
||||
};
|
||||
value = this.getSettingValue(id, defaultValue);
|
||||
this.setSettingValue(id, v)
|
||||
value = v
|
||||
}
|
||||
value = this.getSettingValue(id, defaultValue)
|
||||
|
||||
let element;
|
||||
const htmlID = id.replaceAll(".", "-");
|
||||
let element
|
||||
const htmlID = id.replaceAll('.', '-')
|
||||
|
||||
const labelCell = $el("td", [
|
||||
$el("label", {
|
||||
const labelCell = $el('td', [
|
||||
$el('label', {
|
||||
for: htmlID,
|
||||
classList: [tooltip !== "" ? "comfy-tooltip-indicator" : ""],
|
||||
textContent: name,
|
||||
}),
|
||||
]);
|
||||
classList: [tooltip !== '' ? 'comfy-tooltip-indicator' : ''],
|
||||
textContent: name
|
||||
})
|
||||
])
|
||||
|
||||
if (typeof type === "function") {
|
||||
element = type(name, setter, value, attrs);
|
||||
if (typeof type === 'function') {
|
||||
element = type(name, setter, value, attrs)
|
||||
} else {
|
||||
switch (type) {
|
||||
case "boolean":
|
||||
element = $el("tr", [
|
||||
case 'boolean':
|
||||
element = $el('tr', [
|
||||
labelCell,
|
||||
$el("td", [
|
||||
$el("input", {
|
||||
$el('td', [
|
||||
$el('input', {
|
||||
id: htmlID,
|
||||
type: "checkbox",
|
||||
type: 'checkbox',
|
||||
checked: value,
|
||||
onchange: (event) => {
|
||||
const isChecked = event.target.checked;
|
||||
const isChecked = event.target.checked
|
||||
if (onChange !== undefined) {
|
||||
onChange(isChecked);
|
||||
onChange(isChecked)
|
||||
}
|
||||
this.setSettingValue(id, isChecked);
|
||||
},
|
||||
}),
|
||||
]),
|
||||
]);
|
||||
break;
|
||||
case "number":
|
||||
element = $el("tr", [
|
||||
this.setSettingValue(id, isChecked)
|
||||
}
|
||||
})
|
||||
])
|
||||
])
|
||||
break
|
||||
case 'number':
|
||||
element = $el('tr', [
|
||||
labelCell,
|
||||
$el("td", [
|
||||
$el("input", {
|
||||
$el('td', [
|
||||
$el('input', {
|
||||
type,
|
||||
value,
|
||||
id: htmlID,
|
||||
oninput: (e) => {
|
||||
setter(e.target.value);
|
||||
setter(e.target.value)
|
||||
},
|
||||
...attrs,
|
||||
}),
|
||||
]),
|
||||
]);
|
||||
break;
|
||||
case "slider":
|
||||
element = $el("tr", [
|
||||
...attrs
|
||||
})
|
||||
])
|
||||
])
|
||||
break
|
||||
case 'slider':
|
||||
element = $el('tr', [
|
||||
labelCell,
|
||||
$el("td", [
|
||||
$el('td', [
|
||||
$el(
|
||||
"div",
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
display: "grid",
|
||||
gridAutoFlow: "column",
|
||||
},
|
||||
display: 'grid',
|
||||
gridAutoFlow: 'column'
|
||||
}
|
||||
},
|
||||
[
|
||||
$el("input", {
|
||||
$el('input', {
|
||||
...attrs,
|
||||
value,
|
||||
type: "range",
|
||||
type: 'range',
|
||||
oninput: (e) => {
|
||||
setter(e.target.value);
|
||||
e.target.nextElementSibling.value = e.target.value;
|
||||
},
|
||||
setter(e.target.value)
|
||||
e.target.nextElementSibling.value = e.target.value
|
||||
}
|
||||
}),
|
||||
$el("input", {
|
||||
$el('input', {
|
||||
...attrs,
|
||||
value,
|
||||
id: htmlID,
|
||||
type: "number",
|
||||
style: { maxWidth: "4rem" },
|
||||
type: 'number',
|
||||
style: { maxWidth: '4rem' },
|
||||
oninput: (e) => {
|
||||
setter(e.target.value);
|
||||
e.target.previousElementSibling.value =
|
||||
e.target.value;
|
||||
},
|
||||
}),
|
||||
setter(e.target.value)
|
||||
e.target.previousElementSibling.value = e.target.value
|
||||
}
|
||||
})
|
||||
]
|
||||
),
|
||||
]),
|
||||
]);
|
||||
break;
|
||||
case "combo":
|
||||
element = $el("tr", [
|
||||
)
|
||||
])
|
||||
])
|
||||
break
|
||||
case 'combo':
|
||||
element = $el('tr', [
|
||||
labelCell,
|
||||
$el("td", [
|
||||
$el('td', [
|
||||
$el(
|
||||
"select",
|
||||
'select',
|
||||
{
|
||||
oninput: (e) => {
|
||||
setter(e.target.value);
|
||||
},
|
||||
setter(e.target.value)
|
||||
}
|
||||
},
|
||||
(typeof options === "function"
|
||||
(typeof options === 'function'
|
||||
? options(value)
|
||||
: options || []
|
||||
).map((opt) => {
|
||||
if (typeof opt === "string") {
|
||||
opt = { text: opt };
|
||||
if (typeof opt === 'string') {
|
||||
opt = { text: opt }
|
||||
}
|
||||
const v = opt.value ?? opt.text;
|
||||
return $el("option", {
|
||||
const v = opt.value ?? opt.text
|
||||
return $el('option', {
|
||||
value: v,
|
||||
textContent: opt.text,
|
||||
selected: value + "" === v + "",
|
||||
});
|
||||
selected: value + '' === v + ''
|
||||
})
|
||||
})
|
||||
),
|
||||
]),
|
||||
]);
|
||||
break;
|
||||
case "text":
|
||||
)
|
||||
])
|
||||
])
|
||||
break
|
||||
case 'text':
|
||||
default:
|
||||
if (type !== "text") {
|
||||
if (type !== 'text') {
|
||||
console.warn(
|
||||
`Unsupported setting type '${type}, defaulting to text`
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
element = $el("tr", [
|
||||
element = $el('tr', [
|
||||
labelCell,
|
||||
$el("td", [
|
||||
$el("input", {
|
||||
$el('td', [
|
||||
$el('input', {
|
||||
value,
|
||||
id: htmlID,
|
||||
oninput: (e) => {
|
||||
setter(e.target.value);
|
||||
setter(e.target.value)
|
||||
},
|
||||
...attrs,
|
||||
}),
|
||||
]),
|
||||
]);
|
||||
break;
|
||||
...attrs
|
||||
})
|
||||
])
|
||||
])
|
||||
break
|
||||
}
|
||||
}
|
||||
if (tooltip) {
|
||||
element.title = tooltip;
|
||||
element.title = tooltip
|
||||
}
|
||||
|
||||
return element;
|
||||
},
|
||||
} as Setting;
|
||||
return element
|
||||
}
|
||||
} as Setting
|
||||
|
||||
const self = this;
|
||||
const self = this
|
||||
return {
|
||||
get value() {
|
||||
return self.getSettingValue(id, defaultValue);
|
||||
return self.getSettingValue(id, defaultValue)
|
||||
},
|
||||
set value(v) {
|
||||
self.setSettingValue(id, v);
|
||||
},
|
||||
};
|
||||
self.setSettingValue(id, v)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
this.textElement.replaceChildren(
|
||||
$el(
|
||||
"tr",
|
||||
'tr',
|
||||
{
|
||||
style: { display: "none" },
|
||||
style: { display: 'none' }
|
||||
},
|
||||
[$el("th"), $el("th", { style: { width: "33%" } })]
|
||||
[$el('th'), $el('th', { style: { width: '33%' } })]
|
||||
),
|
||||
...this.settings
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((s) => s.render())
|
||||
.filter(Boolean)
|
||||
);
|
||||
this.element.showModal();
|
||||
)
|
||||
this.element.showModal()
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user