fabric 6.2.0 → 6.3.0

package/src/util/misc/projectStroke/StrokeLineJoinProjections.ts

@@ -78,20 +78,20 @@ export class StrokeLineJoinProjections extends StrokeProjectionsBase {
     this.bisector = getUnitVector(
       // if AC is also the zero vector nothing will be projected
       // in that case the next point will handle the projection
-      rotateVector(this.AB.eq(zeroVector) ? this.AC : this.AB, this.alpha / 2)
+      rotateVector(this.AB.eq(zeroVector) ? this.AC : this.AB, this.alpha / 2),
     );
   }
 
   calcOrthogonalProjection(
     from: Point,
     to: Point,
-    magnitude: number = this.strokeProjectionMagnitude
+    magnitude: number = this.strokeProjectionMagnitude,
   ) {
     const vector = this.createSideVector(from, to);
     const orthogonalProjection = getOrthonormalVector(vector);
     const correctSide = StrokeLineJoinProjections.getOrthogonalRotationFactor(
       orthogonalProjection,
-      this.bisector
+      this.bisector,
     );
     return this.scaleUnitVector(orthogonalProjection, magnitude * correctSide);
   }
@@ -109,9 +109,9 @@ export class StrokeLineJoinProjections extends StrokeProjectionsBase {
       (to) => {
         projections.push(this.projectOrthogonally(this.A, to));
         projections.push(
-          this.projectOrthogonally(this.A, to, -this.strokeProjectionMagnitude)
+          this.projectOrthogonally(this.A, to, -this.strokeProjectionMagnitude),
         );
-      }
+      },
     );
     return projections;
   }
@@ -129,7 +129,7 @@ export class StrokeLineJoinProjections extends StrokeProjectionsBase {
       hypotUnitScalar = 1 / Math.sin(alpha / 2),
       miterVector = this.scaleUnitVector(
         this.bisector,
-        -this.strokeProjectionMagnitude * hypotUnitScalar
+        -this.strokeProjectionMagnitude * hypotUnitScalar,
       );
 
     // When two line segments meet at a sharp angle, it is possible for the join to extend,
@@ -139,7 +139,7 @@ export class StrokeLineJoinProjections extends StrokeProjectionsBase {
     // When the stroke is uniform, scaling changes the arrangement of points, this changes the miter-limit
     const strokeMiterLimit = this.options.strokeUniform
       ? magnitude(
-          this.scaleUnitVector(this.bisector, this.options.strokeMiterLimit)
+          this.scaleUnitVector(this.bisector, this.options.strokeMiterLimit),
         )
       : this.options.strokeMiterLimit;
 
@@ -170,8 +170,8 @@ export class StrokeLineJoinProjections extends StrokeProjectionsBase {
       correctSide = new Point(
         StrokeLineJoinProjections.getOrthogonalRotationFactor(this.bisector),
         StrokeLineJoinProjections.getOrthogonalRotationFactor(
-          new Point(this.bisector.y, this.bisector.x)
-        )
+          new Point(this.bisector.y, this.bisector.x),
+        ),
       ),
       radiusOnAxisX = new Point(1, 0)
         .scalarMultiply(this.strokeProjectionMagnitude)
@@ -203,7 +203,7 @@ export class StrokeLineJoinProjections extends StrokeProjectionsBase {
     const { skewX, skewY, scaleX, scaleY, strokeUniform } = this.options,
       shearing = new Point(
         Math.tan(degreesToRadians(skewX)),
-        Math.tan(degreesToRadians(skewY))
+        Math.tan(degreesToRadians(skewY)),
       );
     // The points furthest from the vertex in the direction of the X and Y axes after distortion
     const circleRadius = this.strokeProjectionMagnitude,
@@ -216,20 +216,20 @@ export class StrokeLineJoinProjections extends StrokeProjectionsBase {
         // Safe guard due to floating point precision. In some situations the square root
         // was returning NaN because of a negative number close to zero.
         Math.sqrt(Math.max(circleRadius ** 2 - newY ** 2, 0)),
-        newY
+        newY,
       ),
       newX = strokeUniform
         ? circleRadius /
           Math.sqrt(
             1 +
               (shearing.x ** 2 * (1 / scaleY) ** 2) /
-                (1 / scaleX + (1 / scaleX) * shearing.x * shearing.y) ** 2
+                (1 / scaleX + (1 / scaleX) * shearing.x * shearing.y) ** 2,
           )
         : circleRadius /
           Math.sqrt(1 + shearing.x ** 2 / (1 + shearing.x * shearing.y) ** 2),
       furthestX = new Point(
         newX,
-        Math.sqrt(Math.max(circleRadius ** 2 - newX ** 2, 0))
+        Math.sqrt(Math.max(circleRadius ** 2 - newX ** 2, 0)),
       );
 
     [
@@ -242,8 +242,8 @@ export class StrokeLineJoinProjections extends StrokeProjectionsBase {
       // it is between the start and end of the circle segment
       .map((vector) =>
         this.applySkew(
-          strokeUniform ? vector.multiply(this.strokeUniformScalar) : vector
-        )
+          strokeUniform ? vector.multiply(this.strokeUniformScalar) : vector,
+        ),
       )
       .forEach((vector) => {
         if (isBetweenVectors(vector, startCircle, endCircle)) {
@@ -272,7 +272,7 @@ export class StrokeLineJoinProjections extends StrokeProjectionsBase {
       comparisonVector = isStraightLine
         ? this.applySkew(this.AB.scalarMultiply(-1))
         : this.applySkew(
-            this.bisector.multiply(this.strokeUniformScalar).scalarMultiply(-1)
+            this.bisector.multiply(this.strokeUniformScalar).scalarMultiply(-1),
           ),
       // the beginning of the circle segment is always to the right of the comparison vector (cross product > 0)
       isProj0Start = crossProduct(proj0, comparisonVector) > 0,

package/src/util/misc/projectStroke/StrokeProjectionsBase.ts

@@ -35,12 +35,12 @@ export abstract class StrokeProjectionsBase {
   protected abstract calcOrthogonalProjection(
     from: Point,
     to: Point,
-    magnitude?: number
+    magnitude?: number,
   ): Point;
 
   protected projectOrthogonally(from: Point, to: Point, magnitude?: number) {
     return this.applySkew(
-      from.add(this.calcOrthogonalProjection(from, to, magnitude))
+      from.add(this.calcOrthogonalProjection(from, to, magnitude)),
     );
   }
 

package/src/util/misc/projectStroke/index.ts

@@ -1,5 +1,5 @@
 import { Point, type XY } from '../../../Point';
-import { findIndexRight } from '../../internals';
+import { findIndexRight } from '../../internals/findRight';
 import { StrokeLineCapProjections } from './StrokeLineCapProjections';
 import { StrokeLineJoinProjections } from './StrokeLineJoinProjections';
 import type { TProjection, TProjectStrokeOnPointsOptions } from './types';
@@ -16,7 +16,7 @@ export * from './types';
 export const projectStrokeOnPoints = (
   points: XY[],
   options: TProjectStrokeOnPointsOptions,
-  openPath = false
+  openPath = false,
 ): TProjection[] => {
   const projections: TProjection[] = [];
 
@@ -32,7 +32,7 @@ export const projectStrokeOnPoints = (
       }
       return reduced;
     },
-    [new Point(points[0])]
+    [new Point(points[0])],
   );
 
   if (reduced.length === 1) {
@@ -60,19 +60,19 @@ export const projectStrokeOnPoints = (
 
     if (openPath && points.length === 1) {
       projections.push(
-        ...new StrokeLineCapProjections(A, A, options).project()
+        ...new StrokeLineCapProjections(A, A, options).project(),
       );
     } else if (openPath && (index === 0 || index === points.length - 1)) {
       projections.push(
         ...new StrokeLineCapProjections(
           A,
           index === 0 ? C : B,
-          options
-        ).project()
+          options,
+        ).project(),
       );
     } else {
       projections.push(
-        ...new StrokeLineJoinProjections(A, B, C, options).project()
+        ...new StrokeLineJoinProjections(A, B, C, options).project(),
       );
     }
   });

package/src/util/misc/resolveOrigin.ts

@@ -15,7 +15,7 @@ const originOffset = {
  */
 
 export const resolveOrigin = (
-  originValue: TOriginX | TOriginY | number
+  originValue: TOriginX | TOriginY | number,
 ): number =>
   typeof originValue === 'string'
     ? originOffset[originValue]

package/src/util/misc/rotatePoint.ts

@@ -11,5 +11,5 @@ import type { TRadian } from '../../typedefs';
 export const rotatePoint = (
   point: Point,
   origin: Point,
-  radians: TRadian
+  radians: TRadian,
 ): Point => point.rotate(radians, origin);

package/src/util/misc/svgParsing.ts

@@ -106,11 +106,11 @@ const parseAlign = (align: string): MinMidMax[] => {
  * @return {Object} an object containing align and meetOrSlice attribute
  */
 export const parsePreserveAspectRatioAttribute = (
-  attribute: string
+  attribute: string,
 ): TPreserveArParsed => {
   const [firstPart, secondPart] = attribute.trim().split(' ') as [
     MinMidMax,
-    MeetOrSlice | undefined
+    MeetOrSlice | undefined,
   ];
   const [alignX, alignY] = parseAlign(firstPart);
   return {
@@ -143,7 +143,7 @@ export const matrixToSVG = (transform: TMat2D) =>
 export const colorPropToSVG = (
   prop: string,
   value?: any,
-  inlineStyle = true
+  inlineStyle = true,
 ) => {
   let colorValue;
   let opacityValue;
@@ -174,11 +174,11 @@ export const colorPropToSVG = (
 export const createSVGRect = (
   color: string,
   { left, top, width, height }: TBBox,
-  precision = config.NUM_FRACTION_DIGITS
+  precision = config.NUM_FRACTION_DIGITS,
 ) => {
   const svgColor = colorPropToSVG(FILL, color, false);
   const [x, y, w, h] = [left, top, width, height].map((value) =>
-    toFixed(value, precision)
+    toFixed(value, precision),
   );
   return `<rect ${svgColor} x="${x}" y="${y}" width="${w}" height="${h}"></rect>`;
 };

package/src/util/misc/textStyles.ts

@@ -3,7 +3,7 @@ import type {
   TextStyle,
   TextStyleDeclaration,
 } from '../../shapes/Text/StyledText';
-import { cloneDeep } from '../internals/cloneDeep';
+import { cloneStyles } from '../internals/cloneStyles';
 import { graphemeSplit } from '../lang_string';
 
 export type TextStyleArray = {
@@ -21,7 +21,7 @@ export type TextStyleArray = {
 export const hasStyleChanged = (
   prevStyle: TextStyleDeclaration,
   thisStyle: TextStyleDeclaration,
-  forTextSpans = false
+  forTextSpans = false,
 ) =>
   prevStyle.fill !== thisStyle.fill ||
   prevStyle.stroke !== thisStyle.stroke ||
@@ -47,14 +47,14 @@ export const hasStyleChanged = (
  */
 export const stylesToArray = (
   styles: TextStyle,
-  text: string
+  text: string,
 ): TextStyleArray => {
   const textLines = text.split('\n'),
     stylesArray = [];
   let charIndex = -1,
     prevStyle = {};
   // clone style structure to prevent mutation
-  styles = cloneDeep(styles);
+  styles = cloneStyles(styles);
 
   //loop through each textLine
   for (let i = 0; i < textLines.length; i++) {
@@ -98,11 +98,11 @@ export const stylesToArray = (
  */
 export const stylesFromArray = (
   styles: TextStyleArray | TextStyle,
-  text: string
+  text: string,
 ): TextStyle => {
   if (!Array.isArray(styles)) {
     // clone to prevent mutation
-    return cloneDeep(styles);
+    return cloneStyles(styles);
   }
   const textLines = text.split(reNewline),
     stylesObject: TextStyle = {};

package/src/util/misc/vectors.ts

@@ -61,7 +61,7 @@ export const getUnitVector = (v: Point): Point =>
  */
 export const getOrthonormalVector = (
   v: Point,
-  counterClockwise = true
+  counterClockwise = true,
 ): Point =>
   getUnitVector(new Point(-v.y, v.x).scalarMultiply(counterClockwise ? 1 : -1));
 

package/src/util/path/index.spec.ts

@@ -6,9 +6,9 @@ describe('Path Utils', () => {
       expect(
         makePathSimpler(
           parsePath(
-            'M22,6.58a1.21,1.21,0,0,1-.38-.12c0-.2.12-.2.09-.5l0-.06c0,.09,0,.1-.06,0s-.1-.29-.07-.44.18.19.14-.18c-.07,0-.21-.2-.21,0h.05v.45c0-.16-.07.11-.12-.15,0-.05.06-.05.08-.09s-.11,0-.15-.07l.06.09a.35.35,0,0,1-.16.24h-.06c0-.1-.11-.11-.1-.29s.07.07.05,0c0-.24-.06,0-.11-.21,0,.15-.05.24,0,.41-.05-.1-.07.15-.14,0a.32.32,0,0,1,0,.12s-.05,0-.07.06l0,0s0,0,0,0,0-.21.06-.35h0s.06,0,0,0l0-.1c0-.27.07-.54.09-.66v.14c0-.34.13,0,.14-.27,0,0,0,.07,0,.08s0-.44.14-.23l0,.16a1.17,1.17,0,0,0,0-.32c0,.06,0,.13-.1.1a1.13,1.13,0,0,1,0-.23l0,0v0l0,0a.11.11,0,0,0,0,0,.11.11,0,0,1,0-.06'
-          )
-        )
+            'M22,6.58a1.21,1.21,0,0,1-.38-.12c0-.2.12-.2.09-.5l0-.06c0,.09,0,.1-.06,0s-.1-.29-.07-.44.18.19.14-.18c-.07,0-.21-.2-.21,0h.05v.45c0-.16-.07.11-.12-.15,0-.05.06-.05.08-.09s-.11,0-.15-.07l.06.09a.35.35,0,0,1-.16.24h-.06c0-.1-.11-.11-.1-.29s.07.07.05,0c0-.24-.06,0-.11-.21,0,.15-.05.24,0,.41-.05-.1-.07.15-.14,0a.32.32,0,0,1,0,.12s-.05,0-.07.06l0,0s0,0,0,0,0-.21.06-.35h0s.06,0,0,0l0-.1c0-.27.07-.54.09-.66v.14c0-.34.13,0,.14-.27,0,0,0,.07,0,.08s0-.44.14-.23l0,.16a1.17,1.17,0,0,0,0-.32c0,.06,0,.13-.1.1a1.13,1.13,0,0,1,0-.23l0,0v0l0,0a.11.11,0,0,0,0,0,.11.11,0,0,1,0-.06',
+          ),
+        ),
       ).toMatchSnapshot();
     });
   });

package/src/util/path/index.ts

@@ -58,7 +58,7 @@ const segmentToBezier = (
   cy1: number,
   mT: number,
   fromX: number,
-  fromY: number
+  fromY: number,
 ): TParsedAbsoluteCubicCurveCommand => {
   const costh1 = cos(theta1),
     sinth1 = sin(theta1),
@@ -93,7 +93,7 @@ const arcToSegments = (
   ry: number,
   large: number,
   sweep: number,
-  rotateX: TRadian
+  rotateX: TRadian,
 ): TParsedAbsoluteCubicCurveCommand[] => {
   if (rx === 0 || ry === 0) {
     return [];
@@ -133,7 +133,7 @@ const arcToSegments = (
     (px - cx) / _rx,
     (py - cy) / _ry,
     (-px - cx) / _rx,
-    (-py - cy) / _ry
+    (-py - cy) / _ry,
   );
 
   if (sweep === 0 && dtheta > 0) {
@@ -163,7 +163,7 @@ const arcToSegments = (
       cy1,
       mT,
       fromX,
-      fromY
+      fromY,
     );
     fromX = result[i][5];
     fromY = result[i][6];
@@ -185,7 +185,7 @@ const calcVectorAngle = (
   ux: number,
   uy: number,
   vx: number,
-  vy: number
+  vy: number,
 ): TRadian => {
   const ta = Math.atan2(uy, ux),
     tb = Math.atan2(vy, vx);
@@ -225,7 +225,7 @@ export function getBoundsOfCurve(
   cp2x: number,
   cp2y: number,
   endx: number,
-  endy: number
+  endy: number,
 ): TRectBounds {
   let argsString: string;
   if (config.cachesBoundsOfCurve) {
@@ -290,7 +290,7 @@ export function getBoundsOfCurve(
     cp2x,
     cp2y,
     endx,
-    endy
+    endy,
   );
   while (j--) {
     const { x, y } = iterator(tvalues[j]);
@@ -321,7 +321,7 @@ export function getBoundsOfCurve(
 export const fromArcToBeziers = (
   fx: number,
   fy: number,
-  [_, rx, ry, rot, large, sweep, tx, ty]: TParsedArcCommand
+  [_, rx, ry, rot, large, sweep, tx, ty]: TParsedArcCommand,
 ): TParsedAbsoluteCubicCurveCommand[] => {
   const segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot);
 
@@ -518,7 +518,7 @@ const calcLineLength = (
   x1: number,
   y1: number,
   x2: number,
-  y2: number
+  y2: number,
 ): number => Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
 
 /**
@@ -541,7 +541,7 @@ const getPointOnCubicBezierIterator =
     cp2x: number,
     cp2y: number,
     endx: number,
-    endy: number
+    endy: number,
   ) =>
   (pct: number) => {
     const c1 = CB1(pct),
@@ -550,7 +550,7 @@ const getPointOnCubicBezierIterator =
       c4 = CB4(pct);
     return new Point(
       endx * c1 + cp2x * c2 + cp1x * c3 + begx * c4,
-      endy * c1 + cp2y * c2 + cp1y * c3 + begy * c4
+      endy * c1 + cp2y * c2 + cp1y * c3 + begy * c4,
     );
   };
 
@@ -567,7 +567,7 @@ const getTangentCubicIterator =
     p3x: number,
     p3y: number,
     p4x: number,
-    p4y: number
+    p4y: number,
   ) =>
   (pct: number) => {
     const qb1 = QB1(pct),
@@ -587,7 +587,7 @@ const getPointOnQuadraticBezierIterator =
     p2x: number,
     p2y: number,
     p3x: number,
-    p3y: number
+    p3y: number,
   ) =>
   (pct: number) => {
     const c1 = QB1(pct),
@@ -595,7 +595,7 @@ const getPointOnQuadraticBezierIterator =
       c3 = QB3(pct);
     return new Point(
       p3x * c1 + p2x * c2 + p1x * c3,
-      p3y * c1 + p2y * c2 + p1y * c3
+      p3y * c1 + p2y * c2 + p1y * c3,
     );
   };
 
@@ -606,7 +606,7 @@ const getTangentQuadraticIterator =
     p2x: number,
     p2y: number,
     p3x: number,
-    p3y: number
+    p3y: number,
   ) =>
   (pct: number) => {
     const invT = 1 - pct,
@@ -620,7 +620,7 @@ const getTangentQuadraticIterator =
 const pathIterator = (
   iterator: (pct: number) => Point,
   x1: number,
-  y1: number
+  y1: number,
 ) => {
   let tempP = new Point(x1, y1),
     tmpLen = 0;
@@ -642,7 +642,7 @@ const pathIterator = (
  */
 const findPercentageForDistance = (
   segInfo: TCurveInfo<'Q' | 'C'>,
-  distance: number
+  distance: number,
 ): TPointAngle => {
   let perc = 0,
     tmpLen = 0,
@@ -679,7 +679,7 @@ const findPercentageForDistance = (
  * @return {TPathSegmentInfo[]} path commands information
  */
 export const getPathSegmentsInfo = (
-  path: TSimplePathData
+  path: TSimplePathData,
 ): TPathSegmentInfo[] => {
   let totalLength = 0,
     //x2 and y2 are the coords of segment start
@@ -721,7 +721,7 @@ export const getPathSegmentsInfo = (
           current[3],
           current[4],
           current[5],
-          current[6]
+          current[6],
         );
         tempInfo = <TCurveInfo<'C'>>basicInfo;
         tempInfo.iterator = iterator;
@@ -733,7 +733,7 @@ export const getPathSegmentsInfo = (
           current[3],
           current[4],
           current[5],
-          current[6]
+          current[6],
         );
         tempInfo.length = pathIterator(iterator, x1, y1);
 
@@ -747,7 +747,7 @@ export const getPathSegmentsInfo = (
           current[1],
           current[2],
           current[3],
-          current[4]
+          current[4],
         );
         tempInfo = <TCurveInfo<'Q'>>basicInfo;
         tempInfo.iterator = iterator;
@@ -757,7 +757,7 @@ export const getPathSegmentsInfo = (
           current[1],
           current[2],
           current[3],
-          current[4]
+          current[4],
         );
         tempInfo.length = pathIterator(iterator, x1, y1);
         x1 = current[3];
@@ -789,7 +789,7 @@ export const getPathSegmentsInfo = (
 export const getPointOnPath = (
   path: TSimplePathData,
   distance: number,
-  infos: TPathSegmentInfo[] = getPathSegmentsInfo(path)
+  infos: TPathSegmentInfo[] = getPathSegmentsInfo(path),
 ): TPointAngle | undefined => {
   let i = 0;
   while (distance - infos[i].length > 0 && i < infos.length - 2) {
@@ -807,7 +807,7 @@ export const getPointOnPath = (
       return {
         ...new Point(segInfo.x, segInfo.y).lerp(
           new Point(segInfo.destX, segInfo.destY),
-          segPercent
+          segPercent,
         ),
         angle: Math.atan2(segInfo.destY - segInfo.y, segInfo.destX - segInfo.x),
       };
@@ -815,7 +815,7 @@ export const getPointOnPath = (
       return {
         ...new Point(segInfo.x, segInfo.y).lerp(
           new Point(segment[1]!, segment[2]!),
-          segPercent
+          segPercent,
         ),
         angle: Math.atan2(segment[2]! - segInfo.y, segment[1]! - segInfo.x),
       };
@@ -880,7 +880,7 @@ export const parsePath = (pathString: string): TComplexPathData => {
       // ` ?` is to support commands with optional spaces between flags
       matchStr = matchStr.replace(
         new RegExp(`${filteredGroups.join(' ?')} ?$`),
-        ''
+        '',
       );
     } while (paramArr);
     // add the chain, convert multiple m's to l's in the process
@@ -904,7 +904,7 @@ export const parsePath = (pathString: string): TComplexPathData => {
  */
 export const getSmoothPathFromPoints = (
   points: Point[],
-  correction = 0
+  correction = 0,
 ): TSimplePathData => {
   let p1 = new Point(points[0]),
     p2 = new Point(points[1]),
@@ -961,7 +961,7 @@ export const getSmoothPathFromPoints = (
 export const transformPath = (
   path: TSimplePathData,
   transform: TMat2D,
-  pathOffset: Point
+  pathOffset: Point,
 ): TSimplePathData => {
   if (pathOffset) {
     transform = multiplyTransformMatrices(transform, [
@@ -982,7 +982,7 @@ export const transformPath = (
           x: pathSegment[i] as number,
           y: pathSegment[i + 1] as number,
         },
-        transform
+        transform,
       );
       newSegment[i] = x;
       newSegment[i + 1] = y;
@@ -999,7 +999,7 @@ export const transformPath = (
  */
 export const getRegularPolygonPath = (
   numVertexes: number,
-  radius: number
+  radius: number,
 ): TSimplePathData => {
   const interiorAngle = (Math.PI * 2) / numVertexes;
   // rotationAdjustment rotates the path by 1/2 the interior angle so that the polygon always has a flat side on the bottom