fabric 7.0.0 → 7.2.0

package/src/controls/Control.ts

@@ -6,18 +6,25 @@ import type {
 } from '../EventTypeDefs';
 import { Intersection } from '../Intersection';
 import { Point } from '../Point';
-import { SCALE } from '../constants';
+import { FILL, SCALE, STROKE } from '../constants';
 import type {
   InteractiveFabricObject,
   TOCoord,
 } from '../shapes/Object/InteractiveObject';
-import type { TCornerPoint, TDegree, TMat2D } from '../typedefs';
+import type {
+  TCornerPoint,
+  TDegree,
+  TMat2D,
+  TOriginX,
+  TOriginY,
+} from '../typedefs';
 import {
   createRotateMatrix,
   createScaleMatrix,
   createTranslateMatrix,
   multiplyTransformMatrixArray,
 } from '../util/misc/matrix';
+import { degreesToRadians } from '../util/misc/radiansDegreesConversion';
 import type { ControlRenderingStyleOverride } from './controlRendering';
 import { renderCircleControl, renderSquareControl } from './controlRendering';
 
@@ -142,10 +149,27 @@ export class Control {
    */
   withConnection = false;
 
+  declare transformAnchorPoint?: {
+    x: TOriginX;
+    y: TOriginY;
+  };
+
   constructor(options?: Partial<Control>) {
     Object.assign(this, options);
   }
 
+  getTransformAnchorPoint(): {
+    x: TOriginX;
+    y: TOriginY;
+  } {
+    return (
+      // return the control transformAnchorPoint
+      this.transformAnchorPoint ??
+      // otherwise will return the opposite origin of where the control is located.
+      new Point(-this.x + 0.5, -this.y + 0.5)
+    );
+  }
+
   /**
    * The control actionHandler, provide one to handle action ( control being moved )
    * @param {Event} eventData the native mouse event
@@ -337,6 +361,51 @@ export class Control {
     };
   }
 
+  /**
+   * This is an helper method to prepare the canvas to render a control
+   * It detectes common control properties and sets the correct fill and
+   * stroke styles on the context. It does not execute translations or
+   * rotations since different controls need differnt combination of these.
+   */
+  commonRenderProps(
+    ctx: CanvasRenderingContext2D,
+    left: number,
+    top: number,
+    fabricObject: InteractiveFabricObject,
+    styleOverride: ControlRenderingStyleOverride = {},
+  ): {
+    stroke: boolean;
+    xSize: number;
+    ySize: number;
+    transparentCorners: boolean;
+    opName: 'stroke' | 'fill';
+  } {
+    const { cornerSize, cornerColor, transparentCorners, cornerStrokeColor } =
+        styleOverride,
+      sizeFromProps = cornerSize || fabricObject.cornerSize,
+      xSize = this.sizeX || sizeFromProps,
+      ySize = this.sizeY || sizeFromProps,
+      transparent =
+        typeof transparentCorners !== 'undefined'
+          ? transparentCorners
+          : fabricObject.transparentCorners,
+      opName = transparent ? STROKE : FILL,
+      strokeColor = cornerStrokeColor || fabricObject.cornerStrokeColor,
+      stroke = !transparent && !!strokeColor;
+    ctx.fillStyle = cornerColor || fabricObject.cornerColor || '';
+    ctx.strokeStyle = strokeColor || '';
+    ctx.translate(left, top);
+    //  angle is relative to canvas plane
+    ctx.rotate(degreesToRadians(fabricObject.getTotalAngle()));
+    return {
+      stroke,
+      xSize,
+      ySize,
+      transparentCorners: transparent,
+      opName,
+    };
+  }
+
   /**
    * Render function for the control.
    * When this function runs the context is unscaled. unrotate. Just retina scaled.

package/src/controls/changeHeight.spec.ts

@@ -0,0 +1,147 @@
+import type { FabricObject } from '../../fabric';
+import type { Transform } from '../EventTypeDefs';
+import { Point } from '../Point';
+import { Canvas } from '../canvas/Canvas';
+import { Rect } from '../shapes/Rect';
+import { changeHeight } from './changeWidth';
+
+import { describe, expect, test, vi, beforeEach, afterEach } from 'vitest';
+
+describe('changeHeight', () => {
+  let canvas: Canvas;
+  let target: Rect;
+  let transform: any;
+  let eventData: any;
+
+  function prepareTransform(target: FabricObject, corner: string): Transform {
+    const origin = canvas._getOriginFromCorner(target, corner);
+    return {
+      target,
+      corner,
+      originX: origin.x,
+      originY: origin.y,
+    } as Transform;
+  }
+
+  beforeEach(() => {
+    canvas = new Canvas();
+    target = new Rect({ left: 50, top: 50, width: 100, height: 100 });
+    canvas.add(target);
+    eventData = {};
+    transform = prepareTransform(target, 'mb');
+  });
+
+  afterEach(() => {
+    canvas.off();
+    canvas.clear();
+  });
+
+  test('changeHeight changes the height', () => {
+    expect(target.height).toBe(100);
+    const changed = changeHeight(eventData, transform, 300, 200);
+    expect(changed).toBe(true);
+    expect(target.height).toBe(199.5);
+    expect(target.top).toBe(99.75);
+    expect(target.left).toBe(50);
+  });
+
+  test('changeHeight changes the height with decimals', () => {
+    expect(target.height).toBe(100);
+    const changed = changeHeight(eventData, transform, 300, 200.2);
+    expect(changed).toBe(true);
+    expect(target.height).toBe(199.7);
+    expect(target.top).toBe(99.85);
+    expect(target.left).toBe(50);
+  });
+
+  test('changeHeight does not change the height', () => {
+    const target = new Rect({ width: 100, height: 100, canvas });
+    vi.spyOn(target, '_set').mockImplementation(function _set(this: Rect) {
+      return this;
+    });
+    expect(target.height).toBe(100);
+    const changed = changeHeight(eventData, { ...transform, target }, 300, 200);
+    expect(changed).toBe(false);
+    expect(target.height).toBe(100);
+    expect(target.left).toBe(0);
+    expect(target.top).toBe(0);
+  });
+
+  test("changeHeight does not change the height of target's other side", () => {
+    expect(target.height).toBe(100);
+    const changed = changeHeight(
+      eventData,
+      prepareTransform(target, 'mt'),
+      300,
+      200,
+    );
+    expect(changed).toBe(false);
+    expect(target.height).toBe(100);
+    const changed2 = changeHeight(
+      eventData,
+      prepareTransform(target, 'mb'),
+      300,
+      -200,
+    );
+    expect(changed2).toBe(false);
+    expect(target.height).toBe(100);
+    expect(target.left).toBe(50);
+    expect(target.top).toBe(50);
+  });
+
+  test('changeHeight changes the height with centered transform', () => {
+    transform.originX = 'center';
+    transform.originY = 'center';
+    expect(target.height).toBe(100);
+    changeHeight(eventData, transform, 300, 200);
+    expect(target.height).toBe(299);
+    expect(target.left).toBe(50);
+    expect(target.top).toBe(50);
+  });
+
+  test('changeHeight changes the height with big strokeWidth', () => {
+    transform.target.strokeWidth = 15;
+    changeHeight(eventData, transform, 300, 200);
+    expect(target.height).toBe(192.5);
+  });
+
+  test('changeHeight changes the height with big strokeWidth and strokeUniform', () => {
+    transform.target.strokeWidth = 15;
+    transform.target.strokeUniform = true;
+    changeHeight(eventData, transform, 300, 200);
+    expect(target.height).toBe(192.5);
+  });
+
+  test('changeHeight changes the height with big strokeWidth and strokeUniform + scaling', () => {
+    transform.target.strokeWidth = 15;
+    transform.target.strokeUniform = true;
+    transform.target.scaleY = 3;
+    changeHeight(eventData, transform, 300, 200);
+    expect(Math.ceil(target.height)).toBe(98);
+  });
+
+  test('changeHeight changes the height with big strokeWidth + scaling', () => {
+    transform.target.strokeWidth = 15;
+    transform.target.scaleY = 3;
+    changeHeight(eventData, transform, 300, 200);
+    expect(Math.ceil(target.height)).toBe(93);
+  });
+
+  test('changeHeight will fire events on canvas and target resizing', () => {
+    target.canvas?.on('object:resizing', (options) => {
+      expect(options.target).toBe(target);
+    });
+    const resizePromise = new Promise<void>((resolve) => {
+      target.on('resizing', (options) => {
+        expect(options).toEqual({
+          e: eventData,
+          transform,
+          pointer: new Point(300, 200),
+        });
+        resolve();
+      });
+    });
+    changeHeight(eventData, transform, 300, 200);
+    return resizePromise;
+  });
+});

package/src/controls/changeWidth.ts

@@ -1,55 +1,88 @@
 import type { TransformActionHandler } from '../EventTypeDefs';
-import { CENTER, LEFT, RESIZING, RIGHT } from '../constants';
+import { RESIZING } from '../constants';
 import { resolveOrigin } from '../util/misc/resolveOrigin';
 import { getLocalPoint, isTransformCentered } from './util';
 import { wrapWithFireEvent } from './wrapWithFireEvent';
 import { wrapWithFixedAnchor } from './wrapWithFixedAnchor';
 
+export const changeObjectDimensionGen =
+  (
+    dimension: 'width' | 'height',
+    origin: 'originX' | 'originY',
+    xorY: 'x' | 'y',
+    scale: 'scaleX' | 'scaleY',
+  ): TransformActionHandler =>
+  (eventData, transform, x, y) => {
+    const localPoint = getLocalPoint(
+      transform,
+      transform.originX,
+      transform.originY,
+      x,
+      y,
+    );
+    const localPointValue = localPoint[xorY];
+    //  make sure the control changes width ONLY from it's side of target
+    const originValue = resolveOrigin(transform[origin]);
+    if (
+      originValue === 0 ||
+      (originValue > 0 && localPointValue < 0) ||
+      (originValue < 0 && localPointValue > 0)
+    ) {
+      const { target } = transform,
+        strokePadding =
+          target.strokeWidth / (target.strokeUniform ? target[scale] : 1),
+        multiplier = isTransformCentered(transform) ? 2 : 1,
+        oldWidth = target[dimension],
+        newWidth =
+          Math.abs((localPointValue * multiplier) / target[scale]) -
+          strokePadding;
+      target.set(dimension, Math.max(newWidth, 1));
+      //  check against actual target width in case `newWidth` was rejected
+      return oldWidth !== target[dimension];
+    }
+    return false;
+  };
+
 /**
  * Action handler to change object's width
  * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
+ * You want to use this only if you are building a new control handler and you want
+ * to reuse some logic. use "changeWidth" if you are looking to just use a control for width
  * @param {Event} eventData javascript event that is doing the transform
  * @param {Object} transform javascript object containing a series of information around the current transform
  * @param {number} x current mouse x position, canvas normalized
  * @param {number} y current mouse y position, canvas normalized
  * @return {Boolean} true if some change happened
  */
-export const changeObjectWidth: TransformActionHandler = (
-  eventData,
-  transform,
-  x,
-  y,
-) => {
-  const localPoint = getLocalPoint(
-    transform,
-    transform.originX,
-    transform.originY,
-    x,
-    y,
-  );
-  //  make sure the control changes width ONLY from it's side of target
-  if (
-    resolveOrigin(transform.originX) === resolveOrigin(CENTER) ||
-    (resolveOrigin(transform.originX) === resolveOrigin(RIGHT) &&
-      localPoint.x < 0) ||
-    (resolveOrigin(transform.originX) === resolveOrigin(LEFT) &&
-      localPoint.x > 0)
-  ) {
-    const { target } = transform,
-      strokePadding =
-        target.strokeWidth / (target.strokeUniform ? target.scaleX : 1),
-      multiplier = isTransformCentered(transform) ? 2 : 1,
-      oldWidth = target.width,
-      newWidth =
-        Math.abs((localPoint.x * multiplier) / target.scaleX) - strokePadding;
-    target.set('width', Math.max(newWidth, 1));
-    //  check against actual target width in case `newWidth` was rejected
-    return oldWidth !== target.width;
-  }
-  return false;
-};
+export const changeObjectWidth: TransformActionHandler =
+  changeObjectDimensionGen('width', 'originX', 'x', 'scaleX');
 
+/**
+ * Action handler to change object's height
+ * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
+ * You want to use this only if you are building a new control handler and you want
+ * to reuse some logic. use "changeHeight" if you are looking to just use a control for height
+ * @param {Event} eventData javascript event that is doing the transform
+ * @param {Object} transform javascript object containing a series of information around the current transform
+ * @param {number} x current mouse x position, canvas normalized
+ * @param {number} y current mouse y position, canvas normalized
+ * @return {Boolean} true if some change happened
+ */
+export const changeObjectHeight: TransformActionHandler =
+  changeObjectDimensionGen('height', 'originY', 'y', 'scaleY');
+
+/**
+ * Control handler for changing width
+ */
 export const changeWidth = wrapWithFireEvent(
   RESIZING,
   wrapWithFixedAnchor(changeObjectWidth),
 );
+
+/**
+ * Control handler for changing height
+ */
+export const changeHeight = wrapWithFireEvent(
+  RESIZING,
+  wrapWithFixedAnchor(changeObjectHeight),
+);

package/src/controls/controlRendering.ts

@@ -1,6 +1,5 @@
-import { FILL, STROKE, twoMathPi } from '../constants';
+import { twoMathPi } from '../constants';
 import type { InteractiveFabricObject } from '../shapes/Object/InteractiveObject';
-import { degreesToRadians } from '../util/misc/radiansDegreesConversion';
 import type { Control } from './Control';
 
 export type ControlRenderingStyleOverride = Partial<
@@ -44,40 +43,25 @@ export function renderCircleControl(
   styleOverride: ControlRenderingStyleOverride,
   fabricObject: InteractiveFabricObject,
 ) {
-  styleOverride = styleOverride || {};
-  const xSize =
-      this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,
-    ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,
-    transparentCorners =
-      typeof styleOverride.transparentCorners !== 'undefined'
-        ? styleOverride.transparentCorners
-        : fabricObject.transparentCorners,
-    methodName = transparentCorners ? STROKE : FILL,
-    stroke =
-      !transparentCorners &&
-      (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor);
-  let myLeft = left,
-    myTop = top,
-    size;
   ctx.save();
-  ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '';
-  ctx.strokeStyle =
-    styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '';
+  const { stroke, xSize, ySize, opName } = this.commonRenderProps(
+    ctx,
+    left,
+    top,
+    fabricObject,
+    styleOverride,
+  );
+  let size = xSize;
   // TODO: use proper ellipse code.
   if (xSize > ySize) {
-    size = xSize;
     ctx.scale(1.0, ySize / xSize);
-    myTop = (top * xSize) / ySize;
   } else if (ySize > xSize) {
     size = ySize;
     ctx.scale(xSize / ySize, 1.0);
-    myLeft = (left * ySize) / xSize;
-  } else {
-    size = xSize;
   }
   ctx.beginPath();
-  ctx.arc(myLeft, myTop, size / 2, 0, twoMathPi, false);
-  ctx[methodName]();
+  ctx.arc(0, 0, size / 2, 0, twoMathPi, false);
+  ctx[opName]();
   if (stroke) {
     ctx.stroke();
   }
@@ -103,32 +87,20 @@ export function renderSquareControl(
   styleOverride: ControlRenderingStyleOverride,
   fabricObject: InteractiveFabricObject,
 ) {
-  styleOverride = styleOverride || {};
-  const xSize =
-      this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,
-    ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,
-    transparentCorners =
-      typeof styleOverride.transparentCorners !== 'undefined'
-        ? styleOverride.transparentCorners
-        : fabricObject.transparentCorners,
-    methodName = transparentCorners ? STROKE : FILL,
-    stroke =
-      !transparentCorners &&
-      (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor),
+  ctx.save();
+  const { stroke, xSize, ySize, opName } = this.commonRenderProps(
+      ctx,
+      left,
+      top,
+      fabricObject,
+      styleOverride,
+    ),
     xSizeBy2 = xSize / 2,
     ySizeBy2 = ySize / 2;
-  ctx.save();
-  ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '';
-  ctx.strokeStyle =
-    styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '';
-  ctx.translate(left, top);
-  //  angle is relative to canvas plane
-  const angle = fabricObject.getTotalAngle();
-  ctx.rotate(degreesToRadians(angle));
   // this does not work, and fixed with ( && ) does not make sense.
   // to have real transparent corners we need the controls on upperCanvas
   // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize);
-  ctx[`${methodName}Rect`](-xSizeBy2, -ySizeBy2, xSize, ySize);
+  ctx[`${opName}Rect`](-xSizeBy2, -ySizeBy2, xSize, ySize);
   if (stroke) {
     ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize);
   }

package/src/controls/index.ts

@@ -1,5 +1,11 @@
-export { changeWidth } from './changeWidth';
+export {
+  changeWidth,
+  changeObjectWidth,
+  changeHeight,
+  changeObjectHeight,
+} from './changeWidth';
 export { renderCircleControl, renderSquareControl } from './controlRendering';
+export type { ControlRenderingStyleOverride } from './controlRendering';
 export * from './commonControls';
 export { dragHandler } from './drag';
 export * from './polyControl';