[Refactor] Use litegraph.strokeShape (#2406)

This commit is contained in:
Chenlei Hu
2025-02-02 20:15:09 -08:00
committed by GitHub
parent 77be5ac514
commit 3730c2b36f
3 changed files with 21 additions and 50 deletions

8
package-lock.json generated
View File

@@ -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": {

View File

@@ -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",

View File

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