Merge remote-tracking branch 'upstream/master'

CHANGELOG.md

@@ -5,11 +5,14 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [new version][unreleased]
 
+## [2.1.8][2018-08-01]
+
 ## Fixed
 
 * Some `Konva.Transformer` fixes
 * Typescript fixes
 * `stage.toDataURL()` fixes when it has hidden layers
+* `shape.toDataURL()` automatically adjust position and size of resulted image
 
 ## [2.1.7][2018-07-03]
 

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.1.7/konva.min.js"></script>
+<script src="https://cdn.rawgit.com/konvajs/konva/2.1.8/konva.min.js"></script>
 <div id="container"></div>
 <script>
     var stage = new Konva.Stage({

konva.js

@@ -1,8 +1,8 @@
 /*
- * Konva JavaScript Framework v2.1.7
+ * Konva JavaScript Framework v2.1.8
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Tue Jul 24 2018
+ * Date: Wed Aug 01 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.1.7',
+    version: '2.1.8',
 
     // private
     stages: [],
@@ -3425,7 +3425,7 @@
       // func with this because it will be the only node
       if (top && top._id === this._id) {
         func(this);
-        return true;
+        return;
       }
 
       family.unshift(this);
@@ -3955,17 +3955,16 @@
     _toKonvaCanvas: function(config) {
       config = config || {};
 
+      var box = this.getClientRect();
+
       var stage = this.getStage(),
-        x = config.x || 0,
-        y = config.y || 0,
+        x = config.x || box.x,
+        y = config.y || box.y,
         pixelRatio = config.pixelRatio || 1,
         canvas = new Konva.SceneCanvas({
-          width:
-            config.width || this.getWidth() || (stage ? stage.getWidth() : 0),
+          width: config.width || box.width || (stage ? stage.getWidth() : 0),
           height:
-            config.height ||
-            this.getHeight() ||
-            (stage ? stage.getHeight() : 0),
+            config.height || box.height || (stage ? stage.getHeight() : 0),
           pixelRatio: pixelRatio
         }),
         context = canvas.getContext();

package.json

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

src/Node.js

@@ -1592,17 +1592,16 @@
     _toKonvaCanvas: function(config) {
       config = config || {};
 
+      var box = this.getClientRect();
+
       var stage = this.getStage(),
-        x = config.x || 0,
-        y = config.y || 0,
+        x = config.x || box.x,
+        y = config.y || box.y,
         pixelRatio = config.pixelRatio || 1,
         canvas = new Konva.SceneCanvas({
-          width:
-            config.width || this.getWidth() || (stage ? stage.getWidth() : 0),
+          width: config.width || box.width || (stage ? stage.getWidth() : 0),
           height:
-            config.height ||
-            this.getHeight() ||
-            (stage ? stage.getHeight() : 0),
+            config.height || box.height || (stage ? stage.getHeight() : 0),
           pixelRatio: pixelRatio
         }),
         context = canvas.getContext();

test/unit/BaseLayer-test.js

@@ -1,6 +1,7 @@
 suite('BaseLayer', function() {
   // ======================================================
   test('width and height', function() {
+    Konva.showWarnings = false;
     var stage = addStage();
 
     var layer = new Konva.FastLayer();
@@ -52,5 +53,6 @@ suite('BaseLayer', function() {
       stage.height(),
       'while layer is on stage changing height doing nothing'
     );
+    Konva.showWarnings = true;
   });
 });

test/unit/Node-test.js

@@ -292,7 +292,7 @@ suite('Node', function() {
 
   // ======================================================
   test('toDataURL + HDPI', function(done) {
-    this.timeout(5000);
+    // this.timeout(5000);
     var oldRatio = Konva.pixelRatio;
     Konva.pixelRatio = 2;
 
@@ -338,6 +338,49 @@ suite('Node', function() {
     });
   });
 
+  // ======================================================
+  test('toDataURL of moved shape', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var circle = new Konva.Circle({
+      fill: 'green',
+      radius: 50
+    });
+    layer.add(circle);
+
+    var oldURL = circle.toDataURL();
+
+    circle.x(100);
+    circle.y(100);
+
+    var newURL = circle.toDataURL();
+    assert.equal(oldURL, newURL);
+  });
+
+  // ======================================================
+  test('toDataURL of transformer shape', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var text = new Konva.Text({
+      fill: 'green',
+      text: 'hello, test',
+      rotation: 45
+    });
+    layer.add(text);
+
+    var oldURL = text.toDataURL();
+
+    text.x(100);
+    text.y(100);
+
+    var newURL = text.toDataURL();
+    assert.equal(oldURL, newURL);
+  });
+
   // ======================================================
   test("listen and don't listen", function() {
     var stage = addStage();

test/unit/Stage-test.js

@@ -1057,7 +1057,8 @@ suite('Stage', function() {
     });
     layer.add(circle);
     stage.add(layer);
-    assert.equal(stage.toDataURL(), layer.toDataURL());
+
+    compareCanvases(stage.toCanvas(), layer.toCanvas());
   });
 
   test('toDataURL with hidden layer', function() {