new node.findAncestors(selector) and node.findAncestor(selector) functions. close #116

CHANGELOG.md

@@ -11,6 +11,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 - event delegation. You can use it in this way: `layer.on('click', 'Circle', handler);`
+- new `node.findAncestors(selector)` and `node.findAncestor(selector)` functions
 
 ### Changed
 - `moveTo` and some other methods return `this`

konva.js

@@ -3,7 +3,7 @@
  * Konva JavaScript Framework v0.11.0
  * http://konvajs.github.io/
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Wed Dec 23 2015
+ * Date: Fri Dec 25 2015
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@@ -2781,7 +2781,7 @@ var Konva = {};
         _delegate: function(event, selector, handler) {
             var stopNode = this;
             this.on(event, function(evt) {
-                var targets = evt.target._findMatchers(selector, stopNode);
+                var targets = evt.target.findAncestors(selector, true, stopNode);
                 for(var i = 0; i < targets.length; i++) {
                     evt = Konva.Util.cloneObject(evt);
                     evt.currentTarget = targets[i];
@@ -3443,22 +3443,56 @@ var Konva = {};
         getParent: function() {
             return this.parent;
         },
-        _findMatchers: function(selector, stopNode) {
+        /**
+         * get all ancestros (parent then parent of the parent, etc) of the node
+         * @method
+         * @memberof Konva.Node.prototype
+         * @param {String} [selector] selector for search
+         * @param {Boolean} [includeSelf] show we think that node is ancestro itself?
+         * @param {Konva.Node} [stopNode] optional node where we need to stop searching (one of ancestors)
+         * @returns {Array} [ancestors]
+         * @example
+         * // get one of the parent group
+         * var parentGroups = node.findAncestors('Group');
+         */
+        findAncestors: function(selector, includeSelf, stopNode) {
             var res = [];
-            if (this._isMatch(selector)) {
+
+            if (includeSelf && this._isMatch(selector)) {
                 res.push(this);
             }
-            var parent = this.parent;
+            var ancestor = this.parent;
-            if (!parent) {
+            while(ancestor) {
-                return res;
+                if (ancestor === stopNode) {
+                    return res;
+                }
+                if (ancestor._isMatch(selector)) {
+                    res.push(ancestor);
+                }
+                ancestor = ancestor.parent;
             }
-            if (parent === stopNode) {
+            return res;
-                return res;
+        },
-            }
+        /**
-            return res.concat(parent._findMatchers(selector, stopNode));
+         * get ancestor (parent or parent of the parent, etc) of the node that match passed selector
+         * @method
+         * @memberof Konva.Node.prototype
+         * @param {String} [selector] selector for search
+         * @param {Boolean} [includeSelf] show we think that node is ancestro itself?
+         * @param {Konva.Node} [stopNode] optional node where we need to stop searching (one of ancestors)
+         * @returns {Konva.Node} ancestor
+         * @example
+         * // get one of the parent group
+         * var group = node.findAncestors('.mygroup');
+         */
+        findAncestor: function(selector, includeSelf, stopNode) {
+            return this.findAncestors(selector, includeSelf, stopNode)[0];
         },
         // is current node match passed selector?
         _isMatch: function(selector) {
+            if (!selector) {
+                return false;
+            }
             var selectorArr = selector.replace(/ /g, '').split(','),
                 len = selectorArr.length,
                 n, sel;

src/Node.js

@@ -533,7 +533,7 @@
         _delegate: function(event, selector, handler) {
             var stopNode = this;
             this.on(event, function(evt) {
-                var targets = evt.target._findMatchers(selector, stopNode);
+                var targets = evt.target.findAncestors(selector, true, stopNode);
                 for(var i = 0; i < targets.length; i++) {
                     evt = Konva.Util.cloneObject(evt);
                     evt.currentTarget = targets[i];
@@ -1195,22 +1195,56 @@
         getParent: function() {
             return this.parent;
         },
-        _findMatchers: function(selector, stopNode) {
+        /**
+         * get all ancestros (parent then parent of the parent, etc) of the node
+         * @method
+         * @memberof Konva.Node.prototype
+         * @param {String} [selector] selector for search
+         * @param {Boolean} [includeSelf] show we think that node is ancestro itself?
+         * @param {Konva.Node} [stopNode] optional node where we need to stop searching (one of ancestors)
+         * @returns {Array} [ancestors]
+         * @example
+         * // get one of the parent group
+         * var parentGroups = node.findAncestors('Group');
+         */
+        findAncestors: function(selector, includeSelf, stopNode) {
             var res = [];
-            if (this._isMatch(selector)) {
+
+            if (includeSelf && this._isMatch(selector)) {
                 res.push(this);
             }
-            var parent = this.parent;
+            var ancestor = this.parent;
-            if (!parent) {
+            while(ancestor) {
-                return res;
+                if (ancestor === stopNode) {
+                    return res;
+                }
+                if (ancestor._isMatch(selector)) {
+                    res.push(ancestor);
+                }
+                ancestor = ancestor.parent;
             }
-            if (parent === stopNode) {
+            return res;
-                return res;
+        },
-            }
+        /**
-            return res.concat(parent._findMatchers(selector, stopNode));
+         * get ancestor (parent or parent of the parent, etc) of the node that match passed selector
+         * @method
+         * @memberof Konva.Node.prototype
+         * @param {String} [selector] selector for search
+         * @param {Boolean} [includeSelf] show we think that node is ancestro itself?
+         * @param {Konva.Node} [stopNode] optional node where we need to stop searching (one of ancestors)
+         * @returns {Konva.Node} ancestor
+         * @example
+         * // get one of the parent group
+         * var group = node.findAncestors('.mygroup');
+         */
+        findAncestor: function(selector, includeSelf, stopNode) {
+            return this.findAncestors(selector, includeSelf, stopNode)[0];
         },
         // is current node match passed selector?
         _isMatch: function(selector) {
+            if (!selector) {
+                return false;
+            }
             var selectorArr = selector.replace(/ /g, '').split(','),
                 len = selectorArr.length,
                 n, sel;

test/unit/Node-test.js

@@ -3117,4 +3117,57 @@ suite('Node', function() {
       assert.equal(node.toObject().attrs.radius, 10);
       delete Number.prototype.customFunc;
   });
+
+
+    test('test findAncestor', function() {
+        var stage = addStage();
+        stage.setAttrs({
+            name: 'stage',
+            id: 'stage'
+        });
+        var layer = new Konva.Layer({
+            id: 'layer',
+            name: 'layer'
+        });
+        stage.add(layer);
+
+        var group = new Konva.Group({
+            id: 'group',
+            name: 'group'
+        });
+        layer.add(group);
+
+        var rect = new Konva.Rect({
+            x: 35,
+            y: 35,
+            width: 50,
+            height : 50,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'rect',
+        });
+        group.add(rect);
+
+        stage.draw();
+
+        assert.equal(!!rect.findAncestor('.null'), false);
+
+        assert.notEqual(rect.findAncestor('.rect'), rect, 'do not find self in ancestors')
+
+        assert.equal(rect.findAncestor('.stage'), stage, 'find stage by name');
+        assert.equal(rect.findAncestor('#stage'), stage, 'find stage by id');
+        assert.equal(rect.findAncestor('Stage'), stage, 'find stage by node type');
+
+        assert.equal(rect.findAncestor('.layer'), layer);
+        assert.equal(rect.findAncestor('#layer'), layer);
+        assert.equal(rect.findAncestor('Layer'), layer);
+
+        assert.equal(rect.findAncestor('.group'), group);
+        assert.equal(rect.findAncestor('#group'), group);
+        assert.equal(rect.findAncestor('Group'), group);
+
+        assert.equal(rect.findAncestor(), null, 'return null if no selector');
+    });
+
 });