diff --git a/eslint.config.js b/eslint.config.js index f09f0abff..7370b0a32 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -124,6 +124,8 @@ export default tseslint.config( // Base, TypeScript, and Stylistic { rules: { + "prefer-template": "error", + // TODO: Update when TypeScript has been cleaned "prefer-spread": "off", "no-empty": "off", diff --git a/src/ContextMenu.ts b/src/ContextMenu.ts index 926e7ef7d..7bbcc7f48 100644 --- a/src/ContextMenu.ts +++ b/src/ContextMenu.ts @@ -63,7 +63,7 @@ export class ContextMenu { const root: ContextMenuDivElement = document.createElement("div") let classes = "litegraph litecontextmenu litemenubar-panel" - if (options.className) classes += " " + options.className + if (options.className) classes += ` ${options.className}` root.className = classes root.style.minWidth = "100" root.style.minHeight = "100" @@ -172,8 +172,8 @@ export class ContextMenu { top = body_rect.height - root_rect.height - 10 } - root.style.left = left + "px" - root.style.top = top + "px" + root.style.left = `${left}px` + root.style.top = `${top}px` if (LiteGraph.context_menu_scaling && options.scale) { root.style.transform = `scale(${Math.round(options.scale * 4) * 0.25})` @@ -211,7 +211,7 @@ export class ContextMenu { element.setAttribute("aria-haspopup", "true") element.setAttribute("aria-expanded", "false") } - if (value.className) element.className += " " + value.className + if (value.className) element.className += ` ${value.className}` } element.value = value element.setAttribute("role", "menuitem") @@ -325,7 +325,7 @@ export class ContextMenu { } else if (e && !ContextMenu.isCursorOverElement(e, this.parentMenu.root)) { ContextMenu.trigger( this.parentMenu.root, - LiteGraph.pointerevents_method + "leave", + `${LiteGraph.pointerevents_method}leave`, e, ) } diff --git a/src/LGraph.ts b/src/LGraph.ts index e415e9718..292295d35 100644 --- a/src/LGraph.ts +++ b/src/LGraph.ts @@ -469,7 +469,7 @@ export class LGraph implements LinkNetwork, Serialisable { this.errors_in_execution = true if (LiteGraph.throw_errors) throw error - if (LiteGraph.debug) console.log("Error during execution: " + error) + if (LiteGraph.debug) console.log("Error during execution:", error) this.stop() } } @@ -1116,7 +1116,7 @@ export class LGraph implements LinkNetwork, Serialisable { const ctor = LiteGraph.registered_node_types[node.type] if (node.constructor == ctor) continue - console.log("node being replaced by newer version: " + node.type) + console.log("node being replaced by newer version:", node.type) // @ts-ignore deprecated const newnode = LiteGraph.createNode(node.type) if (!newnode) continue @@ -1638,7 +1638,7 @@ export class LGraph implements LinkNetwork, Serialisable { // stored info let node = LiteGraph.createNode(String(n_info.type), n_info.title) if (!node) { - if (LiteGraph.debug) console.log("Node not found or has errors: " + n_info.type) + if (LiteGraph.debug) console.log("Node not found or has errors:", n_info.type) // in case of error we create a replacement node to avoid losing info node = new LGraphNode("") diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index 0edeee320..d035df7cf 100644 --- a/src/LGraphCanvas.ts +++ b/src/LGraphCanvas.ts @@ -58,7 +58,7 @@ import { } from "./measure" import { type ConnectionColorContext } from "./NodeSlot" import { Reroute, type RerouteId } from "./Reroute" -import { stringOrEmpty, stringOrNull } from "./strings" +import { stringOrEmpty } from "./strings" import { CanvasItem, EaseFunction, @@ -888,6 +888,7 @@ export class LGraphCanvas implements ConnectionColorContext { canvas.graph.beforeChange() const node = LiteGraph.createNode(value.value) if (node) { + if (!first_event) throw new TypeError("Context menu event was null. This should not occure in normal usage.") node.pos = canvas.convertEventToCanvasOffset(first_event) canvas.graph.add(node) } @@ -919,8 +920,6 @@ export class LGraphCanvas implements ConnectionColorContext { ): boolean | undefined { if (!node) return - // FIXME: Static function this - const that = this const canvas = LGraphCanvas.active_canvas const ref_window = canvas.getCanvasWindow() @@ -971,10 +970,10 @@ export class LGraphCanvas implements ConnectionColorContext { ref_window, ) - function inner_clicked(v: IContextMenuValue, e: MouseEvent, prev: ContextMenu) { + function inner_clicked(this: ContextMenuDivElement, v: IContextMenuValue, e: MouseEvent, prev: ContextMenu) { if (!node) return - v.callback?.call(that, node, v, e, prev) + v.callback?.call(this, node, v, e, prev) if (!v.value) return if (!node.graph) throw new NullGraphError() @@ -1109,7 +1108,7 @@ export class LGraphCanvas implements ConnectionColorContext { /** @param value Parameter is never used */ static onShowMenuNodeProperties( - value: unknown, + value: string | number | boolean | object, options: unknown, e: MouseEvent, prev_menu: ContextMenu, @@ -1130,14 +1129,11 @@ export class LGraphCanvas implements ConnectionColorContext { value = LGraphCanvas.getPropertyPrintableValue(value, info.values) // value could contain invalid html characters, clean that - value = LGraphCanvas.decodeHTML(stringOrNull(value)) + value = LGraphCanvas.decodeHTML(stringOrEmpty(value)) entries.push({ - content: "" + - (info.label || i) + - "" + - "" + - value + - "", + content: + `${info.label || i}` + + `${value}`, value: i, }) } @@ -1170,6 +1166,7 @@ export class LGraphCanvas implements ConnectionColorContext { return false } + /** @deprecated */ static decodeHTML(str: string): string { const e = document.createElement("div") e.textContent = str @@ -1259,11 +1256,11 @@ export class LGraphCanvas implements ConnectionColorContext { } if (e) { - dialog.style.left = e.clientX + offsetx + "px" - dialog.style.top = e.clientY + offsety + "px" + dialog.style.left = `${e.clientX + offsetx}px` + dialog.style.top = `${e.clientY + offsety}px` } else { - dialog.style.left = canvasEl.width * 0.5 + offsetx + "px" - dialog.style.top = canvasEl.height * 0.5 + offsety + "px" + dialog.style.left = `${canvasEl.width * 0.5 + offsetx}px` + dialog.style.top = `${canvasEl.height * 0.5 + offsety}px` } const button = dialog.querySelector("button") @@ -1321,7 +1318,7 @@ export class LGraphCanvas implements ConnectionColorContext { desc_value = k break } - return String(value) + " (" + desc_value + ")" + return `${String(value)} (${desc_value})` } } @@ -1399,7 +1396,7 @@ export class LGraphCanvas implements ConnectionColorContext { if (kV !== -1 && LiteGraph.NODE_MODES[kV]) { node.changeMode(kV) } else { - console.warn("unexpected mode: " + v) + console.warn(`unexpected mode: ${v}`) node.changeMode(LGraphEventMode.ALWAYS) } } @@ -1437,13 +1434,8 @@ export class LGraphCanvas implements ConnectionColorContext { const color = LGraphCanvas.node_colors[i] value = { value: i, - content: "" + - i + - "", + content: `${i}`, } values.push(value) } @@ -1682,8 +1674,7 @@ export class LGraphCanvas implements ConnectionColorContext { if (element.getContext == null) { if (element.localName != "canvas") { - throw "Element supplied for LGraphCanvas must be a element, you passed a " + - element.localName + throw `Element supplied for LGraphCanvas must be a element, you passed a ${element.localName}` } throw "This browser doesn't support Canvas" } @@ -4476,11 +4467,11 @@ export class LGraphCanvas implements ConnectionColorContext { ctx.fillStyle = "#888" ctx.textAlign = "left" if (this.graph) { - ctx.fillText("T: " + this.graph.globaltime.toFixed(2) + "s", 5, 13 * 1) - ctx.fillText("I: " + this.graph.iteration, 5, 13 * 2) - ctx.fillText("N: " + this.graph._nodes.length + " [" + this.visible_nodes.length + "]", 5, 13 * 3) - ctx.fillText("V: " + this.graph._version, 5, 13 * 4) - ctx.fillText("FPS:" + this.fps.toFixed(2), 5, 13 * 5) + ctx.fillText(`T: ${this.graph.globaltime.toFixed(2)}s`, 5, 13 * 1) + ctx.fillText(`I: ${this.graph.iteration}`, 5, 13 * 2) + ctx.fillText(`N: ${this.graph._nodes.length} [${this.visible_nodes.length}]`, 5, 13 * 3) + ctx.fillText(`V: ${this.graph._version}`, 5, 13 * 4) + ctx.fillText(`FPS:${this.fps.toFixed(2)}`, 5, 13 * 5) } else { ctx.fillText("No graph selected", 5, 13 * 1) } @@ -4774,13 +4765,13 @@ export class LGraphCanvas implements ConnectionColorContext { if (typeof data === "number") text = data.toFixed(2) else if (typeof data === "string") - text = "\"" + data + "\"" + text = `"${data}"` else if (typeof data === "boolean") text = String(data) else if (data.toToolTip) text = data.toToolTip() else - text = "[" + data.constructor.name + "]" + text = `[${data.constructor.name}]` if (text == null) return @@ -5709,7 +5700,7 @@ export class LGraphCanvas implements ConnectionColorContext { const isTo = !isFrom && opts.nodeTo && opts.slotTo !== null if (!isFrom && !isTo) { - console.warn("No data passed to createDefaultNodeForSlot " + opts.nodeFrom + " " + opts.slotFrom + " " + opts.nodeTo + " " + opts.slotTo) + console.warn(`No data passed to createDefaultNodeForSlot`, opts.nodeFrom, opts.slotFrom, opts.nodeTo, opts.slotTo) return false } if (!opts.nodeType) { @@ -5736,7 +5727,7 @@ export class LGraphCanvas implements ConnectionColorContext { break case "undefined": default: - console.warn("Cant get slot information " + slotX) + console.warn("Cant get slot information", slotX) return false } @@ -5831,7 +5822,7 @@ export class LGraphCanvas implements ConnectionColorContext { return true } - console.log("failed creating " + nodeNewType) + console.log(`failed creating ${nodeNewType}`) } } return false @@ -5880,7 +5871,7 @@ export class LGraphCanvas implements ConnectionColorContext { slotX = isFrom ? nodeX.outputs[slotX] : nodeX.inputs[slotX] break default: - console.warn("Cant get slot information " + slotX) + console.warn("Cant get slot information", slotX) return } @@ -5977,7 +5968,7 @@ export class LGraphCanvas implements ConnectionColorContext { const canvas = graphcanvas.canvas canvas.parentNode.append(dialog) - if (this.ds.scale > 1) dialog.style.transform = "scale(" + this.ds.scale + ")" + if (this.ds.scale > 1) dialog.style.transform = `scale(${this.ds.scale})` let dialogCloseTimer = null let prevent_timeout = 0 @@ -6058,11 +6049,11 @@ export class LGraphCanvas implements ConnectionColorContext { } if (event) { - dialog.style.left = event.clientX + offsetx + "px" - dialog.style.top = event.clientY + offsety + "px" + dialog.style.left = `${event.clientX + offsetx}px` + dialog.style.top = `${event.clientY + offsety}px` } else { - dialog.style.left = canvas.width * 0.5 + offsetx + "px" - dialog.style.top = canvas.height * 0.5 + offsety + "px" + dialog.style.left = `${canvas.width * 0.5 + offsetx}px` + dialog.style.top = `${canvas.height * 0.5 + offsety}px` } setTimeout(function () { @@ -6153,7 +6144,7 @@ export class LGraphCanvas implements ConnectionColorContext { } if (this.ds.scale > 1) { - dialog.style.transform = "scale(" + this.ds.scale + ")" + dialog.style.transform = `scale(${this.ds.scale})` } // hide on mouse leave @@ -6271,8 +6262,8 @@ export class LGraphCanvas implements ConnectionColorContext { if ( // @ts-expect-error options.type_filter_in !== false && - (options.type_filter_in + "").toLowerCase() == - (aSlots[iK] + "").toLowerCase() + String(options.type_filter_in).toLowerCase() == + String(aSlots[iK]).toLowerCase() ) { // selIn.selectedIndex .. opt.selected = true @@ -6306,8 +6297,8 @@ export class LGraphCanvas implements ConnectionColorContext { selOut.append(opt) if ( options.type_filter_out !== false && - (options.type_filter_out + "").toLowerCase() == - (aSlots[iK] + "").toLowerCase() + String(options.type_filter_out).toLowerCase() == + String(aSlots[iK]).toLowerCase() ) { opt.selected = true } @@ -6323,13 +6314,13 @@ export class LGraphCanvas implements ConnectionColorContext { const left = (event ? event.clientX : rect.left + rect.width * 0.5) - 80 const top = (event ? event.clientY : rect.top + rect.height * 0.5) - 20 - dialog.style.left = left + "px" - dialog.style.top = top + "px" + dialog.style.left = `${left}px` + dialog.style.top = `${top}px` // To avoid out of screen problems if (event.layerY > rect.height - 200) // @ts-expect-error - helper.style.maxHeight = rect.height - event.layerY - 20 + "px" + helper.style.maxHeight = `${rect.height - event.layerY - 20}px` requestAnimationFrame(function () { input.focus() @@ -6603,7 +6594,7 @@ export class LGraphCanvas implements ConnectionColorContext { help.dataset["type"] = escape(type) help.className = "litegraph lite-search-item" if (className) { - help.className += " " + className + help.className += ` ${className}` } help.addEventListener("click", function () { select(unescape(this.dataset["type"])) @@ -6641,32 +6632,20 @@ export class LGraphCanvas implements ConnectionColorContext { for (const i in info.values) { const v = Array.isArray(info.values) ? info.values[i] : i - input_html += - "" + const selected = v == node.properties[property] ? "selected" : "" + input_html += `` } input_html += "" } else if (type == "boolean" || type == "toggle") { - input_html = - "" + const checked = node.properties[property] ? "checked" : "" + input_html = `` } else { - console.warn("unknown type: " + type) + console.warn(`unknown type: ${type}`) return } const dialog = this.createDialog( - "" + - (info.label || property) + - "" + - input_html + - "", + `${info.label || property}${input_html}`, options, ) @@ -6788,8 +6767,8 @@ export class LGraphCanvas implements ConnectionColorContext { offsety += this.canvas.height * 0.5 } - dialog.style.left = offsetx + "px" - dialog.style.top = offsety + "px" + dialog.style.left = `${offsetx}px` + dialog.style.top = `${offsety}px` this.canvas.parentNode.append(dialog) @@ -7085,7 +7064,7 @@ export class LGraphCanvas implements ConnectionColorContext { if (kV !== -1 && LiteGraph.NODE_MODES[kV]) { node.changeMode(kV) } else { - console.warn("unexpected mode: " + value) + console.warn(`unexpected mode: ${value}`) } break } @@ -7094,7 +7073,7 @@ export class LGraphCanvas implements ConnectionColorContext { node.color = LGraphCanvas.node_colors[value].color node.bgcolor = LGraphCanvas.node_colors[value].bgcolor } else { - console.warn("unexpected color: " + value) + console.warn(`unexpected color: ${value}`) } break default: diff --git a/src/LGraphGroup.ts b/src/LGraphGroup.ts index 2be988b32..40a1adc49 100644 --- a/src/LGraphGroup.ts +++ b/src/LGraphGroup.ts @@ -200,7 +200,7 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable { ctx.fill() // Title - ctx.font = font_size + "px Arial" + ctx.font = `${font_size}px Arial` ctx.textAlign = "left" ctx.fillText(this.title + (this.pinned ? "📌" : ""), x + padding, y + font_size) diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts index 88669fc8d..4bca0ede5 100644 --- a/src/LGraphNode.ts +++ b/src/LGraphNode.ts @@ -46,14 +46,14 @@ import { WIDGET_TYPE_MAP } from "./widgets/widgetMap" export type NodeId = number | string +export type NodeProperty = string | number | boolean | object + export interface INodePropertyInfo { name: string type?: string - default_value: unknown + default_value: NodeProperty | undefined } -export type INodeProperties = Dictionary - export interface IMouseOverData { inputId: number | null outputId: number | null @@ -177,7 +177,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { outputs: INodeOutputSlot[] = [] // Not used connections: unknown[] = [] - properties: INodeProperties = {} + properties: Dictionary = {} properties_info: INodePropertyInfo[] = [] flags: INodeFlags = {} widgets?: IWidget[] @@ -1139,7 +1139,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { options = options || {} if (this.onExecute) { // enable this to give the event an ID - options.action_call ||= this.id + "_exec_" + Math.floor(Math.random() * 9999) + options.action_call ||= `${this.id}_exec_${Math.floor(Math.random() * 9999)}` if (!this.graph) throw new NullGraphError() // @ts-ignore Technically it works when id is a string. Array gets props. @@ -1173,7 +1173,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { options = options || {} if (this.onAction) { // enable this to give the event an ID - options.action_call ||= this.id + "_" + (action || "action") + "_" + Math.floor(Math.random() * 9999) + options.action_call ||= `${this.id}_${action || "action"}_${Math.floor(Math.random() * 9999)}` if (!this.graph) throw new NullGraphError() // @ts-ignore deprecated @@ -1270,13 +1270,13 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { if (node.mode === LGraphEventMode.ON_TRIGGER) { // generate unique trigger ID if not present if (!options.action_call) - options.action_call = this.id + "_trigg_" + Math.floor(Math.random() * 9999) + options.action_call = `${this.id}_trigg_${Math.floor(Math.random() * 9999)}` // -- wrapping node.onExecute(param); -- node.doExecute?.(param, options) } else if (node.onAction) { // generate unique action ID if not present if (!options.action_call) - options.action_call = this.id + "_act_" + Math.floor(Math.random() * 9999) + options.action_call = `${this.id}_act_${Math.floor(Math.random() * 9999)}` // pass the action name const target_connection = node.inputs[link_info.target_slot] node.actionDo(target_connection.name, param, options) @@ -1339,7 +1339,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { */ addProperty( name: string, - default_value: unknown, + default_value: NodeProperty | undefined, type?: string, extra_info?: Partial, ): INodePropertyInfo { @@ -1631,7 +1631,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { } // litescene mode using the constructor // @ts-ignore deprecated https://github.com/Comfy-Org/litegraph.js/issues/639 - if (this.constructor["@" + property]) info = this.constructor["@" + property] + if (this.constructor[`@${property}`]) info = this.constructor[`@${property}`] if (this.constructor.widgets_info?.[property]) info = this.constructor.widgets_info[property] @@ -2307,7 +2307,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { if (typeof slot === "string") { slot = this.findOutputSlot(slot) if (slot == -1) { - if (LiteGraph.debug) console.log("Connect: Error, no slot of name " + slot) + if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${slot}`) return null } } else if (!this.outputs || slot >= this.outputs.length) { @@ -2330,7 +2330,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { if (typeof target_slot === "string") { targetIndex = target_node.findInputSlot(target_slot) if (targetIndex == -1) { - if (LiteGraph.debug) console.log("Connect: Error, no slot of name " + targetIndex) + if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${targetIndex}`) return null } } else if (target_slot === LiteGraph.EVENT) { @@ -2480,7 +2480,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { if (typeof slot === "string") { slot = this.findOutputSlot(slot) if (slot == -1) { - if (LiteGraph.debug) console.log("Connect: Error, no slot of name " + slot) + if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${slot}`) return false } } else if (!this.outputs || slot >= this.outputs.length) { @@ -2595,7 +2595,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { if (typeof slot === "string") { slot = this.findInputSlot(slot) if (slot == -1) { - if (LiteGraph.debug) console.log("Connect: Error, no slot of name " + slot) + if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${slot}`) return false } } else if (!this.inputs || slot >= this.inputs.length) { diff --git a/src/LiteGraphGlobal.ts b/src/LiteGraphGlobal.ts index ee42ca93f..d5052ec79 100644 --- a/src/LiteGraphGlobal.ts +++ b/src/LiteGraphGlobal.ts @@ -312,7 +312,7 @@ export class LiteGraphGlobal { throw "Cannot register a simple object, it must be a class with a prototype" base_class.type = type - if (this.debug) console.log("Node registered: " + type) + if (this.debug) console.log("Node registered:", type) const classname = base_class.name @@ -329,7 +329,7 @@ export class LiteGraphGlobal { const prev = this.registered_node_types[type] if (prev) { - console.log("replacing node type: " + type) + console.log("replacing node type:", type) } this.registered_node_types[type] = base_class @@ -354,7 +354,7 @@ export class LiteGraphGlobal { const base_class = typeof type === "string" ? this.registered_node_types[type] : type - if (!base_class) throw "node type not found: " + type + if (!base_class) throw `node type not found: ${String(type)}` delete this.registered_node_types[String(base_class.type)] @@ -548,7 +548,7 @@ export class LiteGraphGlobal { continue try { - if (this.debug) console.log("Reloading: " + src) + if (this.debug) console.log("Reloading:", src) const dynamicScript = document.createElement("script") dynamicScript.type = "text/javascript" dynamicScript.src = src @@ -556,7 +556,7 @@ export class LiteGraphGlobal { script_file.remove() } catch (error) { if (this.throw_errors) throw error - if (this.debug) console.log("Error while reloading " + src) + if (this.debug) console.log("Error while reloading", src) } } @@ -631,7 +631,7 @@ export class LiteGraphGlobal { // used to create nodes from wrapping functions getParameterNames(func: (...args: any) => any): string[] { - return (func + "") + return String(func) .replaceAll(/\/\/.*$/gm, "") // strip single-line comments .replaceAll(/\s+/g, "") // strip white space .replaceAll(/\/\*[^*/]*\*\//g, "") // strip multi-line comments /**/ @@ -654,7 +654,7 @@ export class LiteGraphGlobal { // convert pointerevents to touch event when not available if (sMethod == "pointer" && !window.PointerEvent) { console.warn("sMethod=='pointer' && !window.PointerEvent") - console.log("Converting pointer[" + sEvent + "] : down move up cancel enter TO touchstart touchmove touchend, etc ..") + console.log(`Converting pointer[${sEvent}] : down move up cancel enter TO touchstart touchmove touchend, etc ..`) switch (sEvent) { case "down": { sMethod = "touch" @@ -682,7 +682,7 @@ export class LiteGraphGlobal { } // case "over": case "out": not used at now default: { - console.warn("PointerEvent not available in this browser ? The event " + sEvent + " would not be called") + console.warn(`PointerEvent not available in this browser ? The event ${sEvent} would not be called`) } } } @@ -740,15 +740,15 @@ export class LiteGraphGlobal { colorToString(c: [number, number, number, number]): string { return ( - "rgba(" + - Math.round(c[0] * 255).toFixed() + - "," + - Math.round(c[1] * 255).toFixed() + - "," + - Math.round(c[2] * 255).toFixed() + - "," + - (c.length == 4 ? c[3].toFixed(2) : "1.0") + - ")" + `rgba(${ + Math.round(c[0] * 255).toFixed() + },${ + Math.round(c[1] * 255).toFixed() + },${ + Math.round(c[2] * 255).toFixed() + },${ + c.length == 4 ? c[3].toFixed(2) : "1.0" + })` ) } diff --git a/src/types/serialisation.ts b/src/types/serialisation.ts index b85535784..f70aa0370 100644 --- a/src/types/serialisation.ts +++ b/src/types/serialisation.ts @@ -9,7 +9,7 @@ import type { } from "../interfaces" import type { LGraph, LGraphState } from "../LGraph" import type { IGraphGroupFlags, LGraphGroup } from "../LGraphGroup" -import type { LGraphNode, NodeId } from "../LGraphNode" +import type { LGraphNode, NodeId, NodeProperty } from "../LGraphNode" import type { LiteGraph } from "../litegraph" import type { LinkId, LLink } from "../LLink" import type { RerouteId } from "../Reroute" @@ -57,7 +57,7 @@ export interface ISerialisedNode { mode?: number outputs?: ISerialisedNodeOutputSlot[] inputs?: ISerialisedNodeInputSlot[] - properties?: Dictionary + properties?: Dictionary shape?: RenderShape boxcolor?: string color?: string diff --git a/src/widgets/KnobWidget.ts b/src/widgets/KnobWidget.ts index 523da73c6..4b31e5cf5 100644 --- a/src/widgets/KnobWidget.ts +++ b/src/widgets/KnobWidget.ts @@ -186,12 +186,9 @@ export class KnobWidget extends BaseWidget implements IKnobWidget { if (show_text) { ctx.textAlign = "center" ctx.fillStyle = this.text_color + const fixedValue = Number(this.value).toFixed(this.options.precision ?? 3) ctx.fillText( - (this.label || this.name) + - "\n" + - Number(this.value).toFixed( - this.options.precision != null ? this.options.precision : 3, - ), + `${this.label || this.name}\n${fixedValue}`, widget_width * 0.5, y + effective_height * 0.5, ) diff --git a/src/widgets/SliderWidget.ts b/src/widgets/SliderWidget.ts index 77ad2aac7..c2193205a 100644 --- a/src/widgets/SliderWidget.ts +++ b/src/widgets/SliderWidget.ts @@ -77,12 +77,9 @@ export class SliderWidget extends BaseWidget implements ISliderWidget { if (show_text) { ctx.textAlign = "center" ctx.fillStyle = this.text_color + const fixedValue = Number(this.value).toFixed(this.options.precision ?? 3) ctx.fillText( - (this.label || this.name) + - " " + - Number(this.value).toFixed( - this.options.precision != null ? this.options.precision : 3, - ), + `${this.label || this.name} ${fixedValue}`, widget_width * 0.5, y + H * 0.7, )