fabric 7.0.0 → 7.2.0

package/extensions/cropping_controls/croppingHandlers.ts

@@ -0,0 +1,285 @@
+import type {
+  TModificationEvents,
+  Transform,
+  TransformActionHandler,
+  FabricImage,
+  ObjectEvents,
+  Control,
+  TMat2D,
+} from 'fabric';
+import { controlsUtils, Point, util } from 'fabric';
+
+const { wrapWithFixedAnchor, wrapWithFireEvent } = controlsUtils;
+
+/**
+ * Wrap controlsUtils.changeObjectWidth with image constrains
+ */
+export const changeImageWidth: TransformActionHandler = (
+  eventData,
+  transform,
+  x,
+  y,
+) => {
+  const { target } = transform;
+  const { width } = target;
+  const image = target as FabricImage;
+  const modified = controlsUtils.changeObjectWidth(eventData, transform, x, y);
+  const availableWidth = image._element.width - image.cropX;
+  if (modified) {
+    if (image.width > availableWidth) {
+      image.width = availableWidth;
+    }
+    if (image.width < 1) {
+      image.width = 1;
+    }
+  }
+  return width !== image.width;
+};
+
+export const changeCropWidth = wrapWithFireEvent(
+  'CROPPING' as TModificationEvents,
+  wrapWithFixedAnchor(changeImageWidth),
+);
+
+/**
+ * Wrap controlsUtils.changeObjectHeight with image constrains
+ */
+export const changeImageHeight: TransformActionHandler = (
+  eventData,
+  transform,
+  x,
+  y,
+) => {
+  const { target } = transform;
+  const { height } = target;
+  const image = target as FabricImage;
+  const modified = controlsUtils.changeObjectHeight(eventData, transform, x, y);
+  const availableHeight = image._element.height - image.cropY;
+  if (modified) {
+    if (image.height > availableHeight) {
+      image.height = availableHeight;
+    }
+    if (image.height < 1) {
+      image.height = 1;
+    }
+  }
+  return height !== image.height;
+};
+
+export const changeCropHeight = wrapWithFireEvent(
+  'CROPPING' as TModificationEvents,
+  wrapWithFixedAnchor(changeImageHeight),
+);
+
+export const changeImageCropX: TransformActionHandler = (
+  eventData,
+  transform,
+  x,
+  y,
+) => {
+  const { target } = transform;
+  const image = target as FabricImage;
+  const { width, cropX } = image;
+  const modified = controlsUtils.changeObjectWidth(eventData, transform, x, y);
+  let newCropX = cropX + width - image.width;
+  image.width = width;
+  if (modified) {
+    if (newCropX < 0) {
+      newCropX = 0;
+    }
+    image.cropX = newCropX;
+    // calculate new width on the base of how much crop we have now
+    image.width += cropX - newCropX;
+  }
+  return newCropX !== cropX;
+};
+
+export const changeImageCropY: TransformActionHandler = (
+  eventData,
+  transform,
+  x,
+  y,
+) => {
+  const { target } = transform;
+  const image = target as FabricImage;
+  const { height, cropY } = image;
+  const modified = controlsUtils.changeObjectHeight(eventData, transform, x, y);
+  let newCropY = cropY + height - image.height;
+  image.height = height;
+  if (modified) {
+    if (newCropY < 0) {
+      newCropY = 0;
+    }
+    image.cropY = newCropY;
+    image.height += cropY - newCropY;
+  }
+  return newCropY !== cropY;
+};
+
+export const changeCropX = wrapWithFireEvent(
+  'CROPPING' as TModificationEvents,
+  wrapWithFixedAnchor(changeImageCropX),
+);
+
+export const changeCropY = wrapWithFireEvent(
+  'CROPPING' as TModificationEvents,
+  wrapWithFixedAnchor(changeImageCropY),
+);
+
+/**
+ * A function to counter the move action and change cropX/cropY of an image
+ * Keep the image steady, but moves it inside its own cropping rectangle
+ */
+export const cropPanMoveHandler = ({ transform }: ObjectEvents['moving']) => {
+  // this makes the image pan too fast.
+  const { target, original } = transform as Transform;
+  const fabricImage = target as FabricImage;
+  const p = new Point(
+    target.left - original.left,
+    target.top - original.top,
+  ).transform(
+    util.invertTransform(
+      util.createRotateMatrix({ angle: fabricImage.getTotalAngle() }),
+    ),
+  );
+  let cropX = original.cropX! - p.x / fabricImage.scaleX;
+  let cropY = original.cropY! - p.y / fabricImage.scaleY;
+  const { width, height, _element } = fabricImage;
+  if (cropX < 0) {
+    cropX = 0;
+  }
+  if (cropY < 0) {
+    cropY = 0;
+  }
+  if (cropX + width > _element.width) {
+    cropX = _element.width - width;
+  }
+  if (cropY + height > _element.height) {
+    cropY = _element.height - height;
+  }
+  fabricImage.cropX = cropX;
+  fabricImage.cropY = cropY;
+  fabricImage.left = original.left;
+  fabricImage.top = original.top;
+};
+
+/**
+ * This position handler works only for this specific use case.
+ * It does not support padding nor offset, and it reduces all possible positions
+ * to the main 4 corners only.
+ * Any position that is < 0 is the extreme left/top, the rest are right/bottom
+ */
+export function ghostScalePositionHandler(
+  this: Control,
+  dim: Point, // currentDimension
+  finalMatrix: TMat2D,
+  fabricObject: FabricImage,
+  // currentControl: Control,
+) {
+  const matrix = fabricObject.calcTransformMatrix();
+  const vpt = fabricObject.getViewportTransform();
+  const _finalMatrix = util.multiplyTransformMatrices(vpt, matrix);
+
+  let x = 0;
+  let y = 0;
+  if (this.x < 0) {
+    x = -fabricObject.width / 2 - fabricObject.cropX;
+  } else {
+    x =
+      fabricObject.getElement().width -
+      fabricObject.width / 2 -
+      fabricObject.cropX;
+  }
+
+  if (this.y < 0) {
+    y = -fabricObject.height / 2 - fabricObject.cropY;
+  } else {
+    y =
+      fabricObject.getElement().height -
+      fabricObject.height / 2 -
+      fabricObject.cropY;
+  }
+  return new Point(x, y).transform(_finalMatrix);
+}
+
+const calcScale = (currentPoint: Point, height: number, width: number) =>
+  Math.min(Math.abs(currentPoint.x / width), Math.abs(currentPoint.y / height));
+
+/**
+ * Action handler generator that handles scaling of an image in crop mode.
+ * The goal is to keep the current bounding box steady.
+ * So this action handler has its own calculations for a dynamic anchor point
+ */
+export const scaleEquallyCropGenerator =
+  (cx: number, cy: number): TransformActionHandler =>
+  (eventData, transform, x, y) => {
+    const { target } = transform as unknown as { target: FabricImage };
+    const { width: fullWidth, height: fullHeight } = target.getElement();
+    const remainderX = fullWidth - target.width - target.cropX;
+    const remainderY = fullHeight - target.height - target.cropY;
+    const anchorOriginX =
+      cx < 0 ? 1 + remainderX / target.width : -target.cropX / target.width;
+    const anchorOriginY =
+      cy < 0 ? 1 + remainderY / target.height : -target.cropY / target.height;
+    const constraint = target.translateToOriginPoint(
+      target.getCenterPoint(),
+      anchorOriginX,
+      anchorOriginY,
+    );
+    const newPoint = controlsUtils.getLocalPoint(
+      transform,
+      anchorOriginX,
+      anchorOriginY,
+      x,
+      y,
+    );
+    const scale = calcScale(newPoint, fullHeight, fullWidth);
+    const scaleChangeX = scale / target.scaleX;
+    const scaleChangeY = scale / target.scaleY;
+    const scaledRemainderX = remainderX / scaleChangeX;
+    const scaledRemainderY = remainderY / scaleChangeY;
+    const newWidth = target.width / scaleChangeX;
+    const newHeight = target.height / scaleChangeY;
+    const newCropX =
+      cx < 0
+        ? fullWidth - newWidth - scaledRemainderX
+        : target.cropX / scaleChangeX;
+    const newCropY =
+      cy < 0
+        ? fullHeight - newHeight - scaledRemainderY
+        : target.cropY / scaleChangeY;
+
+    if (
+      (cx < 0 ? scaledRemainderX : newCropX) + newWidth > fullWidth ||
+      (cy < 0 ? scaledRemainderY : newCropY) + newHeight > fullHeight
+    ) {
+      return false;
+    }
+
+    target.scaleX = scale;
+    target.scaleY = scale;
+    target.width = newWidth;
+    target.height = newHeight;
+    target.cropX = newCropX;
+    target.cropY = newCropY;
+    const newAnchorOriginX =
+      cx < 0 ? 1 + scaledRemainderX / newWidth : -newCropX / newWidth;
+    const newAnchorOriginY =
+      cy < 0 ? 1 + scaledRemainderY / newHeight : -newCropY / newHeight;
+    target.setPositionByOrigin(constraint, newAnchorOriginX, newAnchorOriginY);
+    return true;
+  };
+
+export function renderGhostImage(
+  this: FabricImage,
+  { ctx }: { ctx: CanvasRenderingContext2D },
+) {
+  const alpha = ctx.globalAlpha;
+  ctx.globalAlpha *= 0.5;
+  ctx.drawImage(
+    this._element,
+    -this.width / 2 - this.cropX,
+    -this.height / 2 - this.cropY,
+  );
+  ctx.globalAlpha = alpha;
+}

package/extensions/cropping_controls/enterCropMode.ts

@@ -0,0 +1,30 @@
+import { type FabricImage, type TPointerEventInfo } from 'fabric';
+import { createImageCroppingControls } from './croppingControls';
+import { cropPanMoveHandler, renderGhostImage } from './croppingHandlers';
+/**
+ * Coordinates the change to image to enter crop mode and returns
+ * a function to exit crop mode
+ */
+export const enterCropMode = function enterCropMode(
+  this: (args: TPointerEventInfo) => void,
+  { target }: TPointerEventInfo,
+) {
+  const fabricImage = target as FabricImage;
+  const { controls, padding } = fabricImage;
+  fabricImage.padding = 0;
+  fabricImage.controls = createImageCroppingControls();
+  fabricImage.on('moving', cropPanMoveHandler);
+  fabricImage.on('before:render', renderGhostImage);
+  fabricImage.setCoords();
+  const exitCropMode = () => {
+    fabricImage.padding = padding;
+    fabricImage.off('moving', cropPanMoveHandler);
+    fabricImage.off('before:render', renderGhostImage);
+    fabricImage.controls = controls;
+    fabricImage.setCoords();
+    fabricImage.once('mousedblclick', enterCropMode);
+    fabricImage.canvas?.requestRenderAll();
+  };
+  fabricImage.once('mousedblclick', exitCropMode);
+  fabricImage.canvas?.requestRenderAll();
+};

package/extensions/cropping_controls/renderCornerControl.ts

@@ -0,0 +1,53 @@
+import {
+  type ControlRenderingStyleOverride,
+  type InteractiveFabricObject,
+  util,
+  type Control,
+} from 'fabric';
+
+const { degreesToRadians } = util;
+
+/**
+ * Render a control for the main corners of a cropping image
+ * This function is written to respect object properties like transparentCorners, cornerSize
+ * cornerColor, cornerStrokeColor
+ * plus the addition of offsetY and offsetX.
+ * @param {CanvasRenderingContext2D} ctx context to render on
+ * @param {Number} left x coordinate where the control center should be
+ * @param {Number} top y coordinate where the control center should be
+ * @param {Object} styleOverride override for FabricObject controls style
+ * @param {FabricObject} fabricObject the fabric object for which we are rendering controls
+ */
+export function renderCornerControl(
+  this: Control,
+  ctx: CanvasRenderingContext2D,
+  left: number,
+  top: number,
+  styleOverride: ControlRenderingStyleOverride,
+  fabricObject: InteractiveFabricObject,
+) {
+  ctx.save();
+  const { stroke, xSize, ySize, opName } = this.commonRenderProps(
+      ctx,
+      left,
+      top,
+      fabricObject,
+      styleOverride,
+    ),
+    xSizeBy2 = xSize / 2,
+    ySizeBy2 = ySize / 2;
+  //  angle is relative to canvas plane
+  ctx.rotate(degreesToRadians(this.angle));
+  ctx.beginPath();
+  ctx.moveTo(-ySizeBy2, 0);
+  ctx.lineTo(-ySizeBy2, xSizeBy2);
+  ctx.lineTo(ySizeBy2, xSizeBy2);
+  ctx.lineTo(ySizeBy2, ySizeBy2);
+  ctx.lineTo(xSizeBy2, ySizeBy2);
+  ctx.lineTo(xSizeBy2, -ySizeBy2);
+  ctx.lineTo(-ySizeBy2, -ySizeBy2);
+  ctx.closePath();
+  ctx[opName]();
+  stroke && ctx.stroke();
+  ctx.restore();
+}

package/extensions/index.ts

@@ -16,3 +16,12 @@ export {
   pinchEventHandler,
   rotateEventHandler,
 } from './westures_integration';
+
+export { createImageCroppingControls } from './cropping_controls/croppingControls';
+export {
+  changeCropY,
+  changeCropX,
+  changeCropWidth,
+  changeCropHeight,
+} from './cropping_controls/croppingHandlers';
+export { enterCropMode } from './cropping_controls/enterCropMode';

package/fabric.ts

@@ -178,5 +178,6 @@ export { parseSVGDocument } from './src/parser/parseSVGDocument';
 
 export { Control } from './src/controls/Control';
 export * as controlsUtils from './src/controls';
+export type { ControlRenderingStyleOverride } from './src/controls';
 
 export * from './src/filters';

package/package.json

@@ -2,7 +2,7 @@
   "name": "fabric",
   "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
   "homepage": "http://fabricjs.com/",
-  "version": "7.0.0",
+  "version": "7.2.0",
   "author": "Juriy Zaytsev <kangax@gmail.com>",
   "contributors": [
     {
@@ -63,7 +63,8 @@
     "local-server": "serve ./ -l tcp://localhost:8080",
     "lint": "eslint src extensions",
     "prettier:check": "prettier --check .",
-    "prettier:write": "prettier --write ."
+    "prettier:write": "prettier --write .",
+    "prepare": "husky install"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.3",
@@ -71,7 +72,7 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.27.1",
     "@eslint/js": "^9.37.0",
-    "@playwright/test": "^1.56.0",
+    "@playwright/test": "^1.58.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-terser": "^0.4.4",
@@ -79,26 +80,29 @@
     "@types/jsdom": "^21.1.7",
     "@types/micromatch": "^4.0.9",
     "@types/node": "^24.7.0",
-    "@vitest/browser-playwright": "^4.0.2",
-    "@vitest/coverage-v8": "^4.0.2",
-    "@vitest/ui": "^4.0.2",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
     "babel-plugin-transform-imports": "git+https://git@github.com/fabricjs/babel-plugin-transform-imports.git",
     "commander": "^14.0.1",
     "es-toolkit": "1.40.0",
     "eslint-config-prettier": "^10.1.8",
+    "husky": "^9.1.7",
     "inquirer": "^12.9.6",
+    "lint-staged": "^16.2.7",
     "micromatch": "^4.0.8",
     "nyc": "^17.1.0",
-    "prettier": "^3.6.2",
+    "prettier": "^3.8.1",
     "ps-list": "^9.0.0",
     "rollup": "^4.52.4",
     "semver": "^7.7.3",
     "serve": "^14.2.5",
+    "tsc-files": "^1.1.4",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.0",
     "v8-to-istanbul": "^9.3.0",
-    "vitest": "^4.0.2",
+    "vitest": "^4.0.18",
     "westures": "^1.1.1"
   },
   "engines": {
@@ -153,5 +157,10 @@
   "optionalDependencies": {
     "canvas": "^3.2.0",
     "jsdom": "^26.1.0"
+  },
+  "lint-staged": {
+    "*.{js,md,css,ts,tsx,jsx,json}": "eslint --fix",
+    "*.{js,css,md,ts,tsx,jsx,json}": "prettier --write",
+    "**/*.ts !(**/*.spec.ts) !(**/*.test.ts) !(vitest*.ts)": "tsc-files --noEmit"
   }
 }

package/src/ClassRegistry.spec.ts

@@ -1,17 +1,16 @@
-import {
-  ClassRegistry,
-  classRegistry as genericClassRegistryInstance,
-  JSON,
-} from './ClassRegistry';
-import './shapes/Object/FabricObject';
+import type { ClassRegistry } from './ClassRegistry';
 
-import { describe, expect, beforeEach, it } from 'vitest';
+import { describe, expect, beforeEach, afterEach, it, vi } from 'vitest';
 
 describe('ClassRegistry', () => {
   let classRegistry: ClassRegistry;
-  beforeEach(() => {
+  beforeEach(async () => {
+    const { ClassRegistry } = await import('./ClassRegistry');
     classRegistry = new ClassRegistry();
   });
+  afterEach(() => {
+    vi.resetModules();
+  });
   it('will error if a class is request that is not registered', () => {
     expect(() => classRegistry.getClass('any')).toThrow(
       'No class registered for any',
@@ -57,30 +56,30 @@ describe('ClassRegistry', () => {
     expect(resolved, 'resolved different classes').not.toBe(resolvedSvg);
   });
   it('legacy resolution preparation', async () => {
-    genericClassRegistryInstance[JSON].delete('rect');
-    genericClassRegistryInstance[JSON].delete('i-text');
-    genericClassRegistryInstance[JSON].delete('activeSelelection');
-    genericClassRegistryInstance[JSON].delete('object');
-    expect(genericClassRegistryInstance.has('rect')).toBe(false);
-    expect(genericClassRegistryInstance.has('i-text')).toBe(false);
-    expect(genericClassRegistryInstance.has('activeSelection')).toBe(false);
-    expect(genericClassRegistryInstance.has('object')).toBe(false);
+    const { classRegistry: freshRegistry } = await import('./ClassRegistry');
+
+    // Registry should be empty before any shape classes are imported
+    expect(freshRegistry.has('rect')).toBe(false);
+    expect(freshRegistry.has('i-text')).toBe(false);
+    expect(freshRegistry.has('activeSelection')).toBe(false);
+    expect(freshRegistry.has('object')).toBe(false);
   });
   it('legacy resolution', async () => {
+    const { classRegistry: freshRegistry } = await import('./ClassRegistry');
     const { Rect } = await import('./shapes/Rect');
     const { IText } = await import('./shapes/IText/IText');
     const { ActiveSelection } = await import('./shapes/ActiveSelection');
     // const { FabricObject } = await import('./shapes/Object/FabricObject');
     expect(
-      genericClassRegistryInstance.getClass('rect'),
+      freshRegistry.getClass('rect'),
       'resolves Rect class correctly',
     ).toBe(Rect);
     expect(
-      genericClassRegistryInstance.getClass('i-text'),
+      freshRegistry.getClass('i-text'),
       'resolves IText class correctly',
     ).toBe(IText);
     expect(
-      genericClassRegistryInstance.getClass('activeSelection'),
+      freshRegistry.getClass('activeSelection'),
       'resolves ActiveSelection class correctly',
     ).toBe(ActiveSelection);
     // expect(

package/src/EventTypeDefs.ts

@@ -94,6 +94,8 @@ export type Transform = {
   original: ReturnType<typeof saveObjectTransform> & {
     originX: TOriginX;
     originY: TOriginY;
+    cropX?: number;
+    cropY?: number;
   };
   actionPerformed: boolean;
 };
@@ -106,8 +108,9 @@ interface TEventWithTarget<E extends Event = TPointerEvent> extends TEvent<E> {
   target: FabricObject;
 }
 
-export interface BasicTransformEvent<E extends Event = TPointerEvent>
-  extends TEvent<E> {
+export interface BasicTransformEvent<
+  E extends Event = TPointerEvent,
+> extends TEvent<E> {
   transform: Transform;
   /* This pointer is usually a scenePoint. It isn't in the case of actions inside groups,
    * where it becomes a point relative to the group center
@@ -161,8 +164,9 @@ type CanvasModificationEvents = {
   'object:modified': ModifiedEvent;
 };
 
-export interface TPointerEventInfo<E extends TPointerEvent = TPointerEvent>
-  extends TEvent<E> {
+export interface TPointerEventInfo<
+  E extends TPointerEvent = TPointerEvent,
+> extends TEvent<E> {
   target?: FabricObject;
   subTargets?: FabricObject[];
   transform?: Transform | null;
@@ -170,8 +174,9 @@ export interface TPointerEventInfo<E extends TPointerEvent = TPointerEvent>
   viewportPoint: Point;
 }
 
-interface SimpleEventHandler<T extends Event = TPointerEvent>
-  extends TEvent<T> {
+interface SimpleEventHandler<
+  T extends Event = TPointerEvent,
+> extends TEvent<T> {
   target?: FabricObject;
   subTargets: FabricObject[];
 }
@@ -286,10 +291,7 @@ export interface MiscEvents {
 }
 
 export interface ObjectEvents
-  extends ObjectPointerEvents,
-    DnDEvents,
-    MiscEvents,
-    ObjectModificationEvents {
+  extends ObjectPointerEvents, DnDEvents, MiscEvents, ObjectModificationEvents {
   // selection
   selected: Partial<TEvent> & {
     target: FabricObject;
@@ -303,6 +305,7 @@ export interface ObjectEvents
 
   // erasing
   'erasing:end': { path: FabricObject };
+  'before:render': { ctx: CanvasRenderingContext2D };
 }
 
 export interface StaticCanvasEvents extends CollectionEvents {
@@ -317,7 +320,8 @@ export interface StaticCanvasEvents extends CollectionEvents {
 }
 
 export interface CanvasEvents
-  extends StaticCanvasEvents,
+  extends
+    StaticCanvasEvents,
     CanvasPointerEvents,
     CanvasDnDEvents,
     MiscEvents,

package/src/Pattern/Pattern.spec.ts

@@ -187,4 +187,16 @@ describe('Pattern', () => {
     const obj = await Rect.fromObject(rectObj);
     expect(obj.fill instanceof Pattern).toBeTruthy();
   });
+
+  describe('attribute injection', () => {
+    it('escapes correctly the src', () => {
+      const pattern = new Pattern({
+        source: { src: '"><svg onload=alert(1)>', width: 10, height: 10 },
+      });
+      const svg = pattern.toSVG({ width: 100, height: 100 });
+      expect(svg).toContain(
+        'xlink:href="&quot;&gt;&lt;svg onload=alert(1)&gt;"',
+      );
+    });
+  });
 });

package/src/Pattern/Pattern.ts

@@ -12,6 +12,7 @@ import type {
   SerializedPatternOptions,
 } from './types';
 import { log } from '../util/internals/console';
+import { escapeXml } from '../util/lang_string';
 
 /**
  * @see {@link http://fabric5.fabricjs.com/patterns demo}
@@ -177,12 +178,12 @@ export class Pattern {
           : ifNaN((patternSource as HTMLImageElement).height / height, 0);
 
     return [
-      `<pattern id="SVGID_${id}" x="${patternOffsetX}" y="${patternOffsetY}" width="${patternWidth}" height="${patternHeight}">`,
+      `<pattern id="SVGID_${escapeXml(id)}" x="${patternOffsetX}" y="${patternOffsetY}" width="${patternWidth}" height="${patternHeight}">`,
       `<image x="0" y="0" width="${
         (patternSource as HTMLImageElement).width
       }" height="${
         (patternSource as HTMLImageElement).height
-      }" xlink:href="${this.sourceToString()}"></image>`,
+      }" xlink:href="${escapeXml(this.sourceToString())}"></image>`,
       `</pattern>`,
       '',
     ].join('\n');