From d607f6c7f7807245b83d67e07bbd6edb1f84f0c7 Mon Sep 17 00:00:00 2001 From: Chenlei Hu Date: Mon, 12 Aug 2024 09:19:10 -0400 Subject: [PATCH] Revert "Add support for LiteGraph to convert to classes (#334)" (#386) This reverts commit e2141a81e2b25dc2a1cddfc31e5dff3c135be3ca. --- src/extensions/core/contextMenuFilter.ts | 26 ++++++++++++------------ src/extensions/core/noteNode.ts | 13 ++++++------ src/extensions/core/rerouteNode.ts | 5 ++--- src/extensions/core/widgetInputs.ts | 9 ++++---- src/scripts/app.ts | 21 +++++++++---------- src/scripts/domWidget.ts | 1 + src/types/litegraph-augmentation.d.ts | 11 ---------- 7 files changed, 37 insertions(+), 49 deletions(-) diff --git a/src/extensions/core/contextMenuFilter.ts b/src/extensions/core/contextMenuFilter.ts index 625f26c84..7c17ca632 100644 --- a/src/extensions/core/contextMenuFilter.ts +++ b/src/extensions/core/contextMenuFilter.ts @@ -8,19 +8,19 @@ const ext = { init() { const ctxMenu = LiteGraph.ContextMenu // @ts-expect-error - // TODO Very hacky way to modify Litegraph behaviour. Fix ctx later. + // TODO Very hacky way to modify Litegraph behaviour. Fix this later. LiteGraph.ContextMenu = function (values, options) { - const ctx = new ctxMenu(values, options) + const ctx = ctxMenu.call(this, values, options) // If we are a dark menu (only used for combo boxes) then add a filter input - if (options?.className === 'dark' && values?.length > 4) { + if (options?.className === 'dark' && values?.length > 10) { const filter = document.createElement('input') filter.classList.add('comfy-context-menu-filter') filter.placeholder = 'Filter list' - ctx.root.prepend(filter) + this.root.prepend(filter) const items = Array.from( - ctx.root.querySelectorAll('.litemenu-entry') + this.root.querySelectorAll('.litemenu-entry') ) as HTMLElement[] let displayedItems = [...items] let itemCount = displayedItems.length @@ -61,16 +61,16 @@ const ext = { } const positionList = () => { - const rect = ctx.root.getBoundingClientRect() + const rect = this.root.getBoundingClientRect() // If the top is off-screen then shift the element with scaling applied if (rect.top < 0) { const scale = 1 - - ctx.root.getBoundingClientRect().height / - ctx.root.clientHeight - const shift = (ctx.root.clientHeight * scale) / 2 - ctx.root.style.top = -shift + 'px' + this.root.getBoundingClientRect().height / + this.root.clientHeight + const shift = (this.root.clientHeight * scale) / 2 + this.root.style.top = -shift + 'px' } } @@ -109,7 +109,7 @@ const ext = { selectedItem?.click() break case 'Escape': - ctx.close() + this.close() break } }) @@ -140,7 +140,7 @@ const ext = { let top = options.event.clientY - 10 const bodyRect = document.body.getBoundingClientRect() - const rootRect = ctx.root.getBoundingClientRect() + const rootRect = this.root.getBoundingClientRect() if ( bodyRect.height && top > bodyRect.height - rootRect.height - 10 @@ -148,7 +148,7 @@ const ext = { top = Math.max(0, bodyRect.height - rootRect.height - 10) } - ctx.root.style.top = top + 'px' + this.root.style.top = top + 'px' positionList() } }) diff --git a/src/extensions/core/noteNode.ts b/src/extensions/core/noteNode.ts index d2cd46839..7d74c42f1 100644 --- a/src/extensions/core/noteNode.ts +++ b/src/extensions/core/noteNode.ts @@ -1,32 +1,32 @@ import { LiteGraph, LGraphCanvas } from '@comfyorg/litegraph' import { app } from '../../scripts/app' import { ComfyWidgets } from '../../scripts/widgets' -import { LGraphNode } from '@comfyorg/litegraph' // Node that add notes to your project app.registerExtension({ name: 'Comfy.NoteNode', registerCustomNodes() { - class NoteNode extends LGraphNode { + class NoteNode { static category: string color = LGraphCanvas.node_colors.yellow.color bgcolor = LGraphCanvas.node_colors.yellow.bgcolor groupcolor = LGraphCanvas.node_colors.yellow.groupcolor + properties: { text: string } + serialize_widgets: boolean isVirtualNode: boolean collapsable: boolean title_mode: number - constructor(title?: string) { - super(title) + constructor() { if (!this.properties) { this.properties = { text: '' } } ComfyWidgets.STRING( - // Should we extends LGraphNode? Yesss + // @ts-expect-error + // Should we extends LGraphNode? this, '', - // @ts-expect-error ['', { default: this.properties.text, multiline: true }], app ) @@ -40,6 +40,7 @@ app.registerExtension({ LiteGraph.registerNodeType( 'Note', + // @ts-expect-error Object.assign(NoteNode, { title_mode: LiteGraph.NORMAL_TITLE, title: 'Note', diff --git a/src/extensions/core/rerouteNode.ts b/src/extensions/core/rerouteNode.ts index 45ce5ce8f..0c1c4cbc0 100644 --- a/src/extensions/core/rerouteNode.ts +++ b/src/extensions/core/rerouteNode.ts @@ -11,12 +11,11 @@ app.registerExtension({ __outputType?: string } - class RerouteNode extends LGraphNode { + class RerouteNode { static category: string | undefined static defaultVisibility = false - constructor(title?: string) { - super(title) + constructor() { if (!this.properties) { this.properties = {} } diff --git a/src/extensions/core/widgetInputs.ts b/src/extensions/core/widgetInputs.ts index 43eb77ca1..089d9765c 100644 --- a/src/extensions/core/widgetInputs.ts +++ b/src/extensions/core/widgetInputs.ts @@ -1,8 +1,8 @@ import { ComfyWidgets, addValueControlWidgets } from '../../scripts/widgets' import { app } from '../../scripts/app' import { applyTextReplacements } from '../../scripts/utils' -import { LiteGraph, LGraphNode } from '@comfyorg/litegraph' -import type { INodeInputSlot, IWidget } from '@comfyorg/litegraph' +import { LiteGraph } from '@comfyorg/litegraph' +import type { LGraphNode, INodeInputSlot, IWidget } from '@comfyorg/litegraph' const CONVERTED_TYPE = 'converted-widget' const VALID_TYPES = ['STRING', 'combo', 'number', 'toggle', 'BOOLEAN'] @@ -13,12 +13,11 @@ const TARGET = Symbol() // Used for reroutes to specify the real target widget interface PrimitiveNode extends LGraphNode {} const replacePropertyName = 'Run widget replace on values' -class PrimitiveNode extends LGraphNode { +class PrimitiveNode { controlValues: any[] lastType: string static category: string - constructor(title?: string) { - super(title) + constructor() { this.addOutput('connect to widget input', '*') this.serialize_widgets = true this.isVirtualNode = true diff --git a/src/scripts/app.ts b/src/scripts/app.ts index 661e042e1..3bf39e33b 100644 --- a/src/scripts/app.ts +++ b/src/scripts/app.ts @@ -1986,15 +1986,8 @@ export class ComfyApp { async registerNodeDef(nodeId: string, nodeData: ComfyNodeDef) { const self = this - const node = class ComfyNode extends LGraphNode { - static comfyClass? = nodeData.name - // TODO: change to "title?" once litegraph.d.ts has been updated - static title = nodeData.display_name || nodeData.name - static nodeData? = nodeData - static category?: string - - constructor(title?: string) { - super(title) + const node = Object.assign( + function ComfyNode() { var inputs = nodeData['input']['required'] if (nodeData['input']['optional'] != undefined) { inputs = Object.assign( @@ -2060,9 +2053,13 @@ export class ComfyApp { this.serialize_widgets = true app.#invokeExtensionsAsync('nodeCreated', this) + }, + { + title: nodeData.display_name || nodeData.name, + comfyClass: nodeData.name, + nodeData } - } - // @ts-expect-error + ) node.prototype.comfyClass = nodeData.name this.#addNodeContextMenuHandler(node) @@ -2070,7 +2067,9 @@ export class ComfyApp { this.#addNodeKeyHandler(node) await this.#invokeExtensionsAsync('beforeRegisterNodeDef', node, nodeData) + // @ts-expect-error LiteGraph.registerNodeType(nodeId, node) + // @ts-expect-error node.category = nodeData.category } diff --git a/src/scripts/domWidget.ts b/src/scripts/domWidget.ts index 24e23bb42..a59306a7b 100644 --- a/src/scripts/domWidget.ts +++ b/src/scripts/domWidget.ts @@ -254,6 +254,7 @@ export function addDomClippingSetting(): void { }) } +//@ts-ignore LGraphNode.prototype.addDOMWidget = function ( name: string, type: string, diff --git a/src/types/litegraph-augmentation.d.ts b/src/types/litegraph-augmentation.d.ts index 74b4fe050..359f94870 100644 --- a/src/types/litegraph-augmentation.d.ts +++ b/src/types/litegraph-augmentation.d.ts @@ -14,13 +14,6 @@ declare module '@comfyorg/litegraph' { * If the node is a frontend only node and should not be serialized into the prompt. */ isVirtualNode?: boolean - - addDOMWidget( - name: string, - type: string, - element: HTMLElement, - options: Record - ): DOMWidget } interface IWidget { @@ -74,8 +67,4 @@ declare module '@comfyorg/litegraph' { slotPos: Vector2 ): number } - - interface ContextMenu { - root?: HTMLDivElement - } }