Fix click stage event on dragend, Fix some Transformer cursor behavior. fix #463

CHANGELOG.md

@@ -12,6 +12,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ### Fixed
 
 * `getClientRect` calculation fix for groups
+* Update of `Konva.Transformer` on `rotateEnabled` change
+* Fix click stage event on dragend
+* Fix some Transformer cursor behavior
 
 ## [2.4.0][2018-09-19]
 

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v2.4.0
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Mon Sep 24 2018
+ * Date: Thu Sep 27 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -11040,7 +11040,10 @@
           }
         } else {
           this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
+          if (Konva.listenClickTap) {
             this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
+          }
+
           if (fireDblClick) {
             this._fire(DBL_CLICK, {
               evt: evt,
@@ -11145,7 +11148,9 @@
         }
       } else {
         this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });
+        if (Konva.listenClickTap) {
           this._fire(TAP, { evt: evt, target: this, currentTarget: this });
+        }
         if (fireDblClick) {
           this._fire(DBL_TAP, {
             evt: evt,
@@ -19440,6 +19445,7 @@
   var ATTR_CHANGE_LIST = [
     'resizeEnabledChange',
     'rotateAnchorOffsetChange',
+    'rotateEnabledChange',
     'enabledAnchorsChange',
     'anchorSizeChange',
     'borderEnabledChange',
@@ -19767,7 +19773,6 @@
 
       // add hover styling
       anchor.on('mouseenter', function() {
-        var layer = this.getLayer();
         var tr = this.getParent();
 
         var rad = Konva.getAngle(tr.rotation());
@@ -19777,15 +19782,14 @@
         var isMirrored = scale.y * scale.x < 0;
         var cursor = getCursor(name, rad, isMirrored);
         anchor.getStage().content.style.cursor = cursor;
-        layer.batchDraw();
+        tr._cursorChange = true;
       });
       anchor.on('mouseout', function() {
-        var layer = this.getLayer();
+        if (!anchor.getStage() || !this.getParent()) {
-        if (!layer) {
           return;
         }
         anchor.getStage().content.style.cursor = '';
-        layer.batchDraw();
+        this.getParent()._cursorChange = false;
       });
       this.add(anchor);
     },
@@ -20245,6 +20249,10 @@
       }
     },
     destroy: function() {
+      // console.log(this.isTransforming() && this.getStage());
+      if (this.getStage() && this._cursorChange) {
+        this.getStage().content.style.cursor = '';
+      }
       Konva.Group.prototype.destroy.call(this);
       this.detach();
       this._removeEvents();

src/Stage.js

@@ -566,7 +566,10 @@
           }
         } else {
           this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
+          if (Konva.listenClickTap) {
             this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
+          }
+
           if (fireDblClick) {
             this._fire(DBL_CLICK, {
               evt: evt,
@@ -671,7 +674,9 @@
         }
       } else {
         this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });
+        if (Konva.listenClickTap) {
           this._fire(TAP, { evt: evt, target: this, currentTarget: this });
+        }
         if (fireDblClick) {
           this._fire(DBL_TAP, {
             evt: evt,

src/shapes/Transformer.js

@@ -4,6 +4,7 @@
   var ATTR_CHANGE_LIST = [
     'resizeEnabledChange',
     'rotateAnchorOffsetChange',
+    'rotateEnabledChange',
     'enabledAnchorsChange',
     'anchorSizeChange',
     'borderEnabledChange',
@@ -331,7 +332,6 @@
 
       // add hover styling
       anchor.on('mouseenter', function() {
-        var layer = this.getLayer();
         var tr = this.getParent();
 
         var rad = Konva.getAngle(tr.rotation());
@@ -341,15 +341,14 @@
         var isMirrored = scale.y * scale.x < 0;
         var cursor = getCursor(name, rad, isMirrored);
         anchor.getStage().content.style.cursor = cursor;
-        layer.batchDraw();
+        tr._cursorChange = true;
       });
       anchor.on('mouseout', function() {
-        var layer = this.getLayer();
+        if (!anchor.getStage() || !this.getParent()) {
-        if (!layer) {
           return;
         }
         anchor.getStage().content.style.cursor = '';
-        layer.batchDraw();
+        this.getParent()._cursorChange = false;
       });
       this.add(anchor);
     },
@@ -809,6 +808,10 @@
       }
     },
     destroy: function() {
+      // console.log(this.isTransforming() && this.getStage());
+      if (this.getStage() && this._cursorChange) {
+        this.getStage().content.style.cursor = '';
+      }
       Konva.Group.prototype.destroy.call(this);
       this.detach();
       this._removeEvents();

test/unit/Container-test.js

@@ -2346,7 +2346,7 @@ suite('Container', function() {
     });
   });
 
-  test.only('getClientRect - nested group with a hidden shapes', function() {
+  test('getClientRect - nested group with a hidden shapes', function() {
     var stage = addStage();
 
     var layer = new Konva.Layer();
@@ -2377,8 +2377,6 @@ suite('Container', function() {
     });
     group1.add(rect2);
 
-    
-
     assert.deepEqual(layer.getClientRect(), {
       x: 50,
       y: 100,

test/unit/Stage-test.js

@@ -733,6 +733,52 @@ suite('Stage', function() {
     assert.equal(Konva.DD.node, undefined);
   });
 
+  // ======================================================
+  test('do not trigger stage click after dragend', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    var rect = new Konva.Rect({
+      x: 0,
+      y: 0,
+      width: 50,
+      height: 50,
+      fill: 'red',
+      draggable: true
+    });
+
+    layer.add(rect);
+    stage.add(layer);
+
+    var clicks = 0;
+
+    stage.on('click', function() {
+      debugger;
+      clicks += 1;
+    });
+
+    // simulate dragging
+    stage.simulateMouseDown({
+      x: 25,
+      y: 25
+    });
+
+    stage.simulateMouseMove({
+      x: 100,
+      y: 100
+    });
+
+    // move rect out of mouse
+    rect.x(-30);
+    rect.y(-30);
+
+    stage.simulateMouseUp({
+      x: 100,
+      y: 100
+    });
+
+    assert.equal(clicks, 0);
+  });
+
   test('can listen click on empty areas', function() {
     var stage = addStage();
     var layer = new Konva.Layer();

test/unit/shapes/Transformer-test.js

@@ -1036,6 +1036,67 @@ suite('Transformer', function() {
     assert.equal(stage.content.style.cursor, 'nwse-resize');
   });
 
+  test('check correct cursor off on Transformer destroy', function() {
+    var stage = addStage();
+    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
+    });
+    layer.add(tr);
+    layer.draw();
+
+    stage.simulateMouseMove({
+      x: 100,
+      y: 100
+    });
+    stage.simulateMouseDown({
+      x: 100,
+      y: 100
+    });
+
+    assert.equal(stage.content.style.cursor, 'nwse-resize');
+
+    var target = stage.getIntersection({
+      x: 100,
+      y: 100
+    });
+    var top = stage.content.getBoundingClientRect().top;
+    tr._handleMouseMove({
+      target: target,
+      clientX: 120,
+      clientY: 100 + top
+    });
+
+    // here is duplicate, because transformer is listening window events
+    tr._handleMouseUp({
+      clientX: 120,
+      clientY: 100 + top
+    });
+    stage.simulateMouseUp({
+      x: 120,
+      y: 100
+    });
+
+    tr.destroy();
+    stage.simulateMouseMove({
+      x: 140,
+      y: 100
+    });
+    assert.equal(stage.content.style.cursor, '');
+  });
+
   test('check correct cursor on scaled parent', function() {
     var stage = addStage();
     var layer = new Konva.Layer({