lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-02-25 13:12:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

bug fixes and enhancements. also updated the README

Browse Source
This commit is contained in:
Eric Rowell
2012-03-10 16:52:16 -08:00
parent 0f49f12024
commit 07860a7dbd
14 changed files with 2741 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tests/functionalTests.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<link rel="stylesheet" type="text/css"href="base.css">
<script src="../dist/kinetic-v3.8.3.js"></script>
<script src="../dist/kinetic-core.js"></script>
<script src="functionalTests.js"></script>
<script src="testMethods.js"></script>
<script>

500
tests/functionalTests.js
View File

@@ -1,154 +1,8 @@
function Test(){
function Test() {
this.testOnly = "";
this.counter = 0;
this.tests = {
"DRAG AND DROP - draggable true": function(containerId){
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - draggable true false": function(containerId){
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
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 layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
stage.setScale(0.5);
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 layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
stage.setScale(0.5);
layer.add(circle);
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 layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
stage.setScale(1.5);
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 layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
stage.setScale(1.5);
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - check that other events are disabled": function(containerId){
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle1 = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
var circle2 = new Kinetic.Circle({
x: stage.width / 2 + 50,
y: stage.height / 2,
radius: 70,
fill: "green",
stroke: "black",
strokeWidth: 4
});
circle1.draggable(true);
circle2.on("mouseover", function(){
log("mouseover green circle");
});
layer.add(circle1);
layer.add(circle2);
stage.add(layer);
},
"EVENTS - mousedown mouseup mouseover mouseout click dblclick": function(containerId){
"EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@@ -160,35 +14,47 @@ function Test(){
strokeWidth: 4,
draggable: true
});
circle.on('mousedown', function(){
circle.on('mousedown', function() {
log('mousedown');
});
circle.on('mouseup', function(){
circle.on('mouseup', function() {
log('mouseup');
});
circle.on('mouseover', function(){
circle.on('touchstart', function() {
log('touchstart');
});
circle.on('touchend', function() {
log('touchend');
});
circle.on('mouseover', function() {
log('mouseover');
});
circle.on('mouseout', function(){
circle.on('mouseout', function() {
log('mouseout');
});
circle.on('click', function(){
circle.on('click', function() {
log('click');
});
circle.on('dblclick', function(){
circle.on('dblclick', function() {
log('dblclick');
});
circle.on('dbltap', function() {
log('dbltap');
});
layer.add(circle);
stage.add(layer);
},
"EVENTS - modify fill stroke and stroke width": function(containerId){
"EVENTS - modify fill stroke and stroke width on hover with circle": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@@ -199,28 +65,28 @@ function Test(){
fill: "red",
stroke: "black"
});
circle.on("mouseover", function(){
circle.on("mouseover", function() {
this.setFill("yellow");
this.setStroke("purple");
this.setStrokeWidth(20);
layer.draw();
});
circle.on("mouseout", function(){
circle.on("mouseout", function() {
this.setFill("red");
this.setStroke("black");
this.setStrokeWidth(4);
layer.draw();
});
layer.add(circle);
stage.add(layer);
},
"EVENTS - 10 point star geometry modify stroke fill and stroke width": function(containerId){
"EVENTS - modify fill stroke and stroke width on hover with circle with star": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
x: 200,
y: 100,
@@ -232,27 +98,27 @@ function Test(){
strokeWidth: 5,
name: "foobar"
});
star.on("mouseover", function(){
star.on("mouseover", function() {
this.setFill("yellow");
this.setStroke("purple");
this.setStrokeWidth(20);
layer.draw();
});
star.on("mouseout", function(){
star.on("mouseout", function() {
this.setFill("green");
this.setStroke("blue");
this.setStrokeWidth(5);
layer.draw();
});
layer.add(star);
stage.add(layer);
},
"EVENTS - image geometry modify fill stroke and stroke width": function(containerId){
"EVENTS - modify fill stroke and stroke width on hover with circle with image": function(containerId) {
var imageObj = new Image();
imageObj.onload = function(){
imageObj.onload = function() {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var darth = new Kinetic.Image({
@@ -260,27 +126,27 @@ function Test(){
y: 60,
image: imageObj
});
darth.on("mouseover", function(){
darth.on("mouseover", function() {
this.setFill("yellow");
this.setStroke("purple");
this.setStrokeWidth(20);
layer.draw();
});
darth.on("mouseout", function(){
this.setFill("");
this.setStroke("");
darth.on("mouseout", function() {
this.setFill(undefined);
this.setStroke(undefined);
this.setStrokeWidth(0);
layer.draw();
});
layer.add(darth);
stage.add(layer);
};
imageObj.src = "darth-vader.jpg";
},
"EVENTS - drag events click": function(containerId){
"EVENTS - drag events click": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@@ -291,31 +157,29 @@ function Test(){
fill: "red",
stroke: "black"
});
circle.draggable(true);
circle.on('dragstart', function(){
circle.on('dragstart', function() {
log('dragstart');
});
circle.on('dragmove', function(){
circle.on('dragmove', function() {
log('dragmove');
});
circle.on('dragend', function(){
circle.on('dragend', function() {
log('dragend');
});
circle.on('click', function(){
circle.on('click', function() {
log('click');
});
layer.add(circle);
stage.add(layer);
},
"EVENTS - isDragging": function(containerId){
"EVENTS - isDragging": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@@ -326,37 +190,37 @@ function Test(){
fill: "red",
stroke: "black"
});
//log('not dragging yet before draggable, isDragging: ' + circle.isDragging());
test(circle.isDragging() === false, "isDragging() should be false");
circle.draggable(true);
//log('not dragging yet after draggable, isDragging: ' + circle.isDragging());
test(circle.isDragging() === false, "isDragging() should be false");
circle.on('dragstart', function(){
circle.on('dragstart', function() {
log('dragstart, isDragging: ' + this.isDragging());
test(circle.isDragging() === true, "isDragging() should be true");
});
circle.on('dragmove', function(){
circle.on('dragmove', function() {
log('dragmove, isDragging: ' + this.isDragging());
test(circle.isDragging() === true, "isDragging() should be true");
});
circle.on('dragend', function(){
circle.on('dragend', function() {
log('dragend, isDragging: ' + this.isDragging());
test(circle.isDragging() === false, "isDragging() should be false");
});
layer.add(circle);
stage.add(layer);
},
"EVENTS - mousemove from shape to another shape in same layer": function(containerId){
"EVENTS - mousemove from shape to another shape in same layer": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var redCircle = new Kinetic.Circle({
x: 200,
y: stage.height / 2,
@@ -365,14 +229,13 @@ function Test(){
fill: "red",
stroke: "black"
});
redCircle.on("mouseover", function(){
redCircle.on("mouseover", function() {
log('mouseover red circle');
});
redCircle.on("mouseout", function(){
redCircle.on("mouseout", function() {
log('mouseout red circle');
});
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.height / 2,
@@ -381,24 +244,24 @@ function Test(){
fill: "green",
stroke: "black"
});
greenCircle.on("mouseover", function(){
greenCircle.on("mouseover", function() {
log('mouseover green circle');
});
greenCircle.on("mouseout", function(){
greenCircle.on("mouseout", function() {
log('mouseout green circle');
});
layer.add(redCircle);
layer.add(greenCircle);
stage.add(layer);
},
"EVENTS - mousemove from shape in one layer to shape in another layer": function(containerId){
"EVENTS - mousemove from shape in one layer to shape in another layer": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var redLayer = new Kinetic.Layer();
var greenLayer = new Kinetic.Layer();
var redCircle = new Kinetic.Circle({
x: 200,
y: stage.height / 2,
@@ -407,14 +270,13 @@ function Test(){
fill: "red",
stroke: "black"
});
redCircle.on("mouseover", function(){
redCircle.on("mouseover", function() {
log('mouseover red circle');
});
redCircle.on("mouseout", function(){
redCircle.on("mouseout", function() {
log('mouseout red circle');
});
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.height / 2,
@@ -423,43 +285,42 @@ function Test(){
fill: "green",
stroke: "black"
});
greenCircle.on("mouseover", function(){
greenCircle.on("mouseover", function() {
log('mouseover green circle');
});
greenCircle.on("mouseout", function(){
greenCircle.on("mouseout", function() {
log('mouseout green circle');
});
redLayer.add(redCircle);
greenLayer.add(greenCircle);
stage.add(redLayer);
stage.add(greenLayer);
},
"EVENTS - event bubbling": function(containerId){
"EVENTS - event bubbling": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
layer.on("mouseover", function(){
layer.on("mouseover", function() {
log('mouseover layer');
//console.log(this);
});
layer.on("mouseout", function(){
layer.on("mouseout", function() {
log('mouseout layer');
//console.log(this);
});
group.on("mouseover", function(){
group.on("mouseover", function() {
log('mouseover group');
//console.log(this);
});
group.on("mouseout", function(){
group.on("mouseout", function() {
log('mouseout group');
//console.log(this);
});
var redCircle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
@@ -468,16 +329,15 @@ function Test(){
fill: "red",
stroke: "black"
});
redCircle.on("mouseover", function(){
redCircle.on("mouseover", function() {
log('mouseover red circle');
//console.log(this);
});
redCircle.on("mouseout", function(){
redCircle.on("mouseout", function() {
log('mouseout red circle');
//console.log(this);
});
var greenCircle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
@@ -486,21 +346,167 @@ function Test(){
fill: "green",
stroke: "black"
});
greenCircle.on("mouseover", function(){
greenCircle.on("mouseover", function() {
log('mouseover green circle');
//console.log(this);
});
greenCircle.on("mouseout", function(){
greenCircle.on("mouseout", function() {
log('mouseout green circle');
//console.log(this);
});
group.add(redCircle);
group.add(greenCircle);
layer.add(group);
stage.add(layer);
},
"DRAG AND DROP - draggable true": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - draggable true false": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
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 layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
stage.setScale(0.5);
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 layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
stage.setScale(0.5);
layer.add(circle);
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 layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
stage.setScale(1.5);
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 layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
stage.setScale(1.5);
layer.add(circle);
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 layer = new Kinetic.Layer();
var circle1 = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
var circle2 = new Kinetic.Circle({
x: stage.width / 2 + 50,
y: stage.height / 2,
radius: 70,
fill: "green",
stroke: "black",
strokeWidth: 4
});
circle1.draggable(true);
circle2.on("mouseover", function() {
log("mouseover green circle");
});
layer.add(circle1);
layer.add(circle2);
stage.add(layer);
}
};
}
}

2
tests/unitTests.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<link rel="stylesheet" type="text/css"href="base.css">
<script src="../dist/kinetic-v3.8.3.js"></script>
<script src="../dist/kinetic-core.js"></script>
<script src="unitTests.js"></script>
<script src="testMethods.js"></script>
<script>

18
tests/unitTests.js
View File

@@ -258,6 +258,23 @@ function Test() {
});
//stage.start();
},
"SHAPES - set fill after instantiation": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "green",
stroke: "black",
strokeWidth: 4
});
layer.add(circle);
circle.setFill("blue");
stage.add(layer);
},
"SHAPES - add image": function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
@@ -1184,7 +1201,6 @@ function Test() {
});
stage.start();
}
};
}