Account for bounding box in scaleToWidth/scaleToHeight. Fix #271. Ver…

…sion 0.9.12.

HEADER.js

@@ -1,6 +1,6 @@
 /*! Fabric.js Copyright 2008-2012, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: "0.9.11" };
+var fabric = fabric || { version: "0.9.12" };
 
 if (typeof exports != 'undefined') {
   exports.fabric = fabric;

dist/all.js

@@ -1,7 +1,7 @@
 /* build: `node build.js modules=ALL` */
 /*! Fabric.js Copyright 2008-2012, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: "0.9.11" };
+var fabric = fabric || { version: "0.9.12" };
 
 if (typeof exports != 'undefined') {
   exports.fabric = fabric;
@@ -8070,29 +8070,34 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
     scale: function(value) {
       this.scaleX = value;
       this.scaleY = value;
+      this.setCoords();
       return this;
     },
 
     /**
-     * Scales an object to a given width (scaling by x/y equally)
+     * Scales an object to a given width, with respect to bounding box (scaling by x/y equally)
      * @method scaleToWidth
      * @param value {Number} new width value
      * @return {fabric.Object} thisArg
      * @chainable
      */
     scaleToWidth: function(value) {
-      return this.scale(value / this.width);
+      // adjust to bounding rect factor so that rotated shapes would fit as well
+      var boundingRectFactor = this.getBoundingRectWidth() / this.getWidth();
+      return this.scale(value / this.width / boundingRectFactor);
     },
 
     /**
-     * Scales an object to a given height (scaling by x/y equally)
+     * Scales an object to a given height, with respect to bounding box (scaling by x/y equally)
      * @method scaleToHeight
      * @param value {Number} new height value
      * @return {fabric.Object} thisArg
      * @chainable
      */
     scaleToHeight: function(value) {
-      return this.scale(value / this.height);
+      // adjust to bounding rect factor so that rotated shapes would fit as well
+      var boundingRectFactor = this.getBoundingRectHeight() / this.getHeight();
+      return this.scale(value / this.height / boundingRectFactor);
     },
 
     /**
@@ -8221,6 +8226,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
      * @return {Number} width value
      */
     getBoundingRectWidth: function() {
+      this.oCoords || this.setCoords();
       var xCoords = [this.oCoords.tl.x, this.oCoords.tr.x, this.oCoords.br.x, this.oCoords.bl.x];
       var minX = fabric.util.array.min(xCoords);
       var maxX = fabric.util.array.max(xCoords);
@@ -8233,6 +8239,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
      * @return {Number} height value
      */
     getBoundingRectHeight: function() {
+      this.oCoords || this.setCoords();
       var yCoords = [this.oCoords.tl.y, this.oCoords.tr.y, this.oCoords.br.y, this.oCoords.bl.y];
       var minY = fabric.util.array.min(yCoords);
       var maxY = fabric.util.array.max(yCoords);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "fabric",
   "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
-  "version": "0.9.11",
+  "version": "0.9.12",
   "author": "Juriy Zaytsev <kangax@gmail.com>",
   "keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"],
   "repository": "git://github.com/kangax/fabric.js",

src/object.class.js

@@ -559,29 +559,34 @@
     scale: function(value) {
       this.scaleX = value;
       this.scaleY = value;
+      this.setCoords();
       return this;
     },
 
     /**
-     * Scales an object to a given width (scaling by x/y equally)
+     * Scales an object to a given width, with respect to bounding box (scaling by x/y equally)
      * @method scaleToWidth
      * @param value {Number} new width value
      * @return {fabric.Object} thisArg
      * @chainable
      */
     scaleToWidth: function(value) {
-      return this.scale(value / this.width);
+      // adjust to bounding rect factor so that rotated shapes would fit as well
+      var boundingRectFactor = this.getBoundingRectWidth() / this.getWidth();
+      return this.scale(value / this.width / boundingRectFactor);
     },
 
     /**
-     * Scales an object to a given height (scaling by x/y equally)
+     * Scales an object to a given height, with respect to bounding box (scaling by x/y equally)
      * @method scaleToHeight
      * @param value {Number} new height value
      * @return {fabric.Object} thisArg
      * @chainable
      */
     scaleToHeight: function(value) {
-      return this.scale(value / this.height);
+      // adjust to bounding rect factor so that rotated shapes would fit as well
+      var boundingRectFactor = this.getBoundingRectHeight() / this.getHeight();
+      return this.scale(value / this.height / boundingRectFactor);
     },
 
     /**
@@ -710,6 +715,7 @@
      * @return {Number} width value
      */
     getBoundingRectWidth: function() {
+      this.oCoords || this.setCoords();
       var xCoords = [this.oCoords.tl.x, this.oCoords.tr.x, this.oCoords.br.x, this.oCoords.bl.x];
       var minX = fabric.util.array.min(xCoords);
       var maxX = fabric.util.array.max(xCoords);
@@ -722,6 +728,7 @@
      * @return {Number} height value
      */
     getBoundingRectHeight: function() {
+      this.oCoords || this.setCoords();
       var yCoords = [this.oCoords.tl.y, this.oCoords.tr.y, this.oCoords.br.y, this.oCoords.bl.y];
       var minY = fabric.util.array.min(yCoords);
       var maxY = fabric.util.array.max(yCoords);

test/unit/object.js

@@ -296,6 +296,20 @@
     equal(cObj.get('scaleY'), 100/560);
   });
 
+  test('scaleToWidth on rotated object', function() {
+    var obj = new fabric.Object({ height: 100, width: 100 });
+    obj.rotate(45);
+    obj.scaleToWidth(200);
+    equal(Math.round(obj.getBoundingRectWidth()), 200);
+  });
+
+  test('scaleToHeight on rotated object', function() {
+    var obj = new fabric.Object({ height: 100, width: 100 });
+    obj.rotate(45);
+    obj.scaleToHeight(300);
+    equal(Math.round(obj.getBoundingRectHeight()), 300);
+  });
+
   test('setOpacity', function() {
     var cObj = new fabric.Object();
     ok(typeof cObj.setOpacity == 'function');