fabric 6.2.0 → 6.3.0

package/src/shapes/Text/Text.ts

@@ -124,7 +124,7 @@ export interface TextProps extends FabricObjectProps, UniqueTextProps {
 export class FabricText<
     Props extends TOptions<TextProps> = Partial<TextProps>,
     SProps extends SerializedTextProps = SerializedTextProps,
-    EventSpec extends ObjectEvents = ObjectEvents
+    EventSpec extends ObjectEvents = ObjectEvents,
   >
   extends StyledText<Props, SProps, EventSpec>
   implements UniqueTextProps
@@ -541,7 +541,7 @@ export class FabricText<
    * @return Number
    */
   missingNewlineOffset(lineIndex: number, skipWrapping?: boolean): 0 | 1;
-  missingNewlineOffset(lineIndex: number): 1 {
+  missingNewlineOffset(_lineIndex: number): 1 {
     return 1;
   }
 
@@ -643,7 +643,7 @@ export class FabricText<
   _setTextStyles(
     ctx: CanvasRenderingContext2D,
     charStyle?: any,
-    forMeasuring?: boolean
+    forMeasuring?: boolean,
   ) {
     ctx.textBaseline = 'alphabetic';
     if (this.path) {
@@ -695,7 +695,7 @@ export class FabricText<
     line: string[],
     left: number,
     top: number,
-    lineIndex: number
+    lineIndex: number,
   ) {
     this._renderChars(method, ctx, line, left, top, lineIndex);
   }
@@ -743,7 +743,7 @@ export class FabricText<
               -charBox.width / 2,
               (-heightOfLine / this.lineHeight) * (1 - this._fontSizeFraction),
               charBox.width,
-              heightOfLine / this.lineHeight
+              heightOfLine / this.lineHeight,
             );
           ctx.restore();
         } else if (currentColor !== lastColor) {
@@ -757,7 +757,7 @@ export class FabricText<
               drawStart,
               lineTopOffset,
               boxWidth,
-              heightOfLine / this.lineHeight
+              heightOfLine / this.lineHeight,
             );
           boxStart = charBox.left;
           boxWidth = charBox.width;
@@ -776,7 +776,7 @@ export class FabricText<
           drawStart,
           lineTopOffset,
           boxWidth,
-          heightOfLine / this.lineHeight
+          heightOfLine / this.lineHeight,
         );
       }
       lineTopOffset += heightOfLine;
@@ -801,7 +801,7 @@ export class FabricText<
     _char: string,
     charStyle: CompleteTextStyleDeclaration,
     previousChar: string | undefined,
-    prevCharStyle: CompleteTextStyleDeclaration | Record<string, never>
+    prevCharStyle: CompleteTextStyleDeclaration | Record<string, never>,
   ) {
     const fontCache = cache.getFontCache(charStyle),
       fontDeclaration = this._getFontDeclaration(charStyle),
@@ -983,7 +983,7 @@ export class FabricText<
     lineIndex: number,
     charIndex: number,
     prevGrapheme?: string,
-    skipLeft?: boolean
+    skipLeft?: boolean,
   ): GraphemeBBox {
     const style = this.getCompleteStyleDeclaration(lineIndex, charIndex),
       prevStyle = prevGrapheme
@@ -1072,7 +1072,7 @@ export class FabricText<
    */
   _renderTextCommon(
     ctx: CanvasRenderingContext2D,
-    method: 'fillText' | 'strokeText'
+    method: 'fillText' | 'strokeText',
   ) {
     ctx.save();
     let lineHeights = 0;
@@ -1088,7 +1088,7 @@ export class FabricText<
         this._textLines[i],
         left + leftOffset,
         top + lineHeights + maxHeight,
-        i
+        i,
       );
       lineHeights += heightOfLine;
     }
@@ -1143,7 +1143,7 @@ export class FabricText<
     line: Array<any>,
     left: number,
     top: number,
-    lineIndex: number
+    lineIndex: number,
   ) {
     const lineHeight = this.getHeightOfLine(lineIndex),
       isJustify = this.textAlign.includes(JUSTIFY),
@@ -1215,7 +1215,7 @@ export class FabricText<
             i,
             charsToRender,
             -boxWidth / 2,
-            0
+            0,
           );
           ctx.restore();
         } else {
@@ -1227,7 +1227,7 @@ export class FabricText<
             i,
             charsToRender,
             drawingLeft,
-            top
+            top,
           );
         }
         charsToRender = '';
@@ -1274,7 +1274,7 @@ export class FabricText<
   handleFiller<T extends 'fill' | 'stroke'>(
     ctx: CanvasRenderingContext2D,
     property: `${T}Style`,
-    filler: TFiller | string
+    filler: TFiller | string,
   ): { offsetX: number; offsetY: number } {
     let offsetX: number, offsetY: number;
     if (isFiller(filler)) {
@@ -1316,7 +1316,7 @@ export class FabricText<
     {
       stroke,
       strokeWidth,
-    }: Pick<CompleteTextStyleDeclaration, 'stroke' | 'strokeWidth'>
+    }: Pick<CompleteTextStyleDeclaration, 'stroke' | 'strokeWidth'>,
   ) {
     ctx.lineWidth = strokeWidth;
     ctx.lineCap = this.strokeLineCap;
@@ -1355,7 +1355,7 @@ export class FabricText<
     charIndex: number,
     _char: string,
     left: number,
-    top: number
+    top: number,
   ) {
     const decl = this._getStyleDeclaration(lineIndex, charIndex),
       fullDecl = this.getCompleteStyleDeclaration(lineIndex, charIndex),
@@ -1382,7 +1382,7 @@ export class FabricText<
       ctx.fillText(
         _char,
         left - fillOffsets.offsetX,
-        top - fillOffsets.offsetY
+        top - fillOffsets.offsetY,
       );
     }
 
@@ -1391,7 +1391,7 @@ export class FabricText<
       ctx.strokeText(
         _char,
         left - strokeOffsets.offsetX,
-        top - strokeOffsets.offsetY
+        top - strokeOffsets.offsetY,
       );
     }
 
@@ -1429,13 +1429,13 @@ export class FabricText<
     schema: {
       size: number;
       baseline: number;
-    }
+    },
   ) {
     const loc = this.get2DCursorLocation(start, true),
       fontSize = this.getValueOfPropertyAt(
         loc.lineIndex,
         loc.charIndex,
-        'fontSize'
+        'fontSize',
       ),
       dy = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'deltaY'),
       style = {
@@ -1537,7 +1537,7 @@ export class FabricText<
   getValueOfPropertyAt<T extends StylePropertiesType>(
     lineIndex: number,
     charIndex: number,
-    property: T
+    property: T,
   ): this[T] {
     const charStyle = this._getStyleDeclaration(lineIndex, charIndex);
     return (charStyle[property] ?? this[property]) as this[T];
@@ -1549,7 +1549,7 @@ export class FabricText<
    */
   _renderTextDecoration(
     ctx: CanvasRenderingContext2D,
-    type: 'underline' | 'linethrough' | 'overline'
+    type: 'underline' | 'linethrough' | 'overline',
   ) {
     if (!this[type] && !this.styleHas(type)) {
       return;
@@ -1594,7 +1594,7 @@ export class FabricText<
             -charBox.kernedWidth / 2,
             offsetY * currentSize + currentDy,
             charBox.kernedWidth,
-            this.fontSize / 15
+            this.fontSize / 15,
           );
           ctx.restore();
         } else if (
@@ -1615,7 +1615,7 @@ export class FabricText<
               drawStart,
               top + offsetY * size + dy,
               boxWidth,
-              this.fontSize / 15
+              this.fontSize / 15,
             );
           }
           boxStart = charBox.left;
@@ -1639,7 +1639,7 @@ export class FabricText<
           drawStart,
           top + offsetY * size + dy,
           boxWidth - charSpacing,
-          this.fontSize / 15
+          this.fontSize / 15,
         );
       topOffset += heightOfLine;
     }
@@ -1665,7 +1665,7 @@ export class FabricText<
         'fontFamily' | 'fontStyle' | 'fontWeight' | 'fontSize'
       >
     > = {},
-    forMeasuring?: boolean
+    forMeasuring?: boolean,
   ): string {
     const parsedFontFamily =
       fontFamily.includes("'") ||
@@ -1746,7 +1746,7 @@ export class FabricText<
    */
   toObject<
     T extends Omit<Props & TClassProperties<this>, keyof SProps>,
-    K extends keyof T = never
+    K extends keyof T = never,
   >(propertiesToInclude: K[] = []): Pick<T, K> & SProps {
     return {
       ...super.toObject([...additionalProps, ...propertiesToInclude] as K[]),
@@ -1817,7 +1817,7 @@ export class FabricText<
     'font-size',
     'letter-spacing',
     'text-decoration',
-    'text-anchor'
+    'text-anchor',
   );
 
   /**
@@ -1830,12 +1830,12 @@ export class FabricText<
   static async fromElement(
     element: HTMLElement,
     options: Abortable,
-    cssRules?: CSSRules
+    cssRules?: CSSRules,
   ) {
     const parsedAttributes = parseAttributes(
       element,
       FabricText.ATTRIBUTE_NAMES,
-      cssRules
+      cssRules,
     );
 
     const {
@@ -1906,7 +1906,7 @@ export class FabricText<
    */
   static fromObject<
     T extends TOptions<SerializedTextProps>,
-    S extends FabricText
+    S extends FabricText,
   >(object: T) {
     return this._fromObject<S>(
       {
@@ -1915,7 +1915,7 @@ export class FabricText<
       },
       {
         extraParam: 'text',
-      }
+      },
     );
   }
 }

package/src/shapes/Text/TextSVGExportMixin.spec.ts

@@ -22,7 +22,7 @@ describe('TextSvgExport', () => {
     const myText = new FabricText('text', { fill: 'rgba(100, 0, 100, 0.5)' });
     const svgStyles = myText.getSvgStyles();
     expect(svgStyles.includes('fill: rgb(100,0,100); fill-opacity: 0.5;')).toBe(
-      true
+      true,
     );
     expect(svgStyles.includes('stroke="none"')).toBe(false);
   });

package/src/shapes/Text/TextSVGExportMixin.ts

@@ -18,7 +18,7 @@ function createSVGInlineRect(
   left: number,
   top: number,
   width: number,
-  height: number
+  height: number,
 ) {
   return `\t\t${createSVGRect(color, { left, top, width, height })}\n`;
 }
@@ -54,7 +54,7 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
     }: {
       textSpans: string[];
       textBgRects: string[];
-    }
+    },
   ) {
     const noShadow = true,
       textDecoration = this.getSvgTextDecoration(this);
@@ -88,7 +88,7 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
   private _getSVGTextAndBg(
     this: TextSVGExportMixin & FabricText,
     textTopOffset: number,
-    textLeftOffset: number
+    textLeftOffset: number,
   ) {
     const textSpans: string[] = [],
       textBgRects: string[] = [];
@@ -103,8 +103,8 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
           -this.width / 2,
           -this.height / 2,
           this.width,
-          this.height
-        )
+          this.height,
+        ),
       );
 
     // text and text-background
@@ -118,14 +118,14 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
           textBgRects,
           i,
           textLeftOffset + lineOffset,
-          height
+          height,
         );
       }
       this._setSVGTextLineText(
         textSpans,
         i,
         textLeftOffset + lineOffset,
-        height
+        height,
       );
       height += this.getHeightOfLine(i);
     }
@@ -141,11 +141,11 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
     char: string,
     styleDecl: TextStyleDeclaration,
     left: number,
-    top: number
+    top: number,
   ) {
     const styleProps = this.getSvgSpanStyles(
         styleDecl,
-        char !== char.trim() || !!char.match(multipleSpacesRegex)
+        char !== char.trim() || !!char.match(multipleSpacesRegex),
       ),
       fillStyles = styleProps ? `style="${styleProps}"` : '',
       dy = styleDecl.deltaY,
@@ -153,10 +153,10 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
 
     return `<tspan x="${toFixed(
       left,
-      config.NUM_FRACTION_DIGITS
+      config.NUM_FRACTION_DIGITS,
     )}" y="${toFixed(
       top,
-      config.NUM_FRACTION_DIGITS
+      config.NUM_FRACTION_DIGITS,
     )}" ${dySpan}${fillStyles}>${escapeXml(char)}</tspan>`;
   }
 
@@ -165,7 +165,7 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
     textSpans: string[],
     lineIndex: number,
     textLeftOffset: number,
-    textTopOffset: number
+    textTopOffset: number,
   ) {
     const lineHeight = this.getHeightOfLine(lineIndex),
       isJustify = this.textAlign.includes(JUSTIFY),
@@ -209,8 +209,8 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
             charsToRender,
             style,
             textLeftOffset,
-            textTopOffset
-          )
+            textTopOffset,
+          ),
         );
         charsToRender = '';
         actualStyle = nextStyle;
@@ -229,7 +229,7 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
     textBgRects: (string | number)[],
     i: number,
     leftOffset: number,
-    textTopOffset: number
+    textTopOffset: number,
   ) {
     const line = this._textLines[i],
       heightOfLine = this.getHeightOfLine(i) / this.lineHeight;
@@ -248,8 +248,8 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
               leftOffset + boxStart,
               textTopOffset,
               boxWidth,
-              heightOfLine
-            )
+              heightOfLine,
+            ),
           );
         boxStart = left;
         boxWidth = width;
@@ -265,8 +265,8 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
           leftOffset + boxStart,
           textTopOffset,
           boxWidth,
-          heightOfLine
-        )
+          heightOfLine,
+        ),
       );
   }
 
@@ -275,7 +275,7 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
    */
   _getSVGLineTopOffset(
     this: TextSVGExportMixin & FabricText,
-    lineIndex: number
+    lineIndex: number,
   ) {
     let lineTopOffset = 0,
       j;
@@ -309,7 +309,7 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
   getSvgSpanStyles(
     this: TextSVGExportMixin & FabricText,
     style: TextStyleDeclaration,
-    useWhiteSpace?: boolean
+    useWhiteSpace?: boolean,
   ) {
     const {
       fontFamily,
@@ -351,7 +351,7 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
    */
   getSvgTextDecoration(
     this: TextSVGExportMixin & FabricText,
-    style: TextStyleDeclaration
+    style: TextStyleDeclaration,
   ) {
     return (['overline', 'underline', 'line-through'] as const)
       .filter(
@@ -361,7 +361,7 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
               | 'overline'
               | 'underline'
               | 'linethrough'
-          ]
+          ],
       )
       .join(' ');
   }

package/src/shapes/Textbox.ts

@@ -54,7 +54,7 @@ export interface TextboxProps extends ITextProps, UniqueTextboxProps {}
 export class Textbox<
     Props extends TOptions<TextboxProps> = Partial<TextboxProps>,
     SProps extends SerializedTextboxProps = SerializedTextboxProps,
-    EventSpec extends ITextEvents = ITextEvents
+    EventSpec extends ITextEvents = ITextEvents,
   >
   extends IText<Props, SProps, EventSpec>
   implements UniqueTextboxProps
@@ -250,7 +250,7 @@ export class Textbox<
    */
   _getStyleDeclaration(
     lineIndex: number,
-    charIndex: number
+    charIndex: number,
   ): TextStyleDeclaration {
     if (this._styleMap && !this.isWrapping) {
       const map = this._styleMap[lineIndex];
@@ -272,7 +272,7 @@ export class Textbox<
   protected _setStyleDeclaration(
     lineIndex: number,
     charIndex: number,
-    style: object
+    style: object,
   ) {
     const map = this._styleMap[lineIndex];
     super._setStyleDeclaration(map.line, map.offset + charIndex, style);
@@ -396,7 +396,7 @@ export class Textbox<
         lineIndex,
         i + charOffset,
         prevGrapheme,
-        skipLeft
+        skipLeft,
       );
       width += box.kernedWidth;
       prevGrapheme = word[i];
@@ -429,7 +429,7 @@ export class Textbox<
     lineIndex: number,
     desiredWidth: number,
     { largestWordWidth, wordsData }: GraphemeData,
-    reservedSpace = 0
+    reservedSpace = 0,
   ): string[][] {
     const additionalSpace = this._getWidthOfCharSpacing(),
       splitByGrapheme = this.splitByGrapheme,
@@ -448,7 +448,7 @@ export class Textbox<
     const maxWidth = Math.max(
       desiredWidth,
       largestWordWidth,
-      this.dynamicMinWidth
+      this.dynamicMinWidth,
     );
     // layout words
     const data = wordsData[lineIndex];
@@ -570,7 +570,7 @@ export class Textbox<
    */
   toObject<
     T extends Omit<Props & TClassProperties<this>, keyof SProps>,
-    K extends keyof T = never
+    K extends keyof T = never,
   >(propertiesToInclude: K[] = []): Pick<T, K> & SProps {
     return super.toObject<T, K>([
       'minWidth',

package/src/shapes/Triangle.ts

@@ -12,7 +12,7 @@ export const triangleDefaultValues: Partial<TClassProperties<Triangle>> = {
 export class Triangle<
     Props extends TOptions<FabricObjectProps> = Partial<FabricObjectProps>,
     SProps extends SerializedObjectProps = SerializedObjectProps,
-    EventSpec extends ObjectEvents = ObjectEvents
+    EventSpec extends ObjectEvents = ObjectEvents,
   >
   extends FabricObject<Props, SProps, EventSpec>
   implements FabricObjectProps

package/src/typedefs.ts

@@ -11,7 +11,7 @@ interface NominalTag<T> {
 type Nominal<Type, Tag> = NominalTag<Tag> & Type;
 
 type TNonFunctionPropertyNames<T> = {
-  // eslint-disable-next-line @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   [K in keyof T]: T[K] extends Function ? never : K;
 }[keyof T];
 export type TClassProperties<T> = Pick<T, TNonFunctionPropertyNames<T>>;
@@ -63,7 +63,7 @@ export type TMat2D = [
   c: number,
   d: number,
   e: number,
-  f: number
+  f: number,
 ];
 
 /**
@@ -98,7 +98,7 @@ export type TCacheCanvasDimensions = {
 export type TRectBounds = [min: XY, max: XY];
 
 export type TToCanvasElementOptions<
-  T extends BaseFabricObject = BaseFabricObject
+  T extends BaseFabricObject = BaseFabricObject,
 > = {
   left?: number;
   top?: number;

package/src/util/animation/AnimationBase.ts

@@ -13,7 +13,7 @@ import type {
 const defaultAbort = () => false;
 
 export abstract class AnimationBase<
-  T extends number | number[] = number | number[]
+  T extends number | number[] = number | number[],
 > {
   declare readonly startValue: T;
   declare readonly endValue: T;
@@ -142,7 +142,7 @@ export abstract class AnimationBase<
       this._onComplete(
         this.endValue,
         this.valueProgress,
-        this.durationProgress
+        this.durationProgress,
       );
       this.unregister();
     } else {

package/src/util/animation/AnimationRegistry.ts

@@ -36,7 +36,7 @@ class AnimationRegistry extends Array<AnimationBase> {
       (animation) =>
         animation.target === canvas ||
         (typeof animation.target === 'object' &&
-          (animation.target as FabricObject)?.canvas === canvas)
+          (animation.target as FabricObject)?.canvas === canvas),
     );
     animations.forEach((animation) => animation.abort());
     return animations;

package/src/util/animation/ArrayAnimation.ts

@@ -15,12 +15,12 @@ export class ArrayAnimation extends AnimationBase<number[]> {
   }
   protected calculate(timeElapsed: number) {
     const values = this.startValue.map((value, i) =>
-      this.easing(timeElapsed, value, this.byValue[i], this.duration, i)
+      this.easing(timeElapsed, value, this.byValue[i], this.duration, i),
     );
     return {
       value: values,
       valueProgress: Math.abs(
-        (values[0] - this.startValue[0]) / this.byValue[0]
+        (values[0] - this.startValue[0]) / this.byValue[0],
       ),
     };
   }

package/src/util/animation/ColorAnimation.ts

@@ -13,14 +13,14 @@ const defaultColorEasing: TEasingFunction = (
   timeElapsed,
   startValue,
   byValue,
-  duration
+  duration,
 ) => {
   const durationProgress = 1 - Math.cos((timeElapsed / duration) * halfPI);
   return startValue + byValue * durationProgress;
 };
 
 const wrapColorCallback = <R>(
-  callback?: TOnAnimationChangeCallback<string, R>
+  callback?: TOnAnimationChangeCallback<string, R>,
 ) =>
   callback &&
   ((rgba: TRGBAColorSource, valueProgress: number, durationProgress: number) =>
@@ -42,7 +42,7 @@ export class ColorAnimation extends AnimationBase<TRGBAColorSource> {
       ...options,
       startValue: startColor,
       byValue: endColor.map(
-        (value, i) => value - startColor[i]
+        (value, i) => value - startColor[i],
       ) as TRGBAColorSource,
       easing,
       onChange: wrapColorCallback(onChange),
@@ -52,7 +52,7 @@ export class ColorAnimation extends AnimationBase<TRGBAColorSource> {
   }
   protected calculate(timeElapsed: number) {
     const [r, g, b, a] = this.startValue.map((value, i) =>
-      this.easing(timeElapsed, value, this.byValue[i], this.duration, i)
+      this.easing(timeElapsed, value, this.byValue[i], this.duration, i),
     ) as TRGBAColorSource;
     const value = [
       ...[r, g, b].map(Math.round),
@@ -66,7 +66,7 @@ export class ColorAnimation extends AnimationBase<TRGBAColorSource> {
           .map((p, i) =>
             this.byValue[i] !== 0
               ? Math.abs((p - this.startValue[i]) / this.byValue[i])
-              : 0
+              : 0,
           )
           .find((p) => p !== 0) || 0,
     };

package/src/util/animation/ValueAnimation.ts

@@ -19,7 +19,7 @@ export class ValueAnimation extends AnimationBase<number> {
       timeElapsed,
       this.startValue,
       this.byValue,
-      this.duration
+      this.duration,
     );
     return {
       value,

package/src/util/animation/animate.ts

@@ -12,11 +12,11 @@ export type TAnimation<T extends number | number[] | TColorArg> =
   T extends TColorArg
     ? ColorAnimation
     : T extends number[]
-    ? ArrayAnimation
-    : ValueAnimation;
+      ? ArrayAnimation
+      : ValueAnimation;
 
 const isArrayAnimation = (
-  options: ArrayAnimationOptions | ValueAnimationOptions
+  options: ArrayAnimationOptions | ValueAnimationOptions,
 ): options is ArrayAnimationOptions => {
   return Array.isArray(options.startValue) || Array.isArray(options.endValue);
 };
@@ -50,13 +50,13 @@ const isArrayAnimation = (
 export function animate(options: ArrayAnimationOptions): ArrayAnimation;
 export function animate(options: ValueAnimationOptions): ValueAnimation;
 export function animate<
-  T extends ValueAnimationOptions | ArrayAnimationOptions
+  T extends ValueAnimationOptions | ArrayAnimationOptions,
 >(
-  options: T
+  options: T,
 ): T extends ArrayAnimationOptions ? ArrayAnimation : ValueAnimation;
 export function animate<
   T extends ValueAnimationOptions | ArrayAnimationOptions,
-  R extends T extends ArrayAnimationOptions ? ArrayAnimation : ValueAnimation
+  R extends T extends ArrayAnimationOptions ? ArrayAnimation : ValueAnimation,
 >(options: T): R {
   const animation = (
     isArrayAnimation(options)