fix(Control): method binding for mouseUpHandler, mouseDownHandler, and actionHandler

CHANGELOG.md

@@ -6,6 +6,7 @@
 - chore(): cleanup logs and error messages [#9369](https://github.com/fabricjs/fabric.js/pull/9369)
 - feature(Object) BREAKING: Remove lines parameter from object.containsPoint [#9375](https://github.com/fabricjs/fabric.js/pull/9375)
 - patch(Control): move hit detection to shouldActivate [#9374](https://github.com/fabricjs/fabric.js/pull/9374)
+- fix(Control): method binding [#9370](https://github.com/fabricjs/fabric.js/pull/9370)
 - fix(StaticCanvas): disposing animations [#9361](https://github.com/fabricjs/fabric.js/pull/9361)
 - fix(IText): cursor width under group [#9341](https://github.com/fabricjs/fabric.js/pull/9341)
 - TS(Canvas): constructor optional el [#9348](https://github.com/fabricjs/fabric.js/pull/9348)

src/canvas/Canvas.ts

@@ -844,12 +844,12 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
         this.setActiveObject(target, e);
         shouldRender = true;
       } else {
-        const control = target.controls[corner as string];
+        const control = target.controls[corner];
         const mouseUpHandler =
           control && control.getMouseUpHandler(e, target, control);
         if (mouseUpHandler) {
           pointer = this.getPointer(e);
-          mouseUpHandler(e, transform!, pointer.x, pointer.y);
+          mouseUpHandler.call(control, e, transform!, pointer.x, pointer.y);
         }
       }
       target.isMoving = false;
@@ -871,7 +871,13 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
           );
       pointer = pointer || this.getPointer(e);
       originalMouseUpHandler &&
-        originalMouseUpHandler(e, transform, pointer.x, pointer.y);
+        originalMouseUpHandler.call(
+          originalControl,
+          e,
+          transform,
+          pointer.x,
+          pointer.y
+        );
     }
     this._setCursorFromEvent(e, target);
     this._handleEvent(e, 'up', LEFT_CLICK, isClick);
@@ -1132,7 +1138,13 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
           mouseDownHandler =
             control && control.getMouseDownHandler(e, target, control);
         if (mouseDownHandler) {
-          mouseDownHandler(e, this._currentTransform!, pointer.x, pointer.y);
+          mouseDownHandler.call(
+            control,
+            e,
+            this._currentTransform!,
+            pointer.x,
+            pointer.y
+          );
         }
       }
     }

src/canvas/SelectableCanvas.ts

@@ -605,7 +605,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
       control = !!corner && target.controls[corner],
       actionHandler =
         alreadySelected && control
-          ? control.getActionHandler(e, target, control)
+          ? control.getActionHandler(e, target, control)?.bind(control)
           : dragHandler,
       action = getActionFromCorner(alreadySelected, corner, e, target),
       origin = this._getOriginFromCorner(target, corner),

src/controls/Control.spec.ts

@@ -0,0 +1,41 @@
+import { Canvas } from '../canvas/Canvas';
+import { FabricObject } from '../shapes/Object/FabricObject';
+import { Control } from './Control';
+
+describe('Controls', () => {
+  test('method binding', () => {
+    const actionHandler = jest.fn();
+    const mouseDownHandler = jest.fn();
+    const mouseUpHandler = jest.fn();
+
+    const control = new Control({
+      actionHandler,
+      mouseDownHandler,
+      mouseUpHandler,
+    });
+
+    const target = new FabricObject({
+      controls: { test: control, test2: control },
+    });
+    jest.spyOn(target, '_findTargetCorner').mockReturnValue('test');
+    jest.spyOn(target, 'getActiveControl').mockReturnValue('test');
+
+    const canvas = new Canvas();
+    canvas.setActiveObject(target);
+
+    const downEvent = new MouseEvent('mousedown', { clientX: 0, clientY: 0 });
+    const moveEvent = new MouseEvent('mousemove', { clientX: 0, clientY: 0 });
+    const upEvent = new MouseEvent('mouseup', { clientX: 0, clientY: 0 });
+
+    canvas.getSelectionElement().dispatchEvent(downEvent);
+    // eslint-disable-next-line no-restricted-globals
+    const doc = document;
+    doc.dispatchEvent(moveEvent);
+    canvas._currentTransform!.corner = 'test2';
+    doc.dispatchEvent(upEvent);
+
+    expect(mouseDownHandler.mock.contexts).toEqual([control]);
+    expect(actionHandler.mock.contexts).toEqual([control]);
+    expect(mouseUpHandler.mock.contexts).toEqual([control, control]);
+  });
+});