ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

making drawing handler work on touch devices. p=sbrunner, r=me (closes #3072)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11563 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2011-02-27 15:00:38 +00:00
parent ba8aed56ef
commit 33eef42075
7 changed files with 535 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Control/Measure.html
+34 -26
View File
@@ -96,6 +96,10 @@
measure: function(evt){
log.push(evt);
}
},
handlerOptions: {
pixelTolerance: 0,
dblclickTolerance: 0
}
}
);
@@ -131,8 +135,8 @@
// wait for delay then confirm event was logged
delay, function() {
t.eq(log.length, 1, "a) event logged")
t.ok(log[0] && log[0].type == "measurepartial", "a) event logged");
t.ok(log[0] && log[0].measure == 10, "a) correct measure");
t.eq(log[0] && log[0].type, "measurepartial", "a) event logged");
t.eq(log[0] && log[0].measure, 10, "a) correct measure");
// b) move 10 pixels and click
trigger("mousemove", 0, 20);
@@ -145,8 +149,8 @@
},
delay, function() {
t.eq(log.length, 2, "b) event logged");
t.ok(log[1] && log[1].type == "measurepartial", "b) correct type");
t.ok(log[1] && log[1].measure == 20, "b) correct measure");
t.eq(log[1] && log[1].type, "measurepartial", "b) correct type");
t.eq(log[1] && log[1].measure, 20, "b) correct measure");
// c) move 10 pixels and click
trigger("mousemove", 0, 30);
@@ -161,8 +165,8 @@
// wait for rest of delay and confirm event logged
delay / 2, function() {
t.eq(log.length, 3, "c) event logged");
t.ok(log[2] && log[2].type == "measurepartial", "c) correct type");
t.ok(log[2] && log[2].measure == 30, "c) correct measure");
t.eq(log[2] && log[2].type, "measurepartial", "c) correct type");
t.eq(log[2] && log[2].measure, 30, "c) correct measure");
// d) move 10 pixels and click
trigger("mousemove", 0, 40);
@@ -176,8 +180,8 @@
trigger("dblclick", 0, 40);
t.eq(log.length, 4, "e) event logged");
t.ok(log[3] && log[3].type == "measure", "e) correct type");
t.ok(log[3] && log[3].measure == 40, "e) correct measure");
t.eq(log[3] && log[3].type, "measure", "e) correct type");
t.eq(log[3] && log[3].measure, 40, "e) correct measure");
},
// wait for rest of delay and confirm no measurepartial logged
delay, function() {
@@ -198,22 +202,22 @@
trigger("mousemove", 10, 0);
t.eq(log.length, 1, "g) event logged");
t.ok(log[0] && log[0].type == "measurepartial", "g) correct type");
t.ok(log[0] && log[0].measure == 10, "g) correct measure");
t.eq(log[0] && log[0].type, "measurepartial", "g) correct type");
t.eq(log[0] && log[0].measure, 10, "g) correct measure");
// h) move 10 pixels
trigger("mousemove", 20, 0);
t.eq(log.length, 2, "h) event logged");
t.ok(log[1] && log[1].type == "measurepartial", "h) correct type");
t.ok(log[1] && log[1].measure == 20, "h) correct measure");
t.eq(log[1] && log[1].type, "measurepartial", "h) correct type");
t.eq(log[1] && log[1].measure, 20, "h) correct measure");
// i) mouse up to finish
trigger("mouseup", 20, 0);
t.eq(log.length, 3, "i) event logged");
t.ok(log[2] && log[2].type == "measure", "i) correct type");
t.ok(log[2] && log[2].measure == 20, "i) correct measure");
t.eq(log[2] && log[2].type, "measure", "i) correct type");
t.eq(log[2] && log[2].measure, 20, "i) correct measure");
// j) clean up
log = [];
@@ -254,6 +258,10 @@
measure: function(evt){
log.push(evt);
}
},
handlerOptions: {
pixelTolerance: 0,
dblclickTolerance: 0
}
}
);
@@ -296,10 +304,10 @@
// confirm measurepartial is fired 2 times
t.eq(log.length, 3, "b) event logged");
t.ok(log[1] && log[1].type == "measurepartial", "b) correct type");
t.ok(log[1] && log[1].measure == 20, "b) correct measure");
t.ok(log[2] && log[2].type == "measurepartial", "c) correct type");
t.ok(log[2] && log[2].measure == 30, "c) correct measure");
t.eq(log[1] && log[1].type, "measurepartial", "b) correct type");
t.eq(log[1] && log[1].measure, 20, "b) correct measure");
t.eq(log[2] && log[2].type, "measurepartial", "c) correct type");
t.eq(log[2] && log[2].measure, 30, "c) correct measure");
// d) switch immediate measurement off
control.setImmediate(false);
@@ -346,23 +354,23 @@
t.eq(log.length, 7, "i) no event fired yet");
},
delay, function() {
t.eq(log.length, 8, "i) event logged");
t.eq(log[7] && log[7].type, "measurepartial", "i) correct type");
t.eq(log[7] && log[7].measure, 60, "i) correct measure");
t.eq(log.length, 8, "j) event logged");
t.eq(log[7] && log[7].type, "measurepartial", "j) correct type");
t.eq(log[7] && log[7].measure, 60, "j) correct measure");
trigger("dblclick", 0, 60);
t.eq(log.length, 9, "i) event logged");
t.eq(log[8] && log[8].type, "measure", "i) correct type");
t.eq(log[8] && log[8].measure, 60, "i) correct measure");
t.eq(log.length, 9, "k) event logged");
t.eq(log[8] && log[8].type, "measure", "k) correct type");
t.eq(log[8] && log[8].measure, 60, "k) correct measure");
// clear log
log = [];
// j) clean up
// l) clean up
map.destroy();
// wait for delay and confirm event not logged
},
delay, function() {
t.eq(log.length, 0, "j) no event fired after destroy");
t.eq(log.length, 0, "l) no event fired after destroy");
}
);
}
tests/Handler/Path.html
+100 -1
View File
@@ -145,6 +145,10 @@
cancel: function() {
logs.push({type: "cancel", args: arguments});
}
},
{
pixelTolerance: 0,
dblclickTolerance: 0
});
control.handler = handler;
map.addControl(control);
@@ -642,7 +646,11 @@
});
map.addLayer(layer);
var control = new OpenLayers.Control({});
var handler = new OpenLayers.Handler.Path(control, {});
var handler = new OpenLayers.Handler.Path(control, {},
{
pixelTolerance: 0,
dblclickTolerance: 0
});
control.handler = handler;
map.addControl(control);
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
@@ -741,6 +749,97 @@
]), "geometry is correct after mousemove");
}
function test_sequence_touch_1(t) {
t.plan(19);
log = [];
var map = new OpenLayers.Map("map", { // 300 x 150
resolutions: [1]
});
var layer = new OpenLayers.Layer.Vector("foo", {
maxExtent: new OpenLayers.Bounds(-100, -100, 100, 100),
isBaseLayer: true
});
map.addLayer(layer);
var control = new OpenLayers.Control({});
var handler = new OpenLayers.Handler.Path(control, {
"done": function(g, f) {
log.push({geometry: g, feature: f});
}
});
control.handler = handler;
map.addControl(control);
map.setCenter(new OpenLayers.LonLat(0, 0), 5);
handler.activate();
handler.touchstart({type: "touchstart", xy: new OpenLayers.Pixel(49, 75)});
t.eq(log.length, 0, "touch start 1");
handler.touchmove({type: "touchmove", xy: new OpenLayers.Pixel(50, 75)});
t.eq(log.length, 0, "touch move");
handler.touchend({type: "touchend"});
t.eq(log.length, 0, "touch end");
t.geom_eq(handler.line.geometry,
new OpenLayers.Geometry.LineString([
new OpenLayers.Geometry.Point(-100, 0),
new OpenLayers.Geometry.Point(-100, 0)
]), "geometry is correct");
handler.touchstart({type: "touchstart", xy: new OpenLayers.Pixel(100, 75)});
t.eq(log.length, 0, "touch start 2");
handler.touchmove({type: "touchmove", xy: new OpenLayers.Pixel(250, 75)});
t.eq(log.length, 0, "touch move");
handler.touchend({type: "touchend"});
t.eq(log.length, 0, "touch end");
t.geom_eq(handler.line.geometry,
new OpenLayers.Geometry.LineString([
new OpenLayers.Geometry.Point(-100, 0),
new OpenLayers.Geometry.Point(-100, 0)
]), "geometry is correct");
handler.touchstart({type: "touchstart", xy: new OpenLayers.Pixel(100, 75)});
t.eq(log.length, 0, "touch start 3");
handler.touchmove({type: "touchmove", xy: new OpenLayers.Pixel(100, 75)});
t.eq(log.length, 0, "touch move");
handler.touchend({type: "touchend"});
t.eq(log.length, 0, "touch end");
t.geom_eq(handler.line.geometry,
new OpenLayers.Geometry.LineString([
new OpenLayers.Geometry.Point(-100, 0),
new OpenLayers.Geometry.Point(-50, 0),
new OpenLayers.Geometry.Point(-50, 0)
]), "geometry is correct");
handler.touchstart({type: "touchstart", xy: new OpenLayers.Pixel(252, 100)});
t.eq(log.length, 0, "touch start 4");
handler.touchmove({type: "touchmove", xy: new OpenLayers.Pixel(252, 100)});
t.eq(log.length, 0, "touch move");
handler.touchend({type: "touchend"});
t.eq(log.length, 0, "touch end");
handler.touchstart({type: "touchstart", xy: new OpenLayers.Pixel(250, 100)});
t.eq(log.length, 1, "touch start");
handler.touchmove({type: "touchmove", xy: new OpenLayers.Pixel(250, 100)});
t.eq(log.length, 1, "touch move");
handler.touchend({type: "touchend"});
t.eq(log.length, 1, "touch end");
t.geom_eq(log[0].geometry,
new OpenLayers.Geometry.LineString([
new OpenLayers.Geometry.Point(-100, 0),
new OpenLayers.Geometry.Point(-50, 0),
new OpenLayers.Geometry.Point(102, -25)
]), "geometry is correct");
}
</script>
</head>
<body>
tests/Handler/Point.html
+47 -2
View File
@@ -75,7 +75,7 @@
}
function test_Handler_Point_events(t) {
t.plan(34);
t.plan(49);
var log = [];
var map = new OpenLayers.Map("map", {
resolutions: [1]
@@ -97,7 +97,7 @@
// list below events that should be handled (events) and those
// that should not be handled (nonevents) by the handler
var events = ["click", "dblclick", "mousedown", "mouseup", "mousemove", "mouseout"];
var events = ["click", "dblclick", "mousedown", "mouseup", "mousemove", "mouseout", "touchstart", "touchmove", "touchend"];
var nonevents = ["resize", "focus", "blur"];
map.events.registerPriority = function(type, obj, func) {
var r = func();
@@ -166,6 +166,10 @@
cancel: function() {
logs.push({type: "cancel", args: arguments});
}
},
{
pixelTolerance: 0,
dblclickTolerance: 0
});
control.handler = handler;
map.addControl(control);
@@ -379,7 +383,48 @@
"handler.point is null after destroy");
}
function test_sequence_touch_1(t) {
t.plan(7);
log = [];
var map = new OpenLayers.Map("map", { // 300 x 150
resolutions: [1]
});
var layer = new OpenLayers.Layer.Vector("foo", {
maxExtent: new OpenLayers.Bounds(-100, -100, 100, 100),
isBaseLayer: true
});
map.addLayer(layer);
var control = new OpenLayers.Control();
var handler = new OpenLayers.Handler.Point(control, {
"done": function(g, f) {
log.push({geometry: g, feature: f});
}
});
control.handler = handler;
map.addControl(control);
map.setCenter(new OpenLayers.LonLat(0, 0), 5);
handler.activate();
handler.touchstart({type: "touchstart", xy: new OpenLayers.Pixel(50, 75)});
t.eq(log.length, 0, "touch start 1");
handler.touchmove({type: "touchmove", xy: new OpenLayers.Pixel(250, 75)});
t.eq(log.length, 0, "touch move");
handler.touchend({type: "touchend"});
t.eq(log.length, 0, "touch end");
handler.touchstart({type: "touchstart", xy: new OpenLayers.Pixel(99, 75)});
t.eq(log.length, 0, "touch start 2");
handler.touchmove({type: "touchmove", xy: new OpenLayers.Pixel(100, 75)});
t.eq(log.length, 0, "touch move");
handler.touchend({type: "touchend"});
t.eq(log.length, 1, "touch end");
t.geom_eq(log[0].geometry, new OpenLayers.Geometry.Point(-50, 0), "geometry is correct");
}
</script>
</head>
tests/Handler/Polygon.html
+112 -3
View File
@@ -142,6 +142,10 @@
cancel: function() {
logs.push({type: "cancel", args: arguments});
}
},
{
pixelTolerance: 0,
dblclickTolerance: 0
});
control.handler = handler;
map.addControl(control);
@@ -531,7 +535,11 @@
var draw = new OpenLayers.Control.DrawFeature(
map.layers[0],
OpenLayers.Handler.Polygon,
{handlerOptions: {holeModifier: "altKey"}}
{handlerOptions: {
holeModifier: "altKey",
pixelTolerance: 0,
dblclickTolerance: 0
}}
);
map.addControl(draw);
draw.activate();
@@ -745,7 +753,8 @@
var control = new OpenLayers.Control({});
var handler = new OpenLayers.Handler.Polygon(control,
{done: function(g) { log.geometry = g; }},
{stopDown: true, stopUp: true}
{stopDown: true, stopUp: true,
pixelTolerance: 0, dblclickTolerance: 0}
);
control.handler = handler;
map.addControl(control);
@@ -816,7 +825,8 @@
var control = new OpenLayers.Control({});
var handler = new OpenLayers.Handler.Polygon(control,
{done: function(g) { log.geometry = g; }},
{stopDown: false, stopUp: false}
{stopDown: false, stopUp: false,
pixelTolerance: 0, dblclickTolerance: 0}
);
control.handler = handler;
map.addControl(control);
@@ -868,6 +878,105 @@
]), "geometry is correct");
}
function test_sequence_touch_1(t) {
t.plan(19);
log = [];
var map = new OpenLayers.Map("map", { // 300 x 150
resolutions: [1]
});
var layer = new OpenLayers.Layer.Vector("foo", {
maxExtent: new OpenLayers.Bounds(-100, -100, 100, 100),
isBaseLayer: true
});
map.addLayer(layer);
var control = new OpenLayers.Control({});
var handler = new OpenLayers.Handler.Polygon(control, {
"done": function(g, f) {
log.push({geometry: g, feature: f});
}
});
control.handler = handler;
control.layer = layer;
map.addControl(control);
map.setCenter(new OpenLayers.LonLat(0, 0), 5);
handler.activate();
handler.touchstart({type: "touchstart", xy: new OpenLayers.Pixel(49, 75)});
t.eq(log.length, 0, "touch start 1");
var expectedRing = new OpenLayers.Geometry.LinearRing([
new OpenLayers.Geometry.Point(-100, 0),
new OpenLayers.Geometry.Point(-100, 0)
]);
handler.touchmove({type: "touchmove", xy: new OpenLayers.Pixel(50, 75)});
t.eq(log.length, 0, "touch move");
handler.touchend({type: "touchend"});
t.eq(log.length, 0, "touch end");
expectedRing.addComponent(new OpenLayers.Geometry.Point(-100,0), 1);
t.geom_eq(handler.polygon.geometry.components[0], expectedRing, "geometry is correct");
handler.touchstart({type: "touchstart", xy: new OpenLayers.Pixel(100, 75)});
t.eq(log.length, 0, "touch start 2");
var expectedRing = new OpenLayers.Geometry.LinearRing([
new OpenLayers.Geometry.Point(-100, 0),
new OpenLayers.Geometry.Point(-100, 0)
]);
handler.touchmove({type: "touchmove", xy: new OpenLayers.Pixel(250, 75)});
t.eq(log.length, 0, "touch move");
handler.touchend({type: "touchend"});
t.eq(log.length, 0, "touch end");
expectedRing.addComponent(new OpenLayers.Geometry.Point(-100,0), 1);
t.geom_eq(handler.polygon.geometry.components[0], expectedRing, "geometry is correct");
handler.touchstart({type: "touchstart", xy: new OpenLayers.Pixel(100, 75)});
t.eq(log.length, 0, "touch start 3");
handler.touchmove({type: "touchmove", xy: new OpenLayers.Pixel(100, 75)});
t.eq(log.length, 0, "touch move");
handler.touchend({type: "touchend"});
t.eq(log.length, 0, "touch end");
t.geom_eq(handler.polygon.geometry,
new OpenLayers.Geometry.Polygon([new OpenLayers.Geometry.LinearRing([
new OpenLayers.Geometry.Point(-100, 0),
new OpenLayers.Geometry.Point(-50, 0),
new OpenLayers.Geometry.Point(-50, 0),
new OpenLayers.Geometry.Point(-100, 0)
])]), "geometry is correct");
handler.touchstart({type: "touchstart", xy: new OpenLayers.Pixel(252, 100)});
t.eq(log.length, 0, "touch start 4");
handler.touchmove({type: "touchmove", xy: new OpenLayers.Pixel(252, 100)});
t.eq(log.length, 0, "touch move");
handler.touchend({type: "touchend"});
t.eq(log.length, 0, "touch end");
handler.touchstart({type: "touchstart", xy: new OpenLayers.Pixel(250, 100)});
t.eq(log.length, 1, "touch start");
handler.touchmove({type: "touchmove", xy: new OpenLayers.Pixel(250, 100)});
t.eq(log.length, 1, "touch move");
handler.touchend({type: "touchend"});
t.eq(log.length, 1, "touch end");
t.geom_eq(log[0].geometry,
new OpenLayers.Geometry.Polygon([new OpenLayers.Geometry.LinearRing([
new OpenLayers.Geometry.Point(-100, 0),
new OpenLayers.Geometry.Point(-50, 0),
new OpenLayers.Geometry.Point(102, -25),
new OpenLayers.Geometry.Point(-100, 0)
])]), "geometry is correct");
}
</script>
</head>
<body>