From 3c1ff0cbf7bf944b730ff3e4ee90cc8ec57d311a Mon Sep 17 00:00:00 2001 From: Christopher Anderson Date: Sun, 2 Nov 2025 04:53:57 +1100 Subject: [PATCH 1/2] label: added `\n` parsing & rotation --- README.md | 11 ++++++----- src_web/comfyui/label.ts | 19 ++++++++++++++++++- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 5c0f55e..8903474 100644 --- a/README.md +++ b/README.md @@ -310,11 +310,12 @@ Note, you can right-click on a bunch of the rgthree-comfy nodes and select `🛟 > ℹī¸ More Information > > - The text shown is the "Title" of the node and you can adjust the the font size, font family, -> font color, text alignment as well as a background color, padding, and background border -> radius from the node's properties. You can double-click the node to open the properties -> panel. -> - **Pro Tip #1:** You can add multiline text from the properties panel _(because ComfyUI let's -> you shift + enter there, only)._ +> font color, text alignment as well as a background color, padding, background border +> radius, and angle (in degrees) from the node's properties. You can double-click the node to +> open the properties panel. +> - The Title also supports the literal sequence "\\n" to insert a newline when drawing the label. +> - ~**Pro Tip #1:** You can add multiline text from the properties panel _(because ComfyUI let's +> you shift + enter there, only)._~ > - **Pro Tip #2:** You can use ComfyUI's native "pin" option in the right-click menu to make the > label stick to the workflow and clicks to "go through". You can right-click at any time to > unpin. diff --git a/src_web/comfyui/label.ts b/src_web/comfyui/label.ts index 847825b..4d240e0 100644 --- a/src_web/comfyui/label.ts +++ b/src_web/comfyui/label.ts @@ -31,6 +31,7 @@ export class Label extends RgthreeBaseVirtualNode { static "@backgroundColor" = {type: "string"}; static "@padding" = {type: "number"}; static "@borderRadius" = {type: "number"}; + static "@angle" = {type: "number"}; override properties!: RgthreeBaseVirtualNode["properties"] & { fontSize: number; @@ -40,6 +41,7 @@ export class Label extends RgthreeBaseVirtualNode { backgroundColor: string; padding: number; borderRadius: number; + angle: number; }; override resizable = false; @@ -53,6 +55,7 @@ export class Label extends RgthreeBaseVirtualNode { this.properties["backgroundColor"] = "transparent"; this.properties["padding"] = 0; this.properties["borderRadius"] = 0; + this.properties["angle"] = 0; this.color = "#fff0"; this.bgcolor = "#fff0"; @@ -72,10 +75,24 @@ export class Label extends RgthreeBaseVirtualNode { }`; const padding = Number(this.properties["padding"]) ?? 0; - const lines = this.title.replace(/\n*$/, "").split("\n"); + // Support literal "\\n" sequences as newlines and trim trailing newlines + const processedTitle = (this.title ?? "").replace(/\\n/g, "\n").replace(/\n*$/, ""); + const lines = processedTitle.split("\n"); + const maxWidth = Math.max(...lines.map((s) => ctx.measureText(s).width)); this.size[0] = maxWidth + padding * 2; this.size[1] = this.properties["fontSize"] * lines.length + padding * 2; + + // Apply rotation around the center, if angle provided + const angleDeg = parseInt(String(this.properties["angle"] ?? 0)) || 0; + if (angleDeg) { + const cx = this.size[0] / 2; + const cy = this.size[1] / 2; + ctx.translate(cx, cy); + ctx.rotate((angleDeg * Math.PI) / 180); + ctx.translate(-cx, -cy); + } + if (backgroundColor) { ctx.beginPath(); const borderRadius = Number(this.properties["borderRadius"]) || 0; From 69b3bbd8b5d3a5775127ee5ca9706caea7cd29d2 Mon Sep 17 00:00:00 2001 From: Christopher Anderson Date: Wed, 5 Nov 2025 00:14:16 +1100 Subject: [PATCH 2/2] label: added `\n` & rotation [incl .js] --- web/comfyui/label.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/web/comfyui/label.js b/web/comfyui/label.js index 1d7f11d..b6dedad 100644 --- a/web/comfyui/label.js +++ b/web/comfyui/label.js @@ -14,12 +14,13 @@ export class Label extends RgthreeBaseVirtualNode { this.properties["backgroundColor"] = "transparent"; this.properties["padding"] = 0; this.properties["borderRadius"] = 0; + this.properties["angle"] = 0; this.color = "#fff0"; this.bgcolor = "#fff0"; this.onConstructed(); } draw(ctx) { - var _a, _b; + var _a, _b, _c, _d; this.flags = this.flags || {}; this.flags.allow_interaction = !this.flags.pinned; ctx.save(); @@ -29,10 +30,19 @@ export class Label extends RgthreeBaseVirtualNode { const backgroundColor = this.properties["backgroundColor"] || ""; ctx.font = `${Math.max(this.properties["fontSize"] || 0, 1)}px ${(_a = this.properties["fontFamily"]) !== null && _a !== void 0 ? _a : "Arial"}`; const padding = (_b = Number(this.properties["padding"])) !== null && _b !== void 0 ? _b : 0; - const lines = this.title.replace(/\n*$/, "").split("\n"); + const processedTitle = ((_c = this.title) !== null && _c !== void 0 ? _c : "").replace(/\\n/g, "\n").replace(/\n*$/, ""); + const lines = processedTitle.split("\n"); const maxWidth = Math.max(...lines.map((s) => ctx.measureText(s).width)); this.size[0] = maxWidth + padding * 2; this.size[1] = this.properties["fontSize"] * lines.length + padding * 2; + const angleDeg = parseInt(String((_d = this.properties["angle"]) !== null && _d !== void 0 ? _d : 0)) || 0; + if (angleDeg) { + const cx = this.size[0] / 2; + const cy = this.size[1] / 2; + ctx.translate(cx, cy); + ctx.rotate((angleDeg * Math.PI) / 180); + ctx.translate(-cx, -cy); + } if (backgroundColor) { ctx.beginPath(); const borderRadius = Number(this.properties["borderRadius"]) || 0; @@ -118,6 +128,7 @@ Label["@textAlign"] = { type: "combo", values: ["left", "center", "right"] }; Label["@backgroundColor"] = { type: "string" }; Label["@padding"] = { type: "number" }; Label["@borderRadius"] = { type: "number" }; +Label["@angle"] = { type: "number" }; const oldDrawNode = LGraphCanvas.prototype.drawNode; LGraphCanvas.prototype.drawNode = function (node, ctx) { if (node.constructor === Label.prototype.constructor) {