fix docs, Better implementation of mouseover event for stage

src/Node.ts

@@ -1242,6 +1242,8 @@ export abstract class Node {
     }
     return false;
   }
+  // TODO: validate z index
+  // it should be >= 0 and < length
   setZIndex(zIndex) {
     if (!this.parent) {
       Util.warn('Node has no parent. zIndex parameter is ignored.');
@@ -1701,7 +1703,10 @@ export abstract class Node {
    * @param {Number} [config.y] y position of canvas section
    * @param {Number} [config.width] width of canvas section
    * @param {Number} [config.height] height of canvas section
-   * @paremt {Number} [config.pixelRatio] pixelRatio of ouput image.  Default is 1.
+   * @param {Number} [config.pixelRatio] pixelRatio of output canvas. Default is 1.
+   * You can use that property to increase quality of the image, for example for super hight quality exports
+   * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
+   * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
    * @example
    * var canvas = node.toCanvas();
    */
@@ -1724,7 +1729,10 @@ export abstract class Node {
    * @param {Number} [config.quality] jpeg quality.  If using an "image/jpeg" mimeType,
    *  you can specify the quality from 0 to 1, where 0 is very poor quality and 1
    *  is very high quality
-   * @param {Number} [config.pixelRatio] pixelRatio of output image url. Default is 1
+   * @param {Number} [config.pixelRatio] pixelRatio of output image url. Default is 1.
+   * You can use that property to increase quality of the image, for example for super hight quality exports
+   * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
+   * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
    * @returns {String}
    */
   toDataURL(config) {
@@ -1754,7 +1762,10 @@ export abstract class Node {
    * @param {Number} [config.quality] jpeg quality.  If using an "image/jpeg" mimeType,
    *  you can specify the quality from 0 to 1, where 0 is very poor quality and 1
    *  is very high quality
-   * @paremt {Number} [config.pixelRatio] pixelRatio of ouput image.  Default is 1.
+   * @param {Number} [config.pixelRatio] pixelRatio of output image. Default is 1.
+   * You can use that property to increase quality of the image, for example for super hight quality exports
+   * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
+   * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
    * @example
    * var image = node.toImage({
    *   callback(img) {

src/Shape.ts

@@ -10,6 +10,14 @@ var HAS_SHADOW = 'hasShadow';
 var SHADOW_RGBA = 'shadowRGBA';
 
 // TODO: cache gradient from context
+// TODO: write a test for adding destroyed shape into the layer
+// will it draw?
+// will it pass hit test?
+// show warning on adding destroyed shape?
+
+// TODO: idea - use only "remove" (or destroy method)
+// how? on add, check that every inner shape has reference in konva store with color
+// on remove - clear that reference
 
 function _fillFunc(context) {
   context.fill();

src/Stage.ts

@@ -345,7 +345,12 @@ export class Stage extends Container {
   }
   _mouseover(evt) {
     this._setPointerPosition(evt);
+    // TODO: add test on mouseover
+    // I guess it should fire on:
+    // 1. mouseenter
+    // 2. leave or enter any shape
     this._fire(CONTENT_MOUSEOVER, { evt: evt });
+    this._fire(MOUSEOVER, { evt: evt, target: this, currentTarget: this });
   }
   _mouseout(evt) {
     this._setPointerPosition(evt);
@@ -371,10 +376,8 @@ export class Stage extends Container {
     if (!getGlobalKonva().isDragging()) {
       shape = this.getIntersection(this.getPointerPosition());
       if (shape && shape.isListening()) {
-        if (
-          !getGlobalKonva().isDragging() &&
-          (!this.targetShape || this.targetShape._id !== shape._id)
-        ) {
+        var differentTarget = !this.targetShape || this.targetShape !== shape;
+        if (!getGlobalKonva().isDragging() && differentTarget) {
           if (this.targetShape) {
             this.targetShape._fireAndBubble(MOUSEOUT, { evt: evt }, shape);
             this.targetShape._fireAndBubble(MOUSELEAVE, { evt: evt }, shape);
@@ -393,6 +396,11 @@ export class Stage extends Container {
         if (this.targetShape && !getGlobalKonva().isDragging()) {
           this.targetShape._fireAndBubble(MOUSEOUT, { evt: evt });
           this.targetShape._fireAndBubble(MOUSELEAVE, { evt: evt });
+          this._fire(MOUSEOVER, {
+            evt: evt,
+            target: this,
+            currentTarget: this
+          });
           this.targetShape = null;
         }
         this._fire(MOUSEMOVE, {

src/Tween.ts

@@ -525,8 +525,11 @@ export class Tween {
  * @example
  *
  * circle.to({
- *  x : 50,
- *  duration : 0.5
+ *   x : 50,
+ *   duration : 0.5,
+ *   onFinish: () => {
+ *      console.log('finished');
+ *   }
  * });
  */
 Node.prototype.to = function(params) {

src/shapes/Transformer.ts

@@ -223,6 +223,7 @@ export class Transformer extends Group {
     }
     return this;
   }
+  // TODO: add docs, use overloaded setter/getter
   getNode() {
     return this._node;
   }