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

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

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');

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"}]}]}]}';

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,

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({