billion transformer fixes

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v1.7.6
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Tue Feb 06 2018
+ * Date: Fri Feb 09 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -18283,6 +18283,8 @@
   var TRANSFORM_CHANGE_STR = [
     'xChange.resizer',
     'yChange.resizer',
+    'widthChange.resizer',
+    'heightChange.resizer',
     'scaleXChange.resizer',
     'scaleYChange.resizer',
     'skewXChange.resizer',
@@ -18317,6 +18319,8 @@
       Konva.Group.call(this, config);
       this.className = 'Transformer';
       this._createElements();
+
+      // bindings
       this.handleMouseMove = this.handleMouseMove.bind(this);
       this.handleMouseUp = this.handleMouseUp.bind(this);
       this._update = this._update.bind(this);
@@ -18326,25 +18330,62 @@
 
       if (!warningShowed) {
         Konva.Util.warn(
-          'Konva.Transformer is currently experimental and may have many bugs. Please report any bugs to GitHub repo.'
+          'Konva.Transformer is currently experimental and may have bugs. Please report any issues to GitHub repo.'
         );
         warningShowed = true;
       }
     },
 
     attachTo: function(node) {
-      if (this._el) {
+      if (this.node()) {
         this.detach();
       }
-      this._el = node;
+      this.setNode(node);
+      node.on('dragmove.resizer', this._update);
+      node.on(TRANSFORM_CHANGE_STR, this._update);
+
       this._update();
-      this._el.on('dragmove.resizer', this._update);
-      this._el.on(TRANSFORM_CHANGE_STR, this._update);
     },
 
     detach: function() {
-      this._el.off('.resizer');
+      this.getNode().off('.resizer');
-      this._el = null;
+    },
+
+    _getNodeRect: function() {
+      var node = this.getNode();
+      var rect = node.getClientRect({ skipTransform: true });
+      var rotation = Konva.getAngle(node.rotation());
+
+      var dx = rect.x * node.scaleX() - node.offsetX();
+      var dy = rect.y * node.scaleY() - node.offsetX();
+
+      return {
+        x: node.x() + dx * Math.cos(rotation) + dy * Math.sin(-rotation),
+        y: node.y() + dy * Math.cos(rotation) + dx * Math.sin(rotation),
+        width: rect.width * node.scaleX(),
+        height: rect.height * node.scaleY(),
+        rotation: node.rotation()
+      };
+    },
+
+    getX: function() {
+      return this._getNodeRect().x;
+    },
+
+    getY: function() {
+      return this._getNodeRect().y;
+    },
+
+    getRotation: function() {
+      return this._getNodeRect().rotation;
+    },
+
+    getWidth: function() {
+      return this._getNodeRect().width;
+    },
+
+    getHeight: function() {
+      return this._getNodeRect().height;
     },
 
     _createElements: function() {
@@ -18375,7 +18416,6 @@
       var self = this;
       anchor.on('mousedown touchstart', function(e) {
         self.handleResizerMouseDown(e);
-        console.log('down');
       });
 
       // add hover styling
@@ -18424,8 +18464,10 @@
     handleResizerMouseDown: function(e) {
       this.movingResizer = e.target.name();
 
-      var width = this._el.width() * this._el.scaleX();
+      // var node = this.getNode();
-      var height = this._el.height() * this._el.scaleY();
+      var attrs = this._getNodeRect();
+      var width = attrs.width;
+      var height = attrs.height;
       var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
       this.sin = height / hypotenuse;
       this.cos = width / hypotenuse;
@@ -18521,18 +18563,19 @@
         this.findOne('.bottom-right').x(x);
         this.findOne('.bottom-right').y(y);
       } else if (this.movingResizer === 'rotater') {
-        x = resizerNode.x() - this._el.width() * this._el.scaleX() / 2;
+        var attrs = this._getNodeRect();
-        y = -resizerNode.y() + this._el.height() * this._el.scaleY() / 2;
+        x = resizerNode.x() - attrs.width / 2;
+        y = -resizerNode.y() + attrs.height / 2;
 
         var dAlpha = Math.atan2(-y, x) + Math.PI / 2;
-        var attrs = this._getAttrs();
+        // var attrs = this._getAttrs();
 
         var rot = Konva.getAngle(this.rotation());
 
         var newRotation =
           Konva.Util._radToDeg(rot) + Konva.Util._radToDeg(dAlpha);
 
-        var alpha = Konva.getAngle(this._el.rotation());
+        var alpha = Konva.getAngle(this.getNode().rotation());
         var newAlpha = Konva.Util._degToRad(newRotation);
 
         var snaps = this.rotationSnaps();
@@ -18549,7 +18592,7 @@
           }
         }
 
-        this._setElementAttrs(
+        this._fitNodeInto(
           Object.assign(attrs, {
             rotation: Konva.angleDeg
               ? newRotation
@@ -18561,7 +18604,9 @@
             y:
               attrs.y +
               attrs.height / 2 * (Math.cos(alpha) - Math.cos(newAlpha)) +
-              attrs.width / 2 * (Math.sin(alpha) - Math.sin(newAlpha))
+              attrs.width / 2 * (Math.sin(alpha) - Math.sin(newAlpha)),
+            width: attrs.width,
+            height: attrs.height
           })
         );
       } else {
@@ -18587,9 +18632,9 @@
       var height =
         this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
 
-      this._setElementAttrs({
+      this._fitNodeInto({
-        absX: this._el._centroid ? x + width / 2 : x,
+        x: x + this.offsetX(),
-        absY: this._el._centroid ? y + height / 2 : y,
+        y: y + this.offsetY(),
         width: width,
         height: height
       });
@@ -18602,7 +18647,7 @@
     _removeEvents: function() {
       if (this._transforming) {
         this.fire('transformend');
-        this._el.fire('transformend');
+        this.getNode().fire('transformend');
         window.removeEventListener('mousemove', this.handleMouseMove);
         window.removeEventListener('touchmove', this.handleMouseMove);
         window.removeEventListener('mouseup', this.handleMouseUp);
@@ -18611,67 +18656,42 @@
       this._transforming = false;
     },
 
-    _getAttrs: function() {
+    _fitNodeInto: function(attrs) {
-      if (this._el._centroid) {
+      this._settings = true;
-        var topLeftResizer = this.findOne('.top-left');
+      var node = this.getNode();
-        var absPos = topLeftResizer.getAbsolutePosition();
-
-        return {
-          x: absPos.x,
-          y: absPos.y,
-          width: this._el.width() * this._el.scaleX(),
-          height: this._el.height() * this._el.scaleY()
-        };
-      }
-      return {
-        x: this._el.x(),
-        y: this._el.y(),
-        width: this._el.width() * this._el.scaleX(),
-        height: this._el.height() * this._el.scaleY()
-      };
-    },
-
-    _setElementAttrs: function(attrs) {
       if (attrs.rotation !== undefined) {
-        this._el.setAttrs({
+        this.getNode().rotation(attrs.rotation);
-          rotation: attrs.rotation,
-          x: attrs.x,
-          y: attrs.y
-        });
-      } else {
-        var scaleX = attrs.width / this._el.width();
-        var scaleY = attrs.height / this._el.height();
-
-        this._el.setAttrs({
-          scaleX: scaleX,
-          scaleY: scaleY
-        });
-
-        this._el.setAbsolutePosition({
-          x: attrs.absX,
-          y: attrs.absY
-        });
       }
+      var pure = node.getClientRect({ skipTransform: true });
+      var scaleX = attrs.width / pure.width;
+      var scaleY = attrs.height / pure.height;
+
+      var rotation = Konva.getAngle(node.getRotation());
+      // debugger;
+      var dx = pure.x * scaleX;
+      var dy = pure.y * scaleY;
+      this.getNode().setAttrs({
+        scaleX: scaleX,
+        scaleY: scaleY,
+        x: attrs.x - (dx * Math.cos(rotation) + dy * Math.sin(-rotation)),
+        y: attrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation))
+      });
+      this._settings = false;
+
       this.fire('transform');
-      this._el.fire('transform');
+      this.getNode().fire('transform');
       this._update();
       this.getLayer().batchDraw();
     },
     _update: function() {
-      var x = this._el.x();
+      var attrs = this._getNodeRect();
-      var y = this._el.y();
+      var x = attrs.x;
-      var width = this._el.width() * this._el.scaleX();
+      var y = attrs.y;
-      var height = this._el.height() * this._el.scaleY();
+      var width = attrs.width;
+      var height = attrs.height;
       this.x(x);
       this.y(y);
-      this.rotation(this._el.rotation());
+      this.rotation(attrs.rotation);
-
-      if (this._el._centroid) {
-        this.offset({
-          x: width / 2,
-          y: height / 2
-        });
-      }
 
       var enabledResizers = this.enabledResizers();
       var resizeEnabled = this.resizeEnabled();
@@ -18731,7 +18751,7 @@
     },
     destroy: function() {
       Konva.Group.prototype.destroy.call(this);
-      this._el.off('.resizer');
+      this.getNode().off('.resizer');
       this._removeEvents();
     }
   };
@@ -18771,6 +18791,7 @@
   Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);
   Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateHandlerOffset', 50);
   Konva.Factory.addGetterSetter(Konva.Transformer, 'lineEnabled', true);
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'node');
 
   Konva.Collection.mapMethods(Konva.Transformer);
 })(Konva);

src/shapes/Transformer.js

@@ -9,6 +9,8 @@
   var TRANSFORM_CHANGE_STR = [
     'xChange.resizer',
     'yChange.resizer',
+    'widthChange.resizer',
+    'heightChange.resizer',
     'scaleXChange.resizer',
     'scaleYChange.resizer',
     'skewXChange.resizer',
@@ -43,6 +45,8 @@
       Konva.Group.call(this, config);
       this.className = 'Transformer';
       this._createElements();
+
+      // bindings
       this.handleMouseMove = this.handleMouseMove.bind(this);
       this.handleMouseUp = this.handleMouseUp.bind(this);
       this._update = this._update.bind(this);
@@ -52,25 +56,62 @@
 
       if (!warningShowed) {
         Konva.Util.warn(
-          'Konva.Transformer is currently experimental and may have many bugs. Please report any bugs to GitHub repo.'
+          'Konva.Transformer is currently experimental and may have bugs. Please report any issues to GitHub repo.'
         );
         warningShowed = true;
       }
     },
 
     attachTo: function(node) {
-      if (this._el) {
+      if (this.node()) {
         this.detach();
       }
-      this._el = node;
+      this.setNode(node);
+      node.on('dragmove.resizer', this._update);
+      node.on(TRANSFORM_CHANGE_STR, this._update);
+
       this._update();
-      this._el.on('dragmove.resizer', this._update);
-      this._el.on(TRANSFORM_CHANGE_STR, this._update);
     },
 
     detach: function() {
-      this._el.off('.resizer');
+      this.getNode().off('.resizer');
-      this._el = null;
+    },
+
+    _getNodeRect: function() {
+      var node = this.getNode();
+      var rect = node.getClientRect({ skipTransform: true });
+      var rotation = Konva.getAngle(node.rotation());
+
+      var dx = rect.x * node.scaleX() - node.offsetX();
+      var dy = rect.y * node.scaleY() - node.offsetX();
+
+      return {
+        x: node.x() + dx * Math.cos(rotation) + dy * Math.sin(-rotation),
+        y: node.y() + dy * Math.cos(rotation) + dx * Math.sin(rotation),
+        width: rect.width * node.scaleX(),
+        height: rect.height * node.scaleY(),
+        rotation: node.rotation()
+      };
+    },
+
+    getX: function() {
+      return this._getNodeRect().x;
+    },
+
+    getY: function() {
+      return this._getNodeRect().y;
+    },
+
+    getRotation: function() {
+      return this._getNodeRect().rotation;
+    },
+
+    getWidth: function() {
+      return this._getNodeRect().width;
+    },
+
+    getHeight: function() {
+      return this._getNodeRect().height;
     },
 
     _createElements: function() {
@@ -101,7 +142,6 @@
       var self = this;
       anchor.on('mousedown touchstart', function(e) {
         self.handleResizerMouseDown(e);
-        console.log('down');
       });
 
       // add hover styling
@@ -150,8 +190,10 @@
     handleResizerMouseDown: function(e) {
       this.movingResizer = e.target.name();
 
-      var width = this._el.width() * this._el.scaleX();
+      // var node = this.getNode();
-      var height = this._el.height() * this._el.scaleY();
+      var attrs = this._getNodeRect();
+      var width = attrs.width;
+      var height = attrs.height;
       var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
       this.sin = height / hypotenuse;
       this.cos = width / hypotenuse;
@@ -247,18 +289,19 @@
         this.findOne('.bottom-right').x(x);
         this.findOne('.bottom-right').y(y);
       } else if (this.movingResizer === 'rotater') {
-        x = resizerNode.x() - this._el.width() * this._el.scaleX() / 2;
+        var attrs = this._getNodeRect();
-        y = -resizerNode.y() + this._el.height() * this._el.scaleY() / 2;
+        x = resizerNode.x() - attrs.width / 2;
+        y = -resizerNode.y() + attrs.height / 2;
 
         var dAlpha = Math.atan2(-y, x) + Math.PI / 2;
-        var attrs = this._getAttrs();
+        // var attrs = this._getAttrs();
 
         var rot = Konva.getAngle(this.rotation());
 
         var newRotation =
           Konva.Util._radToDeg(rot) + Konva.Util._radToDeg(dAlpha);
 
-        var alpha = Konva.getAngle(this._el.rotation());
+        var alpha = Konva.getAngle(this.getNode().rotation());
         var newAlpha = Konva.Util._degToRad(newRotation);
 
         var snaps = this.rotationSnaps();
@@ -275,7 +318,7 @@
           }
         }
 
-        this._setElementAttrs(
+        this._fitNodeInto(
           Object.assign(attrs, {
             rotation: Konva.angleDeg
               ? newRotation
@@ -287,7 +330,9 @@
             y:
               attrs.y +
               attrs.height / 2 * (Math.cos(alpha) - Math.cos(newAlpha)) +
-              attrs.width / 2 * (Math.sin(alpha) - Math.sin(newAlpha))
+              attrs.width / 2 * (Math.sin(alpha) - Math.sin(newAlpha)),
+            width: attrs.width,
+            height: attrs.height
           })
         );
       } else {
@@ -313,9 +358,9 @@
       var height =
         this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
 
-      this._setElementAttrs({
+      this._fitNodeInto({
-        absX: this._el._centroid ? x + width / 2 : x,
+        x: x + this.offsetX(),
-        absY: this._el._centroid ? y + height / 2 : y,
+        y: y + this.offsetY(),
         width: width,
         height: height
       });
@@ -328,7 +373,7 @@
     _removeEvents: function() {
       if (this._transforming) {
         this.fire('transformend');
-        this._el.fire('transformend');
+        this.getNode().fire('transformend');
         window.removeEventListener('mousemove', this.handleMouseMove);
         window.removeEventListener('touchmove', this.handleMouseMove);
         window.removeEventListener('mouseup', this.handleMouseUp);
@@ -337,67 +382,42 @@
       this._transforming = false;
     },
 
-    _getAttrs: function() {
+    _fitNodeInto: function(attrs) {
-      if (this._el._centroid) {
+      this._settings = true;
-        var topLeftResizer = this.findOne('.top-left');
+      var node = this.getNode();
-        var absPos = topLeftResizer.getAbsolutePosition();
-
-        return {
-          x: absPos.x,
-          y: absPos.y,
-          width: this._el.width() * this._el.scaleX(),
-          height: this._el.height() * this._el.scaleY()
-        };
-      }
-      return {
-        x: this._el.x(),
-        y: this._el.y(),
-        width: this._el.width() * this._el.scaleX(),
-        height: this._el.height() * this._el.scaleY()
-      };
-    },
-
-    _setElementAttrs: function(attrs) {
       if (attrs.rotation !== undefined) {
-        this._el.setAttrs({
+        this.getNode().rotation(attrs.rotation);
-          rotation: attrs.rotation,
-          x: attrs.x,
-          y: attrs.y
-        });
-      } else {
-        var scaleX = attrs.width / this._el.width();
-        var scaleY = attrs.height / this._el.height();
-
-        this._el.setAttrs({
-          scaleX: scaleX,
-          scaleY: scaleY
-        });
-
-        this._el.setAbsolutePosition({
-          x: attrs.absX,
-          y: attrs.absY
-        });
       }
+      var pure = node.getClientRect({ skipTransform: true });
+      var scaleX = attrs.width / pure.width;
+      var scaleY = attrs.height / pure.height;
+
+      var rotation = Konva.getAngle(node.getRotation());
+      // debugger;
+      var dx = pure.x * scaleX;
+      var dy = pure.y * scaleY;
+      this.getNode().setAttrs({
+        scaleX: scaleX,
+        scaleY: scaleY,
+        x: attrs.x - (dx * Math.cos(rotation) + dy * Math.sin(-rotation)),
+        y: attrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation))
+      });
+      this._settings = false;
+
       this.fire('transform');
-      this._el.fire('transform');
+      this.getNode().fire('transform');
       this._update();
       this.getLayer().batchDraw();
     },
     _update: function() {
-      var x = this._el.x();
+      var attrs = this._getNodeRect();
-      var y = this._el.y();
+      var x = attrs.x;
-      var width = this._el.width() * this._el.scaleX();
+      var y = attrs.y;
-      var height = this._el.height() * this._el.scaleY();
+      var width = attrs.width;
+      var height = attrs.height;
       this.x(x);
       this.y(y);
-      this.rotation(this._el.rotation());
+      this.rotation(attrs.rotation);
-
-      if (this._el._centroid) {
-        this.offset({
-          x: width / 2,
-          y: height / 2
-        });
-      }
 
       var enabledResizers = this.enabledResizers();
       var resizeEnabled = this.resizeEnabled();
@@ -457,7 +477,7 @@
     },
     destroy: function() {
       Konva.Group.prototype.destroy.call(this);
-      this._el.off('.resizer');
+      this.getNode().off('.resizer');
       this._removeEvents();
     }
   };
@@ -497,6 +517,7 @@
   Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);
   Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateHandlerOffset', 50);
   Konva.Factory.addGetterSetter(Konva.Transformer, 'lineEnabled', true);
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'node');
 
   Konva.Collection.mapMethods(Konva.Transformer);
 })(Konva);

test/runner.html

@@ -1,187 +1,195 @@
 <!DOCTYPE html>
-  <head>
-    <meta charset="utf-8">
-    <title>KonvaJS Mocha Tests</title>
-    <link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
-    <style>
-      #mocha {
-        margin-top: 20px;
-      }
-      #mocha .test {
-        overflow: auto;
-      }
-      h1 {
-        font-family: Calibri;
-        margin-left: 10px;
-      }
-      h2.konva-title {
-        font-family: Calibri;
-        font-size: 16px;
-        color: #555;
-        border-top: 2px solid #999;
-        padding-left: 10px;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>KonvaJS Test</h1>
-    <div id="mocha"></div>
-    <div id="konva-container"></div>
 
-    <script src="../node_modules/mocha/mocha.js"></script>
+<head>
-    <script src="../node_modules/chai/chai.js"></script>
+  <meta charset="utf-8">
-    <script src="lib/stats.js"></script>
+  <title>KonvaJS Mocha Tests</title>
+  <link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
+  <style>
+    #mocha {
+      margin-top: 20px;
+    }
 
-    <!--<script src="lib/blanket.js"></script>-->
+    #mocha .test {
+      overflow: auto;
+    }
 
-    <!--CORE-->
+    h1 {
-    <script src="../src/Global.js" data-cover></script>
+      font-family: Calibri;
-    <script src="../src/Util.js" data-cover></script>
+      margin-left: 10px;
-    <script src="../src/Canvas.js" data-cover></script>
+    }
-    <script src="../src/Context.js" data-cover></script>
-    <script src="../src/Factory.js" data-cover></script>
-    <script src="../src/Node.js" data-cover></script>
 
-    <!--FILTERS-->
+    h2.konva-title {
-    <script src="../src/filters/Grayscale.js" data-cover></script>
+      font-family: Calibri;
-    <script src="../src/filters/Brighten.js" data-cover></script>
+      font-size: 16px;
-    <script src="../src/filters/Invert.js" data-cover></script>
+      color: #555;
-    <script src="../src/filters/Blur.js" data-cover></script>
+      border-top: 2px solid #999;
-    <script src="../src/filters/Mask.js" data-cover></script>
+      padding-left: 10px;
-    <script src="../src/filters/RGB.js" data-cover></script>
+    }
-    <script src="../src/filters/RGBA.js" data-cover></script>
+  </style>
-    <script src="../src/filters/HSV.js" data-cover></script>
+</head>
-    <script src="../src/filters/HSL.js" data-cover></script>
-    <script src="../src/filters/Emboss.js" data-cover></script>
-    <script src="../src/filters/Enhance.js" data-cover></script>
-    <script src="../src/filters/Posterize.js" data-cover></script>
-    <script src="../src/filters/Noise.js" data-cover></script>
-    <script src="../src/filters/Pixelate.js" data-cover></script>
-    <script src="../src/filters/Threshold.js" data-cover></script>
-    <script src="../src/filters/Sepia.js" data-cover></script>
-    <script src="../src/filters/Contrast.js" data-cover></script>
-    <script src="../src/filters/Solarize.js" data-cover></script>
-    <script src="../src/filters/Kaleidoscope.js" data-cover></script>
 
-    <!--MAIN ELEMENTS-->
+<body>
+  <h1>KonvaJS Test</h1>
+  <div id="mocha"></div>
+  <div id="konva-container"></div>
 
-    <script src="../src/Container.js" data-cover></script>
+  <script src="../node_modules/mocha/mocha.js"></script>
-    <script src="../src/Shape.js" data-cover></script>
+  <script src="../node_modules/chai/chai.js"></script>
-    <script src="../src/Stage.js" data-cover></script>
+  <script src="lib/stats.js"></script>
-    <script src="../src/BaseLayer.js" data-cover></script>
-    <script src="../src/Layer.js" data-cover></script>
-    <script src="../src/FastLayer.js" data-cover></script>
-    <script src="../src/Group.js" data-cover></script>
-    <script src="../src/Animation.js" data-cover></script>
-    <script src="../src/Tween.js" data-cover></script>
-    <script src="../src/DragAndDrop.js" data-cover></script>
 
-    <!--SHAPES-->
+  <!--<script src="lib/blanket.js"></script>-->
-    <script src="../src/shapes/Rect.js" data-cover></script>
-    <script src="../src/shapes/Circle.js" data-cover></script>
-    <script src="../src/shapes/Ellipse.js" data-cover></script>
-    <script src="../src/shapes/Ring.js" data-cover></script>
-    <script src="../src/shapes/Wedge.js" data-cover></script>
-    <script src="../src/shapes/Arc.js" data-cover></script>
-    <script src="../src/shapes/Image.js" data-cover></script>
-    <script src="../src/shapes/Text.js" data-cover></script>
-    <script src="../src/shapes/Line.js" data-cover></script>
-    <script src="../src/shapes/Sprite.js" data-cover></script>
-    <script src="../src/shapes/Path.js" data-cover></script>
-    <script src="../src/shapes/TextPath.js" data-cover></script>
-    <script src="../src/shapes/RegularPolygon.js" data-cover></script>
-    <script src="../src/shapes/Star.js" data-cover></script>
-    <script src="../src/shapes/Label.js" data-cover></script>
-    <script src="../src/shapes/Arrow.js" data-cover></script>
 
-    <!--<script src="../dist/konva-dev.js"></script>-->
+  <!--CORE-->
+  <script src="../src/Global.js" data-cover></script>
+  <script src="../src/Util.js" data-cover></script>
+  <script src="../src/Canvas.js" data-cover></script>
+  <script src="../src/Context.js" data-cover></script>
+  <script src="../src/Factory.js" data-cover></script>
+  <script src="../src/Node.js" data-cover></script>
 
-    <script src="lib/imagediff.js"></script>
+  <!--FILTERS-->
-    <script src="runner.js"></script>
+  <script src="../src/filters/Grayscale.js" data-cover></script>
+  <script src="../src/filters/Brighten.js" data-cover></script>
+  <script src="../src/filters/Invert.js" data-cover></script>
+  <script src="../src/filters/Blur.js" data-cover></script>
+  <script src="../src/filters/Mask.js" data-cover></script>
+  <script src="../src/filters/RGB.js" data-cover></script>
+  <script src="../src/filters/RGBA.js" data-cover></script>
+  <script src="../src/filters/HSV.js" data-cover></script>
+  <script src="../src/filters/HSL.js" data-cover></script>
+  <script src="../src/filters/Emboss.js" data-cover></script>
+  <script src="../src/filters/Enhance.js" data-cover></script>
+  <script src="../src/filters/Posterize.js" data-cover></script>
+  <script src="../src/filters/Noise.js" data-cover></script>
+  <script src="../src/filters/Pixelate.js" data-cover></script>
+  <script src="../src/filters/Threshold.js" data-cover></script>
+  <script src="../src/filters/Sepia.js" data-cover></script>
+  <script src="../src/filters/Contrast.js" data-cover></script>
+  <script src="../src/filters/Solarize.js" data-cover></script>
+  <script src="../src/filters/Kaleidoscope.js" data-cover></script>
 
-    <!-- assets -->
+  <!--MAIN ELEMENTS-->
-    <script src="assets/tiger.js"></script>
-    <script src="assets/worldMap.js"></script>
 
-    <!--=============== unit tests ================-->
+  <script src="../src/Container.js" data-cover></script>
+  <script src="../src/Shape.js" data-cover></script>
+  <script src="../src/Stage.js" data-cover></script>
+  <script src="../src/BaseLayer.js" data-cover></script>
+  <script src="../src/Layer.js" data-cover></script>
+  <script src="../src/FastLayer.js" data-cover></script>
+  <script src="../src/Group.js" data-cover></script>
+  <script src="../src/Animation.js" data-cover></script>
+  <script src="../src/Tween.js" data-cover></script>
+  <script src="../src/DragAndDrop.js" data-cover></script>
 
-    <!-- core -->
+  <!--SHAPES-->
-    <script src="unit/Global-test.js"></script>
+  <script src="../src/shapes/Rect.js" data-cover></script>
-    <script src="unit/Util-test.js"></script>
+  <script src="../src/shapes/Circle.js" data-cover></script>
-    <script src="unit/Canvas-test.js"></script>
+  <script src="../src/shapes/Ellipse.js" data-cover></script>
-    <script src="unit/Context-test.js"></script>
+  <script src="../src/shapes/Ring.js" data-cover></script>
-    <script src="unit/Node-test.js"></script>
+  <script src="../src/shapes/Wedge.js" data-cover></script>
-    <script src="unit/Node-cache-test.js"></script>
+  <script src="../src/shapes/Arc.js" data-cover></script>
-    <script src="unit/Container-test.js"></script>
+  <script src="../src/shapes/Image.js" data-cover></script>
-    <script src="unit/Stage-test.js"></script>
+  <script src="../src/shapes/Text.js" data-cover></script>
-    <script src="unit/BaseLayer-test.js"></script>
+  <script src="../src/shapes/Line.js" data-cover></script>
-    <script src="unit/Layer-test.js"></script>
+  <script src="../src/shapes/Sprite.js" data-cover></script>
-    <script src="unit/Group-test.js"></script>
+  <script src="../src/shapes/Path.js" data-cover></script>
-    <script src="unit/FastLayer-test.js"></script>
+  <script src="../src/shapes/TextPath.js" data-cover></script>
-    <script src="unit/Shape-test.js"></script>
+  <script src="../src/shapes/RegularPolygon.js" data-cover></script>
-    <script src="unit/Collection-test.js"></script>
+  <script src="../src/shapes/Star.js" data-cover></script>
+  <script src="../src/shapes/Label.js" data-cover></script>
+  <script src="../src/shapes/Arrow.js" data-cover></script>
+  <script src="../src/shapes/Transformer.js" data-cover></script>
 
-    <!-- shapes -->
+  <!--<script src="../dist/konva-dev.js"></script>-->
-    <script src="unit/shapes/Rect-test.js"></script>
-    <script src="unit/shapes/Circle-test.js"></script>
-    <script src="unit/shapes/Image-test.js"></script>
-    <script src="unit/shapes/Line-test.js"></script>
-    <script src="unit/shapes/Text-test.js"></script>
-    <script src="unit/shapes/Blob-test.js"></script>
-    <script src="unit/shapes/Ellipse-test.js"></script>
-    <script src="unit/shapes/Polygon-test.js"></script>
-    <script src="unit/shapes/Spline-test.js"></script>
-    <script src="unit/shapes/Sprite-test.js"></script>
-    <script src="unit/shapes/Wedge-test.js"></script>
-    <script src="unit/shapes/Arc-test.js"></script>
-    <script src="unit/shapes/Ring-test.js"></script>
-    <script src="unit/shapes/Label-test.js"></script>
-    <script src="unit/shapes/Star-test.js"></script>
-    <script src="unit/shapes/RegularPolygon-test.js"></script>
-    <script src="unit/shapes/Path-test.js"></script>
-    <script src="unit/shapes/TextPath-test.js"></script>
-    <script src="unit/shapes/Arrow-test.js"></script>
 
-    <!-- extensions -->
+  <script src="lib/imagediff.js"></script>
-    <script src="unit/Animation-test.js"></script>
+  <script src="runner.js"></script>
-    <script src="unit/DragAndDrop-test.js"></script>
+
-    <script src="unit/Tween-test.js"></script>
+  <!-- assets -->
+  <script src="assets/tiger.js"></script>
+  <script src="assets/worldMap.js"></script>
+
+  <!--=============== unit tests ================-->
+
+  <!-- core -->
+  <script src="unit/Global-test.js"></script>
+  <script src="unit/Util-test.js"></script>
+  <script src="unit/Canvas-test.js"></script>
+  <script src="unit/Context-test.js"></script>
+  <script src="unit/Node-test.js"></script>
+  <script src="unit/Node-cache-test.js"></script>
+  <script src="unit/Container-test.js"></script>
+  <script src="unit/Stage-test.js"></script>
+  <script src="unit/BaseLayer-test.js"></script>
+  <script src="unit/Layer-test.js"></script>
+  <script src="unit/Group-test.js"></script>
+  <script src="unit/FastLayer-test.js"></script>
+  <script src="unit/Shape-test.js"></script>
+  <script src="unit/Collection-test.js"></script>
+
+  <!-- shapes -->
+  <script src="unit/shapes/Rect-test.js"></script>
+  <script src="unit/shapes/Circle-test.js"></script>
+  <script src="unit/shapes/Image-test.js"></script>
+  <script src="unit/shapes/Line-test.js"></script>
+  <script src="unit/shapes/Text-test.js"></script>
+  <script src="unit/shapes/Blob-test.js"></script>
+  <script src="unit/shapes/Ellipse-test.js"></script>
+  <script src="unit/shapes/Polygon-test.js"></script>
+  <script src="unit/shapes/Spline-test.js"></script>
+  <script src="unit/shapes/Sprite-test.js"></script>
+  <script src="unit/shapes/Wedge-test.js"></script>
+  <script src="unit/shapes/Arc-test.js"></script>
+  <script src="unit/shapes/Ring-test.js"></script>
+  <script src="unit/shapes/Label-test.js"></script>
+  <script src="unit/shapes/Star-test.js"></script>
+  <script src="unit/shapes/RegularPolygon-test.js"></script>
+  <script src="unit/shapes/Path-test.js"></script>
+  <script src="unit/shapes/TextPath-test.js"></script>
+  <script src="unit/shapes/Arrow-test.js"></script>
+  <script src="unit/shapes/Transformer-test.js"></script>
+
+  <!-- extensions -->
+  <script src="unit/Animation-test.js"></script>
+  <script src="unit/DragAndDrop-test.js"></script>
+  <script src="unit/Tween-test.js"></script>
 
 
-    <!-- filters -->
+  <!-- filters -->
-    <script src="unit/filters/Filter-test.js"></script>
+  <script src="unit/filters/Filter-test.js"></script>
-    <script src="unit/filters/Blur-test.js"></script>
+  <script src="unit/filters/Blur-test.js"></script>
-    <script src="unit/filters/Brighten-test.js"></script>
+  <script src="unit/filters/Brighten-test.js"></script>
-    <script src="unit/filters/RGB-test.js"></script>
+  <script src="unit/filters/RGB-test.js"></script>
-    <script src="unit/filters/RGBA-test.js"></script>
+  <script src="unit/filters/RGBA-test.js"></script>
-    <script src="unit/filters/HSV-test.js"></script>
+  <script src="unit/filters/HSV-test.js"></script>
-    <script src="unit/filters/HSL-test.js"></script>
+  <script src="unit/filters/HSL-test.js"></script>
-    <script src="unit/filters/Invert-test.js"></script>
+  <script src="unit/filters/Invert-test.js"></script>
-    <script src="unit/filters/Mask-test.js"></script>
+  <script src="unit/filters/Mask-test.js"></script>
-    <script src="unit/filters/Grayscale-test.js"></script>
+  <script src="unit/filters/Grayscale-test.js"></script>
-    <script src="unit/filters/Enhance-test.js"></script>
+  <script src="unit/filters/Enhance-test.js"></script>
-    <script src="unit/filters/Pixelate-test.js"></script>
+  <script src="unit/filters/Pixelate-test.js"></script>
-    <script src="unit/filters/Noise-test.js"></script>
+  <script src="unit/filters/Noise-test.js"></script>
-    <script src="unit/filters/Threshold-test.js"></script>
+  <script src="unit/filters/Threshold-test.js"></script>
-    <script src="unit/filters/Posterize-test.js"></script>
+  <script src="unit/filters/Posterize-test.js"></script>
-    <script src="unit/filters/Sepia-test.js"></script>
+  <script src="unit/filters/Sepia-test.js"></script>
-    <script src="unit/filters/Contrast-test.js"></script>
+  <script src="unit/filters/Contrast-test.js"></script>
-    <script src="unit/filters/Emboss-test.js"></script>
+  <script src="unit/filters/Emboss-test.js"></script>
-    <script src="unit/filters/Solarize-test.js"></script>
+  <script src="unit/filters/Solarize-test.js"></script>
-    <script src="unit/filters/Kaleidoscope-test.js"></script>
+  <script src="unit/filters/Kaleidoscope-test.js"></script>
 
-    <!--=============== functional tests ================-->
+  <!--=============== functional tests ================-->
 
-    <script src="functional/MouseEvents-test.js"></script>
+  <script src="functional/MouseEvents-test.js"></script>
-    <script src="functional/TouchEvents-test.js"></script>
+  <script src="functional/TouchEvents-test.js"></script>
-    <script src="functional/DragAndDropEvents-test.js"></script>
+  <script src="functional/DragAndDropEvents-test.js"></script>
 
-    <!--=============== manual tests ================-->
+  <!--=============== manual tests ================-->
-    <script src="manual/manual-test.js"></script>
+  <script src="manual/manual-test.js"></script>
+
+  <script>
+    if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
+    else { mocha.run(); }
+  </script>
+</body>
 
-    <script>
-      if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
-      else { mocha.run(); }
-    </script>
-  </body>
 </html>

test/unit/shapes/Transformer-test.js

@@ -0,0 +1,599 @@
+suite('Transformer', function() {
+  // ======================================================
+  test('init transformer on simple rectangle', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 100,
+      y: 60,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow'
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(rect);
+
+    layer.draw();
+    assert.equal(tr.getClassName(), 'Transformer');
+
+    assert.equal(tr.x(), rect.x());
+    assert.equal(tr.y(), rect.y());
+    assert.equal(tr.width(), rect.width());
+    assert.equal(tr.height(), rect.height());
+  });
+
+  test('try to fit simple rectangle', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 100,
+      y: 60,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow'
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(rect);
+
+    layer.draw();
+
+    tr._fitNodeInto({
+      x: 120,
+      y: 60,
+      width: 50,
+      height: 50,
+      rotation: 45
+    });
+
+    assert.equal(tr.x(), rect.x());
+    assert.equal(tr.y(), rect.y());
+    assert.equal(tr.width(), 50);
+    assert.equal(tr.height(), 50);
+    assert.equal(tr.rotation(), rect.rotation());
+  });
+
+  test('listen shape changes', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      draggable: true,
+      fill: 'yellow'
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(rect);
+
+    layer.draw();
+    assert.equal(tr.getClassName(), 'Transformer');
+
+    rect.setAttrs({
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100
+    });
+    layer.draw();
+    assert.equal(tr.x(), rect.x());
+    assert.equal(tr.y(), rect.y());
+    assert.equal(tr.width(), rect.width());
+    assert.equal(tr.height(), rect.height());
+  });
+
+  test('add transformer for transformed rect', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 150,
+      y: 60,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow',
+      rotation: 90,
+      scaleY: 1.5
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(rect);
+
+    layer.draw();
+    assert.equal(tr.getClassName(), 'Transformer');
+
+    assert.equal(tr.x(), rect.x());
+    assert.equal(tr.y(), rect.y());
+    assert.equal(tr.width(), rect.width() * rect.scaleX());
+    assert.equal(tr.height(), rect.height() * rect.scaleY());
+    assert.equal(tr.rotation(), rect.rotation());
+  });
+
+  test('try to fit a transformed rect', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 150,
+      y: 60,
+      draggable: true,
+      width: 150,
+      height: 100,
+      fill: 'yellow',
+      rotation: 90,
+      scaleY: 1.5
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(rect);
+
+    layer.draw();
+
+    tr._fitNodeInto({
+      x: 100,
+      y: 70,
+      width: 100,
+      height: 100
+    });
+
+    assert.equal(rect.x(), 100);
+    assert.equal(rect.y(), 70);
+    assert.equal(rect.width() * rect.scaleX(), 100);
+    assert.equal(rect.height() * rect.scaleY(), 100);
+    assert.equal(rect.rotation(), rect.rotation());
+  });
+
+  test('add transformer for transformed rect with offset', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 50,
+      y: 50,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow',
+      offsetX: 50,
+      offsetY: 50
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(rect);
+
+    layer.draw();
+    assert.equal(tr.getClassName(), 'Transformer');
+
+    assert.equal(tr.x(), rect.x() - 50);
+    assert.equal(tr.y(), rect.y() - 50);
+    assert.equal(tr.width(), rect.width() * rect.scaleX());
+    assert.equal(tr.height(), rect.height() * rect.scaleY());
+    assert.equal(tr.rotation(), rect.rotation());
+  });
+
+  test.skip('fit rect with offset', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 50,
+      y: 50,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow',
+      offsetX: 50,
+      offsetY: 50
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(rect);
+
+    tr._fitNodeInto({
+      x: 50,
+      y: 50,
+      width: 120,
+      height: 120
+    });
+
+    assert.equal(rect.x(), 100);
+    assert.equal(rect.y(), 100);
+    assert.equal(rect.width() * rect.scaleX(), 120);
+    assert.equal(rect.height() * rect.scaleY(), 100);
+    assert.equal(rect.rotation(), rect.rotation());
+
+    layer.draw();
+  });
+
+  test('add transformer for circle', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var circle = new Konva.Circle({
+      x: 40,
+      y: 40,
+      draggable: true,
+      radius: 40,
+      fill: 'yellow'
+    });
+    layer.add(circle);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(circle);
+
+    layer.draw();
+    assert.equal(tr.getClassName(), 'Transformer');
+
+    assert.equal(tr.x(), 0);
+    assert.equal(tr.y(), 0);
+    assert.equal(tr.width(), circle.width() * circle.scaleX());
+    assert.equal(tr.height(), circle.height() * circle.scaleY());
+    assert.equal(tr.rotation(), circle.rotation());
+  });
+
+  test('fit a circle', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var circle = new Konva.Circle({
+      x: 40,
+      y: 40,
+      draggable: true,
+      radius: 40,
+      fill: 'yellow'
+    });
+    layer.add(circle);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(circle);
+
+    tr._fitNodeInto({
+      x: 40,
+      y: 40,
+      width: 160,
+      height: 80
+    });
+    layer.draw();
+
+    assert.equal(circle.x(), 120);
+    assert.equal(circle.y(), 80);
+    assert.equal(circle.width() * circle.scaleX(), 160);
+    assert.equal(circle.height() * circle.scaleY(), 80);
+
+    assert.equal(tr.x(), 40);
+    assert.equal(tr.y(), 40);
+    assert.equal(tr.width(), 160);
+    assert.equal(tr.height(), 80);
+  });
+
+  test('fit a rotated circle', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var circle = new Konva.Circle({
+      x: 40,
+      y: 40,
+      draggable: true,
+      radius: 40,
+      fill: 'yellow'
+    });
+    layer.add(circle);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(circle);
+
+    tr._fitNodeInto({
+      x: 80,
+      y: 0,
+      width: 80,
+      height: 80,
+      rotation: 90
+    });
+    layer.draw();
+
+    assert.equal(circle.x(), 40);
+    assert.equal(circle.y(), 40);
+    assert.equal(circle.width() * circle.scaleX(), 80);
+    assert.equal(circle.height() * circle.scaleY(), 80);
+    assert.equal(circle.rotation(), 90);
+
+    assert.equal(tr.x(), 80);
+    assert.equal(tr.y(), 0);
+    assert.equal(tr.width(), 80);
+    assert.equal(tr.height(), 80);
+  });
+
+  test('add transformer for transformed circle', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var circle = new Konva.Circle({
+      x: 100,
+      y: 100,
+      draggable: true,
+      radius: 40,
+      fill: 'yellow',
+      scaleX: 1.5
+    });
+    layer.add(circle);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(circle);
+
+    layer.draw();
+    assert.equal(tr.getClassName(), 'Transformer');
+
+    assert.equal(tr.x(), 40);
+    assert.equal(tr.y(), 60);
+    assert.equal(tr.width(), 120);
+    assert.equal(tr.height(), 80);
+    assert.equal(tr.rotation(), 0);
+  });
+
+  test('add transformer for rotated circle', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var circle = new Konva.Circle({
+      x: 100,
+      y: 100,
+      draggable: true,
+      radius: 40,
+      fill: 'yellow',
+      scaleX: 1.5,
+      rotation: 90
+    });
+    layer.add(circle);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(circle);
+
+    layer.draw();
+
+    assert.equal(tr.x(), 140);
+    assert.equal(tr.y(), 40);
+    assert.equal(tr.width(), 120);
+    assert.equal(tr.height(), 80);
+    assert.equal(tr.rotation(), circle.rotation());
+  });
+
+  test('add transformer to group', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var group = new Konva.Group({
+      x: 50,
+      y: 50,
+      draggable: true
+    });
+    layer.add(group);
+
+    var shape1 = new Konva.Rect({
+      radius: 100,
+      fill: 'red',
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100
+    });
+
+    group.add(shape1);
+
+    var shape2 = new Konva.Rect({
+      radius: 100,
+      fill: 'yellow',
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100
+    });
+    group.add(shape2);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(group);
+
+    layer.draw();
+
+    assert.equal(tr.x(), group.x());
+    assert.equal(tr.y(), group.y());
+    assert.equal(tr.width(), 150);
+    assert.equal(tr.height(), 150);
+    assert.equal(tr.rotation(), 0);
+  });
+
+  test('rotated fit group', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var group = new Konva.Group({
+      x: 100,
+      y: 100,
+      draggable: true
+    });
+    layer.add(group);
+
+    var shape1 = new Konva.Rect({
+      fill: 'red',
+      x: -50,
+      y: -50,
+      width: 50,
+      height: 50
+    });
+
+    group.add(shape1);
+
+    var shape2 = new Konva.Rect({
+      fill: 'yellow',
+      x: 0,
+      y: 0,
+      width: 50,
+      height: 50
+    });
+    group.add(shape2);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(group);
+
+    tr._fitNodeInto({
+      x: 100,
+      y: 0,
+      width: 100,
+      height: 100,
+      rotation: 90
+    });
+    layer.draw();
+
+    var rect = group.getClientRect();
+
+    assert.equal(group.x(), 50);
+    assert.equal(group.y(), 50);
+    assert.equal(rect.width, 100);
+    assert.equal(rect.height, 100);
+    assert.equal(group.rotation(), 90);
+
+    assert.equal(tr.x(), 100);
+    assert.equal(tr.y(), 0);
+    assert.equal(tr.width(), 100);
+    assert.equal(tr.height(), 100);
+  });
+
+  test('add transformer to another group', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var group = new Konva.Group({
+      x: 100,
+      y: 100,
+      draggable: true
+    });
+    layer.add(group);
+
+    var shape1 = new Konva.Rect({
+      fill: 'red',
+      x: -50,
+      y: -50,
+      width: 50,
+      height: 50
+    });
+
+    group.add(shape1);
+
+    var shape2 = new Konva.Rect({
+      fill: 'yellow',
+      x: 0,
+      y: 0,
+      width: 50,
+      height: 50
+    });
+    group.add(shape2);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(group);
+
+    layer.draw();
+
+    assert.equal(tr.x(), 50);
+    assert.equal(tr.y(), 50);
+    assert.equal(tr.width(), 100);
+    assert.equal(tr.height(), 100);
+    assert.equal(tr.rotation(), 0);
+  });
+
+  test('fit group', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var group = new Konva.Group({
+      x: 100,
+      y: 100,
+      draggable: true
+    });
+    layer.add(group);
+
+    var shape1 = new Konva.Rect({
+      fill: 'red',
+      x: -50,
+      y: -50,
+      width: 50,
+      height: 50
+    });
+
+    group.add(shape1);
+
+    var shape2 = new Konva.Rect({
+      fill: 'yellow',
+      x: 0,
+      y: 0,
+      width: 50,
+      height: 50
+    });
+    group.add(shape2);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(group);
+
+    tr._fitNodeInto({
+      x: 0,
+      y: 0,
+      width: 200,
+      height: 100
+    });
+    layer.draw();
+
+    var rect = group.getClientRect();
+
+    assert.equal(group.x(), 100);
+    assert.equal(group.y(), 50);
+    assert.equal(rect.width, 200);
+    assert.equal(rect.height, 100);
+
+    assert.equal(tr.x(), 0);
+    assert.equal(tr.y(), 0);
+    assert.equal(tr.width(), 200);
+    assert.equal(tr.height(), 100);
+  });
+});