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

[TS] Enable strict mode (#3136)

Browse Source
This commit is contained in:
Chenlei Hu
2025-03-18 22:57:17 -04:00
committed by GitHub
parent 44edec7ad2
commit a049e9ae2d
64 changed files with 924 additions and 781 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/scripts/ui/components/asyncDialog.ts
View File

@@ -1,13 +1,14 @@
// @ts-strict-ignore
import { $el } from '../../ui'
import { ComfyDialog } from '../dialog'
export class ComfyAsyncDialog extends ComfyDialog<HTMLDialogElement> {
// @ts-expect-error fixme ts strict error
#resolve: (value: any) => void
constructor(actions?: Array<string | { value?: any; text: string }>) {
super(
'dialog.comfy-dialog.comfyui-dialog',
// @ts-expect-error fixme ts strict error
actions?.map((opt) => {
if (typeof opt === 'string') {
opt = { text: opt }

10
src/scripts/ui/components/button.ts
View File

@@ -1,4 +1,3 @@
// @ts-strict-ignore
import { Settings } from '@/schemas/apiSchema'
import type { ComfyApp } from '@/scripts/app'
@@ -27,6 +26,7 @@ export class ComfyButton implements ComfyComponent<HTMLElement> {
isOver = false
iconElement = $el('i.mdi')
contentElement = $el('span')
// @ts-expect-error fixme ts strict error
popup: ComfyPopup
element: HTMLElement
overIcon: string
@@ -70,18 +70,22 @@ export class ComfyButton implements ComfyComponent<HTMLElement> {
[this.iconElement, this.contentElement]
)
// @ts-expect-error fixme ts strict error
this.icon = prop(
this,
'icon',
icon,
toggleElement(this.iconElement, { onShow: this.updateIcon })
)
// @ts-expect-error fixme ts strict error
this.overIcon = prop(this, 'overIcon', overIcon, () => {
if (this.isOver) {
this.updateIcon()
}
})
// @ts-expect-error fixme ts strict error
this.iconSize = prop(this, 'iconSize', iconSize, this.updateIcon)
// @ts-expect-error fixme ts strict error
this.content = prop(
this,
'content',
@@ -97,6 +101,7 @@ export class ComfyButton implements ComfyComponent<HTMLElement> {
})
)
// @ts-expect-error fixme ts strict error
this.tooltip = prop(this, 'tooltip', tooltip, (v) => {
if (v) {
this.element.title = v
@@ -113,6 +118,7 @@ export class ComfyButton implements ComfyComponent<HTMLElement> {
this.updateClasses()
;(this.element as HTMLButtonElement).disabled = !this.enabled
})
// @ts-expect-error fixme ts strict error
this.action = prop(this, 'action', action)
this.element.addEventListener('click', (e) => {
if (this.popup) {
@@ -127,9 +133,11 @@ export class ComfyButton implements ComfyComponent<HTMLElement> {
if (visibilitySetting?.id) {
const settingUpdated = () => {
this.hidden =
// @ts-expect-error fixme ts strict error
app.ui.settings.getSettingValue(visibilitySetting.id) !==
visibilitySetting.showValue
}
// @ts-expect-error fixme ts strict error
app.ui.settings.addEventListener(
visibilitySetting.id + '.change',
settingUpdated

2
src/scripts/ui/components/buttonGroup.ts
View File

@@ -1,4 +1,3 @@
// @ts-strict-ignore
import { $el } from '../../ui'
import { prop } from '../../utils'
import { ComfyButton } from './button'
@@ -33,6 +32,7 @@ export class ComfyButtonGroup {
}
update() {
// @ts-expect-error fixme ts strict error
this.element.replaceChildren(...this.buttons.map((b) => b['element'] ?? b))
}
}

3
src/scripts/ui/components/popup.ts
View File

@@ -1,4 +1,3 @@
// @ts-strict-ignore
import { $el } from '../../ui'
import { prop } from '../../utils'
import { ClassList, applyClasses } from '../utils'
@@ -90,6 +89,7 @@ export class ComfyPopup extends EventTarget {
this.dispatchEvent(new CustomEvent('change'))
}
// @ts-expect-error fixme ts strict error
#escHandler = (e) => {
if (e.key === 'Escape') {
this.open = false
@@ -98,6 +98,7 @@ export class ComfyPopup extends EventTarget {
}
}
// @ts-expect-error fixme ts strict error
#clickHandler = (e) => {
/** @type {any} */
const target = e.target

3
src/scripts/ui/dialog.ts
View File

@@ -1,10 +1,10 @@
// @ts-strict-ignore
import { $el } from '../ui'
export class ComfyDialog<
T extends HTMLElement = HTMLElement
> extends EventTarget {
element: T
// @ts-expect-error fixme ts strict error
textElement: HTMLElement
#buttons: HTMLButtonElement[] | null
@@ -35,6 +35,7 @@ export class ComfyDialog<
this.element.style.display = 'none'
}
// @ts-expect-error fixme ts strict error
show(html) {
if (typeof html === 'string') {
this.textElement.innerHTML = html

37
src/scripts/ui/draggableList.ts
View File

@@ -1,4 +1,3 @@
// @ts-strict-ignore
/*
Original implementation:
https://github.com/TahaSh/drag-to-reorder
@@ -45,9 +44,13 @@ $el('style', {
export class DraggableList extends EventTarget {
listContainer
// @ts-expect-error fixme ts strict error
draggableItem
// @ts-expect-error fixme ts strict error
pointerStartX
// @ts-expect-error fixme ts strict error
pointerStartY
// @ts-expect-error fixme ts strict error
scrollYMax
itemsGap = 0
items = []
@@ -56,6 +59,7 @@ export class DraggableList extends EventTarget {
off = []
offDrag = []
// @ts-expect-error fixme ts strict error
constructor(element, itemSelector) {
super()
this.listContainer = element
@@ -63,9 +67,13 @@ export class DraggableList extends EventTarget {
if (!this.listContainer) return
// @ts-expect-error fixme ts strict error
this.off.push(this.on(this.listContainer, 'mousedown', this.dragStart))
// @ts-expect-error fixme ts strict error
this.off.push(this.on(this.listContainer, 'touchstart', this.dragStart))
// @ts-expect-error fixme ts strict error
this.off.push(this.on(document, 'mouseup', this.dragEnd))
// @ts-expect-error fixme ts strict error
this.off.push(this.on(document, 'touchend', this.dragEnd))
}
@@ -75,6 +83,7 @@ export class DraggableList extends EventTarget {
this.listContainer.querySelectorAll(this.itemSelector)
)
this.items.forEach((element) => {
// @ts-expect-error fixme ts strict error
element.classList.add('is-idle')
})
}
@@ -83,24 +92,29 @@ export class DraggableList extends EventTarget {
getIdleItems() {
return this.getAllItems().filter((item) =>
// @ts-expect-error fixme ts strict error
item.classList.contains('is-idle')
)
}
// @ts-expect-error fixme ts strict error
isItemAbove(item) {
return item.hasAttribute('data-is-above')
}
// @ts-expect-error fixme ts strict error
isItemToggled(item) {
return item.hasAttribute('data-is-toggled')
}
// @ts-expect-error fixme ts strict error
on(source, event, listener, options?) {
listener = listener.bind(this)
source.addEventListener(event, listener, options)
return () => source.removeEventListener(event, listener)
}
// @ts-expect-error fixme ts strict error
dragStart(e) {
if (e.target.classList.contains(this.handleClass)) {
this.draggableItem = e.target.closest(this.itemSelector)
@@ -117,8 +131,10 @@ export class DraggableList extends EventTarget {
this.initDraggableItem()
this.initItemsState()
// @ts-expect-error fixme ts strict error
this.offDrag.push(this.on(document, 'mousemove', this.drag))
this.offDrag.push(
// @ts-expect-error fixme ts strict error
this.on(document, 'touchmove', this.drag, { passive: false })
)
@@ -126,6 +142,7 @@ export class DraggableList extends EventTarget {
new CustomEvent('dragstart', {
detail: {
element: this.draggableItem,
// @ts-expect-error fixme ts strict error
position: this.getAllItems().indexOf(this.draggableItem)
}
})
@@ -141,7 +158,9 @@ export class DraggableList extends EventTarget {
const item1 = this.getIdleItems()[0]
const item2 = this.getIdleItems()[1]
// @ts-expect-error fixme ts strict error
const item1Rect = item1.getBoundingClientRect()
// @ts-expect-error fixme ts strict error
const item2Rect = item2.getBoundingClientRect()
this.itemsGap = Math.abs(item1Rect.bottom - item2Rect.top)
@@ -149,7 +168,9 @@ export class DraggableList extends EventTarget {
initItemsState() {
this.getIdleItems().forEach((item, i) => {
// @ts-expect-error fixme ts strict error
if (this.getAllItems().indexOf(this.draggableItem) > i) {
// @ts-expect-error fixme ts strict error
item.dataset.isAbove = ''
}
})
@@ -160,6 +181,7 @@ export class DraggableList extends EventTarget {
this.draggableItem.classList.add('is-draggable')
}
// @ts-expect-error fixme ts strict error
drag(e) {
if (!this.draggableItem) return
@@ -193,18 +215,23 @@ export class DraggableList extends EventTarget {
// Update state
this.getIdleItems().forEach((item) => {
// @ts-expect-error fixme ts strict error
const itemRect = item.getBoundingClientRect()
const itemY = itemRect.top + itemRect.height / 2
if (this.isItemAbove(item)) {
if (draggableItemY <= itemY) {
// @ts-expect-error fixme ts strict error
item.dataset.isToggled = ''
} else {
// @ts-expect-error fixme ts strict error
delete item.dataset.isToggled
}
} else {
if (draggableItemY >= itemY) {
// @ts-expect-error fixme ts strict error
item.dataset.isToggled = ''
} else {
// @ts-expect-error fixme ts strict error
delete item.dataset.isToggled
}
}
@@ -214,8 +241,10 @@ export class DraggableList extends EventTarget {
this.getIdleItems().forEach((item) => {
if (this.isItemToggled(item)) {
const direction = this.isItemAbove(item) ? 1 : -1
// @ts-expect-error fixme ts strict error
item.style.transform = `translateY(${direction * (draggableItemRect.height + this.itemsGap)}px)`
} else {
// @ts-expect-error fixme ts strict error
item.style.transform = ''
}
})
@@ -256,6 +285,7 @@ export class DraggableList extends EventTarget {
this.listContainer.appendChild(item)
})
// @ts-expect-error fixme ts strict error
this.items = reorderedItems
this.dispatchEvent(
@@ -275,6 +305,7 @@ export class DraggableList extends EventTarget {
this.unsetDraggableItem()
this.unsetItemState()
// @ts-expect-error fixme ts strict error
this.offDrag.forEach((f) => f())
this.offDrag = []
}
@@ -288,13 +319,17 @@ export class DraggableList extends EventTarget {
unsetItemState() {
this.getIdleItems().forEach((item) => {
// @ts-expect-error fixme ts strict error
delete item.dataset.isAbove
// @ts-expect-error fixme ts strict error
delete item.dataset.isToggled
// @ts-expect-error fixme ts strict error
item.style.transform = ''
})
}
dispose() {
// @ts-expect-error fixme ts strict error
this.off.forEach((f) => f())
}
}

16
src/scripts/ui/imagePreview.ts
View File

@@ -1,10 +1,12 @@
// @ts-strict-ignore
import { app } from '../app'
import { $el } from '../ui'
export function calculateImageGrid(
// @ts-expect-error fixme ts strict error
imgs,
// @ts-expect-error fixme ts strict error
dw,
// @ts-expect-error fixme ts strict error
dh
): {
cellWidth: number
@@ -42,11 +44,14 @@ export function calculateImageGrid(
}
}
// @ts-expect-error fixme ts strict error
return { cellWidth, cellHeight, cols, rows, shiftX }
}
// @ts-expect-error fixme ts strict error
export function createImageHost(node) {
const el = $el('div.comfy-img-preview')
// @ts-expect-error fixme ts strict error
let currentImgs
let first = true
@@ -54,6 +59,7 @@ export function createImageHost(node) {
let w = null
let h = null
// @ts-expect-error fixme ts strict error
if (currentImgs) {
let elH = el.clientHeight
if (first) {
@@ -73,17 +79,24 @@ export function createImageHost(node) {
nw - 20,
elH
))
// @ts-expect-error fixme ts strict error
w += 'px'
// @ts-expect-error fixme ts strict error
h += 'px'
// @ts-expect-error fixme ts strict error
el.style.setProperty('--comfy-img-preview-width', w)
// @ts-expect-error fixme ts strict error
el.style.setProperty('--comfy-img-preview-height', h)
}
}
return {
el,
// @ts-expect-error fixme ts strict error
updateImages(imgs) {
// @ts-expect-error fixme ts strict error
if (imgs !== currentImgs) {
// @ts-expect-error fixme ts strict error
if (currentImgs == null) {
requestAnimationFrame(() => {
updateSize()
@@ -109,6 +122,7 @@ export function createImageHost(node) {
if (!over) return
// Set the overIndex so Open Image etc work
// @ts-expect-error fixme ts strict error
const idx = currentImgs.indexOf(over)
node.overIndex = idx
}

10
src/scripts/ui/toggleSwitch.ts
View File

@@ -1,4 +1,3 @@
// @ts-strict-ignore
import { $el } from '../ui'
/**
@@ -11,24 +10,33 @@ import { $el } from '../ui'
* @param { Object } [opts]
* @param { (e: { item: ToggleSwitchItem, prev?: ToggleSwitchItem }) => void } [opts.onChange]
*/
// @ts-expect-error fixme ts strict error
export function toggleSwitch(name, items, e?) {
const onChange = e?.onChange
// @ts-expect-error fixme ts strict error
let selectedIndex
// @ts-expect-error fixme ts strict error
let elements
// @ts-expect-error fixme ts strict error
function updateSelected(index) {
// @ts-expect-error fixme ts strict error
if (selectedIndex != null) {
// @ts-expect-error fixme ts strict error
elements[selectedIndex].classList.remove('comfy-toggle-selected')
}
onChange?.({
item: items[index],
// @ts-expect-error fixme ts strict error
prev: selectedIndex == null ? undefined : items[selectedIndex]
})
selectedIndex = index
// @ts-expect-error fixme ts strict error
elements[selectedIndex].classList.add('comfy-toggle-selected')
}
// @ts-expect-error fixme ts strict error
elements = items.map((item, i) => {
if (typeof item === 'string') item = { text: item }
if (!item.value) item.value = item.text

3
src/scripts/ui/utils.ts
View File

@@ -1,4 +1,3 @@
// @ts-strict-ignore
export type ClassList = string | string[] | Record<string, boolean>
export function applyClasses(
@@ -34,11 +33,13 @@ export function toggleElement(
onShow
}: {
onHide?: (el: HTMLElement) => void
// @ts-expect-error fixme ts strict error
onShow?: (el: HTMLElement, value) => void
} = {}
) {
let placeholder: HTMLElement | Comment
let hidden: boolean
// @ts-expect-error fixme ts strict error
return (value) => {
if (value) {
if (hidden) {