fabric 5.3.0 → 6.0.0-beta1

package/src/util/dom_request.ts

@@ -0,0 +1,64 @@
+// @ts-nocheck
+import { getEnv } from '../env';
+import { noop } from '../constants';
+
+/**
+ * Cross-browser abstraction for sending XMLHttpRequest
+ * @deprecated this has to go away, we can use a modern browser method to do the same.
+ * @param {String} url URL to send XMLHttpRequest to
+ * @param {Object} [options] Options object
+ * @param {String} [options.method="GET"]
+ * @param {Record<string, string>} [options.parameters] parameters to append to url in GET or in body
+ * @param {String} [options.body] body to send with POST or PUT request
+ * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+ * @param {Function} options.onComplete Callback to invoke when request is completed
+ * @return {XMLHttpRequest} request
+ */
+export function request(url, options = {}) {
+  const method = options.method ? options.method.toUpperCase() : 'GET',
+    onComplete = options.onComplete || noop,
+    xhr = new (getEnv().window.XMLHttpRequest)(),
+    body = options.body || options.parameters,
+    signal = options.signal,
+    abort = function () {
+      xhr.abort();
+    },
+    removeListener = function () {
+      signal && signal.removeEventListener('abort', abort);
+      xhr.onerror = xhr.ontimeout = noop;
+    };
+
+  if (signal && signal.aborted) {
+    throw new Error('`options.signal` is in `aborted` state');
+  } else if (signal) {
+    signal.addEventListener('abort', abort, { once: true });
+  }
+
+  /** @ignore */
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      removeListener();
+      onComplete(xhr);
+      xhr.onreadystatechange = noop;
+    }
+  };
+
+  xhr.onerror = xhr.ontimeout = removeListener;
+
+  if (method === 'GET' && options.parameters) {
+    const { origin, pathname, searchParams } = new URL(url);
+    url = `${origin}${pathname}?${new URLSearchParams([
+      ...Array.from(searchParams.entries()),
+      ...Object.entries(options.parameters),
+    ])}`;
+  }
+
+  xhr.open(method, url, true);
+
+  if (method === 'POST' || method === 'PUT') {
+    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+  }
+
+  xhr.send(method === 'GET' ? null : body);
+  return xhr;
+}

package/src/util/dom_style.ts

@@ -0,0 +1,20 @@
+//@ts-nocheck
+// TODO this file needs to go away, cross browser style support is not fabricjs domain.
+
+/**
+ * wrapper for setting element's style
+ * @param {HTMLElement} element
+ * @param {Object | string} styles
+ */
+export function setStyle(element, styles) {
+  const elementStyle = element.style;
+  if (!elementStyle) {
+    return;
+  } else if (typeof styles === 'string') {
+    element.style.cssText += ';' + styles;
+  } else {
+    Object.entries(styles).forEach(([property, value]) =>
+      elementStyle.setProperty(property, value)
+    );
+  }
+}

package/src/util/fireEvent.ts

@@ -0,0 +1,15 @@
+import { BasicTransformEvent, TModificationEvents } from '../EventTypeDefs';
+
+export const fireEvent = (
+  eventName: TModificationEvents,
+  options: BasicTransformEvent
+) => {
+  const {
+    transform: { target },
+  } = options;
+  target.canvas?.fire(`object:${eventName}`, {
+    ...options,
+    target,
+  });
+  target.fire(eventName, options);
+};

package/src/util/internals/cloneDeep.ts

@@ -0,0 +1,2 @@
+export const cloneDeep = <T extends object>(object: T): T =>
+  JSON.parse(JSON.stringify(object));

package/src/util/internals/getRandomInt.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns random number between 2 specified ones.
+ * @param {Number} min lower limit
+ * @param {Number} max upper limit
+ * @return {Number} random value (between min and max)
+ */
+export const getRandomInt = (min: number, max: number): number =>
+  Math.floor(Math.random() * (max - min + 1)) + min;

package/src/util/internals/ifNaN.ts

@@ -0,0 +1,9 @@
+/**
+ *
+ * @param value value to check if NaN
+ * @param [valueIfNaN]
+ * @returns `fallback` is `value is NaN
+ */
+export const ifNaN = (value: number, valueIfNaN?: number) => {
+  return isNaN(value) && typeof valueIfNaN === 'number' ? valueIfNaN : value;
+};

package/src/util/internals/index.ts

@@ -0,0 +1,3 @@
+export { getRandomInt } from './getRandomInt';
+export { ifNaN } from './ifNaN';
+export { removeFromArray } from './removeFromArray';

package/src/util/internals/removeFromArray.ts

@@ -0,0 +1,14 @@
+/**
+ * Removes value from an array.
+ * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf`
+ * @param {Array} array
+ * @param {*} value
+ * @return {Array} original array
+ */
+export const removeFromArray = <T>(array: T[], value: T): T[] => {
+  const idx = array.indexOf(value);
+  if (idx !== -1) {
+    array.splice(idx, 1);
+  }
+  return array;
+};

package/src/util/internals/uid.ts

@@ -0,0 +1,3 @@
+let id = 0;
+
+export const uid = () => id++;

package/src/util/lang_class.ts

@@ -0,0 +1,90 @@
+//@ts-nocheck
+import { noop } from '../constants';
+
+function addMethods(klass, source, parent) {
+  for (var property in source) {
+    if (
+      property in klass.prototype &&
+      typeof klass.prototype[property] === 'function' &&
+      (source[property] + '').indexOf('callSuper') > -1
+    ) {
+      klass.prototype[property] = (function (property) {
+        return function (...args) {
+          var superclass = this.constructor.superclass;
+          this.constructor.superclass = parent;
+          var returnValue = source[property].call(this, ...args);
+          this.constructor.superclass = superclass;
+
+          if (property !== 'initialize') {
+            return returnValue;
+          }
+        };
+      })(property);
+    } else {
+      klass.prototype[property] = source[property];
+    }
+  }
+}
+
+function Subclass() {}
+
+function callSuper(methodName, ...args) {
+  var parentMethod = null,
+    _this = this;
+
+  // climb prototype chain to find method not equal to callee's method
+  while (_this.constructor.superclass) {
+    var superClassMethod = _this.constructor.superclass.prototype[methodName];
+    if (_this[methodName] !== superClassMethod) {
+      parentMethod = superClassMethod;
+      break;
+    }
+    // eslint-disable-next-line
+    _this = _this.constructor.superclass.prototype;
+  }
+
+  if (!parentMethod) {
+    return console.log(
+      'tried to callSuper ' +
+        methodName +
+        ', method not found in prototype chain',
+      this
+    );
+  }
+
+  return parentMethod.call(this, ...args);
+}
+
+/**
+ * Helper for creation of "classes".
+ * @param {Function} [parent] optional "Class" to inherit from
+ * @param {Object} [properties] Properties shared by all instances of this class
+ *                  (be careful modifying objects defined here as this would affect all instances)
+ */
+export function createClass(...args) {
+  var parent = null,
+    properties = [...args];
+
+  if (typeof args[0] === 'function') {
+    parent = properties.shift();
+  }
+  function klass(...klassArgs) {
+    this.initialize.call(this, ...klassArgs);
+  }
+
+  klass.superclass = parent;
+
+  if (parent) {
+    Subclass.prototype = parent.prototype;
+    klass.prototype = new Subclass();
+  }
+  for (var i = 0, length = properties.length; i < length; i++) {
+    addMethods(klass, properties[i], parent);
+  }
+  if (!klass.prototype.initialize) {
+    klass.prototype.initialize = noop;
+  }
+  klass.prototype.constructor = klass;
+  klass.prototype.callSuper = callSuper;
+  return klass;
+}

package/src/util/lang_string.ts

@@ -0,0 +1,79 @@
+/**
+ * Capitalizes a string
+ * @param {String} string String to capitalize
+ * @param {Boolean} [firstLetterOnly] If true only first letter is capitalized
+ * and other letters stay untouched, if false first letter is capitalized
+ * and other letters are converted to lowercase.
+ * @return {String} Capitalized version of a string
+ */
+export const capitalize = (string: string, firstLetterOnly = false): string =>
+  `${string.charAt(0).toUpperCase()}${
+    firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase()
+  }`;
+
+/**
+ * Escapes XML in a string
+ * @param {String} string String to escape
+ * @return {String} Escaped version of a string
+ */
+export const escapeXml = (string: string): string =>
+  string
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/'/g, ''')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+/**
+ * Divide a string in the user perceived single units
+ * @param {String} textstring String to escape
+ * @return {Array} array containing the graphemes
+ */
+export const graphemeSplit = (textstring: string): string[] => {
+  const graphemes = [];
+  for (let i = 0, chr; i < textstring.length; i++) {
+    if ((chr = getWholeChar(textstring, i)) === false) {
+      continue;
+    }
+    graphemes.push(chr as string);
+  }
+  return graphemes;
+};
+
+// taken from mdn in the charAt doc page.
+const getWholeChar = (str: string, i: number): string | boolean => {
+  const code = str.charCodeAt(i);
+  if (isNaN(code)) {
+    return ''; // Position not found
+  }
+  if (code < 0xd800 || code > 0xdfff) {
+    return str.charAt(i);
+  }
+
+  // High surrogate (could change last hex to 0xDB7F to treat high private
+  // surrogates as single characters)
+  if (0xd800 <= code && code <= 0xdbff) {
+    if (str.length <= i + 1) {
+      throw 'High surrogate without following low surrogate';
+    }
+    const next = str.charCodeAt(i + 1);
+    if (0xdc00 > next || next > 0xdfff) {
+      throw 'High surrogate without following low surrogate';
+    }
+    return str.charAt(i) + str.charAt(i + 1);
+  }
+  // Low surrogate (0xDC00 <= code && code <= 0xDFFF)
+  if (i === 0) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  const prev = str.charCodeAt(i - 1);
+
+  // (could change last hex to 0xDB7F to treat high private
+  // surrogates as single characters)
+  if (0xd800 > prev || prev > 0xdbff) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  // We can pass over low surrogates now as the second component
+  // in a pair which we have already processed
+  return false;
+};

package/src/util/misc/boundingBoxFromPoints.ts

@@ -0,0 +1,37 @@
+import { IPoint, Point } from '../../Point';
+import { TBBox } from '../../typedefs';
+
+/**
+ * Calculates bounding box (left, top, width, height) from given `points`
+ * @param {IPoint[]} points
+ * @return {Object} Object with left, top, width, height properties
+ */
+export const makeBoundingBoxFromPoints = (points: IPoint[]): TBBox => {
+  if (points.length === 0) {
+    return {
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0,
+    };
+  }
+
+  const { min, max } = points.reduce(
+    ({ min, max }, curr) => {
+      return {
+        min: min.min(curr),
+        max: max.max(curr),
+      };
+    },
+    { min: new Point(points[0]), max: new Point(points[0]) }
+  );
+
+  const size = max.subtract(min);
+
+  return {
+    left: min.x,
+    top: min.y,
+    width: size.x,
+    height: size.y,
+  };
+};

package/src/util/misc/capValue.ts

@@ -0,0 +1,2 @@
+export const capValue = (min: number, value: number, max: number) =>
+  Math.max(min, Math.min(value, max));

package/src/util/misc/cos.ts

@@ -0,0 +1,24 @@
+import type { TRadian } from '../../typedefs';
+import { halfPI } from '../../constants';
+
+/**
+ * Calculate the cos of an angle, avoiding returning floats for known results
+ * This function is here just to avoid getting 0.999999999999999 when dealing
+ * with numbers that are really 1 or 0.
+ * @param {TRadian} angle the angle
+ * @return {Number} the cosin value for angle.
+ */
+export const cos = (angle: TRadian): number => {
+  if (angle === 0) {
+    return 1;
+  }
+  const angleSlice = Math.abs(angle) / halfPI;
+  switch (angleSlice) {
+    case 1:
+    case 3:
+      return 0;
+    case 2:
+      return -1;
+  }
+  return Math.cos(angle);
+};

package/src/util/misc/dom.ts

@@ -0,0 +1,50 @@
+import { getEnv } from '../../env';
+import { ImageFormat } from '../../typedefs';
+/**
+ * Creates canvas element
+ * @return {CanvasElement} initialized canvas element
+ */
+export const createCanvasElement = (): HTMLCanvasElement =>
+  getEnv().document.createElement('canvas');
+
+/**
+ * Creates image element (works on client and node)
+ * @return {HTMLImageElement} HTML image element
+ */
+export const createImage = (): HTMLImageElement =>
+  getEnv().document.createElement('img');
+
+/**
+ * Creates a canvas element that is a copy of another and is also painted
+ * @param {CanvasElement} canvas to copy size and content of
+ * @return {CanvasElement} initialized canvas element
+ */
+export const copyCanvasElement = (
+  canvas: HTMLCanvasElement
+): HTMLCanvasElement => {
+  const newCanvas = createCanvasElement();
+  newCanvas.width = canvas.width;
+  newCanvas.height = canvas.height;
+  newCanvas.getContext('2d')?.drawImage(canvas, 0, 0);
+  return newCanvas;
+};
+
+/**
+ * since 2.6.0 moved from canvas instance to utility.
+ * possibly useless
+ * @param {CanvasElement} canvasEl to copy size and content of
+ * @param {String} format 'jpeg' or 'png', in some browsers 'webp' is ok too
+ * @param {Number} quality <= 1 and > 0
+ * @return {String} data url
+ */
+export const toDataURL = (
+  canvasEl: HTMLCanvasElement,
+  format: ImageFormat,
+  quality: number
+) => canvasEl.toDataURL(`image/${format}`, quality);
+
+export const isHTMLCanvas = (
+  canvas: HTMLCanvasElement | string
+): canvas is HTMLCanvasElement => {
+  return !!canvas && (canvas as HTMLCanvasElement).getContext !== undefined;
+};

package/src/util/misc/findScaleTo.ts

@@ -0,0 +1,44 @@
+export interface IWithDimensions {
+  /**
+   * natural unscaled width of the object
+   */
+  width: number;
+  /**
+   * natural unscaled height of the object
+   */
+  height: number;
+}
+
+/**
+ * Finds the scale for the object source to fit inside the object destination,
+ * keeping aspect ratio intact.
+ * respect the total allowed area for the cache.
+ * @param {IWithDimensions} source
+ * @param {IWithDimensions} destination
+ * @return {Number} scale factor to apply to source to fit into destination
+ */
+export const findScaleToFit = (
+  source: IWithDimensions,
+  destination: IWithDimensions
+) =>
+  Math.min(
+    destination.width / source.width,
+    destination.height / source.height
+  );
+
+/**
+ * Finds the scale for the object source to cover entirely the object destination,
+ * keeping aspect ratio intact.
+ * respect the total allowed area for the cache.
+ * @param {IWithDimensions} source
+ * @param {IWithDimensions} destination
+ * @return {Number} scale factor to apply to source to cover destination
+ */
+export const findScaleToCover = (
+  source: IWithDimensions,
+  destination: IWithDimensions
+) =>
+  Math.max(
+    destination.width / source.width,
+    destination.height / source.height
+  );

package/src/util/misc/groupSVGElements.ts

@@ -0,0 +1,15 @@
+import type { FabricObject } from '../../shapes/Object/FabricObject';
+import { Group } from '../../shapes/Group';
+
+/**
+ * Groups SVG elements (usually those retrieved from SVG document)
+ * @static
+ * @param {FabricObject[]} elements FabricObject(s) parsed from svg, to group
+ * @return {FabricObject | Group}
+ */
+export const groupSVGElements = (elements: FabricObject[]) => {
+  if (elements && elements.length === 1) {
+    return elements[0];
+  }
+  return new Group(elements);
+};

package/src/util/misc/isTransparent.ts

@@ -0,0 +1,51 @@
+/**
+ * Returns true if context has transparent pixel
+ * at specified location (taking tolerance into account)
+ * @param {CanvasRenderingContext2D} ctx context
+ * @param {Number} x x coordinate in canvasElementCoordinate, not fabric space
+ * @param {Number} y y coordinate in canvasElementCoordinate, not fabric space
+ * @param {Number} tolerance Tolerance pixels around the point, not alpha tolerance
+ * @return {boolean} true if transparent
+ */
+export const isTransparent = (
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  tolerance: number
+): boolean => {
+  // If tolerance is > 0 adjust start coords to take into account.
+  // If moves off Canvas fix to 0
+  if (tolerance > 0) {
+    if (x > tolerance) {
+      x -= tolerance;
+    } else {
+      x = 0;
+    }
+    if (y > tolerance) {
+      y -= tolerance;
+    } else {
+      y = 0;
+    }
+  }
+
+  let _isTransparent = true;
+  const { data } = ctx.getImageData(
+    x,
+    y,
+    tolerance * 2 || 1,
+    tolerance * 2 || 1
+  );
+  const l = data.length;
+
+  // Split image data - for tolerance > 1, pixelDataSize = 4;
+  for (let i = 3; i < l; i += 4) {
+    const alphaChannel = data[i];
+    if (alphaChannel > 0) {
+      // Stop if colour found
+      _isTransparent = false;
+      break;
+    }
+  }
+
+  return _isTransparent;
+};