fabric 6.2.0 → 6.3.0

package/dist/index.js

@@ -407,7 +407,7 @@
   }
   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;
@@ -703,33 +703,6 @@
     }
   }
 
-  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`
@@ -2406,6 +2379,7 @@
       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];
     }
 
@@ -3485,7 +3459,7 @@
         this.nextRenderHandle = 0;
       }
     }
-    drawControls(ctx) {
+    drawControls(_ctx) {
       // Static canvas has no controls
     }
 
@@ -4774,7 +4748,7 @@
      * @return {Array} an array of strings with the specific svg representation
      * of the instance
      */
-    _toSVG(reviver) {
+    _toSVG(_reviver) {
       return [''];
     }
 
@@ -6066,7 +6040,7 @@
      * 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'
      */
@@ -6851,8 +6825,6 @@
   _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 = {
@@ -7415,7 +7387,7 @@
       }
       ctx.restore();
     }
-    drawSelectionBackground(ctx) {
+    drawSelectionBackground(_ctx) {
       /* no op */
     }
     renderCache(options) {
@@ -7783,9 +7755,9 @@
      * 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
     }
 
@@ -8128,25 +8100,22 @@
      * @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);
         }
       });
     }
@@ -9623,12 +9592,12 @@
     /**
      * 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;
     }
@@ -9636,10 +9605,10 @@
     /**
      * 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;
     }
@@ -9649,7 +9618,7 @@
      * Fired from {@link Canvas#_onMouseMove}
      * @returns true in order for the window to start a drag session
      */
-    shouldStartDragging(e) {
+    shouldStartDragging(_e) {
       return false;
     }
 
@@ -9658,17 +9627,17 @@
      * 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;
     }
 
@@ -9677,9 +9646,9 @@
      * 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
     }
 
@@ -9689,9 +9658,9 @@
      * 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
     }
   }
@@ -9746,8 +9715,9 @@
 
   // 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);
@@ -9789,6 +9759,15 @@
    */
   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,
@@ -10205,6 +10184,17 @@
     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
@@ -10311,7 +10301,7 @@
     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++) {
@@ -10356,7 +10346,7 @@
   const stylesFromArray = (styles, text) => {
     if (!Array.isArray(styles)) {
       // clone to prevent mutation
-      return cloneDeep(styles);
+      return cloneStyles(styles);
     }
     const textLines = text.split(reNewline),
       stylesObject = {};
@@ -11123,7 +11113,7 @@
     /**
      * unsubscribe object layout triggers
      */
-    unsubscribe(object, context) {
+    unsubscribe(object, _context) {
       (this._subscriptions.get(object) || []).forEach(d => d());
       this._subscriptions.delete(object);
     }
@@ -12789,6 +12779,14 @@
     });
   };
 
+  /**
+   * 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.
@@ -14362,6 +14360,7 @@
       // '_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
@@ -14375,7 +14374,7 @@
     _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);
@@ -15570,6 +15569,16 @@
     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);
@@ -15694,8 +15703,8 @@
    * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#gradients}
    */
   class Gradient {
-    constructor(_ref) {
-      let {
+    constructor(options) {
+      const {
         type = 'linear',
         gradientUnits = 'pixels',
         coords = {},
@@ -15704,20 +15713,18 @@
         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
@@ -15744,8 +15751,8 @@
     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,
@@ -15824,12 +15831,12 @@
           });
         }
       }
-      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');
@@ -15843,20 +15850,34 @@
      * @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_ */
@@ -15981,7 +16002,7 @@
   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}
@@ -16008,6 +16029,13 @@
      * @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
      */
@@ -16046,13 +16074,6 @@
        * @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);
     }
@@ -16137,13 +16158,15 @@
     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
       }));
     }
@@ -18082,7 +18105,16 @@
     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
+          };
+        })
       });
     }
 
@@ -18887,7 +18919,7 @@
      * @return Number
      */
 
-    missingNewlineOffset(lineIndex) {
+    missingNewlineOffset(_lineIndex) {
       return 1;
     }
 
@@ -20113,7 +20145,7 @@
       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',
@@ -25638,7 +25670,7 @@
         this.applyTo2d(options);
       }
     }
-    applyTo2d(options) {
+    applyTo2d(_options) {
       // override by subclass
     }
 
@@ -25711,10 +25743,10 @@
      *
      * 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
     }
 
@@ -25753,7 +25785,7 @@
       // 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);
     }