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

CHANGELOG.md

@@ -5,6 +5,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+* Fix `Konva.Transformer` behavior on scaled with CSS stage
+
 ## 4.1.3 - 2020-01-30
 
 * Fix line with tension calculations

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.1.3
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Thu Jan 30 2020
+   * Date: Thu Feb 06 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -1528,7 +1528,7 @@
        * @param {Konva.Shape} shape
        */
       Context.prototype.fillShape = function (shape) {
-          if (shape.getFillEnabled()) {
+          if (shape.fillEnabled()) {
               this._fill(shape);
           }
       };
@@ -1542,7 +1542,7 @@
        * @param {Konva.Shape} shape
        */
       Context.prototype.strokeShape = function (shape) {
-          if (shape.getStrokeEnabled()) {
+          if (shape.hasStroke()) {
               this._stroke(shape);
           }
       };
@@ -1556,12 +1556,8 @@
        * @param {Konva.Shape} shape
        */
       Context.prototype.fillStrokeShape = function (shape) {
-          if (shape.getFillEnabled()) {
+          this.fillShape(shape);
-              this._fill(shape);
+          this.strokeShape(shape);
-          }
-          if (shape.getStrokeEnabled()) {
-              this._stroke(shape);
-          }
       };
       Context.prototype.getTrace = function (relaxed) {
           var traceArr = this.traceArr, len = traceArr.length, str = '', n, trace, method, args;
@@ -2174,6 +2170,11 @@
           shape._fillFuncHit(this);
           this.restore();
       };
+      HitContext.prototype.strokeShape = function (shape) {
+          if (shape.hasHitStroke()) {
+              this._stroke(shape);
+          }
+      };
       HitContext.prototype._stroke = function (shape) {
           if (shape.hasHitStroke()) {
               // ignore strokeScaleEnabled for Text
@@ -6722,8 +6723,8 @@
           var stage = this.getStage();
           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.content.insertBefore(this.getCanvas()._canvas, stage.children[index + 1].getCanvas()._canvas);
               }
               else {
                   stage.content.appendChild(this.getCanvas()._canvas);
@@ -6750,8 +6751,8 @@
               return false;
           }
           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.content.insertBefore(this.getCanvas()._canvas, stage.children[this.index + 1].getCanvas()._canvas);
           }
           else {
               stage.content.appendChild(this.getCanvas()._canvas);
@@ -6763,7 +6764,7 @@
           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, children[this.index + 1].getCanvas()._canvas);
               }
@@ -6776,7 +6777,7 @@
           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, children[1].getCanvas()._canvas);
               }
@@ -7210,7 +7211,7 @@
        * @returns {Boolean}
        */
       Shape.prototype.hasFill = function () {
-          return !!(this.fill() ||
+          return this.fillEnabled() && !!(this.fill() ||
               this.fillPatternImage() ||
               this.fillLinearGradientColorStops() ||
               this.fillRadialGradientColorStops());
@@ -14918,23 +14919,10 @@
           var x, y, newHypotenuse;
           var anchorNode = this.findOne('.' + this._movingAnchorName);
           var stage = anchorNode.getStage();
-          var box = stage.getContent().getBoundingClientRect();
+          stage.setPointersPositions(e);
-          var zeroPoint = {
+          anchorNode.setAbsolutePosition(stage.getPointerPosition());
-              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
-          };
-          anchorNode.setAbsolutePosition(newAbsPos);
           var keepProportion = this.keepRatio() || e.shiftKey;
           var padding = this.padding();
-          // console.log(keepProportion);
           if (this._movingAnchorName === 'top-left') {
               if (keepProportion) {
                   newHypotenuse = Math.sqrt(Math.pow(this.findOne('.bottom-right').x() - anchorNode.x() - padding * 2, 2) +

package.json

@@ -48,7 +48,7 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-typescript2": "^0.25.2",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.5"
   },
   "keywords": [
     "canvas",

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) {
+  fillShape(shape: Shape) {
-    if (shape.getFillEnabled()) {
+    if (shape.fillEnabled()) {
       this._fill(shape);
     }
   }
@@ -125,8 +126,8 @@ export class Context {
    * @name Konva.Context#strokeShape
    * @param {Konva.Shape} shape
    */
-  strokeShape(shape) {
+  strokeShape(shape: Shape) {
-    if (shape.getStrokeEnabled()) {
+    if (shape.hasStroke()) {
       this._stroke(shape);
     }
   }
@@ -141,13 +142,9 @@ export class Context {
    * @name Konva.Context#fillStrokeShape
    * @param {Konva.Shape} shape
    */
-  fillStrokeShape(shape) {
+  fillStrokeShape(shape: Shape) {
-    if (shape.getFillEnabled()) {
+    this.fillShape(shape);
-      this._fill(shape);
+    this.strokeShape(shape);
-    }
-    if (shape.getStrokeEnabled()) {
-      this._stroke(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();
+    stage.setPointersPositions(e);
-    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
-    };
 
-    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(

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);
+  });
 });