mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-01 22:09:55 +00:00
73b08acfe0
## Summary Move color/bgcolor initialization from class field overrides to constructor to preserve LGraphNodeProperties getter/setter instrumentation. Class field overrides were replacing the reactive property descriptors set by the parent constructor, preventing change events from firing. issue found while tesing in https://github.com/Comfy-Org/ComfyUI_frontend/issues/3449 ## Screenshots Before https://github.com/user-attachments/assets/04499a3a-15c2-44fd-9819-6dd5f6849f20 After https://github.com/user-attachments/assets/ba93278b-9761-4d45-abb3-2a57ff95a900 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7294-fix-Note-MarkdownNote-node-color-change-not-reactive-in-vueNodes-mode-2c46d73d3650818f8ee6f6f0c0e61d39) by [Unito](https://www.unito.io)
85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
|
|
import { LGraphNode } from '@/lib/litegraph/src/litegraph'
|
|
|
|
import { app } from '../../scripts/app'
|
|
import { ComfyWidgets } from '../../scripts/widgets'
|
|
|
|
// Node that add notes to your project
|
|
|
|
app.registerExtension({
|
|
name: 'Comfy.NoteNode',
|
|
registerCustomNodes() {
|
|
class NoteNode extends LGraphNode {
|
|
static override category: string
|
|
static collapsable: boolean
|
|
static title_mode: number
|
|
|
|
groupcolor = LGraphCanvas.node_colors.yellow.groupcolor
|
|
override isVirtualNode: boolean
|
|
|
|
constructor(title: string) {
|
|
super(title)
|
|
|
|
this.color = LGraphCanvas.node_colors.yellow.color
|
|
this.bgcolor = LGraphCanvas.node_colors.yellow.bgcolor
|
|
|
|
if (!this.properties) {
|
|
this.properties = { text: '' }
|
|
}
|
|
ComfyWidgets.STRING(
|
|
this,
|
|
'text',
|
|
['STRING', { default: this.properties.text, multiline: true }],
|
|
app
|
|
)
|
|
|
|
this.serialize_widgets = true
|
|
this.isVirtualNode = true
|
|
}
|
|
}
|
|
|
|
// Load default visibility
|
|
|
|
LiteGraph.registerNodeType(
|
|
'Note',
|
|
Object.assign(NoteNode, {
|
|
title_mode: LiteGraph.NORMAL_TITLE,
|
|
title: 'Note',
|
|
collapsable: true
|
|
})
|
|
)
|
|
|
|
NoteNode.category = 'utils'
|
|
|
|
/** Markdown variant of NoteNode */
|
|
class MarkdownNoteNode extends LGraphNode {
|
|
static override title = 'Markdown Note'
|
|
|
|
groupcolor = LGraphCanvas.node_colors.yellow.groupcolor
|
|
|
|
constructor(title: string) {
|
|
super(title)
|
|
|
|
this.color = LGraphCanvas.node_colors.yellow.color
|
|
this.bgcolor = LGraphCanvas.node_colors.yellow.bgcolor
|
|
|
|
if (!this.properties) {
|
|
this.properties = { text: '' }
|
|
}
|
|
ComfyWidgets.MARKDOWN(
|
|
this,
|
|
'text',
|
|
['STRING', { default: this.properties.text }],
|
|
app
|
|
)
|
|
|
|
this.serialize_widgets = true
|
|
this.isVirtualNode = true
|
|
}
|
|
}
|
|
|
|
LiteGraph.registerNodeType('MarkdownNote', MarkdownNoteNode)
|
|
MarkdownNoteNode.category = 'utils'
|
|
}
|
|
})
|