fabric 7.0.0 → 7.2.0

package/src/Shadow.ts

@@ -6,6 +6,7 @@ import { Point } from './Point';
 import type { FabricObject } from './shapes/Object/FabricObject';
 import type { TClassProperties } from './typedefs';
 import { uid } from './util/internals/uid';
+import { escapeXml } from './util/lang_string';
 import { pickBy } from './util/misc/pick';
 import { degreesToRadians } from './util/misc/radiansDegreesConversion';
 import { toFixed } from './util/misc/toFixed';
@@ -27,7 +28,6 @@ import { rotateVector } from './util/misc/vectors';
 
 (?:$|\s): This captures either the end of the line or a whitespace character. It ensures that the match ends either at the end of the string or with a whitespace character.
    */
-// eslint-disable-next-line max-len
 
 const shadowOffsetRegex = '(-?\\d+(?:\\.\\d*)?(?:px)?(?:\\s?|$))?';
 
@@ -105,7 +105,7 @@ export class Shadow {
    */
   declare nonScaling: boolean;
 
-  declare id: number;
+  declare id: number | string;
 
   static ownDefaults = shadowDefaultValues;
 
@@ -163,6 +163,7 @@ export class Shadow {
         degreesToRadians(-object.angle),
       ),
       BLUR_BOX = 20,
+      NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS,
       color = new Color(this.color);
     let fBoxX = 40,
       fBoxY = 40;
@@ -173,14 +174,14 @@ export class Shadow {
       fBoxX =
         toFixed(
           (Math.abs(offset.x) + this.blur) / object.width,
-          config.NUM_FRACTION_DIGITS,
+          NUM_FRACTION_DIGITS,
         ) *
           100 +
         BLUR_BOX;
       fBoxY =
         toFixed(
           (Math.abs(offset.y) + this.blur) / object.height,
-          config.NUM_FRACTION_DIGITS,
+          NUM_FRACTION_DIGITS,
         ) *
           100 +
         BLUR_BOX;
@@ -192,19 +193,19 @@ export class Shadow {
       offset.y *= -1;
     }
 
-    return `<filter id="SVGID_${this.id}" y="-${fBoxY}%" height="${
+    return `<filter id="SVGID_${escapeXml(this.id)}" y="-${fBoxY}%" height="${
       100 + 2 * fBoxY
     }%" x="-${fBoxX}%" width="${
       100 + 2 * fBoxX
     }%" >\n\t<feGaussianBlur in="SourceAlpha" stdDeviation="${toFixed(
       this.blur ? this.blur / 2 : 0,
-      config.NUM_FRACTION_DIGITS,
+      NUM_FRACTION_DIGITS,
     )}"></feGaussianBlur>\n\t<feOffset dx="${toFixed(
       offset.x,
-      config.NUM_FRACTION_DIGITS,
+      NUM_FRACTION_DIGITS,
     )}" dy="${toFixed(
       offset.y,
-      config.NUM_FRACTION_DIGITS,
+      NUM_FRACTION_DIGITS,
     )}" result="oBlur" ></feOffset>\n\t<feFlood flood-color="${color.toRgb()}" flood-opacity="${color.getAlpha()}"/>\n\t<feComposite in2="oBlur" operator="in" />\n\t<feMerge>\n\t\t<feMergeNode></feMergeNode>\n\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n\t</feMerge>\n</filter>\n`;
   }
 

package/src/brushes/PencilBrush.spec.ts

@@ -2,9 +2,9 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { Canvas } from '../canvas/Canvas';
 import { PencilBrush } from './PencilBrush';
 import { parsePath } from '../util';
-import type { TPointerEvent } from '../EventTypeDefs';
 import { Path } from '../shapes/Path';
 import { Point } from '../Point';
+import { createPointerEvent } from '../../test/utils';
 
 describe('PencilBrush', () => {
   let canvas: Canvas;
@@ -55,12 +55,12 @@ describe('PencilBrush', () => {
 
       it('draws a point correctly', () => {
         const brush = new PencilBrush(canvas);
-        const e = { target: canvas.upperCanvasEl } as unknown as TPointerEvent;
-        const pointer = canvas.getScenePoint({
-          ...e,
+        const e = createPointerEvent({
+          target: canvas.upperCanvasEl,
           clientX: 10,
           clientY: 10,
         });
+        const pointer = canvas.getScenePoint(e);
         brush.onMouseDown(pointer, { e });
         // @ts-expect-error -- protected
         const pathData = brush.convertPointsToSVGPath(brush._points);
@@ -72,12 +72,12 @@ describe('PencilBrush', () => {
 
       it('handles multiple coincident points', () => {
         const brush = new PencilBrush(canvas);
-        const e = { target: canvas.upperCanvasEl } as unknown as TPointerEvent;
-        const pointer = canvas.getScenePoint({
-          ...e,
+        const e = createPointerEvent({
+          target: canvas.upperCanvasEl,
           clientX: 10,
           clientY: 10,
         });
+        const pointer = canvas.getScenePoint(e);
         brush.onMouseDown(pointer, { e });
         brush.onMouseMove(pointer, { e });
         brush.onMouseMove(pointer, { e });
@@ -95,7 +95,7 @@ describe('PencilBrush', () => {
 
       it('handles multiple non-coincident points', () => {
         const brush = new PencilBrush(canvas);
-        const e = { target: canvas.upperCanvasEl } as unknown as TPointerEvent;
+        const e = createPointerEvent({ target: canvas.upperCanvasEl });
         const pointer = canvas.getScenePoint({
           ...e,
           clientX: 10,
@@ -129,7 +129,7 @@ describe('PencilBrush', () => {
 
       it('handles points outside canvas', () => {
         const brush = new PencilBrush(canvas);
-        const e = { target: canvas.upperCanvasEl } as unknown as TPointerEvent;
+        const e = createPointerEvent({ target: canvas.upperCanvasEl });
         const pointer = canvas.getScenePoint({
           ...e,
           clientX: 10,
@@ -177,7 +177,7 @@ describe('PencilBrush', () => {
       it('limits points to canvas size when limitedToCanvasSize is true', () => {
         const brush = new PencilBrush(canvas);
         brush.limitedToCanvasSize = true;
-        const e = { target: canvas.upperCanvasEl } as unknown as TPointerEvent;
+        const e = createPointerEvent({ target: canvas.upperCanvasEl });
         const pointer = canvas.getScenePoint({
           ...e,
           clientX: 10,
@@ -237,7 +237,7 @@ describe('PencilBrush', () => {
         });
 
         const brush = new PencilBrush(canvas);
-        const e = { target: canvas.upperCanvasEl } as unknown as TPointerEvent;
+        const e = createPointerEvent({ target: canvas.upperCanvasEl });
         const pointer = canvas.getScenePoint({
           ...e,
           clientX: 10,

package/src/canvas/Canvas-dispose.spec.ts

@@ -195,23 +195,24 @@ describe('Canvas dispose', () => {
 
     it('dispose edge case: `toCanvasElement` after dispose', async () => {
       const canvas = new CanvasClass(undefined, { renderOnAddRemove: false });
-      const testImageData = (colorByteVal: number) => {
+      const getAlphaValues = () => {
         return canvas
           .toCanvasElement()
           .getContext('2d')!
-          .getImageData(0, 0, 20, 20)
-          .data.filter((_, i) => i % 4 === 0)
-          .every((x) => x === colorByteVal);
+          .getImageData(10, 10, 20, 20)
+          .data.filter((_, i) => i % 4 === 3);
       };
+      const hasOpaquePixels = () => getAlphaValues().some((x) => x === 255);
+      const isFullyTransparent = () => getAlphaValues().every((x) => x === 0);
       canvas.add(
         makeRect({ fill: 'red', width: 20, height: 20, top: 10, left: 10 }),
       );
-      expect(testImageData(255), 'control').toBeTruthy();
+      expect(hasOpaquePixels(), 'control').toBeTruthy();
       canvas.disposed = true;
-      expect(testImageData(255), 'should render canvas').toBeTruthy();
+      expect(hasOpaquePixels(), 'should render canvas').toBeTruthy();
       canvas.destroyed = true;
       expect(
-        testImageData(0),
+        isFullyTransparent(),
         'should have disabled canvas rendering',
       ).toBeTruthy();
       canvas.destroyed = false;

package/src/canvas/Canvas.spec.ts

@@ -10,6 +10,7 @@ import type {
   MultiSelectionStacking,
   TPointerEvent,
 } from '../../fabric';
+import { createPointerEvent } from '../../test/utils';
 import {
   ActiveSelection,
   Circle,
@@ -862,9 +863,7 @@ describe('Canvas', () => {
       deltaX: 5,
       deltaY: 5,
     });
-    canvas._onMouseUp({
-      target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent);
+    canvas._onMouseUp(createPointerEvent({ target: canvas.upperCanvasEl }));
 
     expect(fired, 'event fired for each of 3 rects').toBe(3);
   });
@@ -885,9 +884,7 @@ describe('Canvas', () => {
       deltaX: 5,
       deltaY: 5,
     });
-    canvas._onMouseUp({
-      target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent);
+    canvas._onMouseUp(createPointerEvent({ target: canvas.upperCanvasEl }));
 
     expect(isFired, 'selection created fired').toBe(true);
     expect(
@@ -917,9 +914,7 @@ describe('Canvas', () => {
       deltaX: 5,
       deltaY: 5,
     });
-    canvas._onMouseUp({
-      target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent);
+    canvas._onMouseUp(createPointerEvent({ target: canvas.upperCanvasEl }));
 
     expect(isFired, 'selection:created fired').toBe(true);
     expect(canvas.getActiveObject(), 'rect1 is set as activeObject').toBe(
@@ -1115,18 +1110,22 @@ describe('Canvas', () => {
     const rect = makeRect({ left: 0, top: 0 });
     canvas.add(rect);
 
-    const { target } = canvas.findTarget({
-      clientX: 5,
-      clientY: 5,
-      target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent);
+    const { target } = canvas.findTarget(
+      createPointerEvent({
+        clientX: 5,
+        clientY: 5,
+        target: canvas.upperCanvasEl,
+      }),
+    );
     expect(target, 'Should return the rect').toBe(rect);
 
-    const { target: target2 } = canvas.findTarget({
-      clientX: 30,
-      clientY: 30,
-      target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent);
+    const { target: target2 } = canvas.findTarget(
+      createPointerEvent({
+        clientX: 30,
+        clientY: 30,
+        target: canvas.upperCanvasEl,
+      }),
+    );
     expect(target2, 'Should not find target').toBeUndefined();
 
     canvas.remove(rect);
@@ -1897,16 +1896,15 @@ describe('Canvas', () => {
   });
 
   it('cleans up transform when discarding active object', () => {
-    const e = {
+    const e = createPointerEvent({
       clientX: 5,
       clientY: 5,
-      which: 1,
       target: canvas.upperCanvasEl,
-    };
+    });
     const target = makeRect();
     canvas.add(target);
     canvas.setActiveObject(target);
-    canvas._setupCurrentTransform(e as unknown as TPointerEvent, target, true);
+    canvas._setupCurrentTransform(e, target, true);
     expect(canvas._currentTransform, 'transform should be set').toBeTruthy();
 
     target.isMoving = true;
@@ -2221,11 +2219,11 @@ describe('Canvas', () => {
     const rect = new Rect({ left: 100, top: 100, width: 50, height: 50 });
     canvas.add(rect);
     const canvasOffset = canvas.calcOffset();
-    let eventStub = {
+    let eventStub = createPointerEvent({
       clientX: canvasOffset.left + 100,
       clientY: canvasOffset.top + 100,
       target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent;
+    });
     canvas.setActiveObject(rect);
     const targetCorner = rect.findControl(canvas.getViewportPoint(eventStub));
     rect.__corner = targetCorner ? targetCorner.key : undefined;
@@ -2237,11 +2235,11 @@ describe('Canvas', () => {
     expect(t.originX, 'no origin change for drag').toBe(rect.originX);
     expect(t.originY, 'no origin change for drag').toBe(rect.originY);
 
-    eventStub = {
+    eventStub = createPointerEvent({
       clientX: canvasOffset.left + rect.oCoords.tl.corner.tl.x + 1,
       clientY: canvasOffset.top + rect.oCoords.tl.corner.tl.y + 1,
       target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent;
+    });
     rect.__corner = rect.findControl(canvas.getViewportPoint(eventStub))!.key;
     canvas._setupCurrentTransform(eventStub, rect, false);
     t = canvas._currentTransform!;
@@ -2264,12 +2262,12 @@ describe('Canvas', () => {
     expect(t.originY, 'origin in opposite direction').toBe('bottom');
     expect(t.shiftKey, 'shift was not pressed').toBe(undefined);
 
-    eventStub = {
+    eventStub = createPointerEvent({
       clientX: canvasOffset.left + rect.left - 2 - rect.width / 2,
       clientY: canvasOffset.top + rect.top,
       target: canvas.upperCanvasEl,
       shiftKey: true,
-    } as unknown as TPointerEvent;
+    });
     rect.__corner = rect.findControl(canvas.getViewportPoint(eventStub))!.key;
     canvas._setupCurrentTransform(eventStub, rect, alreadySelected);
     t = canvas._currentTransform!;

package/src/canvas/CanvasOptions.ts

@@ -227,7 +227,8 @@ export interface CanvasEventsOptions {
 }
 
 export interface CanvasOptions
-  extends StaticCanvasOptions,
+  extends
+    StaticCanvasOptions,
     CanvasTransformOptions,
     CanvasSelectionOptions,
     CanvasCursorOptions,

package/src/canvas/SelectableCanvas.ts

@@ -1,4 +1,3 @@
-import { dragHandler } from '../controls/drag';
 import { getActionFromCorner } from '../controls/util';
 import { Point } from '../Point';
 import { FabricObject } from '../shapes/Object/FabricObject';
@@ -51,6 +50,8 @@ import type { CanvasOptions } from './CanvasOptions';
 import { canvasDefaults } from './CanvasOptions';
 import { Intersection } from '../Intersection';
 import { isActiveSelection } from '../util/typeAssertions';
+import { dragHandler } from '../controls';
+import { type FabricImage } from '../shapes/Image';
 
 export type TargetsInfo = {
   target?: FabricObject;
@@ -564,6 +565,8 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
    * Given the control clicked, determine the origin of the transform.
    * This is bad because controls can totally have custom names
    * should disappear before release 4.0
+   * Fabric 7.1, jan 2026 we are still using this.
+   * Needs to go.
    * @private
    * @deprecated
    */
@@ -571,15 +574,20 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
     target: FabricObject,
     controlName: string,
   ): { x: TOriginX; y: TOriginY } {
-    const origin = {
-      x: target.originX,
-      y: target.originY,
-    };
+    const origin = controlName
+      ? target.controls[controlName].getTransformAnchorPoint()
+      : {
+          x: target.originX,
+          y: target.originY,
+        };
 
     if (!controlName) {
       return origin;
     }
 
+    // this part down here is deprecated.
+    // It is left to do not change the standard behavior in the middle of a major version
+    // but when possible `getTransformAnchorPoint` will be the only source of truth
     // is a left control ?
     if (['ml', 'tl', 'bl'].includes(controlName)) {
       origin.x = RIGHT;
@@ -626,37 +634,52 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
       origin = this._shouldCenterTransform(target, action, altKey)
         ? ({ x: CENTER, y: CENTER } as const)
         : this._getOriginFromCorner(target, corner),
+      {
+        scaleX,
+        scaleY,
+        skewX,
+        skewY,
+        left,
+        top,
+        angle,
+        width,
+        height,
+        cropX,
+        cropY,
+      } = target as FabricImage,
       /**
        * relative to target's containing coordinate plane
        * both agree on every point
        **/
       transform: Transform = {
-        target: target,
+        target,
         action,
         actionHandler,
         actionPerformed: false,
         corner,
-        scaleX: target.scaleX,
-        scaleY: target.scaleY,
-        skewX: target.skewX,
-        skewY: target.skewY,
-        offsetX: pointer.x - target.left,
-        offsetY: pointer.y - target.top,
+        scaleX,
+        scaleY,
+        skewX,
+        skewY,
+        offsetX: pointer.x - left,
+        offsetY: pointer.y - top,
         originX: origin.x,
         originY: origin.y,
         ex: pointer.x,
         ey: pointer.y,
         lastX: pointer.x,
         lastY: pointer.y,
-        theta: degreesToRadians(target.angle),
-        width: target.width,
-        height: target.height,
+        theta: degreesToRadians(angle),
+        width,
+        height,
         shiftKey: e.shiftKey,
         altKey,
         original: {
           ...saveObjectTransform(target),
           originX: origin.x,
           originY: origin.y,
+          cropX,
+          cropY,
         },
       };
 

package/src/canvas/StaticCanvas.spec.ts

@@ -2241,6 +2241,26 @@ describe('StaticCanvas', () => {
   // });
 });
 
+describe('malicious tests', () => {
+  it('from JSON to svg', async () => {
+    const canvas = new StaticCanvas();
+    const maliciousJSON = {
+      objects: [
+        {
+          type: 'rect',
+          id: '"><set onbegin="alert(1)"/>',
+          width: 100,
+          height: 100,
+          fill: 'red',
+        },
+      ],
+    };
+    await canvas.loadFromJSON(maliciousJSON);
+    const svg = canvas.toSVG();
+    expect(svg).not.toContain('onbegin="alert(1)"');
+  });
+});
+
 function makeRect(options = {}) {
   const defaultOptions = { width: 10, height: 10 };
   return new Rect({ ...defaultOptions, ...options });

package/src/canvas/StaticCanvas.ts

@@ -44,6 +44,7 @@ import type { StaticCanvasOptions } from './StaticCanvasOptions';
 import { staticCanvasDefaults } from './StaticCanvasOptions';
 import { log, FabricError } from '../util/internals/console';
 import { getDevicePixelRatio } from '../env';
+import { escapeXml } from '../util/lang_string';
 
 /**
  * Having both options in TCanvasSizeOptions set to true transform the call in a calcOffset
@@ -86,9 +87,9 @@ export type PatternQuality = 'fast' | 'good' | 'best' | 'nearest' | 'bilinear';
  */
 // TODO: fix `EventSpec` inheritance https://github.com/microsoft/TypeScript/issues/26154#issuecomment-1366616260
 export class StaticCanvas<
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    EventSpec extends StaticCanvasEvents = StaticCanvasEvents,
-  >
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  EventSpec extends StaticCanvasEvents = StaticCanvasEvents,
+>
   extends createCollectionMixin(CommonMethods<CanvasEvents>)
   implements StaticCanvasOptions
 {
@@ -950,7 +951,9 @@ export class StaticCanvas<
     this._setSVGPreamble(markup, options);
     this._setSVGHeader(markup, options);
     if (this.clipPath) {
-      markup.push(`<g clip-path="url(#${this.clipPath.clipPathId})" >\n`);
+      markup.push(
+        `<g clip-path="url(#${escapeXml(this.clipPath.clipPathId ?? '')})" >\n`,
+      );
     }
     this._setSVGBgOverlayColor(markup, 'background');
     this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver);

package/src/canvas/StaticCanvasOptions.ts

@@ -113,9 +113,7 @@ export interface CanvasExportOptions {
 }
 
 export interface StaticCanvasOptions
-  extends CanvasDrawableOptions,
-    CanvasRenderingOptions,
-    CanvasExportOptions {
+  extends CanvasDrawableOptions, CanvasRenderingOptions, CanvasExportOptions {
   /**
    * Width in virtual/logical pixels of the canvas.
    * The canvas can be larger than width if retina scaling is active

package/src/constants.ts

@@ -24,6 +24,7 @@ export const TOP = 'top';
 export const BOTTOM = 'bottom';
 export const RIGHT = 'right';
 export const NONE = 'none';
+export const HEIGHT = 'height';
 
 export const reNewline = /\r?\n/;
 

package/src/controls/Control.spec.ts

@@ -67,4 +67,106 @@ describe('Controls', () => {
       Intersection.isPointInPolygon(new Point(15, 10), Object.values(coords)),
     ).toBe(true);
   });
+
+  describe('commonRenderProps', () => {
+    const createMockContext = () =>
+      ({
+        fillStyle: '',
+        strokeStyle: '',
+        translate: vi.fn(),
+        rotate: vi.fn(),
+      }) as unknown as CanvasRenderingContext2D;
+
+    test('returns default values from fabricObject', () => {
+      const control = new Control();
+      const ctx = createMockContext();
+      const fabricObject = new FabricObject({
+        cornerSize: 13,
+        cornerColor: 'blue',
+        transparentCorners: false,
+        cornerStrokeColor: 'red',
+      });
+
+      const result = control.commonRenderProps(ctx, 10, 20, fabricObject);
+
+      expect(result).toEqual({
+        stroke: true,
+        xSize: 13,
+        ySize: 13,
+        transparentCorners: false,
+        opName: 'fill',
+      });
+      expect(ctx.fillStyle).toBe('blue');
+      expect(ctx.strokeStyle).toBe('red');
+      expect(ctx.translate).toHaveBeenCalledWith(10, 20);
+      expect(ctx.rotate).toHaveBeenCalled();
+    });
+
+    test('uses control sizeX and sizeY when set', () => {
+      const control = new Control({ sizeX: 20, sizeY: 30 });
+      const ctx = createMockContext();
+      const fabricObject = new FabricObject({ cornerSize: 13 });
+
+      const result = control.commonRenderProps(ctx, 0, 0, fabricObject);
+
+      expect(result.xSize).toBe(20);
+      expect(result.ySize).toBe(30);
+    });
+
+    test('styleOverride takes precedence over fabricObject properties', () => {
+      const control = new Control();
+      const ctx = createMockContext();
+      const fabricObject = new FabricObject({
+        cornerSize: 13,
+        cornerColor: 'blue',
+        transparentCorners: false,
+        cornerStrokeColor: 'red',
+      });
+
+      const result = control.commonRenderProps(ctx, 0, 0, fabricObject, {
+        cornerSize: 25,
+        cornerColor: 'green',
+        transparentCorners: true,
+        cornerStrokeColor: 'yellow',
+      });
+
+      expect(result).toEqual({
+        stroke: false,
+        xSize: 25,
+        ySize: 25,
+        transparentCorners: true,
+        opName: 'stroke',
+      });
+      expect(ctx.fillStyle).toBe('green');
+      expect(ctx.strokeStyle).toBe('yellow');
+    });
+
+    test('returns stroke false when transparentCorners is true', () => {
+      const control = new Control();
+      const ctx = createMockContext();
+      const fabricObject = new FabricObject({
+        transparentCorners: true,
+        cornerStrokeColor: 'red',
+      });
+
+      const result = control.commonRenderProps(ctx, 0, 0, fabricObject);
+
+      expect(result.stroke).toBe(false);
+      expect(result.opName).toBe('stroke');
+    });
+
+    test('returns stroke false when no cornerStrokeColor is set', () => {
+      const control = new Control();
+      const ctx = createMockContext();
+      const fabricObject = new FabricObject({
+        transparentCorners: false,
+        cornerStrokeColor: '',
+      });
+
+      const result = control.commonRenderProps(ctx, 0, 0, fabricObject);
+
+      expect(result.stroke).toBe(false);
+      expect(result.opName).toBe('fill');
+    });
+  });
 });