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

[Refactor] Prefer modern for..of loops (#566)

Browse Source 
- Replaces traditional incrementing `for` loops and `forEach()` calls with modern `for..of` syntax
- Improves readability
- Semantic checking used; not expecting issues to arise from this portion
This commit is contained in:
filtered
2025-02-24 06:59:41 +11:00
committed by GitHub
parent de5ea39c71
commit 4163cb04b8
7 changed files with 121 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/ContextMenu.ts
View File

@@ -238,8 +238,8 @@ export class ContextMenu {
const setAriaExpanded = () => {
const entries = this.root.querySelectorAll("div.litemenu-entry.has_submenu")
if (entries) {
for (let i = 0; i < entries.length; i++) {
entries[i].setAttribute("aria-expanded", "false")
for (const entry of entries) {
entry.setAttribute("aria-expanded", "false")
}
}
element.setAttribute("aria-expanded", "true")

6
src/CurveEditor.ts
View File

@@ -71,15 +71,13 @@ export class CurveEditor {
ctx.strokeStyle = line_color
if (inactive) ctx.globalAlpha = 0.5
ctx.beginPath()
for (let i = 0; i < points.length; ++i) {
const p = points[i]
for (const p of points) {
ctx.lineTo(p[0] * w, (1.0 - p[1]) * h)
}
ctx.stroke()
ctx.globalAlpha = 1
if (!inactive)
for (let i = 0; i < points.length; ++i) {
const p = points[i]
for (const [i, p] of points.entries()) {
ctx.fillStyle = this.selected == i
? "#FFF"
: this.nearest == i ? "#DDD" : "#AAA"

33
src/LGraph.ts
View File

@@ -658,8 +658,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
const nodes = this.computeExecutionOrder(false, true)
const columns: LGraphNode[][] = []
for (let i = 0; i < nodes.length; ++i) {
const node = nodes[i]
for (const node of nodes) {
const col = node._level || 1
columns[col] ||= []
columns[col].push(node)
@@ -667,14 +666,12 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
let x = margin
for (let i = 0; i < columns.length; ++i) {
const column = columns[i]
for (const column of columns) {
if (!column) continue
let max_size = 100
let y = margin + LiteGraph.NODE_TITLE_HEIGHT
for (let j = 0; j < column.length; ++j) {
const node = column[j]
for (const node of column) {
node.pos[0] = layout == LiteGraph.VERTICAL_LAYOUT ? y : x
node.pos[1] = layout == LiteGraph.VERTICAL_LAYOUT ? x : y
const max_size_index = layout == LiteGraph.VERTICAL_LAYOUT ? 1 : 0
@@ -751,7 +748,9 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
* @param action Action to run for every canvas
*/
canvasAction(action: (canvas: LGraphCanvas) => void): void {
this.list_of_graphcanvas?.forEach(action)
const canvases = this.list_of_graphcanvas
if (!canvases) return
for (const canvas of canvases) action(canvas)
}
/** @deprecated See {@link LGraph.canvasAction} */
@@ -1057,9 +1056,9 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
const snapTo = this.getSnapToGridSize()
if (!snapTo) return
getAllNestedItems(items).forEach((item) => {
for (const item of getAllNestedItems(items)) {
if (!item.pinned) item.snapToGrid(snapTo)
})
}
}
/**
@@ -1297,18 +1296,18 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/** @todo Clean up - never implemented. */
triggerInput(name: string, value: any): void {
const nodes = this.findNodesByTitle(name)
for (let i = 0; i < nodes.length; ++i) {
for (const node of nodes) {
// @ts-expect-error
nodes[i].onTrigger(value)
node.onTrigger(value)
}
}
/** @todo Clean up - never implemented. */
setCallback(name: string, func: any): void {
const nodes = this.findNodesByTitle(name)
for (let i = 0; i < nodes.length; ++i) {
for (const node of nodes) {
// @ts-expect-error
nodes[i].setTrigger(func)
node.setTrigger(func)
}
}
@@ -1390,9 +1389,11 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
const link = this._links.get(linkId)
if (!link) continue
if (link.parentId === before.parentId) link.parentId = rerouteId
LLink.getReroutes(this, link)
?.filter(x => x.parentId === before.parentId)
.forEach(x => x.parentId = rerouteId)
const reroutes = LLink.getReroutes(this, link)
for (const x of reroutes.filter(x => x.parentId === before.parentId)) {
x.parentId = rerouteId
}
}
return reroute

133
src/LGraphCanvas.ts
View File

@@ -911,8 +911,7 @@ export class LGraphCanvas implements ConnectionColorContext {
let entries: IOptionalSlotData<INodeInputSlot>[] = []
if (options) {
for (let i = 0; i < options.length; i++) {
const entry = options[i]
for (const entry of options) {
if (!entry) {
entries.push(null)
continue
@@ -991,8 +990,7 @@ export class LGraphCanvas implements ConnectionColorContext {
let entries: IOptionalSlotData<INodeOutputSlot>[] = []
if (options) {
for (let i = 0; i < options.length; i++) {
const entry = options[i]
for (const entry of options) {
if (!entry) {
// separator?
entries.push(null)
@@ -3731,10 +3729,16 @@ export class LGraphCanvas implements ConnectionColorContext {
this.onNodeSelected?.(item)
// Highlight links
item.inputs?.forEach(input => this.highlighted_links[input.link] = true)
item.outputs
?.flatMap(x => x.links)
.forEach(id => this.highlighted_links[id] = true)
if (item.inputs) {
for (const input of item.inputs) {
this.highlighted_links[input.link] = true
}
}
if (item.outputs) {
for (const id of item.outputs.flatMap(x => x.links)) {
this.highlighted_links[id] = true
}
}
}
/**
@@ -3755,10 +3759,16 @@ export class LGraphCanvas implements ConnectionColorContext {
this.onNodeDeselected?.(item)
// Clear link highlight
item.inputs?.forEach(input => delete this.highlighted_links[input.link])
item.outputs
?.flatMap(x => x.links)
.forEach(id => delete this.highlighted_links[id])
if (item.inputs) {
for (const input of item.inputs) {
delete this.highlighted_links[input.link]
}
}
if (item.outputs) {
for (const id of item.outputs.flatMap(x => x.links)) {
delete this.highlighted_links[id]
}
}
}
/** @deprecated See {@link LGraphCanvas.processSelect} */
@@ -3846,9 +3856,16 @@ export class LGraphCanvas implements ConnectionColorContext {
if (oldNode) this.selected_nodes[oldNode.id] = oldNode
// Highlight links
keepSelected.inputs?.forEach(input => this.highlighted_links[input.link] = true)
keepSelected.outputs?.flatMap(x => x.links)
.forEach(id => this.highlighted_links[id] = true)
if (keepSelected.inputs) {
for (const input of keepSelected.inputs) {
this.highlighted_links[input.link] = true
}
}
if (keepSelected.outputs) {
for (const id of keepSelected.outputs.flatMap(x => x.links)) {
this.highlighted_links[id] = true
}
}
}
this.onSelectionChange?.(this.selected_nodes)
@@ -4134,9 +4151,7 @@ export class LGraphCanvas implements ConnectionColorContext {
const visible_nodes = this.visible_nodes
const drawSnapGuides = this.#snapToGrid && this.isDragging
for (let i = 0; i < visible_nodes.length; ++i) {
const node = visible_nodes[i]
for (const node of visible_nodes) {
ctx.save()
// Draw snap shadow
@@ -5454,8 +5469,7 @@ export class LGraphCanvas implements ConnectionColorContext {
ctx.globalAlpha = 0.75
const visible_nodes = this.visible_nodes
for (let i = 0; i < visible_nodes.length; ++i) {
const node = visible_nodes[i]
for (const node of visible_nodes) {
ctx.fillStyle = "black"
ctx.fillRect(
node.pos[0] - LiteGraph.NODE_TITLE_HEIGHT,
@@ -5512,9 +5526,7 @@ export class LGraphCanvas implements ConnectionColorContext {
ctx.globalAlpha = 0.5 * this.editor_alpha
const drawSnapGuides = this.#snapToGrid && this.isDragging
for (let i = 0; i < groups.length; ++i) {
const group = groups[i]
for (const group of groups) {
if (!overlapBounding(this.visible_area, group._bounding)) {
continue
} // out of the visible area
@@ -6383,8 +6395,8 @@ export class LGraphCanvas implements ConnectionColorContext {
if (that.onSearchBox) {
const list = that.onSearchBox(helper, str, graphcanvas)
if (list) {
for (let i = 0; i < list.length; ++i) {
addResult(list[i])
for (const item of list) {
addResult(item)
}
}
} else {
@@ -6431,8 +6443,8 @@ export class LGraphCanvas implements ConnectionColorContext {
}
}
for (let i = 0; i < filtered.length; i++) {
addResult(filtered[i])
for (const item of filtered) {
addResult(item)
if (LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit)
break
}
@@ -6456,9 +6468,8 @@ export class LGraphCanvas implements ConnectionColorContext {
filtered_extra.push(i)
}
// @ts-expect-error
for (let i = 0; i < filtered_extra.length; i++) {
// @ts-expect-error
addResult(filtered_extra[i], "generic_type")
for (const extraItem of filtered_extra) {
addResult(extraItem, "generic_type")
if (LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit)
break
}
@@ -6478,9 +6489,8 @@ export class LGraphCanvas implements ConnectionColorContext {
filtered_extra.push(i)
}
// @ts-expect-error
for (let i = 0; i < filtered_extra.length; i++) {
// @ts-expect-error
addResult(filtered_extra[i], "not_in_filter")
for (const extraItem of filtered_extra) {
addResult(extraItem, "not_in_filter")
if (LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit)
break
}
@@ -6747,20 +6757,22 @@ export class LGraphCanvas implements ConnectionColorContext {
if (options.checkForInput) {
const aI = dialog.querySelectorAll("input")
const focused = false
aI?.forEach(function (iX) {
iX.addEventListener("keydown", function (e) {
dialog.modified()
if (e.keyCode == 27) {
dialog.close()
} else if (e.keyCode != 13) {
return
}
// set value ?
e.preventDefault()
e.stopPropagation()
})
if (!focused) iX.focus()
})
if (aI) {
for (const iX of aI) {
iX.addEventListener("keydown", function (e) {
dialog.modified()
if (e.keyCode == 27) {
dialog.close()
} else if (e.keyCode != 13) {
return
}
// set value ?
e.preventDefault()
e.stopPropagation()
})
if (!focused) iX.focus()
}
}
}
dialog.modified = function () {
@@ -6787,17 +6799,19 @@ export class LGraphCanvas implements ConnectionColorContext {
})
const selInDia = dialog.querySelectorAll("select")
// if filtering, check focus changed to comboboxes and prevent closing
selInDia?.forEach(function (selIn) {
selIn.addEventListener("click", function () {
prevent_timeout++
})
selIn.addEventListener("blur", function () {
prevent_timeout = 0
})
selIn.addEventListener("change", function () {
prevent_timeout = -1
})
})
if (selInDia) {
for (const selIn of selInDia) {
selIn.addEventListener("click", function () {
prevent_timeout++
})
selIn.addEventListener("blur", function () {
prevent_timeout = 0
})
selIn.addEventListener("change", function () {
prevent_timeout = -1
})
}
}
return dialog
}
@@ -7130,8 +7144,7 @@ export class LGraphCanvas implements ConnectionColorContext {
if (!this.canvas) return
const panels = this.canvas.parentNode.querySelectorAll(".litegraph.dialog")
for (let i = 0; i < panels.length; ++i) {
const panel = panels[i]
for (const panel of panels) {
// @ts-expect-error Panel
if (!panel.node) continue
// @ts-expect-error Panel

20
src/LGraphNode.ts
View File

@@ -1235,8 +1235,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
if (this.graph) this.graph._last_trigger_time = LiteGraph.getTime()
// for every link attached here
for (let k = 0; k < links.length; ++k) {
const id = links[k]
for (const id of links) {
// to skip links
if (link_id != null && link_id != id) continue
@@ -1282,8 +1281,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
if (!links || !links.length) return
// for every link attached here
for (let k = 0; k < links.length; ++k) {
const id = links[k]
for (const id of links) {
// to skip links
if (link_id != null && link_id != id) continue
@@ -1407,8 +1405,8 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
if (!this.outputs[i] || !this.outputs[i].links) continue
const links = this.outputs[i].links
for (let j = 0; j < links.length; ++j) {
const link = this.graph._links.get(links[j])
for (const linkId of links) {
const link = this.graph._links.get(linkId)
if (!link) continue
link.origin_slot -= 1
@@ -2411,8 +2409,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
target_node.inputs[targetIndex].link = link_info.id
// Reroutes
LLink.getReroutes(graph, link_info)
.forEach(x => x?.linkIds.add(nextId))
for (const x of LLink.getReroutes(graph, link_info)) x?.linkIds.add(nextId)
graph._version++
// link_info has been created now, so its updated
@@ -2743,8 +2740,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
const list = this.graph.list_of_graphcanvas
for (let i = 0; i < list.length; ++i) {
const c = list[i]
for (const c of list) {
// releasing somebody elses capture?!
if (!v && c.node_capturing_input != this) continue
@@ -3362,9 +3358,9 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
const allocations = distributeSpace(Math.max(0, freeSpace), spaceRequests)
// Apply computed heights
growableWidgets.forEach((d, i) => {
for (const [i, d] of growableWidgets.entries()) {
d.w.computedHeight = allocations[i]
})
}
// Position widgets
let y = widgetStartY

35
src/LiteGraphGlobal.ts
View File

@@ -390,8 +390,7 @@ export class LiteGraphGlobal {
allTypes = ["*"]
}
for (let i = 0; i < allTypes.length; ++i) {
let slotType = allTypes[i]
for (let slotType of allTypes) {
if (slotType === "") slotType = "*"
const registerTo = out
@@ -556,15 +555,15 @@ export class LiteGraphGlobal {
const tmp = document.getElementsByTagName("script")
// weird, this array changes by its own, so we use a copy
const script_files = []
for (let i = 0; i < tmp.length; i++) {
script_files.push(tmp[i])
for (const element of tmp) {
script_files.push(element)
}
const docHeadObj = document.getElementsByTagName("head")[0]
folder_wildcard = document.location.href + folder_wildcard
for (let i = 0; i < script_files.length; i++) {
const src = script_files[i].src
for (const script_file of script_files) {
const src = script_file.src
if (!src || src.substr(0, folder_wildcard.length) != folder_wildcard)
continue
@@ -574,7 +573,7 @@ export class LiteGraphGlobal {
dynamicScript.type = "text/javascript"
dynamicScript.src = src
docHeadObj.appendChild(dynamicScript)
docHeadObj.removeChild(script_files[i])
docHeadObj.removeChild(script_file)
} catch (err) {
if (this.throw_errors) throw err
if (this.debug) console.log("Error while reloading " + src)
@@ -637,9 +636,9 @@ export class LiteGraphGlobal {
// Check all permutations to see if one is valid
const supported_types_a = type_a.split(",")
const supported_types_b = type_b.split(",")
for (let i = 0; i < supported_types_a.length; ++i) {
for (let j = 0; j < supported_types_b.length; ++j) {
if (this.isValidConnection(supported_types_a[i], supported_types_b[j]))
for (const a of supported_types_a) {
for (const b of supported_types_b) {
if (this.isValidConnection(a, b))
return true
}
}
@@ -865,16 +864,16 @@ export class LiteGraphGlobal {
const elements = ref_window.document.querySelectorAll(".litecontextmenu")
if (!elements.length) return
const result = []
for (let i = 0; i < elements.length; i++) {
result.push(elements[i])
const results = []
for (const element of elements) {
results.push(element)
}
for (let i = 0; i < result.length; i++) {
if (result[i].close) {
result[i].close()
} else if (result[i].parentNode) {
result[i].parentNode.removeChild(result[i])
for (const result of results) {
if (result.close) {
result.close()
} else if (result.parentNode) {
result.parentNode.removeChild(result)
}
}
}

4
src/utils/collections.ts
View File

@@ -10,13 +10,13 @@ import { LGraphNode } from "@/LGraphNode"
*/
export function getAllNestedItems(items: ReadonlySet<Positionable>): Set<Positionable> {
const allItems = new Set<Positionable>()
items?.forEach(x => addRecursively(x, allItems))
if (items) for (const x of items) addRecursively(x, allItems)
return allItems
function addRecursively(item: Positionable, flatSet: Set<Positionable>): void {
if (flatSet.has(item) || item.pinned) return
flatSet.add(item)
item.children?.forEach(x => addRecursively(x, flatSet))
if (item.children) for (const x of item.children) addRecursively(x, flatSet)
}
}