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

[Refactor] Simplify & standardise canvas code (#744)

Browse Source 
Various clean up & minor refactors / nits.
This commit is contained in:
filtered
2025-03-11 21:21:11 +11:00
committed by GitHub
parent 8ba671a5eb
commit 58011e77b6
1 changed files with 58 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/LGraphCanvas.ts
View File

@@ -258,20 +258,20 @@ export class LGraphCanvas implements ConnectionColorContext {
} }
#updateCursorStyle() { #updateCursorStyle() {
if (this.state.shouldSetCursor) { if (!this.state.shouldSetCursor) return
let cursor = "default"
if (this.state.draggingCanvas) {
cursor = "grabbing"
} else if (this.state.readOnly) {
cursor = "grab"
} else if (this.state.hoveringOver & CanvasItem.ResizeSe) {
cursor = "se-resize"
} else if (this.state.hoveringOver & CanvasItem.Node) {
cursor = "crosshair"
}
this.canvas.style.cursor = cursor let cursor = "default"
if (this.state.draggingCanvas) {
cursor = "grabbing"
} else if (this.state.readOnly) {
cursor = "grab"
} else if (this.state.hoveringOver & CanvasItem.ResizeSe) {
cursor = "se-resize"
} else if (this.state.hoveringOver & CanvasItem.Node) {
cursor = "crosshair"
} }
this.canvas.style.cursor = cursor
} }
// Whether the canvas was previously being dragged prior to pressing space key. // Whether the canvas was previously being dragged prior to pressing space key.
@@ -648,12 +648,10 @@ export class LGraphCanvas implements ConnectionColorContext {
if (this.allow_searchbox) { if (this.allow_searchbox) {
this.showSearchBox(e as unknown as MouseEvent, linkReleaseContext) this.showSearchBox(e as unknown as MouseEvent, linkReleaseContext)
} }
} else if (this.linkConnector.state.connectingTo === "input") {
this.showConnectionMenu({ nodeFrom: firstLink.node, slotFrom: firstLink.fromSlot, e })
} else { } else {
if (this.linkConnector.state.connectingTo === "input") { this.showConnectionMenu({ nodeTo: firstLink.node, slotTo: firstLink.fromSlot, e })
this.showConnectionMenu({ nodeFrom: firstLink.node, slotFrom: firstLink.fromSlot, e: e as unknown as CanvasMouseEvent })
} else {
this.showConnectionMenu({ nodeTo: firstLink.node, slotTo: firstLink.fromSlot, e: e as unknown as CanvasMouseEvent })
}
} }
} }
}) })
@@ -825,7 +823,7 @@ export class LGraphCanvas implements ConnectionColorContext {
node: LGraphNode, node: LGraphNode,
): void { ): void {
new LiteGraph.ContextMenu(["Top", "Bottom", "Left", "Right"], { new LiteGraph.ContextMenu(["Top", "Bottom", "Left", "Right"], {
event: event, event,
callback: inner_clicked, callback: inner_clicked,
parentMenu: prev_menu, parentMenu: prev_menu,
}) })
@@ -847,7 +845,7 @@ export class LGraphCanvas implements ConnectionColorContext {
prev_menu: ContextMenu<string>, prev_menu: ContextMenu<string>,
): void { ): void {
new LiteGraph.ContextMenu(["Top", "Bottom", "Left", "Right"], { new LiteGraph.ContextMenu(["Top", "Bottom", "Left", "Right"], {
event: event, event,
callback: inner_clicked, callback: inner_clicked,
parentMenu: prev_menu, parentMenu: prev_menu,
}) })
@@ -889,7 +887,7 @@ export class LGraphCanvas implements ConnectionColorContext {
): boolean | undefined { ): boolean | undefined {
const canvas = LGraphCanvas.active_canvas const canvas = LGraphCanvas.active_canvas
const ref_window = canvas.getCanvasWindow() const ref_window = canvas.getCanvasWindow()
const graph = canvas.graph const { graph } = canvas
if (!graph) return if (!graph) return
inner_onMenuAdded("", prev_menu) inner_onMenuAdded("", prev_menu)
@@ -909,9 +907,7 @@ export class LGraphCanvas implements ConnectionColorContext {
const categories = LiteGraph const categories = LiteGraph
.getNodeTypesCategories(canvas.filter || graph.filter) .getNodeTypesCategories(canvas.filter || graph.filter)
.filter(function (category) { .filter(category => category.startsWith(base_category))
return category.startsWith(base_category)
})
const entries: AddNodeMenu[] = [] const entries: AddNodeMenu[] = []
for (const category of categories) { for (const category of categories) {
@@ -998,11 +994,8 @@ export class LGraphCanvas implements ConnectionColorContext {
let entries: (IContextMenuValue<INodeSlotContextItem> | null)[] = [] let entries: (IContextMenuValue<INodeSlotContextItem> | null)[] = []
if (LiteGraph.do_add_triggers_slots) { if (LiteGraph.do_add_triggers_slots && node.findOutputSlot("onExecuted") == -1) {
// canvas.allow_addOutSlot_onExecuted entries.push({ content: "On Executed", value: ["onExecuted", LiteGraph.EVENT, { nameLocked: true }], className: "event" })
if (node.findOutputSlot("onExecuted") == -1) {
entries.push({ content: "On Executed", value: ["onExecuted", LiteGraph.EVENT, { nameLocked: true }], className: "event" })
}
} }
// add callback for modifing the menu elements onMenuNodeOutputs // add callback for modifing the menu elements onMenuNodeOutputs
const retEntries = node.onMenuNodeOutputs?.(entries) const retEntries = node.onMenuNodeOutputs?.(entries)
@@ -1016,7 +1009,7 @@ export class LGraphCanvas implements ConnectionColorContext {
event: e, event: e,
callback: inner_clicked, callback: inner_clicked,
parentMenu: prev_menu, parentMenu: prev_menu,
node: node, node,
}, },
) )
@@ -1041,12 +1034,12 @@ export class LGraphCanvas implements ConnectionColorContext {
event: e, event: e,
callback: inner_clicked, callback: inner_clicked,
parentMenu: prev_menu, parentMenu: prev_menu,
node: node, node,
}) })
return false return false
} }
const graph = node.graph const { graph } = node
if (!graph) throw new NullGraphError() if (!graph) throw new NullGraphError()
graph.beforeChange() graph.beforeChange()
@@ -1103,7 +1096,7 @@ export class LGraphCanvas implements ConnectionColorContext {
callback: inner_clicked, callback: inner_clicked,
parentMenu: prev_menu, parentMenu: prev_menu,
allow_html: true, allow_html: true,
node: node, node,
}, },
// @ts-expect-error Unused // @ts-expect-error Unused
ref_window, ref_window,
@@ -1338,7 +1331,7 @@ export class LGraphCanvas implements ConnectionColorContext {
): boolean { ): boolean {
new LiteGraph.ContextMenu( new LiteGraph.ContextMenu(
LiteGraph.NODE_MODES, LiteGraph.NODE_MODES,
{ event: e, callback: inner_clicked, parentMenu: menu, node: node }, { event: e, callback: inner_clicked, parentMenu: menu, node },
) )
function inner_clicked(v: string) { function inner_clicked(v: string) {
@@ -1396,7 +1389,7 @@ export class LGraphCanvas implements ConnectionColorContext {
event: e, event: e,
callback: inner_clicked, callback: inner_clicked,
parentMenu: menu, parentMenu: menu,
node: node, node,
}) })
function inner_clicked(v: IContextMenuValue<string>) { function inner_clicked(v: IContextMenuValue<string>) {
@@ -1434,7 +1427,7 @@ export class LGraphCanvas implements ConnectionColorContext {
event: e, event: e,
callback: inner_clicked, callback: inner_clicked,
parentMenu: menu, parentMenu: menu,
node: node, node,
}) })
function inner_clicked(v: typeof LiteGraph.VALID_SHAPES[number]) { function inner_clicked(v: typeof LiteGraph.VALID_SHAPES[number]) {
@@ -1474,7 +1467,7 @@ export class LGraphCanvas implements ConnectionColorContext {
menu: ContextMenu, menu: ContextMenu,
node: LGraphNode, node: LGraphNode,
): void { ): void {
const graph = node.graph const { graph } = node
if (!graph) throw new NullGraphError() if (!graph) throw new NullGraphError()
graph.beforeChange() graph.beforeChange()
@@ -1656,11 +1649,9 @@ export class LGraphCanvas implements ConnectionColorContext {
return return
} }
const canvas = this.canvas const { canvas } = this
const ref_window = this.getCanvasWindow()
// hack used when moving canvas between windows // hack used when moving canvas between windows
const document = ref_window.document const { document } = this.getCanvasWindow()
this._mousedown_callback = this.processMouseDown.bind(this) this._mousedown_callback = this.processMouseDown.bind(this)
this._mousewheel_callback = this.processMouseWheel.bind(this) this._mousewheel_callback = this.processMouseWheel.bind(this)
@@ -2405,11 +2396,9 @@ export class LGraphCanvas implements ConnectionColorContext {
node, node,
canvas: this, canvas: this,
}) })
} else { } else if (widget.mouse) {
if (widget.mouse) { const result = widget.mouse(e, [x, y], node)
const result = widget.mouse(e, [x, y], node) if (result != null) this.dirty_canvas = result
if (result != null) this.dirty_canvas = result
}
} }
// value changed // value changed
@@ -2609,7 +2598,7 @@ export class LGraphCanvas implements ConnectionColorContext {
this.ds.offset[1] += delta[1] / this.ds.scale this.ds.offset[1] += delta[1] / this.ds.scale
this.#dirty() this.#dirty()
} else if ( } else if (
(this.allow_interaction || (node && node.flags.allow_interaction)) && (this.allow_interaction || node?.flags.allow_interaction) &&
!this.read_only !this.read_only
) { ) {
if (linkConnector.isConnecting) this.dirty_canvas = true if (linkConnector.isConnecting) this.dirty_canvas = true
@@ -2931,7 +2920,7 @@ export class LGraphCanvas implements ConnectionColorContext {
const pos: Point = [e.clientX, e.clientY] const pos: Point = [e.clientX, e.clientY]
if (this.viewport && !isPointInRect(pos, this.viewport)) return if (this.viewport && !isPointInRect(pos, this.viewport)) return
let scale = this.ds.scale let { scale } = this.ds
if (delta > 0) scale *= this.zoom_speed if (delta > 0) scale *= this.zoom_speed
else if (delta < 0) scale *= 1 / this.zoom_speed else if (delta < 0) scale *= 1 / this.zoom_speed
@@ -3897,7 +3886,7 @@ export class LGraphCanvas implements ConnectionColorContext {
this.ds.toCanvasContext(ctx) this.ds.toCanvasContext(ctx)
// draw nodes // draw nodes
const visible_nodes = this.visible_nodes const { visible_nodes } = this
const drawSnapGuides = this.#snapToGrid && this.isDragging const drawSnapGuides = this.#snapToGrid && this.isDragging
for (const node of visible_nodes) { for (const node of visible_nodes) {
@@ -4307,8 +4296,7 @@ export class LGraphCanvas implements ConnectionColorContext {
const color = node.renderingColor const color = node.renderingColor
const bgcolor = node.renderingBgColor const bgcolor = node.renderingBgColor
const low_quality = this.low_quality const { low_quality, editor_alpha } = this
const editor_alpha = this.editor_alpha
ctx.globalAlpha = editor_alpha ctx.globalAlpha = editor_alpha
if (this.render_shadows && !low_quality) { if (this.render_shadows && !low_quality) {
@@ -4431,7 +4419,7 @@ export class LGraphCanvas implements ConnectionColorContext {
ctx.fill() ctx.fill()
// @ts-expect-error TODO: Better value typing // @ts-expect-error TODO: Better value typing
const data = link.data const { data } = link
if (data == null) return if (data == null) return
// @ts-expect-error TODO: Better value typing // @ts-expect-error TODO: Better value typing
@@ -4498,11 +4486,11 @@ export class LGraphCanvas implements ConnectionColorContext {
ctx.fillStyle = LiteGraph.use_legacy_node_error_indicator ? "#F00" : bgcolor ctx.fillStyle = LiteGraph.use_legacy_node_error_indicator ? "#F00" : bgcolor
const title_height = LiteGraph.NODE_TITLE_HEIGHT const title_height = LiteGraph.NODE_TITLE_HEIGHT
const low_quality = this.low_quality const { low_quality } = this
const { collapsed } = node.flags const { collapsed } = node.flags
const shape = node.renderingShape const shape = node.renderingShape
const title_mode = node.title_mode const { title_mode } = node
const render_title = title_mode == TitleMode.TRANSPARENT_TITLE || title_mode == TitleMode.NO_TITLE const render_title = title_mode == TitleMode.TRANSPARENT_TITLE || title_mode == TitleMode.NO_TITLE
? false ? false
@@ -4665,7 +4653,7 @@ export class LGraphCanvas implements ConnectionColorContext {
const visibleReroutes: Reroute[] = [] const visibleReroutes: Reroute[] = []
const now = LiteGraph.getTime() const now = LiteGraph.getTime()
const visible_area = this.visible_area const { visible_area } = this
LGraphCanvas.#margin_area[0] = visible_area[0] - 20 LGraphCanvas.#margin_area[0] = visible_area[0] - 20
LGraphCanvas.#margin_area[1] = visible_area[1] - 20 LGraphCanvas.#margin_area[1] = visible_area[1] - 20
LGraphCanvas.#margin_area[2] = visible_area[2] + 40 LGraphCanvas.#margin_area[2] = visible_area[2] + 40
@@ -4813,7 +4801,7 @@ export class LGraphCanvas implements ConnectionColorContext {
rendered.add(link) rendered.add(link)
// event triggered rendered on top // event triggered rendered on top
if (link && link._last_time && now - link._last_time < 1000) { if (link?._last_time && now - link._last_time < 1000) {
const f = 2.0 - (now - link._last_time) * 0.002 const f = 2.0 - (now - link._last_time) * 0.002
const tmp = ctx.globalAlpha const tmp = ctx.globalAlpha
ctx.globalAlpha = tmp * f ctx.globalAlpha = tmp * f
@@ -4922,7 +4910,7 @@ export class LGraphCanvas implements ConnectionColorContext {
/** Reference to {@link reroute._pos} if present, or {@link link._pos} if present. Caches the centre point of the link. */ /** Reference to {@link reroute._pos} if present, or {@link link._pos} if present. Caches the centre point of the link. */
const pos: Point = linkSegment?._pos ?? [0, 0] const pos: Point = linkSegment?._pos ?? [0, 0]
for (let i = 0; i < num_sublines; i += 1) { for (let i = 0; i < num_sublines; i++) {
const offsety = (i - (num_sublines - 1) * 0.5) * 5 const offsety = (i - (num_sublines - 1) * 0.5) * 5
innerA[0] = a[0] innerA[0] = a[0]
innerA[1] = a[1] innerA[1] = a[1]
@@ -5208,7 +5196,7 @@ export class LGraphCanvas implements ConnectionColorContext {
ctx.strokeStyle = "white" ctx.strokeStyle = "white"
ctx.globalAlpha = 0.75 ctx.globalAlpha = 0.75
const visible_nodes = this.visible_nodes const { visible_nodes } = this
for (const node of visible_nodes) { for (const node of visible_nodes) {
ctx.fillStyle = "black" ctx.fillStyle = "black"
ctx.fillRect( ctx.fillRect(
@@ -5687,7 +5675,7 @@ export class LGraphCanvas implements ConnectionColorContext {
const dialog: PromptDialog = Object.assign(div, customProperties) const dialog: PromptDialog = Object.assign(div, customProperties)
const graphcanvas = LGraphCanvas.active_canvas const graphcanvas = LGraphCanvas.active_canvas
const canvas = graphcanvas.canvas const { canvas } = graphcanvas
if (!canvas.parentNode) throw new TypeError("canvas element parentNode was null when opening a prompt.") if (!canvas.parentNode) throw new TypeError("canvas element parentNode was null when opening a prompt.")
canvas.parentNode.append(dialog) canvas.parentNode.append(dialog)
@@ -5830,7 +5818,7 @@ export class LGraphCanvas implements ConnectionColorContext {
// console.log(options); // console.log(options);
const that = this const that = this
const graphcanvas = LGraphCanvas.active_canvas const graphcanvas = LGraphCanvas.active_canvas
const canvas = graphcanvas.canvas const { canvas } = graphcanvas
const root_document = canvas.ownerDocument || document const root_document = canvas.ownerDocument || document
const div = document.createElement("div") const div = document.createElement("div")
@@ -5972,7 +5960,6 @@ export class LGraphCanvas implements ConnectionColorContext {
if (options.do_type_filter) { if (options.do_type_filter) {
if (selIn) { if (selIn) {
const aSlots = LiteGraph.slot_types_in const aSlots = LiteGraph.slot_types_in
// this for object :: Object.keys(aSlots).length;
const nSlots = aSlots.length const nSlots = aSlots.length
if ( if (
@@ -5981,9 +5968,6 @@ export class LGraphCanvas implements ConnectionColorContext {
) { ) {
options.type_filter_in = "_event_" options.type_filter_in = "_event_"
} }
/* this will filter on * .. but better do it manually in case
else if(options.type_filter_in === "" || options.type_filter_in === 0)
options.type_filter_in = "*"; */
for (let iK = 0; iK < nSlots; iK++) { for (let iK = 0; iK < nSlots; iK++) {
const opt = document.createElement("option") const opt = document.createElement("option")
opt.value = aSlots[iK] opt.value = aSlots[iK]
@@ -5995,11 +5979,7 @@ export class LGraphCanvas implements ConnectionColorContext {
String(options.type_filter_in).toLowerCase() == String(options.type_filter_in).toLowerCase() ==
String(aSlots[iK]).toLowerCase() String(aSlots[iK]).toLowerCase()
) { ) {
// selIn.selectedIndex ..
opt.selected = true opt.selected = true
// console.log("comparing IN "+options.type_filter_in+" :: "+aSlots[iK]);
} else {
// console.log("comparing OUT "+options.type_filter_in+" :: "+aSlots[iK]);
} }
} }
selIn.addEventListener("change", function () { selIn.addEventListener("change", function () {
@@ -6008,8 +5988,6 @@ export class LGraphCanvas implements ConnectionColorContext {
} }
if (selOut) { if (selOut) {
const aSlots = LiteGraph.slot_types_out const aSlots = LiteGraph.slot_types_out
// this for object :: Object.keys(aSlots).length;
const nSlots = aSlots.length
if ( if (
options.type_filter_out == LiteGraph.EVENT || options.type_filter_out == LiteGraph.EVENT ||
@@ -6017,18 +5995,15 @@ export class LGraphCanvas implements ConnectionColorContext {
) { ) {
options.type_filter_out = "_event_" options.type_filter_out = "_event_"
} }
/* this will filter on * .. but better do it manually in case for (const aSlot of aSlots) {
else if(options.type_filter_out === "" || options.type_filter_out === 0)
options.type_filter_out = "*"; */
for (let iK = 0; iK < nSlots; iK++) {
const opt = document.createElement("option") const opt = document.createElement("option")
opt.value = aSlots[iK] opt.value = aSlot
opt.innerHTML = aSlots[iK] opt.innerHTML = aSlot
selOut.append(opt) selOut.append(opt)
if ( if (
options.type_filter_out !== false && options.type_filter_out !== false &&
String(options.type_filter_out).toLowerCase() == String(options.type_filter_out).toLowerCase() ==
String(aSlots[iK]).toLowerCase() String(aSlot).toLowerCase()
) { ) {
opt.selected = true opt.selected = true
} }
@@ -6342,7 +6317,7 @@ export class LGraphCanvas implements ConnectionColorContext {
options = options || {} options = options || {}
const info = node.getPropertyInfo(property) const info = node.getPropertyInfo(property)
const type = info.type const { type } = info
let input_html = "" let input_html = ""
@@ -6515,7 +6490,6 @@ export class LGraphCanvas implements ConnectionColorContext {
// acheck for input and use default behaviour: save on enter, close on esc // acheck for input and use default behaviour: save on enter, close on esc
if (options.checkForInput) { if (options.checkForInput) {
const aI = dialog.querySelectorAll("input") const aI = dialog.querySelectorAll("input")
const focused = false
if (aI) { if (aI) {
for (const iX of aI) { for (const iX of aI) {
iX.addEventListener("keydown", function (e) { iX.addEventListener("keydown", function (e) {
@@ -6525,11 +6499,10 @@ export class LGraphCanvas implements ConnectionColorContext {
} else if (e.key != "Enter") { } else if (e.key != "Enter") {
return return
} }
// set value ?
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
}) })
if (!focused) iX.focus() iX.focus()
} }
} }
} }
@@ -6736,7 +6709,7 @@ export class LGraphCanvas implements ConnectionColorContext {
new LiteGraph.ContextMenu( new LiteGraph.ContextMenu(
values, values,
{ {
event: event, event,
className: "dark", className: "dark",
callback: inner_clicked, callback: inner_clicked,
}, },
@@ -7085,7 +7058,7 @@ export class LGraphCanvas implements ConnectionColorContext {
// TODO: Remove type kludge // TODO: Remove type kludge
let menu_info: (IContextMenuValue | string | null)[] let menu_info: (IContextMenuValue | string | null)[]
const options: IContextMenuOptions = { const options: IContextMenuOptions = {
event: event, event,
callback: inner_option_clicked, callback: inner_option_clicked,
extra: node, extra: node,
} }
@@ -7103,7 +7076,7 @@ export class LGraphCanvas implements ConnectionColorContext {
menu_info = node.getSlotMenuOptions(slot) menu_info = node.getSlotMenuOptions(slot)
} else { } else {
if (slot?.output?.links?.length) if (slot?.output?.links?.length)
menu_info.push({ content: "Disconnect Links", slot: slot }) menu_info.push({ content: "Disconnect Links", slot })
const _slot = slot.input || slot.output const _slot = slot.input || slot.output
if (!_slot) throw new TypeError("Both in put and output slots were null when processing context menu.") if (!_slot) throw new TypeError("Both in put and output slots were null when processing context menu.")
@@ -7112,11 +7085,11 @@ export class LGraphCanvas implements ConnectionColorContext {
menu_info.push( menu_info.push(
_slot.locked _slot.locked
? "Cannot remove" ? "Cannot remove"
: { content: "Remove Slot", slot: slot }, : { content: "Remove Slot", slot },
) )
} }
if (!_slot.nameLocked) if (!_slot.nameLocked)
menu_info.push({ content: "Rename Slot", slot: slot }) menu_info.push({ content: "Rename Slot", slot })
if (node.getExtraSlotMenuOptions) { if (node.getExtraSlotMenuOptions) {
menu_info.push(...node.getExtraSlotMenuOptions(slot)) menu_info.push(...node.getExtraSlotMenuOptions(slot))