more warnings and methods

CHANGELOG.md

@@ -9,7 +9,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 * Show a warning when a stage has too many layers
 * Show a warning on duplicate ids
 * Show a warning on weird class in `Node.create` parsing from JSON
-* Show a warning for incorrect value for component setters. 
+* Show a warning for incorrect value for component setters.
+* Show a warning for incorrect value for `zIndex` property.
+* Show a warning when user is trying to reuse destroyed shape.
+* new publish method `measureSize(string)` for `Konva.Text`
 
 ### Changed
 * Fixes inconsistent `layer.setSize()` method. Now it has same arguments as any container.
@@ -26,7 +29,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 * `Konva.Util._removeLastLetter`
 * `Konva.Util._getImage`
 * `Konv.Util._getRGBAString`
-* Removed polyfill for `requestAnimationFrame`. 
+* `Konv.Util._merge`
+* Removed polyfill for `requestAnimationFrame`.
 
 ### Fixed
 

konva.js

@@ -632,7 +632,9 @@
               requestAnimationFrame(function () {
                   var queue = Util.animQueue;
                   Util.animQueue = [];
-                  queue.forEach(function (cb) { cb(); });
+                  queue.forEach(function (cb) {
+                      cb();
+                  });
               });
           }
       },
@@ -833,20 +835,6 @@
               };
           }
       },
-      // TODO: remove it
-      // o1 takes precedence over o2
-      _merge: function (o1, o2) {
-          var retObj = this._clone(o2);
-          for (var key in o1) {
-              if (this._isPlainObject(o1[key])) {
-                  retObj[key] = this._merge(o1[key], retObj[key]);
-              }
-              else {
-                  retObj[key] = o1[key];
-              }
-          }
-          return retObj;
-      },
       /**
        * check intersection of two client rectangles
        * @method
@@ -3438,13 +3426,18 @@
           }
           return false;
       };
-      // TODO: validate z index
-      // it should be >= 0 and < length
       Node.prototype.setZIndex = function (zIndex) {
           if (!this.parent) {
               Util.warn('Node has no parent. zIndex parameter is ignored.');
               return false;
           }
+          if (zIndex < 0 || zIndex >= this.parent.children.length) {
+              Util.warn('Unexpected value ' +
+                  zIndex +
+                  ' for zIndex property. zIndex is just index of a node in children of its parent. Expected value is from 0 to ' +
+                  (this.parent.children.length - 1) +
+                  '.');
+          }
           var index = this.index;
           this.parent.children.splice(index, 1);
           this.parent.children.splice(zIndex, 0, this);
@@ -6688,7 +6681,6 @@
    */
   Collection.mapMethods(Layer);
 
-  // TODO: deprecate it
   /**
    * FastLayer constructor. Layers are tied to their own canvas element and are used
    * to contain shapes only.  If you don't need node nesting, mouse and touch interactions,
@@ -7108,6 +7100,7 @@
       Shape.prototype.destroy = function () {
           Node.prototype.destroy.call(this);
           delete shapes[this.colorKey];
+          delete this.colorKey;
           return this;
       };
       // why do we need buffer canvas?
@@ -7286,6 +7279,10 @@
       };
       Shape.prototype.drawHit = function (can, top, caching) {
           var layer = this.getLayer(), canvas = can || layer.hitCanvas, context = canvas.getContext(), drawFunc = this.hitFunc() || this.sceneFunc(), cachedCanvas = this._cache.canvas, cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
+          if (!this.colorKey) {
+              console.log(this);
+              Util.warn('Looks like your canvas has a destroyed shape in it. Do not reuse shape after you destroyed it. See the shape in logs above. If you want to reuse shape you should call remove() instead of destroy()');
+          }
           if (!this.shouldDrawHit() && !caching) {
               return this;
           }
@@ -12566,7 +12563,7 @@
                       }
                       this.partialText = letter;
                       context.fillStrokeShape(this);
-                      context.translate(Math.round(this._getTextSize(letter).width) + letterSpacing, 0);
+                      context.translate(Math.round(this.measureSize(letter).width) + letterSpacing, 0);
                   }
               }
               else {
@@ -12621,8 +12618,15 @@
       Text.prototype.getTextHeight = function () {
           return this.textHeight;
       };
-      // TODO: make it public, rename to "measure text"?
-      Text.prototype._getTextSize = function (text) {
+      /**
+       * measure string with the font of current text shape.
+       * That method can't handle multiline text.
+       * @method
+       * @name Konva.Text#measureSize
+       * @param {Number} [text] text to measure
+       * @returns {Object} { width , height} of measured text
+       */
+      Text.prototype.measureSize = function (text) {
           var _context = getDummyContext$1(), fontSize = this.fontSize(), metrics;
           _context.save();
           _context.font = this._getContextFont();

src/FastLayer.ts

@@ -2,8 +2,6 @@ import { Util, Collection } from './Util';
 import { Container } from './Container';
 import { BaseLayer } from './BaseLayer';
 
-// TODO: deprecate it
-
 /**
  * FastLayer constructor. Layers are tied to their own canvas element and are used
  * to contain shapes only.  If you don't need node nesting, mouse and touch interactions,

src/Node.ts

@@ -1240,13 +1240,20 @@ 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.');
       return false;
     }
+    if (zIndex < 0 || zIndex >= this.parent.children.length) {
+      Util.warn(
+        'Unexpected value ' +
+          zIndex +
+          ' for zIndex property. zIndex is just index of a node in children of its parent. Expected value is from 0 to ' +
+          (this.parent.children.length - 1) +
+          '.'
+      );
+    }
     var index = this.index;
     this.parent.children.splice(index, 1);
     this.parent.children.splice(zIndex, 0, this);

src/Shape.ts

@@ -319,6 +319,7 @@ export class Shape extends Node {
   destroy() {
     Node.prototype.destroy.call(this);
     delete shapes[this.colorKey];
+    delete this.colorKey;
     return this;
   }
   // why do we need buffer canvas?
@@ -537,6 +538,13 @@ export class Shape extends Node {
       cachedCanvas = this._cache.canvas,
       cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
 
+    if (!this.colorKey) {
+      console.log(this);
+      Util.warn(
+        'Looks like your canvas has a destroyed shape in it. Do not reuse shape after you destroyed it. See the shape in logs above. If you want to reuse shape you should call remove() instead of destroy()'
+      );
+    }
+
     if (!this.shouldDrawHit() && !caching) {
       return this;
     }

src/Util.ts

@@ -546,10 +546,12 @@ export const Util = {
   requestAnimFrame(callback) {
     Util.animQueue.push(callback);
     if (Util.animQueue.length === 1) {
-      requestAnimationFrame(function () {
+      requestAnimationFrame(function() {
         const queue = Util.animQueue;
         Util.animQueue = [];
-        queue.forEach(function (cb) { cb(); });
+        queue.forEach(function(cb) {
+          cb();
+        });
       });
     }
   },
@@ -755,19 +757,6 @@ export const Util = {
       };
     }
   },
-  // TODO: remove it
-  // o1 takes precedence over o2
-  _merge(o1, o2) {
-    var retObj = this._clone(o2);
-    for (var key in o1) {
-      if (this._isPlainObject(o1[key])) {
-        retObj[key] = this._merge(o1[key], retObj[key]);
-      } else {
-        retObj[key] = o1[key];
-      }
-    }
-    return retObj;
-  },
   /**
    * check intersection of two client rectangles
    * @method

src/shapes/Text.ts

@@ -227,7 +227,7 @@ export class Text extends Shape {
           this.partialText = letter;
           context.fillStrokeShape(this);
           context.translate(
-            Math.round(this._getTextSize(letter).width) + letterSpacing,
+            Math.round(this.measureSize(letter).width) + letterSpacing,
             0
           );
         }
@@ -287,8 +287,15 @@ export class Text extends Shape {
     return this.textHeight;
   }
 
-  // TODO: make it public, rename to "measure text"?
-  _getTextSize(text) {
+  /**
+   * measure string with the font of current text shape.
+   * That method can't handle multiline text.
+   * @method
+   * @name Konva.Text#measureSize
+   * @param {Number} [text] text to measure
+   * @returns {Object} { width , height} of measured text
+   */
+  measureSize(text) {
     var _context = getDummyContext(),
       fontSize = this.fontSize(),
       metrics;

test/unit/Node-test.js

@@ -3804,4 +3804,30 @@ suite('Node', function() {
     assert.equal(callCount, 1);
     Konva.Util.warn = oldWarn;
   });
+
+  test('show warning for unexpected zIndexes', function() {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var shape = new Konva.Circle({
+      radius: 50,
+      fill: 'red'
+    });
+    layer.add(shape);
+
+    var callCount = 0;
+    var oldWarn = Konva.Util.warn;
+    Konva.Util.warn = function() {
+      callCount += 1;
+    };
+
+    shape.zIndex(-1);
+    shape.zIndex(0);
+    shape.zIndex(10);
+
+    assert.equal(callCount, 2);
+    Konva.Util.warn = oldWarn;
+  });
 });

test/unit/Shape-test.js

@@ -988,7 +988,6 @@ suite('Shape', function() {
       y: 120
     });
 
-    //TODO: can't get this to pass
     assert.equal(
       click,
       true,
@@ -1774,4 +1773,37 @@ suite('Shape', function() {
 
     layer.draw();
   });
+
+  test('try to add destroyed shape', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var star = new Konva.Star({
+      x: 200,
+      y: 100,
+      numPoints: 5,
+      innerRadius: 40,
+      outerRadius: 70,
+
+      stroke: 'blue',
+      strokeWidth: 5,
+      draggable: true
+    });
+
+    star.destroy();
+
+    var callCount = 0;
+    var oldWarn = Konva.Util.warn;
+    Konva.Util.warn = function() {
+      callCount += 1;
+    };
+
+    layer.add(star);
+
+    layer.draw();
+
+    assert.equal(callCount, 1);
+    Konva.Util.warn = oldWarn;
+  });
 });