lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-14 03:24:54 +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

169
dist/kinetic-core.js vendored
View File

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

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

File diff suppressed because one or more lines are too long

114
src/GlobalObject.js
View File

@@ -177,19 +177,9 @@ Kinetic.GlobalObject = {
else if(this._isObject(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
else {
else if(arg.length >= 2) {
return {
x: arg[0],
y: arg[1]
@@ -200,70 +190,94 @@ Kinetic.GlobalObject = {
else if(this._isObject(arg)) {
return arg;
}
// if arg is not a number, array, or object, return default
else {
return {
x: 0,
y: 0
};
}
// default
return {
x: 0,
y: 0
};
},
/*
* The argument can be array of integers, an object, an array of one element
* which is an array of two integers, an array of one element
* which is an array of four integers, or an array of one element
* of an object
* The argument can be:
* - an integer (will be applied to both width and height)
* - an array of one integer (will be applied to both width and height)
* - 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) {
var go = Kinetic.GlobalObject;
if(arg === undefined) {
if(this._isNumber(arg)) {
return {
width: 0,
height: 0
width: arg,
height: arg
};
}
if(go._isArray(arg)) {
else if(this._isArray(arg)) {
// if arg is an array of one element
if(arg.length === 1) {
var val = arg[0];
if(go._isArray(val)) {
if(val.length === 2) {
return {
width: val[0],
height: val[1]
};
}
// should be an array of 4 elements
else {
// if arg is an array of one element which is a number
if(this._isNumber(val)) {
return {
width: val,
height: val
};
}
// if arg is an array of one element which is an array
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 {
width: val[2],
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;
}
}
else if(arg.length === 2) {
return {
width: arg[0],
height: arg[1]
};
}
// array length should be 4
else {
// if arg is an array of four elements
else if(arg.length >= 4) {
return {
width: arg[2],
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;
}
// default
return {
width: 0,
height: 0
};
},
/*
* arg will be an array of numbers or
@@ -299,7 +313,7 @@ Kinetic.GlobalObject = {
* set attr
*/
_setAttr: function(obj, attr, val) {
if(val !== undefined) {
if(val !== undefined) {
obj[attr] = val;
}
}

10
src/Node.js
View File

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

22
src/shapes/Image.js
View File

@@ -35,7 +35,7 @@ Kinetic.Image = function(config) {
this.applyStyles();
// if cropping
if(cropWidth !== undefined && cropHeight !== undefined) {
if(cropWidth !== undefined && cropHeight !== undefined) {
context.drawImage(this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height);
}
// no cropping
@@ -92,12 +92,9 @@ Kinetic.Image.prototype = {
},
/**
* set width and height
* @param {Number} width
* @param {Number} height
*/
setSize: function(width, height) {
this.attrs.width = width;
this.attrs.height = height;
setSize: function() {
this.setAttrs(arguments);
},
/**
* return image size
@@ -116,16 +113,11 @@ Kinetic.Image.prototype = {
},
/**
* 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) {
var c = {};
c.crop = config;
this.setAttrs(c);
setCrop: function() {
this.setAttrs({
crop: arguments
});
}
};
// extend Shape

8
src/shapes/Line.js
View File

@@ -53,12 +53,12 @@ Kinetic.Line.prototype = {
/**
* set points 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) {
var c = {};
c.points = points;
this.setAttrs(c);
this.setAttrs({
points: points
});
},
/**
* get points array

8
src/shapes/Polygon.js
View File

@@ -33,12 +33,12 @@ Kinetic.Polygon.prototype = {
/**
* set points 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) {
var c = {};
c.points = points;
this.setAttrs(c);
this.setAttrs({
points: points
});
},
/**
* get points array

7
src/shapes/Rect.js
View File

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

217
tests/js/unitTests.js
View File

@@ -1011,43 +1011,43 @@ Test.prototype.tests = {
test(circle.getFill().repeat === 'no-repeat', 'repeat option should be no-repeat');
test(circle.getFill().offset.x === -200, 'fill offset x should be -200');
test(circle.getFill().offset.y === -70, 'fill offset y should be -70');
/*
* test offset setting
*/
circle.setFill({
offset: [1, 2]
offset: [1, 2]
});
test(circle.getFill().offset.x === 1, 'fill offset x should be 1');
test(circle.getFill().offset.y === 2, 'fill offset y should be 2');
circle.setFill({
offset: {
x: 3,
y: 4
}
offset: {
x: 3,
y: 4
}
});
test(circle.getFill().offset.x === 3, 'fill offset x should be 3');
test(circle.getFill().offset.y === 4, 'fill offset y should be 4');
circle.setFill({
offset: {
x: 5
}
offset: {
x: 5
}
});
test(circle.getFill().offset.x === 5, 'fill offset x should be 5');
test(circle.getFill().offset.y === 4, 'fill offset y should be 4');
circle.setFill({
offset: {
y: 6
}
offset: {
y: 6
}
});
test(circle.getFill().offset.x === 5, 'fill offset x should be 5');
test(circle.getFill().offset.y === 6, 'fill offset y should be 6');
circle.setFill({
offset: [-200, -70]
offset: [-200, -70]
});
};
imageObj.src = '../darth-vader.jpg';
@@ -1218,24 +1218,82 @@ Test.prototype.tests = {
test(darth.getCenterOffset().y === 30, 'center offset y should be 30');
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.y === 20, 'crop y should be 20');
test(crop.width === 200, 'crop width should be 200');
test(crop.height === 250, 'crop height should be 250');
/*
darth.transitionTo({
crop: {
width: 100,
height: 125
},
duration: 1
});
* test cropping setter
*/
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';
},
@@ -1439,9 +1497,17 @@ Test.prototype.tests = {
});
line.setPoints([1, 2, 3, 4]);
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]);
test(line.getPoints()[0].x === 73, 'first point x should be 73');
},
@@ -2226,22 +2292,6 @@ Test.prototype.tests = {
layer.draw();
},
'NODE - test setting shadow offset': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@@ -2256,46 +2306,46 @@ Test.prototype.tests = {
height: 50,
fill: 'red',
shadow: {
color: 'blue',
blur: 12
color: 'blue',
blur: 12
}
});
layer.add(rect);
stage.add(layer);
rect.setShadow({
offset: [1, 2]
offset: [1, 2]
});
test(rect.getShadow().offset.x === 1, 'shadow offset x should be 1');
test(rect.getShadow().offset.y === 2, 'shadow offset y should be 2');
// make sure we still have the other properties
test(rect.getShadow().color === 'blue', 'shadow color should still be blue');
test(rect.getShadow().blur === 12, 'shadow blur should still be 12');
rect.setShadow({
offset: {
x: 3,
y: 4
}
offset: {
x: 3,
y: 4
}
});
test(rect.getShadow().offset.x === 3, 'shadow offset x should be 3');
test(rect.getShadow().offset.y === 4, 'shadow offset y should be 4');
// test partial setting
rect.setShadow({
offset: {
x: 5
}
rect.setShadow({
offset: {
x: 5
}
});
test(rect.getShadow().offset.x === 5, 'shadow offset x should be 5');
test(rect.getShadow().offset.y === 4, 'shadow offset y should be 4');
// test partial setting
rect.setShadow({
offset: {
y: 6
}
rect.setShadow({
offset: {
y: 6
}
});
test(rect.getShadow().offset.x === 5, 'shadow offset x should be 5');
test(rect.getShadow().offset.y === 6, 'shadow offset y should be 6');
@@ -2314,27 +2364,34 @@ Test.prototype.tests = {
height: 50,
fill: 'red'
});
layer.add(rect);
stage.add(layer);
rect.setCenterOffset(1, 2);
test(rect.getCenterOffset().x === 1, 'center offset x should be 1');
test(rect.getCenterOffset().y === 2, 'center offset y should be 2');
rect.setCenterOffset([3, 4]);
test(rect.getCenterOffset().x === 3, 'center offset x should be 3');
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().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().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().y === 8, 'center offset y should be 8');
@@ -2426,12 +2483,16 @@ Test.prototype.tests = {
});
test(rect.getScale().x === 9, 'rect scale x should be 9');
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().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().y === 12, 'rect scale x should be 12');