Add getActiveAnchor() method to Konva.Transformer

CHANGELOG.md

@@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## Not released:
 
 * Add `rotationSnapTolerance` property to `Konva.Transformer`.
+* Add `getActiveAnchor()` method to `Konva.Transformer`
 
 ## 4.1.6 - 2020-02-25
 

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.1.6
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Tue Feb 25 2020
+   * Date: Tue Mar 03 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -134,7 +134,7 @@
        */
       dragDistance: 3,
       /**
-       * Use degree values for angle properties. You may set this property to false if you want to use radiant values.
+       * Use degree values for angle properties. You may set this property to false if you want to use radian values.
        * @property angleDeg
        * @default true
        * @memberof Konva
@@ -2309,7 +2309,7 @@
               catch (err) {
                   Util.error('Unable to get data URL. ' +
                       err.message +
-                      '. For more info read https://konvajs.org/docs/posts/Tainted_Canvas.html.');
+                      ' For more info read https://konvajs.org/docs/posts/Tainted_Canvas.html.');
                   return '';
               }
           }
@@ -2893,7 +2893,7 @@
                   catch (e) {
                       Util.error('Unable to apply filter. ' +
                           e.message +
-                          '. This post my help you https://konvajs.org/docs/posts/Tainted_Canvas.html.');
+                          ' This post my help you https://konvajs.org/docs/posts/Tainted_Canvas.html.');
                   }
                   this._filterUpToDate = true;
               }
@@ -14702,6 +14702,7 @@
    * @param {Boolean} [config.resizeEnabled] Default is true
    * @param {Boolean} [config.rotateEnabled] Default is true
    * @param {Array} [config.rotationSnaps] Array of angles for rotation snaps. Default is []
+   * @param {Number} [config.rotationSnapTolerance] Snapping tolerance. If closer than this it will snap. Default is 5
    * @param {Number} [config.rotateAnchorOffset] Default is 50
    * @param {Number} [config.padding] Default is 0
    * @param {Boolean} [config.borderEnabled] Should we draw border? Default is true
@@ -14790,6 +14791,17 @@
       Transformer.prototype.getNode = function () {
           return this._node;
       };
+      /**
+       * return the name of current active anchor
+       * @method
+       * @name Konva.Transformer#detach
+       * @returns {String | Null}
+       * @example
+       * transformer.detach();
+       */
+      Transformer.prototype.getActiveAnchor = function () {
+          return this._movingAnchorName;
+      };
       /**
        * detach transformer from an attached node
        * @method
@@ -15048,7 +15060,7 @@
               var alpha = Konva.getAngle(this.getNode().rotation());
               var newAlpha = Util._degToRad(newRotation);
               var snaps = this.rotationSnaps();
-              var offset = 0.1;
+              var offset = Konva.getAngle(this.rotationSnapTolerance());
               for (var i = 0; i < snaps.length; i++) {
                   var angle = Konva.getAngle(snaps[i]);
                   var dif = Math.abs(angle - Util._degToRad(newRotation)) % (Math.PI * 2);
@@ -15128,6 +15140,7 @@
               if (node) {
                   node.fire('transformend', { evt: e, target: node });
               }
+              this._movingAnchorName = null;
           }
       };
       Transformer.prototype._fitNodeInto = function (newAttrs, evt) {
@@ -15412,6 +15425,20 @@
    * transformer.rotateAnchorOffset(100);
    */
   Factory.addGetterSetter(Transformer, 'rotateAnchorOffset', 50, getNumberValidator());
+  /**
+   * get/set distance for rotation tolerance
+   * @name Konva.Transformer#rotationSnapTolerance
+   * @method
+   * @param {Number} tolerance
+   * @returns {Number}
+   * @example
+   * // get
+   * var rotationSnapTolerance = transformer.rotationSnapTolerance();
+   *
+   * // set
+   * transformer.rotationSnapTolerance(100);
+   */
+  Factory.addGetterSetter(Transformer, 'rotationSnapTolerance', 5, getNumberValidator());
   /**
    * get/set visibility of border
    * @name Konva.Transformer#borderEnabled

src/shapes/Transformer.ts

@@ -252,6 +252,17 @@ export class Transformer extends Group {
   getNode() {
     return this._node;
   }
+  /**
+   * return the name of current active anchor
+   * @method
+   * @name Konva.Transformer#detach
+   * @returns {String | Null}
+   * @example
+   * transformer.detach();
+   */
+  getActiveAnchor() {
+    return this._movingAnchorName;
+  }
   /**
    * detach transformer from an attached node
    * @method
@@ -703,10 +714,11 @@ export class Transformer extends Group {
       window.removeEventListener('touchend', this._handleMouseUp, true);
       var node = this.getNode();
       this._fire('transformend', { evt: e, target: node });
-      
+
       if (node) {
-        node.fire('transformend', { evt: e, target: node  });
+        node.fire('transformend', { evt: e, target: node });
       }
+      this._movingAnchorName = null;
     }
   }
   _fitNodeInto(newAttrs, evt) {

test/unit/shapes/Transformer-test.js

@@ -889,7 +889,7 @@ suite('Transformer', function() {
     var layer = new Konva.Layer();
     stage.add(layer);
 
-    const rect = new Konva.Rect({
+    var rect = new Konva.Rect({
       x: 50,
       y: 50,
       width: 180,
@@ -1524,16 +1524,19 @@ suite('Transformer', function() {
     rect.on('transformstart', function(e) {
       callCount += 1;
       assert.equal(e.target, rect);
+      assert.equal(tr.getActiveAnchor(), 'top-left');
     });
 
     rect.on('transform', function(e) {
       callCount += 1;
       assert.equal(e.target, rect);
+      assert.equal(tr.getActiveAnchor(), 'top-left');
     });
 
     rect.on('transformend', function(e) {
       callCount += 1;
       assert.equal(e.target, rect);
+      assert.equal(tr.getActiveAnchor(), 'top-left');
     });
 
     tr.on('transformstart', function(e) {
@@ -1572,6 +1575,7 @@ suite('Transformer', function() {
       y: 60
     });
     assert.equal(callCount, 6);
+    assert.equal(tr.getActiveAnchor(), null);
   });
 
   test('on force update should clear transform', function() {