Fix Konva.Transformer behavior on scaled with CSS stage. fix #841.

test/unit/Shape-test.js

@@ -1049,7 +1049,8 @@ suite('Shape', function() {
       width: 100,
       height: 50,
       stroke: 'red',
-      strokeWidth: 20
+      strokeWidth: 20,
+      draggable: true
     });
     // default value
     assert.equal(rect.strokeHitEnabled(), true);
@@ -1122,7 +1123,6 @@ suite('Shape', function() {
     // );
   });
 
-
   test('enable hitStrokeWidth even if we have no stroke on scene', function() {
     var stage = addStage();
 
@@ -1918,4 +1918,51 @@ suite('Shape', function() {
     assert.equal(callCount, 1);
     Konva.Util.warn = oldWarn;
   });
+
+  test('hasFill getter', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var shape = new Konva.Shape({
+      stroke: 'black',
+      strokeWidth: 4,
+      sceneFunc: function(context) {
+        context.beginPath();
+        context.moveTo(20, 50);
+        context.quadraticCurveTo(550, 0, 500, 500);
+        context.fillStrokeShape(shape);
+      },
+      fill: 'red',
+      fillEnabled: false
+    });
+
+    layer.add(shape);
+    assert.equal(shape.hasFill(), false);
+  });
+
+  test('test hit of non filled shape', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var line = new Konva.Shape({
+      sceneFunc: function(context) {
+        context.beginPath();
+        context.moveTo(20, 50);
+        context.quadraticCurveTo(550, 0, 500, 500);
+
+        context.fillStrokeShape(line);
+      }
+    });
+
+    layer.add(line);
+    layer.draw();
+
+    // we still should register shape here
+    // like for a non filled rectangle (with just stroke),
+    // we need fill it for full events
+    var shape = layer.getIntersection({ x: 50, y: 70 });
+    assert.equal(shape, line);
+  });
 });

test/unit/Stage-test.js

@@ -1378,15 +1378,4 @@ suite('Stage', function() {
     Konva.Util.warn = oldWarn;
     assert.equal(called, true);
   });
-
-  // test.only('Warn when styles or stage are applied', function() {
-  //   var stage = addStage();
-  //   // var layer = new Konva.Layer();
-  //   // stage.add(layer);
-  //   var container = stage.content;
-  //   console.log(
-  //     getComputedStyle(container).width,
-  //     getComputedStyle(container).height
-  //   );
-  // });
 });

test/unit/shapes/Transformer-test.js

@@ -2577,4 +2577,63 @@ suite('Transformer', function() {
 
     stage.draw();
   });
+
+  test('try to move anchor on scaled with css stage', function() {
+    var stage = addStage();
+    stage.container().style.transform = 'scale(0.5)';
+    stage.container().style.transformOrigin = 'top left';
+
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 0,
+      y: 0,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow'
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer({
+      node: rect,
+      keepRatio: false
+    });
+    layer.add(tr);
+    layer.draw();
+
+    stage.simulateMouseMove({
+      x: 50,
+      y: 50
+    });
+    stage.simulateMouseDown({
+      x: 50,
+      y: 50
+    });
+
+    var target = stage.getIntersection({
+      x: 50,
+      y: 50
+    });
+    var top = stage.content.getBoundingClientRect().top;
+    tr._handleMouseMove({
+      target: target,
+      clientX: 100,
+      clientY: 50 + top
+    });
+
+    // here is duplicate, because transformer is listening window events
+    tr._handleMouseUp({
+      clientX: 100,
+      clientY: 50 + top
+    });
+    stage.simulateMouseUp({
+      x: 100,
+      y: 50
+    });
+
+
+    assert.equal(rect.width() * rect.scaleX(), 200);
+  });
 });