fabric 6.2.0 → 6.3.0

package/src/gradient/Gradient.ts

@@ -28,7 +28,7 @@ import { isPath } from '../util/typeAssertions';
  */
 export class Gradient<
   S,
-  T extends GradientType = S extends GradientType ? S : 'linear'
+  T extends GradientType = S extends GradientType ? S : 'linear',
 > {
   /**
    * Horizontal offset for aligning gradients coming from SVG when outside pathgroups
@@ -99,33 +99,32 @@ export class Gradient<
 
   static type = 'Gradient';
 
-  constructor({
-    type = 'linear' as T,
-    gradientUnits = 'pixels',
-    coords = {},
-    colorStops = [],
-    offsetX = 0,
-    offsetY = 0,
-    gradientTransform,
-    id,
-  }: GradientOptions<T>) {
-    this.id = id ? `${id}_${uid()}` : uid();
-    this.type = type;
-    this.gradientUnits = gradientUnits;
-    this.gradientTransform = gradientTransform;
-    this.offsetX = offsetX;
-    this.offsetY = offsetY;
-    this.coords = {
-      ...(this.type === 'radial' ? radialDefaultCoords : linearDefaultCoords),
-      ...coords,
-    } as GradientCoords<T>;
-    this.colorStops = colorStops.slice();
+  constructor(options: GradientOptions<T>) {
+    const {
+      type = 'linear' as T,
+      gradientUnits = 'pixels',
+      coords = {},
+      colorStops = [],
+      offsetX = 0,
+      offsetY = 0,
+      gradientTransform,
+      id,
+    } = options || {};
+    Object.assign(this, {
+      type,
+      gradientUnits,
+      coords: {
+        ...(type === 'radial' ? radialDefaultCoords : linearDefaultCoords),
+        ...coords,
+      },
+      colorStops,
+      offsetX,
+      offsetY,
+      gradientTransform,
+      id: id ? `${id}_${uid()}` : uid(),
+    });
   }
 
-  // isType<S extends GradientType>(type: S): this is Gradient<S> {
-  //   return (this.type as GradientType) === type;
-  // }
-
   /**
    * Adds another colorStop
    * @param {Record<string, string>} colorStop Object with offset and color
@@ -152,8 +151,8 @@ export class Gradient<
     return {
       ...pick(this, propertiesToInclude as (keyof this)[]),
       type: this.type,
-      coords: this.coords,
-      colorStops: this.colorStops,
+      coords: { ...this.coords },
+      colorStops: this.colorStops.map((colorStop) => ({ ...colorStop })),
       offsetX: this.offsetX,
       offsetY: this.offsetY,
       gradientUnits: this.gradientUnits,
@@ -171,7 +170,9 @@ export class Gradient<
    */
   toSVG(
     object: FabricObject,
-    { additionalTransform: preTransform }: { additionalTransform?: string } = {}
+    {
+      additionalTransform: preTransform,
+    }: { additionalTransform?: string } = {},
   ) {
     const markup = [],
       transform = (
@@ -229,7 +230,7 @@ export class Gradient<
         x2,
         '" y2="',
         y2,
-        '">\n'
+        '">\n',
       );
     } else if (this.type === 'radial') {
       const { x1, y1, x2, y2, r1, r2 } = this
@@ -249,7 +250,7 @@ export class Gradient<
         needsSwap ? x2 : x1,
         '" fy="',
         needsSwap ? y2 : y1,
-        '">\n'
+        '">\n',
       );
       if (needsSwap) {
         // svg goes from internal to external radius. if radius are inverted, swap color stops.
@@ -277,13 +278,13 @@ export class Gradient<
         '" style="stop-color:',
         color,
         typeof opacity !== 'undefined' ? ';stop-opacity: ' + opacity : ';',
-        '"/>\n'
+        '"/>\n',
       );
     });
 
     markup.push(
       this.type === 'linear' ? '</linearGradient>' : '</radialGradient>',
-      '\n'
+      '\n',
     );
 
     return markup.join('');
@@ -296,25 +297,18 @@ export class Gradient<
    * @return {CanvasGradient}
    */
   toLive(ctx: CanvasRenderingContext2D): CanvasGradient {
-    const coords = this.coords as GradientCoords<'radial'>;
+    const { x1, y1, x2, y2, r1, r2 } = this.coords as GradientCoords<'radial'>;
     const gradient =
       this.type === 'linear'
-        ? ctx.createLinearGradient(coords.x1, coords.y1, coords.x2, coords.y2)
-        : ctx.createRadialGradient(
-            coords.x1,
-            coords.y1,
-            coords.r1,
-            coords.x2,
-            coords.y2,
-            coords.r2
-          );
+        ? ctx.createLinearGradient(x1, y1, x2, y2)
+        : ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
 
     this.colorStops.forEach(({ color, opacity, offset }) => {
       gradient.addColorStop(
         offset,
         typeof opacity !== 'undefined'
           ? new Color(color).setAlpha(opacity).toRgba()
-          : color
+          : color,
       );
     });
 
@@ -322,15 +316,22 @@ export class Gradient<
   }
 
   static async fromObject(
-    options: GradientOptions<'linear'>
+    options: GradientOptions<'linear'>,
   ): Promise<Gradient<'radial'>>;
   static async fromObject(
-    options: GradientOptions<'radial'>
+    options: GradientOptions<'radial'>,
   ): Promise<Gradient<'radial'>>;
   static async fromObject(
-    options: GradientOptions<'linear'> | GradientOptions<'radial'>
+    options: GradientOptions<'linear'> | GradientOptions<'radial'>,
   ) {
-    return new this(options);
+    const { colorStops, gradientTransform } = options;
+    return new this({
+      ...options,
+      colorStops: colorStops
+        ? colorStops.map((colorStop) => ({ ...colorStop }))
+        : undefined,
+      gradientTransform: gradientTransform ? [...gradientTransform] : undefined,
+    });
   }
 
   /* _FROM_SVG_START_ */
@@ -381,7 +382,7 @@ export class Gradient<
   static fromElement(
     el: SVGGradientElement,
     instance: FabricObject,
-    svgOptions: SVGOptions
+    svgOptions: SVGOptions,
   ): Gradient<GradientType> {
     const gradientUnits = parseGradientUnits(el);
     const center = instance._findCenterFromElement();
@@ -395,7 +396,7 @@ export class Gradient<
       colorStops: parseColorStops(el, svgOptions.opacity),
       gradientUnits,
       gradientTransform: parseTransformAttribute(
-        el.getAttribute('gradientTransform') || ''
+        el.getAttribute('gradientTransform') || '',
       ),
       ...(gradientUnits === 'pixels'
         ? {

package/src/gradient/parser/parseColorStops.ts

@@ -1,6 +1,6 @@
 import { Color } from '../../color/Color';
 import { parsePercent } from '../../parser/percent';
-import { ifNaN } from '../../util/internals';
+import { ifNaN } from '../../util/internals/ifNaN';
 import type { ColorStop } from '../typedefs';
 
 const RE_KEY_VALUE_PAIRS = /\s*;\s*/;
@@ -29,7 +29,7 @@ function parseColorStop(el: SVGStopElement, multiplier: number) {
   }
 
   const color = new Color(
-    colorValue || el.getAttribute('stop-color') || 'rgb(0,0,0)'
+    colorValue || el.getAttribute('stop-color') || 'rgb(0,0,0)',
   );
 
   return {
@@ -44,7 +44,7 @@ function parseColorStop(el: SVGStopElement, multiplier: number) {
 
 export function parseColorStops(
   el: SVGGradientElement,
-  opacityAttr: string | null
+  opacityAttr: string | null,
 ) {
   const colorStops: ColorStop[] = [],
     colorStopEls = el.getElementsByTagName('stop'),

package/src/gradient/parser/parseCoords.ts

@@ -5,37 +5,40 @@ import { parseGradientUnits, parseType } from './misc';
 
 function convertPercentUnitsToValues<
   T extends GradientType,
-  K extends keyof GradientCoords<T>
+  K extends keyof GradientCoords<T>,
 >(
   valuesToConvert: Record<K, string | number>,
-  { width, height, gradientUnits }: TSize & { gradientUnits: GradientUnits }
+  { width, height, gradientUnits }: TSize & { gradientUnits: GradientUnits },
 ) {
   let finalValue;
-  return (Object.keys(valuesToConvert) as K[]).reduce((acc, prop) => {
-    const propValue = valuesToConvert[prop];
-    if (propValue === 'Infinity') {
-      finalValue = 1;
-    } else if (propValue === '-Infinity') {
-      finalValue = 0;
-    } else {
-      finalValue =
-        typeof propValue === 'string' ? parseFloat(propValue) : propValue;
-      if (typeof propValue === 'string' && isPercent(propValue)) {
-        finalValue *= 0.01;
-        if (gradientUnits === 'pixels') {
-          // then we need to fix those percentages here in svg parsing
-          if (prop === 'x1' || prop === 'x2' || prop === 'r2') {
-            finalValue *= width;
-          }
-          if (prop === 'y1' || prop === 'y2') {
-            finalValue *= height;
+  return (Object.keys(valuesToConvert) as K[]).reduce(
+    (acc, prop) => {
+      const propValue = valuesToConvert[prop];
+      if (propValue === 'Infinity') {
+        finalValue = 1;
+      } else if (propValue === '-Infinity') {
+        finalValue = 0;
+      } else {
+        finalValue =
+          typeof propValue === 'string' ? parseFloat(propValue) : propValue;
+        if (typeof propValue === 'string' && isPercent(propValue)) {
+          finalValue *= 0.01;
+          if (gradientUnits === 'pixels') {
+            // then we need to fix those percentages here in svg parsing
+            if (prop === 'x1' || prop === 'x2' || prop === 'r2') {
+              finalValue *= width;
+            }
+            if (prop === 'y1' || prop === 'y2') {
+              finalValue *= height;
+            }
           }
         }
       }
-    }
-    acc[prop] = finalValue;
-    return acc;
-  }, {} as Record<K, number>);
+      acc[prop] = finalValue;
+      return acc;
+    },
+    {} as Record<K, number>,
+  );
 }
 
 function getValue(el: SVGGradientElement, key: string) {
@@ -68,6 +71,6 @@ export function parseCoords(el: SVGGradientElement, size: TSize) {
     {
       ...size,
       gradientUnits: parseGradientUnits(el),
-    }
+    },
   );
 }

package/src/mixins/eraser_brush.mixin.ts

@@ -77,7 +77,7 @@ import { uid } from '../util/internals/uid';
     toObject: function (propertiesToInclude) {
       var object = _toObject.call(
         this,
-        ['erasable'].concat(propertiesToInclude)
+        ['erasable'].concat(propertiesToInclude),
       );
       if (this.eraser && !this.eraser.excludeFromExport) {
         object.eraser = this.eraser.toObject(propertiesToInclude);
@@ -154,9 +154,9 @@ import { uid } from '../util/internals/uid';
           return fabric.EraserBrush.prototype._addPathToObjectEraser.call(
             fabric.EraserBrush.prototype,
             object,
-            path
+            path,
           );
-        })
+        }),
       );
     },
 
@@ -179,7 +179,7 @@ import { uid } from '../util/internals/uid';
                 //  first we transform the path from the group's coordinate system to the canvas'
                 var originalTransform = fabric.util.multiplyTransformMatrices(
                   transform,
-                  path.calcTransformMatrix()
+                  path.calcTransformMatrix(),
                 );
                 fabric.util.applyTransformToObject(path, originalTransform);
                 return clipPath
@@ -190,14 +190,14 @@ import { uid } from '../util/internals/uid';
                             fabric.EraserBrush.prototype,
                             path,
                             _clipPath,
-                            transform
+                            transform,
                           );
                         return _this._addEraserPathToObjects(eraserPath);
                       },
-                      ['absolutePositioned', 'inverted']
+                      ['absolutePositioned', 'inverted'],
                     )
                   : _this._addEraserPathToObjects(path);
-              })
+              }),
             );
           });
         }
@@ -300,7 +300,7 @@ import { uid } from '../util/internals/uid';
       return new fabric.Eraser(
         enlivedProps[0],
         Object.assign(options, enlivedProps[1]),
-        true
+        true,
       );
     });
   };
@@ -405,7 +405,7 @@ import { uid } from '../util/internals/uid';
         collection,
         objects,
         ctx,
-        restorationContext
+        restorationContext,
       ) {
         objects.forEach(function (obj) {
           var dirty = false;
@@ -415,7 +415,7 @@ import { uid } from '../util/internals/uid';
               obj,
               obj._objects,
               ctx,
-              restorationContext
+              restorationContext,
             );
           } else if (!this.inverted && obj.erasable && obj.visible) {
             //  render only non-erasable objects
@@ -497,7 +497,7 @@ import { uid } from '../util/internals/uid';
           this.canvas,
           objects,
           patternCtx,
-          restorationContext
+          restorationContext,
         );
         this.canvas._renderObjects(patternCtx, objects);
         restorationContext.visibility.forEach(function (obj) {
@@ -661,24 +661,24 @@ import { uid } from '../util/internals/uid';
       applyClipPathToPath: function (
         path,
         clipPath,
-        clipPathContainerTransformMatrix
+        clipPathContainerTransformMatrix,
       ) {
         var pathInvTransform = fabric.util.invertTransform(
-            path.calcTransformMatrix()
+            path.calcTransformMatrix(),
           ),
           clipPathTransform = clipPath.calcTransformMatrix(),
           transform = clipPath.absolutePositioned
             ? pathInvTransform
             : fabric.util.multiplyTransformMatrices(
                 pathInvTransform,
-                clipPathContainerTransformMatrix
+                clipPathContainerTransformMatrix,
               );
         //  when passing down a clip path it becomes relative to the parent
         //  so we transform it acoordingly and set `absolutePositioned` to false
         clipPath.absolutePositioned = false;
         fabric.util.applyTransformToObject(
           clipPath,
-          fabric.util.multiplyTransformMatrices(transform, clipPathTransform)
+          fabric.util.multiplyTransformMatrices(transform, clipPathTransform),
         );
         //  We need to clip `path` with both `clipPath` and it's own clip path if existing (`path.clipPath`)
         //  so in turn `path` erases an object only where it overlaps with all it's clip paths, regardless of how many there are.
@@ -732,14 +732,14 @@ import { uid } from '../util/internals/uid';
               return Promise.all(
                 targets.map(function (_obj) {
                   return _this._addPathToObjectEraser(_obj, _path, context);
-                })
+                }),
               );
             });
           } else if (targets.length > 0) {
             return Promise.all(
               targets.map(function (_obj) {
                 return _this._addPathToObjectEraser(_obj, path, context);
-              })
+              }),
             );
           }
           return;
@@ -755,7 +755,7 @@ import { uid } from '../util/internals/uid';
           // http://fabricjs.com/using-transformations
           var desiredTransform = fabric.util.multiplyTransformMatrices(
             fabric.util.invertTransform(obj.calcTransformMatrix()),
-            path.calcTransformMatrix()
+            path.calcTransformMatrix(),
           );
           fabric.util.applyTransformToObject(path, desiredTransform);
           eraser.add(path);
@@ -795,7 +795,7 @@ import { uid } from '../util/internals/uid';
                 return path;
               })
             );
-          }, this)
+          }, this),
         );
       },
 
@@ -858,7 +858,7 @@ import { uid } from '../util/internals/uid';
             'erasing:end',
             Object.assign(context, {
               path: path,
-            })
+            }),
           );
 
           canvas.requestRenderAll();
@@ -868,7 +868,7 @@ import { uid } from '../util/internals/uid';
           canvas.fire('path:created', { path: path });
         });
       },
-    }
+    },
   );
 
   /** ERASER_END */

package/src/parkinglot/straighten.ts

@@ -42,7 +42,7 @@ Object.assign(FabricObject.prototype, {
     callbacks: {
       onChange?(value: TDegree): any;
       onComplete?(): any;
-    } = {}
+    } = {},
   ) {
     const onComplete = callbacks.onComplete || noop,
       onChange = callbacks.onChange || noop;

package/src/parser/applyViewboxTransform.ts

@@ -19,7 +19,7 @@ export type ParsedViewboxTransform = Partial<{
  * Add a <g> element that envelop all child elements and makes the viewbox transformMatrix descend on all elements
  */
 export function applyViewboxTransform(
-  element: Element
+  element: Element,
 ): ParsedViewboxTransform {
   if (!svgViewBoxElementsRegEx.test(element.nodeName)) {
     return {};
@@ -99,7 +99,7 @@ export function applyViewboxTransform(
 
   // default is to preserve aspect ratio
   const preserveAspectRatio = parsePreserveAspectRatioAttribute(
-    element.getAttribute('preserveAspectRatio') || ''
+    element.getAttribute('preserveAspectRatio') || '',
   );
   if (preserveAspectRatio.alignX !== NONE) {
     //translate all container for the effect of Mid, Min, Max

package/src/parser/constants.ts

@@ -13,7 +13,7 @@ export const reFontDeclaration = new RegExp(
     reNum +
     '(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|' +
     reNum +
-    '))?\\s+(.*)'
+    '))?\\s+(.*)',
 );
 
 export const svgValidTagNames = [
@@ -95,5 +95,5 @@ export const reViewBoxAttrValue = new RegExp(
     '\\s*(' +
     reNum +
     '+)\\s*' +
-    '$'
+    '$',
 );

package/src/parser/elements_parser.ts

@@ -51,7 +51,7 @@ export class ElementsParser {
     options: LoadImageOptions & ParsedViewboxTransform,
     reviver: TSvgReviverCallback | undefined,
     doc: Document,
-    clipPaths: Record<string, Element[]>
+    clipPaths: Record<string, Element[]>,
   ) {
     this.elements = elements;
     this.options = options;
@@ -65,7 +65,7 @@ export class ElementsParser {
 
   parse(): Promise<Array<FabricObject | null>> {
     return Promise.all(
-      this.elements.map((element) => this.createObject(element))
+      this.elements.map((element) => this.createObject(element)),
     );
   }
 
@@ -75,14 +75,14 @@ export class ElementsParser {
       const obj: NotParsedFabricObject = await klass.fromElement(
         el,
         this.options,
-        this.cssRules
+        this.cssRules,
       );
       this.resolveGradient(obj, el, FILL);
       this.resolveGradient(obj, el, STROKE);
       if (obj instanceof FabricImage && obj._originalElement) {
         removeTransformMatrixForSvgParsing(
           obj,
-          obj.parsePreserveAspectRatioAttribute()
+          obj.parsePreserveAspectRatioAttribute(),
         );
       } else {
         removeTransformMatrixForSvgParsing(obj);
@@ -97,7 +97,7 @@ export class ElementsParser {
   extractPropertyDefinition(
     obj: NotParsedFabricObject,
     property: 'fill' | 'stroke' | 'clipPath',
-    storage: Record<string, StorageType[typeof property]>
+    storage: Record<string, StorageType[typeof property]>,
   ): StorageType[typeof property] | undefined {
     const value = obj[property]!,
       regex = this.regexUrl;
@@ -116,12 +116,12 @@ export class ElementsParser {
   resolveGradient(
     obj: NotParsedFabricObject,
     el: Element,
-    property: 'fill' | 'stroke'
+    property: 'fill' | 'stroke',
   ) {
     const gradientDef = this.extractPropertyDefinition(
       obj,
       property,
-      this.gradientDefs
+      this.gradientDefs,
     ) as SVGGradientElement;
     if (gradientDef) {
       const opacityAttr = el.getAttribute(property + '-opacity');
@@ -139,7 +139,7 @@ export class ElementsParser {
     const clipPathElements = this.extractPropertyDefinition(
       obj,
       'clipPath',
-      this.clipPaths
+      this.clipPaths,
     ) as Element[];
     if (clipPathElements) {
       const objTransformInv = invertTransform(obj.calcTransformMatrix());
@@ -161,12 +161,12 @@ export class ElementsParser {
       const finalTransform = parseTransformAttribute(
         `${clipPathOwner.getAttribute('transform') || ''} ${
           clipPathTag.getAttribute('originalTransform') || ''
-        }`
+        }`,
       );
 
       clipPathTag.setAttribute(
         'transform',
-        `matrix(${finalTransform.join(',')})`
+        `matrix(${finalTransform.join(',')})`,
       );
 
       const container = await Promise.all(
@@ -179,13 +179,13 @@ export class ElementsParser {
               delete enlivedClippath.clipRule;
               return enlivedClippath;
             });
-        })
+        }),
       );
       const clipPath =
         container.length === 1 ? container[0] : new Group(container);
       const gTransform = multiplyTransformMatrices(
         objTransformInv,
-        clipPath.calcTransformMatrix()
+        clipPath.calcTransformMatrix(),
       );
       if (clipPath.clipPath) {
         await this.resolveClipPath(clipPath, clipPathOwner);
@@ -206,7 +206,7 @@ export class ElementsParser {
       clipPath.setPositionByOrigin(
         new Point(translateX, translateY),
         CENTER,
-        CENTER
+        CENTER,
       );
       obj.clipPath = clipPath;
     } else {

package/src/parser/getCSSRules.ts

@@ -16,7 +16,7 @@ export function getCSSRules(doc: Document) {
     const styleContents = (styles[i].textContent || '').replace(
       // remove comments
       /\/\*[\s\S]*?\*\//g,
-      ''
+      '',
     );
 
     if (styleContents.trim() === '') {

package/src/parser/getGlobalStylesForElement.ts

@@ -7,7 +7,7 @@ import type { CSSRules } from './typedefs';
 
 export function getGlobalStylesForElement(
   element: HTMLElement,
-  cssRules: CSSRules = {}
+  cssRules: CSSRules = {},
 ) {
   let styles: Record<string, string> = {};
   for (const rule in cssRules) {

package/src/parser/getGradientDefs.ts

@@ -14,7 +14,7 @@ const tagArray = [
  * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element
  */
 export function getGradientDefs(
-  doc: Document
+  doc: Document,
 ): Record<string, SVGGradientElement> {
   const elList = getMultipleNodes(doc, tagArray);
   const gradientDefs: Record<string, SVGGradientElement> = {};

package/src/parser/getMultipleNodes.ts

@@ -1,6 +1,6 @@
 export function getMultipleNodes(
   doc: Document,
-  nodeNames: string[]
+  nodeNames: string[],
 ): Element[] {
   let nodeName,
     nodeArray: Element[] = [],
@@ -11,7 +11,7 @@ export function getMultipleNodes(
     nodeName = nodeNames[i];
     nodeList = doc.getElementsByTagNameNS(
       'http://www.w3.org/2000/svg',
-      nodeName
+      nodeName,
     );
     nodeArray = nodeArray.concat(Array.from(nodeList));
   }

package/src/parser/loadSVGFromString.test.ts

@@ -24,13 +24,10 @@ describe('loadSVGFromString', () => {
       </defs>
       <use clip-path="url(#myClip)" href="#heart" fill="red" />
       </svg>`;
-    // need to load Path here for it to populate in class registry; loadSvgFromString does not
-    // import Path so we'd fail the test without this.
-    const unused = Path.name;
 
     const parsedSvg = await loadSVGFromString(str);
     if (parsedSvg.objects[0] !== null) {
-      expect(parsedSvg.objects[0].isType('Path')).toBe(true);
+      expect(parsedSvg.objects[0] instanceof Path).toBe(true);
     }
   });
 });