From 3730c2b36f149ed7fbf156e0ab41010aa053a992 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Sun, 2 Feb 2025 20:15:09 -0800
Subject: [PATCH] [Refactor] Use litegraph.strokeShape (#2406)

---
 package-lock.json  |  8 +++---
 package.json       |  2 +-
 src/scripts/app.ts | 61 ++++++++++++----------------------------------
 3 files changed, 21 insertions(+), 50 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index de48288908..ce43bb8ce9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
         "@comfyorg/comfyui-electron-types": "^0.4.16",
-        "@comfyorg/litegraph": "^0.8.62",
+        "@comfyorg/litegraph": "^0.8.63",
         "@primevue/forms": "^4.2.5",
         "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
@@ -1944,9 +1944,9 @@
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.8.62",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.62.tgz",
-      "integrity": "sha512-El2QO8m1ky0YB/tUTDA3sorhtzZgBItMZ+j80eO9fAQb/ptToTUId+DxWLAZyz0qhA7RXJFA27emX+sdtWYO9g==",
+      "version": "0.8.63",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.63.tgz",
+      "integrity": "sha512-DQ4LUWr+wPUAztDSdpYi5QuAd/cXs18/cO6nifVoSLk1YyHvnfPORIJmXLqnUBEtb2LO3igl06ToSklpL4kCyA==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {
diff --git a/package.json b/package.json
index fa6a445097..6aeca7259a 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.16",
-    "@comfyorg/litegraph": "^0.8.62",
+    "@comfyorg/litegraph": "^0.8.63",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index d6fe03b8fa..cf9fdb8ece 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -4,9 +4,10 @@ import {
   LGraphCanvas,
   LGraphEventMode,
   LGraphNode,
-  LiteGraph
+  LiteGraph,
+  strokeShape
 } from '@comfyorg/litegraph'
-import { Vector2 } from '@comfyorg/litegraph'
+import type { Rect, Vector2 } from '@comfyorg/litegraph'
 import _ from 'lodash'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { shallowReactive } from 'vue'
@@ -766,49 +767,19 @@ export class ComfyApp {
       }
 
       if (color) {
-        const shape =
-          node._shape || node.constructor.shape || LiteGraph.ROUND_SHAPE
-        ctx.lineWidth = lineWidth
-        ctx.globalAlpha = 0.8
-        ctx.beginPath()
-        if (shape == LiteGraph.BOX_SHAPE)
-          ctx.rect(
-            -6,
-            -6 - LiteGraph.NODE_TITLE_HEIGHT,
-            12 + size[0] + 1,
-            12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT
-          )
-        else if (
-          shape == LiteGraph.ROUND_SHAPE ||
-          (shape == LiteGraph.CARD_SHAPE && node.flags.collapsed)
-        )
-          ctx.roundRect(
-            -6,
-            -6 - LiteGraph.NODE_TITLE_HEIGHT,
-            12 + size[0] + 1,
-            12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT,
-            this.round_radius * 2
-          )
-        else if (shape == LiteGraph.CARD_SHAPE)
-          ctx.roundRect(
-            -6,
-            -6 - LiteGraph.NODE_TITLE_HEIGHT,
-            12 + size[0] + 1,
-            12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT,
-            [this.round_radius * 2, this.round_radius * 2, 2, 2]
-          )
-        else if (shape == LiteGraph.CIRCLE_SHAPE)
-          ctx.arc(
-            size[0] * 0.5,
-            size[1] * 0.5,
-            size[0] * 0.5 + 6,
-            0,
-            Math.PI * 2
-          )
-        ctx.strokeStyle = color
-        ctx.stroke()
-        ctx.strokeStyle = fgcolor
-        ctx.globalAlpha = 1
+        const area: Rect = [
+          0,
+          -LiteGraph.NODE_TITLE_HEIGHT,
+          size[0],
+          size[1] + LiteGraph.NODE_TITLE_HEIGHT
+        ]
+        strokeShape(ctx, area, {
+          shape: node._shape || node.constructor.shape || LiteGraph.ROUND_SHAPE,
+          thickness: lineWidth,
+          colour: color,
+          title_height: LiteGraph.NODE_TITLE_HEIGHT,
+          collapsed: node.collapsed
+        })
       }
 
       if (self.progress && node.id === +self.runningNodeId) {