chore/fix(v6): prerequisites for Group (#7728)

src/controls.actions.js

@@ -279,7 +279,7 @@
   function skewObjectX(eventData, transform, x, y) {
     var target = transform.target,
         // find how big the object would be, if there was no skewX. takes in account scaling
-        dimNoSkew = target._getTransformedDimensions(0, target.skewY),
+        dimNoSkew = target._getTransformedDimensions({ skewX: 0, skewY: target.skewY }),
         localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y),
         // the mouse is in the center of the object, and we want it to stay there.
         // so the object will grow twice as much as the mouse.
@@ -322,7 +322,7 @@
   function skewObjectY(eventData, transform, x, y) {
     var target = transform.target,
         // find how big the object would be, if there was no skewX. takes in account scaling
-        dimNoSkew = target._getTransformedDimensions(target.skewX, 0),
+        dimNoSkew = target._getTransformedDimensions({ skewX: target.skewX, skewY: 0 }),
         localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y),
         // the mouse is in the center of the object, and we want it to stay there.
         // so the object will grow twice as much as the mouse.

src/mixins/object_geometry.mixin.js

@@ -431,7 +431,7 @@
 
     calcLineCoords: function() {
       var vpt = this.getViewportTransform(),
-          padding = this.padding, angle = degreesToRadians(this.angle),
+          padding = this.padding, angle = degreesToRadians(this.getTotalAngle()),
           cos = util.cos(angle), sin = util.sin(angle),
           cosP = cos * padding, sinP = sin * padding, cosPSinP = cosP + sinP,
           cosPMinusSinP = cosP - sinP, aCoords = this.calcACoords();
@@ -461,7 +461,8 @@
       var rotateMatrix = this._calcRotateMatrix(),
           translateMatrix = this._calcTranslateMatrix(),
           vpt = this.getViewportTransform(),
-          startMatrix = multiplyMatrices(vpt, translateMatrix),
+          startMatrix = this.group ? multiplyMatrices(vpt, this.group.calcTransformMatrix()) : vpt,
+          startMatrix = multiplyMatrices(startMatrix, translateMatrix),
           finalMatrix = multiplyMatrices(startMatrix, rotateMatrix),
           finalMatrix = multiplyMatrices(finalMatrix, [1 / vpt[0], 0, 0, 1 / vpt[3], 0, 0]),
           dim = this._calculateCurrentDimensions(),
@@ -471,15 +472,18 @@
       });
 
       // debug code
-      // var canvas = this.canvas;
-      // setTimeout(function() {
-      //   canvas.contextTop.clearRect(0, 0, 700, 700);
-      //   canvas.contextTop.fillStyle = 'green';
-      //   Object.keys(coords).forEach(function(key) {
-      //     var control = coords[key];
-      //     canvas.contextTop.fillRect(control.x, control.y, 3, 3);
-      //   });
-      // }, 50);
+      /*
+       var canvas = this.canvas;
+      setTimeout(function () {
+        if (!canvas) return;
+         canvas.contextTop.clearRect(0, 0, 700, 700);
+         canvas.contextTop.fillStyle = 'green';
+         Object.keys(coords).forEach(function(key) {
+           var control = coords[key];
+           canvas.contextTop.fillRect(control.x, control.y, 3, 3);
+         });
+       }, 50);
+       */
       return coords;
     },
 
@@ -601,77 +605,62 @@
       return cache.value;
     },
 
-    /*
+    /**
      * Calculate object dimensions from its properties
      * @private
-     * @return {Object} .x width dimension
-     * @return {Object} .y height dimension
+     * @returns {fabric.Point} dimensions
      */
     _getNonTransformedDimensions: function() {
-      var strokeWidth = this.strokeWidth,
-          w = this.width + strokeWidth,
-          h = this.height + strokeWidth;
-      return { x: w, y: h };
+      return new fabric.Point(this.width, this.height).scalarAddEquals(this.strokeWidth);
     },
 
-    /*
+    /**
      * Calculate object bounding box dimensions from its properties scale, skew.
-     * @param {Number} skewX, a value to override current skewX
-     * @param {Number} skewY, a value to override current skewY
+     * @param {Object} [options]
+     * @param {Number} [options.scaleX]
+     * @param {Number} [options.scaleY]
+     * @param {Number} [options.skewX]
+     * @param {Number} [options.skewY]
      * @private
-     * @return {Object} .x width dimension
-     * @return {Object} .y height dimension
+     * @returns {fabric.Point} dimensions
      */
-    _getTransformedDimensions: function(skewX, skewY) {
-      if (typeof skewX === 'undefined') {
-        skewX = this.skewX;
-      }
-      if (typeof skewY === 'undefined') {
-        skewY = this.skewY;
-      }
-      var dimensions, dimX, dimY,
-          noSkew = skewX === 0 && skewY === 0;
-
+    _getTransformedDimensions: function (options) {
+      options = Object.assign({
+        scaleX: this.scaleX,
+        scaleY: this.scaleY,
+        skewX: this.skewX,
+        skewY: this.skewY,
+      }, options || {});
+      //  stroke is applied before/after transformations are applied according to `strokeUniform`
+      var preScalingStrokeValue, postScalingStrokeValue, strokeWidth = this.strokeWidth;
       if (this.strokeUniform) {
-        dimX = this.width;
-        dimY = this.height;
+        preScalingStrokeValue = 0;
+        postScalingStrokeValue = strokeWidth;
       }
       else {
-        dimensions = this._getNonTransformedDimensions();
-        dimX = dimensions.x;
-        dimY = dimensions.y;
+        preScalingStrokeValue = strokeWidth;
+        postScalingStrokeValue = 0;
       }
+      var dimX = this.width + preScalingStrokeValue,
+          dimY = this.height + preScalingStrokeValue,
+          finalDimensions,
+          noSkew = options.skewX === 0 && options.skewY === 0;
       if (noSkew) {
-        return this._finalizeDimensions(dimX * this.scaleX, dimY * this.scaleY);
+        finalDimensions = new fabric.Point(dimX * options.scaleX, dimY * options.scaleY);
+      }
+      else {
+        var bbox = util.sizeAfterTransform(dimX, dimY, options);
+        finalDimensions = new fabric.Point(bbox.x, bbox.y);
       }
-      var bbox = util.sizeAfterTransform(dimX, dimY, {
-        scaleX: this.scaleX,
-        scaleY: this.scaleY,
-        skewX: skewX,
-        skewY: skewY,
-      });
-      return this._finalizeDimensions(bbox.x, bbox.y);
-    },
 
-    /*
-     * Calculate object bounding box dimensions from its properties scale, skew.
-     * @param Number width width of the bbox
-     * @param Number height height of the bbox
-     * @private
-     * @return {Object} .x finalized width dimension
-     * @return {Object} .y finalized height dimension
-     */
-    _finalizeDimensions: function(width, height) {
-      return this.strokeUniform ?
-        { x: width + this.strokeWidth, y: height + this.strokeWidth }
-        :
-        { x: width, y: height };
+      return finalDimensions.scalarAddEquals(postScalingStrokeValue);
     },
 
-    /*
+    /**
      * Calculate object dimensions for controls box, including padding and canvas zoom.
      * and active selection
-     * private
+     * @private
+     * @returns {fabric.Point} dimensions
      */
     _calculateCurrentDimensions: function()  {
       var vpt = this.getViewportTransform(),

src/mixins/object_interactivity.mixin.js

@@ -13,14 +13,7 @@
       if (!this.hasControls || (!this.canvas || this.canvas._activeObject !== this)) {
         return false;
       }
-      //  transform pointer to target's containing coordinate plane
-      //  both agree on every point
-      var p = this.group ?
-        fabric.util.transformPoint(pointer, fabric.util.invertTransform(this.group.calcTransformMatrix())) :
-        pointer;
-      var ex = p.x,
-          ey = p.y,
-          xPoints,
+      var xPoints,
           lines, keys = Object.keys(this.oCoords),
           j = keys.length - 1, i;
       this.__corner = 0;
@@ -47,7 +40,7 @@
         // 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);
 
-        xPoints = this._findCrossPoints({ x: ex, y: ey }, lines);
+        xPoints = this._findCrossPoints(pointer, lines);
         if (xPoints !== 0 && xPoints % 2 === 1) {
           this.__corner = i;
           return i;
@@ -231,28 +224,17 @@
     drawControls: function(ctx, styleOverride) {
       styleOverride = styleOverride || {};
       ctx.save();
-      var retinaScaling = this.canvas.getRetinaScaling(), matrix, p;
+      var retinaScaling = this.canvas.getRetinaScaling(), p;
       ctx.setTransform(retinaScaling, 0, 0, retinaScaling, 0, 0);
       ctx.strokeStyle = ctx.fillStyle = styleOverride.cornerColor || this.cornerColor;
       if (!this.transparentCorners) {
         ctx.strokeStyle = styleOverride.cornerStrokeColor || this.cornerStrokeColor;
       }
       this._setLineDash(ctx, styleOverride.cornerDashArray || this.cornerDashArray);
       this.setCoords();
-      if (this.group) {
-        // fabricJS does not really support drawing controls inside groups,
-        // this piece of code here helps having at least the control in places.
-        // If an application needs to show some objects as selected because of some UI state
-        // can still call Object._renderControls() on any object they desire, independently of groups.
-        // using no padding, circular controls and hiding the rotating cursor is higly suggested,
-        matrix = this.group.calcTransformMatrix();
-      }
       this.forEachControl(function(control, key, fabricObject) {
-        p = fabricObject.oCoords[key];
         if (control.getVisibility(fabricObject, key)) {
-          if (matrix) {
-            p = fabric.util.transformPoint(p, matrix);
-          }
+          p = fabricObject.oCoords[key];
           control.render(ctx, p.x, p.y, styleOverride, fabricObject);
         }
       });

src/shapes/object.class.js

@@ -727,7 +727,7 @@
     _getCacheCanvasDimensions: function() {
       var objectScale = this.getTotalObjectScaling(),
           // caculate dimensions without skewing
-          dim = this._getTransformedDimensions(0, 0),
+          dim = this._getTransformedDimensions({ skewX: 0, skewY: 0 }),
           neededX = dim.x * objectScale.x / this.scaleX,
           neededY = dim.y * objectScale.y / this.scaleY;
       return {

src/static_canvas.class.js

@@ -826,7 +826,7 @@
 
     /**
      * Returns coordinates of a center of canvas.
-     * @return {fabric.Point} 
+     * @return {fabric.Point}
      */
     getCenterPoint: function () {
       return new fabric.Point(this.width / 2, this.height / 2);