chore(TS): migrate Point to es6 class and update references. Deprecat…

…e xxxEquals methods (fabricjs#8120)

src/brushes/circle_brush.class.ts

@@ -1,4 +1,6 @@
 //@ts-nocheck
+import { Point } from '../point.class';
+
 
 import { Color } from "../color";
 
@@ -128,10 +130,10 @@ import { Color } from "../color";
 
     /**
      * @param {Object} pointer
-     * @return {fabric.Point} Just added pointer point
+     * @return {Point} Just added pointer point
      */
     addPoint: function(pointer) {
-      var pointerPoint = new fabric.Point(pointer.x, pointer.y),
+      var pointerPoint = new Point(pointer.x, pointer.y),
 
           circleRadius = fabric.util.getRandomInt(
             Math.max(0, this.width - 20), this.width + 20) / 2,

src/brushes/pencil_brush.class.ts

@@ -1,4 +1,6 @@
 //@ts-nocheck
+import { Point } from '../point.class';
+
 (function(global) {
   var fabric = global.fabric;
   /**
@@ -124,7 +126,7 @@
      */
     _prepareForDrawing: function(pointer) {
 
-      var p = new fabric.Point(pointer.x, pointer.y);
+      var p = new Point(pointer.x, pointer.y);
 
       this._reset();
       this._addPoint(p);
@@ -133,7 +135,7 @@
 
     /**
      * @private
-     * @param {fabric.Point} point Point to be added to points array
+     * @param {Point} point Point to be added to points array
      */
     _addPoint: function(point) {
       if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) {
@@ -163,7 +165,7 @@
      * @param {Object} pointer Actual mouse position related to the canvas.
      */
     _captureDrawingPath: function(pointer) {
-      var pointerPoint = new fabric.Point(pointer.x, pointer.y);
+      var pointerPoint = new Point(pointer.x, pointer.y);
       return this._addPoint(pointerPoint);
     },
 
@@ -185,8 +187,8 @@
       //that's why we set them apart a bit
       if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) {
         var width = this.width / 1000;
-        p1 = new fabric.Point(p1.x, p1.y);
-        p2 = new fabric.Point(p2.x, p2.y);
+        p1 = new Point(p1.x, p1.y);
+        p2 = new Point(p2.x, p2.y);
         p1.x -= width;
         p2.x += width;
       }

src/brushes/spray_brush.class.ts

@@ -1,4 +1,6 @@
 //@ts-nocheck
+import { Point } from '../point.class';
+
 (function(global) {
   var fabric = global.fabric;
   /**
@@ -212,7 +214,7 @@
           width = this.dotWidth;
         }
 
-        var point = new fabric.Point(x, y);
+        var point = new Point(x, y);
         point.width = width;
 
         if (this.randomOpacity) {

src/canvas.class.ts

@@ -1,4 +1,6 @@
 //@ts-nocheck
+import { Point } from './point.class';
+
 (function(global) {
 
   var fabric = global.fabric, getPointer = fabric.util.getPointer,
@@ -790,9 +792,9 @@
      */
     _drawSelection: function (ctx) {
       var selector = this._groupSelector,
-          viewportStart = new fabric.Point(selector.ex, selector.ey),
+          viewportStart = new Point(selector.ex, selector.ey),
           start = fabric.util.transformPoint(viewportStart, this.viewportTransform),
-          viewportExtent = new fabric.Point(selector.ex + selector.left, selector.ey + selector.top),
+          viewportExtent = new Point(selector.ex + selector.left, selector.ey + selector.top),
           extent = fabric.util.transformPoint(viewportExtent, this.viewportTransform),
           minX = Math.min(start.x, extent.x),
           minY = Math.min(start.y, extent.y),
@@ -970,7 +972,7 @@
      * of the time.
      * @param {Event} e
      * @param {Boolean} ignoreVpt
-     * @return {fabric.Point}
+     * @return {Point}
      */
     getPointer: function (e, ignoreVpt) {
       // return cached values if we are in the event processing chain
@@ -1012,10 +1014,10 @@
 
       // If bounds are not available (i.e. not visible), do not apply scale.
       cssScale = boundsWidth === 0 || boundsHeight === 0 ?
-        new fabric.Point(1, 1) :
-        new fabric.Point(upperCanvasEl.width / boundsWidth, upperCanvasEl.height / boundsHeight);
+        new Point(1, 1) :
+        new Point(upperCanvasEl.width / boundsWidth, upperCanvasEl.height / boundsHeight);
 
-      return new fabric.Point(
+      return new Point(
         pointer.x * cssScale.x,
         pointer.y * cssScale.y
       );

src/controls.actions.ts

@@ -1,4 +1,6 @@
 //@ts-nocheck
+import { Point } from './point.class';
+
 (function(global) {
   var fabric = global.fabric || (global.fabric = { }),
       scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'],
@@ -229,7 +231,7 @@
         control = target.controls[transform.corner],
         zoom = target.canvas.getZoom(),
         padding = target.padding / zoom,
-        localPoint = target.normalizePoint(new fabric.Point(x, y), originX, originY);
+        localPoint = target.normalizePoint(new Point(x, y), originX, originY);
     if (localPoint.x >= padding) {
       localPoint.x -= padding;
     }

src/intersection.class.ts

@@ -1,4 +1,6 @@
 //@ts-nocheck
+import { Point } from './point.class';
+
 (function(global) {
   /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */
   var fabric = global.fabric || (global.fabric = { });
@@ -21,7 +23,7 @@
 
     /**
      * Appends a point to intersection
-     * @param {fabric.Point} point
+     * @param {Point} point
      * @return {fabric.Intersection} thisArg
      * @chainable
      */
@@ -46,10 +48,10 @@
    * Checks if one line intersects another
    * TODO: rename in intersectSegmentSegment
    * @static
-   * @param {fabric.Point} a1
-   * @param {fabric.Point} a2
-   * @param {fabric.Point} b1
-   * @param {fabric.Point} b2
+   * @param {Point} a1
+   * @param {Point} a2
+   * @param {Point} b1
+   * @param {Point} b2
    * @return {fabric.Intersection}
    */
   fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) {
@@ -62,7 +64,7 @@
           ub = ubT / uB;
       if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) {
         result = new Intersection('Intersection');
-        result.appendPoint(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y)));
+        result.appendPoint(new Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y)));
       }
       else {
         result = new Intersection();
@@ -84,8 +86,8 @@
    * TODO: rename in intersectSegmentPolygon
    * fix detection of coincident
    * @static
-   * @param {fabric.Point} a1
-   * @param {fabric.Point} a2
+   * @param {Point} a1
+   * @param {Point} a2
    * @param {Array} points
    * @return {fabric.Intersection}
    */
@@ -135,15 +137,15 @@
    * Checks if polygon intersects rectangle
    * @static
    * @param {Array} points
-   * @param {fabric.Point} r1
-   * @param {fabric.Point} r2
+   * @param {Point} r1
+   * @param {Point} r2
    * @return {fabric.Intersection}
    */
   fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) {
     var min = r1.min(r2),
         max = r1.max(r2),
-        topRight = new fabric.Point(max.x, min.y),
-        bottomLeft = new fabric.Point(min.x, max.y),
+        topRight = new Point(max.x, min.y),
+        bottomLeft = new Point(min.x, max.y),
         inter1 = Intersection.intersectLinePolygon(min, topRight, points),
         inter2 = Intersection.intersectLinePolygon(topRight, max, points),
         inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points),

src/mixins/canvas_grouping.mixin.ts

@@ -1,4 +1,6 @@
 //@ts-nocheck
+import { Point } from '../point.class';
+
 (function(global) {
 
   var fabric = global.fabric,
@@ -142,8 +144,8 @@
           y1 = this._groupSelector.ey,
           x2 = x1 + this._groupSelector.left,
           y2 = y1 + this._groupSelector.top,
-          selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)),
-          selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)),
+          selectionX1Y1 = new Point(min(x1, x2), min(y1, y2)),
+          selectionX2Y2 = new Point(max(x1, x2), max(y1, y2)),
           allowIntersect = !this.selectionFullyContained,
           isClick = x1 === x2 && y1 === y2;
       // we iterate reverse order to collect top first in case of click.

src/mixins/eraser_brush.mixin.ts

@@ -1,4 +1,6 @@
 //@ts-nocheck
+import { Point } from '../point.class';
+
 (function (global) {
   /** ERASER_START */
 
@@ -509,7 +511,7 @@
 
       /**
        *
-       * @param {fabric.Point} pointer
+       * @param {Point} pointer
        * @param {fabric.IEvent} options
        * @returns
        */

src/mixins/itext_behavior.mixin.ts

@@ -1,4 +1,6 @@
 //@ts-nocheck
+import { Point } from '../point.class';
+
 (function(global) {
   var fabric = global.fabric;
   fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {
@@ -433,9 +435,9 @@
      */
     setDragImage: function (e, data) {
       var t = this.calcTransformMatrix();
-      var flipFactor = new fabric.Point(this.flipX ? -1 : 1, this.flipY ? -1 : 1);
+      var flipFactor = new Point(this.flipX ? -1 : 1, this.flipY ? -1 : 1);
       var boundaries = this._getCursorBoundaries(data.selectionStart);
-      var selectionPosition = new fabric.Point(
+      var selectionPosition = new Point(
         boundaries.left + boundaries.leftOffset,
         boundaries.top + boundaries.topOffset
       ).multiply(flipFactor);
@@ -445,7 +447,7 @@
       var enableRetinaScaling = this.canvas._isRetinaScaling();
       var retinaScaling = this.canvas.getRetinaScaling();
       var bbox = this.getBoundingRect(true);
-      var correction = pos.subtract(new fabric.Point(bbox.left, bbox.top));
+      var correction = pos.subtract(new Point(bbox.left, bbox.top));
       var offset = correction.add(diff).scalarMultiply(retinaScaling);
       //  prepare instance for drag image snapshot by making all non selected text invisible
       var bgc = this.backgroundColor;

src/mixins/object_geometry.mixin.ts

@@ -1,12 +1,14 @@
 //@ts-nocheck
+import { Point } from '../point.class';
+
 (function(global) {
 
   function arrayFromCoords(coords) {
     return [
-      new fabric.Point(coords.tl.x, coords.tl.y),
-      new fabric.Point(coords.tr.x, coords.tr.y),
-      new fabric.Point(coords.br.x, coords.br.y),
-      new fabric.Point(coords.bl.x, coords.bl.y)
+      new Point(coords.tl.x, coords.tl.y),
+      new Point(coords.tr.x, coords.tr.y),
+      new Point(coords.br.x, coords.br.y),
+      new Point(coords.bl.x, coords.bl.y)
     ];
   }
 
@@ -142,8 +144,8 @@
      * You can specify {@link fabric.Object#originX} and {@link fabric.Object#originY} values,
      * 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 fabric.Point(5, 5), 'left', 'bottom').
-     * @param {fabric.Point} point position in canvas coordinate plane
+     * object.setXY(new Point(5, 5), 'left', 'bottom').
+     * @param {Point} point position in canvas coordinate plane
      * @param {'left'|'center'|'right'|number} [originX] Horizontal origin: 'left', 'center' or 'right'
      * @param {'top'|'center'|'bottom'|number} [originY] Vertical origin: 'top', 'center' or 'bottom'
      */
@@ -161,12 +163,12 @@
      * @returns {number} x position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in parent's coordinate plane
      */
     getRelativeXY: function () {
-      return new fabric.Point(this.left, this.top);
+      return new Point(this.left, this.top);
     },
 
     /**
      * As {@link fabric.Object#setXY}, but in current parent's coordinate plane ( the current group if any or the canvas)
-     * @param {fabric.Point} point position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in parent's coordinate plane
+     * @param {Point} point position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in parent's coordinate plane
      * @param {'left'|'center'|'right'|number} [originX] Horizontal origin: 'left', 'center' or 'right'
      * @param {'top'|'center'|'bottom'|number} [originY] Vertical origin: 'top', 'center' or 'bottom'
      */
@@ -283,7 +285,7 @@
 
     /**
      * Checks if point is inside the object
-     * @param {fabric.Point} point Point to check against
+     * @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 .oCoords
@@ -409,7 +411,7 @@
      * 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 {fabric.Point} point Point to check
+     * @param {Point} point Point to check
      * @param {Object} lines Coordinates of the object being evaluated
      */
     // remove yi, not used but left code here just in case.
@@ -708,10 +710,10 @@
     /**
      * Calculate object dimensions from its properties
      * @private
-     * @returns {fabric.Point} dimensions
+     * @returns {Point} dimensions
      */
     _getNonTransformedDimensions: function() {
-      return new fabric.Point(this.width, this.height).scalarAddEquals(this.strokeWidth);
+      return new Point(this.width, this.height).scalarAdd(this.strokeWidth);
     },
 
     /**
@@ -722,7 +724,7 @@
      * @param {Number} [options.skewX]
      * @param {Number} [options.skewY]
      * @private
-     * @returns {fabric.Point} dimensions
+     * @returns {Point} dimensions
      */
     _getTransformedDimensions: function (options) {
       options = Object.assign({
@@ -749,22 +751,22 @@
           finalDimensions,
           noSkew = options.skewX === 0 && options.skewY === 0;
       if (noSkew) {
-        finalDimensions = new fabric.Point(dimX * options.scaleX, dimY * options.scaleY);
+        finalDimensions = new Point(dimX * options.scaleX, dimY * options.scaleY);
       }
       else {
         var bbox = util.sizeAfterTransform(dimX, dimY, options);
-        finalDimensions = new fabric.Point(bbox.x, bbox.y);
+        finalDimensions = new Point(bbox.x, bbox.y);
       }
 
-      return finalDimensions.scalarAddEquals(postScalingStrokeValue);
+      return finalDimensions.scalarAdd(postScalingStrokeValue);
     },
 
     /**
      * Calculate object dimensions for controls box, including padding and canvas zoom.
      * and active selection
      * @private
      * @param {object} [options] transform options
-     * @returns {fabric.Point} dimensions
+     * @returns {Point} dimensions
      */
     _calculateCurrentDimensions: function(options)  {
       var vpt = this.getViewportTransform(),