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;