validation for find and findOne methods

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Correct `clone()` for custom nodes
 - `FastLayer` now can have transforms
 - `stage.toDataURL()` method now works in synchronous way. So `callback` argument is not required.
+- `container.find(selector)` method now have validation step. So if you forgot to add `#` or `.` you will see a warning message in the console.
 
 ### Added
 - new `Konva.Image.fromURL` method

src/Container.js

@@ -1,5 +1,13 @@
 (function() {
     'use strict';
+
+    function isValidSelector(selector) {
+        if (typeof selector !== 'string') {
+            return false;
+        }
+        var firstChar = selector[0];
+        return firstChar === '#' || firstChar === '.' ||   firstChar === firstChar.toUpperCase();
+    }
     /**
      * Container constructor.  Containers are used to contain nodes or other containers
      * @constructor
@@ -174,7 +182,11 @@
 
             for (n = 0; n < len; n++) {
                 sel = selectorArr[n];
-
+                if (!isValidSelector(sel)) {
+                    Konva.Util.warn('Selector "' + sel + '" is invalid. Allowed selectors examples are "#foo", ".bar" or "Group".');
+                    Konva.Util.warn('If you have a custom shape with such className, please change it to start with upper letter like "Triangle".');
+                    Konva.Util.warn('Konva is awesome, right?');
+                }
                 // id selector
                 if(sel.charAt(0) === '#') {
                     node = this._getNodeById(sel.slice(1));

src/Node.js

@@ -236,8 +236,8 @@
             return this;
         },
         /**
-         * return client rectangle (x, y, width, height) of node. This rectangle also include all styling (strokes, shadows, etc).
+         * Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc).
-         * This rectangle relative to parent container.
+         * The rectangle position is relative to parent container.
          * @method
          * @memberof Konva.Node.prototype
          * @param {Boolean} [skipTransform] flag should we skip transformation to rectangle

test/unit/Container-test.js

@@ -1089,6 +1089,47 @@ suite('Container', function() {
         layer.draw();
     });
 
+
+
+    test('warn on invalid selector', function() {
+        var stage = addStage();
+        var layer = new Konva.Layer({
+            name: 'layerName',
+            id: 'layerId'
+        });
+        var group = new Konva.Group({
+            name: 'groupName',
+            id: 'groupId'
+        });
+        var rect = new Konva.Rect({
+            x: 200,
+            y: 20,
+            width: 100,
+            height: 50,
+            fill: 'red',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'rectName',
+            id: 'rectId'
+        });
+
+        stage.add(layer);
+        layer.add(group);
+        group.add(rect);
+        layer.draw();
+
+        var counter = 0;
+        var oldWarn = Konva.Util.warn;
+        Konva.Util.warn = function() {
+            counter += 1;
+        };
+
+        // forgot dot
+        group.find('rectName');
+        assert.equal(counter > 0, true);
+        Konva.Util.warn = oldWarn;
+    });
+
     // ======================================================
     test('add layer then shape', function() {
         var stage = addStage();