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

finished migrating all shape unit tests over to mocha. continued working on context tracing support

Browse Source
This commit is contained in:
Eric Rowell 2013-09-07 17:57:48 -07:00
parent eddcf8ccbe
commit ee5f4c3e3b
17 changed files with 150 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Gruntfile.js
View File

@ -59,18 +59,6 @@ module.exports = function(grunt) {
'tests/js/unit/ddTests.js',
'tests/js/unit/canvasTests.js',
'tests/js/unit/shapes/rectTests.js',
'tests/js/unit/shapes/circleTests.js',
'tests/js/unit/shapes/ellipseTests.js',
'tests/js/unit/shapes/wedgeTests.js',
'tests/js/unit/shapes/imageTests.js',
'tests/js/unit/shapes/polygonTests.js',
'tests/js/unit/shapes/lineTests.js',
'tests/js/unit/shapes/splineTests.js',
'tests/js/unit/shapes/blobTests.js',
'tests/js/unit/shapes/textTests.js',
'tests/js/unit/shapes/spriteTests.js',
'tests/js/unit/plugins/pathTests.js',
'tests/js/unit/plugins/regularPolygonTests.js',
'tests/js/unit/plugins/starTests.js',

22
src/Context.js
View File

@ -16,10 +16,13 @@
'createLinearGradient',
'createPattern',
'createRadialGradient',
'drawImage',
'fill',
'fillText',
'getImageData',
'lineTo',
'moveTo',
'putImageData',
'rect',
'restore',
'rotate',
@ -60,7 +63,6 @@
*/
getTrace: function() {
return this.traceArr.join(';');
},
/**
* clear trace if trace is enabled
@ -233,6 +235,16 @@
var a = arguments;
return this._context.createRadialGradient(a[0], a[1], a[2], a[3], a[4], a[5]);
},
drawImage: function() {
var a = arguments,
_context = this._context;
if(a.length === 5) {
_context.drawImage(a[0], a[1], a[2], a[3], a[4]);
}
else if(a.length === 9) {
_context.drawImage(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8]);
}
},
fill: function() {
this._context.fill();
},
@ -240,6 +252,10 @@
var a = arguments;
this._context.fillText(a[0], a[1], a[2]);
},
getImageData: function() {
var a = arguments;
return this._context.getImageData(a[0], a[1], a[2], a[3]);
},
lineTo: function() {
var a = arguments;
this._context.lineTo(a[0], a[1]);
@ -252,6 +268,10 @@
var a = arguments;
this._context.rect(a[0], a[1], a[2], a[3]);
},
putImageData: function() {
var a = arguments;
this._context.rect(a[0], a[1], a[2]);
},
restore: function() {
this._context.restore();
},

52
src/shapes/Image.js
View File

@ -45,7 +45,6 @@
height = this.getHeight(),
params,
that = this,
_context = context._context,
cropX = this.getCropX() || 0,
cropY = this.getCropY() || 0,
cropWidth = this.getCropWidth(),
@ -66,9 +65,9 @@
image = this.getImage();
}
_context.beginPath();
_context.rect(0, 0, width, height);
_context.closePath();
context.beginPath();
context.rect(0, 0, width, height);
context.closePath();
context.fillStrokeShape(this);
if(image) {
@ -83,31 +82,30 @@
if(this.hasShadow()) {
context.applyShadow(this, function() {
that._drawImage(_context, params);
context.drawImage.apply(context, params);
});
}
else {
this._drawImage(_context, params);
context.drawImage.apply(context, params);
}
}
},
drawHitFunc: function(context) {
var width = this.getWidth(),
height = this.getHeight(),
imageHitRegion = this.imageHitRegion,
_context = context._context;
imageHitRegion = this.imageHitRegion;
if(imageHitRegion) {
_context.drawImage(imageHitRegion, 0, 0, width, height);
_context.beginPath();
_context.rect(0, 0, width, height);
_context.closePath();
context.drawImage(imageHitRegion, 0, 0, width, height);
context.beginPath();
context.rect(0, 0, width, height);
context.closePath();
context.stroke(this);
}
else {
_context.beginPath();
_context.rect(0, 0, width, height);
_context.closePath();
context.beginPath();
context.rect(0, 0, width, height);
context.closePath();
context.fillStrokeShape(this);
}
},
@ -117,7 +115,7 @@
width = this.getWidth(),
height = this.getHeight(),
filter = this.getFilter(),
filterCanvas, _context, imageData;
filterCanvas, context, imageData;
if (this.filterCanvas){
filterCanvas = this.filterCanvas;
@ -131,13 +129,13 @@
});
}
_context = filterCanvas.getContext()._context;
context = filterCanvas.getContext();
try {
this._drawImage(_context, [image, 0, 0, filterCanvas.getWidth(), filterCanvas.getHeight()]);
imageData = _context.getImageData(0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
context.drawImage(image, 0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
imageData = context.getImageData(0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
filter.call(this, imageData);
_context.putImageData(imageData, 0, 0);
context.putImageData(imageData, 0, 0);
}
catch(e) {
this.clearFilter();
@ -170,14 +168,14 @@
width: width,
height: height
}),
_context = canvas.getContext()._context,
context = canvas.getContext(),
image = this.getImage(),
imageData, data, rgbColorKey, i, n;
_context.drawImage(image, 0, 0);
context.drawImage(image, 0, 0);
try {
imageData = _context.getImageData(0, 0, width, height);
imageData = context.getImageData(0, 0, width, height);
data = imageData.data;
rgbColorKey = Kinetic.Util._hexToRgb(this.colorKey);
@ -216,14 +214,6 @@
getHeight: function() {
var image = this.getImage();
return this.attrs.height || (image ? image.height : 0);
},
_drawImage: function(_context, a) {
if(a.length === 5) {
_context.drawImage(a[0], a[1], a[2], a[3], a[4]);
}
else if(a.length === 9) {
_context.drawImage(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8]);
}
}
};
Kinetic.Util.extend(Kinetic.Image, Kinetic.Shape);

10
src/shapes/Wedge.js
View File

@ -32,12 +32,10 @@
this.className = 'Wedge';
},
drawFunc: function(context) {
var _context = context._context;
_context.beginPath();
_context.arc(0, 0, this.getRadius(), 0, this.getAngle(), this.getClockwise());
_context.lineTo(0, 0);
_context.closePath();
context.beginPath();
context.arc(0, 0, this.getRadius(), 0, this.getAngle(), this.getClockwise());
context.lineTo(0, 0);
context.closePath();
context.fillStrokeShape(this);
}
};

22
test/runner.html
View File

@ -52,15 +52,23 @@
kineticContainer.appendChild(title);
});
</script>
<!-- core -->
<script src="unit/Util-test.js"></script>
<script src="unit/Rect-test.js"></script>
<script src="unit/Circle-test.js"></script>
<script src="unit/Image-test.js"></script>
<script src="unit/Line-test.js"></script>
<script src="unit/Text-test.js"></script>
<script src="unit/Blob-test.js"></script>
<script src="unit/Ellipse-test.js"></script>
<!-- shapes -->
<script src="unit/shapes/Rect-test.js"></script>
<script src="unit/shapes/Circle-test.js"></script>
<script src="unit/shapes/Image-test.js"></script>
<script src="unit/shapes/Line-test.js"></script>
<script src="unit/shapes/Text-test.js"></script>
<script src="unit/shapes/Blob-test.js"></script>
<script src="unit/shapes/Ellipse-test.js"></script>
<script src="unit/shapes/Polygon-test.js"></script>
<script src="unit/shapes/Spline-test.js"></script>
<script src="unit/shapes/Sprite-test.js"></script>
<script src="unit/shapes/Wedge-test.js"></script>
<script>
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
else { mocha.run(); }

43
test/unit/Blob-test.js → test/unit/shapes/Blob-test.js
View File

@ -1,10 +1,10 @@
suite('Blob', function(){
// ======================================================
test('add blobs', function() {
test('add blob', function() {
var stage = buildStage();
var layer = new Kinetic.Layer();
var blob1 = new Kinetic.Blob({
var blob = new Kinetic.Blob({
points: [{
x: 73,
y: 140
@ -25,46 +25,25 @@ suite('Blob', function(){
tension: 0.8
});
var blob2 = new Kinetic.Blob({
points: [{
x: 73,
y: 140
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}],
stroke: 'red',
strokeWidth: 10,
draggable: true,
fill: '#faa',
tension: 1.2,
scale: 0.5,
x: 100,
y: 50
});
layer.add(blob1);
layer.add(blob2);
layer.add(blob);
stage.add(layer);
assert.equal(blob1.getTension(), 0.8);
assert.equal(blob2.getTension(), 1.2);
assert.equal(blob.getTension(), 0.8);
assert.equal(blob1.getClassName(), 'Blob');
assert.equal(blob.getClassName(), 'Blob');
//console.log(blob1.getPoints())
// test setter
blob1.setTension(1.5);
assert.equal(blob1.getTension(), 1.5);
blob.setTension(1.5);
assert.equal(blob.getTension(), 1.5);
var trace = layer.getContext().getTrace();
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(73,140);bezierCurveTo(90.922,74.135,129.542,38.279,340,23);bezierCurveTo(471.142,13.479,514.876,54.33,500,109);bezierCurveTo(482.876,171.93,463.05,158.163,300,170);bezierCurveTo(121.45,182.963,58.922,191.735,73,140);closePath();fillStyle=#aaf;fill();lineWidth=10;strokeStyle=blue;stroke();restore()');
});
// ======================================================
test('add blob and define tension first', function() {
test('define tension first', function() {
var stage = buildStage();
var layer = new Kinetic.Layer();

0
test/unit/Circle-test.js → test/unit/shapes/Circle-test.js
View File

0
test/unit/Ellipse-test.js → test/unit/shapes/Ellipse-test.js
View File

0
test/unit/Image-test.js → test/unit/shapes/Image-test.js
View File

0
test/unit/Line-test.js → test/unit/shapes/Line-test.js
View File

18
tests/js/unit/shapes/polygonTests.js → test/unit/shapes/Polygon-test.js
View File

@ -1,10 +1,7 @@
Test.Modules.POLYGON = {
'add polygon': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
suite('Polygon', function() {
test('add polygon', function() {
var stage = buildStage();
var layer = new Kinetic.Layer();
var points = [{
@ -37,7 +34,6 @@ Test.Modules.POLYGON = {
layer.add(poly);
stage.add(layer);
test(poly.getClassName() === 'Polygon', 'getClassName should be Polygon');
}
};
assert.equal(poly.getClassName(), 'Polygon');
});
});

0
test/unit/Rect-test.js → test/unit/shapes/Rect-test.js
View File

91
tests/js/unit/shapes/splineTests.js → test/unit/shapes/Spline-test.js
View File

@ -1,10 +1,7 @@
Test.Modules.SPLINE = {
'add splines': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
suite('Spline', function() {
// ======================================================
test('add splines', function() {
var stage = buildStage();
var layer = new Kinetic.Layer();
var line1 = new Kinetic.Spline({
@ -69,16 +66,14 @@ Test.Modules.SPLINE = {
layer.add(line3);
stage.add(layer);
test(line1.getClassName() === 'Spline', 'getClassName should be Spline');
assert.equal(line1.getClassName(), 'Spline');
},
'update spline points': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
});
// ======================================================
test('update spline points', function() {
var stage = buildStage();
var layer = new Kinetic.Layer();
var spline = new Kinetic.Spline({
@ -107,7 +102,7 @@ Test.Modules.SPLINE = {
layer.add(spline);
stage.add(layer);
test(spline.allPoints.length === 6, 'spline all points should have 6 points');
assert.equal(spline.allPoints.length, 6);
spline.setPoints([{
x: 73,
@ -120,18 +115,16 @@ Test.Modules.SPLINE = {
y: 109
}]);
test(spline.allPoints.length === 3, 'spline all points should have 3 points');
assert.equal(spline.allPoints.length, 3);
layer.draw();
},
'add point to spline points': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
});
// ======================================================
test('add point to spline points', function() {
var stage = buildStage();
var layer = new Kinetic.Layer();
var spline = new Kinetic.Spline({
@ -160,23 +153,21 @@ Test.Modules.SPLINE = {
layer.add(spline);
stage.add(layer);
test(spline.getPoints().length === 4, 'spline should have 4 points');
assert.equal(spline.getPoints().length, 4);
spline.addPoint({
x: 300,
y: 200
});
test(spline.getPoints().length === 5, 'spline should have 5 points');
assert.equal(spline.getPoints().length, 5);
layer.draw();
},
'create from points represented as a flat array': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
});
// ======================================================
test('create from points represented as a flat array', function() {
var stage = buildStage();
var layer = new Kinetic.Layer();
var line = new Kinetic.Spline({
@ -197,14 +188,12 @@ Test.Modules.SPLINE = {
layer.add(line);
stage.add(layer);
test(line.getPoints().length === 4, 'line should have 4 points');
},
'create from points represented as an array of objects': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
assert.equal(line.getPoints().length, 4);
});
// ======================================================
test('create from points represented as an array of objects', function() {
var stage = buildStage();
var layer = new Kinetic.Layer();
var line = new Kinetic.Spline({
@ -232,14 +221,12 @@ Test.Modules.SPLINE = {
layer.add(line);
stage.add(layer);
test(line.getPoints().length === 4, 'line should have 4 points');
},
'create from points represented as an array of arrays': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
assert.equal(line.getPoints().length, 4);
});
// ======================================================
test('create from points represented as an array of arrays', function() {
var stage = buildStage();
var layer = new Kinetic.Layer();
var line = new Kinetic.Spline({
@ -260,6 +247,6 @@ Test.Modules.SPLINE = {
layer.add(line);
stage.add(layer);
test(line.getPoints().length === 4, 'line should have 4 points');
}
};
assert.equal(line.getPoints().length, 4);
});
});

33
tests/js/unit/shapes/spriteTests.js → test/unit/shapes/Sprite-test.js
View File

@ -1,12 +1,9 @@
Test.Modules.SPRITE = {
'add sprite': function(containerId) {
suite('Sprite', function() {
// ======================================================
test('add sprite', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var stage = buildStage();
var layer = new Kinetic.Layer();
var anims = {
@ -88,14 +85,14 @@ Test.Modules.SPRITE = {
frameRate: 10,
draggable: true,
shadowColor: 'black',
shadowBlur: 3,
shadowOffset: [3, 1],
shadowOpacity: 0.3
shadowBlur: 3,
shadowOffset: [3, 1],
shadowOpacity: 0.3
});
layer.add(sprite);
sprite.start();
//}
stage.add(layer);
@ -110,12 +107,12 @@ Test.Modules.SPRITE = {
setTimeout(function() {
sprite.stop();
}, 3000);
//document.body.appendChild(layer.bufferCanvas.element)
test(sprite.getClassName() === 'Sprite', 'getClassName should be Sprite');
test(sprite.getIndex() === 0, 'sprite index should default to 0');
assert.equal(sprite.getClassName(), 'Sprite');
assert.equal(sprite.getIndex(), 0);
done();
};
imageObj.src = '../assets/scorpion-sprite.png';
}
};
imageObj.src = 'assets/scorpion-sprite.png';
});
});

0
test/unit/Text-test.js → test/unit/shapes/Text-test.js
View File

35
tests/js/unit/shapes/wedgeTests.js → test/unit/shapes/Wedge-test.js
View File

@ -1,10 +1,7 @@
Test.Modules.Wedge = {
'add wedge': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
suite('Wedge', function() {
// ======================================================
test('add wedge', function() {
var stage = buildStage();
var layer = new Kinetic.Layer();
var wedge = new Kinetic.Wedge({
x: 100,
@ -21,14 +18,16 @@ Test.Modules.Wedge = {
layer.add(wedge);
stage.add(layer);
test(wedge.getClassName() === 'Wedge', 'getClassName should be Wedge');
},
'set wedge angle using degrees': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
assert.equal(wedge.getClassName(), 'Wedge');
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,1.257,false);lineTo(0,0);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore()');
});
// ======================================================
test('set wedge angle using degrees', function() {
var stage = buildStage();
var layer = new Kinetic.Layer();
var wedge = new Kinetic.Wedge({
x: 100,
@ -46,6 +45,6 @@ Test.Modules.Wedge = {
layer.add(wedge);
stage.add(layer);
test(wedge.getAngle() === Math.PI / 2, 'problem setting wedge angle using degrees');
}
};
assert.equal(wedge.getAngle(), Math.PI / 2);
});
});

136
tests/js/unit/shapes/lineTests.js
View File

@ -1,136 +0,0 @@
Test.Modules.LINE = {
'add line': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var points = [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}
/*, {
x: 500,
y: 109
}*/
];
var line = new Kinetic.Line({
points: points,
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
draggable: true
});
layer.add(line);
stage.add(layer);
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');
test(line.getClassName() === 'Line', 'getClassName should be Line');
},
'test default ponts array for two lines': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var line = new Kinetic.Line({
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
draggable: true
});
var redLine = new Kinetic.Line({
x: 50,
stroke: 'red',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
draggable: true
});
line.setPoints([0,1,2,3]);
redLine.setPoints([4,5,6,7]);
layer.add(line).add(redLine);
stage.add(layer);
test(line.getPoints()[0].x === 0, 'line points is wrong');
test(redLine.getPoints()[0].x === 4, 'redLine points is wrong');
},
'add dashed line': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
/*
var points = [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 500,
y: 180
}];
*/
var line = new Kinetic.Line({
points: [73, 160, 340, 23, 500, 109, 500, 180],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
dashArray: [30, 10, 0, 10, 10, 20],
shadowColor: '#aaa',
shadowBlur: 10,
shadowOffset: [20, 20]
//opacity: 0.2
});
layer.add(line);
stage.add(layer);
test(line.getDashArray().length === 6, 'dashArray should have 6 elements');
line.setDashArray([10, 10]);
test(line.getDashArray().length === 2, 'dashArray should have 2 elements');
test(line.getPoints().length === 4, 'line should have 4 points');
}
};