fabric 6.2.0 → 6.3.0

package/src/shapes/Object/FabricObjectSVGExportMixin.ts

@@ -20,7 +20,7 @@ export class FabricObjectSVGExportMixin {
    */
   getSvgStyles(
     this: FabricObjectSVGExportMixin & FabricObject,
-    skipShadow?: boolean
+    skipShadow?: boolean,
   ) {
     const fillRule = this.fillRule ? this.fillRule : 'nonzero',
       strokeWidth = this.strokeWidth ? this.strokeWidth : '0',
@@ -82,7 +82,7 @@ export class FabricObjectSVGExportMixin {
    * @return {String}
    */
   getSvgCommons(
-    this: FabricObjectSVGExportMixin & FabricObject & { id?: string }
+    this: FabricObjectSVGExportMixin & FabricObject & { id?: string },
   ) {
     return [
       this.id ? `id="${this.id}" ` : '',
@@ -103,7 +103,7 @@ export class FabricObjectSVGExportMixin {
   getSvgTransform(
     this: FabricObjectSVGExportMixin & FabricObject,
     full?: boolean,
-    additionalTransform = ''
+    additionalTransform = '',
   ) {
     const transform = full ? this.calcTransformMatrix() : this.calcOwnMatrix(),
       svgTransform = `transform="${matrixToSVG(transform)}`;
@@ -117,7 +117,7 @@ export class FabricObjectSVGExportMixin {
    * @return {Array} an array of strings with the specific svg representation
    * of the instance
    */
-  _toSVG(reviver?: TSVGReviver): string[] {
+  _toSVG(_reviver?: TSVGReviver): string[] {
     return [''];
   }
 
@@ -128,7 +128,7 @@ export class FabricObjectSVGExportMixin {
    */
   toSVG(
     this: FabricObjectSVGExportMixin & FabricObject,
-    reviver?: TSVGReviver
+    reviver?: TSVGReviver,
   ) {
     return this._createBaseSVGMarkup(this._toSVG(reviver), {
       reviver,
@@ -142,7 +142,7 @@ export class FabricObjectSVGExportMixin {
    */
   toClipPathSVG(
     this: FabricObjectSVGExportMixin & FabricObject,
-    reviver?: TSVGReviver
+    reviver?: TSVGReviver,
   ) {
     return (
       '\t' +
@@ -161,7 +161,7 @@ export class FabricObjectSVGExportMixin {
     {
       reviver,
       additionalTransform = '',
-    }: { reviver?: TSVGReviver; additionalTransform?: string } = {}
+    }: { reviver?: TSVGReviver; additionalTransform?: string } = {},
   ) {
     const commonPieces = [
         this.getSvgTransform(true, additionalTransform),
@@ -189,7 +189,7 @@ export class FabricObjectSVGExportMixin {
       reviver?: TSVGReviver;
       withShadow?: boolean;
       additionalTransform?: string;
-    } = {}
+    } = {},
   ): string {
     const styleInfo = noStyle ? '' : `style="${this.getSvgStyles()}" `,
       shadowInfo = withShadow ? `style="${this.getSvgFilter()}" ` : '',
@@ -218,7 +218,7 @@ export class FabricObjectSVGExportMixin {
       '<g ',
       this.getSvgTransform(false),
       !absoluteClipPath ? shadowInfo + this.getSvgCommons() : '',
-      ' >\n'
+      ' >\n',
     );
     const commonPieces = [
       styleInfo,

package/src/shapes/Object/InteractiveObject.spec.ts

@@ -43,9 +43,9 @@ describe('InteractiveObject', () => {
           radiansToDegrees(
             Math.atan2(
               cornerPoint.corner.tr.y - cornerPoint.corner.tl.y,
-              cornerPoint.corner.tr.x - cornerPoint.corner.tl.x
-            )
-          )
+              cornerPoint.corner.tr.x - cornerPoint.corner.tl.x,
+            ),
+          ),
         );
         expect(controlAngle).toEqual(objectAngle);
       });

package/src/shapes/Object/InteractiveObject.ts

@@ -43,7 +43,7 @@ export type TStyleOverride = ControlRenderingStyleOverride &
 export class InteractiveFabricObject<
     Props extends TFabricObjectProps = Partial<FabricObjectProps>,
     SProps extends SerializedObjectProps = SerializedObjectProps,
-    EventSpec extends ObjectEvents = ObjectEvents
+    EventSpec extends ObjectEvents = ObjectEvents,
   >
   extends FabricObject<Props, SProps, EventSpec>
   implements FabricObjectProps
@@ -153,7 +153,7 @@ export class InteractiveFabricObject<
     Object.assign(
       this,
       (this.constructor as typeof InteractiveFabricObject).createControls(),
-      InteractiveFabricObject.ownDefaults
+      InteractiveFabricObject.ownDefaults,
     );
     this.setOptions(options);
   }
@@ -215,7 +215,7 @@ export class InteractiveFabricObject<
    */
   findControl(
     pointer: Point,
-    forTouch = false
+    forTouch = false,
   ): { key: string; control: Control; coord: TOCoord } | undefined {
     if (!this.hasControls || !this.canvas) {
       return undefined;
@@ -232,7 +232,7 @@ export class InteractiveFabricObject<
           key,
           this,
           pointer,
-          forTouch ? corner.touchCorner : corner.corner
+          forTouch ? corner.touchCorner : corner.corner,
         )
       ) {
         // this.canvas.contextTop.fillRect(pointer.x - 1, pointer.y - 1, 2, 2);
@@ -287,7 +287,7 @@ export class InteractiveFabricObject<
       // don't remove this assign for an object spread.
       coords[key] = Object.assign(
         position,
-        this._calcCornerCoords(control, position)
+        this._calcCornerCoords(control, position),
       );
     });
 
@@ -322,7 +322,7 @@ export class InteractiveFabricObject<
       position.x,
       position.y,
       false,
-      this
+      this,
     );
     const touchCorner = control.calcCornerCoords(
       angle,
@@ -330,7 +330,7 @@ export class InteractiveFabricObject<
       position.x,
       position.y,
       true,
-      this
+      this,
     );
     return { corner, touchCorner };
   }
@@ -354,8 +354,8 @@ export class InteractiveFabricObject<
     fn: (
       control: Control,
       key: string,
-      fabricObject: InteractiveFabricObject
-    ) => any
+      fabricObject: InteractiveFabricObject,
+    ) => any,
   ) {
     for (const i in this.controls) {
       fn(this.controls[i], i, this);
@@ -409,7 +409,7 @@ export class InteractiveFabricObject<
   _drawBorders(
     ctx: CanvasRenderingContext2D,
     size: Point,
-    styleOverride: TStyleOverride = {}
+    styleOverride: TStyleOverride = {},
   ): void {
     const options = {
       hasControls: this.hasControls,
@@ -434,7 +434,7 @@ export class InteractiveFabricObject<
    */
   _renderControls(
     ctx: CanvasRenderingContext2D,
-    styleOverride: TStyleOverride = {}
+    styleOverride: TStyleOverride = {},
   ) {
     const { hasBorders, hasControls } = this;
     const styleOptions = {
@@ -478,14 +478,14 @@ export class InteractiveFabricObject<
   drawBorders(
     ctx: CanvasRenderingContext2D,
     options: TQrDecomposeOut,
-    styleOverride: TStyleOverride
+    styleOverride: TStyleOverride,
   ): void {
     let size;
     if ((styleOverride && styleOverride.forActiveSelection) || this.group) {
       const bbox = sizeAfterTransform(
           this.width,
           this.height,
-          calcDimensionsMatrix(options)
+          calcDimensionsMatrix(options),
         ),
         stroke = !this.isStrokeAccountedForInDimensions()
           ? (this.strokeUniform
@@ -501,7 +501,7 @@ export class InteractiveFabricObject<
         .scalarAdd(this.padding * 2);
     } else {
       size = this._calculateCurrentDimensions().scalarAdd(
-        this.borderScaleFactor
+        this.borderScaleFactor,
       );
     }
     this._drawBorders(ctx, size, styleOverride);
@@ -516,7 +516,7 @@ export class InteractiveFabricObject<
    */
   drawControlsConnectingLines(
     ctx: CanvasRenderingContext2D,
-    size: Point
+    size: Point,
   ): void {
     let shouldStroke = false;
 
@@ -530,7 +530,7 @@ export class InteractiveFabricObject<
         ctx.moveTo(control.x * size.x, control.y * size.y);
         ctx.lineTo(
           control.x * size.x + control.offsetX,
-          control.y * size.y + control.offsetY
+          control.y * size.y + control.offsetY,
         );
       }
     });
@@ -549,7 +549,7 @@ export class InteractiveFabricObject<
    */
   drawControls(
     ctx: CanvasRenderingContext2D,
-    styleOverride: ControlRenderingStyleOverride = {}
+    styleOverride: ControlRenderingStyleOverride = {},
   ) {
     ctx.save();
     const retinaScaling = this.getCanvasRetinaScaling();
@@ -610,7 +610,7 @@ export class InteractiveFabricObject<
    */
   setControlsVisibility(options: Record<string, boolean> = {}) {
     Object.entries(options).forEach(([controlKey, visibility]) =>
-      this.setControlVisible(controlKey, visibility)
+      this.setControlVisible(controlKey, visibility),
     );
   }
 
@@ -625,7 +625,7 @@ export class InteractiveFabricObject<
    * with the object transformMatrix, or restored to neutral transform
    */
   clearContextTop(
-    restoreManually?: boolean
+    restoreManually?: boolean,
   ): CanvasRenderingContext2D | undefined {
     if (!this.canvas) {
       return;
@@ -650,12 +650,12 @@ export class InteractiveFabricObject<
   /**
    * This callback function is called every time _discardActiveObject or _setActiveObject
    * try to to deselect this object. If the function returns true, the process is cancelled
-   * @param {Object} [options] options sent from the upper functions
+   * @param {Object} [_options] options sent from the upper functions
    * @param {TPointerEvent} [options.e] event if the process is generated by an event
    * @param {FabricObject} [options.object] next object we are setting as active, and reason why
    * this is being deselected
    */
-  onDeselect(options?: {
+  onDeselect(_options?: {
     e?: TPointerEvent;
     object?: InteractiveFabricObject;
   }): boolean {
@@ -666,10 +666,10 @@ export class InteractiveFabricObject<
   /**
    * This callback function is called every time _discardActiveObject or _setActiveObject
    * try to to select this object. If the function returns true, the process is cancelled
-   * @param {Object} [options] options sent from the upper functions
-   * @param {Event} [options.e] event if the process is generated by an event
+   * @param {Object} [_options] options sent from the upper functions
+   * @param {Event} [_options.e] event if the process is generated by an event
    */
-  onSelect(options?: { e?: TPointerEvent }): boolean {
+  onSelect(_options?: { e?: TPointerEvent }): boolean {
     // implemented by sub-classes, as needed.
     return false;
   }
@@ -679,7 +679,7 @@ export class InteractiveFabricObject<
    * Fired from {@link Canvas#_onMouseMove}
    * @returns true in order for the window to start a drag session
    */
-  shouldStartDragging(e: TPointerEvent) {
+  shouldStartDragging(_e: TPointerEvent) {
     return false;
   }
 
@@ -688,17 +688,17 @@ export class InteractiveFabricObject<
    * Fired once a drag session has started
    * @returns true to handle the drag event
    */
-  onDragStart(e: DragEvent) {
+  onDragStart(_e: DragEvent) {
     return false;
   }
 
   /**
    * Override to customize drag and drop behavior
    * @public
-   * @param {DragEvent} e
+   * @param {DragEvent} _e
    * @returns {boolean} true if the object currently dragged can be dropped on the target
    */
-  canDrop(e: DragEvent): boolean {
+  canDrop(_e: DragEvent): boolean {
     return false;
   }
 
@@ -707,9 +707,9 @@ export class InteractiveFabricObject<
    * render a specific effect when an object is the source of a drag event
    * example: render the selection status for the part of text that is being dragged from a text object
    * @public
-   * @param {DragEvent} e
+   * @param {DragEvent} _e
    */
-  renderDragSourceEffect(e: DragEvent) {
+  renderDragSourceEffect(_e: DragEvent) {
     // for subclasses
   }
 
@@ -719,9 +719,9 @@ export class InteractiveFabricObject<
    * used to show that the underly object can receive a drop, or to show how the
    * object will change when dropping. example: show the cursor where the text is about to be dropped
    * @public
-   * @param {DragEvent} e
+   * @param {DragEvent} _e
    */
-  renderDropTargetEffect(e: DragEvent) {
+  renderDropTargetEffect(_e: DragEvent) {
     // for subclasses
   }
 }

package/src/shapes/Object/Object.ts

@@ -26,7 +26,6 @@ import type {
 } from '../../typedefs';
 import { classRegistry } from '../../ClassRegistry';
 import { runningAnimations } from '../../util/animation/AnimationRegistry';
-import { cloneDeep } from '../../util/internals/cloneDeep';
 import { capValue } from '../../util/misc/capValue';
 import { createCanvasElement, toDataURL } from '../../util/misc/dom';
 import { invertTransform, qrDecompose } from '../../util/misc/matrix';
@@ -132,8 +131,9 @@ type toDataURLOptions = ObjectToCanvasElementOptions & {
  */
 export class FabricObject<
     Props extends TOptions<ObjectProps> = Partial<ObjectProps>,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     SProps extends SerializedObjectProps = SerializedObjectProps,
-    EventSpec extends ObjectEvents = ObjectEvents
+    EventSpec extends ObjectEvents = ObjectEvents,
   >
   extends AnimatableObject<EventSpec>
   implements ObjectProps
@@ -354,7 +354,7 @@ export class FabricObject<
    * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache
    */
   _limitCacheSize(
-    dims: TSize & { zoomX: number; zoomY: number; capped: boolean } & any
+    dims: TSize & { zoomX: number; zoomY: number; capped: boolean } & any,
   ) {
     const width = dims.width,
       height = dims.height,
@@ -734,7 +734,7 @@ export class FabricObject<
       (this.dirty ||
         (isChanged &&
           (this.constructor as typeof FabricObject).stateProperties.includes(
-            key
+            key,
           ))) &&
       this.parent._set('dirty', true);
 
@@ -789,7 +789,7 @@ export class FabricObject<
     ctx.restore();
   }
 
-  drawSelectionBackground(ctx: CanvasRenderingContext2D) {
+  drawSelectionBackground(_ctx: CanvasRenderingContext2D) {
     /* no op */
   }
 
@@ -900,7 +900,7 @@ export class FabricObject<
    */
   drawClipPathOnCache(
     ctx: CanvasRenderingContext2D,
-    clipPath: TCachedFabricObject
+    clipPath: TCachedFabricObject,
   ) {
     ctx.save();
     // DEBUG: uncomment this line, comment the following
@@ -920,7 +920,7 @@ export class FabricObject<
     ctx.drawImage(
       clipPath._cacheCanvas,
       -clipPath.cacheTranslationX,
-      -clipPath.cacheTranslationY
+      -clipPath.cacheTranslationY,
     );
     ctx.restore();
   }
@@ -974,7 +974,7 @@ export class FabricObject<
     ctx.drawImage(
       this._cacheCanvas,
       -this.cacheTranslationX,
-      -this.cacheTranslationY
+      -this.cacheTranslationY,
     );
   }
 
@@ -1046,7 +1046,7 @@ export class FabricObject<
       | 'strokeDashOffset'
       | 'strokeLineJoin'
       | 'strokeMiterLimit'
-    >
+    >,
   ) {
     const stroke = decl.stroke;
     if (stroke) {
@@ -1159,7 +1159,7 @@ export class FabricObject<
    */
   _applyPatternGradientTransform(
     ctx: CanvasRenderingContext2D,
-    filler: TFiller
+    filler: TFiller,
   ) {
     if (!isFiller(filler)) {
       return { offsetX: 0, offsetY: 0 };
@@ -1200,9 +1200,9 @@ export class FabricObject<
    * function that actually render something on the context.
    * empty here to allow Obects to work on tests to benchmark fabric functionalites
    * not related to rendering
-   * @param {CanvasRenderingContext2D} ctx Context to render on
+   * @param {CanvasRenderingContext2D} _ctx Context to render on
    */
-  _render(ctx: CanvasRenderingContext2D) {
+  _render(_ctx: CanvasRenderingContext2D) {
     // placeholder to be overridden
   }
 
@@ -1262,7 +1262,7 @@ export class FabricObject<
    */
   _applyPatternForTransformedGradient(
     ctx: CanvasRenderingContext2D,
-    filler: TFiller
+    filler: TFiller,
   ) {
     const dims = this._limitCacheSize(this._getCacheCanvasDimensions()),
       pCanvas = createCanvasElement(),
@@ -1286,18 +1286,18 @@ export class FabricObject<
     pCtx.translate(width / 2, height / 2);
     pCtx.scale(
       dims.zoomX / this.scaleX / retinaScaling,
-      dims.zoomY / this.scaleY / retinaScaling
+      dims.zoomY / this.scaleY / retinaScaling,
     );
     this._applyPatternGradientTransform(pCtx, filler);
     pCtx.fillStyle = filler.toLive(ctx)!;
     pCtx.fill();
     ctx.translate(
       -this.width / 2 - this.strokeWidth / 2,
-      -this.height / 2 - this.strokeWidth / 2
+      -this.height / 2 - this.strokeWidth / 2,
     );
     ctx.scale(
       (retinaScaling * this.scaleX) / dims.zoomX,
-      (retinaScaling * this.scaleY) / dims.zoomY
+      (retinaScaling * this.scaleY) / dims.zoomY,
     );
     ctx.strokeStyle = pCtx.createPattern(pCanvas, 'no-repeat') ?? '';
   }
@@ -1320,7 +1320,7 @@ export class FabricObject<
   clone(propertiesToInclude?: string[]): Promise<this> {
     const objectForm = this.toObject(propertiesToInclude);
     return (this.constructor as typeof FabricObject).fromObject(
-      objectForm
+      objectForm,
     ) as unknown as Promise<this>;
   }
 
@@ -1421,7 +1421,7 @@ export class FabricObject<
     this.setPositionByOrigin(
       new Point(canvas.width / 2, canvas.height / 2),
       CENTER,
-      CENTER
+      CENTER,
     );
     const originalCanvas = this.canvas;
     // static canvas and canvas have both an array of InteractiveObjects
@@ -1465,7 +1465,7 @@ export class FabricObject<
     return toDataURL(
       this.toCanvasElement(options),
       options.format || 'png',
-      options.quality || 1
+      options.quality || 1,
     );
   }
 
@@ -1519,7 +1519,7 @@ export class FabricObject<
       const { x, y } = this.translateToOriginPoint(
         this.getRelativeCenterPoint(),
         originX,
-        originY
+        originY,
       );
       this.left = x;
       this.top = y;
@@ -1573,22 +1573,24 @@ export class FabricObject<
    * @returns {Promise<FabricObject>}
    */
   static _fromObject<S extends FabricObject>(
-    { type, ...object }: Record<string, unknown>,
-    { extraParam, ...options }: Abortable & { extraParam?: string } = {}
+    { type, ...serializedObjectOptions }: Record<string, unknown>,
+    { extraParam, ...options }: Abortable & { extraParam?: string } = {},
   ): Promise<S> {
-    return enlivenObjectEnlivables<any>(cloneDeep(object), options).then(
-      (enlivedMap) => {
-        const allOptions = { ...options, ...enlivedMap };
+    return enlivenObjectEnlivables<any>(serializedObjectOptions, options).then(
+      (enlivedObjectOptions) => {
         // from the resulting enlived options, extract options.extraParam to arg0
         // to avoid accidental overrides later
         if (extraParam) {
-          const { [extraParam]: arg0, ...rest } = allOptions;
-          // @ts-expect-error different signature
-          return new this(arg0, rest);
+          delete enlivedObjectOptions[extraParam];
+          return new this(
+            serializedObjectOptions[extraParam],
+            // @ts-expect-error different signature
+            enlivedObjectOptions,
+          );
         } else {
-          return new this(allOptions);
+          return new this(enlivedObjectOptions);
         }
-      }
+      },
     ) as Promise<S>;
   }
 
@@ -1601,7 +1603,7 @@ export class FabricObject<
    */
   static fromObject<T extends TOptions<SerializedObjectProps>>(
     object: T,
-    options?: Abortable
+    options?: Abortable,
   ) {
     return this._fromObject(object, options);
   }

package/src/shapes/Object/ObjectGeometry.ts

@@ -144,7 +144,7 @@ export class ObjectGeometry<EventSpec extends ObjectEvents = ObjectEvents>
    * that otherwise are the object's current values.
    * @example <caption>Set object's bottom left corner to point (5,5) on canvas</caption>
    * object.setXY(new Point(5, 5), 'left', 'bottom').
-   * @param {Point} point position in canvas coordinate plane
+   * @param {Point} point position in scene coordinate plane
    * @param {TOriginX} [originX] Horizontal origin: 'left', 'center' or 'right'
    * @param {TOriginY} [originY] Vertical origin: 'top', 'center' or 'bottom'
    */
@@ -152,7 +152,7 @@ export class ObjectGeometry<EventSpec extends ObjectEvents = ObjectEvents>
     if (this.group) {
       point = transformPoint(
         point,
-        invertTransform(this.group.calcTransformMatrix())
+        invertTransform(this.group.calcTransformMatrix()),
       );
     }
     this.setRelativeXY(point, originX, originY);
@@ -174,7 +174,7 @@ export class ObjectGeometry<EventSpec extends ObjectEvents = ObjectEvents>
   setRelativeXY(
     point: Point,
     originX: TOriginX = this.originX,
-    originY: TOriginY = this.originY
+    originY: TOriginY = this.originY,
   ) {
     this.setPositionByOrigin(point, originX, originY);
   }
@@ -207,7 +207,7 @@ export class ObjectGeometry<EventSpec extends ObjectEvents = ObjectEvents>
     const intersection = Intersection.intersectPolygonRectangle(
       this.getCoords(),
       tl,
-      br
+      br,
     );
     return intersection.status === 'Intersection';
   }
@@ -220,7 +220,7 @@ export class ObjectGeometry<EventSpec extends ObjectEvents = ObjectEvents>
   intersectsWithObject(other: ObjectGeometry): boolean {
     const intersection = Intersection.intersectPolygonPolygon(
       this.getCoords(),
-      other.getCoords()
+      other.getCoords(),
     );
 
     return (
@@ -289,7 +289,7 @@ export class ObjectGeometry<EventSpec extends ObjectEvents = ObjectEvents>
           point.x <= br.x &&
           point.x >= tl.x &&
           point.y <= br.y &&
-          point.y >= tl.y
+          point.y >= tl.y,
       )
     ) {
       return true;
@@ -317,7 +317,7 @@ export class ObjectGeometry<EventSpec extends ObjectEvents = ObjectEvents>
     const allPointsAreOutside = this.getCoords().every(
       (point) =>
         (point.x >= br.x || point.x <= tl.x) &&
-        (point.y >= br.y || point.y <= tl.y)
+        (point.y >= br.y || point.y <= tl.y),
     );
     // check if the object is so big that it contains the entire viewport
     return allPointsAreOutside && this.containsPoint(tl.midPointFrom(br));
@@ -457,7 +457,7 @@ export class ObjectGeometry<EventSpec extends ObjectEvents = ObjectEvents>
       +this.flipX,
       +this.flipY,
       resolveOrigin(this.originX),
-      resolveOrigin(this.originY)
+      resolveOrigin(this.originY),
     );
 
     return prefix;
@@ -483,7 +483,7 @@ export class ObjectGeometry<EventSpec extends ObjectEvents = ObjectEvents>
     if (this.group) {
       matrix = multiplyTransformMatrices(
         this.group.calcTransformMatrix(false),
-        matrix
+        matrix,
       );
     }
     this.matrixCache = {