fabric 6.2.0 → 6.3.0

package/src/controls/Control.ts

@@ -177,7 +177,7 @@ export class Control {
     controlKey: string,
     fabricObject: InteractiveFabricObject,
     pointer: Point,
-    { tl, tr, br, bl }: TCornerPoint
+    { tl, tr, br, bl }: TCornerPoint,
   ) {
     // TODO: locking logic can be handled here instead of in the control handler logic
     return (
@@ -197,7 +197,7 @@ export class Control {
   getActionHandler(
     eventData: TPointerEvent,
     fabricObject: InteractiveFabricObject,
-    control: Control
+    control: Control,
   ): TransformActionHandler | undefined {
     return this.actionHandler;
   }
@@ -212,7 +212,7 @@ export class Control {
   getMouseDownHandler(
     eventData: TPointerEvent,
     fabricObject: InteractiveFabricObject,
-    control: Control
+    control: Control,
   ): ControlActionHandler | undefined {
     return this.mouseDownHandler;
   }
@@ -228,7 +228,7 @@ export class Control {
   getMouseUpHandler(
     eventData: TPointerEvent,
     fabricObject: InteractiveFabricObject,
-    control: Control
+    control: Control,
   ): ControlActionHandler | undefined {
     return this.mouseUpHandler;
   }
@@ -245,7 +245,7 @@ export class Control {
   cursorStyleHandler(
     eventData: TPointerEvent,
     control: Control,
-    fabricObject: InteractiveFabricObject
+    fabricObject: InteractiveFabricObject,
   ) {
     return control.cursorStyle;
   }
@@ -260,7 +260,7 @@ export class Control {
   getActionName(
     eventData: TPointerEvent,
     control: Control,
-    fabricObject: InteractiveFabricObject
+    fabricObject: InteractiveFabricObject,
   ) {
     return control.actionName;
   }
@@ -283,7 +283,7 @@ export class Control {
   setVisibility(
     visibility: boolean,
     name: string,
-    fabricObject: InteractiveFabricObject
+    fabricObject: InteractiveFabricObject,
   ) {
     this.visible = visibility;
   }
@@ -292,11 +292,11 @@ export class Control {
     dim: Point,
     finalMatrix: TMat2D,
     fabricObject: InteractiveFabricObject,
-    currentControl: Control
+    currentControl: Control,
   ) {
     return new Point(
       this.x * dim.x + this.offsetX,
-      this.y * dim.y + this.offsetY
+      this.y * dim.y + this.offsetY,
     ).transform(finalMatrix);
   }
 
@@ -315,14 +315,14 @@ export class Control {
     centerX: number,
     centerY: number,
     isTouch: boolean,
-    fabricObject: InteractiveFabricObject
+    fabricObject: InteractiveFabricObject,
   ) {
     const t = multiplyTransformMatrixArray([
       createTranslateMatrix(centerX, centerY),
       createRotateMatrix({ angle }),
       createScaleMatrix(
         (isTouch ? this.touchSizeX : this.sizeX) || objectCornerSize,
-        (isTouch ? this.touchSizeY : this.sizeY) || objectCornerSize
+        (isTouch ? this.touchSizeY : this.sizeY) || objectCornerSize,
       ),
     ]);
     return {
@@ -350,7 +350,7 @@ export class Control {
     left: number,
     top: number,
     styleOverride: ControlRenderingStyleOverride | undefined,
-    fabricObject: InteractiveFabricObject
+    fabricObject: InteractiveFabricObject,
   ) {
     styleOverride = styleOverride || {};
     switch (styleOverride.cornerStyle || fabricObject.cornerStyle) {
@@ -361,7 +361,7 @@ export class Control {
           left,
           top,
           styleOverride,
-          fabricObject
+          fabricObject,
         );
         break;
       default:
@@ -371,7 +371,7 @@ export class Control {
           left,
           top,
           styleOverride,
-          fabricObject
+          fabricObject,
         );
     }
   }

package/src/controls/changeWidth.test.ts

@@ -62,7 +62,7 @@ describe('changeWidth', () => {
       eventData,
       prepareTransform(target, 'ml'),
       200,
-      300
+      300,
     );
     expect(changed).toBe(false);
     expect(target.width).toBe(100);
@@ -70,7 +70,7 @@ describe('changeWidth', () => {
       eventData,
       prepareTransform(target, 'mr'),
       -200,
-      300
+      300,
     );
     expect(changed2).toBe(false);
     expect(target.width).toBe(100);

package/src/controls/changeWidth.ts

@@ -18,14 +18,14 @@ export const changeObjectWidth: TransformActionHandler = (
   eventData,
   transform,
   x,
-  y
+  y,
 ) => {
   const localPoint = getLocalPoint(
     transform,
     transform.originX,
     transform.originY,
     x,
-    y
+    y,
   );
   //  make sure the control changes width ONLY from it's side of target
   if (
@@ -41,7 +41,7 @@ export const changeObjectWidth: TransformActionHandler = (
       multiplier = isTransformCentered(transform) ? 2 : 1,
       oldWidth = target.width,
       newWidth = Math.ceil(
-        Math.abs((localPoint.x * multiplier) / target.scaleX) - strokePadding
+        Math.abs((localPoint.x * multiplier) / target.scaleX) - strokePadding,
       );
     target.set('width', Math.max(newWidth, 0));
     //  check against actual target width in case `newWidth` was rejected
@@ -52,5 +52,5 @@ export const changeObjectWidth: TransformActionHandler = (
 
 export const changeWidth = wrapWithFireEvent(
   RESIZING,
-  wrapWithFixedAnchor(changeObjectWidth)
+  wrapWithFixedAnchor(changeObjectWidth),
 );

package/src/controls/controlRendering.ts

@@ -16,13 +16,13 @@ export type ControlRenderingStyleOverride = Partial<
 >;
 
 export type ControlRenderer<
-  O extends InteractiveFabricObject = InteractiveFabricObject
+  O extends InteractiveFabricObject = InteractiveFabricObject,
 > = (
   ctx: CanvasRenderingContext2D,
   left: number,
   top: number,
   styleOverride: ControlRenderingStyleOverride,
-  fabricObject: O
+  fabricObject: O,
 ) => void;
 
 /**
@@ -42,7 +42,7 @@ export function renderCircleControl(
   left: number,
   top: number,
   styleOverride: ControlRenderingStyleOverride,
-  fabricObject: InteractiveFabricObject
+  fabricObject: InteractiveFabricObject,
 ) {
   styleOverride = styleOverride || {};
   const xSize =
@@ -103,7 +103,7 @@ export function renderSquareControl(
   left: number,
   top: number,
   styleOverride: ControlRenderingStyleOverride,
-  fabricObject: InteractiveFabricObject
+  fabricObject: InteractiveFabricObject,
 ) {
   styleOverride = styleOverride || {};
   const xSize =

package/src/controls/drag.ts

@@ -16,7 +16,7 @@ export const dragHandler: TransformActionHandler = (
   eventData,
   transform,
   x,
-  y
+  y,
 ) => {
   const { target, offsetX, offsetY } = transform,
     newLeft = x - offsetX,

package/src/controls/fireEvent.ts

@@ -5,7 +5,7 @@ import type {
 
 export const fireEvent = (
   eventName: TModificationEvents,
-  options: ObjectModificationEvents[typeof eventName]
+  options: ObjectModificationEvents[typeof eventName],
 ) => {
   const {
     transform: { target },

package/src/controls/pathControl.spec.ts

@@ -26,13 +26,13 @@ describe('pathControls', () => {
     canvas._setupCurrentTransform(
       new MouseEvent('mousedown', { clientX: 50, clientY: 50 }),
       path,
-      true
+      true,
     );
     document.dispatchEvent(
-      new MouseEvent('mousemove', { clientX: 55, clientY: 55 })
+      new MouseEvent('mousemove', { clientX: 55, clientY: 55 }),
     );
     document.dispatchEvent(
-      new MouseEvent('mouseup', { clientX: 55, clientY: 55 })
+      new MouseEvent('mouseup', { clientX: 55, clientY: 55 }),
     );
 
     expect(spyModifyPath).toHaveBeenCalledWith(
@@ -42,24 +42,24 @@ describe('pathControls', () => {
         transform: expect.objectContaining({
           action: 'modifyPath',
         }),
-      })
+      }),
     );
 
     canvas
       .getSelectionElement()
       .dispatchEvent(
-        new MouseEvent('mousedown', { clientX: 50, clientY: 150 })
+        new MouseEvent('mousedown', { clientX: 50, clientY: 150 }),
       );
     canvas._setupCurrentTransform(
       new MouseEvent('mousedown', { clientX: 50, clientY: 150 }),
       path,
-      true
+      true,
     );
     document.dispatchEvent(
-      new MouseEvent('mousemove', { clientX: 55, clientY: 155 })
+      new MouseEvent('mousemove', { clientX: 55, clientY: 155 }),
     );
     document.dispatchEvent(
-      new MouseEvent('mouseup', { clientX: 55, clientY: 155 })
+      new MouseEvent('mouseup', { clientX: 55, clientY: 155 }),
     );
 
     expect(spyModifyPath).toHaveBeenCalledWith(
@@ -69,7 +69,7 @@ describe('pathControls', () => {
         transform: expect.objectContaining({
           action: 'modifyPath',
         }),
-      })
+      }),
     );
   });
 });

package/src/controls/pathControl.ts

@@ -27,18 +27,18 @@ export type PathPointControlStyle = {
 const calcPathPointPosition = (
   pathObject: Path,
   commandIndex: number,
-  pointIndex: number
+  pointIndex: number,
 ) => {
   const { path, pathOffset } = pathObject;
   const command = path[commandIndex];
   return new Point(
     (command[pointIndex] as number) - pathOffset.x,
-    (command[pointIndex + 1] as number) - pathOffset.y
+    (command[pointIndex + 1] as number) - pathOffset.y,
   ).transform(
     multiplyTransformMatrices(
       pathObject.getViewportTransform(),
-      pathObject.calcTransformMatrix()
-    )
+      pathObject.calcTransformMatrix(),
+    ),
   );
 };
 
@@ -47,7 +47,7 @@ const movePathPoint = (
   x: number,
   y: number,
   commandIndex: number,
-  pointIndex: number
+  pointIndex: number,
 ) => {
   const { path, pathOffset } = pathObject;
 
@@ -55,7 +55,7 @@ const movePathPoint = (
     path[(commandIndex > 0 ? commandIndex : path.length) - 1];
   const anchorPoint = new Point(
     anchorCommand[pointIndex] as number,
-    anchorCommand[pointIndex + 1] as number
+    anchorCommand[pointIndex + 1] as number,
   );
 
   const anchorPointInParentPlane = anchorPoint
@@ -65,7 +65,7 @@ const movePathPoint = (
   const mouseLocalPosition = sendPointToPlane(
     new Point(x, y),
     undefined,
-    pathObject.calcOwnMatrix()
+    pathObject.calcOwnMatrix(),
   );
 
   path[commandIndex][pointIndex] = mouseLocalPosition.x + pathOffset.x;
@@ -91,7 +91,7 @@ function pathPositionHandler(
   this: PathPointControl,
   dim: Point,
   finalMatrix: TMat2D,
-  pathObject: Path
+  pathObject: Path,
 ) {
   const { commandIndex, pointIndex } = this;
   return calcPathPointPosition(pathObject, commandIndex, pointIndex);
@@ -109,7 +109,7 @@ function pathActionHandler(
   eventData: TPointerEvent,
   transform: TTransformAnchor,
   x: number,
-  y: number
+  y: number,
 ) {
   const { target } = transform;
   const { commandIndex, pointIndex } = this;
@@ -118,7 +118,7 @@ function pathActionHandler(
     x,
     y,
     commandIndex,
-    pointIndex
+    pointIndex,
   );
   if (actionPerformed) {
     fireEvent(this.actionName as TModificationEvents, {
@@ -147,7 +147,7 @@ class PathPointControl extends Control {
     left: number,
     top: number,
     styleOverride: ControlRenderingStyleOverride | undefined,
-    fabricObject: Path
+    fabricObject: Path,
   ) {
     const overrides: ControlRenderingStyleOverride = {
       ...styleOverride,
@@ -173,7 +173,7 @@ class PathControlPointControl extends PathPointControl {
     left: number,
     top: number,
     styleOverride: ControlRenderingStyleOverride | undefined,
-    fabricObject: Path
+    fabricObject: Path,
   ) {
     const { path } = fabricObject;
     const {
@@ -191,7 +191,7 @@ class PathControlPointControl extends PathPointControl {
     const point = calcPathPointPosition(
       fabricObject,
       connectToCommandIndex,
-      connectToPointIndex
+      connectToPointIndex,
     );
 
     if (commandType === 'Q') {
@@ -199,7 +199,7 @@ class PathControlPointControl extends PathPointControl {
       const point2 = calcPathPointPosition(
         fabricObject,
         commandIndex,
-        pointIndex + 2
+        pointIndex + 2,
       );
       ctx.moveTo(point2.x, point2.y);
       ctx.lineTo(left, top);
@@ -223,7 +223,7 @@ const createControl = (
     pointStyle?: PathPointControlStyle;
   },
   connectToCommandIndex?: number,
-  connectToPointIndex?: number
+  connectToPointIndex?: number,
 ) =>
   new (isControlPoint ? PathControlPointControl : PathPointControl)({
     commandIndex: commandIndexPos,
@@ -242,7 +242,7 @@ export function createPathControls(
   options: Partial<Control> & {
     controlPointStyle?: PathPointControlStyle;
     pointStyle?: PathPointControlStyle;
-  } = {}
+  } = {},
 ): Record<string, Control> {
   const controls = {} as Record<string, Control>;
   let previousCommandType: TSimpleParseCommandType = 'M';
@@ -254,7 +254,7 @@ export function createPathControls(
         commandIndex,
         command.length - 2,
         false,
-        options
+        options,
       );
     }
     switch (commandType) {
@@ -265,7 +265,7 @@ export function createPathControls(
           true,
           options,
           commandIndex - 1,
-          indexFromPrevCommand(previousCommandType)
+          indexFromPrevCommand(previousCommandType),
         );
         controls[`c_${commandIndex}_C_CP_2`] = createControl(
           commandIndex,
@@ -273,7 +273,7 @@ export function createPathControls(
           true,
           options,
           commandIndex,
-          5
+          5,
         );
         break;
       case 'Q':
@@ -283,7 +283,7 @@ export function createPathControls(
           true,
           options,
           commandIndex,
-          3
+          3,
         );
         break;
     }

package/src/controls/polyControl.spec.ts

@@ -8,7 +8,7 @@ describe('polyControl', () => {
   it('should fire events', () => {
     const poly = new Polygon(
       [new Point(), new Point(50, 0), new Point(50, 50), new Point(0, 50)],
-      { controls: createPolyControls(4) }
+      { controls: createPolyControls(4) },
     );
     const canvas = new Canvas();
     canvas.add(poly);
@@ -22,13 +22,13 @@ describe('polyControl', () => {
     canvas._setupCurrentTransform(
       new MouseEvent('mousedown', { clientX: 50, clientY: 50 }),
       poly,
-      true
+      true,
     );
     document.dispatchEvent(
-      new MouseEvent('mousemove', { clientX: 55, clientY: 55 })
+      new MouseEvent('mousemove', { clientX: 55, clientY: 55 }),
     );
     document.dispatchEvent(
-      new MouseEvent('mouseup', { clientX: 55, clientY: 55 })
+      new MouseEvent('mouseup', { clientX: 55, clientY: 55 }),
     );
 
     expect(
@@ -37,8 +37,8 @@ describe('polyControl', () => {
           {
             transform: { action },
           },
-        ]) => action
-      )
+        ]) => action,
+      ),
     ).toMatchObject(['modifyPoly', 'modifyPoly']);
   });
 });

package/src/controls/polyControl.ts

@@ -29,8 +29,8 @@ export const createPolyPositionHandler = (pointIndex: number) => {
       .transform(
         multiplyTransformMatrices(
           polyObject.getViewportTransform(),
-          polyObject.calcTransformMatrix()
-        )
+          polyObject.calcTransformMatrix(),
+        ),
       );
   };
 };
@@ -46,14 +46,14 @@ export const polyActionHandler = (
   eventData: TPointerEvent,
   transform: TTransformAnchor,
   x: number,
-  y: number
+  y: number,
 ) => {
   const { target, pointIndex } = transform;
   const poly = target as Polyline;
   const mouseLocalPosition = sendPointToPlane(
     new Point(x, y),
     undefined,
-    poly.calcOwnMatrix()
+    poly.calcOwnMatrix(),
   );
 
   poly.points[pointIndex] = mouseLocalPosition.add(poly.pathOffset);
@@ -67,17 +67,17 @@ export const polyActionHandler = (
  */
 export const factoryPolyActionHandler = (
   pointIndex: number,
-  fn: TransformActionHandler<TTransformAnchor>
+  fn: TransformActionHandler<TTransformAnchor>,
 ) => {
   return function (
     eventData: TPointerEvent,
     transform: Transform,
     x: number,
-    y: number
+    y: number,
   ) {
     const poly = transform.target as Polyline,
       anchorPoint = new Point(
-        poly.points[(pointIndex > 0 ? pointIndex : poly.points.length) - 1]
+        poly.points[(pointIndex > 0 ? pointIndex : poly.points.length) - 1],
       ),
       anchorPointInParentPlane = anchorPoint
         .subtract(poly.pathOffset)
@@ -99,20 +99,20 @@ export const factoryPolyActionHandler = (
 export const createPolyActionHandler = (pointIndex: number) =>
   wrapWithFireEvent(
     ACTION_NAME,
-    factoryPolyActionHandler(pointIndex, polyActionHandler)
+    factoryPolyActionHandler(pointIndex, polyActionHandler),
   );
 
 export function createPolyControls(
   poly: Polyline,
-  options?: Partial<Control>
+  options?: Partial<Control>,
 ): Record<string, Control>;
 export function createPolyControls(
   numOfControls: number,
-  options?: Partial<Control>
+  options?: Partial<Control>,
 ): Record<string, Control>;
 export function createPolyControls(
   arg0: number | Polyline,
-  options: Partial<Control> = {}
+  options: Partial<Control> = {},
 ) {
   const controls = {} as Record<string, Control>;
   for (

package/src/controls/rotate.ts

@@ -19,7 +19,7 @@ import { wrapWithFixedAnchor } from './wrapWithFixedAnchor';
 export const rotationStyleHandler: ControlCursorCallback = (
   eventData,
   control,
-  fabricObject
+  fabricObject,
 ) => {
   if (fabricObject.lockRotation) {
     return NOT_ALLOWED_CURSOR;
@@ -41,12 +41,12 @@ const rotateObjectWithSnapping: TransformActionHandler = (
   eventData,
   { target, ex, ey, theta, originX, originY },
   x,
-  y
+  y,
 ) => {
   const pivotPoint = target.translateToOriginPoint(
     target.getRelativeCenterPoint(),
     originX,
-    originY
+    originY,
   );
 
   if (isLocked(target, 'lockRotation')) {
@@ -84,5 +84,5 @@ const rotateObjectWithSnapping: TransformActionHandler = (
 
 export const rotationWithSnapping = wrapWithFireEvent(
   ROTATING,
-  wrapWithFixedAnchor(rotateObjectWithSnapping)
+  wrapWithFixedAnchor(rotateObjectWithSnapping),
 );

package/src/controls/scale.test.ts

@@ -10,7 +10,7 @@ import { scalingX, scalingY } from './scale';
 const createZeroThickRectangleScalingItems = (
   rectOptions: { width: number; height: number } & Partial<RectProps>,
   usedCorner: keyof Rect['oCoords'],
-  pointDiff: Point
+  pointDiff: Point,
 ) => {
   const extraMargin = 100;
   const { width, height } = rectOptions;
@@ -68,14 +68,14 @@ describe('Scale', () => {
       createZeroThickRectangleScalingItems(
         { width: 0, height: 60 },
         'mr',
-        new Point(20, 0) // moving right
+        new Point(20, 0), // moving right
       );
     const currentScale = target.scaleX;
     const didScale = scalingX(moveEvent, transform, pointer.x, pointer.y);
     expect(currentScale).toEqual(transform.target.scaleX);
     expect((transform.target as Rect).scaleX).not.toBeNaN();
     expect((transform.target as Rect).scaleX).not.toBe(
-      Number.POSITIVE_INFINITY
+      Number.POSITIVE_INFINITY,
     );
     expect(didScale).toBe(false);
   });
@@ -85,7 +85,7 @@ describe('Scale', () => {
       createZeroThickRectangleScalingItems(
         { width: 0, height: 60 },
         'br',
-        new Point(20, 20) // moving right
+        new Point(20, 20), // moving right
       );
     const currentScaleX = target.scaleX;
     const currentScaleY = target.scaleY;
@@ -94,7 +94,7 @@ describe('Scale', () => {
     expect(currentScaleY).toEqual(transform.target.scaleY);
     expect((transform.target as Rect).scaleX).not.toBeNaN();
     expect((transform.target as Rect).scaleX).not.toBe(
-      Number.POSITIVE_INFINITY
+      Number.POSITIVE_INFINITY,
     );
     expect(didScale).toBe(false);
   });
@@ -104,14 +104,14 @@ describe('Scale', () => {
       createZeroThickRectangleScalingItems(
         { width: 60, height: 0 },
         'mb',
-        new Point(0, 20)
+        new Point(0, 20),
       );
 
     const didScale = scalingY(moveEvent, transform, pointer.x, pointer.y);
 
     expect((transform.target as Rect).scaleY).not.toBeNaN();
     expect((transform.target as Rect).scaleY).not.toBe(
-      Number.POSITIVE_INFINITY
+      Number.POSITIVE_INFINITY,
     );
     expect(didScale).toBe(false);
   });
@@ -121,14 +121,14 @@ describe('Scale', () => {
       createZeroThickRectangleScalingItems(
         { width: 60, height: 0 },
         'br',
-        new Point(20, 20)
+        new Point(20, 20),
       );
 
     const didScale = scalingY(moveEvent, transform, pointer.x, pointer.y);
 
     expect((transform.target as Rect).scaleY).not.toBeNaN();
     expect((transform.target as Rect).scaleY).not.toBe(
-      Number.POSITIVE_INFINITY
+      Number.POSITIVE_INFINITY,
     );
     expect(didScale).toBe(false);
   });