fabric 5.3.0 → 6.0.0-beta3

package/src/controls/index.ts

@@ -0,0 +1,22 @@
+export { changeWidth } from './changeWidth';
+export { renderCircleControl, renderSquareControl } from './controlRendering';
+export * from './commonControls';
+export { dragHandler } from './drag';
+export { createPolyControls } from './polyControl';
+export { rotationStyleHandler, rotationWithSnapping } from './rotate';
+export {
+  scaleCursorStyleHandler,
+  scalingEqually,
+  scalingX,
+  scalingY,
+} from './scale';
+export {
+  scaleOrSkewActionName,
+  scaleSkewCursorStyleHandler,
+  scalingXOrSkewingY,
+  scalingYOrSkewingX,
+} from './scaleSkew';
+export { skewCursorStyleHandler, skewHandlerX, skewHandlerY } from './skew';
+export { getLocalPoint } from './util';
+export { wrapWithFireEvent } from './wrapWithFireEvent';
+export { wrapWithFixedAnchor } from './wrapWithFixedAnchor';

package/src/controls/polyControl.ts

@@ -0,0 +1,135 @@
+import { Point } from '../Point';
+import { Control } from './Control';
+import { TMat2D } from '../typedefs';
+import { iMatrix } from '../constants';
+import type { Polyline } from '../shapes/Polyline';
+import { multiplyTransformMatrices } from '../util/misc/matrix';
+import {
+  TPointerEvent,
+  Transform,
+  TransformActionHandler,
+} from '../EventTypeDefs';
+import { getLocalPoint } from './util';
+
+type TTransformAnchor = Transform & { pointIndex: number };
+
+const getSize = (poly: Polyline) => {
+  return new Point(poly.width, poly.height);
+};
+
+/**
+ * This function locates the controls.
+ * It'll be used both for drawing and for interaction.
+ */
+const factoryPolyPositionHandler = (pointIndex: number) => {
+  return function (dim: Point, finalMatrix: TMat2D, polyObject: Polyline) {
+    const x = polyObject.points[pointIndex].x - polyObject.pathOffset.x,
+      y = polyObject.points[pointIndex].y - polyObject.pathOffset.y;
+    return new Point(x, y).transform(
+      multiplyTransformMatrices(
+        polyObject.canvas?.viewportTransform ?? iMatrix,
+        polyObject.calcTransformMatrix()
+      )
+    );
+  };
+};
+
+/**
+ * This function defines what the control does.
+ * It'll be called on every mouse move after a control has been clicked and is being dragged.
+ * The function receives as argument the mouse event, the current transform object
+ * and the current position in canvas coordinate `transform.target` is a reference to the
+ * current object being transformed.
+ */
+const polyActionHandler = (
+  eventData: TPointerEvent,
+  transform: TTransformAnchor,
+  x: number,
+  y: number
+) => {
+  const poly = transform.target as Polyline,
+    pointIndex = transform.pointIndex,
+    mouseLocalPosition = getLocalPoint(transform, 'center', 'center', x, y),
+    polygonBaseSize = getSize(poly),
+    size = poly._getTransformedDimensions(),
+    sizeFactor = polygonBaseSize.divide(size),
+    adjustFlip = new Point(poly.flipX ? -1 : 1, poly.flipY ? -1 : 1);
+
+  const finalPointPosition = mouseLocalPosition
+    .multiply(adjustFlip)
+    .multiply(sizeFactor)
+    .add(poly.pathOffset);
+
+  poly.points[pointIndex] = finalPointPosition;
+  poly.setDimensions();
+
+  return true;
+};
+
+/**
+ * Keep the polygon in the same position when we change its `width`/`height`/`top`/`left`.
+ */
+const anchorWrapper = (
+  pointIndex: number,
+  fn: TransformActionHandler<TTransformAnchor>
+) => {
+  return function (
+    eventData: TPointerEvent,
+    transform: Transform,
+    x: number,
+    y: number
+  ) {
+    const poly = transform.target as Polyline,
+      anchorIndex = (pointIndex > 0 ? pointIndex : poly.points.length) - 1,
+      pointInParentPlane = new Point(
+        poly.points[anchorIndex].x - poly.pathOffset.x,
+        poly.points[anchorIndex].y - poly.pathOffset.y
+      ).transform(poly.calcOwnMatrix()),
+      actionPerformed = fn(eventData, { ...transform, pointIndex }, x, y),
+      polygonBaseSize = getSize(poly),
+      adjustFlip = new Point(poly.flipX ? -1 : 1, poly.flipY ? -1 : 1);
+
+    const newPosition = new Point(
+      poly.points[anchorIndex].x,
+      poly.points[anchorIndex].y
+    )
+      .subtract(poly.pathOffset)
+      .divide(polygonBaseSize)
+      .multiply(adjustFlip);
+
+    poly.setPositionByOrigin(
+      pointInParentPlane,
+      newPosition.x + 0.5,
+      newPosition.y + 0.5
+    );
+    return actionPerformed;
+  };
+};
+
+export function createPolyControls(
+  poly: Polyline,
+  options?: Partial<Control>
+): Record<string, Control>;
+export function createPolyControls(
+  numOfControls: number,
+  options?: Partial<Control>
+): Record<string, Control>;
+export function createPolyControls(
+  arg0: number | Polyline,
+  options: Partial<Control> = {}
+) {
+  const controls = {} as Record<string, Control>;
+  for (
+    let idx = 0;
+    idx < (typeof arg0 === 'number' ? arg0 : arg0.points.length);
+    idx++
+  ) {
+    controls[`p${idx}`] = new Control({
+      actionName: 'modifyPoly',
+      positionHandler: factoryPolyPositionHandler(idx),
+      actionHandler: anchorWrapper(idx, polyActionHandler),
+      ...options,
+    });
+  }
+  return controls;
+}

package/src/controls/rotate.ts

@@ -0,0 +1,87 @@
+import {
+  ControlCursorCallback,
+  TransformActionHandler,
+} from '../EventTypeDefs';
+import { radiansToDegrees } from '../util/misc/radiansDegreesConversion';
+import { isLocked, NOT_ALLOWED_CURSOR } from './util';
+import { wrapWithFireEvent } from './wrapWithFireEvent';
+import { wrapWithFixedAnchor } from './wrapWithFixedAnchor';
+
+/**
+ * Find the correct style for the control that is used for rotation.
+ * this function is very simple and it just take care of not-allowed or standard cursor
+ * @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 rotationStyleHandler: ControlCursorCallback = (
+  eventData,
+  control,
+  fabricObject
+) => {
+  if (fabricObject.lockRotation) {
+    return NOT_ALLOWED_CURSOR;
+  }
+  return control.cursorStyle;
+};
+
+/**
+ * Action handler for rotation and snapping, without anchor point.
+ * 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
+ * @private
+ */
+const rotateObjectWithSnapping: TransformActionHandler = (
+  eventData,
+  { target, ex, ey, theta, originX, originY },
+  x,
+  y
+) => {
+  const pivotPoint = target.translateToOriginPoint(
+    target.getRelativeCenterPoint(),
+    originX,
+    originY
+  );
+
+  if (isLocked(target, 'lockRotation')) {
+    return false;
+  }
+
+  const lastAngle = Math.atan2(ey - pivotPoint.y, ex - pivotPoint.x),
+    curAngle = Math.atan2(y - pivotPoint.y, x - pivotPoint.x);
+  let angle = radiansToDegrees(curAngle - lastAngle + theta);
+
+  if (target.snapAngle && target.snapAngle > 0) {
+    const snapAngle = target.snapAngle,
+      snapThreshold = target.snapThreshold || snapAngle,
+      rightAngleLocked = Math.ceil(angle / snapAngle) * snapAngle,
+      leftAngleLocked = Math.floor(angle / snapAngle) * snapAngle;
+
+    if (Math.abs(angle - leftAngleLocked) < snapThreshold) {
+      angle = leftAngleLocked;
+    } else if (Math.abs(angle - rightAngleLocked) < snapThreshold) {
+      angle = rightAngleLocked;
+    }
+  }
+
+  // normalize angle to positive value
+  if (angle < 0) {
+    angle = 360 + angle;
+  }
+  angle %= 360;
+
+  const hasRotated = target.angle !== angle;
+  // TODO: why aren't we using set?
+  target.angle = angle;
+  return hasRotated;
+};
+
+export const rotationWithSnapping = wrapWithFireEvent(
+  'rotating',
+  wrapWithFixedAnchor(rotateObjectWithSnapping)
+);

package/src/controls/scale.ts

@@ -0,0 +1,277 @@
+import {
+  ControlCursorCallback,
+  TPointerEvent,
+  Transform,
+  TransformActionHandler,
+} from '../EventTypeDefs';
+import type { FabricObject } from '../shapes/Object/FabricObject';
+import { TAxis } from '../typedefs';
+import type { Canvas } from '../canvas/Canvas';
+import {
+  findCornerQuadrant,
+  getLocalPoint,
+  invertOrigin,
+  isLocked,
+  isTransformCentered,
+  NOT_ALLOWED_CURSOR,
+} from './util';
+import { wrapWithFireEvent } from './wrapWithFireEvent';
+import { wrapWithFixedAnchor } from './wrapWithFixedAnchor';
+
+type ScaleTransform = Transform & {
+  gestureScale?: number;
+  signX?: number;
+  signY?: number;
+};
+
+type ScaleBy = TAxis | 'equally' | '' | undefined;
+
+/**
+ * Inspect event and fabricObject properties to understand if the scaling action
+ * @param {Event} eventData from the user action
+ * @param {FabricObject} fabricObject the fabric object about to scale
+ * @return {Boolean} true if scale is proportional
+ */
+export function scaleIsProportional(
+  eventData: TPointerEvent,
+  fabricObject: FabricObject
+): boolean {
+  const canvas = fabricObject.canvas as Canvas,
+    uniformIsToggled = eventData[canvas.uniScaleKey!];
+  return (
+    (canvas.uniformScaling && !uniformIsToggled) ||
+    (!canvas.uniformScaling && uniformIsToggled)
+  );
+}
+
+/**
+ * Inspect fabricObject to understand if the current scaling action is allowed
+ * @param {FabricObject} fabricObject the fabric object about to scale
+ * @param {String} by 'x' or 'y' or ''
+ * @param {Boolean} scaleProportionally true if we are trying to scale proportionally
+ * @return {Boolean} true if scaling is not allowed at current conditions
+ */
+export function scalingIsForbidden(
+  fabricObject: FabricObject,
+  by: ScaleBy,
+  scaleProportionally: boolean
+) {
+  const lockX = isLocked(fabricObject, 'lockScalingX'),
+    lockY = isLocked(fabricObject, 'lockScalingY');
+  if (lockX && lockY) {
+    return true;
+  }
+  if (!by && (lockX || lockY) && scaleProportionally) {
+    return true;
+  }
+  if (lockX && by === 'x') {
+    return true;
+  }
+  if (lockY && by === 'y') {
+    return true;
+  }
+  return false;
+}
+
+const scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'];
+
+/**
+ * return the correct cursor style for the scale 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 scaleCursorStyleHandler: ControlCursorCallback = (
+  eventData,
+  control,
+  fabricObject
+) => {
+  const scaleProportionally = scaleIsProportional(eventData, fabricObject),
+    by =
+      control.x !== 0 && control.y === 0
+        ? 'x'
+        : control.x === 0 && control.y !== 0
+        ? 'y'
+        : '';
+  if (scalingIsForbidden(fabricObject, by, scaleProportionally)) {
+    return NOT_ALLOWED_CURSOR;
+  }
+  const n = findCornerQuadrant(fabricObject, control);
+  return `${scaleMap[n]}-resize`;
+};
+
+/**
+ * Basic scaling logic, reused with different constrain for scaling X,Y, freely or equally.
+ * 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
+ * @param {Object} options additional information for scaling
+ * @param {String} options.by 'x', 'y', 'equally' or '' to indicate type of scaling
+ * @return {Boolean} true if some change happened
+ * @private
+ */
+function scaleObject(
+  eventData: TPointerEvent,
+  transform: ScaleTransform,
+  x: number,
+  y: number,
+  options: { by?: ScaleBy } = {}
+) {
+  const target = transform.target,
+    by = options.by,
+    scaleProportionally = scaleIsProportional(eventData, target),
+    forbidScaling = scalingIsForbidden(target, by, scaleProportionally);
+  let newPoint, scaleX, scaleY, dim, signX, signY;
+
+  if (forbidScaling) {
+    return false;
+  }
+  if (transform.gestureScale) {
+    scaleX = transform.scaleX * transform.gestureScale;
+    scaleY = transform.scaleY * transform.gestureScale;
+  } else {
+    newPoint = getLocalPoint(
+      transform,
+      transform.originX,
+      transform.originY,
+      x,
+      y
+    );
+    // use of sign: We use sign to detect change of direction of an action. sign usually change when
+    // we cross the origin point with the mouse. So a scale flip for example. There is an issue when scaling
+    // by center and scaling using one middle control ( default: mr, mt, ml, mb), the mouse movement can easily
+    // cross many time the origin point and flip the object. so we need a way to filter out the noise.
+    // This ternary here should be ok to filter out X scaling when we want Y only and vice versa.
+    signX = by !== 'y' ? Math.sign(newPoint.x || transform.signX || 1) : 1;
+    signY = by !== 'x' ? Math.sign(newPoint.y || transform.signY || 1) : 1;
+    if (!transform.signX) {
+      transform.signX = signX;
+    }
+    if (!transform.signY) {
+      transform.signY = signY;
+    }
+
+    if (
+      isLocked(target, 'lockScalingFlip') &&
+      (transform.signX !== signX || transform.signY !== signY)
+    ) {
+      return false;
+    }
+
+    dim = target._getTransformedDimensions();
+    // missing detection of flip and logic to switch the origin
+    if (scaleProportionally && !by) {
+      // uniform scaling
+      const distance = Math.abs(newPoint.x) + Math.abs(newPoint.y),
+        { original } = transform,
+        originalDistance =
+          Math.abs((dim.x * original.scaleX) / target.scaleX) +
+          Math.abs((dim.y * original.scaleY) / target.scaleY),
+        scale = distance / originalDistance;
+      scaleX = original.scaleX * scale;
+      scaleY = original.scaleY * scale;
+    } else {
+      scaleX = Math.abs((newPoint.x * target.scaleX) / dim.x);
+      scaleY = Math.abs((newPoint.y * target.scaleY) / dim.y);
+    }
+    // if we are scaling by center, we need to double the scale
+    if (isTransformCentered(transform)) {
+      scaleX *= 2;
+      scaleY *= 2;
+    }
+    if (transform.signX !== signX && by !== 'y') {
+      transform.originX = invertOrigin(transform.originX);
+      scaleX *= -1;
+      transform.signX = signX;
+    }
+    if (transform.signY !== signY && by !== 'x') {
+      transform.originY = invertOrigin(transform.originY);
+      scaleY *= -1;
+      transform.signY = signY;
+    }
+  }
+  // minScale is taken are in the setter.
+  const oldScaleX = target.scaleX,
+    oldScaleY = target.scaleY;
+  if (!by) {
+    !isLocked(target, 'lockScalingX') && target.set('scaleX', scaleX);
+    !isLocked(target, 'lockScalingY') && target.set('scaleY', scaleY);
+  } else {
+    // forbidden cases already handled on top here.
+    by === 'x' && target.set('scaleX', scaleX);
+    by === 'y' && target.set('scaleY', scaleY);
+  }
+  return oldScaleX !== target.scaleX || oldScaleY !== target.scaleY;
+}
+
+/**
+ * Generic scaling logic, to scale from corners either equally or freely.
+ * 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 scaleObjectFromCorner: TransformActionHandler<ScaleTransform> = (
+  eventData,
+  transform,
+  x,
+  y
+) => {
+  return scaleObject(eventData, transform, x, y);
+};
+
+/**
+ * Scaling logic for the X axis.
+ * 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
+ */
+const scaleObjectX: TransformActionHandler<ScaleTransform> = (
+  eventData,
+  transform,
+  x,
+  y
+) => {
+  return scaleObject(eventData, transform, x, y, { by: 'x' });
+};
+
+/**
+ * Scaling logic for the Y axis.
+ * 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
+ */
+const scaleObjectY: TransformActionHandler<ScaleTransform> = (
+  eventData,
+  transform,
+  x,
+  y
+) => {
+  return scaleObject(eventData, transform, x, y, { by: 'y' });
+};
+
+export const scalingEqually = wrapWithFireEvent(
+  'scaling',
+  wrapWithFixedAnchor(scaleObjectFromCorner)
+);
+
+export const scalingX = wrapWithFireEvent(
+  'scaling',
+  wrapWithFixedAnchor(scaleObjectX)
+);
+
+export const scalingY = wrapWithFireEvent(
+  'scaling',
+  wrapWithFixedAnchor(scaleObjectY)
+);

package/src/controls/scaleSkew.ts

@@ -0,0 +1,92 @@
+import {
+  ControlCallback,
+  ControlCursorCallback,
+  TPointerEvent,
+  TransformActionHandler,
+} from '../EventTypeDefs';
+import type { FabricObject } from '../shapes/Object/FabricObject';
+import { 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 ? 'skewX' : 'scaleY';
+  }
+  if (control.y === 0) {
+    // then is scaleY or skewX
+    return isAlternative ? 'skewY' : 'scaleX';
+  }
+  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
+) => {
+  return isAltAction(eventData, fabricObject)
+    ? skewCursorStyleHandler(eventData, control, fabricObject)
+    : scaleCursorStyleHandler(eventData, control, fabricObject);
+};
+/**
+ * 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);
+};