fabric 6.2.0 → 6.3.0

package/src/LayoutManager/LayoutManager.ts

@@ -85,7 +85,7 @@ export class LayoutManager {
    */
   protected attachHandlers(
     object: FabricObject,
-    context: RegistrationContext & Partial<StrictLayoutContext>
+    context: RegistrationContext & Partial<StrictLayoutContext>,
   ): VoidFunction[] {
     const { target } = context;
     return (
@@ -115,9 +115,9 @@ export class LayoutManager {
                 trigger: key,
                 e,
                 target,
-              }
-        )
-      )
+              },
+        ),
+      ),
     );
   }
 
@@ -129,7 +129,7 @@ export class LayoutManager {
    */
   protected subscribe(
     object: FabricObject,
-    context: RegistrationContext & Partial<StrictLayoutContext>
+    context: RegistrationContext & Partial<StrictLayoutContext>,
   ) {
     this.unsubscribe(object, context);
     const disposers = this.attachHandlers(object, context);
@@ -141,20 +141,20 @@ export class LayoutManager {
    */
   protected unsubscribe(
     object: FabricObject,
-    context?: RegistrationContext & Partial<StrictLayoutContext>
+    _context?: RegistrationContext & Partial<StrictLayoutContext>,
   ) {
     (this._subscriptions.get(object) || []).forEach((d) => d());
     this._subscriptions.delete(object);
   }
 
   unsubscribeTargets(
-    context: RegistrationContext & Partial<StrictLayoutContext>
+    context: RegistrationContext & Partial<StrictLayoutContext>,
   ) {
     context.targets.forEach((object) => this.unsubscribe(object, context));
   }
 
   subscribeTargets(
-    context: RegistrationContext & Partial<StrictLayoutContext>
+    context: RegistrationContext & Partial<StrictLayoutContext>,
   ) {
     context.targets.forEach((object) => this.subscribe(object, context));
   }
@@ -189,13 +189,13 @@ export class LayoutManager {
             ...tricklingContext,
             bubbles: false,
             target: object as Group,
-          })
+          }),
       );
     }
   }
 
   protected getLayoutResult(
-    context: StrictLayoutContext
+    context: StrictLayoutContext,
   ): Required<LayoutResult> | undefined {
     const { target, strategy, type } = context;
 
@@ -223,7 +223,7 @@ export class LayoutManager {
         type === LAYOUT_TYPE_INITIALIZATION
           ? iMatrix
           : invertTransform(target.calcOwnMatrix()),
-        true
+        true,
       )
       .add(relativeCorrection);
 
@@ -237,7 +237,7 @@ export class LayoutManager {
 
   protected commitLayout(
     context: StrictLayoutContext,
-    layoutResult: Required<LayoutResult>
+    layoutResult: Required<LayoutResult>,
   ) {
     const { target } = context;
     const {
@@ -267,7 +267,7 @@ export class LayoutManager {
 
   protected layoutObjects(
     context: StrictLayoutContext,
-    layoutResult: Required<LayoutResult>
+    layoutResult: Required<LayoutResult>,
   ) {
     const { target } = context;
     //  adjust objects to account for new center
@@ -287,7 +287,7 @@ export class LayoutManager {
   protected layoutObject(
     context: StrictLayoutContext,
     { offset }: Required<LayoutResult>,
-    object: FabricObject
+    object: FabricObject,
   ) {
     // TODO: this is here for cache invalidation.
     // verify if this is necessary since we have explicit
@@ -300,7 +300,7 @@ export class LayoutManager {
 
   protected onAfterLayout(
     context: StrictLayoutContext,
-    layoutResult?: LayoutResult
+    layoutResult?: LayoutResult,
   ) {
     const {
       target,

package/src/LayoutManager/LayoutStrategies/ClipPathLayout.ts

@@ -23,7 +23,7 @@ export class ClipPathLayout extends LayoutStrategy {
 
   calcLayoutResult(
     context: StrictLayoutContext,
-    objects: FabricObject[]
+    objects: FabricObject[],
   ): LayoutStrategyResult | undefined {
     const { target } = context;
     const { clipPath, group } = target;
@@ -32,7 +32,7 @@ export class ClipPathLayout extends LayoutStrategy {
     }
     // TODO: remove stroke calculation from this case
     const { width, height } = makeBoundingBoxFromPoints(
-      getObjectBounds(target, clipPath as FabricObject)
+      getObjectBounds(target, clipPath as FabricObject),
     );
     const size = new Point(width, height);
     if (clipPath.absolutePositioned) {
@@ -40,7 +40,7 @@ export class ClipPathLayout extends LayoutStrategy {
       const clipPathCenter = sendPointToPlane(
         clipPath.getRelativeCenterPoint(),
         undefined,
-        group ? group.calcTransformMatrix() : undefined
+        group ? group.calcTransformMatrix() : undefined,
       );
       return {
         center: clipPathCenter,

package/src/LayoutManager/LayoutStrategies/FixedLayout.ts

@@ -18,7 +18,7 @@ export class FixedLayout extends LayoutStrategy {
    */
   getInitialSize(
     { target }: StrictLayoutContext & InitializationLayoutContext,
-    { size }: Pick<LayoutStrategyResult, 'center' | 'size'>
+    { size }: Pick<LayoutStrategyResult, 'center' | 'size'>,
   ): Point {
     return new Point(target.width || size.x, target.height || size.y);
   }

package/src/LayoutManager/LayoutStrategies/LayoutStrategy.ts

@@ -32,7 +32,7 @@ export abstract class LayoutStrategy {
    */
   public calcLayoutResult(
     context: StrictLayoutContext,
-    objects: FabricObject[]
+    objects: FabricObject[],
   ): LayoutStrategyResult | undefined {
     if (this.shouldPerformLayout(context)) {
       return this.calcBoundingBox(objects, context);
@@ -57,7 +57,7 @@ export abstract class LayoutStrategy {
 
   getInitialSize(
     context: StrictLayoutContext & InitializationLayoutContext,
-    result: Pick<LayoutStrategyResult, 'center' | 'size'>
+    result: Pick<LayoutStrategyResult, 'center' | 'size'>,
   ) {
     return result.size;
   }
@@ -67,7 +67,7 @@ export abstract class LayoutStrategy {
    */
   calcBoundingBox(
     objects: FabricObject[],
-    context: StrictLayoutContext
+    context: StrictLayoutContext,
   ): LayoutStrategyResult | undefined {
     const { type, target } = context;
     if (type === LAYOUT_TYPE_IMPERATIVE && context.overrides) {
@@ -79,7 +79,7 @@ export abstract class LayoutStrategy {
     const { left, top, width, height } = makeBoundingBoxFromPoints(
       objects
         .map((object) => getObjectBounds(target, object))
-        .reduce<Point[]>((coords, curr) => coords.concat(curr), [])
+        .reduce<Point[]>((coords, curr) => coords.concat(curr), []),
     );
     const bboxSize = new Point(width, height);
     const bboxLeftTop = new Point(left, top);

package/src/LayoutManager/LayoutStrategies/utils.ts

@@ -15,7 +15,7 @@ import {
  */
 export const getObjectBounds = (
   destinationGroup: Group,
-  object: FabricObject
+  object: FabricObject,
 ): Point[] => {
   const {
     strokeUniform,
@@ -28,7 +28,7 @@ export const getObjectBounds = (
     currentGroup && currentGroup !== destinationGroup
       ? calcPlaneChangeMatrix(
           currentGroup.calcTransformMatrix(),
-          destinationGroup.calcTransformMatrix()
+          destinationGroup.calcTransformMatrix(),
         )
       : null;
   const objectCenter = t
@@ -40,7 +40,7 @@ export const getObjectBounds = (
       ? sendVectorToPlane(
           new Point(strokeWidth, strokeWidth),
           undefined,
-          destinationGroup.calcTransformMatrix()
+          destinationGroup.calcTransformMatrix(),
         )
       : ZERO;
   const scalingStrokeWidth =
@@ -48,7 +48,7 @@ export const getObjectBounds = (
   const sizeVector = sizeAfterTransform(
     width + scalingStrokeWidth,
     height + scalingStrokeWidth,
-    multiplyTransformMatrixArray([t, object.calcOwnMatrix()], true)
+    multiplyTransformMatrixArray([t, object.calcOwnMatrix()], true),
   )
     .add(strokeUniformVector)
     .scalarDivide(2);

package/src/LayoutManager/types.ts

@@ -99,19 +99,18 @@ export type ObjectModifiedLayoutContext = CommonLayoutContext & {
   e: ModifiedEvent;
 };
 
-export type ObjectModifyingLayoutContext =
-  | CommonLayoutContext & {
-      type: typeof LAYOUT_TYPE_OBJECT_MODIFYING;
-    } & (
-        | {
-            trigger: TModificationEvents;
-            e: BasicTransformEvent;
-          }
-        | {
-            trigger: 'changed';
-            e: ITextEvents['changed'];
-          }
-      );
+export type ObjectModifyingLayoutContext = CommonLayoutContext & {
+  type: typeof LAYOUT_TYPE_OBJECT_MODIFYING;
+} & (
+    | {
+        trigger: TModificationEvents;
+        e: BasicTransformEvent;
+      }
+    | {
+        trigger: 'changed';
+        e: ITextEvents['changed'];
+      }
+  );
 
 export type ImperativeLayoutContext = CommonLayoutContext &
   ImperativeLayoutCommonOptions & {

package/src/Observable.ts

@@ -22,12 +22,12 @@ export class Observable<EventSpec> {
    */
   on<K extends keyof EventSpec, E extends EventSpec[K]>(
     eventName: K,
-    handler: TEventCallback<E>
+    handler: TEventCallback<E>,
   ): VoidFunction;
   on(handlers: EventRegistryObject<EventSpec>): VoidFunction;
   on<K extends keyof EventSpec, E extends EventSpec[K]>(
     arg0: K | EventRegistryObject<EventSpec>,
-    handler?: TEventCallback<E>
+    handler?: TEventCallback<E>,
   ): VoidFunction {
     if (!this.__eventListeners) {
       this.__eventListeners = {} as Record<keyof EventSpec, TEventCallback[]>;
@@ -61,12 +61,12 @@ export class Observable<EventSpec> {
    */
   once<K extends keyof EventSpec, E extends EventSpec[K]>(
     eventName: K,
-    handler: TEventCallback<E>
+    handler: TEventCallback<E>,
   ): VoidFunction;
   once(handlers: EventRegistryObject<EventSpec>): VoidFunction;
   once<K extends keyof EventSpec, E extends EventSpec[K]>(
     arg0: K | EventRegistryObject<EventSpec>,
-    handler?: TEventCallback<E>
+    handler?: TEventCallback<E>,
   ): VoidFunction {
     if (typeof arg0 === 'object') {
       // one object with key/value pairs was passed
@@ -81,7 +81,7 @@ export class Observable<EventSpec> {
         function onceHandler(this: Observable<EventSpec>, ...args) {
           handler.call(this, ...args);
           disposer();
-        }
+        },
       );
       return disposer;
     } else {
@@ -97,7 +97,7 @@ export class Observable<EventSpec> {
    */
   private _removeEventListener<K extends keyof EventSpec>(
     eventName: K,
-    handler?: TEventCallback
+    handler?: TEventCallback,
   ) {
     if (!this.__eventListeners[eventName]) {
       return;
@@ -137,7 +137,7 @@ export class Observable<EventSpec> {
   off(): void;
   off<K extends keyof EventSpec>(
     arg0?: K | EventRegistryObject<EventSpec>,
-    handler?: TEventCallback
+    handler?: TEventCallback,
   ) {
     if (!this.__eventListeners) {
       return;

package/src/Pattern/Pattern.ts

@@ -1,6 +1,6 @@
 import { config } from '../config';
 import type { Abortable, TCrossOrigin, TMat2D, TSize } from '../typedefs';
-import { ifNaN } from '../util/internals';
+import { ifNaN } from '../util/internals/ifNaN';
 import { uid } from '../util/internals/uid';
 import { loadImage } from '../util/misc/objectEnlive';
 import { pick } from '../util/misc/pick';
@@ -68,7 +68,7 @@ export class Pattern {
    * @type Array
    * @default
    */
-  patternTransform: TMat2D | null = null;
+  declare patternTransform?: TMat2D;
 
   /**
    * The actual pixel source of the pattern
@@ -117,8 +117,8 @@ export class Pattern {
     return this.isImageSource()
       ? this.source.src
       : this.isCanvasSource()
-      ? this.source.toDataURL()
-      : '';
+        ? this.source.toDataURL()
+        : '';
   }
 
   /**
@@ -176,14 +176,14 @@ export class Pattern {
           ? 1 + Math.abs(patternOffsetX || 0)
           : ifNaN(
               ((patternSource as HTMLImageElement).width as number) / width,
-              0
+              0,
             ),
       patternHeight =
         repeat === 'repeat-x' || repeat === 'no-repeat'
           ? 1 + Math.abs(patternOffsetY || 0)
           : ifNaN(
               ((patternSource as HTMLImageElement).height as number) / height,
-              0
+              0,
             );
 
     return [
@@ -200,14 +200,24 @@ export class Pattern {
   /* _TO_SVG_END_ */
 
   static async fromObject(
-    { type, source, ...serialized }: SerializedPatternOptions,
-    options?: Abortable
+    {
+      type,
+      source,
+      patternTransform,
+      ...otherOptions
+    }: SerializedPatternOptions,
+    options?: Abortable,
   ): Promise<Pattern> {
     const img = await loadImage(source, {
       ...options,
-      crossOrigin: serialized.crossOrigin,
+      crossOrigin: otherOptions.crossOrigin,
+    });
+    return new this({
+      ...otherOptions,
+      patternTransform:
+        patternTransform && (patternTransform.slice(0) as TMat2D),
+      source: img,
     });
-    return new this({ ...serialized, source: img });
   }
 }
 

package/src/Point.ts

@@ -234,7 +234,7 @@ export class Point implements XY {
     t = Math.max(Math.min(1, t), 0);
     return new Point(
       this.x + (that.x - this.x) * t,
-      this.y + (that.y - this.y) * t
+      this.y + (that.y - this.y) * t,
     );
   }
 
@@ -364,7 +364,7 @@ export class Point implements XY {
     const p = this.subtract(origin);
     const rotated = new Point(
       p.x * cosinus - p.y * sinus,
-      p.x * sinus + p.y * cosinus
+      p.x * sinus + p.y * cosinus,
     );
     return rotated.add(origin);
   }
@@ -380,7 +380,7 @@ export class Point implements XY {
   transform(t: TMat2D, ignoreOffset = false): Point {
     return new Point(
       t[0] * this.x + t[2] * this.y + (ignoreOffset ? 0 : t[4]),
-      t[1] * this.x + t[3] * this.y + (ignoreOffset ? 0 : t[5])
+      t[1] * this.x + t[3] * this.y + (ignoreOffset ? 0 : t[5]),
     );
   }
 }

package/src/Shadow.ts

@@ -37,7 +37,7 @@ const reOffsetsAndBlur = new RegExp(
     shadowOffsetRegex +
     '(' +
     reNum +
-    '?(?:px)?)?(?:\\s?|$)(?:$|\\s)'
+    '?(?:px)?)?(?:\\s?|$)(?:$|\\s)',
 );
 
 export const shadowDefaultValues: Partial<TClassProperties<Shadow>> = {
@@ -166,7 +166,7 @@ export class Shadow {
   toSVG(object: FabricObject) {
     const offset = rotateVector(
         new Point(this.offsetX, this.offsetY),
-        degreesToRadians(-object.angle)
+        degreesToRadians(-object.angle),
       ),
       BLUR_BOX = 20,
       color = new Color(this.color);
@@ -179,14 +179,14 @@ export class Shadow {
       fBoxX =
         toFixed(
           (Math.abs(offset.x) + this.blur) / object.width,
-          config.NUM_FRACTION_DIGITS
+          config.NUM_FRACTION_DIGITS,
         ) *
           100 +
         BLUR_BOX;
       fBoxY =
         toFixed(
           (Math.abs(offset.y) + this.blur) / object.height,
-          config.NUM_FRACTION_DIGITS
+          config.NUM_FRACTION_DIGITS,
         ) *
           100 +
         BLUR_BOX;
@@ -204,13 +204,13 @@ export class Shadow {
       100 + 2 * fBoxX
     }%" >\n\t<feGaussianBlur in="SourceAlpha" stdDeviation="${toFixed(
       this.blur ? this.blur / 2 : 0,
-      config.NUM_FRACTION_DIGITS
+      config.NUM_FRACTION_DIGITS,
     )}"></feGaussianBlur>\n\t<feOffset dx="${toFixed(
       offset.x,
-      config.NUM_FRACTION_DIGITS
+      config.NUM_FRACTION_DIGITS,
     )}" dy="${toFixed(
       offset.y,
-      config.NUM_FRACTION_DIGITS
+      config.NUM_FRACTION_DIGITS,
     )}" result="oBlur" ></feOffset>\n\t<feFlood flood-color="${color.toRgb()}" flood-opacity="${color.getAlpha()}"/>\n\t<feComposite in2="oBlur" operator="in" />\n\t<feMerge>\n\t\t<feMergeNode></feMergeNode>\n\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n\t</feMerge>\n</filter>\n`;
   }
 

package/src/brushes/CircleBrush.ts

@@ -3,7 +3,7 @@ import type { Point } from '../Point';
 import { Shadow } from '../Shadow';
 import { Circle } from '../shapes/Circle';
 import { Group } from '../shapes/Group';
-import { getRandomInt } from '../util/internals';
+import { getRandomInt } from '../util/internals/getRandomInt';
 import type { Canvas } from '../canvas/Canvas';
 import { BaseBrush } from './BaseBrush';
 import type { CircleBrushPoint } from './typedefs';

package/src/brushes/PatternBrush.ts

@@ -27,7 +27,7 @@ export class PatternBrush extends PencilBrush {
         dotWidth / 2,
         0,
         Math.PI * 2,
-        false
+        false,
       );
       patternCtx.closePath();
       patternCtx.fill();

package/src/brushes/PencilBrush.ts

@@ -107,7 +107,7 @@ export class PencilBrush extends BaseBrush {
         this.oldEnd = PencilBrush.drawSegment(
           ctx,
           points[length - 2],
-          points[length - 1]
+          points[length - 1],
         );
         ctx.stroke();
         ctx.restore();

package/src/brushes/SprayBrush.ts

@@ -2,7 +2,7 @@ import type { Point } from '../Point';
 import { Group } from '../shapes/Group';
 import { Shadow } from '../Shadow';
 import { Rect } from '../shapes/Rect';
-import { getRandomInt } from '../util/internals';
+import { getRandomInt } from '../util/internals/getRandomInt';
 import type { Canvas } from '../canvas/Canvas';
 import { BaseBrush } from './BaseBrush';
 import type { SprayBrushPoint } from './typedefs';
@@ -143,7 +143,7 @@ export class SprayBrush extends BaseBrush {
         objectCaching: true,
         subTargetCheck: false,
         interactive: false,
-      }
+      },
     );
     this.shadow && group.set('shadow', new Shadow(this.shadow));
     this.canvas.fire('before:path:created', { path: group });
@@ -201,7 +201,7 @@ export class SprayBrush extends BaseBrush {
           ? getRandomInt(
               // bottom clamp width to 1
               Math.max(1, this.dotWidth - this.dotWidthVariance),
-              this.dotWidth + this.dotWidthVariance
+              this.dotWidth + this.dotWidthVariance,
             )
           : this.dotWidth,
         opacity: this.randomOpacity ? getRandomInt(0, 100) / 100 : 1,