Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-04 23:20:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enable ts-strict for ui/settings (#1323)

Browse Source
This commit is contained in:
Chenlei Hu
2024-10-26 17:25:15 -04:00
committed by GitHub
parent 92ac403679
commit 44d886a18b
1 changed files with 5 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
src/scripts/ui/settings.ts
View File

@@ -1,11 +1,9 @@
// @ts-strict-ignore
import { $el } from '../ui'
import { api } from '../api'
import { api } from '@/scripts/api'
import type { ComfyApp } from '@/scripts/app'
import { ComfyDialog } from './dialog'
import type { ComfyApp } from '../app'
import type { Setting, SettingParams } from '@/types/settingTypes'
import type { Settings } from '@/types/apiTypes'
import { useSettingStore } from '@/stores/settingStore'
import { Settings } from '@/types/apiTypes'
import { useToastStore } from '@/stores/toastStore'
export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
@@ -16,44 +14,10 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
constructor(app: ComfyApp) {
super()
const frontendVersion = window['__COMFYUI_FRONTEND_VERSION__']
this.app = app
this.settingsValues = {}
this.settingsLookup = {}
this.settingsParamLookup = {}
this.element = $el(
'dialog',
{
id: 'comfy-settings-dialog',
parent: document.body
},
[
$el('table.comfy-modal-content.comfy-table', [
$el(
'caption',
{ textContent: `Settings (v${frontendVersion})` },
$el('button.comfy-btn', {
type: 'button',
textContent: '\u00d7',
onclick: () => {
this.element.close()
}
})
),
$el('tbody', { $: (tbody) => (this.textElement = tbody) }),
$el('button', {
type: 'button',
textContent: 'Close',
style: {
cursor: 'pointer'
},
onclick: () => {
this.element.close()
}
})
])
]
) as HTMLDialogElement
}
get settings() {
@@ -187,16 +151,7 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
* ```
*/
addSetting(params: SettingParams) {
const {
id,
name,
type,
defaultValue,
onChange,
attrs = {},
tooltip = '',
options = undefined
} = params
const { id, name, type, defaultValue, onChange } = params
if (!id) {
throw new Error('Settings must have an ID')
}
@@ -236,164 +191,7 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
onChange,
name,
render: () => {
if (type === 'hidden') return
const setter = (v) => {
if (onChange) {
onChange(v, value)
}
this.setSettingValue(id, v)
value = v
}
value = this.getSettingValue(id, defaultValue)
let element
const htmlID = id.replaceAll('.', '-')
const labelCell = $el('td', [
$el('label', {
for: htmlID,
classList: [tooltip !== '' ? 'comfy-tooltip-indicator' : ''],
textContent: name
})
])
if (typeof type === 'function') {
element = type(name, setter, value, attrs)
} else {
switch (type) {
case 'boolean':
element = $el('tr', [
labelCell,
$el('td', [
$el('input', {
id: htmlID,
type: 'checkbox',
checked: value,
onchange: (event) => {
const isChecked = event.target.checked
if (onChange !== undefined) {
onChange(isChecked)
}
this.setSettingValue(id, isChecked)
}
})
])
])
break
case 'number':
element = $el('tr', [
labelCell,
$el('td', [
$el('input', {
type,
value,
id: htmlID,
oninput: (e) => {
setter(e.target.value)
},
...attrs
})
])
])
break
case 'slider':
element = $el('tr', [
labelCell,
$el('td', [
$el(
'div',
{
style: {
display: 'grid',
gridAutoFlow: 'column'
}
},
[
$el('input', {
...attrs,
value,
type: 'range',
oninput: (e) => {
setter(e.target.value)
e.target.nextElementSibling.value = e.target.value
}
}),
$el('input', {
...attrs,
value,
id: htmlID,
type: 'number',
style: { maxWidth: '4rem' },
oninput: (e) => {
setter(e.target.value)
e.target.previousElementSibling.value = e.target.value
}
})
]
)
])
])
break
case 'combo':
element = $el('tr', [
labelCell,
$el('td', [
$el(
'select',
{
oninput: (e) => {
setter(e.target.value)
}
},
(typeof options === 'function'
? options(value)
: options || []
).map((opt) => {
if (typeof opt === 'string') {
opt = { text: opt }
}
const v = opt.value ?? opt.text
return $el('option', {
value: v,
textContent: opt.text,
selected: value + '' === v + ''
})
})
)
])
])
break
case 'text':
default:
if (type !== 'text') {
console.warn(
`Unsupported setting type '${type}, defaulting to text`
)
}
element = $el('tr', [
labelCell,
$el('td', [
$el('input', {
value,
id: htmlID,
oninput: (e) => {
setter(e.target.value)
},
...attrs
})
])
])
break
}
}
if (tooltip) {
element.title = tooltip
}
return element
console.warn('[ComfyUI] Setting render is deprecated', id)
}
} as Setting
@@ -407,21 +205,4 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
}
}
}
show() {
this.textElement.replaceChildren(
$el(
'tr',
{
style: { display: 'none' }
},
[$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()
}
}