lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improved get method to inlude get by shapeType. Also improved the oo-design.

Browse Source
This commit is contained in:
David Johansson 2012-10-06 23:35:46 +02:00
parent 6f230fc42b
commit 8e03a97d46
7 changed files with 230 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
dist/kinetic-core.js vendored
View File

@ -2058,6 +2058,9 @@ Kinetic.Node.prototype = {
this.setAttr('scale', pos);
},
_get: function(selector) {
return this.nodeType === selector ? [this] : [];
},
_off: function(type, name) {
for(var i = 0; i < this.eventListeners[type].length; i++) {
if(this.eventListeners[type][i].name === name) {
@ -2591,43 +2594,46 @@ Kinetic.Container.prototype = {
* @param {String} selector
*/
get: function(selector) {
var stage = this.getStage();
// Node type selector
if(selector === 'Shape' || selector === 'Group' || selector === 'Layer') {
var retArr = new Kinetic.Collection();
function traverse(cont) {
var children = cont.getChildren();
for(var n = 0; n < children.length; n++) {
var child = children[n];
if(child.nodeType === selector) {
retArr.push(child);
}
else if(child.nodeType !== 'Shape') {
traverse(child);
}
}
}
traverse(this);
return retArr;
}
var collection = new Kinetic.Collection();
// ID selector
else if(selector.charAt(0) === '#') {
var key = selector.slice(1);
var arr = stage.ids[key] !== undefined ? [stage.ids[key]] : [];
return this._getDescendants(arr);
if(selector.charAt(0) === '#') {
var node = this._getNodeById(selector.slice(1));
if (node) collection.push(node);
}
// name selector
else if(selector.charAt(0) === '.') {
var key = selector.slice(1);
var arr = stage.names[key] || [];
return this._getDescendants(arr);
var nodeList = this._getNodesByName(selector.slice(1));
Kinetic.Collection.apply(collection, nodeList);
}
// unrecognized selector
// unrecognized selector, pass to children
else {
return [];
var retArr = [];
var children = this.getChildren();
for(var n = 0; n < children.length; n++) {
retArr = retArr.concat(children[n]._get(selector));
}
Kinetic.Collection.apply(collection, retArr);
}
return collection;
},
_getNodeById: function(key) {
var stage = this.getStage();
if(stage.ids[key] !== undefined && this.isAncestorOf(stage.ids[key])) {
return stage.ids[key];
}
return null;
},
_getNodesByName: function(key) {
var arr = this.getStage().names[key] || [];
return this._getDescendants(arr);
},
_get: function(selector) {
var retArr = Kinetic.Node.prototype._get.call(this, selector);
var children = this.getChildren();
for(var n = 0; n < children.length; n++) {
retArr = retArr.concat(children[n]._get(selector));
}
return retArr;
},
// extenders
toObject: function() {
@ -2644,7 +2650,7 @@ Kinetic.Container.prototype = {
return obj;
},
_getDescendants: function(arr) {
var retArr = new Kinetic.Collection();
var retArr = [];
for(var n = 0; n < arr.length; n++) {
var node = arr[n];
if(this.isAncestorOf(node)) {
@ -3020,6 +3026,12 @@ Kinetic.Stage.prototype = {
return null;
},
_getNodeById: function(key) {
return this.ids[key] || null;
},
_getNodesByName: function(key) {
return this.names[key] || [];
},
_resizeDOM: function() {
if(this.content) {
var width = this.attrs.width;
@ -4145,6 +4157,9 @@ Kinetic.Shape.prototype = {
height: this.getHeight()
};
},
_get: function(selector) {
return this.nodeType === selector || this.shapeType === selector ? [this] : [];
},
/**
* apply shadow. return true if shadow was applied
* and false if it was not

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

65
src/Container.js
View File

@ -100,43 +100,46 @@ Kinetic.Container.prototype = {
* @param {String} selector
*/
get: function(selector) {
var stage = this.getStage();
// Node type selector
if(selector === 'Shape' || selector === 'Group' || selector === 'Layer') {
var retArr = new Kinetic.Collection();
function traverse(cont) {
var children = cont.getChildren();
for(var n = 0; n < children.length; n++) {
var child = children[n];
if(child.nodeType === selector) {
retArr.push(child);
}
else if(child.nodeType !== 'Shape') {
traverse(child);
}
}
}
traverse(this);
return retArr;
}
var collection = new Kinetic.Collection();
// ID selector
else if(selector.charAt(0) === '#') {
var key = selector.slice(1);
var arr = stage.ids[key] !== undefined ? [stage.ids[key]] : [];
return this._getDescendants(arr);
if(selector.charAt(0) === '#') {
var node = this._getNodeById(selector.slice(1));
if (node) collection.push(node);
}
// name selector
else if(selector.charAt(0) === '.') {
var key = selector.slice(1);
var arr = stage.names[key] || [];
return this._getDescendants(arr);
var nodeList = this._getNodesByName(selector.slice(1));
Kinetic.Collection.apply(collection, nodeList);
}
// unrecognized selector
// unrecognized selector, pass to children
else {
return [];
var retArr = [];
var children = this.getChildren();
for(var n = 0; n < children.length; n++) {
retArr = retArr.concat(children[n]._get(selector));
}
Kinetic.Collection.apply(collection, retArr);
}
return collection;
},
_getNodeById: function(key) {
var stage = this.getStage();
if(stage.ids[key] !== undefined && this.isAncestorOf(stage.ids[key])) {
return stage.ids[key];
}
return null;
},
_getNodesByName: function(key) {
var arr = this.getStage().names[key] || [];
return this._getDescendants(arr);
},
_get: function(selector) {
var retArr = Kinetic.Node.prototype._get.call(this, selector);
var children = this.getChildren();
for(var n = 0; n < children.length; n++) {
retArr = retArr.concat(children[n]._get(selector));
}
return retArr;
},
// extenders
toObject: function() {
@ -153,7 +156,7 @@ Kinetic.Container.prototype = {
return obj;
},
_getDescendants: function(arr) {
var retArr = new Kinetic.Collection();
var retArr = [];
for(var n = 0; n < arr.length; n++) {
var node = arr[n];
if(this.isAncestorOf(node)) {

3
src/Node.js
View File

@ -835,6 +835,9 @@ Kinetic.Node.prototype = {
this.setAttr('scale', pos);
},
_get: function(selector) {
return this.nodeType === selector ? [this] : [];
},
_off: function(type, name) {
for(var i = 0; i < this.eventListeners[type].length; i++) {
if(this.eventListeners[type][i].name === name) {

3
src/Shape.js
View File

@ -377,6 +377,9 @@ Kinetic.Shape.prototype = {
height: this.getHeight()
};
},
_get: function(selector) {
return this.nodeType === selector || this.shapeType === selector ? [this] : [];
},
/**
* apply shadow. return true if shadow was applied
* and false if it was not

6
src/Stage.js
View File

@ -299,6 +299,12 @@ Kinetic.Stage.prototype = {
return null;
},
_getNodeById: function(key) {
return this.ids[key] || null;
},
_getNodesByName: function(key) {
return this.names[key] || [];
},
_resizeDOM: function() {
if(this.content) {
var width = this.attrs.width;

135
tests/js/unitTests.js
View File

@ -2593,6 +2593,141 @@ Test.prototype.tests = {
test(group.get('Group').length === 0, 'group should have 0 groups');
},
'CONTAINER - node and shape type selector': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var layer2 = new Kinetic.Layer();
var fooLayer = new Kinetic.Layer();
var group = new Kinetic.Group();
var blue = new Kinetic.Rect({
x: 100,
y: 50,
width: 100,
height: 50,
fill: 'blue'
});
var red = new Kinetic.Rect({
x: 150,
y: 75,
width: 100,
height: 50,
fill: 'red'
});
var green = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'green'
});
var blueCircle = new Kinetic.Circle({
x: 350,
y: 75,
radius: 40,
fill: 'blue'
});
var redCircle = new Kinetic.Circle({
x: 400,
y: 125,
radius: 40,
fill: 'red'
});
var textpath = new Kinetic.TextPath({
y: 35,
textStroke: 'black',
textStrokeWidth: 1,
textFill: 'orange',
fontSize: '18',
fontFamily: 'Arial',
text: 'The quick brown fox jumped over the lazy dog\'s back',
data: "M 10,10 300,150 550,150"
});
var path = new Kinetic.Path({
x: 200,
y: -75,
data: 'M200,100h100v50z',
fill: '#ccc',
stroke: '#333',
strokeWidth: 2,
shadow: {
color: 'black',
blur: 2,
offset: [10, 10],
opacity: 0.5
},
});
var poly = new Kinetic.RegularPolygon({
x: stage.getWidth()/2,
y: stage.getHeight()/2,
sides: 5,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
group.add(red);
group.add(redCircle);
layer.add(blue);
layer.add(green);
layer.add(blueCircle);
layer.add(group);
layer2.add(textpath);
layer2.add(path);
layer2.add(poly);
stage.add(layer);
stage.add(layer2);
stage.add(fooLayer);
test(stage.get('Shape').length === 8, 'stage should have 5 shapes');
test(stage.get('Layer').length === 3, 'stage should have 2 layers');
test(stage.get('Group').length === 1, 'stage should have 1 group');
test(stage.get('Rect').length === 3, 'stage should have 3 rects');
test(stage.get('Circle').length === 2, 'stage should have 2 circles');
test(stage.get('RegularPolygon').length === 1, 'stage should have 1 regular polygon');
test(stage.get('TextPath').length === 1, 'stage should have 1 text path');
test(stage.get('Path').length === 1, 'stage should have 1 path');
test(layer.get('Shape').length === 5, 'layer should have 5 shapes');
test(layer.get('Layer').length === 0, 'layer should have 0 layers');
test(layer.get('Group').length === 1, 'layer should have 1 group');
test(layer.get('Rect').length === 3, 'layer should have 3 rects');
test(layer.get('Circle').length === 2, 'layer should have 2 circles');
test(layer.get('RegularPolygon').length === 0, 'layer should have 0 regular polygon');
test(layer.get('TextPath').length === 0, 'layer should have 0 text path');
test(layer.get('Path').length === 0, 'layer should have 0 path');
test(layer2.get('Shape').length === 3, 'layer2 should have 3 shapes');
test(layer2.get('Layer').length === 0, 'layer2 should have 0 layers');
test(layer2.get('Group').length === 0, 'layer2 should have 0 group');
test(layer2.get('RegularPolygon').length === 1, 'layer2 should have 1 regular polygon');
test(layer2.get('TextPath').length === 1, 'layer2 should have 1 text path');
test(layer2.get('Path').length === 1, 'layer2 should have 1 path');
test(fooLayer.get('Shape').length === 0, 'layer should have 0 shapes');
test(fooLayer.get('Group').length === 0, 'layer should have 0 groups');
test(fooLayer.get('Rect').length === 0, 'layer should have 0 rects');
test(fooLayer.get('Circle').length === 0, 'layer should have 0 circles');
test(group.get('Shape').length === 2, 'group should have 2 shape');
test(group.get('Layer').length === 0, 'group should have 0 layers');
test(group.get('Group').length === 0, 'group should have 0 groups');
test(group.get('Rect').length === 1, 'group should have 1 rects');
test(group.get('Circle').length === 1, 'gropu should have 1 circles');
},
'SHAPE - text getters and setters': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,