fabric 5.3.0 → 6.0.0-beta3

package/src/controls/skew.ts

@@ -0,0 +1,242 @@
+import {
+  ControlCursorCallback,
+  TPointerEvent,
+  Transform,
+  TransformActionHandler,
+} from '../EventTypeDefs';
+import { resolveOrigin } from '../util/misc/resolveOrigin';
+import { Point } from '../Point';
+import { 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';
+
+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: 'scaleX',
+    skew: 'skewX',
+    lockSkewing: 'lockSkewingX',
+    origin: 'originX',
+    flip: 'flipX',
+  },
+  y: {
+    counterAxis: 'x',
+    scale: 'scaleY',
+    skew: 'skewY',
+    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
+) => {
+  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) % 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('scaleX', 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,154 @@
+import {
+  TPointerEvent,
+  Transform,
+  TransformAction,
+  BasicTransformEvent,
+} from '../EventTypeDefs';
+import { resolveOrigin } from '../util/misc/resolveOrigin';
+import { Point } from '../Point';
+import type { FabricObject } from '../shapes/Object/FabricObject';
+import { TOriginX, TOriginY } from '../typedefs';
+import {
+  degreesToRadians,
+  radiansToDegrees,
+} from '../util/misc/radiansDegreesConversion';
+import type { Control } from './Control';
+
+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,
+  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 transform.originX === 'center' && transform.originY === '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
+) {
+  //  angle is relative to canvas plane
+  const angle = fabricObject.getTotalAngle(),
+    cornerAngle =
+      angle + radiansToDegrees(Math.atan2(control.y, control.x)) + 360;
+  return Math.round((cornerAngle % 360) / 45);
+}
+
+/**
+ * @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,25 @@
+import {
+  TModificationEvents,
+  Transform,
+  TransformActionHandler,
+} from '../EventTypeDefs';
+import { fireEvent } from '../util/fireEvent';
+import { commonEventInfo } from './util';
+
+/**
+ * Wrap an action handler with firing an event if the action is performed
+ * @param {Function} actionHandler the function to wrap
+ * @return {Function} a function with an action handler signature
+ */
+export const wrapWithFireEvent = <T extends Transform>(
+  eventName: TModificationEvents,
+  actionHandler: TransformActionHandler<T>
+) => {
+  return ((eventData, transform, x, y) => {
+    const actionPerformed = actionHandler(eventData, transform, x, y);
+    if (actionPerformed) {
+      fireEvent(eventName, commonEventInfo(eventData, transform, x, y));
+    }
+    return actionPerformed;
+  }) as TransformActionHandler<T>;
+};

package/src/controls/wrapWithFixedAnchor.ts

@@ -0,0 +1,20 @@
+import { 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);
+    target.setPositionByOrigin(constraint, originX, originY);
+    return actionPerformed;
+  }) as TransformActionHandler<T>;
+}

package/src/env/browser.ts

@@ -0,0 +1,32 @@
+/* eslint-disable no-restricted-globals */
+import { config } from '../config';
+import { WebGLProbe } from '../filters/GLProbes/WebGLProbe';
+import { TCopyPasteData, TFabricEnv } from './types';
+
+const copyPasteData: TCopyPasteData = {};
+
+let initialized = false;
+let isTouchSupported: boolean;
+
+export const getEnv = (): TFabricEnv => {
+  if (!initialized) {
+    config.configure({
+      devicePixelRatio: window.devicePixelRatio || 1,
+    });
+    isTouchSupported =
+      'ontouchstart' in window ||
+      'ontouchstart' in document ||
+      (window && window.navigator && window.navigator.maxTouchPoints > 0);
+    initialized = true;
+  }
+  return {
+    document,
+    window,
+    isTouchSupported,
+    WebGLProbe: new WebGLProbe(),
+    dispose() {
+      // noop
+    },
+    copyPasteData,
+  };
+};

package/src/env/index.ts

@@ -0,0 +1,24 @@
+/**
+ * This file is consumed by fabric.
+ * The `./node` and `./browser` files define the env variable that is used by this module.
+ * The `./node` module sets the env at import time.
+ * The `./browser` module is defined to be the default env and doesn't set the env at all.
+ * This is done in order to support isomorphic usage for browser and node applications
+ * since window and document aren't defined at time of import in SSR, we can't set env so we avoid it by deferring to the default env.
+ */
+
+import { TFabricEnv } from './types';
+import { getEnv as getBrowserEnv } from './browser';
+import type { DOMWindow } from 'jsdom';
+
+let env: TFabricEnv;
+
+export const setEnv = (value: TFabricEnv) => {
+  env = value;
+};
+
+export const getEnv = () => env || getBrowserEnv();
+
+export const getDocument = (): Document => getEnv().document;
+
+export const getWindow = (): Window | DOMWindow => getEnv().window;

package/src/env/node.ts

@@ -0,0 +1,56 @@
+/* eslint-disable no-restricted-globals */
+import type { Canvas as NodeCanvas } from 'canvas';
+import { JSDOM } from 'jsdom';
+// @ts-ignore
+import utils from 'jsdom/lib/jsdom/living/generated/utils.js';
+import { config } from '../config';
+import { NodeGLProbe } from '../filters/GLProbes/NodeGLProbe';
+import { setEnv } from './index';
+import { TCopyPasteData, TFabricEnv } from './types';
+
+const { implForWrapper: jsdomImplForWrapper } = utils;
+
+const copyPasteData: TCopyPasteData = {};
+
+const { window: JSDOMWindow } = new JSDOM(
+  decodeURIComponent(
+    '%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'
+  ),
+  {
+    resources: 'usable',
+    // needed for `requestAnimationFrame`
+    pretendToBeVisual: true,
+  }
+);
+
+config.configure({
+  devicePixelRatio: JSDOMWindow.devicePixelRatio || 1,
+});
+
+export const getNodeCanvas = (canvasEl: HTMLCanvasElement) => {
+  const impl = jsdomImplForWrapper(canvasEl);
+  return (impl._canvas || impl._image) as NodeCanvas;
+};
+
+export const getEnv = (): TFabricEnv => {
+  return {
+    document: JSDOMWindow.document,
+    window: JSDOMWindow,
+    isTouchSupported: false,
+    WebGLProbe: new NodeGLProbe(),
+    dispose(element) {
+      const impl = jsdomImplForWrapper(element);
+      if (impl) {
+        impl._image = null;
+        impl._canvas = null;
+        // unsure if necessary
+        impl._currentSrc = null;
+        impl._attributes = null;
+        impl._classList = null;
+      }
+    },
+    copyPasteData,
+  };
+};
+
+setEnv(getEnv());

package/src/env/types.ts

@@ -0,0 +1,15 @@
+import { GLProbe } from '../filters/GLProbes/GLProbe';
+import type { DOMWindow } from 'jsdom';
+
+export type TCopyPasteData = {
+  copiedText?: string;
+  copiedStyle?: Record<string, string>;
+};
+export type TFabricEnv = {
+  document: Document;
+  window: Window | DOMWindow;
+  isTouchSupported: boolean;
+  WebGLProbe: GLProbe;
+  dispose(element: Element): void;
+  copyPasteData: TCopyPasteData;
+};