lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

last pull request completely broke the unit tests. had to rewrite the get() logic so that it was correct

Browse Source
This commit is contained in:
Eric Rowell
2013-07-21 16:05:40 -07:00
parent 78214099b5
commit e6a9324d50
5 changed files with 132 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/Container.js
View File

@@ -95,39 +95,43 @@
* var nodes = layer.get('Group');<br><br> * var nodes = layer.get('Group');<br><br>
* *
* // select all rectangles inside layer<br> * // select all rectangles inside layer<br>
* var nodes = layer.get('Rect'); * var nodes = layer.get('Rect');<br><br>
* *
* // select node with an id of foo or a name of bar inside layer<br> * // select node with an id of foo or a name of bar inside layer<br>
* var nodes = layer.get('#foo .bar'); * var nodes = layer.get('#foo, .bar');
*/ */
get: function(selector) { get: function(selector) {
var collection = new Kinetic.Collection(); var retArr = [],
// ID selector selectorArr = selector.replace(/ /g, '').split(','),
selector = selector.split(" "); len = selectorArr.length,
for (index = 0; index < selector.length; ++index) { n, i, sel, arr, node, children, clen;
if(selector.charAt(0) === '#') {
var node = this._getNodeById(selector.slice(1)); for (n = 0; n < len; n++) {
sel = selectorArr[n];
// id selector
if(sel.charAt(0) === '#') {
node = this._getNodeById(sel.slice(1));
if(node) { if(node) {
collection.push(node); retArr.push(node);
} }
} }
// name selector // name selector
else if(selector.charAt(0) === '.') { else if(sel.charAt(0) === '.') {
var nodeList = this._getNodesByName(selector.slice(1)); arr = this._getNodesByName(sel.slice(1));
Kinetic.Collection.apply(collection, nodeList); retArr = retArr.concat(arr);
} }
// unrecognized selector, pass to children // unrecognized selector, pass to children
else { else {
var retArr = []; children = this.getChildren();
var children = this.getChildren(); clen = children.length;
var len = children.length; for(i = 0; i < clen; i++) {
for(var n = 0; n < len; n++) { retArr = retArr.concat(children[i]._get(sel));
retArr = retArr.concat(children[n]._get(selector));
} }
Kinetic.Collection.apply(collection, retArr);
} }
} }
return collection;
return Kinetic.Collection.toCollection(retArr);
}, },
_getNodeById: function(key) { _getNodeById: function(key) {
var stage = this.getStage(), go = Kinetic.Global, node = go.ids[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 * 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 very poorly. Please use the {@link Kinetic.Stage#getIntersection} method if at all possible
* because it performs much better * because it performs much better
* @method * @method
@@ -237,23 +241,23 @@
var layer = this.getLayer(), var layer = this.getLayer(),
clip = !!this.getClipFunc(), clip = !!this.getClipFunc(),
children, n, len; children, n, len;
if (!canvas && layer) { if (!canvas && layer) {
canvas = layer.getCanvas(); canvas = layer.getCanvas();
} }
if(this.isVisible()) { if(this.isVisible()) {
if (clip) { if (clip) {
canvas._clip(this); canvas._clip(this);
} }
children = this.children; children = this.children;
len = children.length; len = children.length;
for(n = 0; n < len; n++) { for(n = 0; n < len; n++) {
children[n].drawScene(canvas); children[n].drawScene(canvas);
} }
if (clip) { if (clip) {
canvas.getContext().restore(); canvas.getContext().restore();
} }
@@ -263,18 +267,18 @@
}, },
drawHit: function() { drawHit: function() {
var clip = !!this.getClipFunc() && this.nodeType !== 'Stage', var clip = !!this.getClipFunc() && this.nodeType !== 'Stage',
n = 0, n = 0,
len = 0, len = 0,
children = [], children = [],
hitCanvas; hitCanvas;
if(this.shouldDrawHit()) { if(this.shouldDrawHit()) {
if (clip) { if (clip) {
hitCanvas = this.getLayer().hitCanvas; hitCanvas = this.getLayer().hitCanvas;
hitCanvas._clip(this); hitCanvas._clip(this);
} }
children = this.children; children = this.children;
len = children.length; len = children.length;
for(n = 0; n < len; n++) { for(n = 0; n < len; n++) {
@@ -295,7 +299,7 @@
Kinetic.Node.addGetterSetter(Kinetic.Container, 'clipFunc'); Kinetic.Node.addGetterSetter(Kinetic.Container, 'clipFunc');
/** /**
* set clipping function * set clipping function
* @name setClipFunc * @name setClipFunc
* @method * @method
* @memberof Kinetic.Container.prototype * @memberof Kinetic.Container.prototype
@@ -303,7 +307,7 @@
*/ */
/** /**
* get clipping function * get clipping function
* @name getClipFunc * @name getClipFunc
* @method * @method
* @memberof Kinetic.Container.prototype * @memberof Kinetic.Container.prototype

43
src/Util.js
View File

@@ -38,17 +38,36 @@
* @memberof Kinetic.Collection.prototype * @memberof Kinetic.Collection.prototype
*/ */
Kinetic.Collection.prototype.toArray = function() { Kinetic.Collection.prototype.toArray = function() {
var arr = []; var arr = [],
for(var n = 0; n < this.length; n++) { len = this.length,
n;
for(n = 0; n < len; n++) {
arr.push(this[n]); arr.push(this[n]);
} }
return arr; 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) { Kinetic.Collection.mapMethods = function(arr) {
var leng = arr.length, var leng = arr.length,
n; n;
for(n = 0; n < leng; n++) { for(n = 0; n < leng; n++) {
// induce scope // induce scope
(function(i) { (function(i) {
@@ -56,11 +75,11 @@
Kinetic.Collection.prototype[method] = function() { Kinetic.Collection.prototype[method] = function() {
var len = this.length, var len = this.length,
i; i;
args = [].slice.call(arguments); args = [].slice.call(arguments);
for(i = 0; i < len; i++) { for(i = 0; i < len; i++) {
this[i][method].apply(this[i], args); this[i][method].apply(this[i], args);
} }
}; };
})(n); })(n);
} }
@@ -150,7 +169,7 @@
}; };
}, },
/** /**
* Apply skew * Apply skew
* @method * @method
* @memberof Kinetic.Transform.prototype * @memberof Kinetic.Transform.prototype
* @param {Number} sx * @param {Number} sx
@@ -260,7 +279,7 @@
RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/; RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;
/** /**
* @namespace Util * @namespace Util
* @memberof Kinetic * @memberof Kinetic
*/ */
@@ -292,7 +311,7 @@
_hasMethods: function(obj) { _hasMethods: function(obj) {
var names = [], var names = [],
key; key;
for(key in obj) { for(key in obj) {
if(this._isFunction(obj[key])) { if(this._isFunction(obj[key])) {
names.push(key); names.push(key);
@@ -498,7 +517,7 @@
*/ */
_getImage: function(arg, callback) { _getImage: function(arg, callback) {
var imageObj, canvas, context, dataUrl; var imageObj, canvas, context, dataUrl;
// if arg is null or undefined // if arg is null or undefined
if(!arg) { if(!arg) {
callback(null); callback(null);
@@ -564,7 +583,7 @@
* get RGB components of a color * get RGB components of a color
* @method * @method
* @memberof Kinetic.Util.prototype * @memberof Kinetic.Util.prototype
* @param {String} color * @param {String} color
* @example * @example
* // each of the following examples return {r:0, g:0, b:255}<br> * // each of the following examples return {r:0, g:0, b:255}<br>
* var rgb = Kinetic.Util.getRGB('blue');<br> * var rgb = Kinetic.Util.getRGB('blue');<br>
@@ -588,7 +607,7 @@
} }
// rgb string // rgb string
else if (color.substr(0, 4) === RGB_PAREN) { else if (color.substr(0, 4) === RGB_PAREN) {
rgb = RGB_REGEX.exec(color.replace(/ /g,'')); rgb = RGB_REGEX.exec(color.replace(/ /g,''));
return { return {
r: parseInt(rgb[1], 10), r: parseInt(rgb[1], 10),
g: parseInt(rgb[2], 10), g: parseInt(rgb[2], 10),
@@ -693,7 +712,7 @@
}]; }];
}, },
_expandPoints: function(points, tension) { _expandPoints: function(points, tension) {
var length = points.length, var length = points.length,
allPoints = [], allPoints = [],
n, cp; n, cp;

4
tests/js/unit/animationTests.js
View File

@@ -54,7 +54,7 @@ Test.Modules.ANIMATION = {
anim.stop(); anim.stop();
test(a.animations.length === 0, '7should be no animations running'); test(a.animations.length === 0, '7should be no animations running');
}, },
'*batch draw': function(containerId) { 'batch draw': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@@ -77,7 +77,7 @@ Test.Modules.ANIMATION = {
draws = 0; draws = 0;
layer.on('draw', function() { layer.on('draw', function() {
console.log('draw') //console.log('draw')
draws++; draws++;
}); });

51
tests/js/unit/containerTests.js
View File

@@ -10,7 +10,7 @@ Test.Modules.CONTAINER = {
clipFunc: function(canvas) { clipFunc: function(canvas) {
var context = canvas.getContext(); var context = canvas.getContext();
context.rect(0, 0, 400, 100); context.rect(0, 0, 400, 100);
} }
}); });
var group = new Kinetic.Group(); var group = new Kinetic.Group();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
@@ -119,6 +119,51 @@ Test.Modules.CONTAINER = {
node = stage.get('#myLayer')[0]; node = stage.get('#myLayer')[0];
test(node.nodeType === 'Layer', 'node type should be Layer'); 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) { 'set x on an array of nodes': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@@ -287,7 +332,7 @@ Test.Modules.CONTAINER = {
layer.add(circle); layer.add(circle);
layer.add(rect); layer.add(rect);
stage.add(layer); stage.add(layer);
var go = Kinetic.Global; var go = Kinetic.Global;
test(go.ids['myCircle3'].getId() === 'myCircle3', 'circle id not in ids hash'); test(go.ids['myCircle3'].getId() === 'myCircle3', 'circle id not in ids hash');
@@ -903,7 +948,7 @@ Test.Modules.CONTAINER = {
stage.add(greenLayer); stage.add(greenLayer);
blueLayer.setZIndex(1); blueLayer.setZIndex(1);
//console.log(greenLayer.getZIndex()); //console.log(greenLayer.getZIndex());
test(greenLayer.getZIndex() === 0, 'green layer should have z index of 0'); test(greenLayer.getZIndex() === 0, 'green layer should have z index of 0');

26
tests/js/unit/nodeTests.js
View File

@@ -30,7 +30,7 @@ Test.Modules.NODE = {
test(group.getClassName() === 'Group', 'group class name should be Group'); test(group.getClassName() === 'Group', 'group class name should be Group');
test(circle.getClassName() === 'Circle', 'circle class name should be Circle'); test(circle.getClassName() === 'Circle', 'circle class name should be Circle');
}, },
'setAttr': function(containerId) { 'setAttr': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@@ -63,7 +63,7 @@ Test.Modules.NODE = {
circle.setAttr('foobar', 12); circle.setAttr('foobar', 12);
test(circle.getAttr('foobar') === 12, 'custom foobar attr should be 12'); test(circle.getAttr('foobar') === 12, 'custom foobar attr should be 12');
}, },
'set shape and layer opacity to 0.5': function(containerId) { 'set shape and layer opacity to 0.5': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@@ -106,7 +106,7 @@ Test.Modules.NODE = {
}); });
test(!circle.cachedTransform, 'circle transform cache should be empty'); test(!circle.cachedTransform, 'circle transform cache should be empty');
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
@@ -130,9 +130,9 @@ Test.Modules.NODE = {
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
// override pixel ratio // override pixel ratio
layer.canvas = new Kinetic.SceneCanvas({ layer.canvas = new Kinetic.SceneCanvas({
pixelRatio: 2 pixelRatio: 2
}); });
layer.canvas.getElement().style.position = 'absolute'; layer.canvas.getElement().style.position = 'absolute';
@@ -149,7 +149,7 @@ Test.Modules.NODE = {
stage.add(layer); stage.add(layer);
test(layer.canvas.pixelRatio === 2, 'layer pixel ratio should be 2'); test(layer.canvas.pixelRatio === 2, 'layer pixel ratio should be 2');
}, },
'listen and don\'t listen': function(containerId) { 'listen and don\'t listen': function(containerId) {
@@ -640,7 +640,7 @@ Test.Modules.NODE = {
rect.transitionTo({ rect.transitionTo({
duration: 4, duration: 4,
skewY: -2, skewY: -2,
easing: 'ease-in-out' easing: 'ease-in-out'
}) })
@@ -1591,7 +1591,7 @@ Test.Modules.NODE = {
}); });
// fire event with bubbling // fire event with bubbling
circle.fire('click', null, true); circle.fire('click', null, true);
//console.log(clicks); //console.log(clicks);
test(clicks.toString() == 'circle,layer', 'problem with fire 1'); 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(foo === 'bar', 'problem with customEvent param passing');
// test fireing custom event that doesn't exist. script should not fail // test fireing custom event that doesn't exist. script should not fail
circle.fire('kaboom'); 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"}]}]}]}'; 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'); testJSON(stage.toJSON(), expectedJson, 'problem serializing stage with custom shape');
layer.draw(); layer.draw();
@@ -2116,7 +2116,7 @@ Test.Modules.NODE = {
stage.get('#myTriangle').each(function(node) { stage.get('#myTriangle').each(function(node) {
node.setDrawFunc(drawTriangle); node.setDrawFunc(drawTriangle);
}); });
stage.draw(); stage.draw();
@@ -2145,7 +2145,7 @@ Test.Modules.NODE = {
layer.add(darth); layer.add(darth);
stage.add(layer); 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"}]}]}'; 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'); testJSON(stage.toJSON(), expectedJson, 'problem with serializing stage with image');
}; };
imageObj.src = '../assets/darth-vader.jpg'; imageObj.src = '../assets/darth-vader.jpg';
@@ -2529,7 +2529,7 @@ Test.Modules.NODE = {
stage.hide(); stage.hide();
stage.draw(); stage.draw();
// TODO: stage hide() fails. also need to find a good way to test this // TODO: stage hide() fails. also need to find a good way to test this
} }