[TS] Use strict mode in CanvasPointer, measure, and polyfills (#617)

- Adds runtime type guard
- Adds ts-ignore that must be removed later
  * [ ] #578

src/CanvasPointer.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import type { CanvasPointerEvent } from "./types/events"
 
 import { dist2 } from "./measure"
@@ -47,7 +46,7 @@ export class CanvasPointer {
   /** The element this PointerState should capture input against when dragging. */
   element: Element
   /** Pointer ID used by drag capture. */
-  pointerId: number
+  pointerId?: number
 
   /** Set to true when if the pointer moves far enough after a down event, before the corresponding up event is fired. */
   dragStarted: boolean = false
@@ -273,7 +272,9 @@ export class CanvasPointer {
     }
 
     const { element, pointerId } = this
-    if (element.hasPointerCapture(pointerId))
+    this.pointerId = undefined
+    if (typeof pointerId === "number" && element.hasPointerCapture(pointerId)) {
       element.releasePointerCapture(pointerId)
+    }
   }
 }

src/LGraphCanvas.ts

@@ -2535,14 +2535,17 @@ export class LGraphCanvas implements ConnectionColorContext {
     const x = pos[0] - node.pos[0]
     const y = pos[1] - node.pos[1]
 
+    // @ts-ignore https://github.com/Comfy-Org/litegraph.js/issues/616
     const WidgetClass = WIDGET_TYPE_MAP[widget.type]
     if (WidgetClass) {
       const widgetInstance = toClass(WidgetClass, widget)
+      // @ts-ignore https://github.com/Comfy-Org/litegraph.js/issues/616
       pointer.onClick = () => widgetInstance.onClick({
         e,
         node,
         canvas: this,
       })
+      // @ts-ignore https://github.com/Comfy-Org/litegraph.js/issues/616
       pointer.onDrag = eMove => widgetInstance.onDrag?.({
         e: eMove,
         node,

src/LGraphGroup.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import type {
   ColorOption,
   IColorable,

src/LGraphNode.ts

@@ -1727,6 +1727,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
 
   addCustomWidget<T extends IWidget>(custom_widget: T): T {
     this.widgets ||= []
+    // @ts-ignore https://github.com/Comfy-Org/litegraph.js/issues/616
     const WidgetClass = WIDGET_TYPE_MAP[custom_widget.type]
     const widget = WidgetClass ? new WidgetClass(custom_widget) as IWidget : custom_widget
     this.widgets.push(widget)
@@ -3188,10 +3189,13 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
       if (w.disabled) ctx.globalAlpha *= 0.5
       const widget_width = w.width || width
 
-      const WidgetClass = WIDGET_TYPE_MAP[w.type]
+      // @ts-ignore https://github.com/Comfy-Org/litegraph.js/issues/616
+      const WidgetClass: typeof WIDGET_TYPE_MAP[string] = WIDGET_TYPE_MAP[w.type]
       if (WidgetClass) {
+        // @ts-ignore https://github.com/Comfy-Org/litegraph.js/issues/616
         toClass(WidgetClass, w).drawWidget(ctx, { y, width: widget_width, show_text, margin })
       } else {
+        // @ts-ignore https://github.com/Comfy-Org/litegraph.js/issues/616
         w.draw?.(ctx, this, widget_width, y, H)
       }
       ctx.globalAlpha = editorAlpha

src/measure.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import type {
   Point,
   ReadOnlyPoint,
@@ -233,6 +232,7 @@ export function rotateLink(
   case to:
   case LinkDirection.CENTER:
   case LinkDirection.NONE:
+  default:
     // Nothing to do
     return
 

src/polyfills.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 // API *************************************************
 // like rect but rounded corners
 export function loadPolyfills() {
@@ -9,12 +8,12 @@ export function loadPolyfills() {
   ) {
     // @ts-expect-error Slightly broken polyfill - radius_low not impl. anywhere
     window.CanvasRenderingContext2D.prototype.roundRect = function (
-      x,
-      y,
-      w,
-      h,
-      radius,
-      radius_low,
+      x: number,
+      y: number,
+      w: number,
+      h: number,
+      radius: number | number[],
+      radius_low: number | number[],
     ) {
       let top_left_radius = 0
       let top_right_radius = 0
@@ -29,7 +28,7 @@ export function loadPolyfills() {
       if (radius_low === undefined) radius_low = radius
 
       // make it compatible with official one
-      if (radius != null && radius.constructor === Array) {
+      if (Array.isArray(radius)) {
         if (radius.length == 1)
           top_left_radius = top_right_radius = bottom_left_radius = bottom_right_radius = radius[0]
         else if (radius.length == 2) {
@@ -47,8 +46,10 @@ export function loadPolyfills() {
         // old using numbers
         top_left_radius = radius || 0
         top_right_radius = radius || 0
-        bottom_left_radius = radius_low || 0
-        bottom_right_radius = radius_low || 0
+
+        const low = !Array.isArray(radius_low) && radius_low ? radius_low : 0
+        bottom_left_radius = low
+        bottom_right_radius = low
       }
 
       // top right

src/widgets/widgetMap.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import type { IBaseWidget } from "@/types/widgets"
 
 import { BaseWidget } from "./BaseWidget"
@@ -14,11 +13,18 @@ type WidgetConstructor = {
 }
 
 export const WIDGET_TYPE_MAP: Record<string, WidgetConstructor> = {
+  // @ts-ignore https://github.com/Comfy-Org/litegraph.js/issues/616
   button: ButtonWidget,
+  // @ts-ignore #616
   toggle: BooleanWidget,
+  // @ts-ignore #616
   slider: SliderWidget,
+  // @ts-ignore #616
   combo: ComboWidget,
+  // @ts-ignore #616
   number: NumberWidget,
+  // @ts-ignore #616
   string: TextWidget,
+  // @ts-ignore #616
   text: TextWidget,
 }