Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-01-26 19:09:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: remove useless @ts-ignore and migrate to @ts-expect-error (#293)

Browse Source 
* fix: vite primevue/treenode import error

* refactor: remove useless @ts-ignore and replace with @ts-expect-error

* build(tsconfig): enable incremental to speed up secondary time type check
This commit is contained in:
余腾靖
2024-08-04 19:22:24 +08:00
committed by GitHub
parent 7e669b0f68
commit b5a919e8b2
31 changed files with 135 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/sidebar/tabs/NodeLibrarySideBarTab.vue
View File

@@ -71,7 +71,7 @@ import Badge from 'primevue/badge'
import ToggleButton from 'primevue/togglebutton'
import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
import { computed, ref } from 'vue'
import { TreeNode } from 'primevue/treenode'
import type { TreeNode } from 'primevue/treenode'
import TreePlus from '@/components/primevueOverride/TreePlus.vue'
import NodePreview from '@/components/NodePreview.vue'
import SideBarTabTemplate from '@/components/sidebar/tabs/SideBarTabTemplate.vue'

7
src/extensions/core/colorPalette.ts
View File

@@ -437,7 +437,7 @@ app.registerExtension({
* @param {image} String
* @param {clearBackgroundColor} String
*/
// @ts-ignore
// @ts-expect-error
LGraphCanvas.prototype.updateBackground = function (
image,
clearBackgroundColor
@@ -633,12 +633,11 @@ app.registerExtension({
// Sets the colors of node slots and links
if (colorPalette.colors.node_slot) {
Object.assign(
// @ts-ignore
// @ts-expect-error
app.canvas.default_connection_color_byType,
colorPalette.colors.node_slot
)
Object.assign(
// @ts-ignore
LGraphCanvas.link_type_colors,
colorPalette.colors.node_slot
)
@@ -877,7 +876,7 @@ app.registerExtension({
BACKGROUND_IMAGE = base.BACKGROUND_IMAGE
CLEAR_BACKGROUND_COLOR = base.CLEAR_BACKGROUND_COLOR
}
// @ts-ignore
// @ts-expect-error
// litegraph.extensions.js
app.canvas.updateBackground(BACKGROUND_IMAGE, CLEAR_BACKGROUND_COLOR)
}

4
src/extensions/core/contextMenuFilter.ts
View File

@@ -7,7 +7,7 @@ const ext = {
name: 'Comfy.ContextMenuFilter',
init() {
const ctxMenu = LiteGraph.ContextMenu
// @ts-ignore
// @ts-expect-error
// TODO Very hacky way to modify Litegraph behaviour. Fix this later.
LiteGraph.ContextMenu = function (values, options) {
const ctx = ctxMenu.call(this, values, options)
@@ -27,7 +27,7 @@ const ext = {
// We must request an animation frame for the current node of the active canvas to update.
requestAnimationFrame(() => {
// @ts-ignore
// @ts-expect-error
const currentNode = LGraphCanvas.active_canvas.current_node
const clickedComboValue = currentNode.widgets
?.filter(

18
src/extensions/core/groupNode.ts
View File

@@ -16,9 +16,8 @@ const Workflow = {
isInUseGroupNode(name) {
const id = `workflow/${name}`
// Check if lready registered/in use in this workflow
// @ts-ignore
if (app.graph.extra?.groupNodes?.[name]) {
// @ts-ignore
// @ts-expect-error
if (app.graph._nodes.find((n) => n.type === id)) {
return Workflow.InUse.InWorkflow
} else {
@@ -28,9 +27,7 @@ const Workflow = {
return Workflow.InUse.Free
},
storeGroupNode(name, data) {
// @ts-ignore
let extra = app.graph.extra
// @ts-ignore
if (!extra) app.graph.extra = extra = {}
let groupNodes = extra.groupNodes
if (!groupNodes) extra.groupNodes = groupNodes = {}
@@ -133,7 +130,7 @@ class GroupNodeBuilder {
// Use the built in copyToClipboard function to generate the node data we need
const backup = localStorage.getItem('litegrapheditor_clipboard')
try {
// @ts-ignore
// @ts-expect-error
// TODO Figure out if copyToClipboard is really taking this param
app.canvas.copyToClipboard(this.nodes)
const config = JSON.parse(
@@ -328,7 +325,6 @@ export class GroupNodeConfig {
null,
widget
)
// @ts-ignore
config = res?.customConfig ?? config
}
}
@@ -352,7 +348,7 @@ export class GroupNodeConfig {
}
}
// @ts-ignore
// @ts-expect-error
config.forceInput = true
return {
input: {
@@ -743,7 +739,7 @@ export class GroupNodeHandler {
let link = app.graph.links[linkId]
// Use the outer link, but update the target to the inner node
// @ts-ignore
// @ts-expect-error
// TODO: Fix this
link = {
...link,
@@ -797,7 +793,7 @@ export class GroupNodeHandler {
this.groupData.nodeData.nodes.map((n, i) => {
const innerNode = LiteGraph.createNode(n.type)
innerNode.configure(n)
// @ts-ignore
// @ts-expect-error
innerNode.id = `${this.node.id}:${i}`
return innerNode
})
@@ -1411,9 +1407,7 @@ function addConvertToGroupOptions() {
}
// Add to canvas
// @ts-ignore
const getCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions
// @ts-ignore
LGraphCanvas.prototype.getCanvasMenuOptions = function () {
const options = getCanvasMenuOptions.apply(this, arguments)
const index =
@@ -1424,9 +1418,7 @@ function addConvertToGroupOptions() {
}
// Add to nodes
// @ts-ignore
const getNodeMenuOptions = LGraphCanvas.prototype.getNodeMenuOptions
// @ts-ignore
LGraphCanvas.prototype.getNodeMenuOptions = function (node) {
const options = getNodeMenuOptions.apply(this, arguments)
if (!GroupNodeHandler.isGroupNode(node)) {

4
src/extensions/core/groupNodeManage.ts
View File

@@ -388,7 +388,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
'button.comfy-btn',
{
onclick: (e) => {
// @ts-ignore
// @ts-expect-error
const node = app.graph._nodes.find(
(n) => n.type === 'workflow/' + this.selectedGroup
)
@@ -470,7 +470,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
types[g] = type
if (!nodesByType) {
// @ts-ignore
// @ts-expect-error
nodesByType = app.graph._nodes.reduce((p, n) => {
p[n.type] ??= []
p[n.type].push(n)

4
src/extensions/core/groupOptions.ts
View File

@@ -64,10 +64,8 @@ function addNodesToGroup(group, nodes = []) {
app.registerExtension({
name: 'Comfy.GroupOptions',
setup() {
// @ts-ignore
const orig = LGraphCanvas.prototype.getCanvasMenuOptions
// graph_mouse
// @ts-ignore
LGraphCanvas.prototype.getCanvasMenuOptions = function () {
const options = orig.apply(this, arguments)
const group = this.graph.getGroupOnPos(
@@ -79,7 +77,7 @@ app.registerExtension({
content: 'Add Group For Selected Nodes',
disabled: !Object.keys(app.canvas.selected_nodes || {}).length,
callback: () => {
// @ts-ignore
// @ts-expect-error
var group = new LiteGraph.LGraphGroup()
addNodesToGroup(group, this.selected_nodes)
app.canvas.graph.add(group)

2
src/extensions/core/invertMenuScrolling.ts
View File

@@ -9,7 +9,7 @@ app.registerExtension({
init() {
const ctxMenu = LiteGraph.ContextMenu
const replace = () => {
// @ts-ignore
// @ts-expect-error
LiteGraph.ContextMenu = function (values, options) {
options = options || {}
if (options.scroll_speed) {

2
src/extensions/core/linkRenderMode.ts
View File

@@ -9,7 +9,7 @@ const ext = {
name: 'Link Render Mode',
defaultValue: 2,
type: 'combo',
// @ts-ignore
// @ts-expect-error
options: [...LiteGraph.LINK_RENDER_MODES, 'Hidden'].map((m, i) => ({
value: i,
text: m,

4
src/extensions/core/maskeditor.ts
View File

@@ -252,9 +252,9 @@ class MaskEditorDialog extends ComfyDialog {
brush.style.outline = '1px dashed black'
brush.style.boxShadow = '0 0 0 1px white'
brush.style.borderRadius = '50%'
// @ts-ignore
// @ts-expect-error
brush.style.MozBorderRadius = '50%'
// @ts-ignore
// @ts-expect-error
brush.style.WebkitBorderRadius = '50%'
brush.style.position = 'absolute'
brush.style.zIndex = '8889'

12
src/extensions/core/nodeTemplates.ts
View File

@@ -359,9 +359,7 @@ app.registerExtension({
localStorage.setItem('litegrapheditor_clipboard', old)
}
// @ts-ignore
const orig = LGraphCanvas.prototype.getCanvasMenuOptions
// @ts-ignore
LGraphCanvas.prototype.getCanvasMenuOptions = function () {
const options = orig.apply(this, arguments)
@@ -380,20 +378,20 @@ app.registerExtension({
const nodeIds = Object.keys(app.canvas.selected_nodes)
for (let i = 0; i < nodeIds.length; i++) {
const node = app.graph.getNodeById(Number.parseInt(nodeIds[i]))
// @ts-ignore
// @ts-expect-error
const nodeData = node?.constructor.nodeData
let groupData = GroupNodeHandler.getGroupData(node)
if (groupData) {
groupData = groupData.nodeData
// @ts-ignore
// @ts-expect-error
if (!data.groupNodes) {
// @ts-ignore
// @ts-expect-error
data.groupNodes = {}
}
// @ts-ignore
// @ts-expect-error
data.groupNodes[nodeData.name] = groupData
// @ts-ignore
// @ts-expect-error
data.nodes[i].type = nodeData.name
}
}

4
src/extensions/core/noteNode.ts
View File

@@ -23,7 +23,7 @@ app.registerExtension({
this.properties = { text: '' }
}
ComfyWidgets.STRING(
// @ts-ignore
// @ts-expect-error
// Should we extends LGraphNode?
this,
'',
@@ -40,7 +40,7 @@ app.registerExtension({
LiteGraph.registerNodeType(
'Note',
// @ts-ignore
// @ts-expect-error
Object.assign(NoteNode, {
title_mode: LiteGraph.NORMAL_TITLE,
title: 'Note',

14
src/extensions/core/simpleTouchSupport.ts
View File

@@ -48,13 +48,13 @@ app.registerExtension({
// hack to get litegraph to use this event
e.constructor = CustomEvent
} catch (error) {}
// @ts-ignore
// @ts-expect-error
e.clientX = lastTouch.clientX
// @ts-ignore
// @ts-expect-error
e.clientY = lastTouch.clientY
app.canvas.pointer_is_down = true
// @ts-ignore
// @ts-expect-error
app.canvas._mousedown_callback(e)
}
touchTime = null
@@ -68,9 +68,9 @@ app.registerExtension({
if (e.touches?.length === 2) {
app.canvas.pointer_is_down = false
touchZooming = true
// @ts-ignore
// @ts-expect-error
LiteGraph.closeAllContextMenus()
// @ts-ignore
// @ts-expect-error
app.canvas.search_box?.close()
const newZoomPos = getMultiTouchPos(e)
@@ -94,9 +94,7 @@ app.registerExtension({
}
})
// @ts-ignore
const processMouseDown = LGraphCanvas.prototype.processMouseDown
// @ts-ignore
LGraphCanvas.prototype.processMouseDown = function (e) {
if (touchZooming || touchCount) {
return
@@ -104,9 +102,7 @@ LGraphCanvas.prototype.processMouseDown = function (e) {
return processMouseDown.apply(this, arguments)
}
// @ts-ignore
const processMouseMove = LGraphCanvas.prototype.processMouseMove
// @ts-ignore
LGraphCanvas.prototype.processMouseMove = function (e) {
if (touchZooming || touchCount > 1) {
return

24
src/extensions/core/snapToGrid.ts
View File

@@ -66,9 +66,7 @@ app.registerExtension({
}
// Draw a preview of where the node will go if holding shift and the node is selected
// @ts-ignore
const origDrawNode = LGraphCanvas.prototype.drawNode
// @ts-ignore
LGraphCanvas.prototype.drawNode = function (node, ctx) {
if (
app.shiftDown &&
@@ -81,14 +79,14 @@ app.registerExtension({
let w, h
if (node.flags.collapsed) {
// @ts-ignore
// @ts-expect-error
w = node._collapsed_width
h = LiteGraph.NODE_TITLE_HEIGHT
shiftY -= LiteGraph.NODE_TITLE_HEIGHT
} else {
w = node.size[0]
h = node.size[1]
// @ts-ignore
// @ts-expect-error
let titleMode = node.constructor.title_mode
if (
titleMode !== LiteGraph.TRANSPARENT_TITLE &&
@@ -117,9 +115,7 @@ app.registerExtension({
* Handles moving a group; tracking when a group has been moved (to show the ghost in `drawGroups`
* below) as well as handle the last move call from LiteGraph's `processMouseUp`.
*/
// @ts-ignore
const groupMove = LGraphGroup.prototype.move
// @ts-ignore
LGraphGroup.prototype.move = function (deltax, deltay, ignore_nodes) {
const v = groupMove.apply(this, arguments)
// When we've started moving, set `selectedAndMovingGroup` as LiteGraph sets `selected_group`
@@ -143,7 +139,6 @@ app.registerExtension({
for (const node of this._nodes) {
node.alignToGrid()
}
// @ts-ignore
LGraphNode.prototype.alignToGrid.apply(this)
}
return v
@@ -154,22 +149,19 @@ app.registerExtension({
* drawing a ghost box when one is actively being moved. This mimics the node snapping behavior for
* both.
*/
// @ts-ignore
const drawGroups = LGraphCanvas.prototype.drawGroups
// @ts-ignore
LGraphCanvas.prototype.drawGroups = function (canvas, ctx) {
if (this.selected_group && app.shiftDown) {
if (this.selected_group_resizing) {
// @ts-ignore
roundVectorToGrid(this.selected_group.size)
} else if (selectedAndMovingGroup) {
// @ts-ignore
// @ts-expect-error
const [x, y] = roundVectorToGrid([...selectedAndMovingGroup.pos])
const f = ctx.fillStyle
const s = ctx.strokeStyle
ctx.fillStyle = 'rgba(100, 100, 100, 0.33)'
ctx.strokeStyle = 'rgba(100, 100, 100, 0.66)'
// @ts-ignore
// @ts-expect-error
ctx.rect(x, y, ...selectedAndMovingGroup.size)
ctx.fill()
ctx.stroke()
@@ -183,18 +175,16 @@ app.registerExtension({
}
/** Handles adding a group in a snapping-enabled state. */
// @ts-ignore
const onGroupAdd = LGraphCanvas.onGroupAdd
// @ts-ignore
LGraphCanvas.onGroupAdd = function () {
const v = onGroupAdd.apply(app.canvas, arguments)
if (app.shiftDown) {
// @ts-ignore
// @ts-expect-error
const lastGroup = app.graph._groups[app.graph._groups.length - 1]
if (lastGroup) {
// @ts-ignore
// @ts-expect-error
roundVectorToGrid(lastGroup.pos)
// @ts-ignore
// @ts-expect-error
roundVectorToGrid(lastGroup.size)
}
}

2
src/extensions/core/uploadAudio.ts
View File

@@ -97,7 +97,7 @@ app.registerExtension({
/* name=*/ 'audioUI',
audio
)
// @ts-ignore
// @ts-expect-error
// TODO: Sort out the DOMWidget type.
audioUIWidget.serialize = false

2
src/extensions/core/widgetInputs.ts
View File

@@ -97,7 +97,7 @@ class PrimitiveNode {
onAfterGraphConfigured() {
if (this.outputs[0].links?.length && !this.widgets?.length) {
// TODO: Review this check
// @ts-ignore
// @ts-expect-error
if (!this.#onFirstConnection()) return
// Populate widget values from config data

2
src/main.ts
View File

@@ -13,7 +13,7 @@ import { i18n } from './i18n'
const ComfyUIPreset = definePreset(Aura, {
semantic: {
// @ts-ignore
// @ts-expect-error
primary: Aura.primitive.blue
}
})

149
src/scripts/app.ts
View File

@@ -307,27 +307,27 @@ export class ComfyApp {
if (ComfyApp.clipspace.widgets) {
ComfyApp.clipspace.widgets.forEach(({ type, name, value }) => {
const prop = Object.values(node.widgets).find(
// @ts-ignoreg
// @ts-expect-errorg
(obj) => obj.type === type && obj.name === name
)
// @ts-ignore
// @ts-expect-error
if (prop && prop.type != 'button') {
if (
// @ts-ignore
// @ts-expect-error
prop.type != 'image' &&
// @ts-ignore
// @ts-expect-error
typeof prop.value == 'string' &&
value.filename
) {
// @ts-ignore
// @ts-expect-error
prop.value =
(value.subfolder ? value.subfolder + '/' : '') +
value.filename +
(value.type ? ` [${value.type}]` : '')
} else {
// @ts-ignore
// @ts-expect-error
prop.value = value
// @ts-ignore
// @ts-expect-error
prop.callback(value)
}
}
@@ -391,10 +391,8 @@ export class ComfyApp {
}
#addRestoreWorkflowView() {
// @ts-ignore
const serialize = LGraph.prototype.serialize
const self = this
// @ts-ignore
LGraph.prototype.serialize = function () {
const workflow = serialize.apply(this, arguments)
@@ -1009,7 +1007,7 @@ export class ComfyApp {
this.dragOverNode = null
// Node handles file drop, we dont use the built in onDropFile handler as its buggy
// If you drag multiple files it will call it multiple times with the same file
// @ts-ignore This is not a standard event. TODO fix it.
// @ts-expect-error This is not a standard event. TODO fix it.
if (n && n.onDragDrop && (await n.onDragDrop(event))) {
return
}
@@ -1047,10 +1045,10 @@ export class ComfyApp {
'dragover',
(e) => {
this.canvas.adjustMouseEvent(e)
// @ts-ignore: canvasX and canvasY are added by adjustMouseEvent in litegraph
// @ts-expect-error: canvasX and canvasY are added by adjustMouseEvent in litegraph
const node = this.graph.getNodeOnPos(e.canvasX, e.canvasY)
if (node) {
// @ts-ignore This is not a standard event. TODO fix it.
// @ts-expect-error This is not a standard event. TODO fix it.
if (node.onDragOver && node.onDragOver(e)) {
this.dragOverNode = node
@@ -1076,7 +1074,7 @@ export class ComfyApp {
// this is handled by litegraph
if (this.shiftDown) return
// @ts-ignore: Property 'clipboardData' does not exist on type 'Window & typeof globalThis'.
// @ts-expect-error: Property 'clipboardData' does not exist on type 'Window & typeof globalThis'.
// Did you mean 'Clipboard'?ts(2551)
// TODO: Not sure what the code wants to do.
let data = e.clipboardData || window.clipboardData
@@ -1179,9 +1177,7 @@ export class ComfyApp {
#addProcessMouseHandler() {
const self = this
// @ts-ignore
const origProcessMouseDown = LGraphCanvas.prototype.processMouseDown
// @ts-ignore
LGraphCanvas.prototype.processMouseDown = function (e) {
// prepare for ctrl+shift drag: zoom start
if (e.ctrlKey && e.shiftKey && e.buttons) {
@@ -1201,9 +1197,9 @@ export class ComfyApp {
// Move group by header
if (
LiteGraph.isInsideRectangle(
// @ts-ignore
// @ts-expect-error
e.canvasX,
// @ts-ignore
// @ts-expect-error
e.canvasY,
this.selected_group.pos[0],
this.selected_group.pos[1],
@@ -1217,9 +1213,7 @@ export class ComfyApp {
return res
}
// @ts-ignore
const origProcessMouseMove = LGraphCanvas.prototype.processMouseMove
// @ts-ignore
LGraphCanvas.prototype.processMouseMove = function (e) {
// handle ctrl+shift drag
if (e.ctrlKey && e.shiftKey && self.zoom_drag_start) {
@@ -1275,9 +1269,7 @@ export class ComfyApp {
*/
#addProcessKeyHandler() {
const self = this
// @ts-ignore
const origProcessKey = LGraphCanvas.prototype.processKey
// @ts-ignore
LGraphCanvas.prototype.processKey = function (e) {
if (!this.graph) {
return
@@ -1385,9 +1377,7 @@ export class ComfyApp {
*/
#addDrawGroupsHandler() {
const self = this
// @ts-ignore
const origDrawGroups = LGraphCanvas.prototype.drawGroups
// @ts-ignore
LGraphCanvas.prototype.drawGroups = function (canvas, ctx) {
if (!this.graph) {
return
@@ -1428,10 +1418,8 @@ export class ComfyApp {
* Draws node highlights (executing, drag drop) and progress bar
*/
#addDrawNodeHandler() {
// @ts-ignore
const origDrawNodeShape = LGraphCanvas.prototype.drawNodeShape
const self = this
// @ts-ignore
LGraphCanvas.prototype.drawNodeShape = function (
node,
ctx,
@@ -1464,7 +1452,7 @@ export class ComfyApp {
if (color) {
const shape =
// @ts-ignore
// @ts-expect-error
node._shape || node.constructor.shape || LiteGraph.ROUND_SHAPE
ctx.lineWidth = lineWidth
ctx.globalAlpha = 0.8
@@ -1547,9 +1535,7 @@ export class ComfyApp {
return res
}
// @ts-ignore
const origDrawNode = LGraphCanvas.prototype.drawNode
// @ts-ignore
LGraphCanvas.prototype.drawNode = function (node, ctx) {
var editor_alpha = this.editor_alpha
var old_color = node.color
@@ -1561,7 +1547,7 @@ export class ComfyApp {
}
// ComfyUI's custom node mode enum value 4 => bypass/never.
// @ts-ignore
// @ts-expect-error
if (node.mode === 4) {
// never
node.bgcolor = '#FF00FF'
@@ -1648,9 +1634,9 @@ export class ComfyApp {
}
const node = this.graph.getNodeById(detail.node)
if (node) {
// @ts-ignore
// @ts-expect-error
if (node.onExecuted)
// @ts-ignore
// @ts-expect-error
node.onExecuted(detail.output)
}
})
@@ -1658,11 +1644,11 @@ export class ComfyApp {
api.addEventListener('execution_start', ({ detail }) => {
this.runningNodeId = null
this.lastExecutionError = null
// @ts-ignore
// @ts-expect-error
this.graph._nodes.forEach((node) => {
// @ts-ignore
// @ts-expect-error
if (node.onExecutionStart)
// @ts-ignore
// @ts-expect-error
node.onExecutionStart()
})
})
@@ -1680,7 +1666,7 @@ export class ComfyApp {
const blob = detail
const blobUrl = URL.createObjectURL(blob)
// @ts-ignore
// @ts-expect-error
this.nodePreviewImages[id] = [blobUrl]
})
@@ -1698,10 +1684,8 @@ export class ComfyApp {
#addConfigureHandler() {
const app = this
// @ts-ignore
const configure = LGraph.prototype.configure
// Flag that the graph is configuring to prevent nodes from running checks while its still loading
// @ts-ignore
LGraph.prototype.configure = function () {
app.configuringGraph = true
try {
@@ -1714,23 +1698,22 @@ export class ComfyApp {
#addAfterConfigureHandler() {
const app = this
// @ts-ignore
// @ts-expect-error
const onConfigure = app.graph.onConfigure
// @ts-ignore
// @ts-expect-error
app.graph.onConfigure = function () {
// Fire callbacks before the onConfigure, this is used by widget inputs to setup the config
// @ts-ignore
// @ts-expect-error
for (const node of app.graph._nodes) {
// @ts-ignore
// @ts-expect-error
node.onGraphConfigured?.()
}
const r = onConfigure?.apply(this, arguments)
// Fire after onConfigure, used by primitves to generate widget using input nodes config
// @ts-ignore _nodes is private.
// @ts-expect-error _nodes is private.
for (const node of app.graph._nodes) {
// @ts-ignore
node.onAfterGraphConfigured?.()
}
@@ -2025,18 +2008,18 @@ export class ComfyApp {
this.addInput(inputName, type)
widgetCreated = false
}
// @ts-ignore
// @ts-expect-error
if (widgetCreated && inputData[1]?.forceInput && config?.widget) {
// @ts-ignore
// @ts-expect-error
if (!config.widget.options) config.widget.options = {}
// @ts-ignore
// @ts-expect-error
config.widget.options.forceInput = inputData[1].forceInput
}
// @ts-ignore
// @ts-expect-error
if (widgetCreated && inputData[1]?.defaultInput && config?.widget) {
// @ts-ignore
// @ts-expect-error
if (!config.widget.options) config.widget.options = {}
// @ts-ignore
// @ts-expect-error
config.widget.options.defaultInput = inputData[1].defaultInput
}
}
@@ -2072,9 +2055,9 @@ export class ComfyApp {
this.#addNodeKeyHandler(node)
await this.#invokeExtensionsAsync('beforeRegisterNodeDef', node, nodeData)
// @ts-ignore
// @ts-expect-error
LiteGraph.registerNodeType(nodeId, node)
// @ts-ignore
// @ts-expect-error
node.category = nodeData.category
}
@@ -2146,24 +2129,24 @@ export class ComfyApp {
.map((t) => {
let children = []
if (typeof t === 'object') {
// @ts-ignore
// @ts-expect-error
if (seenTypes.has(t.type)) return null
// @ts-ignore
// @ts-expect-error
seenTypes.add(t.type)
// @ts-ignore
// @ts-expect-error
children.push($el('span', { textContent: t.type }))
// @ts-ignore
// @ts-expect-error
if (t.hint) {
// @ts-ignore
// @ts-expect-error
children.push($el('span', { textContent: t.hint }))
}
// @ts-ignore
// @ts-expect-error
if (t.action) {
children.push(
$el('button', {
// @ts-ignore
// @ts-expect-error
onclick: t.action.callback,
// @ts-ignore
// @ts-expect-error
textContent: t.action.text
})
)
@@ -2171,7 +2154,7 @@ export class ComfyApp {
} else {
if (seenTypes.has(t)) return null
seenTypes.add(t)
// @ts-ignore
// @ts-expect-error
children.push($el('span', { textContent: t }))
}
return $el('li', children)
@@ -2266,7 +2249,7 @@ export class ComfyApp {
this.enableWorkflowViewRestore.value &&
graphData.extra?.ds
) {
// @ts-ignore
// @ts-expect-error
// Need to set strict: true for zod to match the type [number, number]
// https://github.com/colinhacks/zod/issues/3056
this.canvas.ds.offset = graphData.extra.ds.offset
@@ -2327,17 +2310,15 @@ export class ComfyApp {
return
}
// @ts-ignore
// @ts-expect-error
for (const node of this.graph._nodes) {
const size = node.computeSize()
size[0] = Math.max(node.size[0], size[0])
size[1] = Math.max(node.size[1], size[1])
node.size = size
// @ts-ignore
if (node.widgets) {
// If you break something in the backend and want to patch workflows in the frontend
// This is the place to do this
// @ts-ignore
for (let widget of node.widgets) {
if (node.type == 'KSampler' || node.type == 'KSamplerAdvanced') {
if (widget.name == 'sampler_name') {
@@ -2547,9 +2528,9 @@ export class ComfyApp {
for (const [nodeID, nodeError] of Object.entries(
error.response.node_errors
)) {
// @ts-ignore
// @ts-expect-error
message += '\n' + nodeError.class_type + ':'
// @ts-ignore
// @ts-expect-error
for (const errorReason of nodeError.errors) {
message +=
'\n - ' + errorReason.message + ': ' + errorReason.details
@@ -2619,9 +2600,9 @@ export class ComfyApp {
for (const widget of node.widgets) {
// Allow widgets to run callbacks after a prompt has been queued
// e.g. random seed after every gen
// @ts-ignore
// @ts-expect-error
if (widget.afterQueued) {
// @ts-ignore
// @ts-expect-error
widget.afterQueued()
}
}
@@ -2727,18 +2708,18 @@ export class ComfyApp {
) {
const info = await getLatentMetadata(file)
// TODO define schema to LatentMetadata
// @ts-ignore
// @ts-expect-error
if (info.workflow) {
await this.loadGraphData(
// @ts-ignore
// @ts-expect-error
JSON.parse(info.workflow),
true,
true,
fileName
)
// @ts-ignore
// @ts-expect-error
} else if (info.prompt) {
// @ts-ignore
// @ts-expect-error
this.loadApiJson(JSON.parse(info.prompt))
} else {
this.showErrorOnFileLoad(file)
@@ -2749,18 +2730,18 @@ export class ComfyApp {
}
isApiJson(data) {
// @ts-ignore
// @ts-expect-error
return Object.values(data).every((v) => v.class_type)
}
loadApiJson(apiData, fileName: string) {
const missingNodeTypes = Object.values(apiData).filter(
// @ts-ignore
// @ts-expect-error
(n) => !LiteGraph.registered_node_types[n.class_type]
)
if (missingNodeTypes.length) {
this.showMissingNodesError(
// @ts-ignore
// @ts-expect-error
missingNodeTypes.map((t) => t.class_type),
false
)
@@ -2772,7 +2753,7 @@ export class ComfyApp {
for (const id of ids) {
const data = apiData[id]
const node = LiteGraph.createNode(data.class_type)
// @ts-ignore
// @ts-expect-error
node.id = isNaN(+id) ? id : +id
node.title = data._meta?.title ?? node.title
app.graph.add(node)
@@ -2792,7 +2773,7 @@ export class ComfyApp {
try {
// Target has no matching input, most likely a converted widget
const widget = node.widgets?.find((w) => w.name === input)
// @ts-ignore
// @ts-expect-error
if (widget && node.convertWidgetToInput?.(widget)) {
toSlot = node.inputs?.length - 1
}
@@ -2805,7 +2786,7 @@ export class ComfyApp {
const widget = node.widgets?.find((w) => w.name === input)
if (widget) {
widget.value = value
// @ts-ignore
// @ts-expect-error
widget.callback?.(value)
}
}
@@ -2827,7 +2808,7 @@ export class ComfyApp {
try {
// Target has no matching input, most likely a converted widget
const widget = node.widgets?.find((w) => w.name === input)
// @ts-ignore
// @ts-expect-error
if (widget && node.convertWidgetToInput?.(widget)) {
toSlot = node.inputs?.length - 1
}
@@ -2840,7 +2821,7 @@ export class ComfyApp {
const widget = node.widgets?.find((w) => w.name === input)
if (widget) {
widget.value = value
// @ts-ignore
// @ts-expect-error
widget.callback?.(value)
}
}
@@ -2873,12 +2854,12 @@ export class ComfyApp {
for (const nodeId in defs) {
this.registerNodeDef(nodeId, defs[nodeId])
}
// @ts-ignore
// @ts-expect-error
for (let nodeNum in this.graph._nodes) {
// @ts-ignore
// @ts-expect-error
const node = this.graph._nodes[nodeNum]
const def = defs[node.type]
// @ts-ignore
// @ts-expect-error
// Allow primitive nodes to handle refresh
node.refreshComboInNode?.(defs)
@@ -2897,7 +2878,7 @@ export class ComfyApp {
!widget.options.values.includes(widget.value)
) {
widget.value = widget.options.values[0]
// @ts-ignore
// @ts-expect-error
widget.callback(widget.value)
}
}

6
src/scripts/changeTracker.ts
View File

@@ -110,7 +110,7 @@ export class ChangeTracker {
window.addEventListener(
'keydown',
(e) => {
const activeEl = document.activeElement;
const activeEl = document.activeElement
requestAnimationFrame(async () => {
let bindInputEl
// If we are auto queue in change mode then we do want to trigger on inputs
@@ -165,17 +165,13 @@ export class ChangeTracker {
})
// Handle litegraph clicks
// @ts-ignore
const processMouseUp = LGraphCanvas.prototype.processMouseUp
// @ts-ignore
LGraphCanvas.prototype.processMouseUp = function (e) {
const v = processMouseUp.apply(this, arguments)
changeTracker().checkState()
return v
}
// @ts-ignore
const processMouseDown = LGraphCanvas.prototype.processMouseDown
// @ts-ignore
LGraphCanvas.prototype.processMouseDown = function (e) {
const v = processMouseDown.apply(this, arguments)
changeTracker().checkState()

10
src/scripts/domWidget.ts
View File

@@ -221,16 +221,16 @@ const computeVisibleNodes = LGraphCanvas.prototype.computeVisibleNodes
//@ts-ignore
LGraphCanvas.prototype.computeVisibleNodes = function (): LGraphNode[] {
const visibleNodes = computeVisibleNodes.apply(this, arguments)
// @ts-ignore
// @ts-expect-error
for (const node of app.graph._nodes) {
if (elementWidgets.has(node)) {
const hidden = visibleNodes.indexOf(node) === -1
for (const w of node.widgets) {
// @ts-ignore
// @ts-expect-error
if (w.element) {
// @ts-ignore
// @ts-expect-error
w.element.hidden = hidden
// @ts-ignore
// @ts-expect-error
w.element.style.display = hidden ? 'none' : undefined
if (hidden) {
w.options.onHide?.(w)
@@ -336,7 +336,7 @@ LGraphNode.prototype.addDOMWidget = function (
width: `${widgetWidth - margin * 2}px`,
height: `${(widget.computedHeight ?? 50) - margin * 2}px`,
position: 'absolute',
// @ts-ignore
// @ts-expect-error
zIndex: app.graph._nodes.indexOf(node)
})

8
src/scripts/ui/userSelection.ts
View File

@@ -59,9 +59,9 @@ export class UserSelectionScreen {
// Property 'readonly' does not exist on type 'HTMLInputElement'. Did you mean 'readOnly'?ts(2551)
input.disabled =
select.disabled =
// @ts-ignore
// @ts-expect-error
input.readonly =
// @ts-ignore
// @ts-expect-error
select.readonly =
true
const spinner = createSpinner()
@@ -92,9 +92,9 @@ export class UserSelectionScreen {
// Property 'readonly' does not exist on type 'HTMLInputElement'. Did you mean 'readOnly'?ts(2551)
input.disabled =
select.disabled =
// @ts-ignore
// @ts-expect-error
input.readonly =
// @ts-ignore
// @ts-expect-error
select.readonly =
false
return

4
src/scripts/utils.ts
View File

@@ -56,13 +56,13 @@ export function applyTextReplacements(app: ComfyApp, value: string): string {
}
// Find node with matching S&R property name
// @ts-ignore
// @ts-expect-error
let nodes = app.graph._nodes.filter(
(n) => n.properties?.['Node name for S&R'] === split[0]
)
// If we cant, see if there is a node with that title
if (!nodes.length) {
// @ts-ignore
// @ts-expect-error
nodes = app.graph._nodes.filter((n) => n.title === split[0])
}
if (!nodes.length) {

14
src/scripts/widgets.ts
View File

@@ -457,7 +457,6 @@ export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
}
if (inputData[1]?.control_after_generate) {
// TODO make combo handle a widget node type?
// @ts-ignore
res.widget.linkedWidgets = addValueControlWidgets(
node,
res.widget,
@@ -475,7 +474,6 @@ export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
app
) {
// TODO make image upload handle a custom node type?
// @ts-ignore
const imageWidget = node.widgets.find(
(w) => w.name === (inputData[1]?.widget ?? 'image')
)
@@ -484,7 +482,7 @@ export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
function showImage(name) {
const img = new Image()
img.onload = () => {
// @ts-ignore
// @ts-expect-error
node.imgs = [img]
app.graph.setDirtyCanvas(true)
}
@@ -497,7 +495,7 @@ export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
img.src = api.apiURL(
`/view?filename=${encodeURIComponent(name)}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}${app.getRandParam()}`
)
// @ts-ignore
// @ts-expect-error
node.setSizeForImage?.()
}
@@ -531,7 +529,7 @@ export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
// Add our own callback to the combo widget to render an image when it changes
// TODO: Explain this?
// @ts-ignore
// @ts-expect-error
const cb = node.callback
imageWidget.callback = function () {
showImage(imageWidget.value)
@@ -603,7 +601,7 @@ export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
uploadWidget.serialize = false
// Add handler to check if an image is being dragged over our node
// @ts-ignore
// @ts-expect-error
node.onDragOver = function (e) {
if (e.dataTransfer && e.dataTransfer.items) {
const image = [...e.dataTransfer.items].find((f) => f.kind === 'file')
@@ -614,7 +612,7 @@ export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
}
// On drop upload files
// @ts-ignore
// @ts-expect-error
node.onDragDrop = function (e) {
console.log('onDragDrop called')
let handled = false
@@ -628,7 +626,7 @@ export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
return handled
}
// @ts-ignore
// @ts-expect-error
node.pasteFile = function (file) {
if (file.type.startsWith('image/')) {
const is_pasted =

3
src/scripts/workflows.ts
View File

@@ -384,10 +384,9 @@ export class ComfyWorkflow {
if (!data) return
const old = localStorage.getItem('litegrapheditor_clipboard')
// @ts-ignore
const graph = new LGraph(data)
const canvas = new LGraphCanvas(null, graph, {
// @ts-ignore
// @ts-expect-error
skip_events: true,
skip_render: true
})

2
tests-ui/tests/groupNode.test.ts
View File

@@ -790,7 +790,7 @@ describe('group node', () => {
})
expect(dialogShow).toBeCalledTimes(1)
// @ts-ignore
// @ts-expect-error
const call = dialogShow.mock.calls[0][0].innerHTML
expect(call).toContain('the following node types were not found')
expect(call).toContain('NotKSampler')

2
tests-ui/tests/litegraph.test.ts
View File

@@ -31,7 +31,7 @@ describe('LGraph', () => {
const result1 = graph.serialize()
expect(result1.nodes).not.toHaveLength(0)
// @ts-ignore
// @ts-expect-error
graph._nodes = swapNodes(graph._nodes)
const result2 = graph.serialize()

1
tests-ui/tests/users.test.ts
View File

@@ -43,7 +43,6 @@ describe('users', () => {
resolve()
return res
})
// @ts-ignore
setTimeout(
() => reject('timeout waiting for UserSelectionScreen to be shown.'),
500

5
tests-ui/tests/widgetInputs.test.ts
View File

@@ -93,7 +93,6 @@ describe('widget inputs', () => {
const input = w.getConvertedInput()
expect(input).toBeTruthy()
// @ts-ignore : input is valid here
await connectPrimitiveAndReload(
ez,
graph,
@@ -234,11 +233,11 @@ describe('widget inputs', () => {
})
expect(dialogShow).toBeCalledTimes(1)
// @ts-ignore
// @ts-expect-error
expect(dialogShow.mock.calls[0][0].innerHTML).toContain(
'the following node types were not found'
)
// @ts-ignore
// @ts-expect-error
expect(dialogShow.mock.calls[0][0].innerHTML).toContain('TestNode')
})

13
tests-ui/utils/ezgraph.ts
View File

@@ -206,7 +206,6 @@ export class EzWidget {
}
get isConvertedToInput() {
// @ts-ignore : this type is valid for converted widgets
return this.widget.type === 'converted-widget'
}
@@ -297,12 +296,12 @@ export class EzNode {
// * @returns { Record<string, type extends "inputs" ? EzInput : EzOutput> & (type extends "inputs" ? EzInput [] : EzOutput[]) }
// */
// #getSlotItems(type) {
// // @ts-ignore : these items are correct
// // @ts-expect-error : these items are correct
// return (this.node[type] ?? []).reduce((p, s, i) => {
// if (s.name in p) {
// throw new Error(`Unable to store input ${s.name} on array as name conflicts.`);
// }
// // @ts-ignore
// // @ts-expect-error
// p.push((p[s.name] = new (type === "inputs" ? EzInput : EzOutput)(this, i, s)));
// return p;
// }, Object.assign([], { $: this }));
@@ -320,24 +319,20 @@ export class EzNode {
typeof nodeProperty === 'function'
? nodeProperty()
: this.node[nodeProperty]
// @ts-ignore
return (items ?? []).reduce(
(p, s, i) => {
if (!s) return p
const name = s[nameProperty]
const item = new ctor(this, i, s)
// @ts-ignore
p.push(item)
if (name) {
// @ts-ignore
if (name in p) {
throw new Error(
`Unable to store ${nodeProperty} ${name} on array as name conflicts.`
)
}
}
// @ts-ignore
p[name] = item
return p
},
@@ -404,7 +399,7 @@ export class EzGraph {
this.app.graph.clear()
setTimeout(async () => {
await this.app.loadGraphData(graph)
// @ts-ignore
// @ts-expect-error
r()
}, 10)
})
@@ -419,7 +414,6 @@ export class EzGraph {
* }>}> }
*/
toPrompt() {
// @ts-ignore
return this.app.graphToPrompt()
}
}
@@ -452,7 +446,6 @@ export const Ez = {
app.graph.clear()
}
// @ts-ignore : this proxy handles utility methods & node creation
const factory = new Proxy(
{},
{

4
tests-ui/utils/index.ts
View File

@@ -50,7 +50,6 @@ export async function start(config: StartConfig = {}): Promise<StartResult> {
app.canvasContainer.prepend(canvasEl)
await app.setup(canvasEl)
// @ts-ignore
return { ...Ez.graph(app, LiteGraph, LGraphCanvas), app }
}
@@ -92,11 +91,8 @@ export function makeNodeDef(name, input, output = {}) {
}, {})
}
for (const k in output) {
// @ts-ignore
nodeDef.output.push(output[k])
// @ts-ignore
nodeDef.output_name.push(k)
// @ts-ignore
nodeDef.output_is_list.push(false)
}

2
tests-ui/utils/setup.ts
View File

@@ -67,11 +67,9 @@ export function mockApi(config: APIConfig = {}) {
apiURL: jest.fn((x) => 'src/' + x),
fileURL: jest.fn((x) => 'src/' + x),
createUser: jest.fn((username) => {
// @ts-ignore
if (username in userConfig.users) {
return { status: 400, json: () => 'Duplicate' }
}
// @ts-ignore
userConfig.users[username + '!'] = username
return { status: 200, json: () => username + '!' }
}),

7
tsconfig.json
View File

@@ -5,6 +5,7 @@
"module": "ESNext",
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
"incremental": true,
"sourceMap": true,
"esModuleInterop": true,
"moduleResolution": "Node",
@@ -22,16 +23,16 @@
"allowJs": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@/*": ["src/*"]
},
"typeRoots": ["src/types", "node_modules/@types"],
"outDir": "./dist",
"rootDir": "./",
"rootDir": "./"
},
"include": [
"src/**/*",
"src/**/*.vue",
"src/types/**/*.d.ts",
"tests-ui/**/*"
],
]
}