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

introduced new Context class. I've bumped up the next release to v4.7.0 because this is a relatively big mind shift in how the framework works, and it's a big enough API change to warrant a minor update. This is the first step towards enabling context tracing for stellar unit testing

Browse Source
This commit is contained in:
Eric Rowell
2013-08-31 21:49:18 -07:00
parent 8e5e3e2bb3
commit 3ba89d36e7
34 changed files with 813 additions and 745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
tests/js/Test.js
View File

@@ -69,8 +69,8 @@ function log(message) {
}
function showHit(layer) {
layer.hitCanvas.element.style.position = 'relative';
document.body.appendChild(layer.hitCanvas.element);
layer.hitCanvas._canvas.style.position = 'relative';
document.body.appendChild(layer.hitCanvas._canvas);
}
function Test() {

30
tests/js/functionalTests.js
View File

@@ -1408,13 +1408,13 @@ Test.Modules['HIT FUNCS'] = {
strokeWidth: 4,
fill: 'red',
stroke: 'black',
drawHitFunc: function(canvas) {
var context = canvas.getContext()
context.beginPath();
context.arc(0, 0, this.getRadius() + 100, 0, Math.PI * 2, true);
context.closePath();
canvas.fill(this);
canvas.stroke(this);
drawHitFunc: function(context) {
var _context = context._context;
_context.beginPath();
_context.arc(0, 0, this.getRadius() + 100, 0, Math.PI * 2, true);
_context.closePath();
context.fillStroke(this);
}
});
@@ -1465,16 +1465,16 @@ Test.Modules['HIT FUNCS'] = {
// set drawBufferFunc with setter
circle.setDrawHitFunc(function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
context.closePath();
canvas.fill(this);
canvas.stroke(this);
circle.setDrawHitFunc(function(context) {
var _context = context._context;
_context.beginPath();
_context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
_context.closePath();
context.fillStroke(this);
});
layer.getHitCanvas().clear();
layer.getHitCanvas().getContext().clear();
layer.drawHit();

12
tests/js/manualTests.js
View File

@@ -1552,12 +1552,12 @@ Test.Modules.DRAG_AND_DROP = {
showHit(layer);
var context = bgLayer.getCanvas().getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 20);
context.strokeStyle = 'red';
context.stroke();
var _context = bgLayer.getCanvas().getContext()._context;
_context.beginPath();
_context.moveTo(0, 0);
_context.lineTo(100, 20);
_context.strokeStyle = 'red';
_context.stroke();
},
'stage and shape draggable': function(containerId) {
var stage = new Kinetic.Stage({

2
tests/js/unit/layerTests.js
View File

@@ -20,7 +20,7 @@ Test.Modules.LAYER = {
layer.add(circle);
stage.add(layer);
var style = layer.getCanvas().getElement().style;
var style = layer.getCanvas()._canvas.style;
test(style.position === 'absolute', 'canvas position style should be absolute');
test(style.border === '0px', 'canvas border style should be 0px');

40
tests/js/unit/nodeTests.js
View File

@@ -171,7 +171,7 @@ Test.Modules.NODE = {
layer.canvas = new Kinetic.SceneCanvas({
pixelRatio: 2
});
layer.canvas.getElement().style.position = 'absolute';
layer.canvas._canvas.style.position = 'absolute';
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
@@ -614,11 +614,11 @@ Test.Modules.NODE = {
test(layer2.isVisible(), 'layer2 should be visible');
layer2.hide();
test(!layer2.isVisible(), 'layer2 should be invisible');
test(layer2.canvas.element.style.display === 'none', 'layer canvas element display should be none');
test(layer2.canvas._canvas.style.display === 'none', 'layer canvas element display should be none');
layer2.show();
test(layer2.isVisible(), 'layer2 should be visible');
test(layer2.canvas.element.style.display === 'block', 'layer canvas element should be block');
test(layer2.canvas._canvas.style.display === 'block', 'layer canvas element should be block');
},
'rotation in degrees': function(containerId) {
@@ -2133,15 +2133,14 @@ Test.Modules.NODE = {
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var drawTriangle = function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
canvas.fill(this);
canvas.stroke(this);
var drawTriangle = function(context) {
var _context = context._context;
_context.beginPath();
_context.moveTo(200, 50);
_context.lineTo(420, 80);
_context.quadraticCurveTo(300, 100, 260, 170);
_context.closePath();
context.fillStroke(this);
};
var triangle = new Kinetic.Shape({
drawFunc: drawTriangle,
@@ -2168,15 +2167,14 @@ Test.Modules.NODE = {
},
'load stage with custom shape using json': function(containerId) {
var drawTriangle = function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
canvas.fill(this);
canvas.stroke(this);
var drawTriangle = function(context) {
var _context = context._context;
_context.beginPath();
_context.moveTo(200, 50);
_context.lineTo(420, 80);
_context.quadraticCurveTo(300, 100, 260, 170);
_context.closePath();
context.fillStroke(this);
};
var json = '{"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"}]}]}]}';

34
tests/js/unit/shapeTests.js
View File

@@ -128,14 +128,14 @@ Test.Modules.SHAPE = {
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(100, 100);
context.closePath();
canvas.fillStroke(this);
drawFunc: function(context) {
var _context = context._context;
_context.beginPath();
_context.moveTo(0, 0);
_context.lineTo(100, 0);
_context.lineTo(100, 100);
_context.closePath();
context.fillStroke(this);
},
x: 10,
y: 10,
@@ -164,15 +164,15 @@ Test.Modules.SHAPE = {
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(100, 100);
context.closePath();
canvas.fill(this);
canvas.stroke(this);
drawFunc: function(context) {
var _context = context._context;
_context.beginPath();
_context.moveTo(0, 0);
_context.lineTo(100, 0);
_context.lineTo(100, 100);
_context.closePath();
context.fillStroke(this);
},
x: 200,
y: 100,

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

@@ -77,8 +77,8 @@ Test.Modules.STAGE = {
test(stage.getSize().height === 155, 'stage height should be 155');
test(stage.getContent().style.width === '333px', 'content width should be 333');
test(stage.getContent().style.height === '155px', 'content height should be 155px');
test(layer.getCanvas().element.width === 333, 'layer canvas element width should be 333');
test(layer.getCanvas().element.height === 155, 'layer canvas element width should be 155');
test(layer.getCanvas()._canvas.width === 333, 'layer canvas element width should be 333');
test(layer.getCanvas()._canvas.height === 155, 'layer canvas element width should be 155');
},
'get stage DOM': function(containerId) {
var stage = new Kinetic.Stage({

103
tests/js/visualTests.js
View File

@@ -12,7 +12,7 @@ Test.Modules.NODE = {
layer.canvas = new Kinetic.SceneCanvas({
pixelRatio: 2
});
layer.canvas.getElement().style.position = 'absolute';
layer.canvas._canvas.style.position = 'absolute';
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
@@ -314,15 +314,15 @@ Test.Modules.NODE = {
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var drawTriangle = function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
canvas.fill(this);
canvas.stroke(this);
var drawTriangle = function(context) {
var _context = context._context;
_context.beginPath();
_context.moveTo(200, 50);
_context.lineTo(420, 80);
_context.quadraticCurveTo(300, 100, 260, 170);
_context.closePath();
context.fillStroke(this);
};
var triangle = new Kinetic.Shape({
drawFunc: drawTriangle,
@@ -882,21 +882,22 @@ Test.Modules.SHAPE = {
});
var layer = new Kinetic.Layer();
var drawTriangle = function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
canvas.fillStroke(this);
var drawTriangle = function(context) {
var _context = context._context;
context.beginPath();
context.moveTo(300, 150);
context.lineTo(520, 180);
context.quadraticCurveTo(400, 200, 360, 270);
context.closePath();
canvas.fillStroke(this);
_context.beginPath();
_context.moveTo(200, 50);
_context.lineTo(420, 80);
_context.quadraticCurveTo(300, 100, 260, 170);
_context.closePath();
context.fillStroke(this);
_context.beginPath();
_context.moveTo(300, 150);
_context.lineTo(520, 180);
_context.quadraticCurveTo(400, 200, 360, 270);
_context.closePath();
context.fillStroke(this);
};
var triangle = new Kinetic.Shape({
drawFunc: drawTriangle,
@@ -926,15 +927,15 @@ Test.Modules.SHAPE = {
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(100, 100);
context.closePath();
canvas.fill(this);
canvas.stroke(this);
drawFunc: function(context) {
var _context = context._context;
_context.beginPath();
_context.moveTo(0, 0);
_context.lineTo(100, 0);
_context.lineTo(100, 100);
_context.closePath();
context.fillStroke(this);
},
x: 200,
y: 100,
@@ -943,15 +944,15 @@ Test.Modules.SHAPE = {
strokeWidth: 5
});
shape.setDrawFunc(function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 0);
context.lineTo(200, 100);
context.closePath();
canvas.fill(this);
canvas.stroke(this);
shape.setDrawFunc(function(context) {
var _context = context._context;
_context.beginPath();
_context.moveTo(0, 0);
_context.lineTo(200, 0);
_context.lineTo(200, 100);
_context.closePath();
context.fillStroke(this);
});
var rect = new Kinetic.Rect({
x: 10,
@@ -964,15 +965,15 @@ Test.Modules.SHAPE = {
draggable: true
});
rect.setDrawFunc(function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 0);
context.lineTo(200, 100);
context.closePath();
canvas.fill(this);
canvas.stroke(this);
rect.setDrawFunc(function(context) {
var _context = context._context;
_context.beginPath();
_context.moveTo(0, 0);
_context.lineTo(200, 0);
_context.lineTo(200, 100);
_context.closePath();
context.fillStroke(this);
});
layer.add(shape);