fabric 6.2.0 → 6.3.0

package/src/canvas/Canvas.ts

@@ -144,6 +144,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
         '_onDrop',
       ] as (keyof this)[]
     ).forEach((eventHandler) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
       this[eventHandler] = (this[eventHandler] as Function).bind(this);
     });
     // register event handlers
@@ -158,7 +159,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
     return this.enablePointerEvents ? 'pointer' : 'mouse';
   }
 
-  addOrRemove(functor: any, eventjsFunctor: 'add' | 'remove') {
+  addOrRemove(functor: any, _eventjsFunctor: 'add' | 'remove') {
     const canvasElement = this.upperCanvasEl,
       eventTypePrefix = this._getEventPrefix();
     functor(getWindowFromElement(canvasElement), 'resize', this._onResize);
@@ -167,7 +168,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
       canvasElement,
       `${eventTypePrefix}move`,
       this._onMouseMove,
-      addEventOptions
+      addEventOptions,
     );
     functor(canvasElement, `${eventTypePrefix}out`, this._onMouseOut);
     functor(canvasElement, `${eventTypePrefix}enter`, this._onMouseEnter);
@@ -207,25 +208,25 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
     removeListener(
       doc,
       `${eventTypePrefix}up`,
-      this._onMouseUp as EventListener
+      this._onMouseUp as EventListener,
     );
     removeListener(
       doc,
       'touchend',
       this._onTouchEnd as EventListener,
-      addEventOptions
+      addEventOptions,
     );
     removeListener(
       doc,
       `${eventTypePrefix}move`,
       this._onMouseMove as EventListener,
-      addEventOptions
+      addEventOptions,
     );
     removeListener(
       doc,
       'touchmove',
       this._onMouseMove as EventListener,
-      addEventOptions
+      addEventOptions,
     );
   }
 
@@ -294,7 +295,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
       addListener(
         this.upperCanvasEl,
         'drag',
-        this._onDragProgress as EventListener
+        this._onDragProgress as EventListener,
       );
       return;
     }
@@ -310,7 +311,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
   private _renderDragEffects(
     e: DragEvent,
     source?: FabricObject,
-    target?: FabricObject
+    target?: FabricObject,
   ) {
     let dirty = false;
     // clear top context
@@ -363,7 +364,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
     removeListener(
       this.upperCanvasEl,
       'drag',
-      this._onDragProgress as EventListener
+      this._onDragProgress as EventListener,
     );
     this.fire('dragend', options);
     this._dragSource && this._dragSource.fire('dragend', options);
@@ -396,7 +397,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
     this.targets = [];
     const target = this._searchPossibleTargets(
       this._objects,
-      this.getViewportPoint(e)
+      this.getViewportPoint(e),
     );
     return {
       target,
@@ -609,19 +610,19 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
       doc,
       'touchend',
       this._onTouchEnd as EventListener,
-      addEventOptions
+      addEventOptions,
     );
     addListener(
       doc,
       'touchmove',
       this._onMouseMove as EventListener,
-      addEventOptions
+      addEventOptions,
     );
     // Unbind mousedown to prevent double triggers from touch devices
     removeListener(
       canvasElement,
       `${eventTypePrefix}down`,
-      this._onMouseDown as EventListener
+      this._onMouseDown as EventListener,
     );
   }
 
@@ -638,7 +639,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
       canvasElement,
       `${eventTypePrefix}move`,
       this._onMouseMove as EventListener,
-      addEventOptions
+      addEventOptions,
     );
     const doc = getDocumentFromElement(canvasElement);
     addListener(doc, `${eventTypePrefix}up`, this._onMouseUp as EventListener);
@@ -646,7 +647,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
       doc,
       `${eventTypePrefix}move`,
       this._onMouseMove as EventListener,
-      addEventOptions
+      addEventOptions,
     );
   }
 
@@ -668,13 +669,13 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
       doc,
       'touchend',
       this._onTouchEnd as EventListener,
-      addEventOptions
+      addEventOptions,
     );
     removeListener(
       doc,
       'touchmove',
       this._onMouseMove as EventListener,
-      addEventOptions
+      addEventOptions,
     );
     if (this._willAddMouseDown) {
       clearTimeout(this._willAddMouseDown);
@@ -685,7 +686,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
       addListener(
         this.upperCanvasEl,
         `${eventTypePrefix}down`,
-        this._onMouseDown as EventListener
+        this._onMouseDown as EventListener,
       );
       this._willAddMouseDown = 0;
     }, 400) as unknown as number;
@@ -705,19 +706,19 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
       removeListener(
         doc,
         `${eventTypePrefix}up`,
-        this._onMouseUp as EventListener
+        this._onMouseUp as EventListener,
       );
       removeListener(
         doc,
         `${eventTypePrefix}move`,
         this._onMouseMove as EventListener,
-        addEventOptions
+        addEventOptions,
       );
       addListener(
         canvasElement,
         `${eventTypePrefix}move`,
         this._onMouseMove as EventListener,
-        addEventOptions
+        addEventOptions,
       );
     }
   }
@@ -814,7 +815,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
     if (target) {
       const found = target.findControl(
         this.getViewportPoint(e),
-        isTouchEvent(e)
+        isTouchEvent(e),
       );
       const { key, control } = found || {};
       corner = key;
@@ -847,7 +848,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
           originalControl.getMouseUpHandler(
             e,
             transform.target,
-            originalControl
+            originalControl,
           );
       pointer = pointer || this.getScenePoint(e);
       originalMouseUpHandler &&
@@ -856,7 +857,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
           e,
           transform,
           pointer.x,
-          pointer.y
+          pointer.y,
         );
     }
     this._setCursorFromEvent(e, target);
@@ -874,7 +875,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
 
   _basicEventHandler<T extends keyof (CanvasEvents | ObjectEvents)>(
     eventType: T,
-    options: (CanvasEvents & ObjectEvents)[T]
+    options: (CanvasEvents & ObjectEvents)[T],
   ) {
     const { target, subTargets = [] } = options as {
       target?: FabricObject;
@@ -1051,7 +1052,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
       }
       const handle = target.findControl(
         this.getViewportPoint(e),
-        isTouchEvent(e)
+        isTouchEvent(e),
       );
       if (target === this._activeObject && (handle || !grouped)) {
         this._setupCurrentTransform(e, target, alreadySelected);
@@ -1065,7 +1066,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
             e,
             this._currentTransform!,
             pointer.x,
-            pointer.y
+            pointer.y,
           );
       }
     }
@@ -1099,7 +1100,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
     this._absolutePointer = sendPointToPlane(
       this._pointer,
       undefined,
-      this.viewportTransform
+      this.viewportTransform,
     );
     this._target = this._currentTransform
       ? this._currentTransform.target
@@ -1232,7 +1233,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
       target?: FabricObject;
       oldTarget?: FabricObject;
       fireCanvas?: boolean;
-    }
+    },
   ) {
     const { targetIn, targetOut, canvasIn, canvasOut } =
       syntheticEventConfig[type];
@@ -1286,7 +1287,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
         ? sendPointToPlane(
             scenePoint,
             undefined,
-            target.group.calcTransformMatrix()
+            target.group.calcTransformMatrix(),
           )
         : scenePoint;
     transform.shiftKey = e.shiftKey;
@@ -1302,7 +1303,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
   _performTransformAction(
     e: TPointerEvent,
     transform: Transform,
-    pointer: Point
+    pointer: Point,
   ) {
     const { action, actionHandler, target } = transform;
 
@@ -1479,7 +1480,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
         width: size.x,
         height: size.y,
       },
-      { includeIntersecting: !this.selectionFullyContained }
+      { includeIntersecting: !this.selectionFullyContained },
     ) as FabricObject[];
 
     const objects =
@@ -1490,9 +1491,11 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
           ? [collectedObjects[0]]
           : []
         : collectedObjects.length > 1
-        ? collectedObjects.filter((object) => !object.onSelect({ e })).reverse()
-        : // `setActiveObject` will call `onSelect(collectedObjects[0])` in this case
-          collectedObjects;
+          ? collectedObjects
+              .filter((object) => !object.onSelect({ e }))
+              .reverse()
+          : // `setActiveObject` will call `onSelect(collectedObjects[0])` in this case
+            collectedObjects;
 
     // set active object
     if (objects.length === 1) {

package/src/canvas/DOMManagers/CanvasDOMManager.ts

@@ -26,7 +26,7 @@ export class CanvasDOMManager extends StaticCanvasDOMManager {
        * @deprecated here only for backward compatibility
        */
       containerClass?: string;
-    } = {}
+    } = {},
   ) {
     super(arg0);
     const { el: lowerCanvasEl } = this.lower;
@@ -78,7 +78,7 @@ export class CanvasDOMManager extends StaticCanvasDOMManager {
    */
   protected applyCanvasStyle(
     element: HTMLCanvasElement,
-    { allowTouchScrolling: allow }: { allowTouchScrolling: boolean }
+    { allowTouchScrolling: allow }: { allowTouchScrolling: boolean },
   ) {
     setStyle(element, {
       position: 'absolute',

package/src/canvas/DOMManagers/StaticCanvasDOMManager.ts

@@ -35,7 +35,7 @@ export class StaticCanvasDOMManager {
         createCanvasElement();
     if (el.hasAttribute('data-fabric')) {
       throw new FabricError(
-        'Trying to initialize a canvas that has already been initialized. Did you forget to dispose the canvas?'
+        'Trying to initialize a canvas that has already been initialized. Did you forget to dispose the canvas?',
       );
     }
     this._originalCanvasStyle = el.style.cssText;

package/src/canvas/DOMManagers/util.ts

@@ -11,7 +11,7 @@ export const setCanvasDimensions = (
   el: HTMLCanvasElement,
   ctx: CanvasRenderingContext2D,
   { width, height }: TSize,
-  retinaScaling = 1
+  retinaScaling = 1,
 ) => {
   el.width = width;
   el.height = height;
@@ -37,7 +37,7 @@ export type CSSDimensions = {
 
 export const setCSSDimensions = (
   el: HTMLElement,
-  { width, height }: Partial<CSSDimensions>
+  { width, height }: Partial<CSSDimensions>,
 ) => {
   width && (el.style.width = typeof width === 'number' ? `${width}px` : width);
   height &&

package/src/canvas/SelectableCanvas.spec.ts

@@ -297,7 +297,7 @@ describe('Selectable Canvas', () => {
       for (let y = -1; y <= 31; y++) {
         for (let x = -1; x <= 31; x++) {
           expect(
-            canvas['_pointIsInObjectSelectionArea'](object, new Point(x, y))
+            canvas['_pointIsInObjectSelectionArea'](object, new Point(x, y)),
           ).toBe(x >= 0 && x <= 30 && y >= 0 && y <= 30);
         }
       }
@@ -334,7 +334,7 @@ describe('Selectable Canvas', () => {
       canvas.add(groupD);
       const target = canvas.searchPossibleTargets(
         canvas.getObjects(),
-        groupD.getCenterPoint()
+        groupD.getCenterPoint(),
       );
       expect(target).toBe(groupC);
       expect(canvas.targets.map((obj) => obj.id)).toEqual(['a', 'b', 'c']);
@@ -373,7 +373,7 @@ describe('Selectable Canvas', () => {
       canvas.add(groupE);
       const target = canvas.searchPossibleTargets(
         canvas.getObjects(),
-        groupD.getCenterPoint()
+        groupD.getCenterPoint(),
       );
       expect(target).toBe(groupC);
       expect(canvas.targets.map((obj) => obj.id)).toEqual(['a', 'b', 'c', 'd']);
@@ -422,14 +422,14 @@ describe('Selectable Canvas', () => {
       const object2Position = object2.getCenterPoint();
       const target = canvas.searchPossibleTargets(
         canvas.getObjects(),
-        object2Position
+        object2Position,
       );
       expect(target).toBe(nestedGroup);
 
       nestedGroup.set({ interactive: true });
       const nestedTarget = canvas.searchPossibleTargets(
         canvas.getObjects(),
-        object2Position
+        object2Position,
       );
       expect(nestedTarget).toBe(object2);
     });
@@ -442,7 +442,7 @@ describe('Selectable Canvas', () => {
           { controlKey, zoom: false },
           { controlKey, zoom: true },
         ])
-        .flat()
+        .flat(),
     )('should fire before:transform event %p', ({ controlKey, zoom }) => {
       const canvas = new Canvas();
       const canvasOffset = canvas.calcOffset();
@@ -461,7 +461,7 @@ describe('Selectable Canvas', () => {
       canvas.on('before:transform', spy);
       const setupCurrentTransformSpy = jest.spyOn(
         canvas,
-        '_setupCurrentTransform'
+        '_setupCurrentTransform',
       );
 
       const {
@@ -472,7 +472,7 @@ describe('Selectable Canvas', () => {
           clientX: canvasOffset.left + (tl.x + tr.x) / 2,
           clientY: canvasOffset.top + (tl.y + bl.y) / 2,
           which: 1,
-        })
+        }),
       );
 
       expect(setupCurrentTransformSpy).toHaveBeenCalledTimes(1);

package/src/canvas/SelectableCanvas.ts

@@ -460,7 +460,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
       ctx,
       enhancedTolerance,
       enhancedTolerance,
-      enhancedTolerance
+      enhancedTolerance,
     );
   }
 
@@ -488,7 +488,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
    */
   _shouldClearSelection(
     e: TPointerEvent,
-    target?: FabricObject
+    target?: FabricObject,
   ): target is undefined {
     const activeObjects = this.getActiveObjects(),
       activeObject = this._activeObject;
@@ -522,7 +522,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
   private _shouldCenterTransform(
     target: FabricObject,
     action: string,
-    modifierKeyPressed: boolean
+    modifierKeyPressed: boolean,
   ) {
     if (!target) {
       return;
@@ -553,7 +553,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
    */
   _getOriginFromCorner(
     target: FabricObject,
-    controlName: string
+    controlName: string,
   ): { x: TOriginX; y: TOriginY } {
     const origin = {
       x: target.originX,
@@ -590,14 +590,14 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
   _setupCurrentTransform(
     e: TPointerEvent,
     target: FabricObject,
-    alreadySelected: boolean
+    alreadySelected: boolean,
   ): void {
     const pointer = target.group
       ? // transform pointer to target's containing coordinate plane
         sendPointToPlane(
           this.getScenePoint(e),
           undefined,
-          target.group.calcTransformMatrix()
+          target.group.calcTransformMatrix(),
         )
       : this.getScenePoint(e);
     const { key: corner = '', control } = target.getActiveControl() || {},
@@ -669,7 +669,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
     const { x, y, deltaX, deltaY } = this._groupSelector!,
       start = new Point(x, y).transform(this.viewportTransform),
       extent = new Point(x + deltaX, y + deltaY).transform(
-        this.viewportTransform
+        this.viewportTransform,
       ),
       strokeOffset = this.selectionLineWidth / 2;
     let minX = Math.min(start.x, extent.x),
@@ -697,7 +697,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
     FabricObject.prototype._setLineDash.call(
       this,
       ctx,
-      this.selectionDashArray
+      this.selectionDashArray,
     );
     ctx.strokeRect(minX, minY, maxX - minX, maxY - minY);
   }
@@ -815,7 +815,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
       obj.evented &&
       this._pointIsInObjectSelectionArea(
         obj,
-        sendPointToPlane(pointer, undefined, this.viewportTransform)
+        sendPointToPlane(pointer, undefined, this.viewportTransform),
       )
     ) {
       if (
@@ -841,7 +841,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
    */
   _searchPossibleTargets(
     objects: FabricObject[],
-    pointer: Point
+    pointer: Point,
   ): FabricObject | undefined {
     // Cache all targets where their bounding box contains point.
     let i = objects.length;
@@ -853,7 +853,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
         if (isCollection(target) && target.subTargetCheck) {
           const subTarget = this._searchPossibleTargets(
             target._objects as FabricObject[],
-            pointer
+            pointer,
           );
           subTarget && this.targets.push(subTarget);
         }
@@ -871,7 +871,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
    */
   searchPossibleTargets(
     objects: FabricObject[],
-    pointer: Point
+    pointer: Point,
   ): FabricObject | undefined {
     const target = this._searchPossibleTargets(objects, pointer);
 
@@ -986,7 +986,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
         ? new Point(1, 1)
         : new Point(
             upperCanvasEl.width / boundsWidth,
-            upperCanvasEl.height / boundsHeight
+            upperCanvasEl.height / boundsHeight,
           );
 
     return pointer.multiply(cssScale);
@@ -998,7 +998,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
    */
   protected _setDimensionsImpl(
     dimensions: TSize,
-    options?: TCanvasSizeOptions
+    options?: TCanvasSizeOptions,
   ) {
     // @ts-expect-error this method exists in the subclass - should be moved or declared as abstract
     this._resetTransformEventData();
@@ -1059,8 +1059,8 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
     return isActiveSelection(active)
       ? active.getObjects()
       : active
-      ? [active]
-      : [];
+        ? [active]
+        : [];
   }
 
   /**
@@ -1178,7 +1178,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
    */
   _discardActiveObject(
     e?: TPointerEvent,
-    object?: FabricObject
+    object?: FabricObject,
   ): this is { _activeObject: undefined } {
     const obj = this._activeObject;
     if (obj) {
@@ -1328,7 +1328,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
   protected _toObject(
     instance: FabricObject,
     methodName: 'toObject' | 'toDatalessObject',
-    propertiesToInclude: string[]
+    propertiesToInclude: string[],
   ): Record<string, any> {
     // If the object is part of the current selection group, it should
     // be transformed appropriately
@@ -1348,7 +1348,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
    * @returns the original values of instance which were changed
    */
   private _realizeGroupTransformOnObject(
-    instance: FabricObject
+    instance: FabricObject,
   ): Partial<typeof instance> {
     const { group } = instance;
     if (group && isActiveSelection(group) && this._activeObject === group) {
@@ -1377,7 +1377,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
   _setSVGObject(
     markup: string[],
     instance: FabricObject,
-    reviver?: TSVGReviver
+    reviver?: TSVGReviver,
   ) {
     // If the object is in a selection group, simulate what would happen to that
     // object when the group is deselected