r1112@creusa: crschmidt | 2006-06-05 09:53:14 -0400
MouseToolbar work. This is working for zoombox -- except for clicking for a second time to turn off the mode in the modal toolbar. Also, no support for other tools yet. git-svn-id: http://svn.openlayers.org/trunk/openlayers@507 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
crschmidt
187
lib/OpenLayers/Control/MouseToolbar.js
Normal file
187
lib/OpenLayers/Control/MouseToolbar.js
Normal file
@@ -0,0 +1,187 @@
|
||||
// @require: OpenLayers/Control.js
|
||||
OpenLayers.Control.MouseToolbar = Class.create();
|
||||
OpenLayers.Control.MouseToolbar.X = 4;
|
||||
OpenLayers.Control.MouseToolbar.Y = 4;
|
||||
OpenLayers.Control.MouseToolbar.prototype =
|
||||
Object.extend( new OpenLayers.Control(), {
|
||||
|
||||
mode: null,
|
||||
|
||||
buttons: null,
|
||||
|
||||
initialize: function() {
|
||||
OpenLayers.Control.prototype.initialize.apply(this, arguments);
|
||||
this.mode = null;
|
||||
},
|
||||
|
||||
draw: function() {
|
||||
OpenLayers.Control.prototype.draw.apply(this, arguments);
|
||||
this.buttons = new Object();
|
||||
this.map.events.register( "dblclick", this, this.defaultDblClick );
|
||||
this.map.events.register( "mousedown", this, this.defaultMouseDown );
|
||||
this.map.events.register( "mouseup", this, this.defaultMouseUp );
|
||||
this.map.events.register( "mousemove", this, this.defaultMouseMove );
|
||||
this.map.events.register( "mouseout", this, this.defaultMouseOut );
|
||||
var sz = new OpenLayers.Size(18,18);
|
||||
var centered = new OpenLayers.Pixel(100, 20);
|
||||
this._addButton("zoombox", "west-mini.png", centered, sz);
|
||||
this._addButton("zoombox", "west-mini.png", "east-mini.png", centered, sz);
|
||||
return this.div;
|
||||
},
|
||||
|
||||
_addButton:function(id, img, activeImg, xy, sz) {
|
||||
var imgLocation = OpenLayers.Util.getImagesLocation() + img;
|
||||
var activeImgLocation = OpenLayers.Util.getImagesLocation() + activeImg;
|
||||
// var btn = new ol.AlphaImage("_"+id, imgLocation, xy, sz);
|
||||
var btn = OpenLayers.Util.createAlphaImageDiv(
|
||||
"OpenLayers_Control_PanZoom_" + id,
|
||||
xy, sz, imgLocation, "absolute");
|
||||
|
||||
//we want to add the outer div
|
||||
this.div.appendChild(btn);
|
||||
btn.imgLocation = imgLocation;
|
||||
btn.activeImgLocation = activeImgLocation;
|
||||
|
||||
btn.events = new OpenLayers.Events(this, btn);
|
||||
btn.events.register("click", this, this.buttonClick);
|
||||
btn.action = id;
|
||||
btn.map = this.map;
|
||||
|
||||
//we want to remember/reference the outer div
|
||||
this.buttons[id] = btn;
|
||||
return btn;
|
||||
},
|
||||
|
||||
buttonClick: function(evt) {
|
||||
this.switchModeTo(evt.div.action);
|
||||
Event.stop(evt);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {Event} evt
|
||||
*/
|
||||
defaultDblClick: function (evt) {
|
||||
var newCenter = this.map.getLonLatFromScreenPx( evt.xy );
|
||||
this.map.setCenter(newCenter, this.map.zoom + 2);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {Event} evt
|
||||
*/
|
||||
defaultMouseDown: function (evt) {
|
||||
this.mouseDragStart = evt.xy.copyOf();
|
||||
if (evt.shiftKey) {
|
||||
this.switchModeTo("zoombox");
|
||||
} else if (evt.altKey) {
|
||||
this.switchModeTo("measure");
|
||||
}
|
||||
switch (this.mode) {
|
||||
case "zoombox":
|
||||
this.map.div.style.cursor = "crosshair";
|
||||
this.zoomBox = OpenLayers.Util.createDiv('zoomBox',
|
||||
this.mouseDragStart,
|
||||
null,
|
||||
null,
|
||||
"absolute",
|
||||
"2px solid red");
|
||||
this.zoomBox.style.backgroundColor = "white";
|
||||
this.zoomBox.style.filter = "alpha(opacity=50)"; // IE
|
||||
this.zoomBox.style.opacity = "0.50";
|
||||
this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
|
||||
this.map.viewPortDiv.appendChild(this.zoomBox);
|
||||
break;
|
||||
case "measure":
|
||||
break;
|
||||
default:
|
||||
this.map.div.style.cursor = "move";
|
||||
break;
|
||||
}
|
||||
Event.stop(evt);
|
||||
},
|
||||
|
||||
switchModeTo: function(mode) {
|
||||
console.log('leave mode?'+mode+","+this.mode);
|
||||
if (mode != this.mode) {
|
||||
this.mode = mode;
|
||||
this.buttons[mode].firstChild.src = this.buttons[mode].activeImgLocation;
|
||||
} else {
|
||||
this.leaveMode();
|
||||
}
|
||||
},
|
||||
|
||||
leaveMode: function() {
|
||||
var oldMode = this.mode;
|
||||
this.mode = null;
|
||||
if (oldMode) {
|
||||
this.buttons[oldMode].firstChild.src = this.buttons[oldMode].imgLocation;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {Event} evt
|
||||
*/
|
||||
defaultMouseMove: function (evt) {
|
||||
if (this.mouseDragStart != null) {
|
||||
switch (this.mode) {
|
||||
case "zoombox":
|
||||
var deltaX = Math.abs(this.mouseDragStart.x - evt.xy.x);
|
||||
var deltaY = Math.abs(this.mouseDragStart.y - evt.xy.y);
|
||||
this.zoomBox.style.width = deltaX+"px";
|
||||
this.zoomBox.style.height = deltaY+"px";
|
||||
if (evt.xy.x < this.mouseDragStart.x) {
|
||||
this.zoomBox.style.left = evt.xy.x+"px";
|
||||
}
|
||||
if (evt.xy.y < this.mouseDragStart.y) {
|
||||
this.zoomBox.style.top = evt.xy.y+"px";
|
||||
}
|
||||
break;
|
||||
default:
|
||||
var deltaX = this.mouseDragStart.x - evt.xy.x;
|
||||
var deltaY = this.mouseDragStart.y - evt.xy.y;
|
||||
var size = this.map.getSize();
|
||||
var newXY = new OpenLayers.Pixel(size.w / 2 + deltaX,
|
||||
size.h / 2 + deltaY);
|
||||
var newCenter = this.map.getLonLatFromScreenPx( newXY );
|
||||
this.map.setCenter(newCenter);
|
||||
this.mouseDragStart = evt.xy.copyOf();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {Event} evt
|
||||
*/
|
||||
defaultMouseUp: function (evt) {
|
||||
switch (this.mode) {
|
||||
case "zoombox":
|
||||
var start = this.map.getLonLatFromScreenPx( this.mouseDragStart );
|
||||
var end = this.map.getLonLatFromScreenPx( evt.xy );
|
||||
var top = Math.max(start.lat, end.lat);
|
||||
var bottom = Math.min(start.lat, end.lat);
|
||||
var left = Math.min(start.lon, end.lon);
|
||||
var right = Math.max(start.lon, end.lon);
|
||||
var bounds = new OpenLayers.Bounds(left, bottom, right, top);
|
||||
var zoom = this.map.getZoomForExtent(bounds);
|
||||
this.map.setCenter(new OpenLayers.LonLat(
|
||||
(start.lon + end.lon) / 2,
|
||||
(start.lat + end.lat) / 2
|
||||
), zoom);
|
||||
this.map.viewPortDiv.removeChild(document.getElementById("zoomBox"));
|
||||
this.zoomBox = null;
|
||||
break;
|
||||
}
|
||||
if (this.mouseDragStart) {
|
||||
this.leaveMode();
|
||||
}
|
||||
this.mouseDragStart = null;
|
||||
this.map.div.style.cursor = "default";
|
||||
},
|
||||
|
||||
defaultMouseOut: function (evt) {
|
||||
if (this.mouseDragStart != null
|
||||
&& OpenLayers.Util.mouseLeft(evt, this.map.div)) {
|
||||
this.defaultMouseUp(evt);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user