lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 00:36:20 +08:00
Code Issues Actions 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
dist/kinetic-core.js vendored
View File

@ -186,8 +186,7 @@ Kinetic.GlobalObject = {
this.isAnimating = true; this.isAnimating = true;
that._animationLoop(); that._animationLoop();
} }
else else if(this.isAnimating && !this._isaCanvasAnimating()) {
if(this.isAnimating && !this._isaCanvasAnimating()) {
this.isAnimating = false; this.isAnimating = false;
this.frame.lastTime = 0; this.frame.lastTime = 0;
} }
@ -744,15 +743,11 @@ Kinetic.Node.prototype = {
} }
} }
if(obj.parent.className !== 'Stage') { // simulate event bubbling
if(!evt.cancelBubble && obj.parent.className !== 'Stage') {
handle(obj.parent); handle(obj.parent);
} }
} }
/*
* simulate bubbling by handling node events
* first, followed by group events, followed
* by layer events
*/
handle(this); handle(this);
} }
}; };
@ -1151,8 +1146,7 @@ Kinetic.Stage.prototype = {
return true; return true;
} }
// handle onmouseup & onclick // handle onmouseup & onclick
else else if(this.mouseUp) {
if(this.mouseUp) {
this.mouseUp = false; this.mouseUp = false;
shape._handleEvents('onmouseup', evt); shape._handleEvents('onmouseup', evt);
@ -1178,8 +1172,7 @@ Kinetic.Stage.prototype = {
} }
// handle touchstart // handle touchstart
else else if(this.touchStart) {
if(this.touchStart) {
this.touchStart = false; this.touchStart = false;
shape._handleEvents('touchstart', evt); shape._handleEvents('touchstart', evt);
@ -1199,23 +1192,20 @@ Kinetic.Stage.prototype = {
} }
// handle touchend // handle touchend
else else if(this.touchEnd) {
if(this.touchEnd) {
this.touchEnd = false; this.touchEnd = false;
shape._handleEvents('touchend', evt); shape._handleEvents('touchend', evt);
return true; return true;
} }
// handle touchmove // handle touchmove
else else if(!isDragging && el.touchmove) {
if(!isDragging && el.touchmove) {
shape._handleEvents('touchmove', evt); shape._handleEvents('touchmove', evt);
return true; return true;
} }
//this condition is used to identify a new target shape. //this condition is used to identify a new target shape.
else else if(!isDragging && (!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id))) {
if(!isDragging && (!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id))) {
/* /*
* check if old target has an onmouseout event listener * check if old target has an onmouseout event listener
*/ */
@ -1236,15 +1226,13 @@ Kinetic.Stage.prototype = {
} }
// handle onmousemove // handle onmousemove
else else if(!isDragging) {
if(!isDragging) {
shape._handleEvents('onmousemove', evt); shape._handleEvents('onmousemove', evt);
return true; return true;
} }
} }
// handle mouseout condition // handle mouseout condition
else else if(!isDragging && this.targetShape && this.targetShape.id === shape.id) {
if(!isDragging && this.targetShape && this.targetShape.id === shape.id) {
this.targetShape = undefined; this.targetShape = undefined;
shape._handleEvents('onmouseout', evt); shape._handleEvents('onmouseout', evt);
return true; return true;
@ -1268,7 +1256,7 @@ Kinetic.Stage.prototype = {
} }
} }
else { else {
this._traverseChildren(child); this._traverseChildren(child, evt);
} }
} }
@ -1669,8 +1657,7 @@ Kinetic.Shape = function(config) {
if(config.stroke === undefined) { if(config.stroke === undefined) {
config.stroke = 'black'; config.stroke = 'black';
} }
else else if(config.strokeWidth === undefined) {
if(config.strokeWidth === undefined) {
config.strokeWidth = 2; config.strokeWidth = 2;
} }
} }
@ -2060,6 +2047,7 @@ Kinetic.Polygon.prototype = {
// extend Shape // extend Shape
Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape); Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape);
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
// RegularPolygon // RegularPolygon
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
@ -2133,6 +2121,7 @@ Kinetic.RegularPolygon.prototype = {
// extend Shape // extend Shape
Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape); Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape);
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
// Star // Star
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
@ -2206,6 +2195,7 @@ Kinetic.Star.prototype = {
}; };
// extend Shape // extend Shape
Kinetic.GlobalObject.extend(Kinetic.Star, Kinetic.Shape); Kinetic.GlobalObject.extend(Kinetic.Star, Kinetic.Shape);
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
// Text // Text
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
@ -2223,8 +2213,7 @@ Kinetic.Text = function(config) {
if(config.textStroke === undefined) { if(config.textStroke === undefined) {
config.textStroke = 'black'; config.textStroke = 'black';
} }
else else if(config.textStrokeWidth === undefined) {
if(config.textStrokeWidth === undefined) {
config.textStrokeWidth = 2; config.textStrokeWidth = 2;
} }
} }
@ -2288,8 +2277,7 @@ Kinetic.Text = function(config) {
if(this.textStroke === undefined) { if(this.textStroke === undefined) {
this.textStroke = 'black'; this.textStroke = 'black';
} }
else else if(this.textStrokeWidth === undefined) {
if(this.textStrokeWidth === undefined) {
this.textStrokeWidth = 2; this.textStrokeWidth = 2;
} }
context.lineWidth = this.textStrokeWidth; context.lineWidth = this.textStrokeWidth;

3
src/GlobalObject.js
View File

@ -158,8 +158,7 @@ Kinetic.GlobalObject = {
this.isAnimating = true; this.isAnimating = true;
that._animationLoop(); that._animationLoop();
} }
else else if(this.isAnimating && !this._isaCanvasAnimating()) {
if(this.isAnimating && !this._isaCanvasAnimating()) {
this.isAnimating = false; this.isAnimating = false;
this.frame.lastTime = 0; this.frame.lastTime = 0;
} }

8
src/Node.js
View File

@ -541,15 +541,11 @@ Kinetic.Node.prototype = {
} }
} }
if(obj.parent.className !== 'Stage') { // simulate event bubbling
if(!evt.cancelBubble && obj.parent.className !== 'Stage') {
handle(obj.parent); handle(obj.parent);
} }
} }
/*
* simulate bubbling by handling node events
* first, followed by group events, followed
* by layer events
*/
handle(this); handle(this);
} }
}; };

3
src/Shape.js
View File

@ -16,8 +16,7 @@ Kinetic.Shape = function(config) {
if(config.stroke === undefined) { if(config.stroke === undefined) {
config.stroke = 'black'; config.stroke = 'black';
} }
else else if(config.strokeWidth === undefined) {
if(config.strokeWidth === undefined) {
config.strokeWidth = 2; config.strokeWidth = 2;
} }
} }

23
src/Stage.js
View File

@ -285,8 +285,7 @@ Kinetic.Stage.prototype = {
return true; return true;
} }
// handle onmouseup & onclick // handle onmouseup & onclick
else else if(this.mouseUp) {
if(this.mouseUp) {
this.mouseUp = false; this.mouseUp = false;
shape._handleEvents('onmouseup', evt); shape._handleEvents('onmouseup', evt);
@ -312,8 +311,7 @@ Kinetic.Stage.prototype = {
} }
// handle touchstart // handle touchstart
else else if(this.touchStart) {
if(this.touchStart) {
this.touchStart = false; this.touchStart = false;
shape._handleEvents('touchstart', evt); shape._handleEvents('touchstart', evt);
@ -333,23 +331,20 @@ Kinetic.Stage.prototype = {
} }
// handle touchend // handle touchend
else else if(this.touchEnd) {
if(this.touchEnd) {
this.touchEnd = false; this.touchEnd = false;
shape._handleEvents('touchend', evt); shape._handleEvents('touchend', evt);
return true; return true;
} }
// handle touchmove // handle touchmove
else else if(!isDragging && el.touchmove) {
if(!isDragging && el.touchmove) {
shape._handleEvents('touchmove', evt); shape._handleEvents('touchmove', evt);
return true; return true;
} }
//this condition is used to identify a new target shape. //this condition is used to identify a new target shape.
else else if(!isDragging && (!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id))) {
if(!isDragging && (!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id))) {
/* /*
* check if old target has an onmouseout event listener * check if old target has an onmouseout event listener
*/ */
@ -370,15 +365,13 @@ Kinetic.Stage.prototype = {
} }
// handle onmousemove // handle onmousemove
else else if(!isDragging) {
if(!isDragging) {
shape._handleEvents('onmousemove', evt); shape._handleEvents('onmousemove', evt);
return true; return true;
} }
} }
// handle mouseout condition // handle mouseout condition
else else if(!isDragging && this.targetShape && this.targetShape.id === shape.id) {
if(!isDragging && this.targetShape && this.targetShape.id === shape.id) {
this.targetShape = undefined; this.targetShape = undefined;
shape._handleEvents('onmouseout', evt); shape._handleEvents('onmouseout', evt);
return true; return true;
@ -402,7 +395,7 @@ Kinetic.Stage.prototype = {
} }
} }
else { else {
this._traverseChildren(child); this._traverseChildren(child, evt);
} }
} }

6
src/shapes/Text.js
View File

@ -15,8 +15,7 @@ Kinetic.Text = function(config) {
if(config.textStroke === undefined) { if(config.textStroke === undefined) {
config.textStroke = 'black'; config.textStroke = 'black';
} }
else else if(config.textStrokeWidth === undefined) {
if(config.textStrokeWidth === undefined) {
config.textStrokeWidth = 2; config.textStrokeWidth = 2;
} }
} }
@ -80,8 +79,7 @@ Kinetic.Text = function(config) {
if(this.textStroke === undefined) { if(this.textStroke === undefined) {
this.textStroke = 'black'; this.textStroke = 'black';
} }
else else if(this.textStrokeWidth === undefined) {
if(this.textStrokeWidth === undefined) {
this.textStrokeWidth = 2; this.textStrokeWidth = 2;
} }
context.lineWidth = this.textStrokeWidth; context.lineWidth = this.textStrokeWidth;

302
tests/js/functionalTests.js
View File

@ -1,5 +1,5 @@
Test.prototype.tests = { 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({ var rect = new Kinetic.Rect({
@ -7,8 +7,8 @@ Test.prototype.tests = {
y: 100, y: 100,
width: 100, width: 100,
height: 50, height: 50,
fill: "green", fill: 'green',
stroke: "black", stroke: 'black',
strokeWidth: 4 strokeWidth: 4
}); });
@ -22,7 +22,7 @@ Test.prototype.tests = {
duration: 1 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({ var rect = new Kinetic.Rect({
@ -30,8 +30,8 @@ Test.prototype.tests = {
y: 100, y: 100,
width: 100, width: 100,
height: 50, height: 50,
fill: "green", fill: 'green',
stroke: "black", stroke: 'black',
strokeWidth: 4 strokeWidth: 4
}); });
@ -49,7 +49,7 @@ Test.prototype.tests = {
duration: 2 duration: 2
}); });
}, },
"ANIMATION - run animation": function(containerId) { 'ANIMATION - run animation': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200); var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({ var rect = new Kinetic.Rect({
@ -57,8 +57,8 @@ Test.prototype.tests = {
y: 100, y: 100,
width: 100, width: 100,
height: 50, height: 50,
fill: "green", fill: 'green',
stroke: "black", stroke: 'black',
strokeWidth: 4 strokeWidth: 4
}); });
@ -77,15 +77,15 @@ Test.prototype.tests = {
stage.start(); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
draggable: true draggable: true
}); });
@ -129,7 +129,7 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
@ -137,20 +137,20 @@ Test.prototype.tests = {
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
strokeWidth: 4, strokeWidth: 4,
fill: "red", fill: 'red',
stroke: "black" stroke: 'black'
}); });
circle.on("mouseover", function() { circle.on('mouseover', function() {
this.setFill("yellow"); this.setFill('yellow');
this.setStroke("purple"); this.setStroke('purple');
this.setStrokeWidth(20); this.setStrokeWidth(20);
layer.draw(); layer.draw();
}); });
circle.on("mouseout", function() { circle.on('mouseout', function() {
this.setFill("red"); this.setFill('red');
this.setStroke("black"); this.setStroke('black');
this.setStrokeWidth(4); this.setStrokeWidth(4);
layer.draw(); layer.draw();
}); });
@ -158,7 +158,7 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
@ -168,22 +168,22 @@ Test.prototype.tests = {
points: 10, points: 10,
innerRadius: 40, innerRadius: 40,
outerRadius: 70, outerRadius: 70,
fill: "green", fill: 'green',
stroke: "blue", stroke: 'blue',
strokeWidth: 5, strokeWidth: 5,
name: "foobar" name: 'foobar'
}); });
star.on("mouseover", function() { star.on('mouseover', function() {
this.setFill("yellow"); this.setFill('yellow');
this.setStroke("purple"); this.setStroke('purple');
this.setStrokeWidth(20); this.setStrokeWidth(20);
layer.draw(); layer.draw();
}); });
star.on("mouseout", function() { star.on('mouseout', function() {
this.setFill("green"); this.setFill('green');
this.setStroke("blue"); this.setStroke('blue');
this.setStrokeWidth(5); this.setStrokeWidth(5);
layer.draw(); layer.draw();
}); });
@ -191,7 +191,7 @@ Test.prototype.tests = {
layer.add(star); layer.add(star);
stage.add(layer); 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(); var imageObj = new Image();
imageObj.onload = function() { imageObj.onload = function() {
var stage = new Kinetic.Stage(containerId, 578, 200); var stage = new Kinetic.Stage(containerId, 578, 200);
@ -202,14 +202,14 @@ Test.prototype.tests = {
image: imageObj image: imageObj
}); });
darth.on("mouseover", function() { darth.on('mouseover', function() {
this.setFill("yellow"); this.setFill('yellow');
this.setStroke("purple"); this.setStroke('purple');
this.setStrokeWidth(20); this.setStrokeWidth(20);
layer.draw(); layer.draw();
}); });
darth.on("mouseout", function() { darth.on('mouseout', function() {
this.setFill(undefined); this.setFill(undefined);
this.setStroke(undefined); this.setStroke(undefined);
this.setStrokeWidth(0); this.setStrokeWidth(0);
@ -219,9 +219,9 @@ Test.prototype.tests = {
layer.add(darth); layer.add(darth);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
@ -229,8 +229,8 @@ Test.prototype.tests = {
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
strokeWidth: 4, strokeWidth: 4,
fill: "red", fill: 'red',
stroke: "black" stroke: 'black'
}); });
circle.draggable(true); circle.draggable(true);
@ -254,7 +254,7 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
}, },
"EVENTS - isDragging": function(containerId) { 'EVENTS - isDragging': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200); var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
@ -262,37 +262,37 @@ Test.prototype.tests = {
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
strokeWidth: 4, strokeWidth: 4,
fill: "red", fill: 'red',
stroke: "black" stroke: 'black'
}); });
//log('not dragging yet before draggable, isDragging: ' + circle.isDragging()); //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); circle.draggable(true);
//log('not dragging yet after draggable, isDragging: ' + circle.isDragging()); //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() { circle.on('dragstart', function() {
log('dragstart, isDragging: ' + this.isDragging()); 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() { circle.on('dragmove', function() {
log('dragmove, isDragging: ' + this.isDragging()); 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() { circle.on('dragend', function() {
log('dragend, isDragging: ' + this.isDragging()); log('dragend, isDragging: ' + this.isDragging());
test(circle.isDragging() === false, "isDragging() should be false"); test(circle.isDragging() === false, 'isDragging() should be false');
}); });
layer.add(circle); layer.add(circle);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
@ -301,14 +301,14 @@ Test.prototype.tests = {
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
strokeWidth: 4, strokeWidth: 4,
fill: "red", fill: 'red',
stroke: "black" stroke: 'black'
}); });
redCircle.on("mouseover", function() { redCircle.on('mouseover', function() {
log('mouseover red circle'); log('mouseover red circle');
}); });
redCircle.on("mouseout", function() { redCircle.on('mouseout', function() {
log('mouseout red circle'); log('mouseout red circle');
}); });
var greenCircle = new Kinetic.Circle({ var greenCircle = new Kinetic.Circle({
@ -316,14 +316,14 @@ Test.prototype.tests = {
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
strokeWidth: 4, strokeWidth: 4,
fill: "green", fill: 'green',
stroke: "black" stroke: 'black'
}); });
greenCircle.on("mouseover", function() { greenCircle.on('mouseover', function() {
log('mouseover green circle'); log('mouseover green circle');
}); });
greenCircle.on("mouseout", function() { greenCircle.on('mouseout', function() {
log('mouseout green circle'); log('mouseout green circle');
}); });
@ -332,7 +332,7 @@ Test.prototype.tests = {
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var redLayer = new Kinetic.Layer(); var redLayer = new Kinetic.Layer();
var greenLayer = new Kinetic.Layer(); var greenLayer = new Kinetic.Layer();
@ -342,14 +342,14 @@ Test.prototype.tests = {
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
strokeWidth: 4, strokeWidth: 4,
fill: "red", fill: 'red',
stroke: "black" stroke: 'black'
}); });
redCircle.on("mouseover", function() { redCircle.on('mouseover', function() {
log('mouseover red circle'); log('mouseover red circle');
}); });
redCircle.on("mouseout", function() { redCircle.on('mouseout', function() {
log('mouseout red circle'); log('mouseout red circle');
}); });
var greenCircle = new Kinetic.Circle({ var greenCircle = new Kinetic.Circle({
@ -357,14 +357,14 @@ Test.prototype.tests = {
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
strokeWidth: 4, strokeWidth: 4,
fill: "green", fill: 'green',
stroke: "black" stroke: 'black'
}); });
greenCircle.on("mouseover", function() { greenCircle.on('mouseover', function() {
log('mouseover green circle'); log('mouseover green circle');
}); });
greenCircle.on("mouseout", function() { greenCircle.on('mouseout', function() {
log('mouseout green circle'); log('mouseout green circle');
}); });
@ -374,25 +374,25 @@ Test.prototype.tests = {
stage.add(redLayer); stage.add(redLayer);
stage.add(greenLayer); stage.add(greenLayer);
}, },
"EVENTS - event bubbling": function(containerId) { 'EVENTS - event bubbling': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200); var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var group = new Kinetic.Group(); var group = new Kinetic.Group();
layer.on("mouseover", function() { layer.on('mouseover', function() {
log('mouseover layer'); log('mouseover layer');
//console.log(this); //console.log(this);
}); });
layer.on("mouseout", function() { layer.on('mouseout', function() {
log('mouseout layer'); log('mouseout layer');
//console.log(this); //console.log(this);
}); });
group.on("mouseover", function() { group.on('mouseover', function() {
log('mouseover group'); log('mouseover group');
//console.log(this); //console.log(this);
}); });
group.on("mouseout", function() { group.on('mouseout', function() {
log('mouseout group'); log('mouseout group');
//console.log(this); //console.log(this);
}); });
@ -401,15 +401,15 @@ Test.prototype.tests = {
y: stage.height / 2, y: stage.height / 2,
radius: 80, radius: 80,
strokeWidth: 4, strokeWidth: 4,
fill: "red", fill: 'red',
stroke: "black" stroke: 'black'
}); });
redCircle.on("mouseover", function() { redCircle.on('mouseover', function() {
log('mouseover red circle'); log('mouseover red circle');
//console.log(this); //console.log(this);
}); });
redCircle.on("mouseout", function() { redCircle.on('mouseout', function() {
log('mouseout red circle'); log('mouseout red circle');
//console.log(this); //console.log(this);
}); });
@ -418,15 +418,15 @@ Test.prototype.tests = {
y: stage.height / 2, y: stage.height / 2,
radius: 40, radius: 40,
strokeWidth: 4, strokeWidth: 4,
fill: "green", fill: 'green',
stroke: "black" stroke: 'black'
}); });
greenCircle.on("mouseover", function() { greenCircle.on('mouseover', function() {
log('mouseover green circle'); log('mouseover green circle');
//console.log(this); //console.log(this);
}); });
greenCircle.on("mouseout", function() { greenCircle.on('mouseout', function() {
log('mouseout green circle'); log('mouseout green circle');
//console.log(this); //console.log(this);
}); });
@ -437,15 +437,47 @@ Test.prototype.tests = {
layer.add(group); layer.add(group);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4 strokeWidth: 4
}); });
@ -454,15 +486,15 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4 strokeWidth: 4
}); });
@ -473,15 +505,15 @@ Test.prototype.tests = {
circle.draggable(false); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4 strokeWidth: 4
}); });
@ -494,15 +526,15 @@ Test.prototype.tests = {
stage.draw(); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4 strokeWidth: 4
}); });
@ -512,15 +544,15 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4 strokeWidth: 4
}); });
@ -533,15 +565,15 @@ Test.prototype.tests = {
stage.draw(); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4 strokeWidth: 4
}); });
@ -552,15 +584,15 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle1 = new Kinetic.Circle({ var circle1 = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4 strokeWidth: 4
}); });
@ -568,81 +600,81 @@ Test.prototype.tests = {
x: stage.width / 2 + 50, x: stage.width / 2 + 50,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "green", fill: 'green',
stroke: "black", stroke: 'black',
strokeWidth: 4 strokeWidth: 4
}); });
circle1.draggable(true); circle1.draggable(true);
circle2.on("mouseover", function() { circle2.on('mouseover', function() {
log("mouseover green circle"); log('mouseover green circle');
}); });
layer.add(circle1); layer.add(circle1);
layer.add(circle2); layer.add(circle2);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
draggable: true, draggable: true,
dragConstraint: "horizontal" dragConstraint: 'horizontal'
}); });
layer.add(circle); layer.add(circle);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
draggable: true, draggable: true,
dragConstraint: "vertical" dragConstraint: 'vertical'
}); });
layer.add(circle); layer.add(circle);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
draggable: true, draggable: true,
dragConstraint: "none" dragConstraint: 'none'
}); });
layer.add(circle); layer.add(circle);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
draggable: true, draggable: true,
dragBounds: { dragBounds: {
@ -653,15 +685,15 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
draggable: true, draggable: true,
dragBounds: { dragBounds: {
@ -672,15 +704,15 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
draggable: true, draggable: true,
dragBounds: { dragBounds: {
@ -691,15 +723,15 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
draggable: true, draggable: true,
dragBounds: { dragBounds: {
@ -710,15 +742,15 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); 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 stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: stage.height / 2, y: stage.height / 2,
radius: 70, radius: 70,
fill: "red", fill: 'red',
stroke: "black", stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
draggable: true, draggable: true,
dragBounds: { dragBounds: {
@ -732,20 +764,20 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); 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); var stage = new Kinetic.Stage(containerId, 578, 400);
// make container scrollable // make container scrollable
var container = stage.getContainer(); var container = stage.getContainer();
container.style.overflow = "auto"; container.style.overflow = 'auto';
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.width / 2,
y: 100, y: 100,
radius: 50, radius: 50,
fill: "blue", fill: 'blue',
stroke: "black", stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
draggable: true draggable: true
}); });

518
tests/js/unitTests.js
View File

File diff suppressed because it is too large Load Diff