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

added support for event bubble cancelation

Browse Source
This commit is contained in:
Eric Rowell
2012-03-17 14:35:34 -07:00
parent a9601fadc2
commit fafb5db93f
11 changed files with 460 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
tests/js/functionalTests.js
View File

@@ -1,5 +1,5 @@
Test.prototype.tests = {
"TRANSITION - transition position and rotation": function(containerId) {
'TRANSITION - transition position and rotation': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
@@ -7,8 +7,8 @@ Test.prototype.tests = {
y: 100,
width: 100,
height: 50,
fill: "green",
stroke: "black",
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
@@ -22,7 +22,7 @@ Test.prototype.tests = {
duration: 1
});
},
"TRANSITION - transition position and rotation with two transitions": function(containerId) {
'TRANSITION - transition position and rotation with two transitions': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
@@ -30,8 +30,8 @@ Test.prototype.tests = {
y: 100,
width: 100,
height: 50,
fill: "green",
stroke: "black",
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
@@ -49,7 +49,7 @@ Test.prototype.tests = {
duration: 2
});
},
"ANIMATION - run animation": function(containerId) {
'ANIMATION - run animation': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
@@ -57,8 +57,8 @@ Test.prototype.tests = {
y: 100,
width: 100,
height: 50,
fill: "green",
stroke: "black",
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
@@ -77,15 +77,15 @@ Test.prototype.tests = {
stage.start();
},
"EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap": 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({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
@@ -129,7 +129,7 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
},
"EVENTS - modify fill stroke and stroke width on hover with circle": 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({
@@ -137,20 +137,20 @@ Test.prototype.tests = {
y: stage.height / 2,
radius: 70,
strokeWidth: 4,
fill: "red",
stroke: "black"
fill: 'red',
stroke: 'black'
});
circle.on("mouseover", function() {
this.setFill("yellow");
this.setStroke("purple");
circle.on('mouseover', function() {
this.setFill('yellow');
this.setStroke('purple');
this.setStrokeWidth(20);
layer.draw();
});
circle.on("mouseout", function() {
this.setFill("red");
this.setStroke("black");
circle.on('mouseout', function() {
this.setFill('red');
this.setStroke('black');
this.setStrokeWidth(4);
layer.draw();
});
@@ -158,7 +158,7 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
},
"EVENTS - modify fill stroke and stroke width on hover with circle with star": 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();
@@ -168,22 +168,22 @@ Test.prototype.tests = {
points: 10,
innerRadius: 40,
outerRadius: 70,
fill: "green",
stroke: "blue",
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: "foobar"
name: 'foobar'
});
star.on("mouseover", function() {
this.setFill("yellow");
this.setStroke("purple");
star.on('mouseover', function() {
this.setFill('yellow');
this.setStroke('purple');
this.setStrokeWidth(20);
layer.draw();
});
star.on("mouseout", function() {
this.setFill("green");
this.setStroke("blue");
star.on('mouseout', function() {
this.setFill('green');
this.setStroke('blue');
this.setStrokeWidth(5);
layer.draw();
});
@@ -191,7 +191,7 @@ Test.prototype.tests = {
layer.add(star);
stage.add(layer);
},
"EVENTS - modify fill stroke and stroke width on hover with circle with image": function(containerId) {
'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);
@@ -202,14 +202,14 @@ Test.prototype.tests = {
image: imageObj
});
darth.on("mouseover", function() {
this.setFill("yellow");
this.setStroke("purple");
darth.on('mouseover', function() {
this.setFill('yellow');
this.setStroke('purple');
this.setStrokeWidth(20);
layer.draw();
});
darth.on("mouseout", function() {
darth.on('mouseout', function() {
this.setFill(undefined);
this.setStroke(undefined);
this.setStrokeWidth(0);
@@ -219,9 +219,9 @@ Test.prototype.tests = {
layer.add(darth);
stage.add(layer);
};
imageObj.src = "../darth-vader.jpg";
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({
@@ -229,8 +229,8 @@ Test.prototype.tests = {
y: stage.height / 2,
radius: 70,
strokeWidth: 4,
fill: "red",
stroke: "black"
fill: 'red',
stroke: 'black'
});
circle.draggable(true);
@@ -254,7 +254,7 @@ Test.prototype.tests = {
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({
@@ -262,37 +262,37 @@ Test.prototype.tests = {
y: stage.height / 2,
radius: 70,
strokeWidth: 4,
fill: "red",
stroke: "black"
fill: 'red',
stroke: 'black'
});
//log('not dragging yet before draggable, isDragging: ' + circle.isDragging());
test(circle.isDragging() === false, "isDragging() should be false");
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");
test(circle.isDragging() === false, 'isDragging() should be false');
circle.on('dragstart', function() {
log('dragstart, isDragging: ' + this.isDragging());
test(circle.isDragging() === true, "isDragging() should be true");
test(circle.isDragging() === true, 'isDragging() should be true');
});
circle.on('dragmove', function() {
log('dragmove, isDragging: ' + this.isDragging());
test(circle.isDragging() === true, "isDragging() should be true");
test(circle.isDragging() === true, 'isDragging() should be true');
});
circle.on('dragend', function() {
log('dragend, isDragging: ' + this.isDragging());
test(circle.isDragging() === false, "isDragging() should be false");
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();
@@ -301,14 +301,14 @@ Test.prototype.tests = {
y: stage.height / 2,
radius: 70,
strokeWidth: 4,
fill: "red",
stroke: "black"
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({
@@ -316,14 +316,14 @@ Test.prototype.tests = {
y: stage.height / 2,
radius: 70,
strokeWidth: 4,
fill: "green",
stroke: "black"
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');
});
@@ -332,7 +332,7 @@ Test.prototype.tests = {
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();
@@ -342,14 +342,14 @@ Test.prototype.tests = {
y: stage.height / 2,
radius: 70,
strokeWidth: 4,
fill: "red",
stroke: "black"
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({
@@ -357,14 +357,14 @@ Test.prototype.tests = {
y: stage.height / 2,
radius: 70,
strokeWidth: 4,
fill: "green",
stroke: "black"
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');
});
@@ -374,25 +374,25 @@ Test.prototype.tests = {
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);
});
@@ -401,15 +401,15 @@ Test.prototype.tests = {
y: stage.height / 2,
radius: 80,
strokeWidth: 4,
fill: "red",
stroke: "black"
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);
});
@@ -418,15 +418,15 @@ Test.prototype.tests = {
y: stage.height / 2,
radius: 40,
strokeWidth: 4,
fill: "green",
stroke: "black"
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);
});
@@ -437,15 +437,47 @@ Test.prototype.tests = {
layer.add(group);
stage.add(layer);
},
"DRAG AND DROP - draggable true": function(containerId) {
'EVENTS - cancel event bubbling (only the red circle should fire click event)': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
layer.on('click', function() {
log('click layer');
//console.log(this);
});
group.on('click', function() {
log('click group');
//console.log(this);
});
var redCircle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 80,
strokeWidth: 4,
fill: 'red',
stroke: 'black'
});
redCircle.on('click', function(evt) {
log('click red circle');
evt.cancelBubble = true;
});
group.add(redCircle);
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",
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
@@ -454,15 +486,15 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - draggable true false": function(containerId) {
'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",
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
@@ -473,15 +505,15 @@ Test.prototype.tests = {
circle.draggable(false);
},
"DRAG AND DROP - scale stage after add layer then drag and drop shape": function(containerId) {
'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",
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
@@ -494,15 +526,15 @@ Test.prototype.tests = {
stage.draw();
},
"DRAG AND DROP - scale stage before add shape then drag and drop shape": function(containerId) {
'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",
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
@@ -512,15 +544,15 @@ Test.prototype.tests = {
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) {
'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",
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
@@ -533,15 +565,15 @@ Test.prototype.tests = {
stage.draw();
},
"DRAG AND DROP - set stage scale to 1.5 before add layer then drag and drop shape": function(containerId) {
'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",
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
@@ -552,15 +584,15 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - check that green events are ignored when dragging red circle": function(containerId) {
'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",
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
@@ -568,81 +600,81 @@ Test.prototype.tests = {
x: stage.width / 2 + 50,
y: stage.height / 2,
radius: 70,
fill: "green",
stroke: "black",
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
circle1.draggable(true);
circle2.on("mouseover", function() {
log("mouseover green circle");
circle2.on('mouseover', function() {
log('mouseover green circle');
});
layer.add(circle1);
layer.add(circle2);
stage.add(layer);
},
"DRAG AND DROP - drag and drop constrianed horiztonally": function(containerId) {
'DRAG AND DROP - drag and drop constrianed horiztonally': 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",
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
dragConstraint: "horizontal"
dragConstraint: 'horizontal'
});
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop constrianed vertically": function(containerId) {
'DRAG AND DROP - drag and drop constrianed vertically': 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",
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
dragConstraint: "vertical"
dragConstraint: 'vertical'
});
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop with explicit no constraint": function(containerId) {
'DRAG AND DROP - drag and drop with explicit no constraint': 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",
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
dragConstraint: "none"
dragConstraint: 'none'
});
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop with left bounds": function(containerId) {
'DRAG AND DROP - drag and drop with left bounds': 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",
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
dragBounds: {
@@ -653,15 +685,15 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop with right bounds": function(containerId) {
'DRAG AND DROP - drag and drop with right bounds': 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",
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
dragBounds: {
@@ -672,15 +704,15 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop with top bounds": function(containerId) {
'DRAG AND DROP - drag and drop with top bounds': 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",
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
dragBounds: {
@@ -691,15 +723,15 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop with bottom bounds": function(containerId) {
'DRAG AND DROP - drag and drop with bottom bounds': 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",
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
dragBounds: {
@@ -710,15 +742,15 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop with full rect bounds": function(containerId) {
'DRAG AND DROP - drag and drop with full rect bounds': 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",
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
dragBounds: {
@@ -732,20 +764,20 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop shape inside scrollable div": function(containerId) {
'DRAG AND DROP - drag and drop shape inside scrollable div': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 400);
// make container scrollable
var container = stage.getContainer();
container.style.overflow = "auto";
container.style.overflow = 'auto';
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: 100,
radius: 50,
fill: "blue",
stroke: "black",
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
draggable: true
});

518
tests/js/unitTests.js
View File

File diff suppressed because it is too large Load Diff