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

hooked setAttrs into setCrop() method and made the _getSize() method more flexibile by accepting more variations of input. added unit tests

Browse Source
This commit is contained in:
Eric Rowell
2012-05-26 16:37:37 -07:00
parent 8c675327b9
commit 07edfbc765
9 changed files with 313 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
dist/kinetic-core.js vendored
View File

@@ -205,19 +205,9 @@ Kinetic.GlobalObject = {
else if(this._isObject(val)) { else if(this._isObject(val)) {
return val; return val;
} }
/*
* if arg is an array of one element which is not
* a number, an array, or an object, return default
*/
else {
return {
x: 0,
y: 0
};
}
} }
// if arg is an array of two or more elements // if arg is an array of two or more elements
else { else if(arg.length >= 2) {
return { return {
x: arg[0], x: arg[0],
y: arg[1] y: arg[1]
@@ -228,70 +218,94 @@ Kinetic.GlobalObject = {
else if(this._isObject(arg)) { else if(this._isObject(arg)) {
return arg; return arg;
} }
// if arg is not a number, array, or object, return default
else { // default
return { return {
x: 0, x: 0,
y: 0 y: 0
}; };
}
}, },
/* /*
* The argument can be array of integers, an object, an array of one element * The argument can be:
* which is an array of two integers, an array of one element * - an integer (will be applied to both width and height)
* which is an array of four integers, or an array of one element * - an array of one integer (will be applied to both width and height)
* of an object * - an array of two integers (contains width and height)
* - an array of four integers (contains x, y, width, and height)
* - an object with width and height properties
* - an array of one element which is an array of integers
* - an array of one element of an object
*/ */
_getSize: function(arg) { _getSize: function(arg) {
var go = Kinetic.GlobalObject; if(this._isNumber(arg)) {
if(arg === undefined) {
return { return {
width: 0, width: arg,
height: 0 height: arg
}; };
} }
else if(this._isArray(arg)) {
if(go._isArray(arg)) { // if arg is an array of one element
if(arg.length === 1) { if(arg.length === 1) {
var val = arg[0]; var val = arg[0];
// if arg is an array of one element which is a number
if(go._isArray(val)) { if(this._isNumber(val)) {
if(val.length === 2) {
return { return {
width: val[0], width: val,
height: val[1] height: val
}; };
} }
// should be an array of 4 elements // if arg is an array of one element which is an array
else { else if(this._isArray(val)) {
/*
* if arg is an array of one element which is an
* array of four elements
*/
if(val.length >= 4) {
return { return {
width: val[2], width: val[2],
height: val[3] height: val[3]
}; };
} }
/*
* if arg is an array of one element which is an
* array of two elements
*/
else if(val.length >= 2) {
return {
width: val[0],
height: val[1]
};
} }
else { }
// if arg is an array of one element which is an object
else if(this._isObject(val)) {
return val; return val;
} }
} }
else if(arg.length === 2) { // if arg is an array of four elements
return { else if(arg.length >= 4) {
width: arg[0],
height: arg[1]
};
}
// array length should be 4
else {
return { return {
width: arg[2], width: arg[2],
height: arg[3] height: arg[3]
}; };
} }
// if arg is an array of two elements
else if(arg.length >= 2) {
return {
width: arg[0],
height: arg[1]
};
} }
else { }
// if arg is an object return the object
else if(this._isObject(arg)) {
return arg; return arg;
} }
// default
return {
width: 0,
height: 0
};
}, },
/* /*
* arg will be an array of numbers or * arg will be an array of numbers or
@@ -536,7 +550,7 @@ Kinetic.Node.prototype = {
break; break;
/* /*
* includes: * includes:
* - patttern offset * - fill pattern offset
* - shadow offset * - shadow offset
*/ */
case 'offset': case 'offset':
@@ -556,10 +570,10 @@ Kinetic.Node.prototype = {
var pos = go._getXY(val); var pos = go._getXY(val);
var size = go._getSize(val); var size = go._getSize(val);
obj[key].x = pos.x; go._setAttr(obj[key], 'x', pos.x);
obj[key].y = pos.y; go._setAttr(obj[key], 'y', pos.y);
obj[key].width = size.width; go._setAttr(obj[key], 'width', size.width);
obj[key].height = size.height; go._setAttr(obj[key], 'height', size.height);
break; break;
default: default:
obj[key] = c[key]; obj[key] = c[key];
@@ -3035,12 +3049,9 @@ Kinetic.Rect.prototype = {
}, },
/** /**
* set width and height * set width and height
* @param {Number} width
* @param {Number} height
*/ */
setSize: function(width, height) { setSize: function() {
this.attrs.width = width; this.setAttrs(arguments);
this.attrs.height = height;
}, },
/** /**
* return rect size * return rect size
@@ -3212,12 +3223,9 @@ Kinetic.Image.prototype = {
}, },
/** /**
* set width and height * set width and height
* @param {Number} width
* @param {Number} height
*/ */
setSize: function(width, height) { setSize: function() {
this.attrs.width = width; this.setAttrs(arguments);
this.attrs.height = height;
}, },
/** /**
* return image size * return image size
@@ -3236,16 +3244,11 @@ Kinetic.Image.prototype = {
}, },
/** /**
* set cropping * set cropping
* @param {Object} crop
* @config {Number} [x] crop x
* @config {Number} [y] crop y
* @config {Number} [width] crop width
* @config {Number} [height] crop height
*/ */
setCrop: function(config) { setCrop: function() {
var c = {}; this.setAttrs({
c.crop = config; crop: arguments
this.setAttrs(c); });
} }
}; };
// extend Shape // extend Shape
@@ -3397,12 +3400,12 @@ Kinetic.Polygon.prototype = {
/** /**
* set points array * set points array
* @param {Array} can be an array of point objects or an array * @param {Array} can be an array of point objects or an array
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] == [1,2,3,4] * of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/ */
setPoints: function(points) { setPoints: function(points) {
var c = {}; this.setAttrs({
c.points = points; points: points
this.setAttrs(c); });
}, },
/** /**
* get points array * get points array
@@ -3930,12 +3933,12 @@ Kinetic.Line.prototype = {
/** /**
* set points array * set points array
* @param {Array} can be an array of point objects or an array * @param {Array} can be an array of point objects or an array
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] == [1,2,3,4] * of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/ */
setPoints: function(points) { setPoints: function(points) {
var c = {}; this.setAttrs({
c.points = points; points: points
this.setAttrs(c); });
}, },
/** /**
* get points array * get points array

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

File diff suppressed because one or more lines are too long

98
src/GlobalObject.js
View File

@@ -177,19 +177,9 @@ Kinetic.GlobalObject = {
else if(this._isObject(val)) { else if(this._isObject(val)) {
return val; return val;
} }
/*
* if arg is an array of one element which is not
* a number, an array, or an object, return default
*/
else {
return {
x: 0,
y: 0
};
}
} }
// if arg is an array of two or more elements // if arg is an array of two or more elements
else { else if(arg.length >= 2) {
return { return {
x: arg[0], x: arg[0],
y: arg[1] y: arg[1]
@@ -200,70 +190,94 @@ Kinetic.GlobalObject = {
else if(this._isObject(arg)) { else if(this._isObject(arg)) {
return arg; return arg;
} }
// if arg is not a number, array, or object, return default
else { // default
return { return {
x: 0, x: 0,
y: 0 y: 0
}; };
}
}, },
/* /*
* The argument can be array of integers, an object, an array of one element * The argument can be:
* which is an array of two integers, an array of one element * - an integer (will be applied to both width and height)
* which is an array of four integers, or an array of one element * - an array of one integer (will be applied to both width and height)
* of an object * - an array of two integers (contains width and height)
* - an array of four integers (contains x, y, width, and height)
* - an object with width and height properties
* - an array of one element which is an array of integers
* - an array of one element of an object
*/ */
_getSize: function(arg) { _getSize: function(arg) {
var go = Kinetic.GlobalObject; if(this._isNumber(arg)) {
if(arg === undefined) {
return { return {
width: 0, width: arg,
height: 0 height: arg
}; };
} }
else if(this._isArray(arg)) {
if(go._isArray(arg)) { // if arg is an array of one element
if(arg.length === 1) { if(arg.length === 1) {
var val = arg[0]; var val = arg[0];
// if arg is an array of one element which is a number
if(go._isArray(val)) { if(this._isNumber(val)) {
if(val.length === 2) {
return { return {
width: val[0], width: val,
height: val[1] height: val
}; };
} }
// should be an array of 4 elements // if arg is an array of one element which is an array
else { else if(this._isArray(val)) {
/*
* if arg is an array of one element which is an
* array of four elements
*/
if(val.length >= 4) {
return { return {
width: val[2], width: val[2],
height: val[3] height: val[3]
}; };
} }
/*
* if arg is an array of one element which is an
* array of two elements
*/
else if(val.length >= 2) {
return {
width: val[0],
height: val[1]
};
} }
else { }
// if arg is an array of one element which is an object
else if(this._isObject(val)) {
return val; return val;
} }
} }
else if(arg.length === 2) { // if arg is an array of four elements
return { else if(arg.length >= 4) {
width: arg[0],
height: arg[1]
};
}
// array length should be 4
else {
return { return {
width: arg[2], width: arg[2],
height: arg[3] height: arg[3]
}; };
} }
// if arg is an array of two elements
else if(arg.length >= 2) {
return {
width: arg[0],
height: arg[1]
};
} }
else { }
// if arg is an object return the object
else if(this._isObject(arg)) {
return arg; return arg;
} }
// default
return {
width: 0,
height: 0
};
}, },
/* /*
* arg will be an array of numbers or * arg will be an array of numbers or

10
src/Node.js
View File

@@ -194,7 +194,7 @@ Kinetic.Node.prototype = {
break; break;
/* /*
* includes: * includes:
* - patttern offset * - fill pattern offset
* - shadow offset * - shadow offset
*/ */
case 'offset': case 'offset':
@@ -214,10 +214,10 @@ Kinetic.Node.prototype = {
var pos = go._getXY(val); var pos = go._getXY(val);
var size = go._getSize(val); var size = go._getSize(val);
obj[key].x = pos.x; go._setAttr(obj[key], 'x', pos.x);
obj[key].y = pos.y; go._setAttr(obj[key], 'y', pos.y);
obj[key].width = size.width; go._setAttr(obj[key], 'width', size.width);
obj[key].height = size.height; go._setAttr(obj[key], 'height', size.height);
break; break;
default: default:
obj[key] = c[key]; obj[key] = c[key];

20
src/shapes/Image.js
View File

@@ -92,12 +92,9 @@ Kinetic.Image.prototype = {
}, },
/** /**
* set width and height * set width and height
* @param {Number} width
* @param {Number} height
*/ */
setSize: function(width, height) { setSize: function() {
this.attrs.width = width; this.setAttrs(arguments);
this.attrs.height = height;
}, },
/** /**
* return image size * return image size
@@ -116,16 +113,11 @@ Kinetic.Image.prototype = {
}, },
/** /**
* set cropping * set cropping
* @param {Object} crop
* @config {Number} [x] crop x
* @config {Number} [y] crop y
* @config {Number} [width] crop width
* @config {Number} [height] crop height
*/ */
setCrop: function(config) { setCrop: function() {
var c = {}; this.setAttrs({
c.crop = config; crop: arguments
this.setAttrs(c); });
} }
}; };
// extend Shape // extend Shape

8
src/shapes/Line.js
View File

@@ -53,12 +53,12 @@ Kinetic.Line.prototype = {
/** /**
* set points array * set points array
* @param {Array} can be an array of point objects or an array * @param {Array} can be an array of point objects or an array
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] == [1,2,3,4] * of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/ */
setPoints: function(points) { setPoints: function(points) {
var c = {}; this.setAttrs({
c.points = points; points: points
this.setAttrs(c); });
}, },
/** /**
* get points array * get points array

8
src/shapes/Polygon.js
View File

@@ -33,12 +33,12 @@ Kinetic.Polygon.prototype = {
/** /**
* set points array * set points array
* @param {Array} can be an array of point objects or an array * @param {Array} can be an array of point objects or an array
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] == [1,2,3,4] * of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/ */
setPoints: function(points) { setPoints: function(points) {
var c = {}; this.setAttrs({
c.points = points; points: points
this.setAttrs(c); });
}, },
/** /**
* get points array * get points array

7
src/shapes/Rect.js
View File

@@ -73,12 +73,9 @@ Kinetic.Rect.prototype = {
}, },
/** /**
* set width and height * set width and height
* @param {Number} width
* @param {Number} height
*/ */
setSize: function(width, height) { setSize: function() {
this.attrs.width = width; this.setAttrs(arguments);
this.attrs.height = height;
}, },
/** /**
* return rect size * return rect size

127
tests/js/unitTests.js
View File

@@ -1218,24 +1218,82 @@ Test.prototype.tests = {
test(darth.getCenterOffset().y === 30, 'center offset y should be 30'); test(darth.getCenterOffset().y === 30, 'center offset y should be 30');
test(Kinetic.GlobalObject._isElement(darth.getImage()), 'darth image should be an element'); test(Kinetic.GlobalObject._isElement(darth.getImage()), 'darth image should be an element');
var crop = darth.getCrop(); var crop = null;
crop = darth.getCrop();
test(crop.x === 20, 'crop x should be 20'); test(crop.x === 20, 'crop x should be 20');
test(crop.y === 20, 'crop y should be 20'); test(crop.y === 20, 'crop y should be 20');
test(crop.width === 200, 'crop width should be 200'); test(crop.width === 200, 'crop width should be 200');
test(crop.height === 250, 'crop height should be 250'); test(crop.height === 250, 'crop height should be 250');
/* /*
darth.transitionTo({ * test cropping setter
crop: {
width: 100,
height: 125
},
duration: 1
});
*/ */
darth.setCrop(0, 1, 2, 3);
crop = darth.getCrop();
test(crop.x === 0, 'crop x should be 0');
test(crop.y === 1, 'crop y should be 1');
test(crop.width === 2, 'crop width should be2');
test(crop.height === 3, 'crop height should be 3');
darth.setCrop([4, 5, 6, 7]);
crop = darth.getCrop();
test(crop.x === 4, 'crop x should be 4');
test(crop.y === 5, 'crop y should be 5');
test(crop.width === 6, 'crop width should be 6');
test(crop.height === 7, 'crop height should be 7');
darth.setCrop({
x: 8,
y: 9,
width: 10,
height: 11
});
crop = darth.getCrop();
test(crop.x === 8, 'crop x should be 8');
test(crop.y === 9, 'crop y should be 9');
test(crop.width === 10, 'crop width should be 10');
test(crop.height === 11, 'crop height should be 11');
/*
* test partial setter
*/
darth.setCrop({
x: 12
});
crop = darth.getCrop();
test(crop.x === 12, 'crop x should be 12');
test(crop.y === 9, 'crop y should be 9');
test(crop.width === 10, 'crop width should be 10');
test(crop.height === 11, 'crop height should be 11');
darth.setCrop({
y: 13
});
crop = darth.getCrop();
test(crop.x === 12, 'crop x should be 12');
test(crop.y === 13, 'crop y should be 13');
test(crop.width === 10, 'crop width should be 10');
test(crop.height === 11, 'crop height should be 11');
darth.setCrop({
width: 14
});
crop = darth.getCrop();
test(crop.x === 12, 'crop x should be 12');
test(crop.y === 13, 'crop y should be 13');
test(crop.width === 14, 'crop width should be 14');
test(crop.height === 11, 'crop height should be 11');
darth.setCrop({
height: 15
});
crop = darth.getCrop();
test(crop.x === 12, 'crop x should be 12');
test(crop.y === 13, 'crop y should be 13');
test(crop.width === 14, 'crop width should be 14');
test(crop.height === 15, 'crop height should be 15');
}; };
imageObj.src = '../darth-vader.jpg'; imageObj.src = '../darth-vader.jpg';
}, },
@@ -1439,9 +1497,17 @@ Test.prototype.tests = {
}); });
line.setPoints([1, 2, 3, 4]); line.setPoints([1, 2, 3, 4]);
test(line.getPoints()[0].x === 1, 'first point x should be 1'); test(line.getPoints()[0].x === 1, 'first point x should be 1');
line.setPoints([{
x: 5,
y: 6
}, {
x: 7,
y: 8
}]);
test(line.getPoints()[0].x === 5, 'first point x should be 5');
line.setPoints([73, 160, 340, 23]); line.setPoints([73, 160, 340, 23]);
test(line.getPoints()[0].x === 73, 'first point x should be 73'); test(line.getPoints()[0].x === 73, 'first point x should be 73');
}, },
@@ -2226,22 +2292,6 @@ Test.prototype.tests = {
layer.draw(); layer.draw();
}, },
'NODE - test setting shadow offset': function(containerId) { 'NODE - test setting shadow offset': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
@@ -2326,15 +2376,22 @@ Test.prototype.tests = {
test(rect.getCenterOffset().x === 3, 'center offset x should be 3'); test(rect.getCenterOffset().x === 3, 'center offset x should be 3');
test(rect.getCenterOffset().y === 4, 'center offset y should be 4'); test(rect.getCenterOffset().y === 4, 'center offset y should be 4');
rect.setCenterOffset({x: 5, y: 6}); rect.setCenterOffset({
x: 5,
y: 6
});
test(rect.getCenterOffset().x === 5, 'center offset x should be 5'); test(rect.getCenterOffset().x === 5, 'center offset x should be 5');
test(rect.getCenterOffset().y === 6, 'center offset y should be 6'); test(rect.getCenterOffset().y === 6, 'center offset y should be 6');
rect.setCenterOffset({x: 7}); rect.setCenterOffset({
x: 7
});
test(rect.getCenterOffset().x === 7, 'center offset x should be 7'); test(rect.getCenterOffset().x === 7, 'center offset x should be 7');
test(rect.getCenterOffset().y === 6, 'center offset y should be 6'); test(rect.getCenterOffset().y === 6, 'center offset y should be 6');
rect.setCenterOffset({y: 8}); rect.setCenterOffset({
y: 8
});
test(rect.getCenterOffset().x === 7, 'center offset x should be 7'); test(rect.getCenterOffset().x === 7, 'center offset x should be 7');
test(rect.getCenterOffset().y === 8, 'center offset y should be 8'); test(rect.getCenterOffset().y === 8, 'center offset y should be 8');
@@ -2427,11 +2484,15 @@ Test.prototype.tests = {
test(rect.getScale().x === 9, 'rect scale x should be 9'); test(rect.getScale().x === 9, 'rect scale x should be 9');
test(rect.getScale().y === 10, 'rect scale x should be 10'); test(rect.getScale().y === 10, 'rect scale x should be 10');
rect.setScale({x: 11}); rect.setScale({
x: 11
});
test(rect.getScale().x === 11, 'rect scale x should be 11'); test(rect.getScale().x === 11, 'rect scale x should be 11');
test(rect.getScale().y === 10, 'rect scale x should be 10'); test(rect.getScale().y === 10, 'rect scale x should be 10');
rect.setScale({y: 12}); rect.setScale({
y: 12
});
test(rect.getScale().x === 11, 'rect scale x should be 11'); test(rect.getScale().x === 11, 'rect scale x should be 11');
test(rect.getScale().y === 12, 'rect scale x should be 12'); test(rect.getScale().y === 12, 'rect scale x should be 12');