some fixes and new release

CHANGELOG.md

@@ -3,11 +3,11 @@
 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]
+## [2.0.0][2018-03-15]
 
 ### Added
 
-* new `Konva.Transformer` group that allow simple resize, and rotate of a shape.
+* new `Konva.Transformer`. It is a special group that allow simple resizing and rotation of a shape.
 * Add ability to remove event by callback `node.off('event', callback)`.
 * new `Konva.Filters.Contrast`.
 * new `Konva.Util.haveIntersection()` to detect simple collusion
@@ -16,7 +16,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Changed
 
-* stage events are slightly changed. `mousedown`, `click`, `mouseup`, `dblclick`, `touchstart`, `touchend`, `tap`, `dbltap` will be triggered when clicked on empty areas.
+* stage events are slightly changed. `mousedown`, `click`, `mouseup`, `dblclick`, `touchstart`, `touchend`, `tap`, `dbltap` will be triggered when clicked on empty areas too
 
 ## Fixed
 

konva.js

@@ -1,8 +1,8 @@
 /*
- * Konva JavaScript Framework v1.8.0-unpublished
+ * Konva JavaScript Framework v2.0.0
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Wed Mar 14 2018
+ * Date: Thu Mar 15 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -21,7 +21,7 @@
 
   var Konva = {
     // public
-    version: '1.8.0-unpublished',
+    version: '2.0.0',
 
     // private
     stages: [],
@@ -10732,6 +10732,12 @@
 
       if (shape && shape.isListening()) {
         shape._fireAndBubble(WHEEL, { evt: evt });
+      } else {
+        this._fire(WHEEL, {
+          evt: evt,
+          target: this,
+          currentTarget: this
+        });
       }
       this._fire(CONTENT_WHEEL, { evt: evt });
     },
@@ -18489,6 +18495,8 @@
     'rotateHandlerOffsetChange'
   ].join(' ');
 
+  var NODE_RECT = 'nodeRect';
+
   var TRANSFORM_CHANGE_STR = [
     'xChange.resizer',
     'yChange.resizer',
@@ -18558,6 +18566,56 @@
     }
   }
 
+  /**
+   * Transformer constructor.  Transformer is a special type of group that allow you transform Konva
+   * primitives and shapes.
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Container
+   * @param {Object} config
+   * @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.rotateHandlerOffset] Default is 50
+   * @param {Number} [config.lineEnabled] Should we draw border? Default is true
+   * @param {Boolean} [config.keepRatio] Should we keep ratio when we are moving edges? Default is true
+   * @param {Array} [config.enabledHandlers] Array of names of enabled handles
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * * @param {Object} [config.clip] set clip
+     * @param {Number} [config.clipX] set clip x
+     * @param {Number} [config.clipY] set clip y
+     * @param {Number} [config.clipWidth] set clip width
+     * @param {Number} [config.clipHeight] set clip height
+     * @param {Function} [config.clipFunc] set clip func
+
+   * @example
+   * var transformer = new Konva.Transformer({
+   *   node: rectangle,
+   *   rotateHandlerOffset: 60,
+   *   enabledHandlers: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+   * });
+   * layer.add(transformer);
+   */
+
   Konva.Transformer = function(config) {
     this.____init(config);
   };
@@ -18597,17 +18655,39 @@
         );
         warningShowed = true;
       }
+
+      if (this.getNode()) {
+        this.update();
+      }
     },
 
     attachTo: function(node) {
-      if (this.node()) {
+      this.setNode(node);
+    },
+
+    setNode: function(node) {
+      if (this._node) {
         this.detach();
       }
-      this.setNode(node);
+      this._node = node;
-      node.on('dragmove.resizer', this.update);
-      node.on(TRANSFORM_CHANGE_STR, this.update);
 
-      this.update();
+      node.on(
+        TRANSFORM_CHANGE_STR,
+        function() {
+          this._clearCache(NODE_RECT);
+        }.bind(this)
+      );
+      node.on(TRANSFORM_CHANGE_STR, this.requestUpdate.bind(this));
+      node.on('dragmove.resizer', this.requestUpdate);
+
+      var elementsCreated = !!this.findOne('.top-left');
+      if (elementsCreated) {
+        this.update();
+      }
+    },
+
+    getNode: function() {
+      return this._node;
     },
 
     detach: function() {
@@ -18615,7 +18695,20 @@
     },
 
     _getNodeRect: function() {
+      return this._getCache(NODE_RECT, this.__getNodeRect);
+    },
+
+    __getNodeRect: function() {
       var node = this.getNode();
+      if (!node) {
+        return {
+          x: -Number.MAX_SAFE_INTEGER,
+          y: -Number.MAX_SAFE_INTEGER,
+          width: 0,
+          height: 0,
+          rotation: 0
+        };
+      }
       var rect = node.getClientRect({ skipTransform: true });
       var rotation = Konva.getAngle(node.rotation());
 
@@ -18967,6 +19060,28 @@
       this.update();
       this.getLayer().batchDraw();
     },
+
+    requestUpdate: function() {
+      if (this.timeout) {
+        return;
+      }
+      this.timeout = setTimeout(
+        function() {
+          this.timeout = null;
+          this.update();
+        }.bind(this)
+      );
+    },
+
+    /**
+     * force update of Transformer
+     * @method
+     * @memberof Konva.Transformer.prototype
+     */
+    forceUpdate: function() {
+      this._clearCache(NODE_RECT);
+      this.update();
+    },
     update: function() {
       var attrs = this._getNodeRect();
       var x = attrs.x;
@@ -18977,48 +19092,48 @@
       this.y(y);
       this.rotation(attrs.rotation);
 
-      var enabledResizers = this.enabledResizers();
+      var enabledHandlers = this.enabledHandlers();
       var resizeEnabled = this.resizeEnabled();
 
       this.findOne('.top-left').setAttrs({
         x: 0,
         y: 0,
-        visible: resizeEnabled && enabledResizers.indexOf('top-left') >= 0
+        visible: resizeEnabled && enabledHandlers.indexOf('top-left') >= 0
       });
       this.findOne('.top-center').setAttrs({
         x: width / 2,
         y: 0,
-        visible: resizeEnabled && enabledResizers.indexOf('top-center') >= 0
+        visible: resizeEnabled && enabledHandlers.indexOf('top-center') >= 0
       });
       this.findOne('.top-right').setAttrs({
         x: width,
         y: 0,
-        visible: resizeEnabled && enabledResizers.indexOf('top-right') >= 0
+        visible: resizeEnabled && enabledHandlers.indexOf('top-right') >= 0
       });
       this.findOne('.middle-left').setAttrs({
         x: 0,
         y: height / 2,
-        visible: resizeEnabled && enabledResizers.indexOf('middle-left') >= 0
+        visible: resizeEnabled && enabledHandlers.indexOf('middle-left') >= 0
       });
       this.findOne('.middle-right').setAttrs({
         x: width,
         y: height / 2,
-        visible: resizeEnabled && enabledResizers.indexOf('middle-right') >= 0
+        visible: resizeEnabled && enabledHandlers.indexOf('middle-right') >= 0
       });
       this.findOne('.bottom-left').setAttrs({
         x: 0,
         y: height,
-        visible: resizeEnabled && enabledResizers.indexOf('bottom-left') >= 0
+        visible: resizeEnabled && enabledHandlers.indexOf('bottom-left') >= 0
       });
       this.findOne('.bottom-center').setAttrs({
         x: width / 2,
         y: height,
-        visible: resizeEnabled && enabledResizers.indexOf('bottom-center') >= 0
+        visible: resizeEnabled && enabledHandlers.indexOf('bottom-center') >= 0
       });
       this.findOne('.bottom-right').setAttrs({
         x: width,
         y: height,
-        visible: resizeEnabled && enabledResizers.indexOf('bottom-right') >= 0
+        visible: resizeEnabled && enabledHandlers.indexOf('bottom-right') >= 0
       });
 
       this.findOne('.rotater').setAttrs({
@@ -19037,13 +19152,18 @@
       Konva.Group.prototype.destroy.call(this);
       this.getNode().off('.resizer');
       this._removeEvents();
+    },
+    // do not work as a container
+    // we will recreate inner nodes manually
+    toObject: function() {
+      return Konva.Node.prototype.toObject.call(this);
     }
   };
   Konva.Util.extend(Konva.Transformer, Konva.Group);
 
   function validateResizers(val) {
     if (!(val instanceof Array)) {
-      Konva.Util.warn('enabledResizers value should be an array');
+      Konva.Util.warn('enabledHandlers value should be an array');
     }
     if (val instanceof Array) {
       val.forEach(function(name) {
@@ -19059,25 +19179,125 @@
     }
     return val || [];
   }
+
+  /**
+   * get/set enabled handlers
+   * @name enabledHandlers
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Array} array
+   * @returns {Array}
+   * @example
+   * // get list of handlers
+   * var enabledHandlers = shape.enabledHandlers();
+   *
+   * // set handlers
+   * shape.enabledHandlers(['top-left', 'top-center', 'top-right', 'middle-right', 'middle-left', 'bottom-left', 'bottom-center', 'bottom-right']);
+   */
   Konva.Factory.addGetterSetter(
     Konva.Transformer,
-    'enabledResizers',
+    'enabledHandlers',
-    RESIZERS_NAMES
-  );
-  Konva.Factory.addGetterSetter(
-    Konva.Transformer,
-    'enabledResizers',
     RESIZERS_NAMES,
     validateResizers
   );
+
+  /**
+   * get/set resize ability. If false it will automatically hide resizing handlers
+   * @name resizeEnabled
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Array} array
+   * @returns {Array}
+   * @example
+   * // get
+   * var resizeEnabled = shape.resizeEnabled();
+   *
+   * // set
+   * shape.resizeEnabled(false);
+   */
   Konva.Factory.addGetterSetter(Konva.Transformer, 'resizeEnabled', true);
+
+  /**
+   * get/set ability to rotate.
+   * @name rotateEnabled
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Array} array
+   * @returns {Array}
+   * @example
+   * // get
+   * var rotateEnabled = shape.rotateEnabled();
+   *
+   * // set
+   * shape.rotateEnabled(false);
+   */
   Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateEnabled', true);
+
+  /**
+   * get/set rotation snaps angles.
+   * @name rotationSnaps
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Array} array
+   * @returns {Array}
+   * @example
+   * // get
+   * var rotationSnaps = shape.rotationSnaps();
+   *
+   * // set
+   * shape.rotationSnaps([0, 90, 180, 270]);
+   */
   Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);
+
+  /**
+   * get/set distance for rotation handler
+   * @name rotateHandlerOffset
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Array} array
+   * @returns {Array}
+   * @example
+   * // get
+   * var rotateHandlerOffset = shape.rotateHandlerOffset();
+   *
+   * // set
+   * shape.rotateHandlerOffset(100);
+   */
   Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateHandlerOffset', 50);
+
+  /**
+   * get/set visibility of border
+   * @name lineEnabled
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Array} array
+   * @returns {Array}
+   * @example
+   * // get
+   * var lineEnabled = shape.lineEnabled();
+   *
+   * // set
+   * shape.lineEnabled(false);
+   */
   Konva.Factory.addGetterSetter(Konva.Transformer, 'lineEnabled', true);
+
+  /**
+   * get/set should we keep ration of resize?
+   * @name keepRatio
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Array} array
+   * @returns {Array}
+   * @example
+   * // get
+   * var keepRatio = shape.keepRatio();
+   *
+   * // set
+   * shape.keepRatio(false);
+   */
   Konva.Factory.addGetterSetter(Konva.Transformer, 'keepRatio', true);
 
-  Konva.Factory.addGetterSetter(Konva.Transformer, 'node');
+  Konva.Factory.addOverloadedGetterSetter(Konva.Transformer, 'node');
 
   Konva.Collection.mapMethods(Konva.Transformer);
 })(Konva);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "konva",
-  "version": "1.8.0-unpublished",
+  "version": "2.0.0",
   "author": "Anton Lavrenov",
   "files": ["README.md", "konva.js", "konva.min.js", "src", "konva.d.ts"],
   "main": "konva.js",

src/Stage.js

@@ -732,6 +732,12 @@
 
       if (shape && shape.isListening()) {
         shape._fireAndBubble(WHEEL, { evt: evt });
+      } else {
+        this._fire(WHEEL, {
+          evt: evt,
+          target: this,
+          currentTarget: this
+        });
       }
       this._fire(CONTENT_WHEEL, { evt: evt });
     },

src/shapes/Transformer.js

@@ -151,7 +151,7 @@
       this.setNode(node);
     },
 
-    setNode(node) {
+    setNode: function(node) {
       if (this._node) {
         this.detach();
       }
@@ -172,7 +172,7 @@
       }
     },
 
-    getNode() {
+    getNode: function() {
       return this._node;
     },
 
@@ -559,6 +559,11 @@
       );
     },
 
+    /**
+     * force update of Transformer
+     * @method
+     * @memberof Konva.Transformer.prototype
+     */
     forceUpdate: function() {
       this._clearCache(NODE_RECT);
       this.update();

test/unit/shapes/Transformer-test.js

@@ -548,7 +548,7 @@ suite('Transformer', function() {
     assert.equal(tr.rotation(), 0);
   });
 
-  test.only('fit group', function() {
+  test('fit group', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
     stage.add(layer);