fabric 6.2.0 → 6.3.0

package/dist/index.node.mjs

@@ -457,7 +457,7 @@ class Cache {
 }
 const cache = new Cache();
 
-var version = "6.2.0";
+var version = "6.3.0";
 
 // use this syntax so babel plugin see this import here
 const VERSION = version;
@@ -753,33 +753,6 @@ class Observable {
   }
 }
 
-const findIndexRight = (array, predicate) => {
-  for (let index = array.length - 1; index >= 0; index--) {
-    if (predicate(array[index], index, array)) {
-      return index;
-    }
-  }
-  return -1;
-};
-
-/**
- * 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)
- */
-const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
-
-/**
- *
- * @param value value to check if NaN
- * @param [valueIfNaN]
- * @returns `fallback` is `value is NaN
- */
-const ifNaN = (value, valueIfNaN) => {
-  return isNaN(value) && typeof valueIfNaN === 'number' ? valueIfNaN : value;
-};
-
 /**
  * Removes value from an array.
  * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf`
@@ -2456,6 +2429,7 @@ class Color {
     return color === 'transparent' ? [255, 255, 255, 0] : Color.sourceFromHex(color) || Color.sourceFromRgb(color) || Color.sourceFromHsl(color) ||
     // color is not recognized
     // we default to black as canvas does
+    // eslint-disable-next-line no-constant-binary-expression
     (this.isUnrecognised = true) && [0, 0, 0, 1];
   }
 
@@ -3535,7 +3509,7 @@ let StaticCanvas$1 = class StaticCanvas extends createCollectionMixin(CommonMeth
       this.nextRenderHandle = 0;
     }
   }
-  drawControls(ctx) {
+  drawControls(_ctx) {
     // Static canvas has no controls
   }
 
@@ -4824,7 +4798,7 @@ class FabricObjectSVGExportMixin {
    * @return {Array} an array of strings with the specific svg representation
    * of the instance
    */
-  _toSVG(reviver) {
+  _toSVG(_reviver) {
     return [''];
   }
 
@@ -6116,7 +6090,7 @@ class ObjectGeometry extends ObjectOrigin {
    * that otherwise are the object's current values.
    * @example <caption>Set object's bottom left corner to point (5,5) on canvas</caption>
    * object.setXY(new Point(5, 5), 'left', 'bottom').
-   * @param {Point} point position in canvas coordinate plane
+   * @param {Point} point position in scene coordinate plane
    * @param {TOriginX} [originX] Horizontal origin: 'left', 'center' or 'right'
    * @param {TOriginY} [originY] Vertical origin: 'top', 'center' or 'bottom'
    */
@@ -6901,8 +6875,6 @@ _defineProperty(Shadow, "ownDefaults", shadowDefaultValues);
 _defineProperty(Shadow, "type", 'shadow');
 classRegistry.setClass(Shadow, 'shadow');
 
-const cloneDeep = object => JSON.parse(JSON.stringify(object));
-
 const stateProperties = [TOP, LEFT, SCALE_X, SCALE_Y, 'flipX', 'flipY', 'originX', 'originY', 'angle', 'opacity', 'globalCompositeOperation', 'shadow', 'visible', SKEW_X, SKEW_Y];
 const cacheProperties = [FILL, STROKE, 'strokeWidth', 'strokeDashArray', 'width', 'height', 'paintFirst', 'strokeUniform', 'strokeLineCap', 'strokeDashOffset', 'strokeLineJoin', 'strokeMiterLimit', 'backgroundColor', 'clipPath'];
 const fabricObjectDefaultValues = {
@@ -7465,7 +7437,7 @@ let FabricObject$1 = class FabricObject extends AnimatableObject {
     }
     ctx.restore();
   }
-  drawSelectionBackground(ctx) {
+  drawSelectionBackground(_ctx) {
     /* no op */
   }
   renderCache(options) {
@@ -7833,9 +7805,9 @@ let FabricObject$1 = class FabricObject extends AnimatableObject {
    * function that actually render something on the context.
    * empty here to allow Obects to work on tests to benchmark fabric functionalites
    * not related to rendering
-   * @param {CanvasRenderingContext2D} ctx Context to render on
+   * @param {CanvasRenderingContext2D} _ctx Context to render on
    */
-  _render(ctx) {
+  _render(_ctx) {
     // placeholder to be overridden
   }
 
@@ -8178,25 +8150,22 @@ let FabricObject$1 = class FabricObject extends AnimatableObject {
    * @returns {Promise<FabricObject>}
    */
   static _fromObject(_ref2) {
-    let object = _objectWithoutProperties(_ref2, _excluded$e);
+    let serializedObjectOptions = _objectWithoutProperties(_ref2, _excluded$e);
     let _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       {
         extraParam
       } = _ref3,
       options = _objectWithoutProperties(_ref3, _excluded2$4);
-    return enlivenObjectEnlivables(cloneDeep(object), options).then(enlivedMap => {
-      const allOptions = _objectSpread2(_objectSpread2({}, options), enlivedMap);
+    return enlivenObjectEnlivables(serializedObjectOptions, options).then(enlivedObjectOptions => {
       // from the resulting enlived options, extract options.extraParam to arg0
       // to avoid accidental overrides later
       if (extraParam) {
-        const {
-            [extraParam]: arg0
-          } = allOptions,
-          rest = _objectWithoutProperties(allOptions, [extraParam].map(_toPropertyKey));
+        delete enlivedObjectOptions[extraParam];
+        return new this(serializedObjectOptions[extraParam],
         // @ts-expect-error different signature
-        return new this(arg0, rest);
+        enlivedObjectOptions);
       } else {
-        return new this(allOptions);
+        return new this(enlivedObjectOptions);
       }
     });
   }
@@ -9673,12 +9642,12 @@ class InteractiveFabricObject extends FabricObject$1 {
   /**
    * This callback function is called every time _discardActiveObject or _setActiveObject
    * try to to deselect this object. If the function returns true, the process is cancelled
-   * @param {Object} [options] options sent from the upper functions
+   * @param {Object} [_options] options sent from the upper functions
    * @param {TPointerEvent} [options.e] event if the process is generated by an event
    * @param {FabricObject} [options.object] next object we are setting as active, and reason why
    * this is being deselected
    */
-  onDeselect(options) {
+  onDeselect(_options) {
     // implemented by sub-classes, as needed.
     return false;
   }
@@ -9686,10 +9655,10 @@ class InteractiveFabricObject extends FabricObject$1 {
   /**
    * This callback function is called every time _discardActiveObject or _setActiveObject
    * try to to select this object. If the function returns true, the process is cancelled
-   * @param {Object} [options] options sent from the upper functions
-   * @param {Event} [options.e] event if the process is generated by an event
+   * @param {Object} [_options] options sent from the upper functions
+   * @param {Event} [_options.e] event if the process is generated by an event
    */
-  onSelect(options) {
+  onSelect(_options) {
     // implemented by sub-classes, as needed.
     return false;
   }
@@ -9699,7 +9668,7 @@ class InteractiveFabricObject extends FabricObject$1 {
    * Fired from {@link Canvas#_onMouseMove}
    * @returns true in order for the window to start a drag session
    */
-  shouldStartDragging(e) {
+  shouldStartDragging(_e) {
     return false;
   }
 
@@ -9708,17 +9677,17 @@ class InteractiveFabricObject extends FabricObject$1 {
    * Fired once a drag session has started
    * @returns true to handle the drag event
    */
-  onDragStart(e) {
+  onDragStart(_e) {
     return false;
   }
 
   /**
    * Override to customize drag and drop behavior
    * @public
-   * @param {DragEvent} e
+   * @param {DragEvent} _e
    * @returns {boolean} true if the object currently dragged can be dropped on the target
    */
-  canDrop(e) {
+  canDrop(_e) {
     return false;
   }
 
@@ -9727,9 +9696,9 @@ class InteractiveFabricObject extends FabricObject$1 {
    * render a specific effect when an object is the source of a drag event
    * example: render the selection status for the part of text that is being dragged from a text object
    * @public
-   * @param {DragEvent} e
+   * @param {DragEvent} _e
    */
-  renderDragSourceEffect(e) {
+  renderDragSourceEffect(_e) {
     // for subclasses
   }
 
@@ -9739,9 +9708,9 @@ class InteractiveFabricObject extends FabricObject$1 {
    * used to show that the underly object can receive a drop, or to show how the
    * object will change when dropping. example: show the cursor where the text is about to be dropped
    * @public
-   * @param {DragEvent} e
+   * @param {DragEvent} _e
    */
-  renderDropTargetEffect(e) {
+  renderDropTargetEffect(_e) {
     // for subclasses
   }
 }
@@ -9796,8 +9765,9 @@ function applyMixins(derivedCtor, constructors) {
 
 // TODO somehow we have to make a tree-shakeable import
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 class FabricObject extends InteractiveFabricObject {}
 applyMixins(FabricObject, [FabricObjectSVGExportMixin]);
 classRegistry.setClass(FabricObject);
@@ -9839,6 +9809,15 @@ const isTransparent = (ctx, x, y, tolerance) => {
  */
 const rotatePoint = (point, origin, radians) => point.rotate(radians, origin);
 
+const findIndexRight = (array, predicate) => {
+  for (let index = array.length - 1; index >= 0; index--) {
+    if (predicate(array[index], index, array)) {
+      return index;
+    }
+  }
+  return -1;
+};
+
 /**
  * @see https://github.com/fabricjs/fabric.js/pull/8344
  * @todo consider removing skewing from points before calculating stroke projection,
@@ -10255,6 +10234,17 @@ const projectStrokeOnPoints = function (points, options) {
   return projections;
 };
 
+const cloneStyles = style => {
+  const newObj = {};
+  Object.keys(style).forEach(key => {
+    newObj[key] = {};
+    Object.keys(style[key]).forEach(keyInner => {
+      newObj[key][keyInner] = _objectSpread2({}, style[key][keyInner]);
+    });
+  });
+  return newObj;
+};
+
 /**
  * Capitalizes a string
  * @param {String} string String to capitalize
@@ -10361,7 +10351,7 @@ const stylesToArray = (styles, text) => {
   let charIndex = -1,
     prevStyle = {};
   // clone style structure to prevent mutation
-  styles = cloneDeep(styles);
+  styles = cloneStyles(styles);
 
   //loop through each textLine
   for (let i = 0; i < textLines.length; i++) {
@@ -10406,7 +10396,7 @@ const stylesToArray = (styles, text) => {
 const stylesFromArray = (styles, text) => {
   if (!Array.isArray(styles)) {
     // clone to prevent mutation
-    return cloneDeep(styles);
+    return cloneStyles(styles);
   }
   const textLines = text.split(reNewline),
     stylesObject = {};
@@ -11173,7 +11163,7 @@ class LayoutManager {
   /**
    * unsubscribe object layout triggers
    */
-  unsubscribe(object, context) {
+  unsubscribe(object, _context) {
     (this._subscriptions.get(object) || []).forEach(d => d());
     this._subscriptions.delete(object);
   }
@@ -12839,6 +12829,14 @@ const mergeClipPaths = (c1, c2) => {
   });
 };
 
+/**
+ * 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)
+ */
+const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
 /**
  * Cross-browser abstraction for sending XMLHttpRequest
  * @deprecated this has to go away, we can use a modern browser method to do the same.
@@ -14412,6 +14410,7 @@ let Canvas$1 = class Canvas extends SelectableCanvas {
     // '_onLongPress',
     // '_onOrientationChange',
     '_onMouseWheel', '_onMouseOut', '_onMouseEnter', '_onContextMenu', '_onDoubleClick', '_onDragStart', '_onDragEnd', '_onDragProgress', '_onDragOver', '_onDragEnter', '_onDragLeave', '_onDrop'].forEach(eventHandler => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
       this[eventHandler] = this[eventHandler].bind(this);
     });
     // register event handlers
@@ -14425,7 +14424,7 @@ let Canvas$1 = class Canvas extends SelectableCanvas {
   _getEventPrefix() {
     return this.enablePointerEvents ? 'pointer' : 'mouse';
   }
-  addOrRemove(functor, eventjsFunctor) {
+  addOrRemove(functor, _eventjsFunctor) {
     const canvasElement = this.upperCanvasEl,
       eventTypePrefix = this._getEventPrefix();
     functor(getWindowFromElement(canvasElement), 'resize', this._onResize);
@@ -15620,6 +15619,16 @@ const radialDefaultCoords = _objectSpread2(_objectSpread2({}, linearDefaultCoord
   r2: 0
 });
 
+/**
+ *
+ * @param value value to check if NaN
+ * @param [valueIfNaN]
+ * @returns `fallback` is `value is NaN
+ */
+const ifNaN = (value, valueIfNaN) => {
+  return isNaN(value) && typeof valueIfNaN === 'number' ? valueIfNaN : value;
+};
+
 const RE_PERCENT = /^(\d+\.\d+)%|(\d+)%$/;
 function isPercent(value) {
   return value && RE_PERCENT.test(value);
@@ -15744,8 +15753,8 @@ function parseCoords(el, size) {
  * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#gradients}
  */
 class Gradient {
-  constructor(_ref) {
-    let {
+  constructor(options) {
+    const {
       type = 'linear',
       gradientUnits = 'pixels',
       coords = {},
@@ -15754,20 +15763,18 @@ class Gradient {
       offsetY = 0,
       gradientTransform,
       id
-    } = _ref;
-    this.id = id ? "".concat(id, "_").concat(uid()) : uid();
-    this.type = type;
-    this.gradientUnits = gradientUnits;
-    this.gradientTransform = gradientTransform;
-    this.offsetX = offsetX;
-    this.offsetY = offsetY;
-    this.coords = _objectSpread2(_objectSpread2({}, this.type === 'radial' ? radialDefaultCoords : linearDefaultCoords), coords);
-    this.colorStops = colorStops.slice();
-  }
-
-  // isType<S extends GradientType>(type: S): this is Gradient<S> {
-  //   return (this.type as GradientType) === type;
-  // }
+    } = options || {};
+    Object.assign(this, {
+      type,
+      gradientUnits,
+      coords: _objectSpread2(_objectSpread2({}, type === 'radial' ? radialDefaultCoords : linearDefaultCoords), coords),
+      colorStops,
+      offsetX,
+      offsetY,
+      gradientTransform,
+      id: id ? "".concat(id, "_").concat(uid()) : uid()
+    });
+  }
 
   /**
    * Adds another colorStop
@@ -15794,8 +15801,8 @@ class Gradient {
   toObject(propertiesToInclude) {
     return _objectSpread2(_objectSpread2({}, pick(this, propertiesToInclude)), {}, {
       type: this.type,
-      coords: this.coords,
-      colorStops: this.colorStops,
+      coords: _objectSpread2({}, this.coords),
+      colorStops: this.colorStops.map(colorStop => _objectSpread2({}, colorStop)),
       offsetX: this.offsetX,
       offsetY: this.offsetY,
       gradientUnits: this.gradientUnits,
@@ -15874,12 +15881,12 @@ class Gradient {
         });
       }
     }
-    colorStops.forEach(_ref2 => {
+    colorStops.forEach(_ref => {
       let {
         color,
         offset,
         opacity
-      } = _ref2;
+      } = _ref;
       markup.push('<stop ', 'offset="', offset * 100 + '%', '" style="stop-color:', color, typeof opacity !== 'undefined' ? ';stop-opacity: ' + opacity : ';', '"/>\n');
     });
     markup.push(this.type === 'linear' ? '</linearGradient>' : '</radialGradient>', '\n');
@@ -15893,20 +15900,34 @@ class Gradient {
    * @return {CanvasGradient}
    */
   toLive(ctx) {
-    const coords = this.coords;
-    const gradient = this.type === 'linear' ? ctx.createLinearGradient(coords.x1, coords.y1, coords.x2, coords.y2) : ctx.createRadialGradient(coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2);
-    this.colorStops.forEach(_ref3 => {
+    const {
+      x1,
+      y1,
+      x2,
+      y2,
+      r1,
+      r2
+    } = this.coords;
+    const gradient = this.type === 'linear' ? ctx.createLinearGradient(x1, y1, x2, y2) : ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
+    this.colorStops.forEach(_ref2 => {
       let {
         color,
         opacity,
         offset
-      } = _ref3;
+      } = _ref2;
       gradient.addColorStop(offset, typeof opacity !== 'undefined' ? new Color(color).setAlpha(opacity).toRgba() : color);
     });
     return gradient;
   }
   static async fromObject(options) {
-    return new this(options);
+    const {
+      colorStops,
+      gradientTransform
+    } = options;
+    return new this(_objectSpread2(_objectSpread2({}, options), {}, {
+      colorStops: colorStops ? colorStops.map(colorStop => _objectSpread2({}, colorStop)) : undefined,
+      gradientTransform: gradientTransform ? [...gradientTransform] : undefined
+    }));
   }
 
   /* _FROM_SVG_START_ */
@@ -16031,7 +16052,7 @@ classRegistry.setClass(Gradient, 'gradient');
 classRegistry.setClass(Gradient, 'linear');
 classRegistry.setClass(Gradient, 'radial');
 
-const _excluded$8 = ["type", "source"];
+const _excluded$8 = ["type", "source", "patternTransform"];
 
 /**
  * @see {@link http://fabricjs.com/patterns demo}
@@ -16058,6 +16079,13 @@ class Pattern {
    * @defaults
    */
 
+  /**
+   * transform matrix to change the pattern, imported from svgs.
+   * @todo verify if using the identity matrix as default makes the rest of the code more easy
+   * @type Array
+   * @default
+   */
+
   /**
    * The actual pixel source of the pattern
    */
@@ -16096,13 +16124,6 @@ class Pattern {
      * @default
      */
     _defineProperty(this, "crossOrigin", '');
-    /**
-     * transform matrix to change the pattern, imported from svgs.
-     * @todo verify if using the identity matrix as default makes the rest of the code more easy
-     * @type Array
-     * @default
-     */
-    _defineProperty(this, "patternTransform", null);
     this.id = uid();
     Object.assign(this, options);
   }
@@ -16187,13 +16208,15 @@ class Pattern {
   static async fromObject(_ref2, options) {
     let {
         type,
-        source
+        source,
+        patternTransform
       } = _ref2,
-      serialized = _objectWithoutProperties(_ref2, _excluded$8);
+      otherOptions = _objectWithoutProperties(_ref2, _excluded$8);
     const img = await loadImage(source, _objectSpread2(_objectSpread2({}, options), {}, {
-      crossOrigin: serialized.crossOrigin
+      crossOrigin: otherOptions.crossOrigin
     }));
-    return new this(_objectSpread2(_objectSpread2({}, serialized), {}, {
+    return new this(_objectSpread2(_objectSpread2({}, otherOptions), {}, {
+      patternTransform: patternTransform && patternTransform.slice(0),
       source: img
     }));
   }
@@ -18132,7 +18155,16 @@ class Polyline extends FabricObject {
   toObject() {
     let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return _objectSpread2(_objectSpread2({}, super.toObject(propertiesToInclude)), {}, {
-      points: cloneDeep(this.points)
+      points: this.points.map(_ref => {
+        let {
+          x,
+          y
+        } = _ref;
+        return {
+          x,
+          y
+        };
+      })
     });
   }
 
@@ -18937,7 +18969,7 @@ class FabricText extends StyledText {
    * @return Number
    */
 
-  missingNewlineOffset(lineIndex) {
+  missingNewlineOffset(_lineIndex) {
     return 1;
   }
 
@@ -20163,7 +20195,7 @@ class DraggableTextDelegate {
     const offset = correction.add(diff).transform(vpt, true);
     //  prepare instance for drag image snapshot by making all non selected text invisible
     const bgc = target.backgroundColor;
-    const styles = cloneDeep(target.styles);
+    const styles = cloneStyles(target.styles);
     target.backgroundColor = '';
     const styleOverride = {
       stroke: 'transparent',
@@ -25688,7 +25720,7 @@ class BaseFilter {
       this.applyTo2d(options);
     }
   }
-  applyTo2d(options) {
+  applyTo2d(_options) {
     // override by subclass
   }
 
@@ -25761,10 +25793,10 @@ class BaseFilter {
    *
    * Intended to be overridden by subclasses.
    *
-   * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program.
-   * @param {Object} uniformLocations A map of shader uniform names to their locations.
+   * @param {WebGLRenderingContext} _gl The canvas context used to compile the shader program.
+   * @param {Object} _uniformLocations A map of shader uniform names to their locations.
    */
-  sendUniformData(gl, uniformLocations) {
+  sendUniformData(_gl, _uniformLocations) {
     // override by subclass
   }
 
@@ -25803,7 +25835,7 @@ class BaseFilter {
     // delegate, not alias
     return this.toObject();
   }
-  static async fromObject(_ref2, options) {
+  static async fromObject(_ref2, _options) {
     let filterOptions = _objectWithoutProperties(_ref2, _excluded2);
     return new this(filterOptions);
   }