Add workaround for Firefox pointer events (#412)

* Add workaround for Firefox pointer events

Co-Authored-By: catboxanon <122327233+catboxanon@users.noreply.github.com>

* nit

---------

Co-authored-by: catboxanon <122327233+catboxanon@users.noreply.github.com>
Co-authored-by: huchenlei <huchenlei@proton.me>

src/LGraphCanvas.ts

@@ -28,8 +28,7 @@ import type {
   CanvasMouseEvent,
   CanvasEventDetail,
   CanvasPointerEvent,
-  ICanvasPosition,
-  IDeltaPosition,
+  CanvasPointerExtensions,
 } from "./types/events"
 import type { ClipboardItems } from "./types/serialisation"
 import { LLink, type LinkId } from "./LLink"
@@ -4122,7 +4121,7 @@ export class LGraphCanvas {
    * adds some useful properties to a mouse event, like the position in graph coordinates
    */
   adjustMouseEvent<T extends MouseEvent>(
-    e: T & Partial<ICanvasPosition & IDeltaPosition>,
+    e: T & Partial<CanvasPointerExtensions>,
   ): asserts e is T & CanvasMouseEvent {
     let clientX_rel = e.clientX
     let clientY_rel = e.clientY
@@ -4133,6 +4132,9 @@ export class LGraphCanvas {
       clientY_rel -= b.top
     }
 
+    e.safeOffsetX = clientX_rel
+    e.safeOffsetY = clientY_rel
+
     // TODO: Find a less brittle way to do this
 
     // Only set deltaX and deltaY if not already set.
@@ -4447,9 +4449,9 @@ export class LGraphCanvas {
           const ratio = window.devicePixelRatio
           ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
 
-          const x = eDown.offsetX
-          const y = eDown.offsetY
-          ctx.strokeRect(x, y, eMove.offsetX - x, eMove.offsetY - y)
+          const x = eDown.safeOffsetX
+          const y = eDown.safeOffsetX
+          ctx.strokeRect(x, y, eMove.safeOffsetX - x, eMove.safeOffsetX - y)
 
           ctx.setTransform(transform)
         } else {

src/types/events.ts

@@ -6,6 +6,7 @@ import type { ConnectingLink, LinkReleaseContextExtended } from "../litegraph"
 import type { IWidget } from "./widgets"
 import type { LGraphNode } from "../LGraphNode"
 import type { LGraphGroup } from "../LGraphGroup"
+import type { LGraphCanvas } from "../LGraphCanvas"
 
 /** For Canvas*Event - adds graph space co-ordinates (property names are shipped) */
 export interface ICanvasPosition {
@@ -21,6 +22,20 @@ export interface IDeltaPosition {
   deltaY: number
 }
 
+/**
+ * Workaround for Firefox returning 0 on offsetX/Y props
+ * See https://github.com/Comfy-Org/litegraph.js/issues/403 for details
+ */
+export interface IOffsetWorkaround {
+  /** See {@link MouseEvent.offsetX}.  This workaround is required (2024-12-31) to support Firefox, which always returns 0 */
+  safeOffsetX: number
+  /** See {@link MouseEvent.offsetY}.  This workaround is required (2024-12-31) to support Firefox, which always returns 0 */
+  safeOffsetY: number
+}
+
+/** All properties added when converting a pointer event to a CanvasPointerEvent (via {@link LGraphCanvas.adjustMouseEvent}). */
+export type CanvasPointerExtensions = ICanvasPosition & IDeltaPosition & IOffsetWorkaround
+
 interface LegacyMouseEvent {
   /** @deprecated Part of DragAndScale mouse API - incomplete / not maintained */
   dragging?: boolean
@@ -33,15 +48,13 @@ export interface CanvasPointerEvent extends PointerEvent, CanvasMouseEvent {}
 /** MouseEvent with canvasX/Y and deltaX/Y properties */
 export interface CanvasMouseEvent extends
   MouseEvent,
-  Readonly<ICanvasPosition>,
-  Readonly<IDeltaPosition>,
+  Readonly<CanvasPointerExtensions>,
   LegacyMouseEvent {}
 
 /** DragEvent with canvasX/Y and deltaX/Y properties */
 export interface CanvasDragEvent extends
   DragEvent,
-  ICanvasPosition,
-  IDeltaPosition {}
+  CanvasPointerExtensions {}
 
 export type CanvasEventDetail =
   | GenericEventDetail