lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

mark some methods as deprecated

Browse Source
This commit is contained in:
Anton Lavrenov 2015-05-07 08:48:15 +07:00
parent 1c7c202b68
commit d455d0f994
15 changed files with 93 additions and 346 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc
View File

@ -21,6 +21,9 @@
},
"globals": {
"Konva" : false,
"define": false
"define": false,
"test": false,
"assert": false,
"addStage": false
}
}

10
CHANGELOG.md
View File

@ -22,6 +22,16 @@ This project adheres to [Semantic Versioning](http://semver.org/).
### Added
- new `Konva.Image.fromURL` method
### Deprecated
- `fillRed`, `fillGreen`, `fillBlue`, `fillAlpha` are deprecated. Use `fill` instead.
- `strokeRed`, `strokeGreen`, `strokeBlue`, `strokeAlpha` are deprecated. Use `stroke` instead.
- `shadowRed`, `shadowGreen`, `shadowBlue`, `shadowAlpha` are deprecated. Use `shadow` instead.
- `dashArray` is deprecated. Use `dash` instead.
- `drawFunc` is deprecated. Use `sceneFunc` instead.
- `drawFunc` is deprecated. Use `hitFunc` instead.
- `rotateDeg` is deprecated. Use `rotate` instead.
## [0.9.0][2015-02-27]
### Fixed

19
src/Context.js
View File

@ -447,13 +447,7 @@
Konva.SceneContext.prototype = {
_fillColor: function(shape) {
var fill = shape.fill()
|| Konva.Util._getRGBAString({
red: shape.fillRed(),
green: shape.fillGreen(),
blue: shape.fillBlue(),
alpha: shape.fillAlpha()
});
var fill = shape.fill();
this.setAttr('fillStyle', fill);
shape._fillFunc(this);
@ -512,7 +506,7 @@
this.fill();
},
_fill: function(shape) {
var hasColor = shape.fill() || shape.fillRed() || shape.fillGreen() || shape.fillBlue(),
var hasColor = shape.fill(),
hasPattern = shape.getFillPatternImage(),
hasLinearGradient = shape.getFillLinearGradientColorStops(),
hasRadialGradient = shape.getFillRadialGradientColorStops(),
@ -562,13 +556,8 @@
}
this.setAttr('lineWidth', shape.strokeWidth());
this.setAttr('strokeStyle', shape.stroke()
|| Konva.Util._getRGBAString({
red: shape.strokeRed(),
green: shape.strokeGreen(),
blue: shape.strokeBlue(),
alpha: shape.strokeAlpha()
}));
this.setAttr('strokeStyle', shape.stroke());
if (!shape.getShadowForStrokeEnabled()) {
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
}

25
src/Factory.js
View File

@ -95,12 +95,27 @@
}
};
},
addDeprecatedGetterSetter: function(constructor, attr, def, validator) {
var method = GET + Konva.Util._capitalize(attr);
var message = attr + ' property is deprecated and will be removed soon. Look at Konva change log for more information.';
constructor.prototype[method] = function() {
Konva.Util.error(message);
var val = this.attrs[attr];
return val === undefined ? def : val;
};
this.addSetter(constructor, attr, validator, function() {
Konva.Util.error(message);
});
this.addOverloadedGetterSetter(constructor, attr);
},
backCompat: function(constructor, methods) {
var key;
for (key in methods) {
constructor.prototype[key] = constructor.prototype[methods[key]];
}
Konva.Util.each(methods, function(oldMethodName, newMethodName) {
var method = constructor.prototype[newMethodName];
constructor.prototype[oldMethodName] = function(){
method.apply(this, arguments);
Konva.Util.error(oldMethodName + ' method is deprecated and will be removed soon. Use ' + newMethodName + ' instead');
};
});
},
afterSetFilter: function() {
this._filterUpToDate = false;

2
src/FastLayer.js
View File

@ -33,7 +33,7 @@
_validateAdd: function(child) {
var type = child.getType();
if (type !== 'Shape') {
Konva.Util.error('You may only add shapes to a fast layer.');
Konva.Util.throw('You may only add shapes to a fast layer.');
}
},
_setCanvasSize: function(width, height) {

2
src/Group.js
View File

@ -24,7 +24,7 @@
_validateAdd: function(child) {
var type = child.getType();
if (type !== 'Group' && type !== 'Shape') {
Konva.Util.error('You may only add groups and shapes to groups.');
Konva.Util.throw('You may only add groups and shapes to groups.');
}
}
});

2
src/Layer.js
View File

@ -60,7 +60,7 @@
_validateAdd: function(child) {
var type = child.getType();
if (type !== 'Group' && type !== 'Shape') {
Konva.Util.error('You may only add groups and shapes to a layer.');
Konva.Util.throw('You may only add groups and shapes to a layer.');
}
},
/**

218
src/Shape.js
View File

@ -143,7 +143,7 @@
* @returns {Boolean}
*/
hasStroke: function() {
return !!(this.stroke() || this.strokeRed() || this.strokeGreen() || this.strokeBlue());
return !!(this.stroke());
},
/**
* determines if point is in the shape, regardless if other shapes are on top of it. Note: because
@ -455,74 +455,11 @@
* shape.stroke('rgba(0,255,0,0.5');
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'strokeRed', 0, Konva.Validators.RGBComponent);
Konva.Factory.addDeprecatedGetterSetter(Konva.Shape, 'strokeRed', 0, Konva.Validators.RGBComponent);
Konva.Factory.addDeprecatedGetterSetter(Konva.Shape, 'strokeGreen', 0, Konva.Validators.RGBComponent);
Konva.Factory.addDeprecatedGetterSetter(Konva.Shape, 'strokeBlue', 0, Konva.Validators.RGBComponent);
Konva.Factory.addDeprecatedGetterSetter(Konva.Shape, 'strokeAlpha', 1, Konva.Validators.alphaComponent);
/**
* get/set stroke red component
* @name strokeRed
* @method
* @memberof Konva.Shape.prototype
* @param {Integer} red
* @returns {Integer}
* @example
* // get stroke red component
* var strokeRed = shape.strokeRed();
*
* // set stroke red component
* shape.strokeRed(0);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'strokeGreen', 0, Konva.Validators.RGBComponent);
/**
* get/set stroke green component
* @name strokeGreen
* @method
* @memberof Konva.Shape.prototype
* @param {Integer} green
* @returns {Integer}
* @example
* // get stroke green component
* var strokeGreen = shape.strokeGreen();
*
* // set stroke green component
* shape.strokeGreen(255);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'strokeBlue', 0, Konva.Validators.RGBComponent);
/**
* get/set stroke blue component
* @name strokeBlue
* @method
* @memberof Konva.Shape.prototype
* @param {Integer} blue
* @returns {Integer}
* @example
* // get stroke blue component
* var strokeBlue = shape.strokeBlue();
*
* // set stroke blue component
* shape.strokeBlue(0);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'strokeAlpha', 1, Konva.Validators.alphaComponent);
/**
* get/set stroke alpha component. Alpha is a real number between 0 and 1. The default
* is 1.
* @name strokeAlpha
* @method
* @memberof Konva.Shape.prototype
* @param {Number} alpha
* @returns {Number}
* @example
* // get stroke alpha component
* var strokeAlpha = shape.strokeAlpha();
*
* // set stroke alpha component
* shape.strokeAlpha(0.5);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'strokeWidth', 2);
@ -725,74 +662,10 @@
* shape.shadowColor('rgba(0,255,0,0.5');
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'shadowRed', 0, Konva.Validators.RGBComponent);
/**
* get/set shadow red component
* @name shadowRed
* @method
* @memberof Konva.Shape.prototype
* @param {Integer} red
* @returns {Integer}
* @example
* // get shadow red component
* var shadowRed = shape.shadowRed();
*
* // set shadow red component
* shape.shadowRed(0);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'shadowGreen', 0, Konva.Validators.RGBComponent);
/**
* get/set shadow green component
* @name shadowGreen
* @method
* @memberof Konva.Shape.prototype
* @param {Integer} green
* @returns {Integer}
* @example
* // get shadow green component
* var shadowGreen = shape.shadowGreen();
*
* // set shadow green component
* shape.shadowGreen(255);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'shadowBlue', 0, Konva.Validators.RGBComponent);
/**
* get/set shadow blue component
* @name shadowBlue
* @method
* @memberof Konva.Shape.prototype
* @param {Integer} blue
* @returns {Integer}
* @example
* // get shadow blue component
* var shadowBlue = shape.shadowBlue();
*
* // set shadow blue component
* shape.shadowBlue(0);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'shadowAlpha', 1, Konva.Validators.alphaComponent);
/**
* get/set shadow alpha component. Alpha is a real number between 0 and 1. The default
* is 1.
* @name shadowAlpha
* @method
* @memberof Konva.Shape.prototype
* @param {Number} alpha
* @returns {Number}
* @example
* // get shadow alpha component
* var shadowAlpha = shape.shadowAlpha();
*
* // set shadow alpha component
* shape.shadowAlpha(0.5);
*/
Konva.Factory.addDeprecatedGetterSetter(Konva.Shape, 'shadowRed', 0, Konva.Validators.RGBComponent);
Konva.Factory.addDeprecatedGetterSetter(Konva.Shape, 'shadowGreen', 0, Konva.Validators.RGBComponent);
Konva.Factory.addDeprecatedGetterSetter(Konva.Shape, 'shadowBlue', 0, Konva.Validators.RGBComponent);
Konva.Factory.addDeprecatedGetterSetter(Konva.Shape, 'shadowAlpha', 1, Konva.Validators.alphaComponent);
Konva.Factory.addGetterSetter(Konva.Shape, 'shadowBlur');
@ -934,75 +807,10 @@
* shape.fill(null);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillRed', 0, Konva.Validators.RGBComponent);
/**
* get/set fill red component
* @name fillRed
* @method
* @memberof Konva.Shape.prototype
* @param {Integer} red
* @returns {Integer}
* @example
* // get fill red component
* var fillRed = shape.fillRed();
*
* // set fill red component
* shape.fillRed(0);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillGreen', 0, Konva.Validators.RGBComponent);
/**
* get/set fill green component
* @name fillGreen
* @method
* @memberof Konva.Shape.prototype
* @param {Integer} green
* @returns {Integer}
* @example
* // get fill green component
* var fillGreen = shape.fillGreen();
*
* // set fill green component
* shape.fillGreen(255);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillBlue', 0, Konva.Validators.RGBComponent);
/**
* get/set fill blue component
* @name fillBlue
* @method
* @memberof Konva.Shape.prototype
* @param {Integer} blue
* @returns {Integer}
* @example
* // get fill blue component
* var fillBlue = shape.fillBlue();
*
* // set fill blue component
* shape.fillBlue(0);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'fillAlpha', 1, Konva.Validators.alphaComponent);
/**
* get/set fill alpha component. Alpha is a real number between 0 and 1. The default
* is 1.
* @name fillAlpha
* @method
* @memberof Konva.Shape.prototype
* @param {Number} alpha
* @returns {Number}
* @example
* // get fill alpha component
* var fillAlpha = shape.fillAlpha();
*
* // set fill alpha component
* shape.fillAlpha(0.5);
*/
Konva.Factory.addDeprecatedGetterSetter(Konva.Shape, 'fillRed', 0, Konva.Validators.RGBComponent);
Konva.Factory.addDeprecatedGetterSetter(Konva.Shape, 'fillGreen', 0, Konva.Validators.RGBComponent);
Konva.Factory.addDeprecatedGetterSetter(Konva.Shape, 'fillBlue', 0, Konva.Validators.RGBComponent);
Konva.Factory.addDeprecatedGetterSetter(Konva.Shape, 'fillAlpha', 1, Konva.Validators.alphaComponent);
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternX', 0);

2
src/Stage.js
View File

@ -85,7 +85,7 @@
},
_validateAdd: function(child) {
if (child.getType() !== 'Layer') {
Konva.Util.error('You may only add layers to the stage.');
Konva.Util.throw('You may only add layers to the stage.');
}
},
/**

10
src/Util.js
View File

@ -824,9 +824,12 @@
_capitalize: function(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
},
error: function(str) {
throw: function(str) {
throw new Error(KONVA_ERROR + str);
},
error: function(str) {
console.error(KONVA_ERROR + str);
},
warn: function(str) {
/*
* IE9 on Windows7 64bit will throw a JS error
@ -897,6 +900,11 @@
},
_removeLastLetter: function(str) {
return str.substring(0, str.length - 1);
},
each: function(obj, func) {
for (var key in obj) {
func(key, obj[key]);
}
}
};
})();

10
test/functional/MouseEvents-test.js
View File

@ -2,7 +2,7 @@ suite('MouseEvents', function() {
// NOTE: disable throttling so these tests can run synchronously
Konva.enableThrottling = false;
// ======================================================
test('stage content mouse events', function(done) {
@ -977,7 +977,7 @@ suite('MouseEvents', function() {
y:0,
width: 70,
height: 70,
rotationDeg: 45,
rotation: 45,
fill: 'green',
id : 'greenRect'
});
@ -1032,7 +1032,7 @@ suite('MouseEvents', function() {
group2.on('mouseout', function() {
group2Mouseout +=1;
});
var top = stage.content.getBoundingClientRect().top;
stage._mousemove({
@ -1172,7 +1172,7 @@ suite('MouseEvents', function() {
Konva.DD._endDragAfter({dragEndNode:circle});
assert.equal(e.toString(), 'circle,group1,group2,layer,stage', 'problem with event bubbling');
});
// ======================================================
@ -1347,4 +1347,4 @@ suite('MouseEvents', function() {
});
assert.equal(shape, circle);
});
});
});

3
test/unit/Container-test.js
View File

@ -1575,5 +1575,4 @@ suite('Container', function() {
layer.add(circle1, circle2, circle3);
assert.equal(layer.getChildren().length, 3, 'layer has exactly three children');
});
});
});

39
test/unit/Node-test.js
View File

@ -246,7 +246,7 @@ suite('Node', function() {
stage.add(layer);
// listening cache
// prime the cache
circle.isListening();
@ -887,7 +887,7 @@ suite('Node', function() {
156, 109, 70, 98,
229, 109, 60, 98,
287, 109, 41, 98
]
]
},
frameRate: 10,
draggable: true,
@ -1459,16 +1459,11 @@ suite('Node', function() {
stroke: 'black',
strokeWidth: 4,
draggable: true
//rotationDeg: 60
//rotationDeg: Math.PI / 3
});
layer.add(rect);
stage.add(layer);
//stage.rotateDeg(20);
//console.log(rect.getAbsoluteTransform().getTranslation())
stage.rotate(180 / 3);
stage.setScale({x:0.5, y:0.5});
@ -1599,7 +1594,7 @@ suite('Node', function() {
var circle = new Konva.Rect({
x: 100,
y: 100,
rotationDeg: 20,
rotation: 20,
width: 100,
height: 50,
fill: 'green',
@ -1626,7 +1621,7 @@ suite('Node', function() {
var rect = new Konva.Rect({
x: 100,
y: 100,
rotationDeg: 20,
rotation: 20,
width: 100,
height: 50,
fill: 'green',
@ -2187,7 +2182,7 @@ suite('Node', function() {
context.fillStrokeShape(this);
};
var triangle = new Konva.Shape({
drawFunc: drawTriangle,
sceneFunc: drawTriangle,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4,
@ -2607,7 +2602,7 @@ suite('Node', function() {
stroke: 'black',
strokeWidth: 4,
draggable: true,
rotationDeg: 60,
rotation: 60,
scale: {
x: 2,
y: 1
@ -2821,10 +2816,10 @@ suite('Node', function() {
assert.equal(circle.opacity(), 0.5);
circle.name('foo');
assert.equal(circle.name(), 'foo');
assert.equal(circle.name(), 'foo');
circle.id('bar');
assert.equal(circle.id(), 'bar');
assert.equal(circle.id(), 'bar');
circle.rotation(2);
assert.equal(circle.rotation(), 2);
@ -2860,19 +2855,19 @@ suite('Node', function() {
assert.equal(circle.offsetY(), 8);
circle.width(23);
assert.equal(circle.width(), 23);
assert.equal(circle.width(), 23);
circle.height(11);
assert.equal(circle.height(), 11);
assert.equal(circle.height(), 11);
circle.listening(false);
assert.equal(circle.listening(), false);
circle.visible(false);
assert.equal(circle.visible(), false);
assert.equal(circle.visible(), false);
circle.transformsEnabled(false);
assert.equal(circle.transformsEnabled(), false);
assert.equal(circle.transformsEnabled(), false);
circle.position({x: 6, y: 8});
assert.equal(circle.position().x, 6);
@ -2925,7 +2920,7 @@ suite('Node', function() {
// document.body.appendChild(circle._cache.canvas.hit._canvas);
showHit(layer);
//assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,74,74);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);drawImage([object HTMLCanvasElement],0,0);restore();');
//assert.equal(circle._cache.canvas.scene.getContext().getTrace(), 'save();translate(74,74);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
@ -2953,7 +2948,7 @@ suite('Node', function() {
draggable: true,
});
group.add(rect);
assert.equal(rect._cache.canvas, undefined);
group.cache({
@ -2962,12 +2957,12 @@ suite('Node', function() {
width: 148,
height: 148
});
stage.add(layer);
stage.add(layer);
assert(group._cache.canvas.scene);
assert(group._cache.canvas.hit);
layer.add(group);
layer.draw();
var shape = stage.getIntersection({
@ -3009,4 +3004,4 @@ suite('Node', function() {
};
imageObj.src = 'assets/darth-vader.jpg';
});
});
});

90
test/unit/Shape-test.js
View File

@ -1,60 +1,4 @@
suite('Shape', function() {
// ======================================================
test('shape color components', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 200,
y: 90,
width: 100,
height: 50,
fillGreen: 128,
strokeRed: 255,
draggable: true
});
layer.add(rect);
stage.add(layer);
assert.equal(rect.getFillRed(), 0, 'rect fill r should be 0');
assert.equal(rect.getFillGreen(), 128, 'rect fill g should be 128');
assert.equal(rect.getFillBlue(), 0, 'rect fill b should be 0');
assert.equal(rect.getStrokeRed(), 255, 'rect stroke r should be 255');
assert.equal(rect.getStrokeGreen(), 0, 'rect stroke g should be 0');
assert.equal(rect.getStrokeBlue(), 0, 'rect stroke b should be 0');
rect.fillRed(130);
assert.equal(rect.fillRed(), 130, 'rect fill r should be 130');
rect.fillGreen(140);
assert.equal(rect.fillGreen(), 140, 'rect fill g should be 140');
rect.fillBlue(150);
assert.equal(rect.fillBlue(), 150, 'rect fill b should be 150');
rect.fillRed(0);
rect.fillGreen(128);
rect.fillBlue(0);
// var tween = new Konva.Tween({
// node: rect,
// fillGreen: 0,
// fillRed: 255,
// duration: 2,
// fillAlpha: 0
// });
// tween.play();
layer.draw();
//console.log(layer.getContext().getTrace());
});
// ======================================================
test('test intersects()', function() {
var stage = addStage();
@ -104,8 +48,7 @@ suite('Shape', function() {
var stage = addStage();
var layer = new Konva.Layer();
var shape = new Konva.Shape({
drawFunc: function(context) {
sceneFunc: function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
@ -142,7 +85,7 @@ suite('Shape', function() {
var stage = addStage();
var layer = new Konva.Layer();
var shape = new Konva.Shape({
drawFunc: function(context) {
sceneFunc: function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
@ -760,14 +703,6 @@ suite('Shape', function() {
rect.stroke('blue');
assert.equal(rect.stroke(), 'blue');
rect.strokeRed(255);
assert.equal(rect.strokeRed(), 255);
rect.strokeGreen(20);
assert.equal(rect.strokeGreen(), 20);
rect.strokeBlue(30);
assert.equal(rect.strokeBlue(), 30);
rect.lineJoin('bevel');
assert.equal(rect.lineJoin(), 'bevel');
@ -787,7 +722,7 @@ suite('Shape', function() {
rect.dash([1]);
assert.equal(rect.dash()[0], 1);
// NOTE: skipping the rest because it would take hours to test all possible methods.
// NOTE: skipping the rest because it would take hours to test all possible methods.
// This should hopefully be enough to test Factor overloaded methods
@ -844,27 +779,12 @@ suite('Shape', function() {
layer.hitCanvas._canvas.style.border='2px solid black';
});
test('back compat', function() {
assert.notEqual(Konva.Shape.prototype.dashArray, undefined);
assert.notEqual(Konva.Shape.prototype.setDashArray, undefined);
assert.notEqual(Konva.Shape.prototype.getDashArray, undefined);
});
test('test defaults', function() {
var shape = new Konva.Shape();
assert.equal(shape.strokeRed(), 0);
assert.equal(shape.strokeGreen(), 0);
assert.equal(shape.strokeBlue(), 0);
assert.equal(shape.strokeWidth(), 2);
assert.equal(shape.shadowRed(), 0);
assert.equal(shape.shadowGreen(), 0);
assert.equal(shape.shadowBlue(), 0);
assert.equal(shape.shadowOffsetX(), 0);
assert.equal(shape.shadowOffsetY(), 0);
assert.equal(shape.fillRed(), 0);
assert.equal(shape.fillGreen(), 0);
assert.equal(shape.fillBlue(), 0);
assert.equal(shape.fillPatternX(), 0);
assert.equal(shape.fillPatternY(), 0);
assert.equal(shape.fillRadialGradientStartRadius(), 0);
@ -890,7 +810,7 @@ suite('Shape', function() {
assert.equal(shape.fillRadialGradientEndPointY(), 0);
assert.equal(shape.fillPatternRotation(), 0);
});
// ======================================================
test.skip('hit graph when shape cached before adding to Layer', function() {
var stage = addStage();
@ -1202,4 +1122,4 @@ suite('Shape', function() {
});
});
});

2
test/unit/Stage-test.js
View File

@ -567,7 +567,7 @@ suite('Stage', function() {
stage.add(layer);
showHit(layer);
var circle = new Konva.Circle({
fill : 'green',
fill: 'green',
radius: 50
});
layer.add(circle);