diff --git a/src/Container.js b/src/Container.js
index 46a61880..bc08f136 100644
--- a/src/Container.js
+++ b/src/Container.js
@@ -95,39 +95,43 @@
* var nodes = layer.get('Group');
*
* // select all rectangles inside layer
- * var nodes = layer.get('Rect');
+ * var nodes = layer.get('Rect');
*
* // select node with an id of foo or a name of bar inside layer
- * var nodes = layer.get('#foo .bar');
+ * var nodes = layer.get('#foo, .bar');
*/
get: function(selector) {
- var collection = new Kinetic.Collection();
- // ID selector
- selector = selector.split(" ");
- for (index = 0; index < selector.length; ++index) {
- if(selector.charAt(0) === '#') {
- var node = this._getNodeById(selector.slice(1));
+ var retArr = [],
+ selectorArr = selector.replace(/ /g, '').split(','),
+ len = selectorArr.length,
+ n, i, sel, arr, node, children, clen;
+
+ for (n = 0; n < len; n++) {
+ sel = selectorArr[n];
+
+ // id selector
+ if(sel.charAt(0) === '#') {
+ node = this._getNodeById(sel.slice(1));
if(node) {
- collection.push(node);
+ retArr.push(node);
}
}
// name selector
- else if(selector.charAt(0) === '.') {
- var nodeList = this._getNodesByName(selector.slice(1));
- Kinetic.Collection.apply(collection, nodeList);
+ else if(sel.charAt(0) === '.') {
+ arr = this._getNodesByName(sel.slice(1));
+ retArr = retArr.concat(arr);
}
// unrecognized selector, pass to children
else {
- var retArr = [];
- var children = this.getChildren();
- var len = children.length;
- for(var n = 0; n < len; n++) {
- retArr = retArr.concat(children[n]._get(selector));
+ children = this.getChildren();
+ clen = children.length;
+ for(i = 0; i < clen; i++) {
+ retArr = retArr.concat(children[i]._get(sel));
}
- Kinetic.Collection.apply(collection, retArr);
}
}
- return collection;
+
+ return Kinetic.Collection.toCollection(retArr);
},
_getNodeById: function(key) {
var stage = this.getStage(), go = Kinetic.Global, node = go.ids[key];
@@ -205,7 +209,7 @@
},
/**
* get all shapes that intersect a point. Note: because this method must clear a temporary
- * canvas and redraw every shape inside the container, it should only be used for special sitations
+ * canvas and redraw every shape inside the container, it should only be used for special sitations
* because it performs very poorly. Please use the {@link Kinetic.Stage#getIntersection} method if at all possible
* because it performs much better
* @method
@@ -237,23 +241,23 @@
var layer = this.getLayer(),
clip = !!this.getClipFunc(),
children, n, len;
-
+
if (!canvas && layer) {
- canvas = layer.getCanvas();
- }
+ canvas = layer.getCanvas();
+ }
if(this.isVisible()) {
if (clip) {
canvas._clip(this);
}
-
- children = this.children;
+
+ children = this.children;
len = children.length;
-
+
for(n = 0; n < len; n++) {
children[n].drawScene(canvas);
}
-
+
if (clip) {
canvas.getContext().restore();
}
@@ -263,18 +267,18 @@
},
drawHit: function() {
var clip = !!this.getClipFunc() && this.nodeType !== 'Stage',
- n = 0,
- len = 0,
+ n = 0,
+ len = 0,
children = [],
hitCanvas;
if(this.shouldDrawHit()) {
if (clip) {
- hitCanvas = this.getLayer().hitCanvas;
+ hitCanvas = this.getLayer().hitCanvas;
hitCanvas._clip(this);
}
-
- children = this.children;
+
+ children = this.children;
len = children.length;
for(n = 0; n < len; n++) {
@@ -295,7 +299,7 @@
Kinetic.Node.addGetterSetter(Kinetic.Container, 'clipFunc');
/**
- * set clipping function
+ * set clipping function
* @name setClipFunc
* @method
* @memberof Kinetic.Container.prototype
@@ -303,7 +307,7 @@
*/
/**
- * get clipping function
+ * get clipping function
* @name getClipFunc
* @method
* @memberof Kinetic.Container.prototype
diff --git a/src/Util.js b/src/Util.js
index bee1baf8..d6c40b90 100644
--- a/src/Util.js
+++ b/src/Util.js
@@ -38,17 +38,36 @@
* @memberof Kinetic.Collection.prototype
*/
Kinetic.Collection.prototype.toArray = function() {
- var arr = [];
- for(var n = 0; n < this.length; n++) {
+ var arr = [],
+ len = this.length,
+ n;
+
+ for(n = 0; n < len; n++) {
arr.push(this[n]);
}
return arr;
};
+ /**
+ * convert array into a collection
+ * @method
+ * @memberof Kinetic.Collection
+ * @param {Array} arr
+ */
+ Kinetic.Collection.toCollection = function(arr) {
+ var collection = new Kinetic.Collection(),
+ len = arr.length,
+ n;
+
+ for(n = 0; n < len; n++) {
+ collection.push(arr[n]);
+ }
+ return collection;
+ };
Kinetic.Collection.mapMethods = function(arr) {
var leng = arr.length,
n;
-
+
for(n = 0; n < leng; n++) {
// induce scope
(function(i) {
@@ -56,11 +75,11 @@
Kinetic.Collection.prototype[method] = function() {
var len = this.length,
i;
-
+
args = [].slice.call(arguments);
for(i = 0; i < len; i++) {
this[i][method].apply(this[i], args);
- }
+ }
};
})(n);
}
@@ -150,7 +169,7 @@
};
},
/**
- * Apply skew
+ * Apply skew
* @method
* @memberof Kinetic.Transform.prototype
* @param {Number} sx
@@ -260,7 +279,7 @@
RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;
- /**
+ /**
* @namespace Util
* @memberof Kinetic
*/
@@ -292,7 +311,7 @@
_hasMethods: function(obj) {
var names = [],
key;
-
+
for(key in obj) {
if(this._isFunction(obj[key])) {
names.push(key);
@@ -498,7 +517,7 @@
*/
_getImage: function(arg, callback) {
var imageObj, canvas, context, dataUrl;
-
+
// if arg is null or undefined
if(!arg) {
callback(null);
@@ -564,7 +583,7 @@
* get RGB components of a color
* @method
* @memberof Kinetic.Util.prototype
- * @param {String} color
+ * @param {String} color
* @example
* // each of the following examples return {r:0, g:0, b:255}
* var rgb = Kinetic.Util.getRGB('blue');
@@ -588,7 +607,7 @@
}
// rgb string
else if (color.substr(0, 4) === RGB_PAREN) {
- rgb = RGB_REGEX.exec(color.replace(/ /g,''));
+ rgb = RGB_REGEX.exec(color.replace(/ /g,''));
return {
r: parseInt(rgb[1], 10),
g: parseInt(rgb[2], 10),
@@ -693,7 +712,7 @@
}];
},
_expandPoints: function(points, tension) {
- var length = points.length,
+ var length = points.length,
allPoints = [],
n, cp;
diff --git a/tests/js/unit/animationTests.js b/tests/js/unit/animationTests.js
index e4e274fd..341523e9 100644
--- a/tests/js/unit/animationTests.js
+++ b/tests/js/unit/animationTests.js
@@ -54,7 +54,7 @@ Test.Modules.ANIMATION = {
anim.stop();
test(a.animations.length === 0, '7should be no animations running');
},
- '*batch draw': function(containerId) {
+ 'batch draw': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -77,7 +77,7 @@ Test.Modules.ANIMATION = {
draws = 0;
layer.on('draw', function() {
- console.log('draw')
+ //console.log('draw')
draws++;
});
diff --git a/tests/js/unit/containerTests.js b/tests/js/unit/containerTests.js
index 6c321aa8..3c588b07 100644
--- a/tests/js/unit/containerTests.js
+++ b/tests/js/unit/containerTests.js
@@ -10,7 +10,7 @@ Test.Modules.CONTAINER = {
clipFunc: function(canvas) {
var context = canvas.getContext();
context.rect(0, 0, 400, 100);
- }
+ }
});
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
@@ -119,6 +119,51 @@ Test.Modules.CONTAINER = {
node = stage.get('#myLayer')[0];
test(node.nodeType === 'Layer', 'node type should be Layer');
+ },
+ 'select shapes with multiple selectors': function(containerId) {
+ var stage = new Kinetic.Stage({
+ container: containerId,
+ width: 578,
+ height: 200
+ });
+ var layer = new Kinetic.Layer({
+ id: 'myLayer'
+ });
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ id: 'myCircle'
+ });
+
+ var rect = new Kinetic.Rect({
+ x: 300,
+ y: 100,
+ width: 100,
+ height: 50,
+ fill: 'purple',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myRect'
+ });
+
+ layer.add(circle);
+ layer.add(rect);
+ stage.add(layer);
+
+ test(layer.get('#myCircle, .myRect').length === 2, 'should be 2 items in the array');
+ test(layer.get('#myCircle, .myRect')[0]._id === circle._id, 'circle id is wrong');
+ test(layer.get('#myCircle, .myRect')[1]._id === rect._id, 'rect id is wrong');
+
+ test(layer.get('#myCircle, Circle, .myRect, Rect').length === 4, 'should be 4 items in the array');
+ test(layer.get('#myCircle, Circle, .myRect, Rect')[0]._id === circle._id, 'circle id is wrong');
+ test(layer.get('#myCircle, Circle, .myRect, Rect')[1]._id === circle._id, 'circle id is wrong');
+ test(layer.get('#myCircle, Circle, .myRect, Rect')[2]._id === rect._id, 'rect id is wrong');
+ test(layer.get('#myCircle, Circle, .myRect, Rect')[3]._id === rect._id, 'rect id is wrong');
+
},
'set x on an array of nodes': function(containerId) {
var stage = new Kinetic.Stage({
@@ -287,7 +332,7 @@ Test.Modules.CONTAINER = {
layer.add(circle);
layer.add(rect);
stage.add(layer);
-
+
var go = Kinetic.Global;
test(go.ids['myCircle3'].getId() === 'myCircle3', 'circle id not in ids hash');
@@ -903,7 +948,7 @@ Test.Modules.CONTAINER = {
stage.add(greenLayer);
blueLayer.setZIndex(1);
-
+
//console.log(greenLayer.getZIndex());
test(greenLayer.getZIndex() === 0, 'green layer should have z index of 0');
diff --git a/tests/js/unit/nodeTests.js b/tests/js/unit/nodeTests.js
index 410de67d..617542a3 100644
--- a/tests/js/unit/nodeTests.js
+++ b/tests/js/unit/nodeTests.js
@@ -30,7 +30,7 @@ Test.Modules.NODE = {
test(group.getClassName() === 'Group', 'group class name should be Group');
test(circle.getClassName() === 'Circle', 'circle class name should be Circle');
-
+
},
'setAttr': function(containerId) {
var stage = new Kinetic.Stage({
@@ -63,7 +63,7 @@ Test.Modules.NODE = {
circle.setAttr('foobar', 12);
test(circle.getAttr('foobar') === 12, 'custom foobar attr should be 12');
-
+
},
'set shape and layer opacity to 0.5': function(containerId) {
var stage = new Kinetic.Stage({
@@ -106,7 +106,7 @@ Test.Modules.NODE = {
});
test(!circle.cachedTransform, 'circle transform cache should be empty');
-
+
layer.add(circle);
stage.add(layer);
@@ -130,9 +130,9 @@ Test.Modules.NODE = {
var layer = new Kinetic.Layer();
// override pixel ratio
-
+
layer.canvas = new Kinetic.SceneCanvas({
- pixelRatio: 2
+ pixelRatio: 2
});
layer.canvas.getElement().style.position = 'absolute';
@@ -149,7 +149,7 @@ Test.Modules.NODE = {
stage.add(layer);
test(layer.canvas.pixelRatio === 2, 'layer pixel ratio should be 2');
-
+
},
'listen and don\'t listen': function(containerId) {
@@ -640,7 +640,7 @@ Test.Modules.NODE = {
rect.transitionTo({
duration: 4,
skewY: -2,
- easing: 'ease-in-out'
+ easing: 'ease-in-out'
})
@@ -1591,7 +1591,7 @@ Test.Modules.NODE = {
});
// fire event with bubbling
circle.fire('click', null, true);
-
+
//console.log(clicks);
test(clicks.toString() == 'circle,layer', 'problem with fire 1');
@@ -1607,7 +1607,7 @@ Test.Modules.NODE = {
});
test(foo === 'bar', 'problem with customEvent param passing');
-
+
// test fireing custom event that doesn't exist. script should not fail
circle.fire('kaboom');
@@ -2093,7 +2093,7 @@ Test.Modules.NODE = {
var expectedJson = '{"attrs":{"width":578,"height":200},"nodeType":"Stage","children":[{"attrs":{},"nodeType":"Layer","children":[{"attrs":{},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
-
+
testJSON(stage.toJSON(), expectedJson, 'problem serializing stage with custom shape');
layer.draw();
@@ -2116,7 +2116,7 @@ Test.Modules.NODE = {
stage.get('#myTriangle').each(function(node) {
node.setDrawFunc(drawTriangle);
- });
+ });
stage.draw();
@@ -2145,7 +2145,7 @@ Test.Modules.NODE = {
layer.add(darth);
stage.add(layer);
var expectedJson = '{"attrs":{"width":578,"height":200},"nodeType":"Stage","children":[{"attrs":{},"nodeType":"Layer","children":[{"attrs":{"x":200,"y":60,"offset":{"x":50,"y":150},"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}';
-
+
testJSON(stage.toJSON(), expectedJson, 'problem with serializing stage with image');
};
imageObj.src = '../assets/darth-vader.jpg';
@@ -2529,7 +2529,7 @@ Test.Modules.NODE = {
stage.hide();
stage.draw();
-
+
// TODO: stage hide() fails. also need to find a good way to test this
}