fabric 6.0.0-beta13 → 6.0.0-beta15

package/dist/index.js

@@ -230,6 +230,26 @@
   }
   const config = new Configuration();
 
+  const log = function (severity) {
+    for (var _len = arguments.length, optionalParams = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      optionalParams[_key - 1] = arguments[_key];
+    }
+    return (
+      // eslint-disable-next-line no-restricted-syntax
+      console[severity]('fabric', ...optionalParams)
+    );
+  };
+  class FabricError extends Error {
+    constructor(message, options) {
+      super("fabric: ".concat(message), options);
+    }
+  }
+  class SignalAbortedError extends FabricError {
+    constructor(context) {
+      super("".concat(context, " 'options.signal' is in 'aborted' state"));
+    }
+  }
+
   class GLProbe {}
 
   /**
@@ -261,7 +281,7 @@
       if (gl) {
         this.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
         this.GLPrecision = ['highp', 'mediump', 'lowp'].find(precision => this.testPrecision(gl, precision));
-        console.log("fabric: max texture size ".concat(this.maxTextureSize));
+        log('log', "WebGL: max texture size ".concat(this.maxTextureSize));
       }
     }
     isSupported(textureSize) {
@@ -399,7 +419,7 @@
   }
   const cache = new Cache();
 
-  var version = "6.0.0-beta13";
+  var version = "6.0.0-beta15";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -447,7 +467,7 @@
     getClass(classType) {
       const constructor = this[JSON$1].get(classType);
       if (!constructor) {
-        throw new Error("No class registered for ".concat(classType));
+        throw new FabricError("No class registered for ".concat(classType));
       }
       return constructor;
     }
@@ -493,8 +513,8 @@
     }
 
     /**
-     * Cancel all running animations attached to a Canvas on the next frame
-     * @param {Canvas} canvas
+     * Cancel all running animations attached to a canvas on the next frame
+     * @param {StaticCanvas} canvas
      */
     cancelByCanvas(canvas) {
       if (!canvas) {
@@ -502,7 +522,7 @@
       }
       const animations = this.filter(animation => {
         var _animation$target;
-        return typeof animation.target === 'object' && ((_animation$target = animation.target) === null || _animation$target === void 0 ? void 0 : _animation$target.canvas) === canvas;
+        return animation.target === canvas || typeof animation.target === 'object' && ((_animation$target = animation.target) === null || _animation$target === void 0 ? void 0 : _animation$target.canvas) === canvas;
       });
       animations.forEach(animation => animation.abort());
       return animations;
@@ -1439,7 +1459,7 @@
         // we iterate reverse order to collect top first in case of click.
         for (let i = this._objects.length - 1; i >= 0; i--) {
           const object = this._objects[i];
-          if (object.selectable && object.visible && (includeIntersecting && object.intersectsWithRect(tl, br, true) || object.isContainedWithinRect(tl, br, true) || includeIntersecting && object.containsPoint(tl, undefined, true) || includeIntersecting && object.containsPoint(br, undefined, true))) {
+          if (object.selectable && object.visible && (includeIntersecting && object.intersectsWithRect(tl, br, true) || object.isContainedWithinRect(tl, br, true) || includeIntersecting && object.containsPoint(tl, true) || includeIntersecting && object.containsPoint(br, true))) {
             objects.push(object);
           }
         }
@@ -1529,7 +1549,7 @@
   const createCanvasElement = () => {
     const element = getFabricDocument().createElement('canvas');
     if (!element || typeof element.getContext === 'undefined') {
-      throw new Error('Failed to create `canvas` element');
+      throw new FabricError('Failed to create `canvas` element');
     }
     return element;
   };
@@ -1817,7 +1837,7 @@
     } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     return new Promise(function (resolve, reject) {
       if (signal && signal.aborted) {
-        return reject(new Error('`options.signal` is in `aborted` state'));
+        return reject(new SignalAbortedError('loadImage'));
       }
       const img = createImage();
       let abort;
@@ -1842,7 +1862,7 @@
       img.onload = done;
       img.onerror = function () {
         abort && (signal === null || signal === void 0 ? void 0 : signal.removeEventListener('abort', abort));
-        reject(new Error('Error loading ' + img.src));
+        reject(new FabricError("Error loading ".concat(img.src)));
       };
       crossOrigin && (img.crossOrigin = crossOrigin);
       img.src = url;
@@ -2700,22 +2720,29 @@
    * we work around it by "moving" alpha channel into opacity attribute and setting fill's alpha to 1
    * @param prop
    * @param value
+   * @param {boolean} inlineStyle The default is inline style, the separator used is ":", The other is "="
    * @returns
    */
-  const colorPropToSVG = (prop, value) => {
+  const colorPropToSVG = function (prop, value) {
+    let inlineStyle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    let colorValue;
+    let opacityValue;
     if (!value) {
-      return "".concat(prop, ": none; ");
+      colorValue = 'none';
     } else if (value.toLive) {
-      return "".concat(prop, ": url(#SVGID_").concat(value.id, "); ");
+      colorValue = "url(#SVGID_".concat(value.id, ")");
     } else {
       const color = new Color(value),
         opacity = color.getAlpha();
-      let str = "".concat(prop, ": ").concat(color.toRgb(), "; ");
+      colorValue = color.toRgb();
       if (opacity !== 1) {
-        //change the color in rgb + opacity
-        str += "".concat(prop, "-opacity: ").concat(opacity.toString(), "; ");
+        opacityValue = opacity.toString();
       }
-      return str;
+    }
+    if (inlineStyle) {
+      return "".concat(prop, ": ").concat(colorValue, "; ").concat(opacityValue ? "".concat(prop, "-opacity: ").concat(opacityValue, "; ") : '');
+    } else {
+      return "".concat(prop, "=\"").concat(colorValue, "\" ").concat(opacityValue ? "".concat(prop, "-opacity=\"").concat(opacityValue, "\" ") : '');
     }
   };
   const createSVGRect = function (color, _ref) {
@@ -2726,7 +2753,7 @@
       height
     } = _ref;
     let precision = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : config.NUM_FRACTION_DIGITS;
-    const svgColor = colorPropToSVG('fill', color);
+    const svgColor = colorPropToSVG('fill', color, false);
     const [x, y, w, h] = [left, top, width, height].map(value => toFixed(value, precision));
     return "<rect ".concat(svgColor, " x=\"").concat(x, "\" y=\"").concat(y, "\" width=\"").concat(w, "\" height=\"").concat(h, "\"></rect>");
   };
@@ -2938,13 +2965,10 @@
     }
     createLowerCanvas(arg0) {
       // canvasEl === 'HTMLCanvasElement' does not work on jsdom/node
-      const el = isHTMLCanvas(arg0) ? arg0 : getFabricDocument().getElementById(arg0) || createCanvasElement();
+      const el = isHTMLCanvas(arg0) ? arg0 : arg0 && getFabricDocument().getElementById(arg0) || createCanvasElement();
       if (el.hasAttribute('data-fabric')) {
-        /* _DEV_MODE_START_ */
-        throw new Error('fabric.js: trying to initialize a canvas that has already been initialized');
-        /* _DEV_MODE_END_ */
+        throw new FabricError('Trying to initialize a canvas that has already been initialized. Did you forget to dispose the canvas?');
       }
-
       this._originalCanvasStyle = el.style.cssText;
       el.setAttribute('data-fabric', 'main');
       el.classList.add('lower-canvas');
@@ -3113,9 +3137,7 @@
     }
     _onObjectAdded(obj) {
       if (obj.canvas && obj.canvas !== this) {
-        /* _DEV_MODE_START_ */
-        console.warn('fabric.Canvas: trying to add an object that belongs to a different canvas.\n' + 'Resulting to default behavior: removing object from previous canvas and adding to new canvas');
-        /* _DEV_MODE_END_ */
+        log('warn', 'Canvas is trying to add an object that belongs to a different canvas.\n' + 'Resulting to default behavior: removing object from previous canvas and adding to new canvas');
         obj.canvas.remove(obj);
       }
       obj._set('canvas', this);
@@ -4045,7 +4067,7 @@
         signal
       } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       if (!json) {
-        return Promise.reject(new Error('fabric.js: `json` is undefined'));
+        return Promise.reject(new FabricError('`json` is undefined'));
       }
 
       // parse json if it wasn't already
@@ -4215,6 +4237,7 @@
         width: this.width,
         height: this.height
       });
+      runningAnimations.cancelByCanvas(this);
       this.disposed = true;
       return new Promise((resolve, reject) => {
         const task = () => {
@@ -4501,10 +4524,10 @@
   const transformPointRelativeToCanvas = (point, canvas, relationBefore, relationAfter) => {
     // is this still needed with TS?
     if (relationBefore !== 'child' && relationBefore !== 'sibling') {
-      throw new Error("fabric.js: received bad argument ".concat(relationBefore));
+      throw new FabricError("received bad argument ".concat(relationBefore));
     }
     if (relationAfter !== 'child' && relationAfter !== 'sibling') {
-      throw new Error("fabric.js: received bad argument ".concat(relationAfter));
+      throw new FabricError("received bad argument ".concat(relationAfter));
     }
     if (relationBefore === relationAfter) {
       return point;
@@ -5611,6 +5634,31 @@
       }
     }
 
+    /**
+     * Use the ray casting algorithm to determine if {@link point} is in the polygon defined by {@link points}
+     * @see https://en.wikipedia.org/wiki/Point_in_polygon
+     * @param point
+     * @param points polygon points
+     * @returns
+     */
+    static isPointInPolygon(point, points) {
+      const other = new Point(point).setX(Math.min(point.x - 1, ...points.map(p => p.x)));
+      let hits = 0;
+      for (let index = 0; index < points.length; index++) {
+        const inter = this.intersectSegmentSegment(
+        // polygon side
+        points[index], points[(index + 1) % points.length],
+        // ray
+        point, other);
+        if (inter.includes(point)) {
+          // point is on the polygon side
+          return true;
+        }
+        hits += Number(inter.status === 'Intersection');
+      }
+      return hits % 2 === 1;
+    }
+
     /**
      * Checks if a line intersects another
      * @see {@link https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection line intersection}
@@ -6147,21 +6195,15 @@
      * Checks if object is fully contained within area of another object
      * @param {Object} other Object to test
      * @param {Boolean} [absolute] use coordinates without viewportTransform
-     * @param {Boolean} [calculate] use coordinates of current position instead of store ones
+     * @param {Boolean} [calculate] use coordinates of current position instead of stored ones
      * @return {Boolean} true if object is fully contained within area of another object
      */
     isContainedWithinObject(other) {
       let absolute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       let calculate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      const points = this.getCoords(absolute, calculate),
-        otherCoords = absolute ? other.aCoords : other.lineCoords,
-        lines = other._getImageLines(otherCoords);
-      for (let i = 0; i < 4; i++) {
-        if (!other.containsPoint(points[i], lines)) {
-          return false;
-        }
-      }
-      return true;
+      const points = this.getCoords(absolute, calculate);
+      calculate && other.getCoords(absolute, true);
+      return points.every(point => other.containsPoint(point));
     }
 
     /**
@@ -6183,19 +6225,14 @@
     /**
      * Checks if point is inside the object
      * @param {Point} point Point to check against
-     * @param {Object} [lines] object returned from @method _getImageLines
      * @param {Boolean} [absolute] use coordinates without viewportTransform
      * @param {Boolean} [calculate] use coordinates of current position instead of stored ones
      * @return {Boolean} true if point is inside the object
      */
-    containsPoint(point, lines) {
-      let absolute = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      let calculate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-      const coords = this._getCoords(absolute, calculate),
-        imageLines = lines || this._getImageLines(coords),
-        xPoints = this._findCrossPoints(point, imageLines);
-      // if xPoints is odd then point is inside the object
-      return xPoints !== 0 && xPoints % 2 === 1;
+    containsPoint(point) {
+      let absolute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      let calculate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      return Intersection.isPointInPolygon(point, this.getCoords(absolute, calculate));
     }
 
     /**
@@ -6237,7 +6274,7 @@
     _containsCenterOfCanvas(pointTL, pointBR, calculate) {
       // worst case scenario the object is so big that contains the screen
       const centerPoint = pointTL.midPointFrom(pointBR);
-      return this.containsPoint(centerPoint, undefined, true, calculate);
+      return this.containsPoint(centerPoint, true, calculate);
     }
 
     /**
@@ -6260,100 +6297,6 @@
       return allPointsAreOutside && this._containsCenterOfCanvas(tl, br, calculate);
     }
 
-    /**
-     * Method that returns an object with the object edges in it, given the coordinates of the corners
-     * @private
-     * @param {Object} lineCoords or aCoords Coordinates of the object corners
-     */
-    _getImageLines(_ref) {
-      let {
-        tl,
-        tr,
-        bl,
-        br
-      } = _ref;
-      const lines = {
-        topline: {
-          o: tl,
-          d: tr
-        },
-        rightline: {
-          o: tr,
-          d: br
-        },
-        bottomline: {
-          o: br,
-          d: bl
-        },
-        leftline: {
-          o: bl,
-          d: tl
-        }
-      };
-
-      // // debugging
-      // if (this.canvas.contextTop) {
-      //   this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2);
-      //   this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2);
-      //
-      //   this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2);
-      //   this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2);
-      //
-      //   this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2);
-      //   this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2);
-      //
-      //   this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2);
-      //   this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2);
-      // }
-
-      return lines;
-    }
-
-    /**
-     * Helper method to determine how many cross points are between the 4 object edges
-     * and the horizontal line determined by a point on canvas
-     * @private
-     * @param {Point} point Point to check
-     * @param {Object} lines Coordinates of the object being evaluated
-     * @return {number} number of crossPoint
-     */
-    _findCrossPoints(point, lines) {
-      let xcount = 0;
-      for (const lineKey in lines) {
-        let xi;
-        const iLine = lines[lineKey];
-        // optimization 1: line below point. no cross
-        if (iLine.o.y < point.y && iLine.d.y < point.y) {
-          continue;
-        }
-        // optimization 2: line above point. no cross
-        if (iLine.o.y >= point.y && iLine.d.y >= point.y) {
-          continue;
-        }
-        // optimization 3: vertical line case
-        if (iLine.o.x === iLine.d.x && iLine.o.x >= point.x) {
-          xi = iLine.o.x;
-        }
-        // calculate the intersection point
-        else {
-          const b1 = 0;
-          const b2 = (iLine.d.y - iLine.o.y) / (iLine.d.x - iLine.o.x);
-          const a1 = point.y - b1 * point.x;
-          const a2 = iLine.o.y - b2 * iLine.o.x;
-          xi = -(a1 - a2) / (b1 - b2);
-        }
-        // don't count xi < point.x cases
-        if (xi >= point.x) {
-          xcount += 1;
-        }
-        // optimization 4: specific for square images
-        if (xcount === 2) {
-          break;
-        }
-      }
-      return xcount;
-    }
-
     /**
      * Returns coordinates of object's bounding rectangle (left, top, width, height)
      * the box is intended as aligned to axis of canvas.
@@ -7119,7 +7062,7 @@
       return name.toLowerCase();
     }
     set type(value) {
-      console.warn('Setting type has no effect', value);
+      log('warn', 'Setting type has no effect', value);
     }
 
     /**
@@ -8039,7 +7982,7 @@
      * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4
      * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4
      * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2
-     * @return {Image} Object cloned as image.
+     * @return {FabricImage} Object cloned as image.
      */
     cloneAsImage(options) {
       const canvasEl = this.toCanvasElement(options);
@@ -8536,28 +8479,28 @@
        * @type {?Number}
        * @default null
        */
-      _defineProperty(this, "sizeX", null);
+      _defineProperty(this, "sizeX", 0);
       /**
        * Sets the height of the control. If null, defaults to object's cornerSize.
        * Expects both sizeX and sizeY to be set when set.
        * @type {?Number}
        * @default null
        */
-      _defineProperty(this, "sizeY", null);
+      _defineProperty(this, "sizeY", 0);
       /**
        * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize.
        * Expects both touchSizeX and touchSizeY to be set when set.
        * @type {?Number}
        * @default null
        */
-      _defineProperty(this, "touchSizeX", null);
+      _defineProperty(this, "touchSizeX", 0);
       /**
        * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize.
        * Expects both touchSizeX and touchSizeY to be set when set.
        * @type {?Number}
        * @default null
        */
-      _defineProperty(this, "touchSizeY", null);
+      _defineProperty(this, "touchSizeY", 0);
       /**
        * Css cursor style to display when the control is hovered.
        * if the method `cursorStyleHandler` is provided, this property is ignored.
@@ -8602,10 +8545,16 @@
      * @return {Boolean} true if the action/event modified the object
      */
 
-    shouldActivate(controlKey, fabricObject) {
+    shouldActivate(controlKey, fabricObject, pointer, _ref) {
       var _fabricObject$canvas;
+      let {
+        tl,
+        tr,
+        br,
+        bl
+      } = _ref;
       // TODO: locking logic can be handled here instead of in the control handler logic
-      return ((_fabricObject$canvas = fabricObject.canvas) === null || _fabricObject$canvas === void 0 ? void 0 : _fabricObject$canvas.getActiveObject()) === fabricObject && fabricObject.isControlVisible(controlKey);
+      return ((_fabricObject$canvas = fabricObject.canvas) === null || _fabricObject$canvas === void 0 ? void 0 : _fabricObject$canvas.getActiveObject()) === fabricObject && fabricObject.isControlVisible(controlKey) && Intersection.isPointInPolygon(pointer, [tl, tr, br, bl]);
     }
 
     /**
@@ -8698,36 +8647,15 @@
      * @param {Number} centerY y coordinate where the control center should be
      * @param {boolean} isTouch true if touch corner, false if normal corner
      */
-    calcCornerCoords(objectAngle, objectCornerSize, centerX, centerY, isTouch) {
-      let cosHalfOffset, sinHalfOffset, cosHalfOffsetComp, sinHalfOffsetComp;
-      const xSize = isTouch ? this.touchSizeX : this.sizeX,
-        ySize = isTouch ? this.touchSizeY : this.sizeY;
-      if (xSize && ySize && xSize !== ySize) {
-        // handle rectangular corners
-        const controlTriangleAngle = Math.atan2(ySize, xSize);
-        const cornerHypotenuse = Math.sqrt(xSize * xSize + ySize * ySize) / 2;
-        const newTheta = controlTriangleAngle - degreesToRadians(objectAngle);
-        const newThetaComp = halfPI - controlTriangleAngle - degreesToRadians(objectAngle);
-        cosHalfOffset = cornerHypotenuse * cos(newTheta);
-        sinHalfOffset = cornerHypotenuse * sin(newTheta);
-        // use complementary angle for two corners
-        cosHalfOffsetComp = cornerHypotenuse * cos(newThetaComp);
-        sinHalfOffsetComp = cornerHypotenuse * sin(newThetaComp);
-      } else {
-        // handle square corners
-        // use default object corner size unless size is defined
-        const cornerSize = xSize && ySize ? xSize : objectCornerSize;
-        const cornerHypotenuse = cornerSize * Math.SQRT1_2;
-        // complementary angles are equal since they're both 45 degrees
-        const newTheta = degreesToRadians(45 - objectAngle);
-        cosHalfOffset = cosHalfOffsetComp = cornerHypotenuse * cos(newTheta);
-        sinHalfOffset = sinHalfOffsetComp = cornerHypotenuse * sin(newTheta);
-      }
+    calcCornerCoords(angle, objectCornerSize, centerX, centerY, isTouch, fabricObject) {
+      const t = multiplyTransformMatrixArray([createTranslateMatrix(centerX, centerY), createRotateMatrix({
+        angle
+      }), createScaleMatrix((isTouch ? this.touchSizeX : this.sizeX) || objectCornerSize, (isTouch ? this.touchSizeY : this.sizeY) || objectCornerSize)]);
       return {
-        tl: new Point(centerX - sinHalfOffsetComp, centerY - cosHalfOffsetComp),
-        tr: new Point(centerX + cosHalfOffset, centerY - sinHalfOffset),
-        bl: new Point(centerX - cosHalfOffset, centerY + sinHalfOffset),
-        br: new Point(centerX + sinHalfOffsetComp, centerY + cosHalfOffsetComp)
+        tl: new Point(-0.5, -0.5).transform(t),
+        tr: new Point(0.5, -0.5).transform(t),
+        bl: new Point(-0.5, 0.5).transform(t),
+        br: new Point(0.5, 0.5).transform(t)
       };
     }
 
@@ -9369,34 +9297,14 @@
         return '';
       }
       this.__corner = undefined;
-      // had to keep the reverse loop because was breaking tests
       const cornerEntries = Object.entries(this.oCoords);
       for (let i = cornerEntries.length - 1; i >= 0; i--) {
         const [key, corner] = cornerEntries[i];
-        if (this.controls[key].shouldActivate(key, this)) {
-          const lines = this._getImageLines(forTouch ? corner.touchCorner : corner.corner);
-          const xPoints = this._findCrossPoints(pointer, lines);
-          if (xPoints !== 0 && xPoints % 2 === 1) {
-            this.__corner = key;
-            return key;
-          }
+        if (this.controls[key].shouldActivate(key, this, pointer, forTouch ? corner.touchCorner : corner.corner)) {
+          // this.canvas.contextTop.fillRect(pointer.x - 1, pointer.y - 1, 2, 2);
+          return this.__corner = key;
         }
-
-        // // debugging
-        //
-        // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2);
-        // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2);
-        //
-        // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2);
-        // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2);
-        //
-        // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2);
-        // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2);
-        //
-        // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2);
-        // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2);
       }
-
       return '';
     }
 
@@ -9452,8 +9360,9 @@
      * @private
      */
     _calcCornerCoords(control, position) {
-      const corner = control.calcCornerCoords(this.angle, this.cornerSize, position.x, position.y, false);
-      const touchCorner = control.calcCornerCoords(this.angle, this.touchCornerSize, position.x, position.y, true);
+      const angle = this.getTotalAngle();
+      const corner = control.calcCornerCoords(angle, this.cornerSize, position.x, position.y, false, this);
+      const touchCorner = control.calcCornerCoords(angle, this.touchCornerSize, position.x, position.y, true, this);
       return {
         corner,
         touchCorner
@@ -9471,7 +9380,7 @@
     setCoords() {
       super.setCoords();
       // set coordinates of the draggable boxes in the corners used to scale/rotate the image
-      this.oCoords = this.calcOCoords();
+      this.canvas && (this.oCoords = this.calcOCoords());
     }
 
     /**
@@ -10553,15 +10462,11 @@
     canEnterGroup(object) {
       if (object === this || this.isDescendantOf(object)) {
         //  prevent circular object tree
-        /* _DEV_MODE_START_ */
-        console.error('fabric.Group: circular object trees are not supported, this call has no effect');
-        /* _DEV_MODE_END_ */
+        log('error', 'Group: circular object trees are not supported, this call has no effect');
         return false;
       } else if (this._objects.indexOf(object) !== -1) {
         // is already in the objects array
-        /* _DEV_MODE_START_ */
-        console.error('fabric.Group: duplicate objects are not supported inside group, this call has no effect');
-        /* _DEV_MODE_END_ */
+        log('error', 'Group: duplicate objects are not supported inside group, this call has no effect');
         return false;
       }
       return true;
@@ -11414,7 +11319,9 @@
         //  save ref to group for later in order to return to it
         const parent = object.group;
         parent._exitGroup(object);
-        object.__owningGroup = parent;
+        // make sure we are setting the correct owning group
+        // in case `object` is transferred between active selections
+        !(parent instanceof ActiveSelection) && (object.__owningGroup = parent);
       }
       this._enterGroup(object, removeParentTransform);
       return true;
@@ -13066,7 +12973,7 @@
         xhr.onerror = xhr.ontimeout = noop;
       };
     if (signal && signal.aborted) {
-      throw new Error('`options.signal` is in `aborted` state');
+      throw new SignalAbortedError('request');
     } else if (signal) {
       signal.addEventListener('abort', abort, {
         once: true
@@ -13513,9 +13420,9 @@
        * @type FabricObject[]
        * @private
        */
-      _defineProperty(this, "_objectsToRender", []);
+      _defineProperty(this, "_objectsToRender", void 0);
       /**
-       * hold a referenfce to a data structure that contains information
+       * hold a reference to a data structure that contains information
        * on the current on going transform
        * @type
        * @private
@@ -13583,6 +13490,10 @@
       }
       super._onObjectRemoved(obj);
     }
+    _onStackOrderChanged() {
+      this._objectsToRender = undefined;
+      super._onStackOrderChanged();
+    }
 
     /**
      * Divides objects in two groups, one to render immediately
@@ -13646,15 +13557,6 @@
       });
     }
 
-    /**
-     * Given a pointer on the canvas with a viewport applied,
-     * find out the pointer in object coordinates
-     * @private
-     */
-    _normalizePointer(object, pointer) {
-      return transformPoint(this.restorePointerVpt(pointer), invertTransform(object.calcTransformMatrix()));
-    }
-
     /**
      * Set the canvas tolerance value for pixel taret find.
      * Use only integer numbers.
@@ -13675,8 +13577,8 @@
      * @TODO this seems dumb that we treat controls with transparency. we can find controls
      * programmatically without painting them, the cache canvas optimization is always valid
      * @param {FabricObject} target Object to check
-     * @param {Number} x Left coordinate
-     * @param {Number} y Top coordinate
+     * @param {Number} x Left coordinate in viewport space
+     * @param {Number} y Top coordinate in viewport space
      * @return {Boolean}
      */
     isTargetTransparent(target, x, y) {
@@ -13786,6 +13688,7 @@
      * @param {FaricObject} target
      */
     _setupCurrentTransform(e, target, alreadySelected) {
+      var _control$getActionHan;
       if (!target) {
         return;
       }
@@ -13794,7 +13697,7 @@
       sendPointToPlane(this.getPointer(e), undefined, target.group.calcTransformMatrix()) : this.getPointer(e);
       const corner = target.getActiveControl() || '',
         control = !!corner && target.controls[corner],
-        actionHandler = alreadySelected && control ? control.getActionHandler(e, target, control) : dragHandler,
+        actionHandler = alreadySelected && control ? (_control$getActionHan = control.getActionHandler(e, target, control)) === null || _control$getActionHan === void 0 ? void 0 : _control$getActionHan.bind(control) : dragHandler,
         action = getActionFromCorner(alreadySelected, corner, e, target),
         origin = this._getOriginFromCorner(target, corner),
         altKey = e[this.centeredKey],
@@ -13932,19 +13835,15 @@
 
     /**
      * Checks point is inside the object.
-     * @param {Object} [pointer] x,y object of point coordinates we want to check.
      * @param {FabricObject} obj Object to test against
-     * @param {Object} [globalPointer] x,y object of point coordinates relative to canvas used to search per pixel target.
+     * @param {Object} [pointer] point from viewport.
      * @return {Boolean} true if point is contained within an area of given object
      * @private
      */
-    _checkTarget(pointer, obj, globalPointer) {
-      if (obj && obj.visible && obj.evented &&
-      // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html
-      // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html
-      obj.containsPoint(pointer)) {
+    _checkTarget(obj, pointer) {
+      if (obj && obj.visible && obj.evented && obj.containsPoint(this.restorePointerVpt(pointer), true)) {
         if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) {
-          if (!this.isTargetTransparent(obj, globalPointer.x, globalPointer.y)) {
+          if (!this.isTargetTransparent(obj, pointer.x, pointer.y)) {
             return true;
           }
         } else {
@@ -13963,23 +13862,19 @@
      */
     _searchPossibleTargets(objects, pointer) {
       // Cache all targets where their bounding box contains point.
-      let target,
-        i = objects.length;
+      let i = objects.length;
       // Do not check for currently grouped objects, since we check the parent group itself.
       // until we call this function specifically to search inside the activeGroup
       while (i--) {
-        const objToCheck = objects[i];
-        const pointerToUse = objToCheck.group ? this._normalizePointer(objToCheck.group, pointer) : pointer;
-        if (this._checkTarget(pointerToUse, objToCheck, pointer)) {
-          target = objects[i];
+        const target = objects[i];
+        if (this._checkTarget(target, pointer)) {
           if (isCollection(target) && target.subTargetCheck) {
             const subTarget = this._searchPossibleTargets(target._objects, pointer);
             subTarget && this.targets.push(subTarget);
           }
-          break;
+          return target;
         }
       }
-      return target;
     }
 
     /**
@@ -13999,6 +13894,7 @@
 
     /**
      * Returns pointer coordinates without the effect of the viewport
+     * Takes a point in html canvas space and gives you back a point of the scene.
      * @param {Object} pointer with "x" and "y" number values in canvas HTML coordinates
      * @return {Object} object with "x" and "y" number values in fabricCanvas coordinates
      */
@@ -14230,6 +14126,11 @@
         return false;
       }
       this._activeObject = object;
+      if (object instanceof ActiveSelection && this._activeSelection !== object) {
+        this._activeSelection = object;
+        object.set('canvas', this);
+        object.setCoords();
+      }
       return true;
     }
 
@@ -15129,7 +15030,7 @@
           const mouseUpHandler = control && control.getMouseUpHandler(e, target, control);
           if (mouseUpHandler) {
             pointer = this.getPointer(e);
-            mouseUpHandler(e, transform, pointer.x, pointer.y);
+            mouseUpHandler.call(control, e, transform, pointer.x, pointer.y);
           }
         }
         target.isMoving = false;
@@ -15140,7 +15041,7 @@
         const originalControl = transform.target && transform.target.controls[transform.corner],
           originalMouseUpHandler = originalControl && originalControl.getMouseUpHandler(e, transform.target, originalControl);
         pointer = pointer || this.getPointer(e);
-        originalMouseUpHandler && originalMouseUpHandler(e, transform, pointer.x, pointer.y);
+        originalMouseUpHandler && originalMouseUpHandler.call(originalControl, e, transform, pointer.x, pointer.y);
       }
       this._setCursorFromEvent(e, target);
       this._handleEvent(e, 'up', LEFT_CLICK, isClick);
@@ -15162,7 +15063,7 @@
       this.fire(eventType, options);
       target && target.fire(eventType, options);
       for (let i = 0; i < subTargets.length; i++) {
-        subTargets[i].fire(eventType, options);
+        subTargets[i] !== target && subTargets[i].fire(eventType, options);
       }
       return options;
     }
@@ -15199,7 +15100,7 @@
       // this may be a little be more complicated of what we want to handle
       target && target.fire("mouse".concat(eventType), options);
       for (let i = 0; i < targets.length; i++) {
-        targets[i].fire("mouse".concat(eventType), options);
+        targets[i] !== target && targets[i].fire("mouse".concat(eventType), options);
       }
     }
 
@@ -15371,7 +15272,7 @@
             pointer = this.getPointer(e),
             mouseDownHandler = control && control.getMouseDownHandler(e, target, control);
           if (mouseDownHandler) {
-            mouseDownHandler(e, this._currentTransform, pointer.x, pointer.y);
+            mouseDownHandler.call(control, e, this._currentTransform, pointer.x, pointer.y);
           }
         }
       }
@@ -15546,7 +15447,7 @@
           pointer: this.getPointer(e, true),
           absolutePointer: this.getPointer(e)
         });
-        fireCanvas && this.fire(canvasIn, outOpt);
+        fireCanvas && this.fire(canvasOut, outOpt);
         oldTarget.fire(targetOut, outOpt);
       }
       if (target && targetChanged) {
@@ -15558,7 +15459,7 @@
           pointer: this.getPointer(e, true),
           absolutePointer: this.getPointer(e)
         });
-        fireCanvas && this.fire(canvasOut, inOpt);
+        fireCanvas && this.fire(canvasIn, inOpt);
         target.fire(targetIn, inOpt);
       }
     }
@@ -16214,6 +16115,7 @@
   classRegistry.setClass(Gradient, 'gradient');
 
   const _excluded$b = ["source"];
+
   /**
    * @see {@link http://fabricjs.com/patterns demo}
    * @see {@link http://fabricjs.com/dynamic-patterns demo}
@@ -16231,7 +16133,7 @@
       return 'pattern';
     }
     set type(value) {
-      console.warn('Setting type has no effect', value);
+      log('warn', 'Setting type has no effect', value);
     }
 
     /**
@@ -18974,9 +18876,9 @@
    * Text class
    * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#text}
    */
-  class Text extends StyledText {
+  class FabricText extends StyledText {
     static getDefaults() {
-      return _objectSpread2(_objectSpread2({}, super.getDefaults()), Text.ownDefaults);
+      return _objectSpread2(_objectSpread2({}, super.getDefaults()), FabricText.ownDefaults);
     }
     constructor(text) {
       let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -20023,7 +19925,7 @@
         fontSize = this.fontSize
       } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let forMeasuring = arguments.length > 1 ? arguments[1] : undefined;
-      const parsedFontFamily = fontFamily.includes("'") || fontFamily.includes('"') || fontFamily.includes(',') || Text.genericFonts.includes(fontFamily.toLowerCase()) ? fontFamily : "\"".concat(fontFamily, "\"");
+      const parsedFontFamily = fontFamily.includes("'") || fontFamily.includes('"') || fontFamily.includes(',') || FabricText.genericFonts.includes(fontFamily.toLowerCase()) ? fontFamily : "\"".concat(fontFamily, "\"");
       return [fontStyle, fontWeight, "".concat(forMeasuring ? this.CACHE_FONT_SIZE : fontSize, "px"), parsedFontFamily].join(' ');
     }
 
@@ -20129,14 +20031,14 @@
       return 1;
     }
     /**
-     * Returns Text instance from an SVG element (<b>not yet implemented</b>)
+     * Returns FabricText instance from an SVG element (<b>not yet implemented</b>)
      * @static
      * @memberOf Text
      * @param {HTMLElement} element Element to parse
      * @param {Object} [options] Options object
      */
     static async fromElement(element, options, cssRules) {
-      const parsedAttributes = parseAttributes(element, Text.ATTRIBUTE_NAMES, cssRules);
+      const parsedAttributes = parseAttributes(element, FabricText.ATTRIBUTE_NAMES, cssRules);
       const _options$parsedAttrib = _objectSpread2(_objectSpread2({}, options), parsedAttributes),
         {
           textAnchor = LEFT,
@@ -20191,9 +20093,9 @@
     /* _FROM_SVG_END_ */
 
     /**
-     * Returns Text instance from an object representation
+     * Returns FabricText instance from an object representation
      * @param {Object} object plain js Object to create an instance from
-     * @returns {Promise<Text>}
+     * @returns {Promise<FabricText>}
      */
     static fromObject(object) {
       return this._fromObject(_objectSpread2(_objectSpread2({}, object), {}, {
@@ -20208,22 +20110,22 @@
    * @type string[]
    * @protected
    */
-  _defineProperty(Text, "textLayoutProperties", textLayoutProperties);
-  _defineProperty(Text, "cacheProperties", [...cacheProperties, ...additionalProps]);
-  _defineProperty(Text, "ownDefaults", textDefaultValues);
-  _defineProperty(Text, "type", 'Text');
-  _defineProperty(Text, "genericFonts", ['sans-serif', 'serif', 'cursive', 'fantasy', 'monospace']);
+  _defineProperty(FabricText, "textLayoutProperties", textLayoutProperties);
+  _defineProperty(FabricText, "cacheProperties", [...cacheProperties, ...additionalProps]);
+  _defineProperty(FabricText, "ownDefaults", textDefaultValues);
+  _defineProperty(FabricText, "type", 'Text');
+  _defineProperty(FabricText, "genericFonts", ['sans-serif', 'serif', 'cursive', 'fantasy', 'monospace']);
   /* _FROM_SVG_START_ */
   /**
-   * List of attribute names to account for when parsing SVG element (used by {@link Text.fromElement})
+   * List of attribute names to account for when parsing SVG element (used by {@link FabricText.fromElement})
    * @static
    * @memberOf Text
    * @see: http://www.w3.org/TR/SVG/text.html#TextElement
    */
-  _defineProperty(Text, "ATTRIBUTE_NAMES", SHARED_ATTRIBUTES.concat('x', 'y', 'dx', 'dy', 'font-family', 'font-style', 'font-weight', 'font-size', 'letter-spacing', 'text-decoration', 'text-anchor'));
-  applyMixins(Text, [TextSVGExportMixin]);
-  classRegistry.setClass(Text);
-  classRegistry.setSVGClass(Text);
+  _defineProperty(FabricText, "ATTRIBUTE_NAMES", SHARED_ATTRIBUTES.concat('x', 'y', 'dx', 'dy', 'font-family', 'font-style', 'font-weight', 'font-size', 'letter-spacing', 'text-decoration', 'text-anchor'));
+  applyMixins(FabricText, [TextSVGExportMixin]);
+  classRegistry.setClass(FabricText);
+  classRegistry.setSVGClass(FabricText);
 
   /**
    * #### Dragging IText/Textbox Lifecycle
@@ -20576,7 +20478,7 @@
    *  - `\-`     Matches a "-" character (char code 45).
    */ // eslint-disable-next-line no-useless-escape
   const reNonWord = /[ \n\.,;!\?\-]/;
-  class ITextBehavior extends Text {
+  class ITextBehavior extends FabricText {
     constructor() {
       super(...arguments);
       /**
@@ -22660,7 +22562,7 @@
         lineIndex = cursorLocation.lineIndex,
         charIndex = cursorLocation.charIndex > 0 ? cursorLocation.charIndex - 1 : 0,
         charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize'),
-        multiplier = this.scaleX * this.canvas.getZoom(),
+        multiplier = this.getObjectScaling().x * this.canvas.getZoom(),
         cursorWidth = this.cursorWidth / multiplier,
         dy = this.getValueOfPropertyAt(lineIndex, charIndex, 'deltaY'),
         topOffset = boundaries.topOffset + (1 - this._fontSizeFraction) * this.getHeightOfLine(lineIndex) / this.lineHeight - charHeight * (1 - this._fontSizeFraction);
@@ -23802,9 +23704,9 @@
   /**
    * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#images}
    */
-  class Image extends FabricObject {
+  class FabricImage extends FabricObject {
     static getDefaults() {
-      return _objectSpread2(_objectSpread2({}, super.getDefaults()), Image.ownDefaults);
+      return _objectSpread2(_objectSpread2({}, super.getDefaults()), FabricImage.ownDefaults);
     }
     /**
      * Constructor
@@ -23822,7 +23724,7 @@
         filters: []
       }, options));
       /**
-       * When calling {@link Image.getSrc}, return value from element src with `element.getAttribute('src')`.
+       * When calling {@link FabricImage.getSrc}, return value from element src with `element.getAttribute('src')`.
        * This allows for relative urls as image src.
        * @since 2.7.0
        * @type Boolean
@@ -23879,7 +23781,7 @@
       this._element = element;
       this._originalElement = element;
       this._setWidthHeight(size);
-      element.classList.add(Image.CSS_CANVAS);
+      element.classList.add(FabricImage.CSS_CANVAS);
       if (this.filters.length !== 0) {
         this.applyFilters();
       }
@@ -24352,12 +24254,12 @@
      */
 
     /**
-     * Creates an instance of Image from its object representation
+     * Creates an instance of FabricImage from its object representation
      * @static
      * @param {Object} object Object to create an instance from
      * @param {object} [options] Options object
      * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
-     * @returns {Promise<Image>}
+     * @returns {Promise<FabricImage>}
      */
     static fromObject(_ref) {
       let {
@@ -24388,7 +24290,7 @@
      * @static
      * @param {String} url URL to create an image from
      * @param {LoadImageOptions} [options] Options object
-     * @returns {Promise<Image>}
+     * @returns {Promise<FabricImage>}
      */
     static fromURL(url) {
       let {
@@ -24403,7 +24305,7 @@
     }
 
     /**
-     * Returns {@link Image} instance from an SVG element
+     * Returns {@link FabricImage} instance from an SVG element
      * @static
      * @param {HTMLElement} element Element to parse
      * @param {Object} [options] Options object
@@ -24415,23 +24317,23 @@
       let cssRules = arguments.length > 2 ? arguments[2] : undefined;
       const parsedAttributes = parseAttributes(element, this.ATTRIBUTE_NAMES, cssRules);
       return this.fromURL(parsedAttributes['xlink:href'], options, parsedAttributes).catch(err => {
-        console.log(err);
+        log('log', 'Unable to parse Image', err);
         return null;
       });
     }
   }
-  _defineProperty(Image, "type", 'Image');
-  _defineProperty(Image, "cacheProperties", [...cacheProperties, ...IMAGE_PROPS]);
-  _defineProperty(Image, "ownDefaults", imageDefaultValues);
-  _defineProperty(Image, "CSS_CANVAS", 'canvas-img');
+  _defineProperty(FabricImage, "type", 'Image');
+  _defineProperty(FabricImage, "cacheProperties", [...cacheProperties, ...IMAGE_PROPS]);
+  _defineProperty(FabricImage, "ownDefaults", imageDefaultValues);
+  _defineProperty(FabricImage, "CSS_CANVAS", 'canvas-img');
   /**
-   * List of attribute names to account for when parsing SVG element (used by {@link Image.fromElement})
+   * List of attribute names to account for when parsing SVG element (used by {@link FabricImage.fromElement})
    * @static
    * @see {@link http://www.w3.org/TR/SVG/struct.html#ImageElement}
    */
-  _defineProperty(Image, "ATTRIBUTE_NAMES", [...SHARED_ATTRIBUTES, 'x', 'y', 'width', 'height', 'preserveAspectRatio', 'xlink:href', 'crossOrigin', 'image-rendering']);
-  classRegistry.setClass(Image);
-  classRegistry.setSVGClass(Image);
+  _defineProperty(FabricImage, "ATTRIBUTE_NAMES", [...SHARED_ATTRIBUTES, 'x', 'y', 'width', 'height', 'preserveAspectRatio', 'xlink:href', 'crossOrigin', 'image-rendering']);
+  classRegistry.setClass(FabricImage);
+  classRegistry.setSVGClass(FabricImage);
 
   /**
    * Add a <g> element that envelop all child elements and makes the viewbox transformMatrix descend on all elements
@@ -24567,25 +24469,6 @@
     return false;
   }
 
-  /**
-   * @private
-   * TODO: verify if this is still needed
-   * to support IE8 missing getElementById on SVGdocument and on node xmlDOM
-   */
-  function elementById(doc, id) {
-    if (doc.getElementById) {
-      return doc.getElementById(id);
-    }
-    const nodelist = doc.getElementsByTagName('*');
-    for (let i = 0, len = nodelist.length; i < len; i++) {
-      const node = nodelist[i];
-      if (id === node.getAttribute('id')) {
-        return node;
-      }
-    }
-    return null;
-  }
-
   function getMultipleNodes(doc, nodeNames) {
     let nodeName,
       nodeArray = [],
@@ -24612,7 +24495,12 @@
       const xlink = xlinkAttribute.slice(1);
       const x = el.getAttribute('x') || 0;
       const y = el.getAttribute('y') || 0;
-      let el2 = elementById(doc, xlink).cloneNode(true);
+      const el2Orig = doc.getElementById(xlink);
+      if (el2Orig === null) {
+        // if we can't find the target of the xlink, consider this use tag bad, similar to no xlink
+        return;
+      }
+      let el2 = el2Orig.cloneNode(true);
       let currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')';
       const oldLength = nodelist.length;
       const namespace = svgNS;
@@ -24664,7 +24552,7 @@
   function recursivelyParseGradientsXlink(doc, gradient) {
     var _gradient$getAttribut;
     const xLink = ((_gradient$getAttribut = gradient.getAttribute(xlinkAttr)) === null || _gradient$getAttribut === void 0 ? void 0 : _gradient$getAttribut.slice(1)) || '',
-      referencedGradient = elementById(doc, xLink);
+      referencedGradient = doc.getElementById(xLink);
     if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) {
       recursivelyParseGradientsXlink(doc, referencedGradient);
     }
@@ -24784,7 +24672,7 @@
         const obj = await klass.fromElement(el, this.options, this.cssRules);
         this.resolveGradient(obj, el, 'fill');
         this.resolveGradient(obj, el, 'stroke');
-        if (obj instanceof Image && obj._originalElement) {
+        if (obj instanceof FabricImage && obj._originalElement) {
           removeTransformMatrixForSvgParsing(obj, obj.parsePreserveAspectRatioAttribute());
         } else {
           removeTransformMatrixForSvgParsing(obj);
@@ -24903,7 +24791,7 @@
       signal
     } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     if (signal && signal.aborted) {
-      console.log('`options.signal` is in `aborted` state');
+      log('log', new SignalAbortedError('parseSVGDocument'));
       // this is an unhappy path, we dont care about speed
       return createEmptyResponse();
     }
@@ -25007,7 +24895,7 @@
    * This function locates the controls.
    * It'll be used both for drawing and for interaction.
    */
-  const factoryPolyPositionHandler = pointIndex => {
+  const createPolyPositionHandler = pointIndex => {
     return function (dim, finalMatrix, polyObject) {
       var _polyObject$canvas$vi, _polyObject$canvas;
       const x = polyObject.points[pointIndex].x - polyObject.pathOffset.x,
@@ -25040,7 +24928,7 @@
   /**
    * Keep the polygon in the same position when we change its `width`/`height`/`top`/`left`.
    */
-  const anchorWrapper = (pointIndex, fn) => {
+  const factoryPolyActionHandler = (pointIndex, fn) => {
     return function (eventData, transform, x, y) {
       const poly = transform.target,
         anchorPoint = new Point(poly.points[(pointIndex > 0 ? pointIndex : poly.points.length) - 1]),
@@ -25054,14 +24942,15 @@
       return actionPerformed;
     };
   };
+  const createPolyActionHandler = pointIndex => factoryPolyActionHandler(pointIndex, polyActionHandler);
   function createPolyControls(arg0) {
     let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const controls = {};
     for (let idx = 0; idx < (typeof arg0 === 'number' ? arg0 : arg0.points.length); idx++) {
       controls["p".concat(idx)] = new Control(_objectSpread2({
         actionName: 'modifyPoly',
-        positionHandler: factoryPolyPositionHandler(idx),
-        actionHandler: anchorWrapper(idx, polyActionHandler)
+        positionHandler: createPolyPositionHandler(idx),
+        actionHandler: createPolyActionHandler(idx)
       }, options));
     }
     return controls;
@@ -25071,11 +24960,15 @@
     __proto__: null,
     changeWidth: changeWidth,
     createObjectDefaultControls: createObjectDefaultControls,
+    createPolyActionHandler: createPolyActionHandler,
     createPolyControls: createPolyControls,
+    createPolyPositionHandler: createPolyPositionHandler,
     createResizeControls: createResizeControls,
     createTextboxDefaultControls: createTextboxDefaultControls,
     dragHandler: dragHandler,
+    factoryPolyActionHandler: factoryPolyActionHandler,
     getLocalPoint: getLocalPoint,
+    polyActionHandler: polyActionHandler,
     renderCircleControl: renderCircleControl,
     renderSquareControl: renderSquareControl,
     rotationStyleHandler: rotationStyleHandler,
@@ -25170,25 +25063,23 @@
       const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
       const program = gl.createProgram();
       if (!vertexShader || !fragmentShader || !program) {
-        throw new Error('Vertex, fragment shader or program creation error');
+        throw new FabricError('Vertex, fragment shader or program creation error');
       }
       gl.shaderSource(vertexShader, vertexSource);
       gl.compileShader(vertexShader);
       if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
-        throw new Error("Vertex shader compile error for ".concat(this.type, ": ").concat(gl.getShaderInfoLog(vertexShader)));
+        throw new FabricError("Vertex shader compile error for ".concat(this.type, ": ").concat(gl.getShaderInfoLog(vertexShader)));
       }
       gl.shaderSource(fragmentShader, fragmentSource);
       gl.compileShader(fragmentShader);
       if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
-        throw new Error("Fragment shader compile error for ".concat(this.type, ": ").concat(gl.getShaderInfoLog(fragmentShader)));
+        throw new FabricError("Fragment shader compile error for ".concat(this.type, ": ").concat(gl.getShaderInfoLog(fragmentShader)));
       }
       gl.attachShader(program, vertexShader);
       gl.attachShader(program, fragmentShader);
       gl.linkProgram(program);
       if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-        throw new Error(
-        // eslint-disable-next-line prefer-template
-        'Shader link error for "${this.type}" ' + gl.getProgramInfoLog(program));
+        throw new FabricError("Shader link error for \"".concat(this.type, "\" ").concat(gl.getProgramInfoLog(program)));
       }
       const uniformLocations = this.getUniformLocations(gl, program) || {};
       uniformLocations.uStepW = gl.getUniformLocation(program, 'uStepW');
@@ -25787,7 +25678,7 @@
           image
         } = _ref2,
         filterOptions = _objectWithoutProperties(_ref2, _excluded$3);
-      return Image.fromObject(image, options).then(enlivedImage => new this(_objectSpread2(_objectSpread2({}, filterOptions), {}, {
+      return FabricImage.fromObject(image, options).then(enlivedImage => new this(_objectSpread2(_objectSpread2({}, filterOptions), {}, {
         image: enlivedImage
       })));
     }
@@ -27751,10 +27642,13 @@
   exports.Color = Color;
   exports.Control = Control;
   exports.Ellipse = Ellipse;
+  exports.FabricImage = FabricImage;
+  exports.FabricObject = FabricObject;
+  exports.FabricText = FabricText;
   exports.Gradient = Gradient;
   exports.Group = Group;
   exports.IText = IText;
-  exports.Image = Image;
+  exports.Image = FabricImage;
   exports.Intersection = Intersection;
   exports.Line = Line;
   exports.Object = FabricObject;
@@ -27771,7 +27665,7 @@
   exports.SprayBrush = SprayBrush;
   exports.StaticCanvas = StaticCanvas;
   exports.StaticCanvasDOMManager = StaticCanvasDOMManager;
-  exports.Text = Text;
+  exports.Text = FabricText;
   exports.Textbox = Textbox;
   exports.Triangle = Triangle;
   exports.WebGLFilterBackend = WebGLFilterBackend;