@nasser-sw/fabric 7.0.0-beta1

package/src/controls/scaleSkew.ts

@@ -0,0 +1,94 @@
+import type {
+  ControlCallback,
+  ControlCursorCallback,
+  TPointerEvent,
+  TransformActionHandler,
+} from '../EventTypeDefs';
+import { SCALE_X, SCALE_Y, SKEW_X, SKEW_Y } from '../constants';
+import type { FabricObject } from '../shapes/Object/FabricObject';
+import type { TAxisKey } from '../typedefs';
+import { scaleCursorStyleHandler, scalingX, scalingY } from './scale';
+import { skewCursorStyleHandler, skewHandlerX, skewHandlerY } from './skew';
+
+function isAltAction(eventData: TPointerEvent, target: FabricObject) {
+  return eventData[target.canvas!.altActionKey!];
+}
+
+/**
+ * Inspect event, control and fabricObject to return the correct action name
+ * @param {Event} eventData the javascript event that is causing the scale
+ * @param {Control} control the control that is interested in the action
+ * @param {FabricObject} fabricObject the fabric object that is interested in the action
+ * @return {String} an action name
+ */
+export const scaleOrSkewActionName: ControlCallback<
+  TAxisKey<'skew' | 'scale'> | ''
+> = (eventData, control, fabricObject) => {
+  const isAlternative = isAltAction(eventData, fabricObject);
+  if (control.x === 0) {
+    // then is scaleY or skewX
+    return isAlternative ? SKEW_X : SCALE_Y;
+  }
+  if (control.y === 0) {
+    // then is scaleY or skewX
+    return isAlternative ? SKEW_Y : SCALE_X;
+  }
+  return '';
+};
+
+/**
+ * Combine skew and scale style handlers to cover fabric standard use case
+ * @param {Event} eventData the javascript event that is causing the scale
+ * @param {Control} control the control that is interested in the action
+ * @param {FabricObject} fabricObject the fabric object that is interested in the action
+ * @return {String} a valid css string for the cursor
+ */
+export const scaleSkewCursorStyleHandler: ControlCursorCallback = (
+  eventData,
+  control,
+  fabricObject,
+  coord,
+) => {
+  return isAltAction(eventData, fabricObject)
+    ? skewCursorStyleHandler(eventData, control, fabricObject, coord)
+    : scaleCursorStyleHandler(eventData, control, fabricObject, coord);
+};
+/**
+ * Composed action handler to either scale X or skew Y
+ * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
+ * @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 scalingXOrSkewingY: TransformActionHandler = (
+  eventData,
+  transform,
+  x,
+  y,
+) => {
+  return isAltAction(eventData, transform.target)
+    ? skewHandlerY(eventData, transform, x, y)
+    : scalingX(eventData, transform, x, y);
+};
+
+/**
+ * Composed action handler to either scale Y or skew X
+ * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
+ * @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 scalingYOrSkewingX: TransformActionHandler = (
+  eventData,
+  transform,
+  x,
+  y,
+) => {
+  return isAltAction(eventData, transform.target)
+    ? skewHandlerX(eventData, transform, x, y)
+    : scalingY(eventData, transform, x, y);
+};

package/src/controls/skew.ts

@@ -0,0 +1,251 @@
+import type {
+  ControlCursorCallback,
+  TPointerEvent,
+  Transform,
+  TransformActionHandler,
+} from '../EventTypeDefs';
+import { resolveOrigin } from '../util/misc/resolveOrigin';
+import { Point } from '../Point';
+import type { TAxis, TAxisKey } from '../typedefs';
+import {
+  degreesToRadians,
+  radiansToDegrees,
+} from '../util/misc/radiansDegreesConversion';
+import {
+  findCornerQuadrant,
+  getLocalPoint,
+  isLocked,
+  NOT_ALLOWED_CURSOR,
+} from './util';
+import { wrapWithFireEvent } from './wrapWithFireEvent';
+import { wrapWithFixedAnchor } from './wrapWithFixedAnchor';
+import {
+  CENTER,
+  SCALE_X,
+  SCALE_Y,
+  SKEWING,
+  SKEW_X,
+  SKEW_Y,
+} from '../constants';
+
+export type SkewTransform = Transform & { skewingSide: -1 | 1 };
+
+const AXIS_KEYS: Record<
+  TAxis,
+  {
+    counterAxis: TAxis;
+    scale: TAxisKey<'scale'>;
+    skew: TAxisKey<'skew'>;
+    lockSkewing: TAxisKey<'lockSkewing'>;
+    origin: TAxisKey<'origin'>;
+    flip: TAxisKey<'flip'>;
+  }
+> = {
+  x: {
+    counterAxis: 'y',
+    scale: SCALE_X,
+    skew: SKEW_X,
+    lockSkewing: 'lockSkewingX',
+    origin: 'originX',
+    flip: 'flipX',
+  },
+  y: {
+    counterAxis: 'x',
+    scale: SCALE_Y,
+    skew: SKEW_Y,
+    lockSkewing: 'lockSkewingY',
+    origin: 'originY',
+    flip: 'flipY',
+  },
+};
+
+const skewMap = ['ns', 'nesw', 'ew', 'nwse'];
+
+/**
+ * return the correct cursor style for the skew action
+ * @param {Event} eventData the javascript event that is causing the scale
+ * @param {Control} control the control that is interested in the action
+ * @param {FabricObject} fabricObject the fabric object that is interested in the action
+ * @return {String} a valid css string for the cursor
+ */
+export const skewCursorStyleHandler: ControlCursorCallback = (
+  eventData,
+  control,
+  fabricObject,
+  coord,
+) => {
+  if (control.x !== 0 && isLocked(fabricObject, 'lockSkewingY')) {
+    return NOT_ALLOWED_CURSOR;
+  }
+  if (control.y !== 0 && isLocked(fabricObject, 'lockSkewingX')) {
+    return NOT_ALLOWED_CURSOR;
+  }
+  const n = findCornerQuadrant(fabricObject, control, coord) % 4;
+  return `${skewMap[n]}-resize`;
+};
+
+/**
+ * Since skewing is applied before scaling, calculations are done in a scaleless plane
+ * @see https://github.com/fabricjs/fabric.js/pull/8380
+ */
+function skewObject(
+  axis: TAxis,
+  { target, ex, ey, skewingSide, ...transform }: SkewTransform,
+  pointer: Point,
+) {
+  const { skew: skewKey } = AXIS_KEYS[axis],
+    offset = pointer
+      .subtract(new Point(ex, ey))
+      .divide(new Point(target.scaleX, target.scaleY))[axis],
+    skewingBefore = target[skewKey],
+    skewingStart = transform[skewKey],
+    shearingStart = Math.tan(degreesToRadians(skewingStart)),
+    // let a, b be the size of target
+    // let a' be the value of a after applying skewing
+    // then:
+    // a' = a + b * skewA => skewA = (a' - a) / b
+    // the value b is tricky since skewY is applied before skewX
+    b =
+      axis === 'y'
+        ? target._getTransformedDimensions({
+            scaleX: 1,
+            scaleY: 1,
+            // since skewY is applied before skewX, b (=width) is not affected by skewX
+            skewX: 0,
+          }).x
+        : target._getTransformedDimensions({
+            scaleX: 1,
+            scaleY: 1,
+          }).y;
+
+  const shearing =
+    (2 * offset * skewingSide) /
+      // we max out fractions to safeguard from asymptotic behavior
+      Math.max(b, 1) +
+    // add starting state
+    shearingStart;
+
+  const skewing = radiansToDegrees(Math.atan(shearing));
+
+  target.set(skewKey, skewing);
+  const changed = skewingBefore !== target[skewKey];
+
+  if (changed && axis === 'y') {
+    // we don't want skewing to affect scaleX
+    // so we factor it by the inverse skewing diff to make it seem unchanged to the viewer
+    const { skewX, scaleX } = target,
+      dimBefore = target._getTransformedDimensions({ skewY: skewingBefore }),
+      dimAfter = target._getTransformedDimensions(),
+      compensationFactor = skewX !== 0 ? dimBefore.x / dimAfter.x : 1;
+    compensationFactor !== 1 &&
+      target.set(SCALE_X, compensationFactor * scaleX);
+  }
+
+  return changed;
+}
+
+/**
+ * Wrapped Action handler for skewing on a given axis, takes care of the
+ * skew direction and determines the correct transform origin for the anchor point
+ * @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
+ */
+function skewHandler(
+  axis: TAxis,
+  eventData: TPointerEvent,
+  transform: Transform,
+  x: number,
+  y: number,
+) {
+  const { target } = transform,
+    {
+      counterAxis,
+      origin: originKey,
+      lockSkewing: lockSkewingKey,
+      skew: skewKey,
+      flip: flipKey,
+    } = AXIS_KEYS[axis];
+  if (isLocked(target, lockSkewingKey)) {
+    return false;
+  }
+
+  const { origin: counterOriginKey, flip: counterFlipKey } =
+      AXIS_KEYS[counterAxis],
+    counterOriginFactor =
+      resolveOrigin(transform[counterOriginKey]) *
+      (target[counterFlipKey] ? -1 : 1),
+    // if the counter origin is top/left (= -0.5) then we are skewing x/y values on the bottom/right side of target respectively.
+    // if the counter origin is bottom/right (= 0.5) then we are skewing x/y values on the top/left side of target respectively.
+    // skewing direction on the top/left side of target is OPPOSITE to the direction of the movement of the pointer,
+    // so we factor skewing direction by this value.
+    skewingSide = (-Math.sign(counterOriginFactor) *
+      (target[flipKey] ? -1 : 1)) as 1 | -1,
+    skewingDirection =
+      ((target[skewKey] === 0 &&
+        // in case skewing equals 0 we use the pointer offset from target center to determine the direction of skewing
+        getLocalPoint(transform, CENTER, CENTER, x, y)[axis] > 0) ||
+      // in case target has skewing we use that as the direction
+      target[skewKey] > 0
+        ? 1
+        : -1) * skewingSide,
+    // anchor to the opposite side of the skewing direction
+    // normalize value from [-1, 1] to origin value [0, 1]
+    origin = -skewingDirection * 0.5 + 0.5;
+
+  const finalHandler = wrapWithFireEvent<SkewTransform>(
+    SKEWING,
+    wrapWithFixedAnchor((eventData, transform, x, y) =>
+      skewObject(axis, transform, new Point(x, y)),
+    ),
+  );
+
+  return finalHandler(
+    eventData,
+    {
+      ...transform,
+      [originKey]: origin,
+      skewingSide,
+    },
+    x,
+    y,
+  );
+}
+
+/**
+ * Wrapped Action handler for skewing on the X axis, takes care of the
+ * skew direction and determines the correct transform origin for the anchor point
+ * @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 skewHandlerX: TransformActionHandler = (
+  eventData,
+  transform,
+  x,
+  y,
+) => {
+  return skewHandler('x', eventData, transform, x, y);
+};
+
+/**
+ * Wrapped Action handler for skewing on the Y axis, takes care of the
+ * skew direction and determines the correct transform origin for the anchor point
+ * @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 skewHandlerY: TransformActionHandler = (
+  eventData,
+  transform,
+  x,
+  y,
+) => {
+  return skewHandler('y', eventData, transform, x, y);
+};

package/src/controls/util.ts

@@ -0,0 +1,162 @@
+import type {
+  TPointerEvent,
+  Transform,
+  TransformAction,
+  BasicTransformEvent,
+} from '../EventTypeDefs';
+import { resolveOrigin } from '../util/misc/resolveOrigin';
+import { Point } from '../Point';
+import type { FabricObject } from '../shapes/Object/FabricObject';
+import type { TOriginX, TOriginY } from '../typedefs';
+import { degreesToRadians } from '../util/misc/radiansDegreesConversion';
+import type { Control } from './Control';
+import { CENTER, quarterPI, twoMathPi } from '../constants';
+import { calcVectorRotation, createVector } from '../util/misc/vectors';
+import type { TOCoord } from '../shapes/Object/InteractiveObject';
+import { sendPointToPlane } from '../util/misc/planeChange';
+
+export const NOT_ALLOWED_CURSOR = 'not-allowed';
+
+/**
+ * @param {Boolean} alreadySelected true if target is already selected
+ * @param {String} corner a string representing the corner ml, mr, tl ...
+ * @param {Event} e Event object
+ * @param {FabricObject} [target] inserted back to help overriding. Unused
+ */
+export const getActionFromCorner = (
+  alreadySelected: boolean,
+  corner: string | undefined,
+  e: TPointerEvent,
+  target: FabricObject,
+) => {
+  if (!corner || !alreadySelected) {
+    return 'drag';
+  }
+  const control = target.controls[corner];
+  return control.getActionName(e, control, target);
+};
+
+/**
+ * Checks if transform is centered
+ * @param {Object} transform transform data
+ * @return {Boolean} true if transform is centered
+ */
+export function isTransformCentered(transform: Transform) {
+  return (
+    resolveOrigin(transform.originX) === resolveOrigin(CENTER) &&
+    resolveOrigin(transform.originY) === resolveOrigin(CENTER)
+  );
+}
+
+export function invertOrigin(origin: TOriginX | TOriginY) {
+  return -resolveOrigin(origin) + 0.5;
+}
+
+export const isLocked = (
+  target: FabricObject,
+  lockingKey:
+    | 'lockMovementX'
+    | 'lockMovementY'
+    | 'lockRotation'
+    | 'lockScalingX'
+    | 'lockScalingY'
+    | 'lockSkewingX'
+    | 'lockSkewingY'
+    | 'lockScalingFlip',
+) => target[lockingKey];
+
+export const commonEventInfo: TransformAction<
+  Transform,
+  BasicTransformEvent
+> = (eventData, transform, x, y) => {
+  return {
+    e: eventData,
+    transform,
+    pointer: new Point(x, y),
+  };
+};
+
+/**
+ * Combine control position and object angle to find the control direction compared
+ * to the object center.
+ * @param {FabricObject} fabricObject the fabric object for which we are rendering controls
+ * @param {Control} control the control class
+ * @return {Number} 0 - 7 a quadrant number
+ */
+export function findCornerQuadrant(
+  fabricObject: FabricObject,
+  control: Control,
+  coord: TOCoord,
+): number {
+  const target = coord;
+  const center = sendPointToPlane(
+    fabricObject.getCenterPoint(),
+    fabricObject.canvas!.viewportTransform,
+    undefined,
+  );
+  const angle = calcVectorRotation(createVector(center, target)) + twoMathPi;
+  return Math.round((angle % twoMathPi) / quarterPI);
+}
+
+/**
+ * @returns the normalized point (rotated relative to center) in local coordinates
+ */
+function normalizePoint(
+  target: FabricObject,
+  point: Point,
+  originX: TOriginX,
+  originY: TOriginY,
+): Point {
+  const center = target.getRelativeCenterPoint(),
+    p =
+      typeof originX !== 'undefined' && typeof originY !== 'undefined'
+        ? target.translateToGivenOrigin(
+            center,
+            CENTER,
+            CENTER,
+            originX,
+            originY,
+          )
+        : new Point(target.left, target.top),
+    p2 = target.angle
+      ? point.rotate(-degreesToRadians(target.angle), center)
+      : point;
+  return p2.subtract(p);
+}
+
+/**
+ * Transforms a point to the offset from the given origin
+ * @param {Object} transform
+ * @param {String} originX
+ * @param {String} originY
+ * @param {number} x
+ * @param {number} y
+ * @return {Fabric.Point} the normalized point
+ */
+export function getLocalPoint(
+  { target, corner }: Transform,
+  originX: TOriginX,
+  originY: TOriginY,
+  x: number,
+  y: number,
+) {
+  const control = target.controls[corner],
+    zoom = target.canvas?.getZoom() || 1,
+    padding = target.padding / zoom,
+    localPoint = normalizePoint(target, new Point(x, y), originX, originY);
+  if (localPoint.x >= padding) {
+    localPoint.x -= padding;
+  }
+  if (localPoint.x <= -padding) {
+    localPoint.x += padding;
+  }
+  if (localPoint.y >= padding) {
+    localPoint.y -= padding;
+  }
+  if (localPoint.y <= padding) {
+    localPoint.y += padding;
+  }
+  localPoint.x -= control.offsetX;
+  localPoint.y -= control.offsetY;
+  return localPoint;
+}

package/src/controls/wrapWithFireEvent.ts

@@ -0,0 +1,34 @@
+import type {
+  TModificationEvents,
+  Transform,
+  TransformActionHandler,
+} from '../EventTypeDefs';
+import { fireEvent } from './fireEvent';
+import { commonEventInfo } from './util';
+
+/**
+ * Wrap an action handler with firing an event if the action is performed
+ * @param {TModificationEvents} eventName the event we want to fire
+ * @param {TransformActionHandler<T>} actionHandler the function to wrap
+ * @param {object} extraEventInfo extra information to pas to the event handler
+ * @return {TransformActionHandler<T>} a function with an action handler signature
+ */
+export const wrapWithFireEvent = <
+  T extends Transform,
+  P extends object = Record<string, never>,
+>(
+  eventName: TModificationEvents,
+  actionHandler: TransformActionHandler<T>,
+  extraEventInfo?: P,
+) => {
+  return ((eventData, transform, x, y) => {
+    const actionPerformed = actionHandler(eventData, transform, x, y);
+    if (actionPerformed) {
+      fireEvent(eventName, {
+        ...commonEventInfo(eventData, transform, x, y),
+        ...extraEventInfo,
+      });
+    }
+    return actionPerformed;
+  }) as TransformActionHandler<T>;
+};

package/src/controls/wrapWithFixedAnchor.spec.ts

@@ -0,0 +1,124 @@
+import type { TransformActionHandler, Transform } from '../EventTypeDefs';
+import { FabricObject } from '../shapes/Object/FabricObject';
+import { wrapWithFixedAnchor } from './wrapWithFixedAnchor';
+import { Point } from '../Point';
+
+import { describe, expect, it } from 'vitest';
+
+const createTransformData = (): Transform => {
+  return {
+    target: new FabricObject({
+      width: 100,
+      height: 100,
+      top: 100,
+      left: 100,
+      originX: 'center',
+      originY: 'center',
+      scaleX: 5,
+      scaleY: 6,
+    }),
+    originX: 'left',
+    originY: 'top',
+  } as Transform;
+};
+
+describe('wrapWithFixedAnchor', () => {
+  it('it maintains an object fixed on a constrain point', () => {
+    const actionToWrap: TransformActionHandler = (eventData, transform) => {
+      transform.target.scaleX = 7;
+      transform.target.scaleY = 7;
+      return true;
+    };
+    const wrappedAction = wrapWithFixedAnchor(actionToWrap);
+    const transformData = createTransformData();
+    const { target } = transformData;
+    // we are testing a left, top transform
+    expect(transformData.originX).toBe('left');
+    expect(transformData.originY).toBe('top');
+    const targetTopLeftCorner = target.translateToGivenOrigin(
+      new Point(target.left, target.top),
+      target.originX,
+      target.originY,
+      'left',
+      'top',
+    );
+    // target position is 100,
+    expect(target.top).toBe(100);
+    expect(target.left).toBe(100);
+    // target anchor corner is different
+    expect(targetTopLeftCorner.y).toBe(-203);
+    expect(targetTopLeftCorner.x).toBe(-152.5);
+    const event = new MouseEvent('move');
+    wrappedAction(event, transformData, 0, 0);
+    const newTargetTopLeftCorner = target.translateToGivenOrigin(
+      new Point(target.left, target.top),
+      target.originX,
+      target.originY,
+      'left',
+      'top',
+    );
+    // after transform the position of the object moved.
+    expect(target.top).toBe(150.5);
+    expect(target.left).toBe(201);
+    // but the target anchor position didn't move
+    expect(newTargetTopLeftCorner.y).toBe(targetTopLeftCorner.y);
+    expect(newTargetTopLeftCorner.x).toBe(targetTopLeftCorner.x);
+  });
+  it('the fixed anchor point works with an origin swap', () => {
+    const actionToWrap: TransformActionHandler = (eventData, transform) => {
+      transform.target.scaleX = 7;
+      transform.target.scaleY = 7;
+      transform.originX = 'right';
+      transform.originY = 'bottom';
+      return true;
+    };
+    const wrappedAction = wrapWithFixedAnchor(actionToWrap);
+
+    const transformData = createTransformData();
+    const { target } = transformData;
+    // we are testing a left, top transform
+    expect(transformData.originX).toBe('left');
+    expect(transformData.originY).toBe('top');
+    const targetTopLeftCorner = target.translateToGivenOrigin(
+      new Point(target.left, target.top),
+      target.originX,
+      target.originY,
+      transformData.originX,
+      transformData.originY,
+    );
+    // target position is 100,
+    expect(target.top).toBe(100);
+    expect(target.left).toBe(100);
+    // target anchor corner is different
+    expect(targetTopLeftCorner.y).toBe(-203);
+    expect(targetTopLeftCorner.x).toBe(-152.5);
+    const event = new MouseEvent('move');
+    wrappedAction(event, transformData, 0, 0);
+    const newTargetAnchorPosition = target.translateToGivenOrigin(
+      new Point(target.left, target.top),
+      target.originX,
+      target.originY,
+      transformData.originX,
+      transformData.originY,
+    );
+    // transform data ended up being right,bottom
+    expect(transformData.originX).toBe('right');
+    expect(transformData.originY).toBe('bottom');
+    // after transform the position of the object moved.
+    expect(target.top).toBe(-556.5);
+    expect(target.left).toBe(-506);
+    // but the target anchor position didn't move from the topLeftCorner
+    expect(newTargetAnchorPosition.y).toBe(targetTopLeftCorner.y);
+    expect(newTargetAnchorPosition.x).toBe(targetTopLeftCorner.x);
+    // while the new top left corner of the object moved away
+    const newTopLeftCorner = target.translateToGivenOrigin(
+      new Point(target.left, target.top),
+      target.originX,
+      target.originY,
+      'left',
+      'top',
+    );
+    expect(newTopLeftCorner.y).toBe(-910);
+    expect(newTopLeftCorner.x).toBe(-859.5);
+  });
+});

package/src/controls/wrapWithFixedAnchor.ts

@@ -0,0 +1,26 @@
+import type { Transform, TransformActionHandler } from '../EventTypeDefs';
+
+/**
+ * Wrap an action handler with saving/restoring object position on the transform.
+ * this is the code that permits to objects to keep their position while transforming.
+ * @param {Function} actionHandler the function to wrap
+ * @return {Function} a function with an action handler signature
+ */
+export function wrapWithFixedAnchor<T extends Transform>(
+  actionHandler: TransformActionHandler<T>,
+) {
+  return ((eventData, transform, x, y) => {
+    const { target, originX, originY } = transform,
+      centerPoint = target.getRelativeCenterPoint(),
+      constraint = target.translateToOriginPoint(centerPoint, originX, originY),
+      actionPerformed = actionHandler(eventData, transform, x, y);
+    // flipping requires to change the transform origin, so we read from the mutated transform
+    // instead of leveraging the one destructured before
+    target.setPositionByOrigin(
+      constraint,
+      transform.originX,
+      transform.originY,
+    );
+    return actionPerformed;
+  }) as TransformActionHandler<T>;
+}