transformer events fixes, fix readme

CHANGELOG.md

@@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+* Events fixes for `Konva.Transformer`
 * Now `Konva` will keep `id` in a cloned node
 
 ## 4.1.5 - 2020-02-16

README.md

@@ -79,15 +79,7 @@ Konva supports UMD loading. So you can use all possible variants to load the fra
 
 You can also use a CDN: [https://unpkg.com/konva@^4.0.3/konva.js](https://unpkg.com/konva@^4.0.3/konva.js)
 
-### 2 Load via AMD (requirejs):
-
-```javascript
-define(['./konva'], function(Konva) {
-  // your code
-});
-```
-
-### 3 Load with npm:
+### 2 Install with npm:
 
 ```bash
 npm install konva --save
@@ -97,18 +89,33 @@ npm install konva --save
 // The old way (e.g. a CommonJS-style import)
 var Konva = require('konva');
 
-// The modern way (e.g. an ES6-style import)
+// The modern way (e.g. an ES6-style import for webpack, parcel)
 import Konva from 'konva';
-
-// TypeScript
-import Konva from 'konva'; // Allows e.g. "Konva.Stage"
-// Or:
-import * as Konva from 'konva'; // Allows e.g. "Konva.default.Stage"
-// Note that for both TypeScript options, you must supply the TypeScript compiler with the
-// "dom" library flag and the "es2015" library flag (or greater)
 ```
 
-### 4 Minimal bundle
+#### Typescript usage
+
+Add DOM definitions into your `tsconfig.json` and set `esModuleInterop` to `true`:
+
+```
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "lib": [
+        "es6",
+        "dom"
+    ]
+  }
+}
+```
+
+Then use it:
+
+```javascript
+import Konva from 'konva';
+```
+
+### 3 Minimal bundle
 
 ```javascript
 import Konva from 'konva/lib/Core';
@@ -128,9 +135,7 @@ var shape = new Konva.Rect();
 import { Blur } from 'konva/lib/filters/Blur';
 ```
 
-
-
-### 5 NodeJS
+### 4 NodeJS env
 
 We are using [node-canvas](https://github.com/Automattic/node-canvas) to create canvas element.
 Please check installation instructions for it. Then just run

src/shapes/Transformer.ts

@@ -426,8 +426,8 @@ export class Transformer extends Group {
 
     this._transforming = true;
 
-    this._fire('transformstart', { evt: e });
-    this.getNode()._fire('transformstart', { evt: e });
+    this._fire('transformstart', { evt: e, target: this.getNode() });
+    this.getNode()._fire('transformstart', { evt: e, target: this.getNode() });
   }
   _handleMouseMove(e) {
     var x, y, newHypotenuse;
@@ -740,8 +740,8 @@ export class Transformer extends Group {
       y: newAttrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation))
     });
 
-    this._fire('transform', { evt: evt });
-    this.getNode()._fire('transform', { evt: evt });
+    this._fire('transform', { evt: evt, target: this.getNode() });
+    this.getNode()._fire('transform', { evt: evt, target: this.getNode() });
     this.update();
     this.getLayer().batchDraw();
   }

test/unit/shapes/Transformer-test.js

@@ -1499,6 +1499,81 @@ suite('Transformer', function() {
     });
   });
 
+  test.only('transform events check', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 50,
+      y: 50,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow'
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer({
+      node: rect
+    });
+    layer.add(tr);
+    layer.draw();
+
+    var callCount = 0;
+    rect.on('transformstart', function(e) {
+      callCount += 1;
+      assert.equal(e.target, rect);
+    });
+
+    rect.on('transform', function(e) {
+      callCount += 1;
+      assert.equal(e.target, rect);
+    });
+
+    rect.on('transformend', function(e) {
+      callCount += 1;
+      assert.equal(e.target, rect);
+    });
+
+    tr.on('transformstart', function(e) {
+      callCount += 1;
+      assert.equal(e.target, rect);
+    });
+
+    tr.on('transform', function(e) {
+      callCount += 1;
+      assert.equal(e.target, rect);
+    });
+
+    tr.on('transformend', function(e) {
+      callCount += 1;
+      assert.equal(e.target, rect);
+    });
+
+    stage.simulateMouseDown({
+      x: 50,
+      y: 50
+    });
+
+    var top = stage.content.getBoundingClientRect().top;
+    tr._handleMouseMove({
+      target: tr.findOne('.top-left'),
+      clientX: 60,
+      clientY: 60 + top
+    });
+
+    tr._handleMouseUp({
+      clientX: 60,
+      clientY: 60 + top
+    });
+    stage.simulateMouseUp({
+      x: 60,
+      y: 60
+    });
+    assert.equal(callCount, 6);
+  });
+
   test('on force update should clear transform', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
@@ -1867,8 +1942,7 @@ suite('Transformer', function() {
 
     var rect = new Konva.Rect({
       draggable: true,
-      fill: 'yellow',
-      
+      fill: 'yellow'
     });
     layer.add(rect);
 
@@ -1893,7 +1967,7 @@ suite('Transformer', function() {
 
     // stage.simulateMouseDown({x: 0, y: 0});
 
-    var target = stage.getIntersection({ x: 0, y: 0});
+    var target = stage.getIntersection({ x: 0, y: 0 });
     var top = stage.content.getBoundingClientRect().top;
     throw 11;
     debugger;
@@ -1920,14 +1994,8 @@ suite('Transformer', function() {
     });
     layer.draw();
 
-    assert.equal(
-      rect.width() * rect.scaleX(),
-      -100
-    );
-    assert.equal(
-      rect.height() * rect.scaleY(),
-      -100,
-    );
+    assert.equal(rect.width() * rect.scaleX(), -100);
+    assert.equal(rect.height() * rect.scaleY(), -100);
 
     throw 1;
   });
@@ -2633,7 +2701,6 @@ suite('Transformer', function() {
       y: 50
     });
 
-
     assert.equal(rect.width() * rect.scaleX(), 200);
   });
 });