diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index 4b875f9..3c752bb 100644 --- a/src/LGraphCanvas.ts +++ b/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( - e: T & Partial, + e: T & Partial, ): 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 { diff --git a/src/types/events.ts b/src/types/events.ts index 51b1c70..2cd1090 100644 --- a/src/types/events.ts +++ b/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,17 @@ export interface IDeltaPosition { deltaY: number } +/** Workaround for Firefox returning 0 on offsetX/Y props */ +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 +45,13 @@ export interface CanvasPointerEvent extends PointerEvent, CanvasMouseEvent {} /** MouseEvent with canvasX/Y and deltaX/Y properties */ export interface CanvasMouseEvent extends MouseEvent, - Readonly, - Readonly, + Readonly, LegacyMouseEvent {} /** DragEvent with canvasX/Y and deltaX/Y properties */ export interface CanvasDragEvent extends DragEvent, - ICanvasPosition, - IDeltaPosition {} + CanvasPointerExtensions {} export type CanvasEventDetail = | GenericEventDetail