lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-27 16:56:38 +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;
that._animationLoop();
}
else
if(this.isAnimating && !this._isaCanvasAnimating()) {
else if(this.isAnimating && !this._isaCanvasAnimating()) {
this.isAnimating = false;
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);
}
}
/*
* simulate bubbling by handling node events
* first, followed by group events, followed
* by layer events
*/
handle(this);
}
};
@ -1151,8 +1146,7 @@ Kinetic.Stage.prototype = {
return true;
}
// handle onmouseup & onclick
else
if(this.mouseUp) {
else if(this.mouseUp) {
this.mouseUp = false;
shape._handleEvents('onmouseup', evt);
@ -1178,8 +1172,7 @@ Kinetic.Stage.prototype = {
}
// handle touchstart
else
if(this.touchStart) {
else if(this.touchStart) {
this.touchStart = false;
shape._handleEvents('touchstart', evt);
@ -1199,23 +1192,20 @@ Kinetic.Stage.prototype = {
}
// handle touchend
else
if(this.touchEnd) {
else if(this.touchEnd) {
this.touchEnd = false;
shape._handleEvents('touchend', evt);
return true;
}
// handle touchmove
else
if(!isDragging && el.touchmove) {
else if(!isDragging && el.touchmove) {
shape._handleEvents('touchmove', evt);
return true;
}
//this condition is used to identify a new target shape.
else
if(!isDragging && (!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id))) {
else if(!isDragging && (!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id))) {
/*
* check if old target has an onmouseout event listener
*/
@ -1236,15 +1226,13 @@ Kinetic.Stage.prototype = {
}
// handle onmousemove
else
if(!isDragging) {
else if(!isDragging) {
shape._handleEvents('onmousemove', evt);
return true;
}
}
// handle mouseout condition
else
if(!isDragging && this.targetShape && this.targetShape.id === shape.id) {
else if(!isDragging && this.targetShape && this.targetShape.id === shape.id) {
this.targetShape = undefined;
shape._handleEvents('onmouseout', evt);
return true;
@ -1268,7 +1256,7 @@ Kinetic.Stage.prototype = {
}
}
else {
this._traverseChildren(child);
this._traverseChildren(child, evt);
}
}
@ -1669,8 +1657,7 @@ Kinetic.Shape = function(config) {
if(config.stroke === undefined) {
config.stroke = 'black';
}
else
if(config.strokeWidth === undefined) {
else if(config.strokeWidth === undefined) {
config.strokeWidth = 2;
}
}
@ -2060,6 +2047,7 @@ Kinetic.Polygon.prototype = {
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape);
///////////////////////////////////////////////////////////////////////
// RegularPolygon
///////////////////////////////////////////////////////////////////////
@ -2133,6 +2121,7 @@ Kinetic.RegularPolygon.prototype = {
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape);
///////////////////////////////////////////////////////////////////////
// Star
///////////////////////////////////////////////////////////////////////
@ -2206,6 +2195,7 @@ Kinetic.Star.prototype = {
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Star, Kinetic.Shape);
///////////////////////////////////////////////////////////////////////
// Text
///////////////////////////////////////////////////////////////////////
@ -2223,8 +2213,7 @@ Kinetic.Text = function(config) {
if(config.textStroke === undefined) {
config.textStroke = 'black';
}
else
if(config.textStrokeWidth === undefined) {
else if(config.textStrokeWidth === undefined) {
config.textStrokeWidth = 2;
}
}
@ -2288,8 +2277,7 @@ Kinetic.Text = function(config) {
if(this.textStroke === undefined) {
this.textStroke = 'black';
}
else
if(this.textStrokeWidth === undefined) {
else if(this.textStrokeWidth === undefined) {
this.textStrokeWidth = 2;
}
context.lineWidth = this.textStrokeWidth;

3
src/GlobalObject.js
View File

@ -158,8 +158,7 @@ Kinetic.GlobalObject = {
this.isAnimating = true;
that._animationLoop();
}
else
if(this.isAnimating && !this._isaCanvasAnimating()) {
else if(this.isAnimating && !this._isaCanvasAnimating()) {
this.isAnimating = false;
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);
}
}
/*
* simulate bubbling by handling node events
* first, followed by group events, followed
* by layer events
*/
handle(this);
}
};

3
src/Shape.js
View File

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

23
src/Stage.js
View File

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

2
src/shapes/Polygon.js
View File

@ -41,4 +41,4 @@ Kinetic.Polygon.prototype = {
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape);
Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape);

2
src/shapes/RegularPolygon.js
View File

@ -70,4 +70,4 @@ Kinetic.RegularPolygon.prototype = {
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape);
Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape);

2
src/shapes/Star.js
View File

@ -70,4 +70,4 @@ Kinetic.Star.prototype = {
}
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Star, Kinetic.Shape);
Kinetic.GlobalObject.extend(Kinetic.Star, Kinetic.Shape);

6
src/shapes/Text.js
View File

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

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