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

src/BaseLayer.ts

@@ -99,10 +99,10 @@ export abstract class BaseLayer extends Container<Group | Shape> {
     if (stage) {
       stage.content.removeChild(this.getCanvas()._canvas);
 
-      if (index < stage.getChildren().length - 1) {
+      if (index < stage.children.length - 1) {
         stage.content.insertBefore(
           this.getCanvas()._canvas,
-          stage.getChildren()[index + 1].getCanvas()._canvas
+          stage.children[index + 1].getCanvas()._canvas
         );
       } else {
         stage.content.appendChild(this.getCanvas()._canvas);
@@ -130,10 +130,10 @@ export abstract class BaseLayer extends Container<Group | Shape> {
     }
     stage.content.removeChild(this.getCanvas()._canvas);
 
-    if (this.index < stage.getChildren().length - 1) {
+    if (this.index < stage.children.length - 1) {
       stage.content.insertBefore(
         this.getCanvas()._canvas,
-        stage.getChildren()[this.index + 1].getCanvas()._canvas
+        stage.children[this.index + 1].getCanvas()._canvas
       );
     } else {
       stage.content.appendChild(this.getCanvas()._canvas);
@@ -145,7 +145,7 @@ export abstract class BaseLayer extends Container<Group | Shape> {
     if (Node.prototype.moveDown.call(this)) {
       var stage = this.getStage();
       if (stage) {
-        var children = stage.getChildren();
+        var children = stage.children;
         stage.content.removeChild(this.getCanvas()._canvas);
         stage.content.insertBefore(
           this.getCanvas()._canvas,
@@ -161,7 +161,7 @@ export abstract class BaseLayer extends Container<Group | Shape> {
     if (Node.prototype.moveToBottom.call(this)) {
       var stage = this.getStage();
       if (stage) {
-        var children = stage.getChildren();
+        var children = stage.children;
         stage.content.removeChild(this.getCanvas()._canvas);
         stage.content.insertBefore(
           this.getCanvas()._canvas,

src/Context.ts

@@ -1,6 +1,7 @@
 import { Util } from './Util';
 import { Konva } from './Global';
 import { Canvas } from './Canvas';
+import { Shape } from './Shape';
 
 var COMMA = ',',
   OPEN_PAREN = '(',
@@ -110,8 +111,8 @@ export class Context {
    * @name Konva.Context#fillShape
    * @param {Konva.Shape} shape
    */
-  fillShape(shape) {
-    if (shape.getFillEnabled()) {
+  fillShape(shape: Shape) {
+    if (shape.fillEnabled()) {
       this._fill(shape);
     }
   }
@@ -125,8 +126,8 @@ export class Context {
    * @name Konva.Context#strokeShape
    * @param {Konva.Shape} shape
    */
-  strokeShape(shape) {
-    if (shape.getStrokeEnabled()) {
+  strokeShape(shape: Shape) {
+    if (shape.hasStroke()) {
       this._stroke(shape);
     }
   }
@@ -141,13 +142,9 @@ export class Context {
    * @name Konva.Context#fillStrokeShape
    * @param {Konva.Shape} shape
    */
-  fillStrokeShape(shape) {
-    if (shape.getFillEnabled()) {
-      this._fill(shape);
-    }
-    if (shape.getStrokeEnabled()) {
-      this._stroke(shape);
-    }
+  fillStrokeShape(shape: Shape) {
+    this.fillShape(shape);
+    this.strokeShape(shape);
   }
 
   getTrace(relaxed) {
@@ -825,6 +822,11 @@ export class HitContext extends Context {
     shape._fillFuncHit(this);
     this.restore();
   }
+  strokeShape(shape: Shape) {
+    if (shape.hasHitStroke()) {
+      this._stroke(shape);
+    }
+  }
   _stroke(shape) {
     if (shape.hasHitStroke()) {
       // ignore strokeScaleEnabled for Text

src/Shape.ts

@@ -349,7 +349,7 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
    * @returns {Boolean}
    */
   hasFill() {
-    return !!(
+    return this.fillEnabled() && !!(
       this.fill() ||
       this.fillPatternImage() ||
       this.fillLinearGradientColorStops() ||

src/shapes/Transformer.ts

@@ -434,28 +434,14 @@ export class Transformer extends Group {
     var anchorNode = this.findOne('.' + this._movingAnchorName);
     var stage = anchorNode.getStage();
 
-    var box = stage.getContent().getBoundingClientRect();
-    var zeroPoint = {
-      x: box.left,
-      y: box.top
-    };
-    var pointerPos = {
-      left: e.clientX !== undefined ? e.clientX : e.touches[0].clientX,
-      top: e.clientX !== undefined ? e.clientY : e.touches[0].clientY
-    };
-    var newAbsPos = {
-      x: pointerPos.left - zeroPoint.x,
-      y: pointerPos.top - zeroPoint.y
-    };
+    stage.setPointersPositions(e);
 
-    anchorNode.setAbsolutePosition(newAbsPos);
+    anchorNode.setAbsolutePosition(stage.getPointerPosition());
 
     var keepProportion = this.keepRatio() || e.shiftKey;
 
     var padding = this.padding();
 
-    // console.log(keepProportion);
-
     if (this._movingAnchorName === 'top-left') {
       if (keepProportion) {
         newHypotenuse = Math.sqrt(