lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 04:14: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>
*
* // 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>
* 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

43
src/Util.js
View File

@@ -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}<br>
* var rgb = Kinetic.Util.getRGB('blue');<br>
@@ -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;

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

@@ -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++;
});

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

@@ -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');

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(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
}