lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-18 17:17:49 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

changed Stage constructor to accept a config object. Now that Stage is a node, every KineticJS object requires the same config object which bubbles up through the parent classes

Browse Source
This commit is contained in:
Eric Rowell
2012-03-22 23:17:52 -07:00
parent 0da8adfb6e
commit 7ced50f694
6 changed files with 489 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
tests/js/functionalTests.js
View File

@@ -1,6 +1,10 @@
Test.prototype.tests = {
'TRANSITION - transition position and rotation': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
@@ -23,7 +27,11 @@ Test.prototype.tests = {
});
},
'TRANSITION - transition position and rotation with two transitions': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
@@ -50,7 +58,11 @@ Test.prototype.tests = {
});
},
'ANIMATION - run animation': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -82,7 +94,11 @@ Test.prototype.tests = {
}, 3000);
},
'TRANSITION - hover linear transition': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.width / 2 - 50,
@@ -123,7 +139,11 @@ Test.prototype.tests = {
},
'TRANSITION - hover ease-in transition': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.width / 2 - 50,
@@ -166,7 +186,11 @@ Test.prototype.tests = {
},
'TRANSITION - hover ease-out transition': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.width / 2 - 50,
@@ -209,7 +233,11 @@ Test.prototype.tests = {
},
'TRANSITION - hover ease-in-out transition': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.width / 2 - 50,
@@ -274,7 +302,11 @@ Test.prototype.tests = {
});
});
}
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var greenBox = new Kinetic.Rect({
x: 50,
@@ -328,7 +360,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -380,7 +416,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - modify fill stroke and stroke width on hover with circle': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 380,
@@ -409,7 +449,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - modify fill stroke and stroke width on hover with circle with star': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
@@ -444,7 +488,11 @@ Test.prototype.tests = {
'EVENTS - modify fill stroke and stroke width on hover with circle with image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var darth = new Kinetic.Image({
x: 60,
@@ -472,7 +520,11 @@ Test.prototype.tests = {
imageObj.src = '../darth-vader.jpg';
},
'EVENTS - drag events click': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 380,
@@ -505,7 +557,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - isDragging': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 380,
@@ -543,7 +599,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - move mouse from shape to another shape in same layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var redCircle = new Kinetic.Circle({
@@ -583,7 +643,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - move mouse from shape in one group to shape in another group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var redGroup = new Kinetic.Group();
var greenGroup = new Kinetic.Group();
@@ -628,7 +692,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - move mouse from shape in one layer to shape in another layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var redLayer = new Kinetic.Layer();
var greenLayer = new Kinetic.Layer();
@@ -670,7 +738,11 @@ Test.prototype.tests = {
stage.add(greenLayer);
},
'EVENTS - mousemove from shape in one group to shape in another group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var redGroup = new Kinetic.Group();
var greenGroup = new Kinetic.Group();
@@ -709,7 +781,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - group click events': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
@@ -744,7 +820,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - group mousemove events': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
@@ -777,7 +857,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - group mouseover events': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
name: 'group'
@@ -817,7 +901,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - cancel event bubbling (only the red circle should fire click event)': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
@@ -848,7 +936,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - draggable true': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -865,7 +957,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - draggable true false': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -884,7 +980,11 @@ Test.prototype.tests = {
circle.draggable(false);
},
'DRAG AND DROP - scale stage after add layer then drag and drop shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -905,7 +1005,11 @@ Test.prototype.tests = {
stage.draw();
},
'DRAG AND DROP - scale stage before add shape then drag and drop shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -923,7 +1027,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - set stage scale to 1.5 after add layer then drag and drop shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -944,7 +1052,11 @@ Test.prototype.tests = {
stage.draw();
},
'DRAG AND DROP - set stage scale to 1.5 before add layer then drag and drop shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -963,7 +1075,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - check that green events are ignored when dragging red circle': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle1 = new Kinetic.Circle({
x: stage.width / 2,
@@ -994,7 +1110,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop constrianed horiztonally': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1011,7 +1131,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop constrianed vertically': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1028,7 +1152,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop with explicit no constraint': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1045,7 +1173,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop with left bounds': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1064,7 +1196,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop with right bounds': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1083,7 +1219,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop with top bounds': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1102,7 +1242,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop with bottom bounds': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1121,7 +1265,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop with full rect bounds': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1143,7 +1291,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop shape inside scrollable div': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 400);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 400
});
// make container scrollable
var container = stage.getContainer();
@@ -1164,7 +1316,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop shape inside scaled group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
scale: {

323
tests/js/unitTests.js
View File

@@ -4,14 +4,26 @@ Test.prototype.tests = {
////////////////////////////////////////////////////////////////////////
'STAGE - instantiate stage with id': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
},
'STAGE - instantiate stage with dom element': function(containerId) {
var containerDom = document.getElementById(containerId);
var stage = new Kinetic.Stage(containerDom, 578, 200);
var stage = new Kinetic.Stage({
container: containerDom,
width: 578,
height: 200
});
},
'STAGE - add shape then stage then layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
@@ -30,7 +42,11 @@ Test.prototype.tests = {
layer.draw();
},
'STAGE - add layer then group then shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
@@ -49,7 +65,11 @@ Test.prototype.tests = {
layer.draw();
},
'STAGE - scale stage after add layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -68,7 +88,11 @@ Test.prototype.tests = {
stage.draw();
},
'STAGE - scale stage before add shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -84,7 +108,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'STAGE - scale stage with no shapes': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
stage.add(layer);
@@ -93,7 +121,11 @@ Test.prototype.tests = {
stage.draw();
},
'STAGE - remove layer with shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -115,7 +147,11 @@ Test.prototype.tests = {
test(stage.children.length === 0, 'stage should have 0 children');
},
'STAGE - remove layer with no shapes': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
stage.add(layer);
stage.remove(layer);
@@ -125,12 +161,20 @@ Test.prototype.tests = {
////////////////////////////////////////////////////////////////////////
'LAYERS - add layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
stage.add(layer);
},
'LAYERS - remove all children from layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle1 = new Kinetic.Circle({
x: stage.width / 2,
@@ -161,7 +205,11 @@ Test.prototype.tests = {
test(layer.children.length === 0, 'layer should have 0 children');
},
'LAYERS - hide layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -183,7 +231,11 @@ Test.prototype.tests = {
////////////////////////////////////////////////////////////////////////
'GROUPS - add group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
@@ -201,7 +253,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'GROUPS - hide group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
@@ -221,7 +277,11 @@ Test.prototype.tests = {
layer.draw();
},
'GROUPS - create two groups, move first group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var greenLayer = new Kinetic.Layer();
var blueLayer = new Kinetic.Layer();
var greenGroup = new Kinetic.Group();
@@ -275,7 +335,11 @@ Test.prototype.tests = {
////////////////////////////////////////////////////////////////////////
'SHAPES - add rect': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -304,7 +368,11 @@ Test.prototype.tests = {
//stage.start();
},
'SHAPES - add circle': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -332,7 +400,11 @@ Test.prototype.tests = {
//stage.start();
},
'SHAPES - set fill after instantiation': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -351,7 +423,11 @@ Test.prototype.tests = {
'SHAPES - add image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var darth = new Kinetic.Image({
x: 10,
@@ -376,7 +452,11 @@ Test.prototype.tests = {
imageObj.src = '../darth-vader.jpg';
},
'SHAPES - add polygon': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var points = [{
@@ -420,7 +500,11 @@ Test.prototype.tests = {
//stage.start();
},
'SHAPES - add regular polygon triangle': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var poly = new Kinetic.RegularPolygon({
@@ -447,7 +531,11 @@ Test.prototype.tests = {
//stage.start();
},
'SHAPES - add regular polygon square': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var poly = new Kinetic.RegularPolygon({
@@ -465,7 +553,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - add regular polygon pentagon': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var poly = new Kinetic.RegularPolygon({
@@ -483,7 +575,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - add regular polygon octogon': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var poly = new Kinetic.RegularPolygon({
@@ -501,7 +597,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - add 5 point star': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
@@ -533,7 +633,11 @@ Test.prototype.tests = {
//stage.start();
},
'SHAPES - add stroke rect': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -548,7 +652,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - use default stroke': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -564,7 +672,11 @@ Test.prototype.tests = {
test(rect.stroke === 'black', 'stroke should be black');
},
'SHAPES - use default stroke width': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -580,7 +692,11 @@ Test.prototype.tests = {
test(rect.strokeWidth === 2, 'stroke width should be 2');
},
'SHAPES - set center offset after instantiation': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -607,7 +723,11 @@ Test.prototype.tests = {
},
'SHAPES - custom shape with fill, stroke, and strokeWidth': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function() {
@@ -630,7 +750,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - init with position, scale, rotation, then change scale': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -661,7 +785,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - rotation in degrees': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -684,7 +812,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - add text': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var text = new Kinetic.Text({
@@ -741,7 +873,11 @@ Test.prototype.tests = {
test(text.getTextStrokeWidth() === 10, 'test stroke width should be 10');
},
'SHAPES - get shape name': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -759,7 +895,11 @@ Test.prototype.tests = {
test(circle.getName() == 'myCircle', 'name should be myCircle');
},
'SHAPES - remove shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -784,7 +924,11 @@ Test.prototype.tests = {
layer.draw();
},
'NODE - test drag and drop properties and methods': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -831,7 +975,11 @@ Test.prototype.tests = {
test(circle.getDragBounds().bottom === 200, 'drag bottom should be 200');
},
'NODE - translate, rotate, scale shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Rect({
x: 100,
@@ -843,8 +991,8 @@ Test.prototype.tests = {
stroke: 'black',
strokeWidth: 4,
scale: {
x: 2,
y: 1
x: 2,
y: 1
},
centerOffset: {
x: 50,
@@ -859,12 +1007,15 @@ Test.prototype.tests = {
circle.rotation += .1;
layer.draw();
});
//stage.start();
},
'STAGE - add layer then shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -881,7 +1032,11 @@ Test.prototype.tests = {
layer.draw();
},
'SHAPES - move shape, group, and layer, and then get absolute position': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
@@ -915,7 +1070,11 @@ Test.prototype.tests = {
layer.draw();
},
'SHAPES - hide circle': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -933,7 +1092,11 @@ Test.prototype.tests = {
layer.draw();
},
'SHAPES - hide show circle': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -954,7 +1117,11 @@ Test.prototype.tests = {
layer.draw();
},
'SHAPES - set shape alpha to 0.5': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -970,7 +1137,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - set shape alpha to 0.5 then back to 1': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -993,7 +1164,11 @@ Test.prototype.tests = {
test(circle.getAbsoluteAlpha() === 1, 'abs alpha should be 1');
},
'STAGE - set shape and layer alpha to 0.5': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1013,7 +1188,11 @@ Test.prototype.tests = {
test(layer.getAbsoluteAlpha() === 0.5, 'abs alpha should be 0.5');
},
'SHAPES - scale shape by half': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1029,7 +1208,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - scale shape by half then back to 1': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1050,7 +1233,11 @@ Test.prototype.tests = {
////////////////////////////////////////////////////////////////////////
'LAYERING - move blue circle on top of green circle with moveToTop': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var blueCircle = new Kinetic.Circle({
@@ -1086,7 +1273,11 @@ Test.prototype.tests = {
layer.draw();
},
'LAYERING - move green circle below blue circle with moveDown': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var blueCircle = new Kinetic.Circle({
@@ -1122,7 +1313,11 @@ Test.prototype.tests = {
layer.draw();
},
'LAYERING - move blue group on top of green group with moveToTop': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var greenGroup = new Kinetic.Group();
var blueGroup = new Kinetic.Group();
@@ -1163,7 +1358,11 @@ Test.prototype.tests = {
layer.draw();
},
'LAYERING - move blue group on top of green group with moveUp': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var greenGroup = new Kinetic.Group();
var blueGroup = new Kinetic.Group();
@@ -1204,7 +1403,11 @@ Test.prototype.tests = {
layer.draw();
},
'LAYERING - move blue layer on top of green layer with moveToTop': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var blueLayer = new Kinetic.Layer();
var greenLayer = new Kinetic.Layer();
@@ -1235,7 +1438,11 @@ Test.prototype.tests = {
blueLayer.moveToTop();
},
'LAYERING - move green layer below blue layer with moveToBottom': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var blueLayer = new Kinetic.Layer();
var greenLayer = new Kinetic.Layer();
@@ -1270,7 +1477,11 @@ Test.prototype.tests = {
////////////////////////////////////////////////////////////////////////
'ANIMATION - stage and global object animation properties': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,