Update Litegraph (TypeScript conversion) (#1145)

* Fix various type errors

* Fix rest of ts errors

* update litegraph

* nit

src/scripts/app.ts

@@ -1110,6 +1110,7 @@ export class ComfyApp {
           // No image node selected: add a new one
           if (!imageNode) {
             const newNode = LiteGraph.createNode('LoadImage')
+            // @ts-expect-error array to Float32Array
             newNode.pos = [...this.canvas.graph_mouse]
             imageNode = this.graph.add(newNode)
             this.graph.change()
@@ -1212,9 +1213,7 @@ export class ComfyApp {
         // Move group by header
         if (
           LiteGraph.isInsideRectangle(
-            // @ts-expect-error
             e.canvasX,
-            // @ts-expect-error
             e.canvasY,
             this.selected_group.pos[0],
             this.selected_group.pos[1],
@@ -1574,7 +1573,6 @@ export class ComfyApp {
 
       // ComfyUI's custom node mode enum value 4 => bypass/never.
       let bgColor: string
-      // @ts-expect-error
       if (node.mode === 4) {
         // never
         bgColor = app.bypassBgColor
@@ -1754,9 +1752,7 @@ export class ComfyApp {
 
   #addAfterConfigureHandler() {
     const app = this
-    // @ts-expect-error
     const onConfigure = app.graph.onConfigure
-    // @ts-expect-error
     app.graph.onConfigure = function () {
       // Fire callbacks before the onConfigure, this is used by widget inputs to setup the config
       for (const node of app.graph.nodes) {
@@ -2098,8 +2094,7 @@ export class ComfyApp {
             // Node connection inputs
             const inputOptions = inputIsRequired
               ? {}
-              : // @ts-expect-error LiteGraph.SlotShape is not typed.
-                { shape: LiteGraph.SlotShape.HollowCircle }
+              : { shape: LiteGraph.SlotShape.HollowCircle }
             this.addInput(inputName, type, inputOptions)
             widgetCreated = false
           }
@@ -2437,7 +2432,10 @@ export class ComfyApp {
         for (let widget of node.widgets) {
           if (node.type == 'KSampler' || node.type == 'KSamplerAdvanced') {
             if (widget.name == 'sampler_name') {
-              if (widget.value.startsWith('sample_')) {
+              if (
+                typeof widget.value === 'string' &&
+                widget.value.startsWith('sample_')
+              ) {
                 widget.value = widget.value.slice(7)
               }
             }
@@ -2449,8 +2447,10 @@ export class ComfyApp {
           ) {
             if (widget.name == 'control_after_generate') {
               if (widget.value === true) {
+                // @ts-expect-error change widget type from boolean to string
                 widget.value = 'randomize'
               } else if (widget.value === false) {
+                // @ts-expect-error change widget type from boolean to string
                 widget.value = 'fixed'
               }
             }
@@ -2458,7 +2458,7 @@ export class ComfyApp {
           if (reset_invalid_values) {
             if (widget.type == 'combo') {
               if (
-                !widget.options.values.includes(widget.value) &&
+                !widget.options.values.includes(widget.value as string) &&
                 widget.options.values.length > 0
               ) {
                 widget.value = widget.options.values[0]
@@ -2499,8 +2499,8 @@ export class ComfyApp {
         }
       }
 
-      const innerNodes = outerNode.getInnerNodes
-        ? outerNode.getInnerNodes()
+      const innerNodes = outerNode['getInnerNodes']
+        ? outerNode['getInnerNodes']()
         : [outerNode]
       for (const node of innerNodes) {
         if (node.isVirtualNode) {
@@ -2520,8 +2520,8 @@ export class ComfyApp {
     for (const outerNode of graph.computeExecutionOrder(false)) {
       const skipNode = outerNode.mode === 2 || outerNode.mode === 4
       const innerNodes =
-        !skipNode && outerNode.getInnerNodes
-          ? outerNode.getInnerNodes()
+        !skipNode && outerNode['getInnerNodes']
+          ? outerNode['getInnerNodes']()
           : [outerNode]
       for (const node of innerNodes) {
         if (node.isVirtualNode) {
@@ -2868,7 +2868,6 @@ export class ComfyApp {
     for (const id of ids) {
       const data = apiData[id]
       const node = LiteGraph.createNode(data.class_type)
-      // @ts-expect-error
       node.id = isNaN(+id) ? id : +id
       node.title = data._meta?.title ?? node.title
       app.graph.add(node)
@@ -2901,7 +2900,6 @@ export class ComfyApp {
             const widget = node.widgets?.find((w) => w.name === input)
             if (widget) {
               widget.value = value
-              // @ts-expect-error
               widget.callback?.(value)
             }
           }
@@ -2936,7 +2934,6 @@ export class ComfyApp {
           const widget = node.widgets?.find((w) => w.name === input)
           if (widget) {
             widget.value = value
-            // @ts-expect-error
             widget.callback?.(value)
           }
         }

src/scripts/changeTracker.ts

@@ -32,7 +32,7 @@ export class ChangeTracker {
   store() {
     this.ds = {
       scale: this.app.canvas.ds.scale,
-      offset: [...this.app.canvas.ds.offset]
+      offset: [this.app.canvas.ds.offset[0], this.app.canvas.ds.offset[1]]
     }
   }
 

src/scripts/workflows.ts

@@ -329,7 +329,6 @@ export class ComfyWorkflow {
     const old = localStorage.getItem('litegrapheditor_clipboard')
     const graph = new LGraph(data)
     const canvas = new LGraphCanvas(null, graph, {
-      // @ts-expect-error
       skip_events: true,
       skip_render: true
     })