From 67f486fff7ec5401eea0c59762dbc0fe44a6b667 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Wed, 4 Sep 2024 15:13:10 -0400
Subject: [PATCH] Add pin icon to end of title (#120)

---
 public/litegraph.d.ts |  2 ++
 src/litegraph.js      | 32 ++++++++++++++------------------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/public/litegraph.d.ts b/public/litegraph.d.ts
index 8adcd23a5..037491b6e 100644
--- a/public/litegraph.d.ts
+++ b/public/litegraph.d.ts
@@ -964,6 +964,8 @@ export declare class LGraphNode {
     loadImage(url: string): void;
     /** Allows to get onMouseMove and onMouseUp events even if the mouse is out of focus */
     captureInput(v: any): void;
+
+    get collapsible(): boolean;
     /** Collapse the node to make it smaller on the canvas */
     collapse(force: boolean): void;
 
diff --git a/src/litegraph.js b/src/litegraph.js
index 4200d33e8..dbde929f5 100755
--- a/src/litegraph.js
+++ b/src/litegraph.js
@@ -4755,13 +4755,17 @@ const globalExport = {};
             }
         }
 
+        get collapsible() {
+            return !this.pinned && this.constructor.collapsable;
+        }
+
         /**
              * Collapse the node to make it smaller on the canvas
              * @method collapse
              **/
         collapse(force) {
             this.graph._version++;
-            if (this.constructor.collapsable === false && !force) {
+            if (this.collapsible && !force) {
                 return;
             }
             if (!this.flags.collapsed) {
@@ -4777,7 +4781,7 @@ const globalExport = {};
         }
 
         /**
-             * Forces the node to do not move or realign on Z
+             * Forces the node to do not move or realign on Z or resize
              * @method pin
              **/
         pin(v) {
@@ -4927,7 +4931,7 @@ const globalExport = {};
             const font_size = this.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE;
             ctx.font = font_size + "px Arial";
             ctx.textAlign = "left";
-            ctx.fillText(this.title, x + padding, y + font_size);
+            ctx.fillText(this.title + (this.pinned ? "📌" : ""), x + padding, y + font_size);
 
             if (LiteGraph.highlight_selected_group && this.selected) {
                 graphCanvas.drawSelectionBounding(ctx, this._bounding, {
@@ -4938,12 +4942,6 @@ const globalExport = {};
                     padding,
                 });
             }
-
-            if (this.pinned) {
-                const iconFontSize = font_size * 0.5;
-                ctx.font = iconFontSize + "px Arial";
-                ctx.fillText("📌", x + width - iconFontSize - padding, y + iconFontSize);
-            }
         }
 
         resize(width, height) {
@@ -10031,7 +10029,7 @@ const globalExport = {};
                 }
                 if (!low_quality) {
                     ctx.font = this.title_text_font;
-                    var title = String(node.getTitle());
+                    var title = String(node.getTitle()) + (node.pinned ? "📌" : "");
                     if (title) {
                         if (selected) {
                             ctx.fillStyle = LiteGraph.NODE_SELECTED_TITLE_COLOR;
@@ -10106,10 +10104,6 @@ const globalExport = {};
                 );
             }
 
-            if (node.pinned) {
-                ctx.fillText("📌", node.getBounding()[2] - 20, -10);
-            }
-
             // these counter helps in conditioning drawing based on if the node has been executed or an action occurred
             if (node.execute_triggered > 0) node.execute_triggered--;
             if (node.action_triggered > 0) node.action_triggered--;
@@ -13128,11 +13122,13 @@ const globalExport = {};
                         content: "Resize", callback: LGraphCanvas.onMenuResizeNode
                     });
                 }
-                options.push(
-                    {
-                        content: "Collapse",
+                if (node.collapsible) {
+                    options.push({
+                        content: node.collapsed ? "Expand" : "Collapse",
                         callback: LGraphCanvas.onMenuNodeCollapse
-                    },
+                    });
+                }
+                options.push(
                     {
                         content: node.pinned ? "Unpin" : "Pin",
                         callback: LGraphCanvas.onMenuNodePin