Merge pull request #2206 from asturur/boundingboxes

dimensions code refactor

src/canvas.class.js

@@ -509,13 +509,10 @@
      */
     _setObjectScale: function(localMouse, transform, lockScalingX, lockScalingY, by, lockScalingFlip) {
       var target = transform.target, forbidScalingX = false, forbidScalingY = false,
-          vLine = target.type === 'line' && target.width === 0,
-          hLine = target.type === 'line' && target.height === 0,
-          strokeWidthX = hLine ? 0 : target.strokeWidth,
-          strokeWidthY = vLine ? 0 : target.strokeWidth;
+          dim = target._getNonTransformedDimensions();
 
-      transform.newScaleX = localMouse.x / (target.width + strokeWidthX);
-      transform.newScaleY = localMouse.y / (target.height + strokeWidthY);
+      transform.newScaleX = localMouse.x / dim.x;
+      transform.newScaleY = localMouse.y / dim.y;
 
       if (lockScalingFlip && transform.newScaleX <= 0 && transform.newScaleX < target.scaleX) {
         forbidScalingX = true;
@@ -549,12 +546,9 @@
     _scaleObjectEqually: function(localMouse, target, transform) {
 
       var dist = localMouse.y + localMouse.x,
-          vLine = target.type === 'line' && target.width === 0,
-          hLine = target.type === 'line' && target.height === 0,
-          strokeWidthX = hLine ? 0 : target.strokeWidth,
-          strokeWidthY = vLine ? 0 : target.strokeWidth,
-          lastDist = (target.height + strokeWidthY) * transform.original.scaleY +
-                     (target.width + strokeWidthX) * transform.original.scaleX;
+          dim = target._getNonTransformedDimensions(),
+          lastDist = dim.y * transform.original.scaleY +
+                     dim.x * transform.original.scaleX;
 
       // We use transform.scaleX/Y instead of target.scaleX/Y
       // because the object may have a min scale and we'll loose the proportions

src/mixins/canvas_gestures.mixin.js

@@ -65,6 +65,7 @@
       this.renderAll();
       t.action = 'drag';
     },
+
     /**
      * Method that defines actions when an Event.js drag is detected.
      *
@@ -76,6 +77,7 @@
         e: e, self: self
       });
     },
+
     /**
      * Method that defines actions when an Event.js orientation event is detected.
      *
@@ -87,6 +89,7 @@
         e: e, self: self
       });
     },
+
     /**
      * Method that defines actions when an Event.js shake event is detected.
      *
@@ -98,6 +101,7 @@
         e: e, self: self
       });
     },
+
     /**
      * Method that defines actions when an Event.js longpress event is detected.
      *
@@ -109,6 +113,7 @@
         e: e, self: self
       });
     },
+
     /**
      * Scales an object by a factor
      * @param {Number} s The scale factor to apply to the current scale level
@@ -127,19 +132,16 @@
       target._scaling = true;
 
       var constraintPosition = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY),
-        vLine = target.type === 'line' && target.width === 0,
-        hLine = target.type === 'line' && target.height === 0,
-        strokeWidthX = hLine ? 0 : target.strokeWidth,
-        strokeWidthY = vLine ? 0 : target.strokeWidth;
+        dim = target._getNonTransformedDimensions();
 
-      this._setObjectScale(new fabric.Point((t.scaleX * s * (target.width + strokeWidthX)),
-        (t.scaleY * s * (target.height + strokeWidthY))),
+      this._setObjectScale(new fabric.Point(t.scaleX * s * dim.x, t.scaleY * s * dim.y),
         t, lockScalingX, lockScalingY, null, target.get('lockScalingFlip'));
 
       target.setPositionByOrigin(constraintPosition, t.originX, t.originY);
 
       this._fire('scaling', target, e);
     },
+
     /**
      * Rotates object by an angle
      * @param {Number} curAngle The angle of rotation in degrees

src/mixins/object_geometry.mixin.js

@@ -371,6 +371,11 @@
       this._setCornerCoords && this._setCornerCoords();
 
       return this;
+    },
+
+    _calcDimensionsTransformMatrix: function() {
+      // introduce skew matrix here later
+      return [this.scaleX, 0, 0, this.scaleY, 0, 0];
     }
   });
 })();

src/mixins/object_interactivity.mixin.js

@@ -106,9 +106,12 @@
       }
     },
 
-    _calculateCurrentDimensions: function(shouldTransform)  {
-      var vpt = this.getViewportTransform(),
-          strokeWidth = this.strokeWidth,
+    /*
+     * Calculate object dimensions from its properties
+     * @private
+     */
+    _getNonTransformedDimensions: function() {
+      var strokeWidth = this.strokeWidth,
           w = this.width,
           h = this.height,
           capped = this.strokeLineCap === 'round' || this.strokeLineCap === 'square',
@@ -130,9 +133,30 @@
       if (strokeH) {
         h += (h < 0 ? -strokeWidth : strokeWidth);
       }
+      return { x: w, y: h };
+    },
 
-      w = w * this.scaleX + 2 * this.padding;
-      h = h * this.scaleY + 2 * this.padding;
+    /*
+     * @private
+     */
+    _getTransformedDimensions: function(dimensions) {
+      if (!dimensions) {
+        dimensions = this._getNonTransformedDimensions();
+      }
+      var transformMatrix = this._calcDimensionsTransformMatrix();
+      return fabric.util.transformPoint(dimensions, transformMatrix, true);
+    },
+
+    /*
+     * private
+     */
+    _calculateCurrentDimensions: function(shouldTransform)  {
+      var vpt = this.getViewportTransform(),
+          dim = this._getTransformedDimensions(),
+          w = dim.x, h = dim.y;
+
+      w += 2 * this.padding;
+      h += 2 * this.padding;
 
       if (shouldTransform) {
         return fabric.util.transformPoint(new fabric.Point(w, h), vpt, true);

src/mixins/object_origin.mixin.js

@@ -15,18 +15,21 @@
       var cx = point.x,
           cy = point.y;
 
+      if (originX !== 'center' || originY !== 'center') {
+        dim = this._getTransformedDimensions();
+      }
       if (originX === 'left') {
-        cx = point.x + (this.getWidth() + this.strokeWidth * this.scaleX) / 2;
+        cx = point.x + dim.x / 2;
       }
       else if (originX === 'right') {
-        cx = point.x - (this.getWidth() + this.strokeWidth * this.scaleX) / 2;
+        cx = point.x - dim.x / 2;
       }
 
       if (originY === 'top') {
-        cy = point.y + (this.getHeight() + this.strokeWidth * this.scaleY) / 2;
+        cy = point.y + dim.y / 2;
       }
       else if (originY === 'bottom') {
-        cy = point.y - (this.getHeight() + this.strokeWidth * this.scaleY) / 2;
+        cy = point.y - dim.y / 2;
       }
 
       // Apply the reverse rotation to the point (it's already scaled properly)
@@ -44,18 +47,21 @@
       var x = center.x,
           y = center.y;
 
+      if (originX !== 'center' || originY !== 'center') {
+        dim = this._getTransformedDimensions();
+      }
       // Get the point coordinates
       if (originX === 'left') {
-        x = center.x - (this.getWidth() + this.strokeWidth * this.scaleX) / 2;
+        x = center.x - dim.x / 2;
       }
       else if (originX === 'right') {
-        x = center.x + (this.getWidth() + this.strokeWidth * this.scaleX) / 2;
+        x = center.x + dim.x / 2;
       }
       if (originY === 'top') {
-        y = center.y - (this.getHeight() + this.strokeWidth * this.scaleY) / 2;
+        y = center.y - dim.y / 2;
       }
       else if (originY === 'bottom') {
-        y = center.y + (this.getHeight() + this.strokeWidth * this.scaleY) / 2;
+        y = center.y + dim.y / 2;
       }
 
       // Apply the rotation to the point (it's already scaled properly)
@@ -103,21 +109,24 @@
           x, y;
 
       if (originX && originY) {
+        if (originX !== 'center' || originY !== 'center') {
+          dim = this._getTransformedDimensions();
+        }
         if (originX === 'left') {
-          x = center.x - (this.getWidth() + this.strokeWidth * this.scaleX) / 2;
+          x = center.x - dim.x / 2;
         }
         else if (originX === 'right') {
-          x = center.x + (this.getWidth() + this.strokeWidth * this.scaleX) / 2;
+          x = center.x + dim.x / 2;
         }
         else {
           x = center.x;
         }
 
         if (originY === 'top') {
-          y = center.y - (this.getHeight() + this.strokeWidth * this.scaleY) / 2;
+          y = center.y - dim.y / 2;
         }
         else if (originY === 'bottom') {
-          y = center.y + (this.getHeight() + this.strokeWidth * this.scaleY) / 2;
+          y = center.y + dim.y / 2;
         }
         else {
           y = center.y;