[API] Allow canvas font customisation (#987)

Allows customisation of fonts via `LiteGraph` global var:

```ts
LiteGraph.NODE_FONT = "wingdings"
```


![image](https://github.com/user-attachments/assets/36bec38d-ea5f-4ec6-a2a3-bc5a57826c1e)
This commit is contained in:
filtered
2025-05-01 10:19:36 +10:00
committed by GitHub
parent c695b2e2bd
commit 0cdee75460
5 changed files with 14 additions and 6 deletions

View File

@@ -338,11 +338,11 @@ export class LGraphCanvas {
* @deprecated Use {@link LGraphNode.titleFontStyle} instead.
*/
get title_text_font(): string {
return `${LiteGraph.NODE_TEXT_SIZE}px Arial`
return `${LiteGraph.NODE_TEXT_SIZE}px ${LiteGraph.NODE_FONT}`
}
get inner_text_font(): string {
return `normal ${LiteGraph.NODE_SUBTEXT_SIZE}px Arial`
return `normal ${LiteGraph.NODE_SUBTEXT_SIZE}px ${LiteGraph.NODE_FONT}`
}
#maximumFrameGap = 0
@@ -4144,7 +4144,7 @@ export class LGraphCanvas {
ctx.save()
ctx.translate(x, y)
ctx.font = "10px Arial"
ctx.font = `10px ${LiteGraph.DEFAULT_FONT}`
ctx.fillStyle = "#888"
ctx.textAlign = "left"
if (this.graph) {

View File

@@ -200,7 +200,7 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
ctx.fill()
// Title
ctx.font = `${font_size}px Arial`
ctx.font = `${font_size}px ${LiteGraph.GROUP_FONT}`
ctx.textAlign = "left"
ctx.fillText(this.title + (this.pinned ? "📌" : ""), x + padding, y + font_size)

View File

@@ -198,11 +198,11 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
* The font style used to render the node's title text.
*/
get titleFontStyle(): string {
return `${LiteGraph.NODE_TEXT_SIZE}px Arial`
return `${LiteGraph.NODE_TEXT_SIZE}px ${LiteGraph.NODE_FONT}`
}
get innerFontStyle(): string {
return `normal ${LiteGraph.NODE_SUBTEXT_SIZE}px Arial`
return `normal ${LiteGraph.NODE_SUBTEXT_SIZE}px ${LiteGraph.NODE_FONT}`
}
graph: LGraph | null = null

View File

@@ -57,9 +57,14 @@ export class LiteGraphGlobal {
NODE_DEFAULT_SHAPE = RenderShape.ROUND
NODE_BOX_OUTLINE_COLOR = "#FFF"
NODE_ERROR_COLOUR = "#E00"
NODE_FONT = "Arial"
DEFAULT_FONT = "Arial"
DEFAULT_SHADOW_COLOR = "rgba(0,0,0,0.5)"
DEFAULT_GROUP_FONT = 24
DEFAULT_GROUP_FONT_SIZE?: any
GROUP_FONT = "Arial"
WIDGET_BGCOLOR = "#222"
WIDGET_OUTLINE_COLOR = "#666"