mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 15:23:44 +08:00
added new selector capability to .get() method. You can now select all nodes by type inside of a container, such as by Shape, Group, or Layer
This commit is contained in:
parent
2879c0763f
commit
192681374d
31
dist/kinetic-core.js
vendored
31
dist/kinetic-core.js
vendored
@ -1056,6 +1056,9 @@ Kinetic.Container.prototype = {
|
|||||||
else if(selector.charAt(0) === '.') {
|
else if(selector.charAt(0) === '.') {
|
||||||
arr = stage.names[key] !== undefined ? stage.names[key] : [];
|
arr = stage.names[key] !== undefined ? stage.names[key] : [];
|
||||||
}
|
}
|
||||||
|
else if(selector === 'Shape' || selector === 'Group' || selector === 'Layer') {
|
||||||
|
return this._getNodes(selector);
|
||||||
|
}
|
||||||
else {
|
else {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
@ -1090,6 +1093,27 @@ Kinetic.Container.prototype = {
|
|||||||
|
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* get all shapes inside container
|
||||||
|
*/
|
||||||
|
_getNodes: function(sel) {
|
||||||
|
var arr = [];
|
||||||
|
function traverse(cont) {
|
||||||
|
var children = cont.getChildren();
|
||||||
|
for(var n = 0; n < children.length; n++) {
|
||||||
|
var child = children[n];
|
||||||
|
if(child.nodeType === sel) {
|
||||||
|
arr.push(child);
|
||||||
|
}
|
||||||
|
else if(child.nodeType !== 'Shape') {
|
||||||
|
traverse(child);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
traverse(this);
|
||||||
|
|
||||||
|
return arr;
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* draw children
|
* draw children
|
||||||
*/
|
*/
|
||||||
@ -1514,6 +1538,13 @@ Kinetic.Stage.prototype = {
|
|||||||
*/
|
*/
|
||||||
getHeight: function() {
|
getHeight: function() {
|
||||||
return this.attrs.height;
|
return this.attrs.height;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* get shapes in point
|
||||||
|
* @param {Object} point
|
||||||
|
*/
|
||||||
|
getShapesInPoint: function(pos) {
|
||||||
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* detect event
|
* detect event
|
||||||
|
4
dist/kinetic-core.min.js
vendored
4
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
@ -71,6 +71,9 @@ Kinetic.Container.prototype = {
|
|||||||
else if(selector.charAt(0) === '.') {
|
else if(selector.charAt(0) === '.') {
|
||||||
arr = stage.names[key] !== undefined ? stage.names[key] : [];
|
arr = stage.names[key] !== undefined ? stage.names[key] : [];
|
||||||
}
|
}
|
||||||
|
else if(selector === 'Shape' || selector === 'Group' || selector === 'Layer') {
|
||||||
|
return this._getNodes(selector);
|
||||||
|
}
|
||||||
else {
|
else {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
@ -105,6 +108,27 @@ Kinetic.Container.prototype = {
|
|||||||
|
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* get all shapes inside container
|
||||||
|
*/
|
||||||
|
_getNodes: function(sel) {
|
||||||
|
var arr = [];
|
||||||
|
function traverse(cont) {
|
||||||
|
var children = cont.getChildren();
|
||||||
|
for(var n = 0; n < children.length; n++) {
|
||||||
|
var child = children[n];
|
||||||
|
if(child.nodeType === sel) {
|
||||||
|
arr.push(child);
|
||||||
|
}
|
||||||
|
else if(child.nodeType !== 'Shape') {
|
||||||
|
traverse(child);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
traverse(this);
|
||||||
|
|
||||||
|
return arr;
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* draw children
|
* draw children
|
||||||
*/
|
*/
|
||||||
|
@ -349,6 +349,13 @@ Kinetic.Stage.prototype = {
|
|||||||
*/
|
*/
|
||||||
getHeight: function() {
|
getHeight: function() {
|
||||||
return this.attrs.height;
|
return this.attrs.height;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* get shapes in point
|
||||||
|
* @param {Object} point
|
||||||
|
*/
|
||||||
|
getShapesInPoint: function(pos) {
|
||||||
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* detect event
|
* detect event
|
||||||
|
@ -1348,6 +1348,57 @@ Test.prototype.tests = {
|
|||||||
y: 151
|
y: 151
|
||||||
}) === false, 'intersects with point in shape');
|
}) === false, 'intersects with point in shape');
|
||||||
},
|
},
|
||||||
|
'STAGE - node type selector': function(containerId) {
|
||||||
|
var stage = new Kinetic.Stage({
|
||||||
|
container: containerId,
|
||||||
|
width: 578,
|
||||||
|
height: 200
|
||||||
|
});
|
||||||
|
var layer = new Kinetic.Layer();
|
||||||
|
var fooLayer = new Kinetic.Layer();
|
||||||
|
var group = new Kinetic.Group();
|
||||||
|
|
||||||
|
var blue = new Kinetic.Rect({
|
||||||
|
x: 200,
|
||||||
|
y: 100,
|
||||||
|
width: 100,
|
||||||
|
height: 50,
|
||||||
|
fill: 'blue'
|
||||||
|
});
|
||||||
|
|
||||||
|
var red = new Kinetic.Rect({
|
||||||
|
x: 250,
|
||||||
|
y: 100,
|
||||||
|
width: 100,
|
||||||
|
height: 50,
|
||||||
|
fill: 'red'
|
||||||
|
});
|
||||||
|
|
||||||
|
group.add(red);
|
||||||
|
layer.add(blue);
|
||||||
|
layer.add(group);
|
||||||
|
stage.add(layer);
|
||||||
|
stage.add(fooLayer);
|
||||||
|
|
||||||
|
test(stage.get('Shape').length === 2, 'stage should have 2 shapes');
|
||||||
|
test(layer.get('Shape').length === 2, 'layer should have 2 shapes');
|
||||||
|
test(group.get('Shape').length === 1, 'layer should have 2 shapes');
|
||||||
|
|
||||||
|
test(stage.get('Layer').length === 2, 'stage should have 2 layers');
|
||||||
|
test(stage.get('Group').length === 1, 'stage should have 1 group');
|
||||||
|
|
||||||
|
test(layer.get('Group').length === 1, 'layer should have 1 group');
|
||||||
|
test(layer.get('Shape').length === 2, 'layer should have 2 shapes');
|
||||||
|
test(layer.get('Layer').length === 0, 'layer should have 0 layers');
|
||||||
|
|
||||||
|
test(fooLayer.get('Group').length === 0, 'layer should have 0 groups');
|
||||||
|
test(fooLayer.get('Shape').length === 0, 'layer should have 0 shapes');
|
||||||
|
|
||||||
|
test(group.get('Shape').length === 1, 'group should have 1 shape');
|
||||||
|
test(group.get('Layer').length === 0, 'group should have 0 layers');
|
||||||
|
test(group.get('Group').length === 0, 'group should have 0 groups');
|
||||||
|
|
||||||
|
},
|
||||||
'Text - add text': function(containerId) {
|
'Text - add text': function(containerId) {
|
||||||
var stage = new Kinetic.Stage({
|
var stage = new Kinetic.Stage({
|
||||||
container: containerId,
|
container: containerId,
|
||||||
|
Loading…
Reference in New Issue
Block a user