Fix transformer rotation when parent of a node is rotated too

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 7.2.3
+
+* Fix transformer rotation when parent of a node is rotated too.
+
 ## 7.2.2
 
 * Fix wrong size calculations for `Konva.Line` with tension

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v7.2.2
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Tue Jan 26 2021
+   * Date: Fri Feb 12 2021
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -4915,7 +4915,7 @@
    */
   addGetterSetter(Node, 'name', '', getStringValidator());
   /**
-   * get/set name
+   * get/set name.
    * @name Konva.Node#name
    * @method
    * @param {String} name
@@ -5473,7 +5473,7 @@
        * You can provide a string with '#' for id selections and '.' for name selections.
        * Or a function that will return true/false when a node is passed through.  See example below.
        * With strings you can also select by type or class name. Pass multiple selectors
-       * separated by a space.
+       * separated by a comma.
        * @method
        * @name Konva.Container#find
        * @param {String | Function} selector
@@ -15056,7 +15056,7 @@
           }
           this._nodes = nodes;
           if (nodes.length === 1) {
-              this.rotation(nodes[0].rotation());
+              this.rotation(nodes[0].getAbsoluteRotation());
           }
           else {
               this.rotation(0);
@@ -15068,7 +15068,7 @@
               var onChange = function () {
                   //
                   if (_this.nodes().length === 1) {
-                      _this.rotation(_this.nodes()[0].rotation());
+                      _this.rotation(_this.nodes()[0].getAbsoluteRotation());
                   }
                   _this._resetTransformCache();
                   if (!_this._transforming && !_this.isDragging()) {
@@ -15283,7 +15283,7 @@
               name: name + ' _anchor',
               dragDistance: 0,
               // make it draggable,
-              // so activating the anchror will not start drag&drop of any parent
+              // so activating the anchor will not start drag&drop of any parent
               draggable: true,
               hitStrokeWidth: TOUCH_DEVICE ? 10 : 'auto',
           });

src/Container.ts

@@ -28,9 +28,9 @@ export interface ContainerConfig extends NodeConfig {
  * @@nodeParams
  * @@containerParams
  */
-export abstract class Container<ChildType extends Node> extends Node<
+export abstract class Container<
-  ContainerConfig
+  ChildType extends Node
-> {
+> extends Node<ContainerConfig> {
   children = new Collection<ChildType>();
 
   /**
@@ -154,7 +154,7 @@ export abstract class Container<ChildType extends Node> extends Node<
    * You can provide a string with '#' for id selections and '.' for name selections.
    * Or a function that will return true/false when a node is passed through.  See example below.
    * With strings you can also select by type or class name. Pass multiple selectors
-   * separated by a space.
+   * separated by a comma.
    * @method
    * @name Konva.Container#find
    * @param {String | Function} selector

src/Node.ts

@@ -2809,7 +2809,7 @@ addGetterSetter(Node, 'opacity', 1, getNumberValidator());
 addGetterSetter(Node, 'name', '', getStringValidator());
 
 /**
- * get/set name
+ * get/set name.
  * @name Konva.Node#name
  * @method
  * @param {String} name

src/shapes/Transformer.ts

@@ -283,7 +283,7 @@ export class Transformer extends Group {
     }
     this._nodes = nodes;
     if (nodes.length === 1) {
-      this.rotation(nodes[0].rotation());
+      this.rotation(nodes[0].getAbsoluteRotation());
     } else {
       this.rotation(0);
     }
@@ -295,7 +295,7 @@ export class Transformer extends Group {
       const onChange = () => {
         //
         if (this.nodes().length === 1) {
-          this.rotation(this.nodes()[0].rotation());
+          this.rotation(this.nodes()[0].getAbsoluteRotation());
         }
 
         this._resetTransformCache();
@@ -524,7 +524,7 @@ export class Transformer extends Group {
       name: name + ' _anchor',
       dragDistance: 0,
       // make it draggable,
-      // so activating the anchror will not start drag&drop of any parent
+      // so activating the anchor will not start drag&drop of any parent
       draggable: true,
       hitStrokeWidth: TOUCH_DEVICE ? 10 : 'auto',
     });

test/unit/shapes/Transformer-test.js

@@ -239,6 +239,80 @@ suite('Transformer', function () {
     assert.equal(tr.rotation(), 45);
   });
 
+  test('try to fit simple rotated rectangle in group', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var group = new Konva.Group({
+      rotation: 45,
+      x: 50,
+      y: 50,
+    });
+    layer.add(group);
+
+    var rect = new Konva.Rect({
+      draggable: true,
+      width: 100,
+      height: 150,
+      fill: 'yellow',
+    });
+    group.add(rect);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.nodes([rect]);
+
+    layer.draw();
+
+    tr._fitNodesInto({
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 150,
+      rotation: 0,
+    });
+
+    assert.almostEqual(rect.x(), 0);
+    assert.almostEqual(rect.y(), 0);
+    assert.almostEqual(tr.width(), 100);
+    assert.almostEqual(tr.height(), 150);
+    assert.almostEqual(rect.rotation(), -45);
+  });
+
+  test('transformer should follow rotation on single node inside group', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var group = new Konva.Group({
+      rotation: 45,
+    });
+    layer.add(group);
+
+    var rect = new Konva.Rect({
+      x: 100,
+      y: 60,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow',
+    });
+    group.add(rect);
+
+    var tr = new Konva.Transformer({
+      nodes: [rect],
+    });
+    group.add(tr);
+
+    layer.draw();
+
+    rect.rotation(45);
+    layer.draw();
+
+    assert.equal(isClose(tr.rotation(), 90), true);
+  });
+
   test('try to fit simple rotated rectangle - 2', function () {
     var stage = addStage();
     var layer = new Konva.Layer();
@@ -2332,7 +2406,7 @@ suite('Transformer', function () {
       x: 50,
       y: 1,
     });
-    assert.equal(stage.content.style.cursor, 'ew-resize');
+    assert.equal(stage.content.style.cursor, 'ns-resize');
   });
 
   test('check drag with transformer', function () {