Repository: fabricjs/fabric.js
Pull request #9454 (2023-10-27 07:45:15)

chore(): Update bug report
Automated update to `.github/ISSUE_TEMPLATE/bug_report.yml`
Triggered by job [`update-bug-report`](../actions/runs/6664350448)


Patch:
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 6464c1394..f27367e82 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -54,6 +54,7 @@ body:
         - 6.0.0-beta5
         - 6.0.0-beta4
         - 6.0.0-beta3
+        - 6.0.0-beta15
         - 6.0.0-beta14
         - 6.0.0-beta13
         - 6.0.0-beta12
@@ -98,7 +99,9 @@ body:
       label: Node Version (if applicable)
       description: Provide the version if the bug occurs in Node.js
       options:
+        - 21.1.0
         - 21.0.0
+        - 20.9.0
         - 20.8.1
         - 20.8.0
         - 20.7.0
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 852cc67c7..5752a07f1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,11 @@
 
 ## [next]
 
-## [6.0.0-beta14]
+- feat(util): expose `calcPlaneRotation` [#9419](https://github.com/fabricjs/fabric.js/pull/9419)
+- refactor(Canvas): BREAKING remove button from mouse events, delegate to event.button property [#9449](https://github.com/fabricjs/fabric.js/pull/9449)
+- patch(Canvas): move event mouse:up:before earlier in the logic for more control [#9434](https://github.com/fabricjs/fabric.js/pull/9434)
+
+## [6.0.0-beta15]
 
 - Fix(SVGParser) ignore missing xlink target issue on svg parsing (#9427) [#9109](https://github.com/fabricjs/fabric.js/issues/9109)
 - fix(#9172): dep export `Object`, `Text`, `Image` [#9433](https://github.com/fabricjs/fabric.js/pull/9433)
diff --git a/src/EventTypeDefs.ts b/src/EventTypeDefs.ts
index 63e4d787b..057cb35d4 100644
--- a/src/EventTypeDefs.ts
+++ b/src/EventTypeDefs.ts
@@ -129,13 +129,9 @@ export interface TPointerEventInfo<E extends TPointerEvent = TPointerEvent>
   extends TEvent<E> {
   target?: FabricObject;
   subTargets?: FabricObject[];
-  button?: number;
-  isClick: boolean;
   pointer: Point;
   transform?: Transform | null;
   absolutePointer: Point;
-  currentSubTargets?: FabricObject[];
-  currentTarget?: FabricObject | null;
 }
 
 interface SimpleEventHandler<T extends Event = TPointerEvent>
@@ -211,10 +207,17 @@ type TPointerEvents<Prefix extends string> = Record<
   `${Prefix}${
     | WithBeforeSuffix<'down'>
     | WithBeforeSuffix<'move'>
-    | WithBeforeSuffix<'up'>
     | 'dblclick'}`,
   TPointerEventInfo
 > &
+  Record<
+    `${Prefix}${WithBeforeSuffix<'up'>}`,
+    TPointerEventInfo & {
+      isClick: boolean;
+      currentTarget?: FabricObject;
+      currentSubTargets: FabricObject[];
+    }
+  > &
   Record<`${Prefix}wheel`, TPointerEventInfo<WheelEvent>> &
   Record<`${Prefix}over`, TPointerEventInfo & InEvent> &
   Record<`${Prefix}out`, TPointerEventInfo & OutEvent>;
diff --git a/src/canvas/Canvas.ts b/src/canvas/Canvas.ts
index e795afcf1..902197f63 100644
--- a/src/canvas/Canvas.ts
+++ b/src/canvas/Canvas.ts
@@ -1,10 +1,9 @@
-import { LEFT_CLICK, MIDDLE_CLICK, NONE, RIGHT_CLICK } from '../constants';
+import { NONE } from '../constants';
 import type {
   CanvasEvents,
   DragEventData,
   ObjectEvents,
   TPointerEvent,
-  TPointerEventInfo,
   TPointerEventNames,
   Transform,
 } from '../EventTypeDefs';
@@ -25,10 +24,6 @@ import { TextEditingManager } from './TextEditingManager';
 
 const addEventOptions = { passive: false } as EventListenerOptions;
 
-function checkClick(e: TPointerEvent, value: number) {
-  return !!(e as MouseEvent).button && (e as MouseEvent).button === value - 1;
-}
-
 // just to be clear, the utils are now deprecated and those are here exactly as minifier helpers
 // because el.addEventListener can't me be minified while a const yes and we use it 47 times in this file.
 // few bytes but why give it away.
@@ -105,10 +100,6 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
    */
   private declare _dropTarget: FabricObject<ObjectEvents> | undefined;
 
-  declare currentTarget?: FabricObject;
-
-  declare currentSubTargets?: FabricObject[];
-
   private _isClick: boolean;
 
   textEditingManager = new TextEditingManager(this);
@@ -272,7 +263,6 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
     if (!this._currentTransform && !this.findTarget(e)) {
       this.fire('mouse:over', {
         e,
-        isClick: false,
         pointer: this.getPointer(e, true),
         absolutePointer: this.getPointer(e),
       });
@@ -786,24 +776,20 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
    * @param {Event} e Event object fired on mouseup
    */
   __onMouseUp(e: TPointerEvent) {
-    const transform = this._currentTransform;
     this._cacheTransformEventData(e);
-    const target = this._target;
-    const isClick = this._isClick;
     this._handleEvent(e, 'up:before');
+
+    const transform = this._currentTransform;
+    const isClick = this._isClick;
+    const target = this._target;
+
     // if right/middle click just fire events and return
     // target undefined will make the _handleEvent search the target
-    if (checkClick(e, RIGHT_CLICK)) {
-      if (this.fireRightClick) {
-        this._handleEvent(e, 'up', RIGHT_CLICK, isClick);
-      }
-      return;
-    }
-
-    if (checkClick(e, MIDDLE_CLICK)) {
-      if (this.fireMiddleClick) {
-        this._handleEvent(e, 'up', MIDDLE_CLICK, isClick);
-      }
+    const { button } = e as MouseEvent;
+    if (button) {
+      ((this.fireMiddleClick && button === 1) ||
+        (this.fireRightClick && button === 2)) &&
+        this._handleEvent(e, 'up');
       this._resetTransformEventData();
       return;
     }
@@ -880,7 +866,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
         );
     }
     this._setCursorFromEvent(e, target);
-    this._handleEvent(e, 'up', LEFT_CLICK, isClick);
+    this._handleEvent(e, 'up');
     this._groupSelector = null;
     this._currentTransform = null;
     // reset the target information about which corner is selected
@@ -917,34 +903,27 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
   /**
    * @private
    * Handle event firing for target and subtargets
-   * @param {Event} e event from mouse
-   * @param {String} eventType event to fire (up, down or move)
-   * @param {fabric.Object} targetObj receiving event
-   * @param {Number} [button] button used in the event 1 = left, 2 = middle, 3 = right
-   * @param {Boolean} isClick for left button only, indicates that the mouse up happened without move.
+   * @param {TPointerEvent} e event from mouse
+   * @param {TPointerEventNames} eventType
    */
-  _handleEvent(
-    e: TPointerEvent,
-    eventType: TPointerEventNames,
-    button = LEFT_CLICK,
-    isClick = false
-  ) {
+  _handleEvent<T extends TPointerEventNames>(e: TPointerEvent, eventType: T) {
     const target = this._target,
       targets = this.targets || [],
-      options: TPointerEventInfo = {
-        e: e,
-        target: target,
+      options: CanvasEvents[`mouse:${T}`] = {
+        e,
+        target,
         subTargets: targets,
-        button,
-        isClick,
         pointer: this.getPointer(e, true),
         absolutePointer: this.getPointer(e),
         transform: this._currentTransform,
-      };
-    if (eventType === 'up') {
-      options.currentTarget = this.findTarget(e);
-      options.currentSubTargets = this.targets;
-    }
+        ...(eventType === 'up:before' || eventType === 'up'
+          ? {
+              isClick: this._isClick,
+              currentTarget: this.findTarget(e),
+              currentSubTargets: this.targets,
+            }
+          : {}),
+      } as CanvasEvents[`mouse:${T}`];
     this.fire(`mouse:${eventType}`, options);
     // this may be a little be more complicated of what we want to handle
     target && target.fire(`mouse${eventType}`, options);
@@ -1060,19 +1039,16 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
     this._isClick = true;
     this._cacheTransformEventData(e);
     this._handleEvent(e, 'down:before');
+
     let target: FabricObject | undefined = this._target;
-    // if right click just fire events
-    if (checkClick(e, RIGHT_CLICK)) {
-      if (this.fireRightClick) {
-        this._handleEvent(e, 'down', RIGHT_CLICK);
-      }
-      return;
-    }
 
-    if (checkClick(e, MIDDLE_CLICK)) {
-      if (this.fireMiddleClick) {
-        this._handleEvent(e, 'down', MIDDLE_CLICK);
-      }
+    // if right/middle click just fire events
+    const { button } = e as MouseEvent;
+    if (button) {
+      ((this.fireMiddleClick && button === 1) ||
+        (this.fireRightClick && button === 2)) &&
+        this._handleEvent(e, 'down');
+      this._resetTransformEventData();
       return;
     }
 
diff --git a/src/constants.ts b/src/constants.ts
index 06156cbde..c408620a2 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -5,9 +5,11 @@ import { version } from '../package.json';
 export const VERSION = version;
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 export function noop() {}
+
 export const halfPI = Math.PI / 2;
 export const twoMathPi = Math.PI * 2;
 export const PiBy180 = Math.PI / 180;
+
 export const iMatrix = Object.freeze([1, 0, 0, 1, 0, 0]) as TMat2D;
 export const DEFAULT_SVG_FONT_SIZE = 16;
 export const ALIASING_LIMIT = 2;
@@ -15,10 +17,6 @@ export const ALIASING_LIMIT = 2;
 /* "magic number" for bezier approximations of arcs (http://itc.ktu.lt/itc354/Riskus354.pdf) */
 export const kRect = 1 - 0.5522847498;
 
-export const LEFT_CLICK = 1;
-export const MIDDLE_CLICK = 2;
-export const RIGHT_CLICK = 3;
-
 export const CENTER = 'center';
 export const LEFT = 'left';
 export const TOP = 'top';
diff --git a/src/controls/util.ts b/src/controls/util.ts
index d02518590..bffe24c90 100644
--- a/src/controls/util.ts
+++ b/src/controls/util.ts
@@ -83,7 +83,7 @@ export const commonEventInfo: TransformAction<
 export function findCornerQuadrant(
   fabricObject: FabricObject,
   control: Control
-) {
+): number {
   //  angle is relative to canvas plane
   const angle = fabricObject.getTotalAngle(),
     cornerAngle =
diff --git a/src/shapes/IText/ITextClickBehavior.ts b/src/shapes/IText/ITextClickBehavior.ts
index 63936986a..72d89fe19 100644
--- a/src/shapes/IText/ITextClickBehavior.ts
+++ b/src/shapes/IText/ITextClickBehavior.ts
@@ -10,12 +10,10 @@ import { ITextKeyBehavior } from './ITextKeyBehavior';
 import type { TOptions } from '../../typedefs';
 import type { TextProps, SerializedTextProps } from '../Text/Text';
 
-// TODO: this code seems wrong.
-// e.button for a left click is `0` and so different than `1` is more
-// not a right click. PR 3888 introduced this code and was about left clicks.
-function notALeftClick(e: MouseEvent) {
-  return e.button && e.button !== 1;
-}
+/**
+ * `LEFT_CLICK === 0`
+ */
+const notALeftClick = (e: Event) => !!(e as MouseEvent).button;
 
 export abstract class ITextClickBehavior<
     Props extends TOptions<TextProps> = Partial<TextProps>,
@@ -134,7 +132,7 @@ export abstract class ITextClickBehavior<
     if (
       !this.canvas ||
       !this.editable ||
-      notALeftClick(e as MouseEvent) ||
+      notALeftClick(e) ||
       this.getActiveControl()
     ) {
       return;
@@ -166,7 +164,7 @@ export abstract class ITextClickBehavior<
    * Scope of this implementation is: verify the object is already selected when mousing down
    */
   _mouseDownHandlerBefore({ e }: TPointerEventInfo) {
-    if (!this.canvas || !this.editable || notALeftClick(e as MouseEvent)) {
+    if (!this.canvas || !this.editable || notALeftClick(e)) {
       return;
     }
     // we want to avoid that an object that was selected and then becomes unselectable,
@@ -178,7 +176,7 @@ export abstract class ITextClickBehavior<
    * standard handler for mouse up, overridable
    * @private
    */
-  mouseUpHandler({ e, transform, button }: TPointerEventInfo) {
+  mouseUpHandler({ e, transform }: TPointerEventInfo) {
     const didDrag = this.draggableTextDelegate.end(e);
     if (this.canvas) {
       this.canvas.textEditingManager.unregister(this);
@@ -195,7 +193,7 @@ export abstract class ITextClickBehavior<
       !this.editable ||
       (this.group && !this.group.interactive) ||
       (transform && transform.actionPerformed) ||
-      notALeftClick(e as MouseEvent) ||
+      notALeftClick(e) ||
       didDrag
     ) {
       return;
diff --git a/src/shapes/Object/ObjectGeometry.ts b/src/shapes/Object/ObjectGeometry.ts
index be1e68636..4c48107bc 100644
--- a/src/shapes/Object/ObjectGeometry.ts
+++ b/src/shapes/Object/ObjectGeometry.ts
@@ -17,10 +17,13 @@ import {
   composeMatrix,
   invertTransform,
   multiplyTransformMatrices,
-  qrDecompose,
   transformPoint,
+  calcPlaneRotation,
 } from '../../util/misc/matrix';
-import { degreesToRadians } from '../../util/misc/radiansDegreesConversion';
+import {
+  degreesToRadians,
+  radiansToDegrees,
+} from '../../util/misc/radiansDegreesConversion';
 import { sin } from '../../util/misc/sin';
 import type { Canvas } from '../../canvas/Canvas';
 import type { StaticCanvas } from '../../canvas/StaticCanvas';
@@ -491,7 +494,7 @@ export class ObjectGeometry<EventSpec extends ObjectEvents = ObjectEvents>
    */
   getTotalAngle(): TDegree {
     return this.group
-      ? qrDecompose(this.calcTransformMatrix()).angle
+      ? radiansToDegrees(calcPlaneRotation(this.calcTransformMatrix()))
       : this.angle;
   }
 
diff --git a/src/util/misc/matrix.ts b/src/util/misc/matrix.ts
index 5733e6266..3164ab0fc 100644
--- a/src/util/misc/matrix.ts
+++ b/src/util/misc/matrix.ts
@@ -103,13 +103,16 @@ export const multiplyTransformMatrixArray = (
     iMatrix
   );
 
+export const calcPlaneRotation = ([a, b]: TMat2D) =>
+  Math.atan2(b, a) as TRadian;
+
 /**
  * Decomposes standard 2x3 matrix into transform components
  * @param  {TMat2D} a transformMatrix
  * @return {Object} Components of transform
  */
 export const qrDecompose = (a: TMat2D): TQrDecomposeOut => {
-  const angle = Math.atan2(a[1], a[0]),
+  const angle = calcPlaneRotation(a),
     denom = Math.pow(a[0], 2) + Math.pow(a[1], 2),
     scaleX = Math.sqrt(denom),
     scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX,


Test patch:
diff --git a/src/canvas/__tests__/__snapshots__/eventData.test.ts.snap b/src/canvas/__tests__/__snapshots__/eventData.test.ts.snap
index cdf524feb..8b447a17f 100644
--- a/src/canvas/__tests__/__snapshots__/eventData.test.ts.snap
+++ b/src/canvas/__tests__/__snapshots__/eventData.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Canvas event data HTML event "contextmenu" should fire a corresponding canvas event with viewportTransform of %s 1`] = `
+exports[`Canvas event data HTML event "contextmenu" should fire a corresponding canvas event 1`] = `
 [
   [
     "contextmenu:before",
@@ -25,7 +25,7 @@ exports[`Canvas event data HTML event "contextmenu" should fire a corresponding
 ]
 `;
 
-exports[`Canvas event data HTML event "dblclick" should fire a corresponding canvas event with viewportTransform of %s 1`] = `
+exports[`Canvas event data HTML event "dblclick" should fire a corresponding canvas event 1`] = `
 [
   [
     "mouse:dblclick",
@@ -34,11 +34,9 @@ exports[`Canvas event data HTML event "dblclick" should fire a corresponding can
         "x": -30,
         "y": -13,
       },
-      "button": 1,
       "e": MouseEvent {
         "isTrusted": false,
       },
-      "isClick": false,
       "pointer": Point {
         "x": 50,
         "y": 50,
@@ -51,7 +49,7 @@ exports[`Canvas event data HTML event "dblclick" should fire a corresponding can
 ]
 `;
 
-exports[`Canvas event data HTML event "drag" should fire a corresponding canvas event with viewportTransform of %s 1`] = `
+exports[`Canvas event data HTML event "drag" should fire a corresponding canvas event 1`] = `
 [
   [
     "dragstart",
@@ -76,7 +74,7 @@ exports[`Canvas event data HTML event "drag" should fire a corresponding canvas
 ]
 `;
 
-exports[`Canvas event data HTML event "dragend" should fire a corresponding canvas event with viewportTransform of %s 1`] = `
+exports[`Canvas event data HTML event "dragend" should fire a corresponding canvas event 1`] = `
 [
   [
     "dragstart",
@@ -107,7 +105,8 @@ exports[`Canvas event data HTML event "dragend" should fire a corresponding canv
         "x": -30,
         "y": -13,
       },
-      "button": 1,
+      "currentSubTargets": [],
+      "currentTarget": "Drag Target",
       "e": MouseEvent {
         "isTrusted": false,
       },
@@ -128,7 +127,6 @@ exports[`Canvas event data HTML event "dragend" should fire a corresponding canv
         "x": -30,
         "y": -13,
       },
-      "button": 1,
       "currentSubTargets": [],
       "currentTarget": "Drag Target",
       "e": MouseEvent {
@@ -164,7 +162,7 @@ exports[`Canvas event data HTML event "dragend" should fire a corresponding canv
 ]
 `;
 
-exports[`Canvas event data HTML event "dragenter" should fire a corresponding canvas event with viewportTransform of %s 1`] = `
+exports[`Canvas event data HTML event "dragenter" should fire a corresponding canvas event 1`] = `
 [
   [
     "dragstart",
@@ -210,7 +208,7 @@ exports[`Canvas event data HTML event "dragenter" should fire a corresponding ca
 ]
 `;
 
-exports[`Canvas event data HTML event "dragleave" should fire a corresponding canvas event with viewportTransform of %s 1`] = `
+exports[`Canvas event data HTML event "dragleave" should fire a corresponding canvas event 1`] = `
 [
   [
     "dragstart",
@@ -235,7 +233,7 @@ exports[`Canvas event data HTML event "dragleave" should fire a corresponding ca
 ]
 `;
 
-exports[`Canvas event data HTML event "dragover" should fire a corresponding canvas event with viewportTransform of %s 1`] = `
+exports[`Canvas event data HTML event "dragover" should fire a corresponding canvas event 1`] = `
 [
   [
     "dragstart",
@@ -285,7 +283,7 @@ exports[`Canvas event data HTML event "dragover" should fire a corresponding can
 ]
 `;
 
-exports[`Canvas event data HTML event "drop" should fire a corresponding canvas event with viewportTransform of %s 1`] = `
+exports[`Canvas event data HTML event "drop" should fire a corresponding canvas event 1`] = `
 [
   [
     "dragstart",
@@ -362,7 +360,7 @@ exports[`Canvas event data HTML event "drop" should fire a corresponding canvas
 ]
 `;
 
-exports[`Canvas event data HTML event "mousedown" should fire a corresponding canvas event with viewportTransform of %s 1`] = `
+exports[`Canvas event data HTML event "mousedown" should fire a corresponding canvas event 1`] = `
 [
   [
     "mouse:down:before",
@@ -371,11 +369,9 @@ exports[`Canvas event data HTML event "mousedown" should fire a corresponding ca
         "x": -30,
         "y": -13,
       },
-      "button": 1,
       "e": MouseEvent {
         "isTrusted": false,
       },
-      "isClick": false,
       "pointer": Point {
         "x": 50,
         "y": 50,
@@ -392,11 +388,9 @@ exports[`Canvas event data HTML event "mousedown" should fire a corresponding ca
         "x": -30,
         "y": -13,
       },
-      "button": 1,
       "e": MouseEvent {
         "isTrusted": false,
       },
-      "isClick": false,
       "pointer": Point {
         "x": 50,
         "y": 50,
@@ -409,7 +403,7 @@ exports[`Canvas event data HTML event "mousedown" should fire a corresponding ca
 ]
 `;
 
-exports[`Canvas event data HTML event "mouseenter" should fire a corresponding canvas event with viewportTransform of %s 1`] = `
+exports[`Canvas event data HTML event "mouseenter" should fire a corresponding canvas event 1`] = `
 [
   [
     "mouse:over",
@@ -421,7 +415,6 @@ exports[`Canvas event data HTML event "mouseenter" should fire a corresponding c
       "e": MouseEvent {
         "isTrusted": false,
       },
-      "isClick": false,
       "pointer": Point {
         "x": 50,
         "y": 50,
@@ -431,9 +424,9 @@ exports[`Canvas event data HTML event "mouseenter" should fire a corresponding c
 ]
 `;
 
-exports[`Canvas event data HTML event "mouseleave" should fire a corresponding canvas event with viewportTransform of %s 1`] = `[]`;
+exports[`Canvas event data HTML event "mouseleave" should fire a corresponding canvas event 1`] = `[]`;
 
-exports[`Canvas event data HTML event "mousemove" should fire a corresponding canvas event with viewportTransform of %s 1`] = `
+exports[`Canvas event data HTML event "mousemove" should fire a corresponding canvas event 1`] = `
 [
   [
     "mouse:move:before",
@@ -442,11 +435,9 @@ exports[`Canvas event data HTML event "mousemove" should fire a corresponding ca
         "x": -30,
         "y": -13,
       },
-      "button": 1,
       "e": MouseEvent {
         "isTrusted": false,
       },
-      "isClick": false,
       "pointer": Point {
         "x": 50,
         "y": 50,
@@ -463,11 +454,9 @@ exports[`Canvas event data HTML event "mousemove" should fire a corresponding ca
         "x": -30,
         "y": -13,
       },
-      "button": 1,
       "e": MouseEvent {
         "isTrusted": false,
       },
-      "isClick": false,
       "pointer": Point {
         "x": 50,
         "y": 50,
@@ -480,7 +469,7 @@ exports[`Canvas event data HTML event "mousemove" should fire a corresponding ca
 ]
 `;
 
-exports[`Canvas event data HTML event "mouseout" should fire a corresponding canvas event with viewportTransform of %s 1`] = `
+exports[`Canvas event data HTML event "mouseout" should fire a corresponding canvas event 1`] = `
 [
   [
     "mouse:out",
@@ -503,9 +492,9 @@ exports[`Canvas event data HTML event "mouseout" should fire a corresponding can
 ]
 `;
 
-exports[`Canvas event data HTML event "mouseover" should fire a corresponding canvas event with viewportTransform of %s 1`] = `[]`;
+exports[`Canvas event data HTML event "mouseover" should fire a corresponding canvas event 1`] = `[]`;
 
-exports[`Canvas event data HTML event "mouseup" should fire a corresponding canvas event with viewportTransform of %s 1`] = `
+exports[`Canvas event data HTML event "mouseup" should fire a corresponding canvas event 1`] = `
 [
   [
     "mouse:up:before",
@@ -514,11 +503,12 @@ exports[`Canvas event data HTML event "mouseup" should fire a corresponding canv
         "x": -30,
         "y": -13,
       },
-      "button": 1,
+      "currentSubTargets": [],
+      "currentTarget": undefined,
       "e": MouseEvent {
         "isTrusted": false,
       },
-      "isClick": false,
+      "isClick": true,
       "pointer": Point {
         "x": 50,
         "y": 50,
@@ -535,7 +525,6 @@ exports[`Canvas event data HTML event "mouseup" should fire a corresponding canv
         "x": -30,
         "y": -13,
       },
-      "button": 1,
       "currentSubTargets": [],
       "currentTarget": undefined,
       "e": MouseEvent {
@@ -554,7 +543,7 @@ exports[`Canvas event data HTML event "mouseup" should fire a corresponding canv
 ]
 `;
 
-exports[`Canvas event data HTML event "wheel" should fire a corresponding canvas event with viewportTransform of %s 1`] = `
+exports[`Canvas event data HTML event "wheel" should fire a corresponding canvas event 1`] = `
 [
   [
     "mouse:wheel",
@@ -563,11 +552,9 @@ exports[`Canvas event data HTML event "wheel" should fire a corresponding canvas
         "x": -30,
         "y": -13,
       },
-      "button": 1,
       "e": MouseEvent {
         "isTrusted": false,
       },
-      "isClick": false,
       "pointer": Point {
         "x": 50,
         "y": 50,
@@ -608,11 +595,9 @@ exports[`should fire mouse over/out events on target 1`] = `
         "x": 5,
         "y": 5,
       },
-      "button": 1,
       "e": MouseEvent {
         "isTrusted": false,
       },
-      "isClick": false,
       "pointer": Point {
         "x": 5,
         "y": 5,
@@ -653,11 +638,9 @@ exports[`should fire mouse over/out events on target 2`] = `
         "x": 5,
         "y": 5,
       },
-      "button": 1,
       "e": MouseEvent {
         "isTrusted": false,
       },
-      "isClick": false,
       "pointer": Point {
         "x": 5,
         "y": 5,
@@ -693,11 +676,9 @@ exports[`should fire mouse over/out events on target 2`] = `
         "x": 5,
         "y": 5,
       },
-      "button": 1,
       "e": MouseEvent {
         "isTrusted": false,
       },
-      "isClick": false,
       "pointer": Point {
         "x": 5,
         "y": 5,
@@ -714,11 +695,9 @@ exports[`should fire mouse over/out events on target 2`] = `
         "x": 20,
         "y": 20,
       },
-      "button": 1,
       "e": MouseEvent {
         "isTrusted": false,
       },
-      "isClick": false,
       "pointer": Point {
         "x": 20,
         "y": 20,
@@ -754,11 +733,9 @@ exports[`should fire mouse over/out events on target 2`] = `
         "x": 20,
         "y": 20,
       },
-      "button": 1,
       "e": MouseEvent {
         "isTrusted": false,
       },
-      "isClick": false,
       "pointer": Point {
         "x": 20,
         "y": 20,
diff --git a/src/canvas/__tests__/eventData.test.ts b/src/canvas/__tests__/eventData.test.ts
index 7b7180872..f227a24ac 100644
--- a/src/canvas/__tests__/eventData.test.ts
+++ b/src/canvas/__tests__/eventData.test.ts
@@ -42,7 +42,7 @@ describe('Canvas event data', () => {
     'wheel',
     'contextmenu',
   ] as (keyof WindowEventMap)[])(
-    'HTML event "%s" should fire a corresponding canvas event with viewportTransform of %s',
+    'HTML event "%s" should fire a corresponding canvas event',
     (type) => {
       canvas.setViewportTransform(genericVpt);
       canvas
@@ -53,7 +53,7 @@ describe('Canvas event data', () => {
   );
 
   // must call mousedown for mouseup to be listened to
-  test('HTML event "mouseup" should fire a corresponding canvas event with viewportTransform of %s', () => {
+  test('HTML event "mouseup" should fire a corresponding canvas event', () => {
     canvas.setViewportTransform(genericVpt);
     canvas
       .getSelectionElement()
@@ -73,7 +73,7 @@ describe('Canvas event data', () => {
     'dragover',
     'drop',
   ] as (keyof WindowEventMap)[])(
-    'HTML event "%s" should fire a corresponding canvas event with viewportTransform of %s',
+    'HTML event "%s" should fire a corresponding canvas event',
     (type) => {
       canvas.setViewportTransform(genericVpt);
       // select target and mock some essentials for events to fire