update stage events flow, rename resizer to transformer

.eslintrc

@@ -198,7 +198,7 @@
     ],
     "spaced-comment": 0,
     "spaced-line-comment": [0, "always"],
-    "strict": [2, "function"],
+    "strict": [0, "function"],
     "use-isnan": 2,
     "valid-jsdoc": 0,
     "valid-typeof": 2,

CHANGELOG.md

@@ -1,323 +1,381 @@
 # Change Log
+
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## [Not released][Not released]
+## [Not released][not released]
+
+### Added
+
+* new `Konva.Transformer` group that allow simple resize, and rotate of a shape.
+
+## Changed
+
+* stage events are slightly changed. `mousedown`, `click`, `mouseup`, `dblclick`, `touchstart`, `touchend`, `tap`, `dbltap` will be triggered when clicked on empty areas.
 
 ## Fixed
-- Some typescript fixes
+
+* Some typescript fixes
 
 ## [1.7.6][2017-11-01]
 
 ## Fixed
-- Some typescript fixes
+
+* Some typescript fixes
 
 ## [1.7.4][2017-10-30]
 
 ## Fixed
-- `isBrowser` detection for electron
+
+* `isBrowser` detection for electron
 
 ## [1.7.3][2017-10-19]
 
 ### Changed
-- Changing size of a stage will redraw it in synchronous way
+
+* Changing size of a stage will redraw it in synchronous way
 
 ### Fixed
-- Some fixes special for nodejs
 
+* Some fixes special for nodejs
 
 ## [1.7.2][2017-10-11]
 
 ### Fixed
-- Fixed `Konva.document is undefined`
+
+* Fixed `Konva.document is undefined`
 
 ## [1.7.1][2017-10-11]
 
 ### Changed
-- Konva for browser env and Konva for nodejs env are separate packages now. You can use `konva-node` for NodeJS env.
+
+* Konva for browser env and Konva for nodejs env are separate packages now. You can use `konva-node` for NodeJS env.
 
 ## [1.7.0][2017-10-08]
 
 ### Fixed
-- Several typescript fixes
+
+* Several typescript fixes
 
 ### Changed
-- Default value for `dragDistance` is changed to 3px.
+
-- Fix rare error throw on drag
+* Default value for `dragDistance` is changed to 3px.
-- Caching with height = 0 or width = 0 with throw async error. Caching will be ignored.
+* Fix rare error throw on drag
+* Caching with height = 0 or width = 0 with throw async error. Caching will be ignored.
 
 ## [1.6.8][2017-08-19]
 
 ### Changed
-- The `node.getClientRect()` calculation is changed a bit. It is more powerfull and correct. Also it takes parent transform into account. See docs.
+
-- Upgrade nodejs deps
+* The `node.getClientRect()` calculation is changed a bit. It is more powerfull and correct. Also it takes parent transform into account. See docs.
+* Upgrade nodejs deps
 
 ## [1.6.7][2017-07-28]
 
 ### Fixed
-- Fix bug with double trigger wheel in Firefox
-- Fix `node.getClientRect()` calculation in a case of Group + invisible child
-- Fix dblclick issue https://github.com/konvajs/konva/issues/252
 
+* Fix bug with double trigger wheel in Firefox
+* Fix `node.getClientRect()` calculation in a case of Group + invisible child
+* Fix dblclick issue https://github.com/konvajs/konva/issues/252
 
 ## [1.6.3][2017-05-24]
 
 ### Fixed
-- Fixed bug with pointer detection. css 3d transformed stage will not work now.
+
+* Fixed bug with pointer detection. css 3d transformed stage will not work now.
 
 ## [1.6.2][2017-05-08]
 
 ### Fixed
-- Fixed bug with automatic shadow for negative scale values
+
+* Fixed bug with automatic shadow for negative scale values
 
 ## [1.6.1][2017-04-25]
 
 ### Fixed
-- Fix pointer position detection
 
+* Fix pointer position detection
 
 ### Changed
-- moved `globalCompositeOperation` property to `Konva.Node`
+
+* moved `globalCompositeOperation` property to `Konva.Node`
 
 ## [1.6.0][2017-04-21]
 
 ### Added
-- support of globalCompositeOperation for `Konva.Shape`
+
+* support of globalCompositeOperation for `Konva.Shape`
 
 ### Fixed
-- getAllIntersections now works ok for Text shapes (https://github.com/konvajs/konva/issues/224)
+
+* getAllIntersections now works ok for Text shapes (https://github.com/konvajs/konva/issues/224)
 
 ### Changed
-- Konva a bit changed a way to detect pointer position. Now it should be OK to apply css transform on Konva container. https://github.com/konvajs/konva/pull/215
 
+* Konva a bit changed a way to detect pointer position. Now it should be OK to apply css transform on Konva container. https://github.com/konvajs/konva/pull/215
 
 ## [1.5.0][2017-03-20]
 
 ### Added
-- support for `lineDashOffset` property for `Konva.Shape`.
+
+* support for `lineDashOffset` property for `Konva.Shape`.
 
 ## [1.4.0][2017-02-07]
 
 ## Added
-- `textDecoration` of `Konva.Text` now supports `line-through`
+
+* `textDecoration` of `Konva.Text` now supports `line-through`
 
 ## [1.3.0][2017-01-10]
 
 ## Added
-- new align value for `Konva.Text` and `Konva.TextPath`: `justify`
+
-- new property for `Konva.Text` and `Konva.TextPath`: `textDecoration`. Right now it sports only '' (no decoration) and 'underline' values.
+* new align value for `Konva.Text` and `Konva.TextPath`: `justify`
-- new property for `Konva.Text`: `letterSpacing`
+* new property for `Konva.Text` and `Konva.TextPath`: `textDecoration`. Right now it sports only '' (no decoration) and 'underline' values.
-- new event `contentContextmenu` for `Konva.Stage`
+* new property for `Konva.Text`: `letterSpacing`
-- `align` support for `Konva.TextPath`
+* new event `contentContextmenu` for `Konva.Stage`
-- new method `toCanvas()` for converting a node into canvas element
+* `align` support for `Konva.TextPath`
+* new method `toCanvas()` for converting a node into canvas element
 
 ### Changed
-- changing a size of `Konva.Stage` will update it in async way (via `batchDraw`).
+
-- `shadowOffset` respect pixel ratio now
+* changing a size of `Konva.Stage` will update it in async way (via `batchDraw`).
+* `shadowOffset` respect pixel ratio now
 
 ### Fixed
-- Fixed bug when `Konva.Tag` width was not changing its width dynamically
+
-- Fixed "calling remove() for dragging shape will throw an error"
+* Fixed bug when `Konva.Tag` width was not changing its width dynamically
-- Fixed wrong opacity level for cached group with opacity
+* Fixed "calling remove() for dragging shape will throw an error"
-- More consistent shadows on HDPI screens
+* Fixed wrong opacity level for cached group with opacity
-- Fixed memory leak for nodes with several names
+* More consistent shadows on HDPI screens
+* Fixed memory leak for nodes with several names
 
 ## [1.2.2][2016-09-15]
 
 ### Fixed
-- refresh stage hit and its `dragend`
+
-- `getClientRect` calculations
+* refresh stage hit and its `dragend`
+* `getClientRect` calculations
 
 ## [1.2.0][2016-09-15]
 
 ## Added
-- new properties for `Konva.TextPath`: `letterSpacing` and `textBaseline`.
+
+* new properties for `Konva.TextPath`: `letterSpacing` and `textBaseline`.
 
 ## [1.1.4][2016-09-13]
 
 ### Fixed
-- Prevent throwing an error when text property of `Konva.Text` = undefined or null
+
+* Prevent throwing an error when text property of `Konva.Text` = undefined or null
 
 ## [1.1.3][2016-09-12]
 
 ### Changed
-- Better hit function for `TextPath`.
+
-- Validation of `Shape` filters.
+* Better hit function for `TextPath`.
+* Validation of `Shape` filters.
 
 ## [1.1.2][2016-09-10]
 
 ### Fixed
-- Fixed "Dragging Group on mobile view throws "missing preventDefault" error" #169
+
+* Fixed "Dragging Group on mobile view throws "missing preventDefault" error" #169
 
 ## [1.1.1][2016-08-30]
 
 ### Fixed
-- Fixed #166 bug of drag&drop
+
+* Fixed #166 bug of drag&drop
 
 ## [1.1.0][2016-08-21]
 
 ## Added
-- new property of `Konva.Shape` - `preventDefault`.
+
+* new property of `Konva.Shape` - `preventDefault`.
 
 ## [1.0.3][2016-08-14]
 
 ### Fixed
-- Fixed some typescript definitions
+
+* Fixed some typescript definitions
 
 ## [1.0.2][2016-07-08]
 
 ## Changed
-- `Konva.Text` will interpret undefined `width` and `height` as `AUTO`
 
+* `Konva.Text` will interpret undefined `width` and `height` as `AUTO`
 
 ## [1.0.1][2016-07-05]
 
 ### Changed
-- you can now unset property by `node.x(undefined)` or `node.setAttr('x', null)`
+
+* you can now unset property by `node.x(undefined)` or `node.setAttr('x', null)`
 
 ### Fixed
-- Bug fix for case when `touchend` event throws error
+
+* Bug fix for case when `touchend` event throws error
 
 ## [1.0.0][2016-07-05]
 
 ### Fixed
-- Bug fix for case when `touchend` event throws error
+
+* Bug fix for case when `touchend` event throws error
 
 ## [0.15.0][2016-06-18]
 
 ## Added
-- Custom clip function
+
+* Custom clip function
 
 ## [0.14.0][2016-06-17]
 
 ### Fixed
-- fixes in typescript definitions
+
-- fixes for bug with `mouseenter` event on deep nesting case
+* fixes in typescript definitions
+* fixes for bug with `mouseenter` event on deep nesting case
 
 ## [0.13.9][2016-05-14]
 
 ### Changed
-- typescript definition in npm package
-- node@5.10.1, canvas@1.3.14, jsdom@8.5.0 support
-- `Konva.Path` will be filled when it is not closed
-- `Animation.start()` will not not immediate sync draw. This should improve performance a little.
-- Warning when node for `Tween` is not in layer yet.
-- `removeChildren()` remove only first level children. So it will not remove grandchildren.
 
+* typescript definition in npm package
+* node@5.10.1, canvas@1.3.14, jsdom@8.5.0 support
+* `Konva.Path` will be filled when it is not closed
+* `Animation.start()` will not not immediate sync draw. This should improve performance a little.
+* Warning when node for `Tween` is not in layer yet.
+* `removeChildren()` remove only first level children. So it will not remove grandchildren.
 
 ## [0.12.4][2016-04-19]
 
 ### Changed
-- `batchDraw` will do not immediate `draw()`
+
+* `batchDraw` will do not immediate `draw()`
 
 ### Fixed
-- fix incorrect shadow offset on rotation
+
+* fix incorrect shadow offset on rotation
 
 ## [0.12.3][2016-04-07]
 
 ### Fixed
-- `batchDraw` function works less time now
+
-- lighter npm package
+* `batchDraw` function works less time now
+* lighter npm package
 
 ## [0.12.2][2016-03-31]
 
 ### Fixed
-- repair `cancelBubble` event property behaviour
+
-- fix wrong `Path` `getClientRect()` calculation
+* repair `cancelBubble` event property behaviour
-- better HDPI support
+* fix wrong `Path` `getClientRect()` calculation
-- better typescript definitions
+* better HDPI support
-- node 0.12 support
+* better typescript definitions
+* node 0.12 support
 
 ### Changed
-- more universal stage container selector
+
-- `mousewheel` event changed to `wheel`
+* more universal stage container selector
+* `mousewheel` event changed to `wheel`
 
 ## [0.11.1][2016-01-16]
 
 ### Fixed
-- correct `Konva.Arrow` drawing. Now it works better.
+
-- Better support for dragging when mouse out of stage
+* correct `Konva.Arrow` drawing. Now it works better.
-- Better corner radius for `Label` shape
+* Better support for dragging when mouse out of stage
-- `contentTap` event for stage
+* Better corner radius for `Label` shape
+* `contentTap` event for stage
 
 ### Added
-- event delegation. You can use it in this way: `layer.on('click', 'Circle', handler);`
+
-- new `node.findAncestors(selector)` and `node.findAncestor(selector)` functions
+* event delegation. You can use it in this way: `layer.on('click', 'Circle', handler);`
-- optional selector parameter for `stage.getIntersection` and `layer.getIntersection`
+* new `node.findAncestors(selector)` and `node.findAncestor(selector)` functions
-- show warning message if several instances of Konva are added to page.
+* optional selector parameter for `stage.getIntersection` and `layer.getIntersection`
+* show warning message if several instances of Konva are added to page.
 
 ### Changed
-- `moveTo` and some other methods return `this`
+
-- `getAbsolutePosition` support optional relative parent argument (useful to find absolute position inside of some of parent nodes)
+* `moveTo` and some other methods return `this`
-- `change` event will be not fired if changed value is the same as old value
+* `getAbsolutePosition` support optional relative parent argument (useful to find absolute position inside of some of parent nodes)
+* `change` event will be not fired if changed value is the same as old value
 
 ## [0.10.0][2015-10-27]
 
 ### Added
-- RGBA filter. Thanks to [@codefo](https://github.com/codefo)
+
-- `stroke` and `fill` support for `Konva.Sprite`
+* RGBA filter. Thanks to [@codefo](https://github.com/codefo)
+* `stroke` and `fill` support for `Konva.Sprite`
 
 ### Fixed
-- Correct calculation in `getClientRect` method of `Konva.Line` and `Konva.Container`.
+
-- Correct `toObject()` behaviour for node with attrs with extended native prototypes
+* Correct calculation in `getClientRect` method of `Konva.Line` and `Konva.Container`.
-- Fixed bug for caching where buffer canvas is required
+* Correct `toObject()` behaviour for node with attrs with extended native prototypes
+* Fixed bug for caching where buffer canvas is required
 
 ### Changed
-- Dragging works much better. If your pointer is out of stage content dragging will still continue.
+
-- `Konva.Node.create` now works with objects.
+* Dragging works much better. If your pointer is out of stage content dragging will still continue.
-- `Konva.Tween` now supports tweening points to state with different length
+* `Konva.Node.create` now works with objects.
+* `Konva.Tween` now supports tweening points to state with different length
 
 ## [0.9.5][2015-05-28]
 
 ### Fixed
-- `to` will not throw error if no `onFinish` callback
+
-- HDPI support for desktop
+* `to` will not throw error if no `onFinish` callback
-- Fix bug when filters are not correct for HDPI
+* HDPI support for desktop
-- Fix bug when hit area is not correct for HDPI
+* Fix bug when filters are not correct for HDPI
-- Fix bug for incorrect `getClientRect` calculation
+* Fix bug when hit area is not correct for HDPI
-- Repair fill gradient for text
+* Fix bug for incorrect `getClientRect` calculation
+* Repair fill gradient for text
 
 ### Changed
-- context wrapper is more capable with native context.
+
+* context wrapper is more capable with native context.
   So you can use `context.fillStyle` property in your `sceneFunc` without accessing native context.
-- `toDataURL` now handles pixelRatio. you can pass `config.pixelRatio` argument
+* `toDataURL` now handles pixelRatio. you can pass `config.pixelRatio` argument
-- Correct `clone()` for custom nodes
+* Correct `clone()` for custom nodes
-- `FastLayer` can now have transforms
+* `FastLayer` can now have transforms
-- `stage.toDataURL()` method now works synchronously. So `callback` argument is not required.
+* `stage.toDataURL()` method now works synchronously. So `callback` argument is not required.
-- `container.find(selector)` method now has a validation step. So if you forgot to add `#` or `.` you will see a warning message in the console.
+* `container.find(selector)` method now has a validation step. So if you forgot to add `#` or `.` you will see a warning message in the console.
 
 ### Added
-- new `Konva.Image.fromURL` method
+
+* new `Konva.Image.fromURL` method
 
 ### Deprecated
-- `fillRed`, `fillGreen`, `fillBlue`, `fillAlpha` are deprecated. Use `fill` instead.
-- `strokeRed`, `strokeGreen`, `strokeBlue`, `strokeAlpha` are deprecated. Use `stroke` instead.
-- `shadowRed`, `shadowGreen`, `shadowBlue`, `shadowAlpha` are deprecated. Use `shadow` instead.
-- `dashArray` is deprecated. Use `dash` instead.
-- `drawFunc` is deprecated. Use `sceneFunc` instead.
-- `drawHitFunc` is deprecated. Use `hitFunc` instead.
-- `rotateDeg` is deprecated. Use `rotate` instead.
 
+* `fillRed`, `fillGreen`, `fillBlue`, `fillAlpha` are deprecated. Use `fill` instead.
+* `strokeRed`, `strokeGreen`, `strokeBlue`, `strokeAlpha` are deprecated. Use `stroke` instead.
+* `shadowRed`, `shadowGreen`, `shadowBlue`, `shadowAlpha` are deprecated. Use `shadow` instead.
+* `dashArray` is deprecated. Use `dash` instead.
+* `drawFunc` is deprecated. Use `sceneFunc` instead.
+* `drawHitFunc` is deprecated. Use `hitFunc` instead.
+* `rotateDeg` is deprecated. Use `rotate` instead.
 
 ## [0.9.0][2015-02-27]
 
 ### Fixed
-- cache algorithm has A LOT OF updates.
+
+* cache algorithm has A LOT OF updates.
 
 ### Changed
-- `scale` now affects `shadowOffset`
+
-- performance optimization (remove some unnecessary draws)
+* `scale` now affects `shadowOffset`
-- more expected drawing when shape has opacity, stroke and shadow
+* performance optimization (remove some unnecessary draws)
-- HDPI for caching.
+* more expected drawing when shape has opacity, stroke and shadow
-- Cache should work much better. Now you don't need to pass bounding box {x,y,width,height} to `cache` method for all buildin Konva shapes. (only for your custom `Konva.Shape` instance).
+* HDPI for caching.
-- `Tween` now supports color properties (`fill`, `stroke`, `shadowColor`)
+* Cache should work much better. Now you don't need to pass bounding box {x,y,width,height} to `cache` method for all buildin Konva shapes. (only for your custom `Konva.Shape` instance).
+* `Tween` now supports color properties (`fill`, `stroke`, `shadowColor`)
 
 ### Added
-- new methods for working with node's name: `addName`, `removeName`, `hasName`.
+
-- new `perfectDrawEnabled` property for shape. See [http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html](http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html)
+* new methods for working with node's name: `addName`, `removeName`, `hasName`.
-- new `shadowForStrokeEnabled` property for shape. See [http://konvajs.github.io/docs/performance/All_Performance_Tips.html](http://konvajs.github.io/docs/performance/All_Performance_Tips.html)
+* new `perfectDrawEnabled` property for shape. See [http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html](http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html)
-- new `getClientRect` method.
+* new `shadowForStrokeEnabled` property for shape. See [http://konvajs.github.io/docs/performance/All_Performance_Tips.html](http://konvajs.github.io/docs/performance/All_Performance_Tips.html)
-- new `to` method for every node for shorter tweening
+* new `getClientRect` method.
+* new `to` method for every node for shorter tweening
 
 ## [0.8.0][2015-02-04]
 
@@ -329,11 +387,12 @@ This project adheres to [Semantic Versioning](http://semver.org/).
   * new `strokeHitEnabled` property. Useful for performance optimizations
   * typescript definitions. see `/resources/konva.d.ts`
 
-
 ## Rebranding release 2015-01-28
+
 Differences from last official `KineticJS` release
 
 * Bug Fixes
+
   * `strokeScaleEnabled = false` is disabled for text as I can not find a way to implement this
   * `strokeScaleEnabled = false` for Line now creates a correct hit graph
   * working "this-example" as name for nodes

gulpfile.js

@@ -81,7 +81,7 @@ var sourceFiles = [
   'src/shapes/Star.js',
   'src/shapes/Label.js',
   'src/shapes/Arrow.js',
-  'src/shapes/Resizer.js'
+  'src/shapes/Transformer.js'
 ];
 
 function build() {

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v1.7.6
  * http://konvajs.github.io/
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Wed Jan 03 2018
+ * Date: Thu Jan 04 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva)
@@ -10353,6 +10353,12 @@
         if (shape && shape.isListening()) {
           this.clickStartShape = shape;
           shape._fireAndBubble(MOUSEDOWN, { evt: evt });
+        } else {
+          this._fire(MOUSEDOWN, {
+            evt: evt,
+            target: this,
+            currentTarget: this
+          });
         }
 
         // content event
@@ -10412,6 +10418,16 @@
               shape._fireAndBubble(DBL_CLICK, { evt: evt });
             }
           }
+        } else {
+          this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
+          this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
+          if (fireDblClick) {
+            this._fire(DBL_CLICK, {
+              evt: evt,
+              target: this,
+              currentTarget: this
+            });
+          }
         }
         // content events
         this._fire(CONTENT_MOUSEUP, { evt: evt });
@@ -10452,6 +10468,12 @@
         ) {
           evt.preventDefault();
         }
+      } else {
+        this._fire(TOUCHSTART, {
+          evt: evt,
+          target: this,
+          currentTarget: this
+        });
       }
       // content event
       this._fire(CONTENT_TOUCHSTART, { evt: evt });
@@ -10495,6 +10517,16 @@
         ) {
           evt.preventDefault();
         }
+      } else {
+        this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });
+        this._fire(TAP, { evt: evt, target: this, currentTarget: this });
+        if (fireDblClick) {
+          this._fire(DBL_TAP, {
+            evt: evt,
+            target: this,
+            currentTarget: this
+          });
+        }
       }
       // content events
       this._fire(CONTENT_TOUCHEND, { evt: evt });
@@ -18223,16 +18255,16 @@
 
 (function(Konva) {
   'use strict';
-  Konva.Resizer = function(config) {
+  Konva.Transformer = function(config) {
     this.____init(config);
   };
 
-  Konva.Resizer.prototype = {
+  Konva.Transformer.prototype = {
     _centroid: false,
     ____init: function(config) {
       // call super constructor
       Konva.Group.call(this, config);
-      this.className = 'Resizer';
+      this.className = 'Transformer';
       this._createElements();
       this.handleMouseMove = this.handleMouseMove.bind(this);
       this.handleMouseUp = this.handleMouseUp.bind(this);
@@ -18622,11 +18654,11 @@
       window.removeEventListener('touchend', this.handleMouseUp);
     }
   };
-  Konva.Util.extend(Konva.Resizer, Konva.Group);
+  Konva.Util.extend(Konva.Transformer, Konva.Group);
 
-  Konva.Factory.addGetterSetter(Konva.Resizer, 'keepRatio', false);
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'keepRatio', false);
-  Konva.Factory.addGetterSetter(Konva.Resizer, 'resizeEnabled', true);
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'resizeEnabled', true);
-  Konva.Factory.addGetterSetter(Konva.Resizer, 'rotationSnaps', []);
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);
 
-  Konva.Collection.mapMethods(Konva.Resizer);
+  Konva.Collection.mapMethods(Konva.Transformer);
 })(Konva);

src/Stage.js

@@ -512,6 +512,12 @@
         if (shape && shape.isListening()) {
           this.clickStartShape = shape;
           shape._fireAndBubble(MOUSEDOWN, { evt: evt });
+        } else {
+          this._fire(MOUSEDOWN, {
+            evt: evt,
+            target: this,
+            currentTarget: this
+          });
         }
 
         // content event
@@ -571,6 +577,16 @@
               shape._fireAndBubble(DBL_CLICK, { evt: evt });
             }
           }
+        } else {
+          this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
+          this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
+          if (fireDblClick) {
+            this._fire(DBL_CLICK, {
+              evt: evt,
+              target: this,
+              currentTarget: this
+            });
+          }
         }
         // content events
         this._fire(CONTENT_MOUSEUP, { evt: evt });
@@ -611,6 +627,12 @@
         ) {
           evt.preventDefault();
         }
+      } else {
+        this._fire(TOUCHSTART, {
+          evt: evt,
+          target: this,
+          currentTarget: this
+        });
       }
       // content event
       this._fire(CONTENT_TOUCHSTART, { evt: evt });
@@ -654,6 +676,16 @@
         ) {
           evt.preventDefault();
         }
+      } else {
+        this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });
+        this._fire(TAP, { evt: evt, target: this, currentTarget: this });
+        if (fireDblClick) {
+          this._fire(DBL_TAP, {
+            evt: evt,
+            target: this,
+            currentTarget: this
+          });
+        }
       }
       // content events
       this._fire(CONTENT_TOUCHEND, { evt: evt });

src/shapes/Transformer.js

@@ -1,15 +1,15 @@
 (function(Konva) {
   'use strict';
-  Konva.Resizer = function(config) {
+  Konva.Transformer = function(config) {
     this.____init(config);
   };
 
-  Konva.Resizer.prototype = {
+  Konva.Transformer.prototype = {
     _centroid: false,
     ____init: function(config) {
       // call super constructor
       Konva.Group.call(this, config);
-      this.className = 'Resizer';
+      this.className = 'Transformer';
       this._createElements();
       this.handleMouseMove = this.handleMouseMove.bind(this);
       this.handleMouseUp = this.handleMouseUp.bind(this);
@@ -399,11 +399,11 @@
       window.removeEventListener('touchend', this.handleMouseUp);
     }
   };
-  Konva.Util.extend(Konva.Resizer, Konva.Group);
+  Konva.Util.extend(Konva.Transformer, Konva.Group);
 
-  Konva.Factory.addGetterSetter(Konva.Resizer, 'keepRatio', false);
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'keepRatio', false);
-  Konva.Factory.addGetterSetter(Konva.Resizer, 'resizeEnabled', true);
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'resizeEnabled', true);
-  Konva.Factory.addGetterSetter(Konva.Resizer, 'rotationSnaps', []);
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);
 
-  Konva.Collection.mapMethods(Konva.Resizer);
+  Konva.Collection.mapMethods(Konva.Transformer);
 })(Konva);

test/runner.js

@@ -207,7 +207,8 @@ function showHit(layer) {
 }
 
 beforeEach(function() {
-  var title = document.createElement('h2'), test = this.currentTest;
+  var title = document.createElement('h2'),
+    test = this.currentTest;
 
   title.innerHTML = test.parent.title + ' - ' + test.title;
   title.className = 'konva-title';

test/unit/Stage-test.js

@@ -733,6 +733,217 @@ suite('Stage', function() {
     assert.equal(Konva.DD.node, undefined);
   });
 
+  test('test can listen click on empty areas', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var dblicks = 0;
+    var clicks = 0;
+    var mousedowns = 0;
+    var mouseups = 0;
+
+    stage.on('mousedown', function(e) {
+      mousedowns += 1;
+      assert.equal(e.target, stage);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    stage.on('mouseup', function(e) {
+      mouseups += 1;
+      assert.equal(e.target, stage);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    stage.on('click', function(e) {
+      clicks += 1;
+      assert.equal(e.target, stage);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    stage.on('dblclick', function(e) {
+      dblicks += 1;
+      assert.equal(e.target, stage);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    // simulate dragging
+    stage.simulateMouseDown({
+      x: 60,
+      y: 10
+    });
+
+    stage.simulateMouseUp({
+      x: 65,
+      y: 10
+    });
+
+    assert.equal(mousedowns, 1, 'first mousedown registered');
+    assert.equal(mouseups, 1, 'first mouseup registered');
+    assert.equal(clicks, 1, 'first click registered');
+    assert.equal(dblicks, 0, 'no  dbclicks registered');
+
+    stage.simulateMouseDown({
+      x: 60,
+      y: 10
+    });
+
+    stage.simulateMouseUp({
+      x: 65,
+      y: 10
+    });
+
+    assert.equal(mousedowns, 2, 'second mousedown registered');
+    assert.equal(mouseups, 2, 'seconds mouseup registered');
+    assert.equal(clicks, 2, 'seconds click registered');
+    assert.equal(dblicks, 1, 'first dbclick registered');
+  });
+
+  test('test can listen taps on empty areas', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var dbltaps = 0;
+    var taps = 0;
+    var touchstarts = 0;
+    var touchends = 0;
+
+    stage.on('touchstart', function(e) {
+      touchstarts += 1;
+      assert.equal(e.target, stage);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    stage.on('touchend', function(e) {
+      touchends += 1;
+      assert.equal(e.target, stage);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    stage.on('tap', function(e) {
+      taps += 1;
+      assert.equal(e.target, stage);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    stage.on('dbltap', function(e) {
+      dbltaps += 1;
+      assert.equal(e.target, stage);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    var top = stage.content.getBoundingClientRect().top;
+    // simulate dragging
+    stage._touchstart({
+      touches: [
+        {
+          clientX: 100,
+          clientY: 100 + top
+        }
+      ]
+    });
+
+    stage._touchend({
+      touches: []
+    });
+
+    assert.equal(touchstarts, 1, 'first touchstart registered');
+    assert.equal(touchends, 1, 'first touchends registered');
+    assert.equal(taps, 1, 'first tap registered');
+    assert.equal(dbltaps, 0, 'no  dbltap registered');
+
+    stage._touchstart({
+      touches: [
+        {
+          clientX: 100,
+          clientY: 100 + top
+        }
+      ]
+    });
+
+    stage._touchend({
+      touches: []
+    });
+
+    assert.equal(touchstarts, 2, 'first touchstart registered');
+    assert.equal(touchends, 2, 'first touchends registered');
+    assert.equal(taps, 2, 'first tap registered');
+    assert.equal(dbltaps, 1, 'dbltap registered');
+  });
+
+  test('make sure it does not trigger too many events', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+    var rect = new Konva.Rect({
+      width: stage.width(),
+      height: stage.height()
+    });
+    layer.add(rect);
+    layer.draw();
+
+    var dblicks = 0;
+    var clicks = 0;
+    var mousedowns = 0;
+    var mouseups = 0;
+
+    stage.on('mousedown', function(e) {
+      mousedowns += 1;
+      assert.equal(e.target, rect);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    stage.on('mouseup', function(e) {
+      mouseups += 1;
+      assert.equal(e.target, rect);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    stage.on('click', function(e) {
+      clicks += 1;
+      assert.equal(e.target, rect);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    stage.on('dblclick', function(e) {
+      dblicks += 1;
+      assert.equal(e.target, rect);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    // simulate dragging
+    stage.simulateMouseDown({
+      x: 60,
+      y: 10
+    });
+
+    stage.simulateMouseUp({
+      x: 65,
+      y: 10
+    });
+
+    assert.equal(mousedowns, 1, 'first mousedown registered');
+    assert.equal(mouseups, 1, 'first mouseup registered');
+    assert.equal(clicks, 1, 'first click registered');
+    assert.equal(dblicks, 0, 'no  dbclicks registered');
+
+    stage.simulateMouseDown({
+      x: 60,
+      y: 10
+    });
+
+    stage.simulateMouseUp({
+      x: 65,
+      y: 10
+    });
+
+    assert.equal(mousedowns, 2, 'second mousedown registered');
+    assert.equal(mouseups, 2, 'seconds mouseup registered');
+    assert.equal(clicks, 2, 'seconds click registered');
+    assert.equal(dblicks, 1, 'first dbclick registered');
+  });
+
   test.skip('toDataURL + HDPI', function(done) {
     Konva.pixelRatio = 2;