Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-30 19:21:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Refactor] Use litegraph.strokeShape (#2406)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@@ -11,7 +11,7 @@
"dependencies": { "dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "^1.3.1", "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
"@comfyorg/comfyui-electron-types": "^0.4.16", "@comfyorg/comfyui-electron-types": "^0.4.16",
"@comfyorg/litegraph": "^0.8.62", "@comfyorg/litegraph": "^0.8.63",
"@primevue/forms": "^4.2.5", "@primevue/forms": "^4.2.5",
"@primevue/themes": "^4.2.5", "@primevue/themes": "^4.2.5",
"@sentry/vue": "^8.48.0", "@sentry/vue": "^8.48.0",
@@ -1944,9 +1944,9 @@
"license": "GPL-3.0-only" "license": "GPL-3.0-only"
}, },
"node_modules/@comfyorg/litegraph": { "node_modules/@comfyorg/litegraph": {
"version": "0.8.62", "version": "0.8.63",
"resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.62.tgz", "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.63.tgz",
"integrity": "sha512-El2QO8m1ky0YB/tUTDA3sorhtzZgBItMZ+j80eO9fAQb/ptToTUId+DxWLAZyz0qhA7RXJFA27emX+sdtWYO9g==", "integrity": "sha512-DQ4LUWr+wPUAztDSdpYi5QuAd/cXs18/cO6nifVoSLk1YyHvnfPORIJmXLqnUBEtb2LO3igl06ToSklpL4kCyA==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@cspotcode/source-map-support": { "node_modules/@cspotcode/source-map-support": {

2
package.json
View File

@@ -84,7 +84,7 @@
"dependencies": { "dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "^1.3.1", "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
"@comfyorg/comfyui-electron-types": "^0.4.16", "@comfyorg/comfyui-electron-types": "^0.4.16",
"@comfyorg/litegraph": "^0.8.62", "@comfyorg/litegraph": "^0.8.63",
"@primevue/forms": "^4.2.5", "@primevue/forms": "^4.2.5",
"@primevue/themes": "^4.2.5", "@primevue/themes": "^4.2.5",
"@sentry/vue": "^8.48.0", "@sentry/vue": "^8.48.0",

61
src/scripts/app.ts
View File

@@ -4,9 +4,10 @@ import {
LGraphCanvas, LGraphCanvas,
LGraphEventMode, LGraphEventMode,
LGraphNode, LGraphNode,
LiteGraph LiteGraph,
strokeShape
} from '@comfyorg/litegraph' } from '@comfyorg/litegraph'
import { Vector2 } from '@comfyorg/litegraph' import type { Rect, Vector2 } from '@comfyorg/litegraph'
import _ from 'lodash' import _ from 'lodash'
import type { ToastMessageOptions } from 'primevue/toast' import type { ToastMessageOptions } from 'primevue/toast'
import { shallowReactive } from 'vue' import { shallowReactive } from 'vue'
@@ -766,49 +767,19 @@ export class ComfyApp {
} }
if (color) { if (color) {
const shape = const area: Rect = [
node._shape || node.constructor.shape || LiteGraph.ROUND_SHAPE 0,
ctx.lineWidth = lineWidth -LiteGraph.NODE_TITLE_HEIGHT,
ctx.globalAlpha = 0.8 size[0],
ctx.beginPath() size[1] + LiteGraph.NODE_TITLE_HEIGHT
if (shape == LiteGraph.BOX_SHAPE) ]
ctx.rect( strokeShape(ctx, area, {
-6, shape: node._shape || node.constructor.shape || LiteGraph.ROUND_SHAPE,
-6 - LiteGraph.NODE_TITLE_HEIGHT, thickness: lineWidth,
12 + size[0] + 1, colour: color,
12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT title_height: LiteGraph.NODE_TITLE_HEIGHT,
) collapsed: node.collapsed
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
} }
if (self.progress && node.id === +self.runningNodeId) { if (self.progress && node.id === +self.runningNodeId) {