update rotation of transformer automatically. close #976

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v7.0.7
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Wed Sep 02 2020
+   * Date: Mon Sep 07 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -3026,7 +3026,7 @@
        * @method
        * @name Konva.Node#on
        * @param {String} evtStr e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo'
-       * @param {Function} handler The handler function is passed an event object
+       * @param {Function} handler The handler function. The first argument of that function is event object. Event object has `target` as main target of the event, `currentTarget` as current node listener and `evt` as native browser event.
        * @returns {Konva.Node}
        * @example
        * // add click listener
@@ -14919,6 +14919,10 @@
                   .map(function (prop) { return prop + 'Change.' + EVENTS_NAME; })
                   .join(' ');
               var onChange = function () {
+                  //
+                  if (_this.nodes().length === 1) {
+                      _this.rotation(_this.nodes()[0].rotation());
+                  }
                   _this._resetTransformCache();
                   if (!_this._transforming) {
                       _this.update();

src/Node.ts

@@ -665,7 +665,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * @method
    * @name Konva.Node#on
    * @param {String} evtStr e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo'
-   * @param {Function} handler The handler function is passed an event object
+   * @param {Function} handler The handler function. The first argument of that function is event object. Event object has `target` as main target of the event, `currentTarget` as current node listener and `evt` as native browser event.
    * @returns {Konva.Node}
    * @example
    * // add click listener

src/shapes/Transformer.ts

@@ -292,6 +292,11 @@ export class Transformer extends Group {
         .join(' ');
 
       const onChange = () => {
+        //
+        if (this.nodes().length === 1) {
+          this.rotation(this.nodes()[0].rotation());
+        }
+
         this._resetTransformCache();
         if (!this._transforming) {
           this.update();

test/unit/shapes/Text-test.js

@@ -424,6 +424,35 @@ suite('Text', function () {
     assert.equal(text.textArr[2].text.slice(-1), '…');
   });
 
+  // ======================================================
+  test.skip('multiline with ellipsis', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var text = new Konva.Text({
+      x: 10,
+      y: 10,
+      text:
+        "HEADING\n\nAll the world's a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.",
+      fontSize: 14,
+      fontFamily: 'Calibri',
+      fontStyle: 'normal',
+      width: 100,
+      padding: 0,
+      align: 'center',
+      height: 100,
+      ellipsis: true,
+    });
+
+    layer.add(text);
+    stage.add(layer);
+
+    assert.equal(text.textArr.length, 3);
+    assert.equal(text.textArr[2].text.slice(-1), '…');
+
+    throw 1;
+  });
+
   // ======================================================
   test('text multi line with justify align', function () {
     var stage = addStage();

test/unit/shapes/Transformer-test.js

@@ -211,6 +211,34 @@ suite('Transformer', function () {
     assert.almostEqual(tr.rotation(), rect.rotation());
   });
 
+  test('transformer should follow rotation on single node', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 100,
+      y: 60,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow',
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer({
+      nodes: [rect],
+    });
+    layer.add(tr);
+
+    layer.draw();
+
+    rect.rotation(45);
+    layer.draw();
+
+    assert.equal(tr.rotation(), 45);
+  });
+
   test('try to fit simple rotated rectangle - 2', function () {
     var stage = addStage();
     var layer = new Konva.Layer();