From 9051ab8d7a136c0d97f839dbcaaa82001ea703bc Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Mon, 10 Feb 2025 12:58:40 -0500
Subject: [PATCH] Type domWidget computeSize (#2495)

---
 src/scripts/domWidget.ts | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/scripts/domWidget.ts b/src/scripts/domWidget.ts
index 2e4b84a95..cc91ba9f4 100644
--- a/src/scripts/domWidget.ts
+++ b/src/scripts/domWidget.ts
@@ -1,8 +1,9 @@
 // @ts-strict-ignore
 import { LGraphCanvas, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
 import type { Vector4 } from '@comfyorg/litegraph'
-import {
+import type {
   ICustomWidget,
+  IWidget,
   IWidgetOptions
 } from '@comfyorg/litegraph/dist/types/widgets'
 
@@ -120,7 +121,13 @@ function getClipPath(
   return ''
 }
 
-function computeSize(size: [number, number]): void {
+function isDomWidget(
+  widget: IWidget
+): widget is DOMWidget<HTMLElement, object> {
+  return !!widget.element
+}
+
+function computeSize(this: LGraphNode, size: [number, number]): void {
   if (this.widgets?.[0]?.last_y == null) return
 
   let y = this.widgets[0].last_y
@@ -129,12 +136,14 @@ function computeSize(size: [number, number]): void {
   let widgetHeight = 0
   let dom = []
   for (const w of this.widgets) {
+    // @ts-expect-error custom widget type
     if (w.type === 'converted-widget') {
       // Ignore
+      // @ts-expect-error custom widget type
       delete w.computedHeight
     } else if (w.computeSize) {
       widgetHeight += w.computeSize()[1] + 4
-    } else if (w.element) {
+    } else if (isDomWidget(w)) {
       // Extract DOM widget size info
       const styles = getComputedStyle(w.element)
       let minHeight =
@@ -144,14 +153,17 @@ function computeSize(size: [number, number]): void {
         w.options.getMaxHeight?.() ??
         parseInt(styles.getPropertyValue('--comfy-widget-max-height'))
 
-      let prefHeight =
+      let prefHeight: string | number =
         w.options.getHeight?.() ??
         styles.getPropertyValue('--comfy-widget-height')
+      // @ts-expect-error number has no endsWith
       if (prefHeight.endsWith?.('%')) {
         prefHeight =
           size[1] *
+          // @ts-expect-error number has no substring
           (parseFloat(prefHeight.substring(0, prefHeight.length - 1)) / 100)
       } else {
+        // @ts-expect-error number is not assignable to param of type string
         prefHeight = parseInt(prefHeight)
         if (isNaN(minHeight)) {
           minHeight = prefHeight
@@ -241,7 +253,9 @@ function computeSize(size: [number, number]): void {
   // Position each of the widgets
   for (const w of this.widgets) {
     w.y = y
+    // @ts-expect-error custom widget type
     if (w.computedHeight) {
+      // @ts-expect-error custom widget type
       y += w.computedHeight
     } else if (w.computeSize) {
       y += w.computeSize()[1] + 4
@@ -253,9 +267,7 @@ function computeSize(size: [number, number]): void {
 
 // Override the compute visible nodes function to allow us to hide/show DOM elements when the node goes offscreen
 const elementWidgets = new Set()
-//@ts-ignore
 const computeVisibleNodes = LGraphCanvas.prototype.computeVisibleNodes
-//@ts-ignore
 LGraphCanvas.prototype.computeVisibleNodes = function (): LGraphNode[] {
   const visibleNodes = computeVisibleNodes.apply(this, arguments)