fabric 7.0.0 → 7.2.0

package/src/shapes/IText/IText-click-behavior.spec.ts

@@ -13,10 +13,10 @@ import { Group } from '../Group';
 import { config } from '../../config';
 import type {
   ObjectPointerEvents,
-  TPointerEvent,
   TPointerEventInfo,
 } from '../../EventTypeDefs';
 import { Point } from '../../Point';
+import { createPointerEvent } from '../../../test/utils';
 
 describe('iText click interaction', () => {
   let canvas: Canvas;
@@ -40,12 +40,11 @@ describe('iText click interaction', () => {
 
     iText.canvas = canvas;
 
-    let eventData = {
-      which: 1,
+    let eventData = createPointerEvent({
       target: canvas.upperCanvasEl,
       clientX: 40,
       clientY: 10,
-    } as unknown as TPointerEvent;
+    });
 
     iText.enterEditing();
 
@@ -56,12 +55,11 @@ describe('iText click interaction', () => {
     expect(iText.selectionStart, 'dblClick selection start is').toBe(0);
     expect(iText.selectionEnd, 'dblClick selection end is').toBe(4);
 
-    eventData = {
-      which: 1,
+    eventData = createPointerEvent({
       target: canvas.upperCanvasEl,
       clientX: 40,
       clientY: 60,
-    } as unknown as TPointerEvent;
+    });
 
     iText.doubleClickHandler({
       e: eventData,
@@ -76,12 +74,11 @@ describe('iText click interaction', () => {
 
     iText.canvas = canvas;
 
-    const eventData = {
-      which: 1,
+    const eventData = createPointerEvent({
       target: canvas.upperCanvasEl,
       clientX: 40,
       clientY: 10,
-    } as unknown as TPointerEvent;
+    });
 
     iText.doubleClickHandler({
       e: eventData,
@@ -97,12 +94,11 @@ describe('iText click interaction', () => {
 
     iText.canvas = canvas;
 
-    let eventData = {
-      which: 1,
+    let eventData = createPointerEvent({
       target: canvas.upperCanvasEl,
       clientX: 40,
       clientY: 10,
-    } as unknown as TPointerEvent;
+    });
 
     iText.enterEditing();
 
@@ -113,12 +109,11 @@ describe('iText click interaction', () => {
     expect(iText.selectionStart, 'tripleClick selection start is').toBe(0);
     expect(iText.selectionEnd, 'tripleClick selection end is').toBe(19);
 
-    eventData = {
-      which: 1,
+    eventData = createPointerEvent({
       target: canvas.upperCanvasEl,
       clientX: 40,
       clientY: 60,
-    } as unknown as TPointerEvent;
+    });
 
     iText.tripleClickHandler({
       e: eventData,
@@ -137,12 +132,11 @@ describe('iText click interaction', () => {
 
     iText.canvas = canvas;
 
-    const eventData = {
-      which: 1,
+    const eventData = createPointerEvent({
       target: canvas.upperCanvasEl,
       clientX: 40,
       clientY: 10,
-    } as unknown as TPointerEvent;
+    });
 
     iText.tripleClickHandler({
       e: eventData,
@@ -153,12 +147,11 @@ describe('iText click interaction', () => {
   });
 
   test('getSelectionStartFromPointer with scale', () => {
-    const eventData = {
-      which: 1,
+    const eventData = createPointerEvent({
       target: canvas.upperCanvasEl,
       clientX: 70,
       clientY: 10,
-    } as unknown as TPointerEvent;
+    });
 
     const iText = new IText('test need some word\nsecond line', {
       scaleX: 3,
@@ -186,10 +179,7 @@ describe('iText click interaction', () => {
 
     expect(iText.getSelectionStartFromPointer(eventData), 'index').toBe(5);
     expect(
-      iText.getSelectionStartFromPointer({
-        ...eventData,
-        clientY: 20,
-      } as unknown as TPointerEvent),
+      iText.getSelectionStartFromPointer({ ...eventData, clientY: 20 }),
       'index',
     ).toBe(5);
   });
@@ -275,11 +265,11 @@ describe('iText click interaction', () => {
     canvas.add(group);
     // @ts-expect-error -- protected member
     iText.selected = true;
-    const evt = {
+    const evt = createPointerEvent({
       clientX: 1,
       clientY: 1,
       target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent;
+    });
     canvas._cacheTransformEventData(evt);
     canvas.__onMouseUp(evt);
     // @ts-expect-error -- protected member
@@ -309,11 +299,13 @@ describe('iText click interaction', () => {
     // @ts-expect-error -- protected member
     iText.selected = true;
 
-    canvas._onMouseUp({
-      clientX: 1,
-      clientY: 1,
-      target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent);
+    canvas._onMouseUp(
+      createPointerEvent({
+        clientX: 1,
+        clientY: 1,
+        target: canvas.upperCanvasEl,
+      }),
+    );
 
     expect(iText.isEditing, 'iText should enter editing').toBe(true);
 
@@ -322,11 +314,13 @@ describe('iText click interaction', () => {
     // @ts-expect-error -- protected member
     iText.selected = true;
 
-    canvas._onMouseUp({
-      clientX: 1,
-      clientY: 1,
-      target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent);
+    canvas._onMouseUp(
+      createPointerEvent({
+        clientX: 1,
+        clientY: 1,
+        target: canvas.upperCanvasEl,
+      }),
+    );
 
     expect(iText.isEditing, 'iText should not enter editing').toBe(false);
   });
@@ -376,19 +370,12 @@ describe('iText click interaction', () => {
           enableRetinaScaling,
         });
 
-        eventData = {
-          which: 1,
+        eventData = createPointerEvent({
           target: testCanvas.upperCanvasEl,
           ...(enableRetinaScaling
-            ? {
-                clientX: 60,
-                clientY: 30,
-              }
-            : {
-                clientX: 30,
-                clientY: 15,
-              }),
-        } as unknown as TPointerEvent;
+            ? { clientX: 60, clientY: 30 }
+            : { clientX: 30, clientY: 15 }),
+        });
 
         count = 0;
         countCanvas = 0;

package/src/shapes/IText/IText.ts

@@ -72,8 +72,7 @@ interface UniqueITextProps {
 }
 
 export interface SerializedITextProps
-  extends SerializedTextProps,
-    UniqueITextProps {}
+  extends SerializedTextProps, UniqueITextProps {}
 
 export interface ITextProps extends TextProps, UniqueITextProps {}
 
@@ -121,10 +120,10 @@ export interface ITextProps extends TextProps, UniqueITextProps {}
  * ```
  */
 export class IText<
-    Props extends TOptions<ITextProps> = Partial<ITextProps>,
-    SProps extends SerializedITextProps = SerializedITextProps,
-    EventSpec extends ITextEvents = ITextEvents,
-  >
+  Props extends TOptions<ITextProps> = Partial<ITextProps>,
+  SProps extends SerializedITextProps = SerializedITextProps,
+  EventSpec extends ITextEvents = ITextEvents,
+>
   extends ITextClickBehavior<Props, SProps, EventSpec>
   implements UniqueITextProps
 {

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { config } from '../../config';
 import { noop } from '../../constants';
 import { getEnv, getFabricWindow } from '../../env';

package/src/shapes/IText/__snapshots__/ITextBehavior.test.ts.snap

@@ -442,7 +442,7 @@ exports[`text imperative changes > insertChars 2`] = `
   "text": "tabest",
   "top": 0,
   "type": "IText",
-  "width": 58,
+  "width": 58.31,
 }
 `;
 
@@ -563,7 +563,7 @@ exports[`text imperative changes > insertChars and removes chars 2`] = `
   "text": "tabst",
   "top": 0,
   "type": "IText",
-  "width": 47,
+  "width": 47.22,
 }
 `;
 
@@ -646,7 +646,7 @@ exports[`text imperative changes > insertChars and removes chars 4`] = `
   "text": "tab",
   "top": 0,
   "type": "IText",
-  "width": 31,
+  "width": 30.54,
 }
 `;
 
@@ -853,7 +853,7 @@ exports[`text imperative changes > insertChars can accept some style for the new
 aest",
   "top": 0,
   "type": "IText",
-  "width": 39,
+  "width": 38.87,
 }
 `;
 
@@ -1027,7 +1027,7 @@ exports[`text imperative changes > insertChars handles new lines correctly 2`] =
 est",
   "top": 0,
   "type": "IText",
-  "width": 31,
+  "width": 30.54,
 }
 `;
 
@@ -1105,6 +1105,6 @@ exports[`text imperative changes > removeChars 2`] = `
   "text": "tt",
   "top": 0,
   "type": "IText",
-  "width": 14,
+  "width": 13.89,
 }
 `;

package/src/shapes/Image.spec.ts

@@ -13,7 +13,6 @@ import {
   getFabricDocument,
   getFilterBackend,
   Rect,
-  version,
   WebGLFilterBackend,
 } from '../../fabric';
 import { removeTransformMatrixForSvgParsing } from '../util';
@@ -21,6 +20,7 @@ import * as FilterBackend from '../filters/FilterBackend';
 import { FabricError } from '../util/internals/console';
 import TestImageGif from '../../test/fixtures/test_image.gif';
 import { isJSDOM } from '../../vitest.extend';
+import { createReferenceObject } from '../../test/utils';
 
 const IMG_SRC = isJSDOM() ? 'test_image.gif' : TestImageGif;
 const imgSrcUrl = new URL(IMG_SRC, import.meta.url).pathname;
@@ -29,44 +29,16 @@ const IMG_WIDTH = 276;
 const IMG_HEIGHT = 110;
 const IMG_URL_NON_EXISTING = 'http://www.google.com/non-existing';
 
-const REFERENCE_IMG_OBJECT = {
-  version: version,
-  type: 'Image',
-  originX: 'center' as const,
-  originY: 'center' as const,
-  left: 0,
-  top: 0,
+const REFERENCE_IMG_OBJECT = createReferenceObject('Image', {
   width: IMG_WIDTH,
   height: IMG_HEIGHT,
-  fill: 'rgb(0,0,0)',
-  stroke: null,
   strokeWidth: 0,
-  strokeDashArray: null,
-  strokeLineCap: 'butt' as const,
-  strokeDashOffset: 0,
-  strokeLineJoin: 'miter' as const,
-  strokeMiterLimit: 4,
-  scaleX: 1,
-  scaleY: 1,
-  angle: 0,
-  flipX: false,
-  flipY: false,
-  opacity: 1,
   src: IMG_SRC,
-  shadow: null,
-  visible: true,
-  backgroundColor: '',
   filters: [],
-  fillRule: 'nonzero' as const,
-  paintFirst: 'fill' as const,
-  globalCompositeOperation: 'source-over' as const,
-  skewX: 0,
-  skewY: 0,
   crossOrigin: null,
   cropX: 0,
   cropY: 0,
-  strokeUniform: false,
-};
+});
 
 describe('FabricImage', () => {
   describe('Svg export', () => {
@@ -88,7 +60,7 @@ describe('FabricImage', () => {
           offsetY: 14,
         }),
       });
-      expect(img.toSVG()).toMatchSnapshot();
+      expect(img.toSVG()).toMatchSVGSnapshot();
     });
   });
 
@@ -108,7 +80,7 @@ describe('FabricImage', () => {
         200,
         200,
         img.getElement(),
-        'texture3',
+        expect.stringMatching(/^texture\d+$/),
       );
     } finally {
       mockApply.mockRestore();
@@ -1000,6 +972,18 @@ describe('FabricImage', () => {
       expect(img.scaleY).toBe(5);
     });
   });
+
+  describe('attribute injection', () => {
+    it('source injection', () => {
+      const element = newImg('javascript:alert(1)');
+      const img = new FabricImage(element, {
+        width: 100,
+        height: 100,
+      });
+      const svg = img.toSVG();
+      expect(svg).toContain('xlink:href="javascript:alert(1)"'); // Should be escaped
+    });
+  });
 });
 
 export function newImg(src = IMG_SRC): HTMLImageElement {

package/src/shapes/Image.ts

@@ -31,6 +31,7 @@ import type { CSSRules } from '../parser/typedefs';
 import type { Resize, ResizeSerializedProps } from '../filters/Resize';
 import type { TCachedFabricObject } from './Object/Object';
 import { log } from '../util/internals/console';
+import { escapeXml } from '../util/lang_string';
 
 // @todo Would be nice to have filtering code not imported directly.
 
@@ -86,10 +87,10 @@ const IMAGE_PROPS = ['cropX', 'cropY'] as const;
  * @see {@link http://fabric5.fabricjs.com/fabric-intro-part-1#images}
  */
 export class FabricImage<
-    Props extends TOptions<ImageProps> = Partial<ImageProps>,
-    SProps extends SerializedImageProps = SerializedImageProps,
-    EventSpec extends ObjectEvents = ObjectEvents,
-  >
+  Props extends TOptions<ImageProps> = Partial<ImageProps>,
+  SProps extends SerializedImageProps = SerializedImageProps,
+  EventSpec extends ObjectEvents = ObjectEvents,
+>
   extends FabricObject<Props, SProps, EventSpec>
   implements ImageProps
 {
@@ -389,9 +390,9 @@ export class FabricImage<
           '" y="' +
           y +
           '" width="' +
-          this.width +
+          escapeXml(this.width) +
           '" height="' +
-          this.height +
+          escapeXml(this.height) +
           '" />\n',
         '</clipPath>\n',
       );
@@ -403,7 +404,7 @@ export class FabricImage<
     imageMarkup.push(
       '\t<image ',
       'COMMON_PARTS',
-      `xlink:href="${this.getSvgSrc(true)}" x="${x - this.cropX}" y="${
+      `xlink:href="${escapeXml(this.getSrc(true))}" x="${x - this.cropX}" y="${
         y - this.cropY
         // we're essentially moving origin of transformation from top/left corner to the center of the shape
         // by wrapping it in container <g> element with actual transformation, then offsetting object to the top/left
@@ -419,9 +420,9 @@ export class FabricImage<
       const origFill = this.fill;
       this.fill = null;
       strokeSvg = [
-        `\t<rect x="${x}" y="${y}" width="${this.width}" height="${
-          this.height
-        }" style="${this.getSvgStyles()}" />\n`,
+        `\t<rect x="${x}" y="${y}" width="${escapeXml(this.width)}" height="${escapeXml(
+          this.height,
+        )}" style="${this.getSvgStyles()}" />\n`,
       ];
       this.fill = origFill;
     }
@@ -470,7 +471,10 @@ export class FabricImage<
    * @param {String} src Source string (URL)
    * @param {LoadImageOptions} [options] Options object
    */
-  setSrc(src: string, { crossOrigin, signal }: LoadImageOptions = {}) {
+  setSrc(
+    src: string,
+    { crossOrigin, signal }: LoadImageOptions = {},
+  ): Promise<void> {
     return loadImage(src, { crossOrigin, signal }).then((img) => {
       typeof crossOrigin !== 'undefined' && this.set({ crossOrigin });
       this.setElement(img);

package/src/shapes/Line.spec.ts

@@ -1,46 +1,20 @@
 import { describe, expect, it } from 'vitest';
 import { Line } from './Line';
-import { getFabricDocument, version } from '../../fabric';
+import { getFabricDocument } from '../../fabric';
 import { FabricObject } from './Object/Object';
+import { createReferenceObject } from '../../test/utils';
 
 describe('Line', () => {
-  const LINE_OBJECT = {
-    version: version,
-    type: 'Line',
-    originX: 'center',
-    originY: 'center',
+  const LINE_OBJECT = createReferenceObject('Line', {
     left: 12,
     top: 13,
     width: 2,
     height: 2,
-    fill: 'rgb(0,0,0)',
-    stroke: null,
-    strokeWidth: 1,
-    strokeDashArray: null,
-    strokeLineCap: 'butt',
-    strokeDashOffset: 0,
-    strokeLineJoin: 'miter',
-    strokeMiterLimit: 4,
-    scaleX: 1,
-    scaleY: 1,
-    angle: 0,
-    flipX: false,
-    flipY: false,
-    opacity: 1,
     x1: -1,
     y1: -1,
     x2: 1,
     y2: 1,
-    shadow: null,
-    visible: true,
-    backgroundColor: '',
-    fillRule: 'nonzero',
-    paintFirst: 'fill',
-    globalCompositeOperation: 'source-over',
-    skewX: 0,
-    skewY: 0,
-    strokeUniform: false,
-  } as const;
+  });
 
   it('initializes constructor correctly', () => {
     expect(Line).toBeTruthy();

package/src/shapes/Line.ts

@@ -23,8 +23,7 @@ interface UniqueLineProps {
 }
 
 export interface SerializedLineProps
-  extends SerializedObjectProps,
-    UniqueLineProps {}
+  extends SerializedObjectProps, UniqueLineProps {}
 
 /**
  * A Class to draw a line
@@ -34,10 +33,10 @@ export interface SerializedLineProps
  * @deprecated
  */
 export class Line<
-    Props extends TOptions<FabricObjectProps> = Partial<FabricObjectProps>,
-    SProps extends SerializedLineProps = SerializedLineProps,
-    EventSpec extends ObjectEvents = ObjectEvents,
-  >
+  Props extends TOptions<FabricObjectProps> = Partial<FabricObjectProps>,
+  SProps extends SerializedLineProps = SerializedLineProps,
+  EventSpec extends ObjectEvents = ObjectEvents,
+>
   extends FabricObject<Props, SProps, EventSpec>
   implements UniqueLineProps
 {
@@ -200,18 +199,14 @@ export class Line<
    */
   calcLinePoints(): UniqueLineProps {
     const { x1: _x1, x2: _x2, y1: _y1, y2: _y2, width, height } = this;
-    const xMult = _x1 <= _x2 ? -1 : 1,
-      yMult = _y1 <= _y2 ? -1 : 1,
-      x1 = (xMult * width) / 2,
-      y1 = (yMult * height) / 2,
-      x2 = (xMult * -width) / 2,
-      y2 = (yMult * -height) / 2;
+    const xMult = _x1 <= _x2 ? -0.5 : 0.5,
+      yMult = _y1 <= _y2 ? -0.5 : 0.5;
 
     return {
-      x1,
-      x2,
-      y1,
-      y2,
+      x1: xMult * width,
+      x2: xMult * -width,
+      y1: yMult * height,
+      y2: yMult * -height,
     };
   }
 

package/src/shapes/Object/FabricObjectSVGExportMixin.ts

@@ -5,6 +5,7 @@ import { FILL, NONE, STROKE } from '../../constants';
 import type { FabricObject } from './FabricObject';
 import { isFiller } from '../../util/typeAssertions';
 import { matrixToSVG } from '../../util/misc/svgExport';
+import { escapeXml } from '../../util/lang_string';
 
 export class FabricObjectSVGExportMixin {
   /**
@@ -67,7 +68,9 @@ export class FabricObjectSVGExportMixin {
       ';',
       filter,
       visibility,
-    ].join('');
+    ]
+      .map((v) => escapeXml(v))
+      .join('');
   }
 
   /**
@@ -75,7 +78,9 @@ export class FabricObjectSVGExportMixin {
    * @return {String}
    */
   getSvgFilter(this: FabricObjectSVGExportMixin & FabricObject) {
-    return this.shadow ? `filter: url(#SVGID_${this.shadow.id});` : '';
+    return this.shadow
+      ? `filter: url(#SVGID_${escapeXml(this.shadow.id)});`
+      : '';
   }
 
   /**
@@ -86,7 +91,7 @@ export class FabricObjectSVGExportMixin {
     this: FabricObjectSVGExportMixin & FabricObject & { id?: string },
   ) {
     return [
-      this.id ? `id="${this.id}" ` : '',
+      this.id ? `id="${escapeXml(String(this.id))}" ` : '',
       this.clipPath
         ? `clip-path="url(#${
             (this.clipPath as FabricObjectSVGExportMixin & FabricObject)
@@ -248,6 +253,8 @@ export class FabricObjectSVGExportMixin {
   }
 
   addPaintOrder(this: FabricObjectSVGExportMixin & FabricObject) {
-    return this.paintFirst !== FILL ? ` paint-order="${this.paintFirst}" ` : '';
+    return this.paintFirst !== FILL
+      ? ` paint-order="${escapeXml(this.paintFirst)}" `
+      : '';
   }
 }

package/src/shapes/Object/InteractiveObject.ts

@@ -41,10 +41,10 @@ export type TStyleOverride = ControlRenderingStyleOverride &
   >;
 
 export class InteractiveFabricObject<
-    Props extends TFabricObjectProps = Partial<FabricObjectProps>,
-    SProps extends SerializedObjectProps = SerializedObjectProps,
-    EventSpec extends ObjectEvents = ObjectEvents,
-  >
+  Props extends TFabricObjectProps = Partial<FabricObjectProps>,
+  SProps extends SerializedObjectProps = SerializedObjectProps,
+  EventSpec extends ObjectEvents = ObjectEvents,
+>
   extends FabricObject<Props, SProps, EventSpec>
   implements FabricObjectProps
 {

package/src/shapes/Object/Object.ts

@@ -176,11 +176,11 @@ export type DrawContext =
  * @fires drop
  */
 export class FabricObject<
-    Props extends TOptions<ObjectProps> = Partial<ObjectProps>,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    SProps extends SerializedObjectProps = SerializedObjectProps,
-    EventSpec extends ObjectEvents = ObjectEvents,
-  >
+  Props extends TOptions<ObjectProps> = Partial<ObjectProps>,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  SProps extends SerializedObjectProps = SerializedObjectProps,
+  EventSpec extends ObjectEvents = ObjectEvents,
+>
   extends ObjectGeometry<EventSpec>
   implements ObjectProps
 {
@@ -834,6 +834,7 @@ export class FabricObject<
     } else {
       this._renderBackground(ctx);
     }
+    this.fire('before:render', { ctx });
     this._render(ctx);
     this._drawClipPath(ctx, this.clipPath, context);
     this.fill = originalFill;

package/src/shapes/Object/ObjectGeometry.spec.ts

@@ -692,6 +692,21 @@ describe('fabric.ObjectGeometry', () => {
     ]);
   });
 
+  it('calcOwnMatrix is cached', () => {
+    const cObj = new FabricObject({
+      width: 10,
+      height: 15,
+      strokeWidth: 0,
+      originX: LEFT,
+      originY: TOP,
+    });
+    cObj.scaleX = 2;
+    cObj.scaleY = 3;
+    const expectedMatrix = cObj.calcOwnMatrix();
+    expect(expectedMatrix).toEqual([2, 0, 0, 3, 10, 22.5]);
+    expect(cObj.calcOwnMatrix()).toBe(expectedMatrix);
+  });
+
   it('scaleToWidth', () => {
     const cObj = new FabricObject({ width: 560, strokeWidth: 0 });
     expect(cObj.scaleToWidth).toBeTypeOf('function');

package/src/shapes/Object/ObjectGeometry.ts

@@ -513,7 +513,7 @@ export class ObjectGeometry<EventSpec extends ObjectEvents = ObjectEvents>
   calcOwnMatrix(): TMat2D {
     const key = this.transformMatrixKey(true),
       cache = this.ownMatrixCache;
-    if (cache && cache.key === key) {
+    if (cache && cache.key.every((x, i) => x === key[i])) {
       return cache.value;
     }
     const center = this.getRelativeCenterPoint(),