fabric 6.2.0 → 6.3.0

package/src/parser/loadSVGFromString.ts

@@ -20,7 +20,7 @@ import type { SVGParsingOutput, TSvgReviverCallback } from './typedefs';
 export function loadSVGFromString(
   string: string,
   reviver?: TSvgReviverCallback,
-  options?: LoadImageOptions
+  options?: LoadImageOptions,
 ): Promise<SVGParsingOutput> {
   const parser = new (getFabricWindow().DOMParser)(),
     // should we use `image/svg+xml` here?

package/src/parser/loadSVGFromURL.ts

@@ -21,7 +21,7 @@ import type { LoadImageOptions } from '../util/misc/objectEnlive';
 export function loadSVGFromURL(
   url: string,
   reviver?: TSvgReviverCallback,
-  options: LoadImageOptions = {}
+  options: LoadImageOptions = {},
 ): Promise<SVGParsingOutput> {
   // need to handle error properly
   return new Promise<Document>((resolve, reject) => {

package/src/parser/normalizeAttr.ts

@@ -1,5 +1,5 @@
 import { attributesMap } from './constants';
 
 export const normalizeAttr = (
-  attr: keyof typeof attributesMap | string
+  attr: keyof typeof attributesMap | string,
 ): string => attributesMap[attr as keyof typeof attributesMap] ?? attr;

package/src/parser/normalizeValue.ts

@@ -7,7 +7,7 @@ export function normalizeValue(
   attr: string,
   value: any,
   parentAttributes: Record<string, any>,
-  fontSize: number
+  fontSize: number,
 ): string | null | boolean | number[] | number {
   const isArray = Array.isArray(value);
   let parsed: number | number[];
@@ -26,7 +26,7 @@ export function normalizeValue(
     if (parentAttributes && parentAttributes.transformMatrix) {
       ouputValue = multiplyTransformMatrices(
         parentAttributes.transformMatrix,
-        parseTransformAttribute(value)
+        parseTransformAttribute(value),
       );
     } else {
       ouputValue = parseTransformAttribute(value);

package/src/parser/parseAttributes.ts

@@ -19,7 +19,7 @@ import type { CSSRules } from './typedefs';
 export function parseAttributes(
   element: HTMLElement | null,
   attributes: string[],
-  cssRules?: CSSRules
+  cssRules?: CSSRules,
 ): Record<string, any> {
   if (!element) {
     return {};
@@ -37,7 +37,7 @@ export function parseAttributes(
     parentAttributes = parseAttributes(
       element.parentElement,
       attributes,
-      cssRules
+      cssRules,
     );
     if (parentAttributes.fontSize) {
       fontSize = parentFontSize = parseUnit(parentAttributes.fontSize);
@@ -78,7 +78,7 @@ export function parseAttributes(
       normalizedAttr,
       ownAttributes[attr],
       parentAttributes,
-      fontSize!
+      fontSize!,
     );
     normalizedStyle[normalizedAttr] = normalizedValue;
   }

package/src/parser/parseFontDeclaration.ts

@@ -11,7 +11,7 @@ import { reFontDeclaration } from './constants';
  */
 export function parseFontDeclaration(
   value: string,
-  oStyle: Record<string, any>
+  oStyle: Record<string, any>,
 ): void {
   const match = value.match(reFontDeclaration);
 

package/src/parser/parseSVGDocument.ts

@@ -38,7 +38,7 @@ export const createEmptyResponse = (): SVGParsingOutput => ({
 export async function parseSVGDocument(
   doc: Document,
   reviver?: TSvgReviverCallback,
-  { crossOrigin, signal }: LoadImageOptions = {}
+  { crossOrigin, signal }: LoadImageOptions = {},
 ): Promise<SVGParsingOutput> {
   if (signal && signal.aborted) {
     log('log', new SignalAbortedError('parseSVGDocument'));
@@ -73,7 +73,7 @@ export async function parseSVGDocument(
       el.setAttribute('originalTransform', el.getAttribute('transform') || '');
       const id = el.getAttribute('id')!;
       localClipPaths[id] = Array.from(el.getElementsByTagName('*')).filter(
-        (el) => isValidSvgTag(el)
+        (el) => isValidSvgTag(el),
       );
     });
 
@@ -83,7 +83,7 @@ export async function parseSVGDocument(
     options,
     reviver,
     doc,
-    localClipPaths
+    localClipPaths,
   );
 
   const instances = await elementParser.parse();

package/src/parser/parseStyleObject.ts

@@ -6,7 +6,7 @@
  */
 export function parseStyleObject(
   style: Record<string, any>,
-  oStyle: Record<string, any>
+  oStyle: Record<string, any>,
 ): void {
   Object.entries(style).forEach(([prop, value]) => {
     if (value === undefined) {

package/src/parser/parseStyleString.ts

@@ -6,7 +6,7 @@
  */
 export function parseStyleString(
   style: string,
-  oStyle: Record<string, any>
+  oStyle: Record<string, any>,
 ): void {
   style
     .replace(/;\s*$/, '')

package/src/parser/parseTransformAttribute.ts

@@ -63,7 +63,7 @@ export function parseTransformAttribute(attributeValue: string): TMat2D {
     const matchedParams = transformMatch.filter((m) => !!m);
     const [, operation, ...rawArgs] = matchedParams;
     const [arg0, arg1, arg2, arg3, arg4, arg5] = rawArgs.map((arg) =>
-      parseFloat(arg)
+      parseFloat(arg),
     );
 
     switch (operation) {

package/src/parser/parseUseDirectives.ts

@@ -46,7 +46,7 @@ export function parseUseDirectives(doc: Document) {
       // if is an SVG, create a group and apply all the attributes on top of it
       const el3 = clonedOriginal.ownerDocument.createElementNS(svgNS, 'g');
       Object.entries(originalAttrMap).forEach(([name, value]) =>
-        el3.setAttributeNS(svgNS, name, value)
+        el3.setAttributeNS(svgNS, name, value),
       );
       el3.append(...clonedOriginal.childNodes);
       clonedOriginal = el3;

package/src/parser/percent.ts

@@ -1,4 +1,4 @@
-import { ifNaN } from '../util/internals';
+import { ifNaN } from '../util/internals/ifNaN';
 import { capValue } from '../util/misc/capValue';
 
 const RE_PERCENT = /^(\d+\.\d+)%|(\d+)%$/;
@@ -15,13 +15,13 @@ export function isPercent(value: string | null) {
  */
 export function parsePercent(
   value: string | number | null | undefined,
-  valueIfNaN?: number
+  valueIfNaN?: number,
 ) {
   const parsed =
     typeof value === 'number'
       ? value
       : typeof value === 'string'
-      ? parseFloat(value) / (isPercent(value) ? 100 : 1)
-      : NaN;
+        ? parseFloat(value) / (isPercent(value) ? 100 : 1)
+        : NaN;
   return capValue(0, ifNaN(parsed, valueIfNaN), 1);
 }

package/src/parser/recursivelyParseGradientsXlink.ts

@@ -15,7 +15,7 @@ const xlinkAttr = 'xlink:href';
 
 export function recursivelyParseGradientsXlink(
   doc: Document,
-  gradient: Element
+  gradient: Element,
 ) {
   const xLink = gradient.getAttribute(xlinkAttr)?.slice(1) || '',
     referencedGradient = doc.getElementById(xLink);

package/src/parser/setStrokeFillOpacity.ts

@@ -13,7 +13,7 @@ const colorAttributesMap = {
  */
 
 export function setStrokeFillOpacity(
-  attributes: Record<string, any>
+  attributes: Record<string, any>,
 ): Record<string, any> {
   const defaults = FabricObject.getDefaults();
   Object.entries(colorAttributesMap).forEach(([attr, colorAttr]) => {

package/src/parser/typedefs.ts

@@ -9,7 +9,7 @@ export type SVGParsingOutput = {
 
 export type TSvgReviverCallback = (
   element: Element,
-  fabricObject: FabricObject
+  fabricObject: FabricObject,
 ) => void;
 
 export type CSSRules = Record<string, Record<string, string>>;

package/src/shapes/ActiveSelection.spec.ts

@@ -9,7 +9,7 @@ describe('ActiveSelection', () => {
     const activeSelection = new ActiveSelection();
     expect(activeSelection.layoutManager).toBeDefined();
     expect(activeSelection.layoutManager?.strategy).toBeInstanceOf(
-      FitContentLayout
+      FitContentLayout,
     );
   });
 

package/src/shapes/ActiveSelection.ts

@@ -59,7 +59,7 @@ export class ActiveSelection extends Group {
 
   constructor(
     objects: FabricObject[] = [],
-    options: Partial<ActiveSelectionOptions> = {}
+    options: Partial<ActiveSelectionOptions> = {},
   ) {
     super();
     Object.assign(this, ActiveSelection.ownDefaults);
@@ -115,13 +115,13 @@ export class ActiveSelection extends Group {
   canEnterGroup(object: FabricObject) {
     if (
       this.getObjects().some(
-        (o) => o.isDescendantOf(object) || object.isDescendantOf(o)
+        (o) => o.isDescendantOf(object) || object.isDescendantOf(o),
       )
     ) {
       //  prevent circular object tree
       log(
         'error',
-        'ActiveSelection: circular object trees are not supported, this call has no effect'
+        'ActiveSelection: circular object trees are not supported, this call has no effect',
       );
       return false;
     }
@@ -237,7 +237,7 @@ export class ActiveSelection extends Group {
   _renderControls(
     ctx: CanvasRenderingContext2D,
     styleOverride?: ControlRenderingStyleOverride,
-    childrenOverride?: ControlRenderingStyleOverride
+    childrenOverride?: ControlRenderingStyleOverride,
   ) {
     ctx.save();
     ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;

package/src/shapes/Circle.ts

@@ -65,7 +65,7 @@ export const circleDefaultValues: Partial<TClassProperties<Circle>> = {
 export class Circle<
     Props extends TOptions<CircleProps> = Partial<CircleProps>,
     SProps extends SerializedCircleProps = SerializedCircleProps,
-    EventSpec extends ObjectEvents = ObjectEvents
+    EventSpec extends ObjectEvents = ObjectEvents,
   >
   extends FabricObject<Props, SProps, EventSpec>
   implements UniqueCircleProps
@@ -125,7 +125,7 @@ export class Circle<
       this.radius,
       degreesToRadians(this.startAngle),
       degreesToRadians(this.endAngle),
-      this.counterClockwise
+      this.counterClockwise,
     );
     this._renderPaintInOrder(ctx);
   }
@@ -161,7 +161,7 @@ export class Circle<
    */
   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([...CIRCLE_PROPS, ...propertiesToInclude]);
   }
@@ -224,7 +224,7 @@ export class Circle<
   static async fromElement(
     element: HTMLElement,
     options: Abortable,
-    cssRules?: CSSRules
+    cssRules?: CSSRules,
   ): Promise<Circle> {
     const {
       left = 0,
@@ -234,7 +234,7 @@ export class Circle<
     } = parseAttributes(
       element,
       this.ATTRIBUTE_NAMES,
-      cssRules
+      cssRules,
     ) as Partial<CircleProps>;
 
     // this probably requires to be fixed for default origins not being top/left.

package/src/shapes/Ellipse.ts

@@ -29,7 +29,7 @@ const ELLIPSE_PROPS = ['rx', 'ry'] as const;
 export class Ellipse<
     Props extends TOptions<EllipseProps> = Partial<EllipseProps>,
     SProps extends SerializedEllipseProps = SerializedEllipseProps,
-    EventSpec extends ObjectEvents = ObjectEvents
+    EventSpec extends ObjectEvents = ObjectEvents,
   >
   extends FabricObject<Props, SProps, EventSpec>
   implements EllipseProps
@@ -116,7 +116,7 @@ export class Ellipse<
    */
   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([...ELLIPSE_PROPS, ...propertiesToInclude]);
   }
@@ -167,12 +167,12 @@ export class Ellipse<
   static async fromElement(
     element: HTMLElement,
     options: Abortable,
-    cssRules?: CSSRules
+    cssRules?: CSSRules,
   ) {
     const parsedAttributes = parseAttributes(
       element,
       this.ATTRIBUTE_NAMES,
-      cssRules
+      cssRules,
     );
 
     parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.rx;

package/src/shapes/Group.spec.ts

@@ -75,7 +75,7 @@ describe('Group', () => {
     }).catch((e) => {
       expect(e instanceof SignalAbortedError).toBe(true);
       expect(e.message).toBe(
-        `fabric: loadImage 'options.signal' is in 'aborted' state`
+        `fabric: loadImage 'options.signal' is in 'aborted' state`,
       );
     });
   });
@@ -109,7 +109,7 @@ describe('Group', () => {
             strokeWidth: 0,
           }),
         ],
-        objectOptions
+        objectOptions,
       );
       expect(group.width).toBe(100);
       expect(group.height).toBe(100);
@@ -133,7 +133,7 @@ describe('Group', () => {
             strokeWidth: 0,
           }),
         ],
-        objectOptions
+        objectOptions,
       );
       expect(group.left).toBe(6);
       expect(group.top).toBe(4);
@@ -153,7 +153,7 @@ describe('Group', () => {
             strokeWidth: 0,
           }),
         ],
-        objectOptions
+        objectOptions,
       );
       expect(group.left).toBe(60);
       expect(group.top).toBe(50);
@@ -244,7 +244,7 @@ describe('Group', () => {
       const restoredGroup = await Group.fromObject(serialized);
       expect(restoredGroup.layoutManager).toBeInstanceOf(LayoutManager);
       expect(restoredGroup.layoutManager.strategy).toBeInstanceOf(
-        ClipPathLayout
+        ClipPathLayout,
       );
     });
     test('will serialize correctly without default values', async () => {

package/src/shapes/Group.ts

@@ -81,7 +81,7 @@ export const groupDefaultValues: Partial<TClassProperties<Group>> = {
  */
 export class Group
   extends createCollectionMixin(
-    FabricObject<GroupProps, SerializedGroupProps, GroupEvents>
+    FabricObject<GroupProps, SerializedGroupProps, GroupEvents>,
   )
   implements GroupProps
 {
@@ -153,17 +153,17 @@ export class Group
       layoutManager?: LayoutManager;
       top?: number;
       left?: number;
-    }
+    },
   ) {
     this._objects = [...objects]; // Avoid unwanted mutations of Collection to affect the caller
 
     this.__objectSelectionTracker = this.__objectSelectionMonitor.bind(
       this,
-      true
+      true,
     );
     this.__objectSelectionDisposer = this.__objectSelectionMonitor.bind(
       this,
-      false
+      false,
     );
 
     this.forEachObject((object) => {
@@ -195,14 +195,14 @@ export class Group
       //  prevent circular object tree
       log(
         'error',
-        'Group: circular object trees are not supported, this call has no effect'
+        'Group: circular object trees are not supported, this call has no effect',
       );
       return false;
     } else if (this._objects.indexOf(object) !== -1) {
       // is already in the objects array
       log(
         'error',
-        'Group: duplicate objects are not supported inside group, this call has no effect'
+        'Group: duplicate objects are not supported inside group, this call has no effect',
       );
       return false;
     }
@@ -327,7 +327,9 @@ export class Group
    */
   __objectSelectionMonitor<T extends boolean>(
     selected: T,
-    { target: object }: ObjectEvents[T extends true ? 'selected' : 'deselected']
+    {
+      target: object,
+    }: ObjectEvents[T extends true ? 'selected' : 'deselected'],
   ) {
     const activeObjects = this._activeObjects;
     if (selected) {
@@ -382,8 +384,8 @@ export class Group
         object,
         multiplyTransformMatrices(
           invertTransform(this.calcTransformMatrix()),
-          object.calcTransformMatrix()
-        )
+          object.calcTransformMatrix(),
+        ),
       );
     }
     this._shouldSetNestedCoords() && object.setCoords();
@@ -430,8 +432,8 @@ export class Group
         object,
         multiplyTransformMatrices(
           this.calcTransformMatrix(),
-          object.calcTransformMatrix()
-        )
+          object.calcTransformMatrix(),
+        ),
       );
       object.setCoords();
     }
@@ -547,7 +549,7 @@ export class Group
    */
   __serializeObjects(
     method: 'toObject' | 'toDatalessObject',
-    propertiesToInclude?: string[]
+    propertiesToInclude?: string[],
   ) {
     const _includeDefaultValues = this.includeDefaultValues;
     return this._objects
@@ -574,7 +576,7 @@ export class Group
       GroupProps & TClassProperties<this>,
       keyof SerializedGroupProps
     >,
-    K extends keyof T = never
+    K extends keyof T = never,
   >(propertiesToInclude: K[] = []): Pick<T, K> & SerializedGroupProps {
     const layoutManager = this.layoutManager.toObject();
 
@@ -589,7 +591,7 @@ export class Group
         : {}),
       objects: this.__serializeObjects(
         'toObject',
-        propertiesToInclude as string[]
+        propertiesToInclude as string[],
       ),
     };
   }
@@ -681,7 +683,7 @@ export class Group
    */
   static fromObject<T extends TOptions<SerializedGroupProps>>(
     { type, objects = [], layoutManager, ...options }: T,
-    abortable?: Abortable
+    abortable?: Abortable,
   ) {
     return Promise.all([
       enlivenObjects<FabricObject>(objects, abortable),
@@ -694,10 +696,10 @@ export class Group
       });
       if (layoutManager) {
         const layoutClass = classRegistry.getClass<typeof LayoutManager>(
-          layoutManager.type
+          layoutManager.type,
         );
         const strategyClass = classRegistry.getClass<typeof FitContentLayout>(
-          layoutManager.strategy
+          layoutManager.strategy,
         );
         group.layoutManager = new layoutClass(new strategyClass());
       } else {

package/src/shapes/IText/DraggableTextDelegate.ts

@@ -1,4 +1,3 @@
-import type { Canvas } from '../../canvas/Canvas';
 import type {
   DragEventData,
   DropEventData,
@@ -7,7 +6,7 @@ import type {
 import { Point } from '../../Point';
 import type { IText } from './IText';
 import { setStyle } from '../../util/dom_style';
-import { cloneDeep } from '../../util/internals/cloneDeep';
+import { cloneStyles } from '../../util/internals/cloneStyles';
 import type { TextStyleDeclaration } from '../Text/StyledText';
 import { getDocumentFromElement } from '../../util/dom_misc';
 import { CHANGED, NONE } from '../../constants';
@@ -109,7 +108,7 @@ export class DraggableTextDelegate {
     }: {
       selectionStart: number;
       selectionEnd: number;
-    }
+    },
   ) {
     const target = this.target;
     const canvas = target.canvas!;
@@ -117,7 +116,7 @@ export class DraggableTextDelegate {
     const boundaries = target._getCursorBoundaries(selectionStart);
     const selectionPosition = new Point(
       boundaries.left + boundaries.leftOffset,
-      boundaries.top + boundaries.topOffset
+      boundaries.top + boundaries.topOffset,
     ).multiply(flipFactor);
     const pos = selectionPosition.transform(target.calcTransformMatrix());
     const pointer = canvas.getScenePoint(e);
@@ -129,7 +128,7 @@ export class DraggableTextDelegate {
     const offset = correction.add(diff).transform(vpt, true);
     //  prepare instance for drag image snapshot by making all non selected text invisible
     const bgc = target.backgroundColor;
-    const styles = cloneDeep(target.styles);
+    const styles = cloneStyles(target.styles);
     target.backgroundColor = '';
     const styleOverride = {
       stroke: 'transparent',
@@ -160,7 +159,7 @@ export class DraggableTextDelegate {
       dragImage.remove();
     };
     getDocumentFromElement(
-      (e.target || this.target.hiddenTextarea)! as HTMLElement
+      (e.target || this.target.hiddenTextarea)! as HTMLElement,
     ).body.appendChild(dragImage);
     e.dataTransfer?.setDragImage(dragImage, offset.x, offset.y);
   }
@@ -189,9 +188,9 @@ export class DraggableTextDelegate {
           styles: target.getSelectionStyles(
             selection.selectionStart,
             selection.selectionEnd,
-            true
+            true,
           ),
-        })
+        }),
       );
       e.dataTransfer.effectAllowed = 'copyMove';
       this.setDragImage(e, data);
@@ -317,11 +316,11 @@ export class DraggableTextDelegate {
       target.enterEditing(e);
       target.selectionStart = Math.min(
         insertAt + selectionStartOffset,
-        target._text.length
+        target._text.length,
       );
       target.selectionEnd = Math.min(
         target.selectionStart + insert.length,
-        target._text.length
+        target._text.length,
       );
       target.hiddenTextarea!.value = target.text;
       target._updateTextarea();

package/src/shapes/IText/IText.test.ts

@@ -37,7 +37,7 @@ describe('IText', () => {
           cloneDeepWith: (value) =>
             typeof value === 'number' ? value.toFixed(3) : undefined,
         });
-      }
+      },
     );
   });
 });