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

[Refactor] Add LGraphNode.drawTitleBox (#461)

Browse Source 
* [Refactor] Add LGraphNode.drawTitleBox

* nit
This commit is contained in:
Chenlei Hu
2025-02-04 07:57:50 -08:00
committed by GitHub
parent 7ea9a8405d
commit 530fa874b0
2 changed files with 86 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/LGraphCanvas.ts
View File

@@ -5181,64 +5181,12 @@ export class LGraphCanvas {
})
// title box
const box_size = 10
if (node.onDrawTitleBox) {
node.onDrawTitleBox(ctx, title_height, size, this.ds.scale)
} else if (
shape == RenderShape.ROUND ||
shape == RenderShape.CIRCLE ||
shape == RenderShape.CARD
) {
if (low_quality) {
ctx.fillStyle = "black"
ctx.beginPath()
ctx.arc(
title_height * 0.5,
title_height * -0.5,
box_size * 0.5 + 1,
0,
Math.PI * 2,
)
ctx.fill()
}
node.drawTitleBox(ctx, {
scale: this.ds.scale,
low_quality,
box_size: 10,
})
ctx.fillStyle = node.renderingBoxColor
if (low_quality)
ctx.fillRect(
title_height * 0.5 - box_size * 0.5,
title_height * -0.5 - box_size * 0.5,
box_size,
box_size,
)
else {
ctx.beginPath()
ctx.arc(
title_height * 0.5,
title_height * -0.5,
box_size * 0.5,
0,
Math.PI * 2,
)
ctx.fill()
}
} else {
if (low_quality) {
ctx.fillStyle = "black"
ctx.fillRect(
(title_height - box_size) * 0.5 - 1,
(title_height + box_size) * -0.5 - 1,
box_size + 2,
box_size + 2,
)
}
ctx.fillStyle = node.renderingBoxColor
ctx.fillRect(
(title_height - box_size) * 0.5,
(title_height + box_size) * -0.5,
box_size,
box_size,
)
}
ctx.globalAlpha = old_alpha
// title text

81
src/LGraphNode.ts
View File

@@ -2860,6 +2860,87 @@ export class LGraphNode implements Positionable, IPinnable {
ctx.shadowColor = "transparent"
}
/**
* Renders the node's title box, i.e. the dot in front of the title text that
* when clicked toggles the node's collapsed state. The term `title box` comes
* from the original LiteGraph implementation.
*/
drawTitleBox(ctx: CanvasRenderingContext2D, options: {
scale: number
low_quality?: boolean
title_height?: number
box_size?: number
}): void {
const {
scale,
low_quality = false,
title_height = LiteGraph.NODE_TITLE_HEIGHT,
box_size = 10,
} = options
const size = this.renderingSize
const shape = this.renderingShape
if (this.onDrawTitleBox) {
this.onDrawTitleBox(ctx, title_height, size, scale)
return
}
if (
[RenderShape.ROUND, RenderShape.CIRCLE, RenderShape.CARD].includes(shape)
) {
if (low_quality) {
ctx.fillStyle = "black"
ctx.beginPath()
ctx.arc(
title_height * 0.5,
title_height * -0.5,
box_size * 0.5 + 1,
0,
Math.PI * 2,
)
ctx.fill()
}
ctx.fillStyle = this.renderingBoxColor
if (low_quality)
ctx.fillRect(
title_height * 0.5 - box_size * 0.5,
title_height * -0.5 - box_size * 0.5,
box_size,
box_size,
)
else {
ctx.beginPath()
ctx.arc(
title_height * 0.5,
title_height * -0.5,
box_size * 0.5,
0,
Math.PI * 2,
)
ctx.fill()
}
} else {
if (low_quality) {
ctx.fillStyle = "black"
ctx.fillRect(
(title_height - box_size) * 0.5 - 1,
(title_height + box_size) * -0.5 - 1,
box_size + 2,
box_size + 2,
)
}
ctx.fillStyle = this.renderingBoxColor
ctx.fillRect(
(title_height - box_size) * 0.5,
(title_height + box_size) * -0.5,
box_size,
box_size,
)
}
}
/**
* Attempts to gracefully bypass this node in all of its connections by reconnecting all links.
*