From b09b22ad8264065ace3e7ab39df5bf3e25ddee72 Mon Sep 17 00:00:00 2001
From: lavrton <lavrton@gmail.com>
Date: Mon, 25 May 2015 11:26:30 +0700
Subject: [PATCH] stage.toDataURL() in sync way

---
 CHANGELOG.md                    |  1 +
 src/Stage.js                    | 33 +++++++++++++--------------------
 test/unit/Stage-test.js         | 14 ++++++++++++++
 test/unit/plugins/Label-test.js |  2 +-
 test/unit/shapes/Text-test.js   | 15 +++++++++------
 5 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a345cd96..309b3338 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - `toDataURL` now handle pixelRatio. you can pass `config.pixelRatio` argument
 - Correct `clone()` for custom nodes
 - `FastLayer` now can have transforms
+- `stage.toDataURL()` method now works in synchronous way. So `callback` argument is not required.
 
 ### Added
 - new `Konva.Image.fromURL` method
diff --git a/src/Stage.js b/src/Stage.js
index 48f8b82e..2e82ee35 100644
--- a/src/Stage.js
+++ b/src/Stage.js
@@ -209,11 +209,11 @@
             return this.content;
         },
         /**
-         * Creates a composite data URL and requires a callback because the composite is generated asynchronously.
+         * Creates a composite data URL
          * @method
          * @memberof Konva.Stage.prototype
          * @param {Object} config
-         * @param {Function} config.callback function executed when the composite has completed
+         * @param {Function} [config.callback] function executed when the composite has completed. Deprecated as method is sync now.
          * @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
          *  "image/png" is the default
          * @param {Number} [config.x] x position of canvas section
@@ -243,27 +243,20 @@
                 _context.translate(-1 * x, -1 * y);
             }
 
-            function drawLayer(n) {
-                var layer = layers[n],
-                    layerUrl = layer.toDataURL({
-                        pixelRatio: config.pixelRatio
-                    }),
-                    pixelRatio = canvas.pixelRatio,
-                    imageObj = new Konva.window.Image();
 
-                imageObj.onload = function() {
-                    _context.drawImage(imageObj, 0, 0, imageObj.width / pixelRatio, imageObj.height / pixelRatio);
+            layers.each(function(layer) {
+                var width = layer.getCanvas().getWidth();
+                var height = layer.getCanvas().getHeight();
+                var ratio = layer.getCanvas().getPixelRatio();
+                _context.drawImage(layer.getCanvas()._canvas, 0, 0, width / ratio, height / ratio);
+            });
+            var src = canvas.toDataURL(mimeType, quality);
 
-                    if(n < layers.length - 1) {
-                        drawLayer(n + 1);
-                    }
-                    else {
-                        config.callback(canvas.toDataURL(mimeType, quality));
-                    }
-                };
-                imageObj.src = layerUrl;
+            if (config.callback) {
+                config.callback(src);
             }
-            drawLayer(0);
+
+            return src;
         },
         /**
          * converts stage into an image.
diff --git a/test/unit/Stage-test.js b/test/unit/Stage-test.js
index fff56d90..c440c3f5 100644
--- a/test/unit/Stage-test.js
+++ b/test/unit/Stage-test.js
@@ -561,6 +561,20 @@ suite('Stage', function() {
         image.src = 'assets/lion.png';
     });
 
+    test('toDataURL in sync way', function() {
+        var stage = addStage();
+        var layer = new Konva.Layer();
+        var circle = new Konva.Circle({
+            x: stage.width() / 2,
+            y: stage.height() / 2,
+            fill: 'red',
+            radius: 50
+        });
+        layer.add(circle);
+        stage.add(layer);
+        assert.equal(stage.toDataURL(), layer.toDataURL());
+    });
+
     test('check hit graph with stage listeting property', function() {
       var stage = addStage();
       var layer = new Konva.Layer();
diff --git a/test/unit/plugins/Label-test.js b/test/unit/plugins/Label-test.js
index b70ee3e5..5c08cc7d 100644
--- a/test/unit/plugins/Label-test.js
+++ b/test/unit/plugins/Label-test.js
@@ -214,7 +214,7 @@ suite('Label', function() {
 
         stage.add(layer);
 
-        cloneAndCompareLayer(layer, 220);
+        cloneAndCompareLayer(layer, 254);
     });
 
 });
\ No newline at end of file
diff --git a/test/unit/shapes/Text-test.js b/test/unit/shapes/Text-test.js
index d671268b..de90822e 100644
--- a/test/unit/shapes/Text-test.js
+++ b/test/unit/shapes/Text-test.js
@@ -401,7 +401,7 @@ suite('Text', function(){
         var layer = new Konva.Layer();
 
         var text = new Konva.Text({
-            fontSize: 50,
+            fontSize: 100,
             y : 10,
             x : 10,
             fillLinearGradientStartPoint: { x : -50, y : -50},
@@ -413,11 +413,14 @@ suite('Text', function(){
         layer.add(text);
         stage.add(layer);
 
-        var data = layer.getContext().getImageData(79, 37, 1, 1).data;
-        assert.equal(data[0], 255);
-        assert.equal(data[1], 255);
-        assert.equal(data[2], 0);
-        assert.equal(data[3], 255);
+        stage.on('mousemove', function() {
+            console.log(stage.getPointerPosition());
+        });
+        var data = layer.getContext().getImageData(176, 66, 1, 1).data;
+        assert.equal(data[0], 255, 'full green');
+        assert.equal(data[1], 255, 'full red');
+        assert.equal(data[2], 0, 'no blue');
+        assert.equal(data[3], 255, '255 alpha - fully visible');
     });