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

decided to split Circle and Ellipse shapes because it was causing too many issues related to the mixed data type of radius, which could be a number or object with x and y properties

Browse Source
This commit is contained in:
Eric Rowell
2012-08-25 23:56:39 -07:00
parent ddfcab2d55
commit 6eda6d2607
9 changed files with 342 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
tests/js/manualTests.js
View File

@@ -6,7 +6,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Ellipse({
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -373,7 +373,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: 380,
y: stage.getHeight() / 2,
radius: 70,
@@ -382,25 +382,25 @@ Test.prototype.tests = {
stroke: 'black'
});
Ellipse.setDraggable(true);
Circle.setDraggable(true);
Ellipse.on('dragstart', function() {
Circle.on('dragstart', function() {
log('dragstart');
});
Ellipse.on('dragmove', function() {
Circle.on('dragmove', function() {
log('dragmove');
});
Ellipse.on('dragend', function() {
Circle.on('dragend', function() {
log('dragend');
});
Ellipse.on('click', function() {
Circle.on('click', function() {
log('click');
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'EVENTS - move mouse from shape to another shape in same layer': function(containerId) {
@@ -411,7 +411,7 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: 200,
y: stage.getHeight() / 2,
radius: 70,
@@ -420,13 +420,13 @@ Test.prototype.tests = {
stroke: 'black'
});
redEllipse.on('mouseover', function() {
log('mouseover red Ellipse');
redCircle.on('mouseover', function() {
log('mouseover red Circle');
});
redEllipse.on('mouseout', function() {
log('mouseout red Ellipse');
redCircle.on('mouseout', function() {
log('mouseout red Circle');
});
var greenEllipse = new Kinetic.Ellipse({
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.getHeight() / 2,
radius: 70,
@@ -435,19 +435,19 @@ Test.prototype.tests = {
stroke: 'black'
});
greenEllipse.on('mouseover', function() {
log('mouseover green Ellipse');
greenCircle.on('mouseover', function() {
log('mouseover green Circle');
});
greenEllipse.on('mouseout', function() {
log('mouseout green Ellipse');
greenCircle.on('mouseout', function() {
log('mouseout green Circle');
});
layer.add(redEllipse);
layer.add(greenEllipse);
layer.add(redCircle);
layer.add(greenCircle);
stage.add(layer);
//greenEllipse.hide();
//greenCircle.hide();
layer.draw();
//document.body.appendChild(layer.bufferCanvas.element);
@@ -462,7 +462,7 @@ Test.prototype.tests = {
var redGroup = new Kinetic.Group();
var greenGroup = new Kinetic.Group();
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: 200,
y: stage.getHeight() / 2,
radius: 70,
@@ -471,13 +471,13 @@ Test.prototype.tests = {
stroke: 'black'
});
redEllipse.on('mouseover', function() {
log('mouseover red Ellipse');
redCircle.on('mouseover', function() {
log('mouseover red Circle');
});
redEllipse.on('mouseout', function() {
log('mouseout red Ellipse');
redCircle.on('mouseout', function() {
log('mouseout red Circle');
});
var greenEllipse = new Kinetic.Ellipse({
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.getHeight() / 2,
radius: 70,
@@ -486,15 +486,15 @@ Test.prototype.tests = {
stroke: 'black'
});
greenEllipse.on('mouseover', function() {
log('mouseover green Ellipse');
greenCircle.on('mouseover', function() {
log('mouseover green Circle');
});
greenEllipse.on('mouseout', function() {
log('mouseout green Ellipse');
greenCircle.on('mouseout', function() {
log('mouseout green Circle');
});
redGroup.add(redEllipse);
greenGroup.add(greenEllipse);
redGroup.add(redCircle);
greenGroup.add(greenCircle);
layer.add(redGroup);
layer.add(greenGroup);
@@ -510,7 +510,7 @@ Test.prototype.tests = {
var redLayer = new Kinetic.Layer();
var greenLayer = new Kinetic.Layer();
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: 200,
y: stage.getHeight() / 2,
radius: 70,
@@ -519,13 +519,13 @@ Test.prototype.tests = {
stroke: 'black'
});
redEllipse.on('mouseover', function() {
log('mouseover red Ellipse');
redCircle.on('mouseover', function() {
log('mouseover red Circle');
});
redEllipse.on('mouseout', function() {
log('mouseout red Ellipse');
redCircle.on('mouseout', function() {
log('mouseout red Circle');
});
var greenEllipse = new Kinetic.Ellipse({
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.getHeight() / 2,
radius: 70,
@@ -534,15 +534,15 @@ Test.prototype.tests = {
stroke: 'black'
});
greenEllipse.on('mouseover', function() {
log('mouseover green Ellipse');
greenCircle.on('mouseover', function() {
log('mouseover green Circle');
});
greenEllipse.on('mouseout', function() {
log('mouseout green Ellipse');
greenCircle.on('mouseout', function() {
log('mouseout green Circle');
});
redLayer.add(redEllipse);
greenLayer.add(greenEllipse);
redLayer.add(redCircle);
greenLayer.add(greenCircle);
stage.add(redLayer);
stage.add(greenLayer);
@@ -557,7 +557,7 @@ Test.prototype.tests = {
var redGroup = new Kinetic.Group();
var greenGroup = new Kinetic.Group();
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: 200,
y: stage.getHeight() / 2,
radius: 70,
@@ -566,10 +566,10 @@ Test.prototype.tests = {
stroke: 'black'
});
redEllipse.on('mousemove', function() {
log('mousemove red Ellipse');
redCircle.on('mousemove', function() {
log('mousemove red Circle');
});
var greenEllipse = new Kinetic.Ellipse({
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.getHeight() / 2,
radius: 70,
@@ -578,12 +578,12 @@ Test.prototype.tests = {
stroke: 'black'
});
greenEllipse.on('mousemove', function() {
log('mousemove green Ellipse');
greenCircle.on('mousemove', function() {
log('mousemove green Circle');
});
redGroup.add(redEllipse);
greenGroup.add(greenEllipse);
redGroup.add(redCircle);
greenGroup.add(greenCircle);
layer.add(redGroup);
layer.add(greenGroup);
@@ -603,7 +603,7 @@ Test.prototype.tests = {
log('mousemove group');
//console.log(this);
});
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 80,
@@ -612,7 +612,7 @@ Test.prototype.tests = {
stroke: 'black'
});
var greenEllipse = new Kinetic.Ellipse({
var greenCircle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 40,
@@ -621,13 +621,13 @@ Test.prototype.tests = {
stroke: 'black'
});
group.add(redEllipse);
group.add(greenEllipse);
group.add(redCircle);
group.add(greenCircle);
layer.add(group);
stage.add(layer);
},
'EVENTS - cancel event bubbling (only the red Ellipse should fire click event)': function(containerId) {
'EVENTS - cancel event bubbling (only the red Circle should fire click event)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -644,7 +644,7 @@ Test.prototype.tests = {
log('click group');
//console.log(this);
});
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 80,
@@ -653,12 +653,12 @@ Test.prototype.tests = {
stroke: 'black'
});
redEllipse.on('click', function(evt) {
log('click red Ellipse');
redCircle.on('click', function(evt) {
log('click red Circle');
evt.cancelBubble = true;
});
group.add(redEllipse);
group.add(redCircle);
layer.add(group);
stage.add(layer);
},
@@ -675,17 +675,17 @@ Test.prototype.tests = {
log(evt.shape.getName());
});
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 80,
strokeWidth: 4,
fill: 'red',
stroke: 'black',
name: 'Ellipse'
name: 'Circle'
});
group.add(redEllipse);
group.add(redCircle);
layer.add(group);
stage.add(layer);
},
@@ -697,21 +697,21 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: 550,
y: stage.getHeight() / 2,
radius: 80,
strokeWidth: 4,
fill: 'red',
stroke: 'black',
name: 'Ellipse'
name: 'Circle'
});
redEllipse.on('mouseout', function() {
redCircle.on('mouseout', function() {
log('mouseout');
});
layer.add(redEllipse);
layer.add(redCircle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
@@ -793,7 +793,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -802,9 +802,9 @@ Test.prototype.tests = {
strokeWidth: 4,
});
Ellipse.setDraggable(true);
Circle.setDraggable(true);
var Ellipse2 = new Kinetic.Ellipse({
var Circle2 = new Kinetic.Circle({
x: 350,
y: stage.getHeight() / 2,
radius: 70,
@@ -815,15 +815,15 @@ Test.prototype.tests = {
});
/*
Ellipse.on('dragend', function() {
Ellipse.savePixels();
Circle.on('dragend', function() {
Circle.savePixels();
});
*/
layer.add(Ellipse).add(Ellipse2);
layer.add(Circle).add(Circle2);
stage.add(layer);
//Ellipse.savePixels();
//Circle.savePixels();
},
'DRAG AND DROP - drag and drop stage': function(containerId) {
var stage = new Kinetic.Stage({
@@ -846,7 +846,7 @@ Test.prototype.tests = {
}
*/
});
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -876,7 +876,7 @@ Test.prototype.tests = {
});
*/
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - draggable true false': function(containerId) {
@@ -886,7 +886,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -895,12 +895,12 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse.setDraggable(true);
Circle.setDraggable(true);
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
Ellipse.setDraggable(false);
Circle.setDraggable(false);
},
'DRAG AND DROP - scale and rotate stage after add layer then drag and drop shape': function(containerId) {
var stage = new Kinetic.Stage({
@@ -941,7 +941,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -950,10 +950,10 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse.setDraggable(true);
Circle.setDraggable(true);
stage.setScale(0.5);
layer.add(Ellipse);
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) {
@@ -963,7 +963,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -972,9 +972,9 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse.setDraggable(true);
Circle.setDraggable(true);
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
stage.setScale(1.5);
@@ -988,7 +988,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -997,21 +997,21 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse.setDraggable(true);
Circle.setDraggable(true);
stage.setScale(1.5);
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - check that green events are ignored when dragging red Ellipse': function(containerId) {
'DRAG AND DROP - check that green events are ignored when dragging red Circle': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse1 = new Kinetic.Ellipse({
var Circle1 = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -1020,7 +1020,7 @@ Test.prototype.tests = {
strokeWidth: 4
});
var Ellipse2 = new Kinetic.Ellipse({
var Circle2 = new Kinetic.Circle({
x: stage.getWidth() / 2 + 50,
y: stage.getHeight() / 2,
radius: 70,
@@ -1029,14 +1029,14 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse1.setDraggable(true);
Circle1.setDraggable(true);
Ellipse2.on('mouseover', function() {
log('mouseover green Ellipse');
Circle2.on('mouseover', function() {
log('mouseover green Circle');
});
layer.add(Ellipse1);
layer.add(Ellipse2);
layer.add(Circle1);
layer.add(Circle2);
stage.add(layer);
},
'DRAG AND DROP - drag and drop constrianed horiztontally inside positioned group': function(containerId) {
@@ -1050,7 +1050,7 @@ Test.prototype.tests = {
x: 0,
y: 10
});
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -1061,7 +1061,7 @@ Test.prototype.tests = {
dragConstraint: 'horizontal'
});
group.add(Ellipse);
group.add(Circle);
layer.add(group);
stage.add(layer);
},
@@ -1072,7 +1072,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -1083,7 +1083,7 @@ Test.prototype.tests = {
dragConstraint: 'vertical'
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop with explicit no constraint': function(containerId) {
@@ -1093,7 +1093,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -1104,7 +1104,7 @@ Test.prototype.tests = {
dragConstraint: 'none'
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop with left bounds': function(containerId) {
@@ -1114,7 +1114,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -1127,7 +1127,7 @@ Test.prototype.tests = {
}
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop with right bounds': function(containerId) {
@@ -1137,7 +1137,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -1150,7 +1150,7 @@ Test.prototype.tests = {
}
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop with top bounds': function(containerId) {
@@ -1160,7 +1160,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -1173,7 +1173,7 @@ Test.prototype.tests = {
}
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop with bottom bounds': function(containerId) {
@@ -1183,7 +1183,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -1196,7 +1196,7 @@ Test.prototype.tests = {
}
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop with full rect bounds': function(containerId) {
@@ -1206,7 +1206,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -1222,7 +1222,7 @@ Test.prototype.tests = {
}
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop shape inside scrollable div': function(containerId) {
@@ -1237,7 +1237,7 @@ Test.prototype.tests = {
container.style.overflow = 'auto';
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: 100,
radius: 50,
@@ -1247,7 +1247,7 @@ Test.prototype.tests = {
draggable: true
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop shape inside scaled group': function(containerId) {
@@ -1264,7 +1264,7 @@ Test.prototype.tests = {
}
});
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: 40,
y: 40,
radius: 70,
@@ -1274,7 +1274,7 @@ Test.prototype.tests = {
draggable: true
});
group.add(Ellipse);
group.add(Circle);
layer.add(group);
stage.add(layer);
},
@@ -1446,7 +1446,7 @@ Test.prototype.tests = {
stage.draw();
},
'STAGE - save image as png (click on Ellipse to open new window)': function(containerId) {
'STAGE - save image as png (click on Circle to open new window)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -1454,7 +1454,7 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -1463,14 +1463,14 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse.on('click', function() {
Circle.on('click', function() {
window.open(layer.toDataURL());
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'STAGE - save image as low quality jpg (click on Ellipse to open new window)': function(containerId) {
'STAGE - save image as low quality jpg (click on Circle to open new window)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -1478,7 +1478,7 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -1487,14 +1487,14 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse.on('click', function() {
Circle.on('click', function() {
window.open(layer.toDataURL('image/jpeg', 0));
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'STAGE - save image as high quality jpg (click on Ellipse to open new window)': function(containerId) {
'STAGE - save image as high quality jpg (click on Circle to open new window)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -1502,7 +1502,7 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@@ -1511,11 +1511,11 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse.on('click', function() {
Circle.on('click', function() {
window.open(layer.toDataURL('image/jpeg', 1));
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
}
};