diff --git a/CHANGELOG.md b/CHANGELOG.md index 309b3338..9b2a8ba5 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/Container.js b/src/Container.js index 659f2946..45941c75 100644 --- a/src/Container.js +++ b/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)); diff --git a/src/Node.js b/src/Node.js index 77565af2..f6b1100e 100644 --- a/src/Node.js +++ b/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). - * This rectangle relative to parent container. + * Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc). + * The rectangle position is relative to parent container. * @method * @memberof Konva.Node.prototype * @param {Boolean} [skipTransform] flag should we skip transformation to rectangle diff --git a/test/unit/Container-test.js b/test/unit/Container-test.js index 6a7c2e2b..ba659157 100644 --- a/test/unit/Container-test.js +++ b/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();