update CHANGELOG with new version

CHANGELOG.md

@@ -3,8 +3,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-- no released:
+## 7.0.1 - 2020-06-29
+
 * Fixes for different font families support.
+* Fixes for `Konva.Transformer` positions
+* Types fixes for better Typescript support
 
 
 ## 7.0.0 - 2020-06-23

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v7.0.0
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Thu Jun 25 2020
+   * Date: Mon Jun 29 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -3514,7 +3514,7 @@
           return absoluteTransform.getTranslation();
       };
       Node.prototype.setAbsolutePosition = function (pos) {
-          var origTrans = this._clearTransform(), it;
+          var origTrans = this._clearTransform();
           // don't clear translation
           this.attrs.x = origTrans.x;
           this.attrs.y = origTrans.y;
@@ -3522,7 +3522,7 @@
           delete origTrans.y;
           // important, use non cached value
           this._clearCache(TRANSFORM);
-          it = this._getAbsoluteTransform();
+          var it = this._getAbsoluteTransform().copy();
           it.invert();
           it.translate(pos.x, pos.y);
           pos = {
@@ -3531,6 +3531,8 @@
           };
           this._setTransform(origTrans);
           this.setPosition({ x: pos.x, y: pos.y });
+          this._clearCache(TRANSFORM);
+          this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
           return this;
       };
       Node.prototype._setTransform = function (trans) {
@@ -15445,9 +15447,7 @@
                   .multiply(parentTransform)
                   .multiply(localTransform);
               var attrs = newLocalTransform.decompose();
-              node._batchTransformChanges(function () {
-                  node.setAttrs(attrs);
-              });
+              node.setAttrs(attrs);
               _this._fire('transform', { evt: evt, target: node });
               node._fire('transform', { evt: evt, target: node });
           });
@@ -15468,9 +15468,7 @@
       };
       Transformer.prototype._batchChangeChild = function (selector, attrs) {
           var anchor = this.findOne(selector);
-          anchor._batchTransformChanges(function () {
-              anchor.setAttrs(attrs);
-          });
+          anchor.setAttrs(attrs);
       };
       Transformer.prototype.update = function () {
           var _this = this;
@@ -15483,17 +15481,15 @@
           var padding = this.padding();
           var anchorSize = this.anchorSize();
           this.find('._anchor').each(function (node) {
-              node._batchTransformChanges(function () {
-                  node.setAttrs({
-                      width: anchorSize,
-                      height: anchorSize,
-                      offsetX: anchorSize / 2,
-                      offsetY: anchorSize / 2,
-                      stroke: _this.anchorStroke(),
-                      strokeWidth: _this.anchorStrokeWidth(),
-                      fill: _this.anchorFill(),
-                      cornerRadius: _this.anchorCornerRadius(),
-                  });
+              node.setAttrs({
+                  width: anchorSize,
+                  height: anchorSize,
+                  offsetX: anchorSize / 2,
+                  offsetY: anchorSize / 2,
+                  stroke: _this.anchorStroke(),
+                  strokeWidth: _this.anchorStrokeWidth(),
+                  fill: _this.anchorFill(),
+                  cornerRadius: _this.anchorCornerRadius(),
               });
           });
           this._batchChangeChild('.top-left', {

src/Layer.ts

@@ -54,7 +54,7 @@ var HASH = '#',
  * // now you can add shapes, groups into the layer
  */
 
-export abstract class Layer extends Container<Group | Shape> {
+export class Layer extends Container<Group | Shape> {
   canvas = new SceneCanvas();
   hitCanvas = new HitCanvas({
     pixelRatio: 1,

src/Node.ts

@@ -1212,8 +1212,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     return absoluteTransform.getTranslation();
   }
   setAbsolutePosition(pos) {
-    var origTrans = this._clearTransform(),
-      it;
+    var origTrans = this._clearTransform();
 
     // don't clear translation
     this.attrs.x = origTrans.x;
@@ -1223,7 +1222,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
 
     // important, use non cached value
     this._clearCache(TRANSFORM);
-    it = this._getAbsoluteTransform();
+    var it = this._getAbsoluteTransform().copy();
 
     it.invert();
     it.translate(pos.x, pos.y);
@@ -1233,6 +1232,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     };
     this._setTransform(origTrans);
     this.setPosition({ x: pos.x, y: pos.y });
+    this._clearCache(TRANSFORM);
+    this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
 
     return this;
   }

src/shapes/Transformer.ts

@@ -825,6 +825,7 @@ export class Transformer extends Group {
 
     x = absPos.x;
     y = absPos.y;
+
     var width =
       this.findOne('.bottom-right').x() - this.findOne('.top-left').x();
 
@@ -1011,9 +1012,7 @@ export class Transformer extends Group {
         .multiply(localTransform);
 
       const attrs = newLocalTransform.decompose();
-      node._batchTransformChanges(() => {
-        node.setAttrs(attrs);
-      });
+      node.setAttrs(attrs);
       this._fire('transform', { evt: evt, target: node });
       node._fire('transform', { evt: evt, target: node });
     });
@@ -1035,9 +1034,7 @@ export class Transformer extends Group {
 
   _batchChangeChild(selector: string, attrs: any) {
     const anchor = this.findOne(selector);
-    anchor._batchTransformChanges(() => {
-      anchor.setAttrs(attrs);
-    });
+    anchor.setAttrs(attrs);
   }
 
   update() {
@@ -1052,17 +1049,15 @@ export class Transformer extends Group {
 
     var anchorSize = this.anchorSize();
     this.find('._anchor').each((node) => {
-      node._batchTransformChanges(() => {
-        node.setAttrs({
-          width: anchorSize,
-          height: anchorSize,
-          offsetX: anchorSize / 2,
-          offsetY: anchorSize / 2,
-          stroke: this.anchorStroke(),
-          strokeWidth: this.anchorStrokeWidth(),
-          fill: this.anchorFill(),
-          cornerRadius: this.anchorCornerRadius(),
-        });
+      node.setAttrs({
+        width: anchorSize,
+        height: anchorSize,
+        offsetX: anchorSize / 2,
+        offsetY: anchorSize / 2,
+        stroke: this.anchorStroke(),
+        strokeWidth: this.anchorStrokeWidth(),
+        fill: this.anchorFill(),
+        cornerRadius: this.anchorCornerRadius(),
       });
     });
 

test/unit/shapes/Transformer-test.js

@@ -1318,6 +1318,48 @@ suite('Transformer', function () {
     });
   });
 
+  test('slightly move for cache check (top-left anchor)', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 20,
+      y: 20,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow',
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer({
+      nodes: [rect],
+    });
+    layer.add(tr);
+
+    layer.draw();
+
+    var anchor = tr.findOne('.top-left');
+    assert.almostEqual(anchor.getAbsolutePosition().x, 20);
+
+    tr.simulateMouseDown({
+      x: 20,
+      y: 20,
+    });
+
+    tr.simulateMouseMove({
+      x: 20,
+      y: 20,
+    });
+
+    tr.simulateMouseUp();
+    layer.draw();
+
+    assert.almostEqual(rect.x(), 20);
+    assert.almostEqual(rect.y(), 20);
+  });
+
   test('rotation snaps', function () {
     var stage = addStage();
     var layer = new Konva.Layer();