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

Positionable: Common interface for canvas items (#256)

Browse Source 
* Add Positionable interface to canvas elements

* Add group resizeTo children

Refactor out duplicated code from Node

* Remove redundant "is_selected" check

* Improve measure pass - interface, caching

Node bounds once per render
Cached results

* Use cached bounds for repeat canvas calls

- Removes margin param from getNodeOnPos
- Removes margin param from getGroupOnPos
- Hitboxes now uniform for render / mouse features
- Simplifies code

* nit - Refactor

* Fix top-left edge of hitbox missing

* Add ID to groups
This commit is contained in:
filtered
2024-11-04 03:12:21 +11:00
committed by GitHub
parent d9efeb819d
commit e661decddc
7 changed files with 238 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/LGraphCanvas.ts
View File

@@ -1719,7 +1719,7 @@ export class LGraphCanvas {
if (!is_inside) return
let node = this.graph.getNodeOnPos(e.canvasX, e.canvasY, this.visible_nodes, 5)
let node = this.graph.getNodeOnPos(e.canvasX, e.canvasY, this.visible_nodes)
let skip_action = false
const now = LiteGraph.getTime()
const is_primary = (e.isPrimary === undefined || !e.isPrimary)
@@ -2002,7 +2002,7 @@ export class LGraphCanvas {
this.isDragging = true
}
// Account for shift + click + drag
if (!(e.shiftKey && !e.ctrlKey && !e.altKey) || !node.is_selected) {
if (!(e.shiftKey && !e.ctrlKey && !e.altKey) || !node.selected) {
this.processNodeSelected(node, e)
}
} else { // double-click
@@ -2010,7 +2010,7 @@ export class LGraphCanvas {
* Don't call the function if the block is already selected.
* Otherwise, it could cause the block to be unselected while its panel is open.
*/
if (!node.is_selected) this.processNodeSelected(node, e)
if (!node.selected) this.processNodeSelected(node, e)
}
this.dirty_canvas = true
@@ -2451,12 +2451,6 @@ export class LGraphCanvas {
nodes.add(n)
n.pos[0] += delta[0] / this.ds.scale
n.pos[1] += delta[1] / this.ds.scale
/*
* Don't call the function if the block is already selected.
* Otherwise, it could cause the block to be unselected while dragging.
*/
if (!n.is_selected) this.processNodeSelected(n, e)
}
if (this.selectedGroups) {
@@ -3248,15 +3242,15 @@ export class LGraphCanvas {
if (typeof nodes == "string") nodes = [nodes]
for (const i in nodes) {
const node: LGraphNode = nodes[i]
if (node.is_selected) {
if (node.selected) {
this.deselectNode(node)
continue
}
if (!node.is_selected) {
if (!node.selected) {
node.onSelected?.()
}
node.is_selected = true
node.selected = true
this.selected_nodes[node.id] = node
if (node.inputs) {
@@ -3284,9 +3278,9 @@ export class LGraphCanvas {
* removes a node from the current selection
**/
deselectNode(node: LGraphNode): void {
if (!node.is_selected) return
if (!node.selected) return
node.onDeselected?.()
node.is_selected = false
node.selected = false
delete this.selected_nodes[node.id]
this.onNodeDeselected?.(node)
@@ -3316,11 +3310,11 @@ export class LGraphCanvas {
const nodes = this.graph._nodes
for (let i = 0, l = nodes.length; i < l; ++i) {
const node = nodes[i]
if (!node.is_selected) {
if (!node.selected) {
continue
}
node.onDeselected?.()
node.is_selected = false
node.selected = false
this.onNodeDeselected?.(node)
}
this.selected_nodes = {}
@@ -3474,16 +3468,17 @@ export class LGraphCanvas {
computeVisibleNodes(nodes?: LGraphNode[], out?: LGraphNode[]): LGraphNode[] {
const visible_nodes = out || []
visible_nodes.length = 0
nodes ||= this.graph._nodes
for (let i = 0, l = nodes.length; i < l; ++i) {
const n = nodes[i]
const _nodes = nodes || this.graph._nodes
for (const node of _nodes) {
//skip rendering nodes in live mode
if (this.live_mode && !n.onDrawBackground && !n.onDrawForeground) continue
// Not in visible area
if (!overlapBounding(this.visible_area, n.getBounding(LGraphCanvas.#temp, true))) continue
if (this.live_mode && !node.onDrawBackground && !node.onDrawForeground) continue
visible_nodes.push(n)
node.updateArea()
// Not in visible area
if (!overlapBounding(this.visible_area, node.renderArea)) continue
visible_nodes.push(node)
}
return visible_nodes
}
@@ -3499,25 +3494,24 @@ export class LGraphCanvas {
this.render_time = (now - this.last_draw_time) * 0.001
this.last_draw_time = now
if (this.graph) {
this.ds.computeVisibleArea(this.viewport)
}
if (this.graph) this.ds.computeVisibleArea(this.viewport)
// Compute node size before drawing links.
if (this.dirty_canvas || force_canvas)
this.computeVisibleNodes(null, this.visible_nodes)
if (this.dirty_bgcanvas ||
force_bgcanvas ||
this.always_render_background ||
(this.graph &&
this.graph._last_trigger_time &&
(this.graph?._last_trigger_time &&
now - this.graph._last_trigger_time < 1000)) {
this.drawBackCanvas()
}
if (this.dirty_canvas || force_canvas) {
this.drawFrontCanvas()
}
if (this.dirty_canvas || force_canvas) this.drawFrontCanvas()
this.fps = this.render_time ? 1.0 / this.render_time : 0
this.frame += 1
this.frame++
}
/**
* draws the front canvas (the one containing all the nodes)
@@ -3581,10 +3575,7 @@ export class LGraphCanvas {
this.ds.toCanvasContext(ctx)
//draw nodes
const visible_nodes = this.computeVisibleNodes(
null,
this.visible_nodes
)
const visible_nodes = this.visible_nodes
for (let i = 0; i < visible_nodes.length; ++i) {
const node = visible_nodes[i]
@@ -3784,9 +3775,7 @@ export class LGraphCanvas {
const { strokeStyle, lineWidth } = ctx
const area = LGraphCanvas.#tmp_area
node.measure(area)
node.onBounding?.(area)
const area = node.boundingRect
const gap = 3
const radius = this.round_radius + gap
@@ -4223,8 +4212,7 @@ export class LGraphCanvas {
ctx.finish?.()
this.dirty_bgcanvas = false
//to force to repaint the front canvas with the bgcanvas
// But why would you actually want to do this?
// Forces repaint of the front canvas.
this.dirty_canvas = true
}
/**
@@ -4313,7 +4301,7 @@ export class LGraphCanvas {
size,
color,
bgcolor,
node.is_selected
node.selected
)
if (!low_quality) {
@@ -4590,7 +4578,7 @@ export class LGraphCanvas {
* @param size Size of the background to draw, in graph units. Differs from node size if collapsed, etc.
* @param fgcolor Foreground colour - used for text
* @param bgcolor Background colour of the node
* @param selected Whether to render the node as selected. Likely to be removed in future, as current usage is simply the is_selected property of the node.
* @param selected Whether to render the node as selected. Likely to be removed in future, as current usage is simply the selected property of the node.
* @param mouse_over Deprecated
*/
drawNodeShape(