Update Litegraph (TypeScript conversion) (#1145)

* Fix various type errors

* Fix rest of ts errors

* update litegraph

* nit

src/extensions/core/colorPalette.ts

@@ -667,7 +667,6 @@ app.registerExtension({
         // Sets the colors of node slots and links
         if (colorPalette.colors.node_slot) {
           Object.assign(
-            // @ts-expect-error
             app.canvas.default_connection_color_byType,
             colorPalette.colors.node_slot
           )

src/extensions/core/contextMenuFilter.ts

@@ -28,7 +28,6 @@ const ext = {
 
         // We must request an animation frame for the current node of the active canvas to update.
         requestAnimationFrame(() => {
-          // @ts-expect-error
           const currentNode = LGraphCanvas.active_canvas.current_node
           const clickedComboValue = currentNode.widgets
             ?.filter(

src/extensions/core/groupNode.ts

@@ -98,6 +98,7 @@ class GroupNodeBuilder {
     const nodesInOrder = app.graph.computeExecutionOrder(false)
     this.nodes = this.nodes
       .map((node) => ({ index: nodesInOrder.indexOf(node), node }))
+      // @ts-expect-error id might be string
       .sort((a, b) => a.index - b.index || a.node.id - b.node.id)
       .map(({ node }) => node)
   }
@@ -801,7 +802,6 @@ export class GroupNodeHandler {
           this.groupData.nodeData.nodes.map((n, i) => {
             const innerNode = LiteGraph.createNode(n.type)
             innerNode.configure(n)
-            // @ts-expect-error
             innerNode.id = `${this.node.id}:${i}`
             return innerNode
           })

src/extensions/core/rerouteNode.ts

@@ -1,3 +1,4 @@
+import type { IContextMenuValue } from '@comfyorg/litegraph'
 import { app } from '../../scripts/app'
 import { mergeIfValid, getWidgetConfig, setWidgetConfig } from './widgetInputs'
 import { LiteGraph, LGraphCanvas, LGraphNode } from '@comfyorg/litegraph'
@@ -32,12 +33,7 @@ app.registerExtension({
           })
         }
 
-        this.onConnectionsChange = function (
-          type,
-          index,
-          connected,
-          link_info
-        ) {
+        this.onConnectionsChange = (type, index, connected, link_info) => {
           this.applyOrientation()
 
           // Prevent multiple connections to different types when we have no input
@@ -63,7 +59,7 @@ app.registerExtension({
           }
 
           // Find root input
-          let currentNode = this
+          let currentNode: LGraphNode | null = this
           let updateNodes = []
           let inputType = null
           let inputNode = null
@@ -98,7 +94,7 @@ app.registerExtension({
           }
 
           // Find all outputs
-          const nodes = [this]
+          const nodes: LGraphNode[] = [this]
           let outputType = null
           while (nodes.length) {
             currentNode = nodes.pop()
@@ -177,7 +173,7 @@ app.registerExtension({
                   }
                   if (!targetWidget) {
                     targetWidget = targetNode.widgets?.find(
-                      (w) => w.name === targetInput.widget.name
+                      (w) => w.name === (targetInput.widget as any).name
                     )
                   }
 
@@ -227,7 +223,7 @@ app.registerExtension({
         this.isVirtualNode = true
       }
 
-      getExtraMenuOptions(_, options) {
+      getExtraMenuOptions(_, options): IContextMenuValue[] {
         options.unshift(
           {
             content:
@@ -268,6 +264,7 @@ app.registerExtension({
             }
           }
         )
+        return []
       }
       applyOrientation() {
         this.horizontal = this.properties.horizontal

src/extensions/core/snapToGrid.ts

@@ -80,7 +80,6 @@ app.registerExtension({
 
         let w, h
         if (node.flags.collapsed) {
-          // @ts-expect-error
           w = node._collapsed_width
           h = LiteGraph.NODE_TITLE_HEIGHT
           shiftY -= LiteGraph.NODE_TITLE_HEIGHT
@@ -161,7 +160,7 @@ app.registerExtension({
           const s = ctx.strokeStyle
           ctx.fillStyle = 'rgba(100, 100, 100, 0.33)'
           ctx.strokeStyle = 'rgba(100, 100, 100, 0.66)'
-          ctx.rect(x, y, ...selectedAndMovingGroup.size)
+          ctx.rect(x, y, ...(selectedAndMovingGroup.size as [number, number]))
           ctx.fill()
           ctx.stroke()
           ctx.fillStyle = f

src/extensions/core/uploadAudio.ts

@@ -158,7 +158,7 @@ app.registerExtension({
 
         const onAudioWidgetUpdate = () => {
           audioUIWidget.element.src = api.apiURL(
-            getResourceURL(...splitFilePath(audioWidget.value))
+            getResourceURL(...splitFilePath(audioWidget.value as string))
           )
         }
         // Initially load default audio file to audioUIWidget.

src/extensions/core/widgetInputs.ts

@@ -60,7 +60,7 @@ class PrimitiveNode extends LGraphNode {
     ]
     let v = this.widgets?.[0].value
     if (v && this.properties[replacePropertyName]) {
-      v = applyTextReplacements(app, v)
+      v = applyTextReplacements(app, v as string)
     }
 
     // For each output link copy our value over the original widget value
@@ -97,7 +97,7 @@ class PrimitiveNode extends LGraphNode {
     if (widget?.type === 'combo') {
       widget.options.values = this.outputs[0].widget[GET_CONFIG]()[0]
 
-      if (!widget.options.values.includes(widget.value)) {
+      if (!widget.options.values.includes(widget.value as string)) {
         widget.value = widget.options.values[0]
         ;(widget.callback as Function)(widget.value)
       }
@@ -115,6 +115,7 @@ class PrimitiveNode extends LGraphNode {
         for (let i = 0; i < this.widgets_values.length; i++) {
           const w = this.widgets[i]
           if (w) {
+            // @ts-expect-error change widget type from string to unknown
             w.value = this.widgets_values[i]
           }
         }
@@ -247,6 +248,7 @@ class PrimitiveNode extends LGraphNode {
       )
       let filter = this.widgets_values?.[2]
       if (filter && this.widgets.length === 3) {
+        // @ts-expect-error change widget type from string to unknown
         this.widgets[2].value = filter
       }
     }
@@ -489,9 +491,7 @@ export function convertToInput(
   const sz = node.size
   const inputIsOptional = !!widget.options?.inputIsOptional
   const input = node.addInput(widget.name, type, {
-    // @ts-expect-error GET_CONFIG is not defined in LiteGraph
     widget: { name: widget.name, [GET_CONFIG]: () => config },
-    // @ts-expect-error LiteGraph.SlotShape is not typed.
     ...(inputIsOptional ? { shape: LiteGraph.SlotShape.HollowCircle } : {})
   })