fabric 5.3.0 → 6.0.0-beta1

package/src/util/animation/easing.ts

@@ -0,0 +1,327 @@
+/**
+ * Easing functions
+ * @see {@link http://gizma.com/easing/ Easing Equations by Robert Penner}
+ */
+
+import { twoMathPi, halfPI } from '../../constants';
+import { TEasingFunction } from './types';
+
+const normalize = (a: number, c: number, p: number, s: number) => {
+  if (a < Math.abs(c)) {
+    a = c;
+    s = p / 4;
+  } else {
+    //handle the 0/0 case:
+    if (c === 0 && a === 0) {
+      s = (p / twoMathPi) * Math.asin(1);
+    } else {
+      s = (p / twoMathPi) * Math.asin(c / a);
+    }
+  }
+  return { a, c, p, s };
+};
+
+const elastic = (
+  a: number,
+  s: number,
+  p: number,
+  t: number,
+  d: number
+): number =>
+  a * Math.pow(2, 10 * (t -= 1)) * Math.sin(((t * d - s) * twoMathPi) / p);
+
+/**
+ * Default sinusoidal easing
+ */
+export const defaultEasing: TEasingFunction = (t, b, c, d) =>
+  -c * Math.cos((t / d) * halfPI) + c + b;
+
+/**
+ * Cubic easing in
+ */
+export const easeInCubic: TEasingFunction = (t, b, c, d) =>
+  c * (t / d) ** 3 + b;
+
+/**
+ * Cubic easing out
+ */
+export const easeOutCubic: TEasingFunction = (t, b, c, d) =>
+  c * ((t / d - 1) ** 3 + 1) + b;
+
+/**
+ * Cubic easing in and out
+ */
+export const easeInOutCubic: TEasingFunction = (t, b, c, d) => {
+  t /= d / 2;
+  if (t < 1) {
+    return (c / 2) * t ** 3 + b;
+  }
+  return (c / 2) * ((t - 2) ** 3 + 2) + b;
+};
+
+/**
+ * Quartic easing in
+ */
+export const easeInQuart: TEasingFunction = (t, b, c, d) =>
+  c * (t /= d) * t ** 3 + b;
+
+/**
+ * Quartic easing out
+ */
+export const easeOutQuart: TEasingFunction = (t, b, c, d) =>
+  -c * ((t = t / d - 1) * t ** 3 - 1) + b;
+
+/**
+ * Quartic easing in and out
+ */
+export const easeInOutQuart: TEasingFunction = (t, b, c, d) => {
+  t /= d / 2;
+  if (t < 1) {
+    return (c / 2) * t ** 4 + b;
+  }
+  return (-c / 2) * ((t -= 2) * t ** 3 - 2) + b;
+};
+
+/**
+ * Quintic easing in
+ */
+export const easeInQuint: TEasingFunction = (t, b, c, d) =>
+  c * (t / d) ** 5 + b;
+
+/**
+ * Quintic easing out
+ */
+export const easeOutQuint: TEasingFunction = (t, b, c, d) =>
+  c * ((t / d - 1) ** 5 + 1) + b;
+
+/**
+ * Quintic easing in and out
+ */
+export const easeInOutQuint: TEasingFunction = (t, b, c, d) => {
+  t /= d / 2;
+  if (t < 1) {
+    return (c / 2) * t ** 5 + b;
+  }
+  return (c / 2) * ((t - 2) ** 5 + 2) + b;
+};
+
+/**
+ * Sinusoidal easing in
+ */
+export const easeInSine: TEasingFunction = (t, b, c, d) =>
+  -c * Math.cos((t / d) * halfPI) + c + b;
+
+/**
+ * Sinusoidal easing out
+ */
+export const easeOutSine: TEasingFunction = (t, b, c, d) =>
+  c * Math.sin((t / d) * halfPI) + b;
+
+/**
+ * Sinusoidal easing in and out
+ */
+export const easeInOutSine: TEasingFunction = (t, b, c, d) =>
+  (-c / 2) * (Math.cos((Math.PI * t) / d) - 1) + b;
+
+/**
+ * Exponential easing in
+ */
+export const easeInExpo: TEasingFunction = (t, b, c, d) =>
+  t === 0 ? b : c * 2 ** (10 * (t / d - 1)) + b;
+
+/**
+ * Exponential easing out
+ */
+export const easeOutExpo: TEasingFunction = (t, b, c, d) =>
+  t === d ? b + c : c * -(2 ** ((-10 * t) / d) + 1) + b;
+
+/**
+ * Exponential easing in and out
+ */
+export const easeInOutExpo: TEasingFunction = (t, b, c, d) => {
+  if (t === 0) {
+    return b;
+  }
+  if (t === d) {
+    return b + c;
+  }
+  t /= d / 2;
+  if (t < 1) {
+    return (c / 2) * 2 ** (10 * (t - 1)) + b;
+  }
+  return (c / 2) * -(2 ** (-10 * --t) + 2) + b;
+};
+
+/**
+ * Circular easing in
+ */
+export const easeInCirc: TEasingFunction = (t, b, c, d) =>
+  -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
+
+/**
+ * Circular easing out
+ */
+export const easeOutCirc: TEasingFunction = (t, b, c, d) =>
+  c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
+
+/**
+ * Circular easing in and out
+ */
+export const easeInOutCirc: TEasingFunction = (t, b, c, d) => {
+  t /= d / 2;
+  if (t < 1) {
+    return (-c / 2) * (Math.sqrt(1 - t ** 2) - 1) + b;
+  }
+  return (c / 2) * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
+};
+
+/**
+ * Elastic easing in
+ */
+export const easeInElastic: TEasingFunction = (t, b, c, d) => {
+  const s = 1.70158,
+    a = c;
+  let p = 0;
+  if (t === 0) {
+    return b;
+  }
+  t /= d;
+  if (t === 1) {
+    return b + c;
+  }
+  if (!p) {
+    p = d * 0.3;
+  }
+  const { a: normA, s: normS, p: normP } = normalize(a, c, p, s);
+  return -elastic(normA, normS, normP, t, d) + b;
+};
+
+/**
+ * Elastic easing out
+ */
+export const easeOutElastic: TEasingFunction = (t, b, c, d) => {
+  const s = 1.70158,
+    a = c;
+  let p = 0;
+  if (t === 0) {
+    return b;
+  }
+  t /= d;
+  if (t === 1) {
+    return b + c;
+  }
+  if (!p) {
+    p = d * 0.3;
+  }
+  const { a: normA, s: normS, p: normP, c: normC } = normalize(a, c, p, s);
+  return (
+    normA * 2 ** (-10 * t) * Math.sin(((t * d - normS) * twoMathPi) / normP) +
+    normC +
+    b
+  );
+};
+
+/**
+ * Elastic easing in and out
+ */
+export const easeInOutElastic: TEasingFunction = (t, b, c, d) => {
+  const s = 1.70158,
+    a = c;
+  let p = 0;
+  if (t === 0) {
+    return b;
+  }
+  t /= d / 2;
+  if (t === 2) {
+    return b + c;
+  }
+  if (!p) {
+    p = d * (0.3 * 1.5);
+  }
+  const { a: normA, s: normS, p: normP, c: normC } = normalize(a, c, p, s);
+  if (t < 1) {
+    return -0.5 * elastic(normA, normS, normP, t, d) + b;
+  }
+  return (
+    normA *
+      Math.pow(2, -10 * (t -= 1)) *
+      Math.sin(((t * d - normS) * twoMathPi) / normP) *
+      0.5 +
+    normC +
+    b
+  );
+};
+
+/**
+ * Backwards easing in
+ */
+export const easeInBack: TEasingFunction = (t, b, c, d, s = 1.70158) =>
+  c * (t /= d) * t * ((s + 1) * t - s) + b;
+
+/**
+ * Backwards easing out
+ */
+export const easeOutBack: TEasingFunction = (t, b, c, d, s = 1.70158) =>
+  c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
+
+/**
+ * Backwards easing in and out
+ */
+export const easeInOutBack: TEasingFunction = (t, b, c, d, s = 1.70158) => {
+  t /= d / 2;
+  if (t < 1) {
+    return (c / 2) * (t * t * (((s *= 1.525) + 1) * t - s)) + b;
+  }
+  return (c / 2) * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b;
+};
+
+/**
+ * Bouncing easing out
+ */
+export const easeOutBounce: TEasingFunction = (t, b, c, d) => {
+  if ((t /= d) < 1 / 2.75) {
+    return c * (7.5625 * t * t) + b;
+  } else if (t < 2 / 2.75) {
+    return c * (7.5625 * (t -= 1.5 / 2.75) * t + 0.75) + b;
+  } else if (t < 2.5 / 2.75) {
+    return c * (7.5625 * (t -= 2.25 / 2.75) * t + 0.9375) + b;
+  } else {
+    return c * (7.5625 * (t -= 2.625 / 2.75) * t + 0.984375) + b;
+  }
+};
+
+/**
+ * Bouncing easing in
+ */
+export const easeInBounce: TEasingFunction = (t, b, c, d) =>
+  c - easeOutBounce(d - t, 0, c, d) + b;
+
+/**
+ * Bouncing easing in and out
+ */
+export const easeInOutBounce: TEasingFunction = (t, b, c, d) =>
+  t < d / 2
+    ? easeInBounce(t * 2, 0, c, d) * 0.5 + b
+    : easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
+
+/**
+ * Quadratic easing in
+ */
+export const easeInQuad: TEasingFunction = (t, b, c, d) => c * (t /= d) * t + b;
+
+/**
+ * Quadratic easing out
+ */
+export const easeOutQuad: TEasingFunction = (t, b, c, d) =>
+  -c * (t /= d) * (t - 2) + b;
+
+/**
+ * Quadratic easing in and out
+ */
+export const easeInOutQuad: TEasingFunction = (t, b, c, d) => {
+  t /= d / 2;
+  if (t < 1) {
+    return (c / 2) * t ** 2 + b;
+  }
+  return (-c / 2) * (--t * (t - 2) - 1) + b;
+};

package/src/util/animation/types.ts

@@ -0,0 +1,136 @@
+import { TColorArg } from '../../color/Color';
+
+export type AnimationState = 'pending' | 'running' | 'completed' | 'aborted';
+
+/**
+ * Callback called every frame
+ * @param {number | number[]} value current value of the animation.
+ * @param {number} valueProgress ∈ [0, 1], the current animation progress reflected on value, normalized.
+ * 0 is the starting value and 1 is the ending value.
+ * @param {number} durationProgress ∈ [0, 1], the current animation duration normalized to 1.
+ */
+export type TOnAnimationChangeCallback<T, R = void> = (
+  value: T,
+  valueProgress: number,
+  durationProgress: number
+) => R;
+
+/**
+ * Called on each step to determine if animation should abort
+ * @returns truthy if animation should abort
+ */
+export type TAbortCallback<T> = TOnAnimationChangeCallback<T, boolean>;
+
+/**
+ * An easing function used to calculate the current value
+ * @see {@link AnimationBase['calculate']}
+ *
+ * @param timeElapsed ms elapsed since start
+ * @param startValue
+ * @param byValue
+ * @param duration in ms
+ * @returns next value
+ */
+export type TEasingFunction<T = unknown> = T extends number[]
+  ? (
+      timeElapsed: number,
+      startValue: number,
+      byValue: number,
+      duration: number,
+      index: number
+    ) => number
+  : (
+      timeElapsed: number,
+      startValue: number,
+      byValue: number,
+      duration: number
+    ) => number;
+
+export type TAnimationBaseOptions<T> = {
+  /**
+   * Duration of the animation in ms
+   * @default 500
+   */
+  duration: number;
+
+  /**
+   * Delay to start the animation in ms
+   * @default 0
+   */
+  delay: number;
+
+  /**
+   * Easing function
+   * @default {defaultEasing}
+   */
+  easing: TEasingFunction<T>;
+
+  /**
+   * The object this animation is being performed on
+   */
+  target: unknown;
+};
+
+export type TAnimationCallbacks<T> = {
+  /**
+   * Called when the animation starts
+   */
+  onStart: VoidFunction;
+
+  /**
+   * Called at each frame of the animation
+   */
+  onChange: TOnAnimationChangeCallback<T>;
+
+  /**
+   * Called after the last frame of the animation
+   */
+  onComplete: TOnAnimationChangeCallback<T>;
+
+  /**
+   * Function called at each frame.
+   * If it returns true, abort
+   */
+  abort: TAbortCallback<T>;
+};
+
+export type TBaseAnimationOptions<T, TCallback = T, TEasing = T> = Partial<
+  TAnimationBaseOptions<TEasing> & TAnimationCallbacks<TCallback>
+> & {
+  startValue: T;
+  byValue: T;
+};
+
+export type TAnimationOptions<T, TCallback = T, TEasing = T> = Partial<
+  TAnimationBaseOptions<TEasing> &
+    TAnimationCallbacks<TCallback> & {
+      /**
+       * Starting value(s)
+       * @default 0
+       */
+      startValue: T;
+
+      /**
+       * Ending value(s)
+       * @default 100
+       */
+      endValue: T;
+    }
+>;
+
+export type ValueAnimationOptions = TAnimationOptions<number>;
+
+export type ArrayAnimationOptions = TAnimationOptions<number[]>;
+
+export type ColorAnimationOptions = TAnimationOptions<
+  TColorArg,
+  string,
+  number[]
+>;
+
+export type AnimationOptions<T extends number | number[] | TColorArg> =
+  T extends TColorArg
+    ? ColorAnimationOptions
+    : T extends number[]
+    ? ArrayAnimationOptions
+    : ValueAnimationOptions;

package/src/util/applyMixins.ts

@@ -0,0 +1,22 @@
+import { Constructor } from '../typedefs';
+
+/***
+ * https://www.typescriptlang.org/docs/handbook/mixins.html#alternative-pattern
+ */
+export function applyMixins<T extends Constructor, S extends Constructor>(
+  derivedCtor: T,
+  constructors: S[]
+) {
+  constructors.forEach((baseCtor) => {
+    Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
+      name !== 'constructor' &&
+        Object.defineProperty(
+          derivedCtor.prototype,
+          name,
+          Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
+            Object.create(null)
+        );
+    });
+  });
+  return derivedCtor as T & { prototype: InstanceType<T & S> };
+}

package/src/util/class_registry.ts

@@ -0,0 +1,54 @@
+/*
+ * This Map connects the objects type value with their
+ * class implementation. It used from any object to understand which are
+ * the classes to enlive when requesting a object.type = 'path' for example.
+ * Objects uses it for clipPath, Canvas uses it for everything.
+ * This is necessary for generic code to run and enlive instances from serialized representation.
+ * You can customize which classes get enlived from SVG parsing using this classRegistry.
+ * The Registry start empty and gets filled in depending which files you import.
+ * If you want to be able to parse arbitrary SVGs or JSON representation of canvases, coming from
+ * differnet sources you will need to import all fabric because you may need all classes.
+ */
+
+export const JSON = 'json';
+export const SVG = 'svg';
+
+export class ClassRegistry {
+  declare [JSON]: Map<string, any>;
+  declare [SVG]: Map<string, any>;
+
+  constructor() {
+    this[JSON] = new Map();
+    this[SVG] = new Map();
+  }
+
+  getClass(classType: string): any {
+    const constructor = this[JSON].get(classType);
+    if (!constructor) {
+      throw new Error(`No class registered for ${classType}`);
+    }
+    return constructor;
+  }
+
+  setClass(classConstructor: any, classType?: string) {
+    this[JSON].set(
+      classType ?? classConstructor.prototype.type,
+      classConstructor
+    );
+  }
+
+  getSVGClass(SVGTagName: string): any {
+    return this[SVG].get(SVGTagName);
+  }
+
+  setSVGClass(classConstructor: any, SVGTagName?: string) {
+    this[SVG].set(
+      SVGTagName ?? classConstructor.prototype.type,
+      classConstructor
+    );
+  }
+}
+
+const classRegistry = new ClassRegistry();
+
+export { classRegistry };

package/src/util/dom_event.ts

@@ -0,0 +1,28 @@
+//@ts-nocheck
+import { Point } from '../Point';
+import { getScrollLeftTop } from './dom_misc';
+
+const touchEvents = ['touchstart', 'touchmove', 'touchend'];
+
+function getTouchInfo(event) {
+  const touchProp = event.changedTouches;
+  if (touchProp && touchProp[0]) {
+    return touchProp[0];
+  }
+  return event;
+}
+
+export const getPointer = (event) => {
+  const element = event.target,
+    scroll = getScrollLeftTop(element),
+    _evt = getTouchInfo(event);
+  return new Point(_evt.clientX + scroll.left, _evt.clientY + scroll.top);
+};
+
+export const isTouchEvent = (event) =>
+  touchEvents.indexOf(event.type) > -1 || event.pointerType === 'touch';
+
+export const stopEvent = (e: Event) => {
+  e.preventDefault();
+  e.stopPropagation();
+};

package/src/util/dom_misc.ts

@@ -0,0 +1,138 @@
+//@ts-nocheck
+
+import { getEnv } from '../env';
+
+/**
+ * Wraps element with another element
+ * @param {HTMLElement} element Element to wrap
+ * @param {HTMLElement|String} wrapper Element to wrap with
+ * @param {Object} [attributes] Attributes to set on a wrapper
+ * @return {HTMLElement} wrapper
+ */
+export function wrapElement(element, wrapper) {
+  if (element.parentNode) {
+    element.parentNode.replaceChild(wrapper, element);
+  }
+  wrapper.appendChild(element);
+  return wrapper;
+}
+
+/**
+ * Returns element scroll offsets
+ * @param {HTMLElement} element Element to operate on
+ * @return {Object} Object with left/top values
+ */
+export function getScrollLeftTop(element) {
+  let left = 0,
+    top = 0;
+
+  const docElement = getEnv().document.documentElement,
+    body = getEnv().document.body || {
+      scrollLeft: 0,
+      scrollTop: 0,
+    };
+  // While loop checks (and then sets element to) .parentNode OR .host
+  //  to account for ShadowDOM. We still want to traverse up out of ShadowDOM,
+  //  but the .parentNode of a root ShadowDOM node will always be null, instead
+  //  it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938
+  while (element && (element.parentNode || element.host)) {
+    // Set element to element parent, or 'host' in case of ShadowDOM
+    element = element.parentNode || element.host;
+
+    if (element === getEnv().document) {
+      left = body.scrollLeft || docElement.scrollLeft || 0;
+      top = body.scrollTop || docElement.scrollTop || 0;
+    } else {
+      left += element.scrollLeft || 0;
+      top += element.scrollTop || 0;
+    }
+
+    if (element.nodeType === 1 && element.style.position === 'fixed') {
+      break;
+    }
+  }
+
+  return { left, top };
+}
+
+/**
+ * Returns offset for a given element
+ * @param {HTMLElement} element Element to get offset for
+ * @return {Object} Object with "left" and "top" properties
+ */
+export function getElementOffset(element) {
+  let box = { left: 0, top: 0 };
+  const doc = element && element.ownerDocument,
+    offset = { left: 0, top: 0 },
+    offsetAttributes = {
+      borderLeftWidth: 'left',
+      borderTopWidth: 'top',
+      paddingLeft: 'left',
+      paddingTop: 'top',
+    };
+
+  if (!doc) {
+    return offset;
+  }
+  const elemStyle = getEnv().document.defaultView.getComputedStyle(
+    element,
+    null
+  );
+  for (const attr in offsetAttributes) {
+    offset[offsetAttributes[attr]] += parseInt(elemStyle[attr], 10) || 0;
+  }
+
+  const docElem = doc.documentElement;
+  if (typeof element.getBoundingClientRect !== 'undefined') {
+    box = element.getBoundingClientRect();
+  }
+
+  const scrollLeftTop = getScrollLeftTop(element);
+
+  return {
+    left:
+      box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left,
+    top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top,
+  };
+}
+
+/**
+ * Makes element unselectable
+ * @param {HTMLElement} element Element to make unselectable
+ * @return {HTMLElement} Element that was passed in
+ */
+export function makeElementUnselectable(element) {
+  if (typeof element.onselectstart !== 'undefined') {
+    element.onselectstart = () => false;
+  }
+  element.style.userSelect = 'none';
+  return element;
+}
+
+/**
+ * Makes element selectable
+ * @param {HTMLElement} element Element to make selectable
+ * @return {HTMLElement} Element that was passed in
+ */
+export function makeElementSelectable(element) {
+  if (typeof element.onselectstart !== 'undefined') {
+    element.onselectstart = null;
+  }
+  element.style.userSelect = '';
+  return element;
+}
+
+export function cleanUpJsdomNode(element) {
+  if (!getEnv().isLikelyNode) {
+    return;
+  }
+  const impl = getEnv().jsdomImplForWrapper(element);
+  if (impl) {
+    impl._image = null;
+    impl._canvas = null;
+    // unsure if necessary
+    impl._currentSrc = null;
+    impl._attributes = null;
+    impl._classList = null;
+  }
+}