label: added \n parsing & rotation

README.md

@@ -310,11 +310,12 @@ Note, you can right-click on a bunch of the rgthree-comfy nodes and select `🛟
 >    <summary>ℹ️ <i>More Information</i></summary>
 >
 >    - 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.

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;

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) {