[TS] Use strict mode in LGraphCanvas (#664)

- Prefer `undefined` over `null`
- Primarily nullable type updates

src/LGraph.ts

@@ -199,7 +199,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
   onOutputTypeChanged?(name: string, type: string): void
   onOutputRemoved?(name: string): void
   onBeforeChange?(graph: LGraph, info?: LGraphNode): void
-  onAfterChange?(graph: LGraph, info?: LGraphNode): void
+  onAfterChange?(graph: LGraph, info?: LGraphNode | null): void
   onConnectionChange?(node: LGraphNode): void
   on_change?(graph: LGraph): void
   onSerialize?(data: ISerialisedGraph | SerialisableGraph): void
@@ -1352,7 +1352,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
   }
 
   // used to resend actions, called after any change is made to the graph
-  afterChange(info?: LGraphNode): void {
+  afterChange(info?: LGraphNode | null): void {
     this.onAfterChange?.(this, info)
     this.canvasAction(c => c.onAfterChange?.(this))
   }

src/LGraphCanvas.ts

@@ -92,13 +92,13 @@ interface IShowSearchOptions {
 
 interface ICreateNodeOptions {
   /** input */
-  nodeFrom?: LGraphNode
+  nodeFrom?: LGraphNode | null
   /** input */
-  slotFrom?: number | INodeOutputSlot | INodeInputSlot
+  slotFrom?: number | INodeOutputSlot | INodeInputSlot | null
   /** output */
-  nodeTo?: LGraphNode
+  nodeTo?: LGraphNode | null
   /** output */
-  slotTo?: number | INodeOutputSlot | INodeInputSlot
+  slotTo?: number | INodeOutputSlot | INodeInputSlot | null
   /** pass the event coords */
 
   // FIXME: Should not be optional
@@ -456,7 +456,7 @@ export class LGraphCanvas implements ConnectionColorContext {
   node_over?: LGraphNode
   node_capturing_input?: LGraphNode | null
   highlighted_links: Dictionary<boolean> = {}
-  link_over_widget?: IWidget
+  link_over_widget?: IWidget | null
   link_over_widget_type?: string
 
   dirty_canvas: boolean = true
@@ -487,14 +487,14 @@ export class LGraphCanvas implements ConnectionColorContext {
   block_click?: boolean
   /** @deprecated Panels */
   last_click_position?: Point
-  resizing_node?: LGraphNode
+  resizing_node?: LGraphNode | null
   /** @deprecated See {@link LGraphCanvas.resizingGroup} */
   selected_group_resizing?: boolean
   /** @deprecated See {@link pointer}.{@link CanvasPointer.dragStarted dragStarted} */
   last_mouse_dragging?: boolean
   onMouseDown?: (arg0: CanvasMouseEvent) => void
-  _highlight_pos?: Point
-  _highlight_input?: INodeInputSlot
+  _highlight_pos?: Point | null
+  _highlight_input?: INodeInputSlot | null
   // TODO: Check if panels are used
   /** @deprecated Panels */
   node_panel?: any
@@ -1195,7 +1195,7 @@ export class LGraphCanvas implements ConnectionColorContext {
   // TODO refactor :: this is used fot title but not for properties!
   static onShowPropertyEditor(
     item: { property: keyof LGraphNode, type: string },
-    options: IContextMenuOptions,
+    options: IContextMenuOptions<string>,
     e: MouseEvent,
     menu: ContextMenu<string>,
     node: LGraphNode,
@@ -1872,7 +1872,8 @@ export class LGraphCanvas implements ConnectionColorContext {
     for (const widget of node.widgets) {
       if (widget.hidden || (widget.advanced && !node.showAdvanced)) continue
 
-      let widgetWidth: number, widgetHeight: number
+      let widgetWidth: number | undefined
+      let widgetHeight: number | undefined
       if (widget.computeSize) {
         ([widgetWidth, widgetHeight] = widget.computeSize(node.size[0]))
       } else if (widget.computeLayoutSize) {
@@ -1884,6 +1885,8 @@ export class LGraphCanvas implements ConnectionColorContext {
       }
 
       if (
+        widgetWidth != null &&
+        widgetHeight != null &&
         widget.last_y !== undefined &&
         x >= 6 &&
         x <= widgetWidth - 12 &&
@@ -1952,7 +1955,7 @@ export class LGraphCanvas implements ConnectionColorContext {
 
     if (!is_inside) return
 
-    const node = graph.getNodeOnPos(e.canvasX, e.canvasY, this.visible_nodes)
+    const node = graph.getNodeOnPos(e.canvasX, e.canvasY, this.visible_nodes) ?? undefined
 
     this.mouse[0] = x
     this.mouse[1] = y
@@ -2007,7 +2010,7 @@ export class LGraphCanvas implements ConnectionColorContext {
     this.onMouseDown?.(e)
   }
 
-  #processPrimaryButton(e: CanvasPointerEvent, node: LGraphNode) {
+  #processPrimaryButton(e: CanvasPointerEvent, node: LGraphNode | undefined) {
     const { pointer, graph } = this
     if (!graph) throw new NullGraphError()
 
@@ -2539,7 +2542,7 @@ export class LGraphCanvas implements ConnectionColorContext {
    * @param e The pointerdown event
    * @param node The node to process a click event for
    */
-  #processMiddleButton(e: CanvasPointerEvent, node: LGraphNode) {
+  #processMiddleButton(e: CanvasPointerEvent, node: LGraphNode | undefined) {
     const { pointer } = this
 
     if (
@@ -3668,7 +3671,7 @@ export class LGraphCanvas implements ConnectionColorContext {
    * Accessibility: anyone using {@link mutli_select} always deselects when clicking empty space.
    */
   processSelect<TPositionable extends Positionable = LGraphNode>(
-    item: TPositionable | null,
+    item: TPositionable | null | undefined,
     e: CanvasMouseEvent,
     sticky: boolean = false,
   ): void {
@@ -7262,7 +7265,7 @@ export class LGraphCanvas implements ConnectionColorContext {
     return group.getMenuOptions()
   }
 
-  processContextMenu(node: LGraphNode, event: CanvasMouseEvent): void {
+  processContextMenu(node: LGraphNode | undefined, event: CanvasMouseEvent): void {
     const canvas = LGraphCanvas.active_canvas
     const ref_window = canvas.getCanvasWindow()
 

src/LGraphNode.ts

@@ -279,7 +279,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
   console?: string[]
   _level?: number
   _shape?: RenderShape
-  mouseOver?: IMouseOverData
+  mouseOver?: IMouseOverData | null
   redraw_on_mouse?: boolean
   resizable?: boolean
   clonable?: boolean

src/interfaces.ts

@@ -136,9 +136,9 @@ export interface LinkSegment {
 
 export interface IInputOrOutput {
   // If an input, this will be defined
-  input?: INodeInputSlot
+  input?: INodeInputSlot | null
   // If an output, this will be defined
-  output?: INodeOutputSlot
+  output?: INodeOutputSlot | null
 }
 
 export interface IFoundSlot extends IInputOrOutput {