Merge branch 'master' into fix-unscalable-strokes

CHANGELOG.md

@@ -5,6 +5,20 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [new version][unreleased]
 
+### Added
+
+* Typescript defs for `Konva.Transformer`
+
+## Changes
+
+* Fixed flow for `contextmenu` event. Not it will be triggered on shapes too
+
+## [2.0.2][2018-03-15]
+
+## Fixed
+
+* Even more bugs fixes for `Konva.Transformer`
+
 ## [2.0.1][2018-03-15]
 
 ## Fixed

README.md

@@ -23,7 +23,7 @@ This repository began as a GitHub fork of [ericdrowell/KineticJS](https://github
 # Quick Look
 
 ```html
-<script src="https://cdn.rawgit.com/konvajs/konva/2.0.1/konva.min.js"></script>
+<script src="https://cdn.rawgit.com/konvajs/konva/2.0.2/konva.min.js"></script>
 <div id="container"></div>
 <script>
     var stage = new Konva.Stage({

konva.d.ts

@@ -287,6 +287,10 @@ declare namespace Konva {
   interface ContainerConfig extends NodeConfig {
     clearBeforeDraw?: boolean;
     clipFunc?: (ctx: CanvasRenderingContext2D) => void;
+    clipX?: number;
+    clipY?: number;
+    clipWidth?: number;
+    clipHeight?: number;
   }
 
   class Container extends Node {
@@ -994,6 +998,27 @@ declare namespace Konva {
     translate(x: number, y: Number): Transform;
   }
 
+  interface TransformerConfig extends ContainerConfig {
+    resizeEnabled?: boolean;
+    rotateEnabled?: boolean;
+    rotationSnaps?: Array<number>;
+    rotateHandlerOffset?: number;
+    lineEnabled?: number;
+    keepRatio?: boolean;
+    enabledHandlers?: Array<string>;
+    node?: Rect;
+  }
+
+  class Transformer extends Container {
+    constructor(config?: TransformerConfig);
+    attachTo(node: Node): void;
+    setNode(node: Node): void;
+    getNode(): Node;
+    detach(): void;
+    forceUpdate(): void;
+    update(): void;
+  }
+
   interface Vector2d {
     x: number;
     y: number;

konva.js

@@ -1,8 +1,8 @@
 /*
- * Konva JavaScript Framework v2.0.1
+ * Konva JavaScript Framework v2.0.2
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Thu Mar 15 2018
+ * Date: Fri Mar 16 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -21,7 +21,7 @@
 
   var Konva = {
     // public
-    version: '2.0.1',
+    version: '2.0.2',
 
     // private
     stages: [],
@@ -2771,11 +2771,11 @@
     },
     /**
      * bind events to the node. KonvaJS supports mouseover, mousemove,
-     *  mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, click, dblclick, touchstart, touchmove,
+     *  mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, contextmenu, click, dblclick, touchstart, touchmove,
      *  touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Konva Stage supports
      *  contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, contentWheel, contentContextmenu
      *  contentClick, contentDblclick, contentTouchstart, contentTouchmove, contentTouchend, contentTap,
-     *  and contentDblTap.  Pass in a string of events delimmited by a space to bind multiple events at once
+     *  and contentDblTap.  Pass in a string of events delimited by a space to bind multiple events at once
      *  such as 'mousedown mouseup mousemove'. Include a namespace to bind an
      *  event by name such as 'click.foobar'.
      * @method
@@ -10616,6 +10616,18 @@
       }
     },
     _contextmenu: function(evt) {
+      this._setPointerPosition(evt);
+      var shape = this.getIntersection(this.getPointerPosition());
+
+      if (shape && shape.isListening()) {
+        shape._fireAndBubble(CONTEXTMENU, { evt: evt });
+      } else {
+        this._fire(CONTEXTMENU, {
+          evt: evt,
+          target: this,
+          currentTarget: this
+        });
+      }
       this._fire(CONTENT_CONTEXTMENU, { evt: evt });
     },
     _touchstart: function(evt) {
@@ -18581,6 +18593,7 @@
    * @param {Boolean} [config.rotateEnabled] Default is true
    * @param {Array} [config.rotationSnaps] Array of angles for rotation snaps. Default is []
    * @param {Number} [config.rotateHandlerOffset] Default is 50
+   * @param {Number} [config.padding] Default is 0
    * @param {Number} [config.lineEnabled] Should we draw border? Default is true
    * @param {Boolean} [config.keepRatio] Should we keep ratio when we are moving edges? Default is true
    * @param {Array} [config.enabledHandlers] Array of names of enabled handles
@@ -18683,7 +18696,7 @@
         }.bind(this)
       );
       node.on(TRANSFORM_CHANGE_STR, this.requestUpdate.bind(this));
-      node.on('dragmove.resizer', this.requestUpdate);
+      node.on('dragmove.resizer', this.requestUpdate.bind(this));
 
       var elementsCreated = !!this.findOne('.top-left');
       if (elementsCreated) {
@@ -18810,14 +18823,18 @@
         height: 0,
         listening: false,
         sceneFunc: function(ctx) {
+          var tr = this.getParent();
+          var padding = tr.getPadding();
           ctx.beginPath();
-          ctx.rect(0, 0, this.width(), this.height());
+          ctx.rect(
-          ctx.moveTo(this.width() / 2, 0);
+            -padding,
-          if (this.getParent().rotateEnabled()) {
+            -padding,
-            ctx.lineTo(
+            this.width() + padding * 2,
-              this.width() / 2,
+            this.height() + padding * 2
-              -this.getParent().rotateHandlerOffset()
           );
+          ctx.moveTo(this.width() / 2, -padding);
+          if (tr.rotateEnabled()) {
+            ctx.lineTo(this.width() / 2, -tr.rotateHandlerOffset());
           }
 
           ctx.fillStrokeShape(this);
@@ -18941,6 +18958,7 @@
           this.findOne('.bottom-right').y(y);
         }
       } else if (this.movingResizer === 'rotater') {
+        var padding = this.getPadding();
         var attrs = this._getNodeRect();
         x = resizerNode.x() - attrs.width / 2;
         y = -resizerNode.y() + attrs.height / 2;
@@ -18970,6 +18988,9 @@
           }
         }
 
+        var dx = padding;
+        var dy = padding;
+
         this._fitNodeInto(
           Object.assign(attrs, {
             rotation: Konva.angleDeg
@@ -18977,14 +18998,20 @@
               : Konva.Util._degToRad(newRotation),
             x:
               attrs.x +
-              attrs.width / 2 * (Math.cos(alpha) - Math.cos(newAlpha)) +
+              (attrs.width / 2 + padding) *
-              attrs.height / 2 * (Math.sin(-alpha) - Math.sin(-newAlpha)),
+                (Math.cos(alpha) - Math.cos(newAlpha)) +
+              (attrs.height / 2 + padding) *
+                (Math.sin(-alpha) - Math.sin(-newAlpha)) -
+              (dx * Math.cos(rot) + dy * Math.sin(-rot)),
             y:
               attrs.y +
-              attrs.height / 2 * (Math.cos(alpha) - Math.cos(newAlpha)) +
+              (attrs.height / 2 + padding) *
-              attrs.width / 2 * (Math.sin(alpha) - Math.sin(newAlpha)),
+                (Math.cos(alpha) - Math.cos(newAlpha)) +
-            width: attrs.width,
+              (attrs.width / 2 + padding) *
-            height: attrs.height
+                (Math.sin(alpha) - Math.sin(newAlpha)) -
+              (dy * Math.cos(rot) + dx * Math.sin(rot)),
+            width: attrs.width + padding * 2,
+            height: attrs.height + padding * 2
           })
         );
       } else {
@@ -19037,19 +19064,21 @@
     },
 
     _fitNodeInto: function(attrs) {
+      // waring! in this attrs padding may be included
       this._settings = true;
       var node = this.getNode();
       if (attrs.rotation !== undefined) {
         this.getNode().rotation(attrs.rotation);
       }
       var pure = node.getClientRect({ skipTransform: true });
-      var scaleX = attrs.width / pure.width;
+      var padding = this.getPadding();
-      var scaleY = attrs.height / pure.height;
+      var scaleX = (attrs.width - padding * 2) / pure.width;
+      var scaleY = (attrs.height - padding * 2) / pure.height;
 
       var rotation = Konva.getAngle(node.getRotation());
       // debugger;
-      var dx = pure.x * scaleX;
+      var dx = pure.x * scaleX - padding;
-      var dy = pure.y * scaleY;
+      var dy = pure.y * scaleY - padding;
 
       // var dxo = node.offsetX() * scaleX;
       // var dyo = node.offsetY() * scaleY;
@@ -19101,45 +19130,46 @@
 
       var enabledHandlers = this.enabledHandlers();
       var resizeEnabled = this.resizeEnabled();
+      var padding = this.getPadding();
 
       this.findOne('.top-left').setAttrs({
-        x: 0,
+        x: -padding,
-        y: 0,
+        y: -padding,
         visible: resizeEnabled && enabledHandlers.indexOf('top-left') >= 0
       });
       this.findOne('.top-center').setAttrs({
         x: width / 2,
-        y: 0,
+        y: -padding,
         visible: resizeEnabled && enabledHandlers.indexOf('top-center') >= 0
       });
       this.findOne('.top-right').setAttrs({
-        x: width,
+        x: width + padding,
-        y: 0,
+        y: -padding,
         visible: resizeEnabled && enabledHandlers.indexOf('top-right') >= 0
       });
       this.findOne('.middle-left').setAttrs({
-        x: 0,
+        x: -padding,
         y: height / 2,
         visible: resizeEnabled && enabledHandlers.indexOf('middle-left') >= 0
       });
       this.findOne('.middle-right').setAttrs({
-        x: width,
+        x: width + padding,
         y: height / 2,
         visible: resizeEnabled && enabledHandlers.indexOf('middle-right') >= 0
       });
       this.findOne('.bottom-left').setAttrs({
-        x: 0,
+        x: -padding,
-        y: height,
+        y: height + padding,
         visible: resizeEnabled && enabledHandlers.indexOf('bottom-left') >= 0
       });
       this.findOne('.bottom-center').setAttrs({
         x: width / 2,
-        y: height,
+        y: height + padding,
         visible: resizeEnabled && enabledHandlers.indexOf('bottom-center') >= 0
       });
       this.findOne('.bottom-right').setAttrs({
-        x: width,
+        x: width + padding,
-        y: height,
+        y: height + padding,
         visible: resizeEnabled && enabledHandlers.indexOf('bottom-right') >= 0
       });
 
@@ -19304,6 +19334,22 @@
    */
   Konva.Factory.addGetterSetter(Konva.Transformer, 'keepRatio', true);
 
+  /**
+   * get/set padding
+   * @name padding
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Array} array
+   * @returns {Array}
+   * @example
+   * // get
+   * var padding = shape.padding();
+   *
+   * // set
+   * shape.padding(10);
+   */
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'padding', 0);
+
   Konva.Factory.addOverloadedGetterSetter(Konva.Transformer, 'node');
 
   Konva.Collection.mapMethods(Konva.Transformer);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "konva",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "author": "Anton Lavrenov",
   "files": [
     "README.md",

src/Node.js

@@ -412,11 +412,11 @@
     },
     /**
      * bind events to the node. KonvaJS supports mouseover, mousemove,
-     *  mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, click, dblclick, touchstart, touchmove,
+     *  mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, contextmenu, click, dblclick, touchstart, touchmove,
      *  touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Konva Stage supports
      *  contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, contentWheel, contentContextmenu
      *  contentClick, contentDblclick, contentTouchstart, contentTouchmove, contentTouchend, contentTap,
-     *  and contentDblTap.  Pass in a string of events delimmited by a space to bind multiple events at once
+     *  and contentDblTap.  Pass in a string of events delimited by a space to bind multiple events at once
      *  such as 'mousedown mouseup mousemove'. Include a namespace to bind an
      *  event by name such as 'click.foobar'.
      * @method

src/Stage.js

@@ -612,6 +612,18 @@
       }
     },
     _contextmenu: function(evt) {
+      this._setPointerPosition(evt);
+      var shape = this.getIntersection(this.getPointerPosition());
+
+      if (shape && shape.isListening()) {
+        shape._fireAndBubble(CONTEXTMENU, { evt: evt });
+      } else {
+        this._fire(CONTEXTMENU, {
+          evt: evt,
+          target: this,
+          currentTarget: this
+        });
+      }
       this._fire(CONTENT_CONTEXTMENU, { evt: evt });
     },
     _touchstart: function(evt) {

src/shapes/Transformer.js

@@ -88,6 +88,7 @@
    * @param {Boolean} [config.rotateEnabled] Default is true
    * @param {Array} [config.rotationSnaps] Array of angles for rotation snaps. Default is []
    * @param {Number} [config.rotateHandlerOffset] Default is 50
+   * @param {Number} [config.padding] Default is 0
    * @param {Number} [config.lineEnabled] Should we draw border? Default is true
    * @param {Boolean} [config.keepRatio] Should we keep ratio when we are moving edges? Default is true
    * @param {Array} [config.enabledHandlers] Array of names of enabled handles
@@ -165,7 +166,7 @@
         }.bind(this)
       );
       node.on(TRANSFORM_CHANGE_STR, this.requestUpdate.bind(this));
-      node.on('dragmove.resizer', this.requestUpdate);
+      node.on('dragmove.resizer', this.requestUpdate.bind(this));
 
       var elementsCreated = !!this.findOne('.top-left');
       if (elementsCreated) {
@@ -292,14 +293,18 @@
         height: 0,
         listening: false,
         sceneFunc: function(ctx) {
+          var tr = this.getParent();
+          var padding = tr.getPadding();
           ctx.beginPath();
-          ctx.rect(0, 0, this.width(), this.height());
+          ctx.rect(
-          ctx.moveTo(this.width() / 2, 0);
+            -padding,
-          if (this.getParent().rotateEnabled()) {
+            -padding,
-            ctx.lineTo(
+            this.width() + padding * 2,
-              this.width() / 2,
+            this.height() + padding * 2
-              -this.getParent().rotateHandlerOffset()
           );
+          ctx.moveTo(this.width() / 2, -padding);
+          if (tr.rotateEnabled()) {
+            ctx.lineTo(this.width() / 2, -tr.rotateHandlerOffset());
           }
 
           ctx.fillStrokeShape(this);
@@ -423,6 +428,7 @@
           this.findOne('.bottom-right').y(y);
         }
       } else if (this.movingResizer === 'rotater') {
+        var padding = this.getPadding();
         var attrs = this._getNodeRect();
         x = resizerNode.x() - attrs.width / 2;
         y = -resizerNode.y() + attrs.height / 2;
@@ -452,6 +458,9 @@
           }
         }
 
+        var dx = padding;
+        var dy = padding;
+
         this._fitNodeInto(
           Object.assign(attrs, {
             rotation: Konva.angleDeg
@@ -459,14 +468,20 @@
               : Konva.Util._degToRad(newRotation),
             x:
               attrs.x +
-              attrs.width / 2 * (Math.cos(alpha) - Math.cos(newAlpha)) +
+              (attrs.width / 2 + padding) *
-              attrs.height / 2 * (Math.sin(-alpha) - Math.sin(-newAlpha)),
+                (Math.cos(alpha) - Math.cos(newAlpha)) +
+              (attrs.height / 2 + padding) *
+                (Math.sin(-alpha) - Math.sin(-newAlpha)) -
+              (dx * Math.cos(rot) + dy * Math.sin(-rot)),
             y:
               attrs.y +
-              attrs.height / 2 * (Math.cos(alpha) - Math.cos(newAlpha)) +
+              (attrs.height / 2 + padding) *
-              attrs.width / 2 * (Math.sin(alpha) - Math.sin(newAlpha)),
+                (Math.cos(alpha) - Math.cos(newAlpha)) +
-            width: attrs.width,
+              (attrs.width / 2 + padding) *
-            height: attrs.height
+                (Math.sin(alpha) - Math.sin(newAlpha)) -
+              (dy * Math.cos(rot) + dx * Math.sin(rot)),
+            width: attrs.width + padding * 2,
+            height: attrs.height + padding * 2
           })
         );
       } else {
@@ -519,19 +534,21 @@
     },
 
     _fitNodeInto: function(attrs) {
+      // waring! in this attrs padding may be included
       this._settings = true;
       var node = this.getNode();
       if (attrs.rotation !== undefined) {
         this.getNode().rotation(attrs.rotation);
       }
       var pure = node.getClientRect({ skipTransform: true });
-      var scaleX = attrs.width / pure.width;
+      var padding = this.getPadding();
-      var scaleY = attrs.height / pure.height;
+      var scaleX = (attrs.width - padding * 2) / pure.width;
+      var scaleY = (attrs.height - padding * 2) / pure.height;
 
       var rotation = Konva.getAngle(node.getRotation());
       // debugger;
-      var dx = pure.x * scaleX;
+      var dx = pure.x * scaleX - padding;
-      var dy = pure.y * scaleY;
+      var dy = pure.y * scaleY - padding;
 
       // var dxo = node.offsetX() * scaleX;
       // var dyo = node.offsetY() * scaleY;
@@ -583,45 +600,46 @@
 
       var enabledHandlers = this.enabledHandlers();
       var resizeEnabled = this.resizeEnabled();
+      var padding = this.getPadding();
 
       this.findOne('.top-left').setAttrs({
-        x: 0,
+        x: -padding,
-        y: 0,
+        y: -padding,
         visible: resizeEnabled && enabledHandlers.indexOf('top-left') >= 0
       });
       this.findOne('.top-center').setAttrs({
         x: width / 2,
-        y: 0,
+        y: -padding,
         visible: resizeEnabled && enabledHandlers.indexOf('top-center') >= 0
       });
       this.findOne('.top-right').setAttrs({
-        x: width,
+        x: width + padding,
-        y: 0,
+        y: -padding,
         visible: resizeEnabled && enabledHandlers.indexOf('top-right') >= 0
       });
       this.findOne('.middle-left').setAttrs({
-        x: 0,
+        x: -padding,
         y: height / 2,
         visible: resizeEnabled && enabledHandlers.indexOf('middle-left') >= 0
       });
       this.findOne('.middle-right').setAttrs({
-        x: width,
+        x: width + padding,
         y: height / 2,
         visible: resizeEnabled && enabledHandlers.indexOf('middle-right') >= 0
       });
       this.findOne('.bottom-left').setAttrs({
-        x: 0,
+        x: -padding,
-        y: height,
+        y: height + padding,
         visible: resizeEnabled && enabledHandlers.indexOf('bottom-left') >= 0
       });
       this.findOne('.bottom-center').setAttrs({
         x: width / 2,
-        y: height,
+        y: height + padding,
         visible: resizeEnabled && enabledHandlers.indexOf('bottom-center') >= 0
       });
       this.findOne('.bottom-right').setAttrs({
-        x: width,
+        x: width + padding,
-        y: height,
+        y: height + padding,
         visible: resizeEnabled && enabledHandlers.indexOf('bottom-right') >= 0
       });
 
@@ -786,6 +804,22 @@
    */
   Konva.Factory.addGetterSetter(Konva.Transformer, 'keepRatio', true);
 
+  /**
+   * get/set padding
+   * @name padding
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Array} array
+   * @returns {Array}
+   * @example
+   * // get
+   * var padding = shape.padding();
+   *
+   * // set
+   * shape.padding(10);
+   */
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'padding', 0);
+
   Konva.Factory.addOverloadedGetterSetter(Konva.Transformer, 'node');
 
   Konva.Collection.mapMethods(Konva.Transformer);

test/unit/Shape-test.js

@@ -999,7 +999,7 @@ suite('Shape', function() {
     );
   });
 
-  test('class inherince', function() {
+  test('class inherence', function() {
     var rect = new Konva.Rect();
     assert.equal(rect instanceof Konva.Rect, true);
     assert.equal(rect instanceof Konva.Shape, true);

test/unit/Stage-test.js

@@ -902,6 +902,78 @@ suite('Stage', function() {
     assert.equal(dbltaps, 1, 'dbltap registered');
   });
 
+  test('pass context and wheel events to shape', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100,
+      fill: 'red'
+    });
+    layer.add(rect);
+    layer.draw();
+
+    var contextmenus = 0;
+    var wheels = 0;
+
+    // test on empty
+    stage.on('contextmenu', function(e) {
+      contextmenus += 1;
+      assert.equal(e.target, stage);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    stage.on('wheel', function(e) {
+      wheels += 1;
+      assert.equal(e.target, stage);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    var top = stage.content.getBoundingClientRect().top;
+    stage._contextmenu({
+      clientX: 0,
+      clientY: top + 0
+    });
+    stage._wheel({
+      clientX: 0,
+      clientY: top + 0
+    });
+
+    assert.equal(contextmenus, 1, 'first contextment registered');
+    assert.equal(wheels, 1, 'first wheel registered');
+
+    stage.off('contextmenu');
+    stage.off('wheel');
+
+    // test on shape
+    stage.on('contextmenu', function(e) {
+      contextmenus += 1;
+      assert.equal(e.target, rect);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    stage.on('wheel', function(e) {
+      wheels += 1;
+      assert.equal(e.target, rect);
+      assert.equal(e.currentTarget, stage);
+    });
+    stage._contextmenu({
+      clientX: 60,
+      clientY: top + 60
+    });
+    stage._wheel({
+      clientX: 60,
+      clientY: top + 60
+    });
+
+    assert.equal(contextmenus, 2, 'second contextment registered');
+    assert.equal(wheels, 2, 'second wheel registered');
+  });
+
   test('make sure it does not trigger too many events', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
@@ -1027,7 +1099,7 @@ suite('Stage', function() {
     assert.equal(stage.toDataURL(), layer.toDataURL());
   });
 
-  test('check hit graph with stage listeting property', function() {
+  test('check hit graph with stage listening property', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
     stage.add(layer);

test/unit/shapes/Transformer-test.js

@@ -672,4 +672,78 @@ suite('Transformer', function() {
     var tr = new Konva.Transformer();
     tr.destroy();
   });
+
+  test('can add padding', 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({
+      node: rect,
+      padding: 10
+    });
+    layer.add(tr);
+
+    tr._fitNodeInto({
+      x: 0,
+      y: 0,
+      width: 120,
+      height: 120
+    });
+
+    layer.draw();
+
+    assert.equal(rect.x(), 10);
+    assert.equal(rect.y(), 10);
+    assert.equal(rect.width(), 100);
+    assert.equal(rect.height(), 100);
+  });
+
+  test('can add padding with rotation', 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({
+      node: rect,
+      padding: 10
+    });
+    layer.add(tr);
+
+    tr._fitNodeInto({
+      x: 120,
+      y: 0,
+      width: 120,
+      height: 120,
+      rotation: 90
+    });
+
+    layer.draw();
+
+    assert.equal(rect.x(), 110);
+    assert.equal(rect.y(), 10);
+    assert.equal(rect.width(), 100);
+    assert.equal(rect.height(), 100);
+    assert.equal(rect.rotation(), 90);
+  });
 });