mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
new node.findAncestors(selector) and node.findAncestor(selector) functions. close #116
This commit is contained in:
Anton Lavrenov
parent
c79fcd377e
commit
28e8758d29
@ -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`
|
||||
|
||||
56
konva.js
56
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;
|
||||
if (!parent) {
|
||||
return res;
|
||||
var ancestor = this.parent;
|
||||
while(ancestor) {
|
||||
if (ancestor === stopNode) {
|
||||
return res;
|
||||
}
|
||||
if (ancestor._isMatch(selector)) {
|
||||
res.push(ancestor);
|
||||
}
|
||||
ancestor = ancestor.parent;
|
||||
}
|
||||
if (parent === stopNode) {
|
||||
return res;
|
||||
}
|
||||
return res.concat(parent._findMatchers(selector, stopNode));
|
||||
return res;
|
||||
},
|
||||
/**
|
||||
* 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;
|
||||
|
||||
10
konva.min.js
vendored
10
konva.min.js
vendored
File diff suppressed because one or more lines are too long
54
src/Node.js
54
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;
|
||||
if (!parent) {
|
||||
return res;
|
||||
var ancestor = this.parent;
|
||||
while(ancestor) {
|
||||
if (ancestor === stopNode) {
|
||||
return res;
|
||||
}
|
||||
if (ancestor._isMatch(selector)) {
|
||||
res.push(ancestor);
|
||||
}
|
||||
ancestor = ancestor.parent;
|
||||
}
|
||||
if (parent === stopNode) {
|
||||
return res;
|
||||
}
|
||||
return res.concat(parent._findMatchers(selector, stopNode));
|
||||
return res;
|
||||
},
|
||||
/**
|
||||
* 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;
|
||||
|
||||
@ -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');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user