Road to No Explicit Any Part 3: Litegraph (#7935)

## Summary

- Replace `any` types with proper TypeScript types in litegraph core
files
- Focused on `LGraphCanvas.ts`, `LGraphNode.ts`, and `LGraph.ts`

## Changes

**LGraphCanvas.ts:**
- `ICreatePanelOptions` interface: `closable`, `window`, `width`,
`height`
- `options` property: `skip_events`, `viewport`, `skip_render`,
`autoresize`
- `prompt` function: `value` and `callback` parameters
- `onSearchBox` return type: `string[] | void`
- `onSearchBoxSelection` callback: `name: string`, `event: MouseEvent`
- `onDrawBackground` / `onDrawForeground` callbacks: `visible_area:
Rectangle`
- Properties Panel callback parameters

**LGraphNode.ts:**
- `onDropFile` / `onDropData`: `file: File`, `filename: string`
- `action_call` option: `string` (5 occurrences)
- `onSerialize` return type: `void`
- `onDrawTitleBar.fgcolor`: `string`

**LGraph.ts:**
- `LGraphConfig`: `align_to_grid`, `links_ontop` as `boolean`
- `triggerInput`: `value: unknown`
- `setCallback`: `func: (() => void) | undefined`

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7935-Road-to-No-Explicit-Any-Part-3-Litegraph-2e36d73d3650819eb9f9ec9c16ebc3b9)
by [Unito](https://www.unito.io)

src/extensions/core/selectionBorder.ts

@@ -1,4 +1,5 @@
-import { type LGraphCanvas, createBounds } from '@/lib/litegraph/src/litegraph'
+import type { LGraphCanvas, Rectangle } from '@/lib/litegraph/src/litegraph'
+import { createBounds } from '@/lib/litegraph/src/litegraph'
 import { app } from '@/scripts/app'
 
 /**
@@ -56,7 +57,7 @@ const ext = {
 
     app.canvas.onDrawForeground = function (
       ctx: CanvasRenderingContext2D,
-      visibleArea: any
+      visibleArea: Rectangle
     ) {
       // Call original if it exists
       originalDrawForeground?.call(this, ctx, visibleArea)

src/lib/litegraph/src/LGraph.ts

@@ -98,8 +98,8 @@ type ParamsArray<
 /** Configuration used by {@link LGraph} `config`. */
 export interface LGraphConfig {
   /** @deprecated Legacy config - unused */
-  align_to_grid?: any
+  align_to_grid?: boolean
-  links_ontop?: any
+  links_ontop?: boolean
 }
 
 export interface GroupNodeWorkflowData {
@@ -1230,7 +1230,7 @@ export class LGraph
   }
 
   /** @todo Clean up - never implemented. */
-  triggerInput(name: string, value: any): void {
+  triggerInput(name: string, value: unknown): void {
     const nodes = this.findNodesByTitle(name)
     for (const node of nodes) {
       // @ts-expect-error - onTrigger method may not exist on all node types
@@ -1239,7 +1239,7 @@ export class LGraph
   }
 
   /** @todo Clean up - never implemented. */
-  setCallback(name: string, func: any): void {
+  setCallback(name: string, func?: () => void): void {
     const nodes = this.findNodesByTitle(name)
     for (const node of nodes) {
       // @ts-expect-error - setTrigger method may not exist on all node types

src/lib/litegraph/src/LGraphCanvas.ts

@@ -224,12 +224,12 @@ interface IPasteFromClipboardOptions {
 }
 
 interface ICreatePanelOptions {
-  closable?: any
+  closable?: boolean
-  window?: any
+  window?: Window
   onOpen?: () => void
   onClose?: () => void
-  width?: any
+  width?: number | string
-  height?: any
+  height?: number | string
 }
 
 const cursors = {
@@ -495,10 +495,10 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
   }
 
   options: {
-    skip_events?: any
+    skip_events?: boolean
-    viewport?: any
+    viewport?: Rect
-    skip_render?: any
+    skip_render?: boolean
-    autoresize?: any
+    autoresize?: boolean
   }
 
   background_image: string
@@ -584,13 +584,27 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
   /** @deprecated LEGACY: REMOVE THIS, USE {@link graph_mouse} INSTEAD */
   canvas_mouse: Point
   /** to personalize the search box */
-  onSearchBox?: (helper: Element, str: string, canvas: LGraphCanvas) => any
+  onSearchBox?: (
-  onSearchBoxSelection?: (name: any, event: any, canvas: LGraphCanvas) => void
+    helper: HTMLDivElement,
+    str: string,
+    canvas: LGraphCanvas
+  ) => string[] | undefined
+  onSearchBoxSelection?: (
+    name: string,
+    event: MouseEvent,
+    canvas: LGraphCanvas
+  ) => void
   onMouse?: (e: CanvasPointerEvent) => boolean
   /** to render background objects (behind nodes and connections) in the canvas affected by transform */
-  onDrawBackground?: (ctx: CanvasRenderingContext2D, visible_area: any) => void
+  onDrawBackground?: (
+    ctx: CanvasRenderingContext2D,
+    visible_area: Rectangle
+  ) => void
   /** to render foreground objects (above nodes and connections) in the canvas affected by transform */
-  onDrawForeground?: (arg0: CanvasRenderingContext2D, arg1: any) => void
+  onDrawForeground?: (
+    ctx: CanvasRenderingContext2D,
+    visible_area: Rectangle
+  ) => void
   connections_width: number
   /** The current node being drawn by {@link drawNode}.  This should NOT be used to determine the currently selected node.  See {@link selectedItems} */
   current_node: LGraphNode | null
@@ -931,7 +945,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     this.connecting_links = null
 
     // to constraint render area to a portion of the canvas
-    this.viewport = options.viewport || null
+    this.viewport = options.viewport
 
     // link canvas and graph
     this.graph = graph
@@ -963,7 +977,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
       this.startRendering()
     }
 
-    this.autoresize = options.autoresize
+    this.autoresize = options.autoresize ?? false
 
     this.updateLowQualityThreshold()
   }
@@ -6668,8 +6682,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
   // refactor: there are different dialogs, some uses createDialog some dont
   prompt(
     title: string,
-    value: any,
+    value: string | number,
-    callback: (arg0: any) => void,
+    callback: (value: string) => void,
     event: CanvasPointerEvent,
     multiline?: boolean
   ): HTMLDivElement {
@@ -6746,7 +6760,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
       dialog.querySelector('.value')
     if (!value_element) throw new TypeError('value_element was null')
 
-    value_element.value = value
+    value_element.value = String(value)
     value_element.select()
 
     const input = value_element
@@ -8119,10 +8133,10 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
         {
           content: 'Properties Panel',
           callback: function (
-            _item: any,
+            _item: Positionable,
-            _options: any,
+            _options: IContextMenuOptions | undefined,
-            _e: any,
+            _e: MouseEvent | undefined,
-            _menu: any,
+            _menu: ContextMenu<unknown> | undefined,
             node: LGraphNode
           ) {
             LGraphCanvas.active_canvas.showShowNodePanel(node)

src/lib/litegraph/src/LGraphNode.ts

@@ -579,11 +579,11 @@ export class LGraphNode
   onInputAdded?(this: LGraphNode, input: INodeInputSlot): void
   onOutputAdded?(this: LGraphNode, output: INodeOutputSlot): void
   onConfigure?(this: LGraphNode, serialisedNode: ISerialisedNode): void
-  onSerialize?(this: LGraphNode, serialised: ISerialisedNode): any
+  onSerialize?(this: LGraphNode, serialised: ISerialisedNode): void
   onExecute?(
     this: LGraphNode,
     param?: unknown,
-    options?: { action_call?: any }
+    options?: { action_call?: string }
   ): void
   onAction?(
     this: LGraphNode,
@@ -655,10 +655,10 @@ export class LGraphNode
   onDropData?(
     this: LGraphNode,
     data: string | ArrayBuffer,
-    filename: any,
+    filename: string,
-    file: any
+    file: File
   ): void
-  onDropFile?(this: LGraphNode, file: any): void
+  onDropFile?(this: LGraphNode, file: File): void
   onInputClick?(this: LGraphNode, index: number, e: CanvasPointerEvent): void
   onInputDblClick?(this: LGraphNode, index: number, e: CanvasPointerEvent): void
   onOutputClick?(this: LGraphNode, index: number, e: CanvasPointerEvent): void
@@ -730,7 +730,7 @@ export class LGraphNode
     title_height: number,
     size: Size,
     scale: number,
-    fgcolor: any
+    fgcolor: string
   ): void
   onRemoved?(this: LGraphNode): void
   onMouseMove?(
@@ -1301,7 +1301,7 @@ export class LGraphNode
     return trigS
   }
 
-  onAfterExecuteNode(param: unknown, options?: { action_call?: any }) {
+  onAfterExecuteNode(param: unknown, options?: { action_call?: string }) {
     const trigS = this.findOutputSlot('onExecuted')
     if (trigS != -1) {
       this.triggerSlot(trigS, param, null, options)
@@ -1339,7 +1339,7 @@ export class LGraphNode
   /**
    * Triggers the node code execution, place a boolean/counter to mark the node as being executed
    */
-  doExecute(param?: unknown, options?: { action_call?: any }): void {
+  doExecute(param?: unknown, options?: { action_call?: string }): void {
     options = options || {}
     if (this.onExecute) {
       // enable this to give the event an ID
@@ -1405,7 +1405,7 @@ export class LGraphNode
   trigger(
     action: string,
     param: unknown,
-    options: { action_call?: any }
+    options: { action_call?: string }
   ): void {
     const { outputs } = this
     if (!outputs || !outputs.length) {
@@ -1435,7 +1435,7 @@ export class LGraphNode
     slot: number,
     param: unknown,
     link_id: number | null,
-    options?: { action_call?: any }
+    options?: { action_call?: string }
   ): void {
     options = options || {}
     if (!this.outputs) return