fabric 7.3.1 → 7.4.0

package/src/shapes/Textbox.ts

@@ -209,7 +209,7 @@ export class Textbox<
       return true;
     }
     let offset = 0,
-      nextLineIndex = lineIndex + 1,
+      nextLineIndex: number,
       nextOffset: number,
       shouldLimit = false;
     const map = this._styleMap[lineIndex],
@@ -450,7 +450,6 @@ export class Textbox<
     );
     // layout words
     const data = wordsData[lineIndex];
-    offset = 0;
     let i;
     for (i = 0; i < data.length; i++) {
       const { word, width: wordWidth } = data[i];

package/src/util/animation/animations.spec.ts

@@ -397,7 +397,7 @@ describe('animate', () => {
     expect(run).toBeGreaterThanOrEqual(3);
     vi.advanceTimersByTime(duration + 20);
   });
-  it('abort function is calle with object as context', async () => {
+  it('abort function is called with object as context', async () => {
     const object = new FabricObject({ left: 123, top: 124 });
     let context: any;
     object.animate(

package/src/util/animation/easing.ts

@@ -149,7 +149,7 @@ export const easeInOutExpo: TEasingFunction = (t, b, c, d) => {
   if (t < 1) {
     return (c / 2) * 2 ** (10 * (t - 1)) + b;
   }
-  return (c / 2) * -(2 ** (-10 * --t) + 2) + b;
+  return (c / 2) * -(2 ** (-10 * (t - 1)) + 2) + b;
 };
 
 /**

package/src/util/internals/applyCanvasTransform.ts

@@ -4,7 +4,7 @@ import type { StaticCanvas } from '../../canvas/StaticCanvas';
  * Set the transform of the passed context to the same of a specific Canvas or StaticCanvas.
  * setTransform is used since this utility will RESET the ctx transform to the basic value
  * of retina scaling and viewport transform
- * It is not meant to be added to other transforms, it is used internally to preapre canvases to draw
+ * It is not meant to be added to other transforms, it is used internally to prepare canvases to draw
  * @param ctx
  * @param canvas
  */

package/src/util/internals/svgExportCheck.ts

@@ -0,0 +1,20 @@
+const unsafeSvgStyleValueRegex = new RegExp(
+  String.raw`[\0-\x1F\x7F;<>\\]|\/\*|\*\/|url\s*\(|expression\s*\(|(?:java|vb)script\s*:|data\s*:|@import\b`,
+  'iu',
+);
+
+export const isSafeSvgStyleValue = (value: unknown): value is string =>
+  typeof value === 'string' &&
+  value.trim().length > 0 &&
+  !unsafeSvgStyleValueRegex.test(value);
+
+export const getSafeSvgStyleNumber = (
+  value: unknown,
+  fallback = '',
+): string => {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? `${numeric}` : fallback;
+};
+
+export const getSafeSvgStyleToken = (value: unknown, fallback = ''): string =>
+  typeof value === 'string' && isSafeSvgStyleValue(value) ? value : fallback;

package/src/util/misc/matrix.spec.ts

@@ -1,6 +1,8 @@
 import { describe, expect, it } from 'vitest';
 import {
   calcDimensionsMatrix,
+  calcPlaneZoom,
+  calcPlaneScaleY,
   composeMatrix,
   createRotateMatrix,
   invertTransform,
@@ -113,6 +115,56 @@ describe('matrix', () => {
     });
   });
 
+  describe('calcPlaneZoom', () => {
+    it('returns 1 for the identity matrix', () => {
+      expect(calcPlaneZoom(iMatrix)).toBe(1);
+    });
+
+    it('returns the scale factor of a pure scale matrix', () => {
+      expect(calcPlaneZoom([2, 0, 0, 2, 0, 0])).toBe(2);
+    });
+
+    it('returns the scale factor of a rotated matrix regardless of angle', () => {
+      const cos = Math.SQRT1_2,
+        sin = Math.SQRT1_2;
+      expect(calcPlaneZoom([cos, sin, -sin, cos, 0, 0])).toBeCloseTo(1);
+      expect(
+        calcPlaneZoom([2 * cos, 2 * sin, -2 * sin, 2 * cos, 0, 0]),
+      ).toBeCloseTo(2);
+    });
+
+    it('is independent of translation', () => {
+      expect(calcPlaneZoom([3, 0, 0, 3, 100, 200])).toBe(3);
+    });
+  });
+
+  describe('calcPlaneScaleY', () => {
+    it('returns 1 for the identity matrix', () => {
+      expect(calcPlaneScaleY(iMatrix)).toBe(1);
+    });
+
+    it('returns the scale factor of a pure uniform scale matrix', () => {
+      expect(calcPlaneScaleY([2, 0, 0, 2, 0, 0])).toBe(2);
+    });
+
+    it('returns the Y scale factor of a rotated matrix regardless of angle', () => {
+      const cos = Math.SQRT1_2,
+        sin = Math.SQRT1_2;
+      expect(calcPlaneScaleY([cos, sin, -sin, cos, 0, 0])).toBeCloseTo(1);
+      expect(
+        calcPlaneScaleY([2 * cos, 2 * sin, -2 * sin, 2 * cos, 0, 0]),
+      ).toBeCloseTo(2);
+    });
+
+    it('returns the Y-axis scale independently for a non-uniform scale matrix', () => {
+      expect(calcPlaneScaleY([2, 0, 0, 3, 0, 0])).toBe(3);
+    });
+
+    it('is independent of translation', () => {
+      expect(calcPlaneScaleY([3, 0, 0, 5, 100, 200])).toBe(5);
+    });
+  });
+
   describe('transformPoint', () => {
     it('transforms a point using a transformation matrix', () => {
       const point = new Point(2, 2);

package/src/util/misc/matrix.ts

@@ -108,6 +108,22 @@ export const multiplyTransformMatrixArray = (
 export const calcPlaneRotation = ([a, b]: TMat2D) =>
   Math.atan2(b, a) as TRadian;
 
+/**
+ * Returns the uniform scale (zoom) magnitude of a 2D affine matrix,
+ * computed as the length of the image of the unit X basis vector.
+ */
+export const calcPlaneZoom = ([a, b]: TMat2D) => Math.sqrt(a * a + b * b);
+
+/**
+ * Returns the Y-axis scale magnitude of a 2D affine matrix,
+ * computed as the length of the image of the unit Y basis vector.
+ * We do not support non uniform zooming on the viewport but to make things work
+ * we need to have a function that can return the value on Y axis.
+ * Bug reports and features will be planned with zoom being just a number
+ * that is the same for both axis
+ */
+export const calcPlaneScaleY = ([, , c, d]: TMat2D) => Math.sqrt(c * c + d * d);
+
 /**
  * Decomposes standard 2x3 matrix into transform components
  * @param  {TMat2D} a transformMatrix

package/src/util/misc/mergeClipPaths.ts

@@ -5,7 +5,7 @@ import { Group } from '../../shapes/Group';
  * Merges 2 clip paths into one visually equal clip path
  *
  * **IMPORTANT**:\
- * Does **NOT** clone the arguments, clone them proir if necessary.
+ * Does **NOT** clone the arguments, clone them prior if necessary.
  *
  * Creates a wrapper (group) that contains one clip path and is clipped by the other so content is kept where both overlap.
  * Use this method if both the clip paths may have nested clip paths of their own, so assigning one to the other's clip path property is not possible.

package/src/util/misc/objectEnlive.ts

@@ -171,7 +171,7 @@ export const enlivenObjectEnlivables = <
       /**
        * clipPath or shadow or gradient or text on a path or a pattern,
        * or the backgroundImage or overlayImage of canvas
-       * If we have a type and there is a classe registered for it, we enlive it.
+       * If we have a type and there is a class registered for it, we enlive it.
        * If there is no class registered for it we return the value as is
        * */
       if (value.type && classRegistry.has(value.type)) {

package/src/util/misc/svgParsing.ts

@@ -1,7 +1,13 @@
 import { Color } from '../../color/Color';
 import { config } from '../../config';
 import { DEFAULT_SVG_FONT_SIZE, FILL, NONE } from '../../constants';
-import type { TBBox, SVGElementName, SupportedSVGUnit } from '../../typedefs';
+import type {
+  TBBox,
+  SVGElementName,
+  SupportedSVGUnit,
+  TFiller,
+} from '../../typedefs';
+import { isSafeSvgStyleValue } from '../internals/svgExportCheck';
 import { escapeXml } from '../lang_string';
 import { toFixed } from './toFixed';
 
@@ -126,24 +132,30 @@ export const parsePreserveAspectRatioAttribute = (
  */
 export const colorPropToSVG = (
   prop: string,
-  value?: any,
+  value?: string | TFiller | null,
   inlineStyle = true,
 ) => {
   let colorValue;
   let opacityValue;
   if (!value) {
     colorValue = 'none';
-  } else if (value.toLive) {
-    colorValue = `url(#SVGID_${escapeXml(value.id)})`;
+  } else if ((value as TFiller).toLive) {
+    colorValue = `url(#SVGID_${escapeXml((value as TFiller).id)})`;
   } else {
-    const color = new Color(value),
-      opacity = color.getAlpha();
-
-    colorValue = color.toRgb();
-    if (opacity !== 1) {
-      opacityValue = opacity.toString();
+    const rawValue = String(value);
+    if (!isSafeSvgStyleValue(rawValue)) {
+      colorValue = new Color('black').toRgb();
+    } else {
+      const color = new Color(rawValue),
+        opacity = color.getAlpha();
+
+      colorValue = color.toRgb();
+      if (opacity !== 1) {
+        opacityValue = opacity.toString();
+      }
     }
   }
+
   if (inlineStyle) {
     return `${prop}: ${colorValue}; ${
       opacityValue ? `${prop}-opacity: ${opacityValue}; ` : ''

package/src/util/path/index.ts

@@ -355,7 +355,7 @@ export const makePathSimpler = (path: TComplexPathData): TSimplePathData => {
   let x = 0,
     y = 0;
   // x1 and y1 represent the last point of the subpath. the subpath is started with
-  // m or M command. When a z or Z command is drawn, x and y need to be resetted to
+  // m or M command. When a z or Z command is drawn, x and y need to be reset to
   // the last x1 and y1.
   let x1 = 0,
     y1 = 0;
@@ -877,7 +877,8 @@ export const parsePath = (pathString: string): TComplexPathData => {
       // 00, 01, 10 or 11, making them identical to a plain number for the regex reMyNum
       // reset the regexp
       regExpArcCommandPoints.lastIndex = 0;
-      for (let out = null; (out = regExpArcCommandPoints.exec(matchStr)); ) {
+      let out: RegExpExecArray | null;
+      while ((out = regExpArcCommandPoints.exec(matchStr))) {
         paramArr.push(...out.slice(1));
       }
     } else {

package/src/util/path/regex.ts

@@ -5,7 +5,7 @@ const commaWsp = `\\s*,?\\s*`;
 /**
  * p for param
  * using "bad naming" here because it makes the regex much easier to read
- * p is a number that is preceded by an arbitary number of spaces, maybe 0,
+ * p is a number that is preceded by an arbitrary number of spaces, maybe 0,
  * a comma or not, and then possibly more spaces or not.
  */
 const p = `${commaWsp}(${reNum})`;

package/src/util/typeAssertions.spec.ts

@@ -41,7 +41,7 @@ describe('typeAssertions', () => {
       const newText = new NewText('hello world');
       expect(isTextObject(newText)).toBe(true);
     });
-    test('can safeguard agains other FabricObjects', () => {
+    test('can safeguard against other FabricObjects', () => {
       const path = new Path('M 0 0 L 1 1');
       expect(isTextObject(path)).toBe(false);
     });