fix cursor on anchors for rotated parent. fix#837

CHANGELOG.md

@@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## Not released:
 
 * Fix line with tension calculations
+* Add `node.getAbsoluteRotation()` method
 
 ## 4.1.2 - 2020-01-08
 

src/Node.ts

@@ -13,7 +13,6 @@ import {
 import { Stage } from './Stage';
 import { Context } from './Context';
 import { Shape } from './Shape';
-import { Layer } from './Layer';
 import { BaseLayer } from './BaseLayer';
 
 export const ids: any = {};
@@ -1756,6 +1755,26 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       y: scaleY
     };
   }
+  /**
+   * get absolute rotation of the node which takes into
+   *  account its ancestor rotations
+   * @method
+   * @name Konva.Node#getAbsoluteRotation
+   * @returns {Number}
+   * @example
+   * // get absolute scale x
+   * var rotation = node.getAbsoluteRotation();
+   */
+  getAbsoluteRotation() {
+    var parent: Node = this;
+    var rotation = 0;
+
+    while (parent) {
+      rotation += parent.rotation();
+      parent = parent.getParent();
+    }
+    return rotation;
+  }
   /**
    * get transform of the node
    * @method

src/shapes/Transformer.ts

@@ -360,7 +360,7 @@ export class Transformer extends Group {
 
     // add hover styling
     anchor.on('mouseenter', () => {
-      var rad = Konva.getAngle(this.rotation());
+      var rad = Konva.getAngle(this.getAbsoluteRotation());
 
       var scale = this.getNode().getAbsoluteScale();
       // If scale.y < 0 xor scale.x < 0 we need to flip (not rotate).

test/unit/shapes/Line-test.js

@@ -299,7 +299,7 @@ suite('Line', function() {
       y: 0,
       points: [75, 75, 100, 200, 300, 140],
       tension: 0.5,
-      stroke: '#0f0',
+      stroke: '#0f0'
     });
     layer.add(line);
 

test/unit/shapes/Transformer-test.js

@@ -1412,6 +1412,38 @@ suite('Transformer', function() {
     assert.equal(stage.content.style.cursor, 'nwse-resize');
   });
 
+  test('check correct cursor on rotated parent', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer({
+      x: 100,
+      y: -50,
+      rotation: 90
+    });
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 50,
+      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: 50,
+      y: 1
+    });
+    assert.equal(stage.content.style.cursor, 'ns-resize');
+  });
+
   test('stopTransform method', function() {
     var stage = addStage();
     var layer = new Konva.Layer();