openlayers/lib/OpenLayers/Control/MouseToolbar.js

   1 /* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD
   2  * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for the
   3  * full text of the license. */
   4
   5
   6 /**
   7  * @requires OpenLayers/Control.js
   8  * @requires OpenLayers/Control/MouseDefaults.js
   9  */
  10
  11 /**
  12  * Class: OpenLayers.Control.MouseToolbar
  13  * This class is DEPRECATED in 2.4 and will be removed by 3.0.
  14  * If you need this functionality, use <OpenLayers.Control.NavToolbar>
  15  * instead!!!
  16  */
  17 OpenLayers.Control.MouseToolbar = OpenLayers.Class(
  18                                             OpenLayers.Control.MouseDefaults, {
  19
  20     /**
  21      * Property: mode
  22      */
  23     mode: null,
  24     /**
  25      * Property: buttons
  26      */
  27     buttons: null,
  28
  29     /**
  30      * APIProperty: direction
  31      * {String} 'vertical' or 'horizontal'
  32      */
  33     direction: "vertical",
  34
  35     /**
  36      * Property: buttonClicked
  37      * {String}
  38      */
  39     buttonClicked: null,
  40
  41     /**
  42      * Constructor: OpenLayers.Control.MouseToolbar
  43      *
  44      * Parameters:
  45      * position - {<OpenLayers.Pixel>}
  46      * direction - {String}
  47      */
  48     initialize: function(position, direction) {
  49         OpenLayers.Control.prototype.initialize.apply(this, arguments);
  50         this.position = new OpenLayers.Pixel(OpenLayers.Control.MouseToolbar.X,
  51                                              OpenLayers.Control.MouseToolbar.Y);
  52         if (position) {
  53             this.position = position;
  54         }
  55         if (direction) {
  56             this.direction = direction;
  57         }
  58         this.measureDivs = [];
  59     },
  60
  61     /**
  62      * APIMethod: destroy
  63      */
  64     destroy: function() {
  65         for( var btnId in this.buttons) {
  66             var btn = this.buttons[btnId];
  67             btn.map = null;
  68             btn.events.destroy();
  69         }
  70         OpenLayers.Control.MouseDefaults.prototype.destroy.apply(this,
  71                                                                  arguments);
  72     },
  73
  74     /**
  75      * Method: draw
  76      */
  77     draw: function() {
  78         OpenLayers.Control.prototype.draw.apply(this, arguments);
  79         OpenLayers.Control.MouseDefaults.prototype.draw.apply(this, arguments);
  80         this.buttons = {};
  81         var sz = new OpenLayers.Size(28,28);
  82         var centered = new OpenLayers.Pixel(OpenLayers.Control.MouseToolbar.X,0);
  83         this._addButton("zoombox", "drag-rectangle-off.png", "drag-rectangle-on.png", centered, sz, "Shift->Drag to zoom to area");
  84         centered = centered.add((this.direction == "vertical" ? 0 : sz.w), (this.direction == "vertical" ? sz.h : 0));
  85         this._addButton("pan", "panning-hand-off.png", "panning-hand-on.png", centered, sz, "Drag the map to pan.");
  86         centered = centered.add((this.direction == "vertical" ? 0 : sz.w), (this.direction == "vertical" ? sz.h : 0));
  87         this.switchModeTo("pan");
  88
  89         return this.div;
  90     },
  91
  92     /**
  93      * Method: _addButton
  94      */
  95     _addButton:function(id, img, activeImg, xy, sz, title) {
  96         var imgLocation = OpenLayers.Util.getImagesLocation() + img;
  97         var activeImgLocation = OpenLayers.Util.getImagesLocation() + activeImg;
  98         // var btn = new ol.AlphaImage("_"+id, imgLocation, xy, sz);
  99         var btn = OpenLayers.Util.createAlphaImageDiv(
 100                                     "OpenLayers_Control_MouseToolbar_" + id,
 101                                     xy, sz, imgLocation, "absolute");
 102
 103         //we want to add the outer div
 104         this.div.appendChild(btn);
 105         btn.imgLocation = imgLocation;
 106         btn.activeImgLocation = activeImgLocation;
 107
 108         btn.events = new OpenLayers.Events(this, btn, null, true);
 109         btn.events.on({
 110             "mousedown": this.buttonDown,
 111             "mouseup": this.buttonUp,
 112             "dblclick": OpenLayers.Event.stop,
 113             scope: this
 114         });
 115         btn.action = id;
 116         btn.title = title;
 117         btn.alt = title;
 118         btn.map = this.map;
 119
 120         //we want to remember/reference the outer div
 121         this.buttons[id] = btn;
 122         return btn;
 123     },
 124
 125     /**
 126      * Method: buttonDown
 127      *
 128      * Parameters:
 129      * evt - {Event}
 130      */
 131     buttonDown: function(evt) {
 132         if (!OpenLayers.Event.isLeftClick(evt)) {
 133             return;
 134         }
 135         this.buttonClicked = evt.element.action;
 136         OpenLayers.Event.stop(evt);
 137     },
 138
 139     /**
 140      * Method: buttonUp
 141      *
 142      * Parameters:
 143      * evt - {Event}
 144      */
 145     buttonUp: function(evt) {
 146         if (!OpenLayers.Event.isLeftClick(evt)) {
 147             return;
 148         }
 149         if (this.buttonClicked != null) {
 150             if (this.buttonClicked == evt.element.action) {
 151                 this.switchModeTo(evt.element.action);
 152             }
 153             OpenLayers.Event.stop(evt);
 154             this.buttonClicked = null;
 155         }
 156     },
 157
 158     /**
 159      * Method: defaultDblClick
 160      *
 161      * Parameters:
 162      * evt - {Event}
 163      */
 164     defaultDblClick: function (evt) {
 165         this.switchModeTo("pan");
 166         this.performedDrag = false;
 167         var newCenter = this.map.getLonLatFromViewPortPx( evt.xy );
 168         this.map.setCenter(newCenter, this.map.zoom + 1);
 169         OpenLayers.Event.stop(evt);
 170         return false;
 171     },
 172
 173     /**
 174      * Method: defaultMouseDown
 175      *
 176      * Parameters:
 177      * evt - {Event}
 178      */
 179     defaultMouseDown: function (evt) {
 180         if (!OpenLayers.Event.isLeftClick(evt)) {
 181             return;
 182         }
 183         this.mouseDragStart = evt.xy.clone();
 184         this.performedDrag = false;
 185         this.startViaKeyboard = false;
 186         if (evt.shiftKey && this.mode !="zoombox") {
 187             this.switchModeTo("zoombox");
 188             this.startViaKeyboard = true;
 189         } else if (evt.altKey && this.mode !="measure") {
 190             this.switchModeTo("measure");
 191         } else if (!this.mode) {
 192             this.switchModeTo("pan");
 193         }
 194
 195         switch (this.mode) {
 196             case "zoombox":
 197                 this.map.div.style.cursor = "crosshair";
 198                 this.zoomBox = OpenLayers.Util.createDiv('zoomBox',
 199                                                          this.mouseDragStart,
 200                                                          null,
 201                                                          null,
 202                                                          "absolute",
 203                                                          "2px solid red");
 204                 this.zoomBox.style.backgroundColor = "white";
 205                 this.zoomBox.style.filter = "alpha(opacity=50)"; // IE
 206                 this.zoomBox.style.opacity = "0.50";
 207                 this.zoomBox.style.fontSize = "1px";
 208                 this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
 209                 this.map.viewPortDiv.appendChild(this.zoomBox);
 210                 this.performedDrag = true;
 211                 break;
 212             case "measure":
 213                 var distance = "";
 214                 if (this.measureStart) {
 215                     var measureEnd = this.map.getLonLatFromViewPortPx(this.mouseDragStart);
 216                     distance = OpenLayers.Util.distVincenty(this.measureStart, measureEnd);
 217                     distance = Math.round(distance * 100) / 100;
 218                     distance = distance + "km";
 219                     this.measureStartBox = this.measureBox;
 220                 }
 221                 this.measureStart = this.map.getLonLatFromViewPortPx(this.mouseDragStart);;
 222                 this.measureBox = OpenLayers.Util.createDiv(null,
 223                                                          this.mouseDragStart.add(
 224                                                            -2-parseInt(this.map.layerContainerDiv.style.left),
 225                                                            -2-parseInt(this.map.layerContainerDiv.style.top)),
 226                                                          null,
 227                                                          null,
 228                                                          "absolute");
 229                 this.measureBox.style.width="4px";
 230                 this.measureBox.style.height="4px";
 231                 this.measureBox.style.fontSize = "1px";
 232                 this.measureBox.style.backgroundColor="red";
 233                 this.measureBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
 234                 this.map.layerContainerDiv.appendChild(this.measureBox);
 235                 if (distance) {
 236                     this.measureBoxDistance = OpenLayers.Util.createDiv(null,
 237                                                          this.mouseDragStart.add(
 238                                                            -2-parseInt(this.map.layerContainerDiv.style.left),
 239                                                            2-parseInt(this.map.layerContainerDiv.style.top)),
 240                                                          null,
 241                                                          null,
 242                                                          "absolute");
 243
 244                     this.measureBoxDistance.innerHTML = distance;
 245                     this.measureBoxDistance.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
 246                     this.map.layerContainerDiv.appendChild(this.measureBoxDistance);
 247                     this.measureDivs.push(this.measureBoxDistance);
 248                 }
 249                 this.measureBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
 250                 this.map.layerContainerDiv.appendChild(this.measureBox);
 251                 this.measureDivs.push(this.measureBox);
 252                 break;
 253             default:
 254                 this.map.div.style.cursor = "move";
 255                 break;
 256         }
 257         document.onselectstart = function() { return false; };
 258         OpenLayers.Event.stop(evt);
 259     },
 260
 261     /**
 262      * Method: switchModeTo
 263      *
 264      * Parameters:
 265      * mode - {String}
 266      */
 267     switchModeTo: function(mode) {
 268         if (mode != this.mode) {
 269
 270
 271             if (this.mode && this.buttons[this.mode]) {
 272                 OpenLayers.Util.modifyAlphaImageDiv(this.buttons[this.mode], null, null, null, this.buttons[this.mode].imgLocation);
 273             }
 274             if (this.mode == "measure" && mode != "measure") {
 275                 for(var i=0, len=this.measureDivs.length; i<len; i++) {
 276                     if (this.measureDivs[i]) {
 277                         this.map.layerContainerDiv.removeChild(this.measureDivs[i]);
 278                     }
 279                 }
 280                 this.measureDivs = [];
 281                 this.measureStart = null;
 282             }
 283             this.mode = mode;
 284             if (this.buttons[mode]) {
 285                 OpenLayers.Util.modifyAlphaImageDiv(this.buttons[mode], null, null, null, this.buttons[mode].activeImgLocation);
 286             }
 287             switch (this.mode) {
 288                 case "zoombox":
 289                     this.map.div.style.cursor = "crosshair";
 290                     break;
 291                 default:
 292                     this.map.div.style.cursor = "";
 293                     break;
 294             }
 295
 296         }
 297     },
 298
 299     /**
 300      * Method: leaveMode
 301      */
 302     leaveMode: function() {
 303         this.switchModeTo("pan");
 304     },
 305
 306     /**
 307      * Method: defaultMouseMove
 308      *
 309      * Parameters:
 310      * evt - {Event}
 311      */
 312     defaultMouseMove: function (evt) {
 313         if (this.mouseDragStart != null) {
 314             switch (this.mode) {
 315                 case "zoombox":
 316                     var deltaX = Math.abs(this.mouseDragStart.x - evt.xy.x);
 317                     var deltaY = Math.abs(this.mouseDragStart.y - evt.xy.y);
 318                     this.zoomBox.style.width = Math.max(1, deltaX) + "px";
 319                     this.zoomBox.style.height = Math.max(1, deltaY) + "px";
 320                     if (evt.xy.x < this.mouseDragStart.x) {
 321                         this.zoomBox.style.left = evt.xy.x+"px";
 322                     }
 323                     if (evt.xy.y < this.mouseDragStart.y) {
 324                         this.zoomBox.style.top = evt.xy.y+"px";
 325                     }
 326                     break;
 327                 default:
 328                     var deltaX = this.mouseDragStart.x - evt.xy.x;
 329                     var deltaY = this.mouseDragStart.y - evt.xy.y;
 330                     var size = this.map.getSize();
 331                     var newXY = new OpenLayers.Pixel(size.w / 2 + deltaX,
 332                                                      size.h / 2 + deltaY);
 333                     var newCenter = this.map.getLonLatFromViewPortPx( newXY );
 334                     this.map.setCenter(newCenter, null, true);
 335                     this.mouseDragStart = evt.xy.clone();
 336             }
 337             this.performedDrag = true;
 338         }
 339     },
 340
 341     /**
 342      * Method: defaultMouseUp
 343      *
 344      * Parameters:
 345      * evt - {Event}
 346      */
 347     defaultMouseUp: function (evt) {
 348         if (!OpenLayers.Event.isLeftClick(evt)) {
 349             return;
 350         }
 351         switch (this.mode) {
 352             case "zoombox":
 353                 this.zoomBoxEnd(evt);
 354                 if (this.startViaKeyboard) {
 355                     this.leaveMode();
 356                 }
 357                 break;
 358             case "pan":
 359                 if (this.performedDrag) {
 360                     this.map.setCenter(this.map.center);
 361                 }
 362         }
 363         document.onselectstart = null;
 364         this.mouseDragStart = null;
 365         this.map.div.style.cursor = "default";
 366     },
 367
 368     /**
 369      * Method: defaultMouseOut
 370      *
 371      * Parameters:
 372      * evt - {Event}
 373      */
 374     defaultMouseOut: function (evt) {
 375         if (this.mouseDragStart != null
 376             && OpenLayers.Util.mouseLeft(evt, this.map.div)) {
 377             if (this.zoomBox) {
 378                 this.removeZoomBox();
 379                 if (this.startViaKeyboard) {
 380                     this.leaveMode();
 381                 }
 382             }
 383             this.mouseDragStart = null;
 384             this.map.div.style.cursor = "default";
 385         }
 386     },
 387
 388     /**
 389      * Method: defaultClick
 390      *
 391      * Parameters:
 392      * evt - {Event}
 393      */
 394     defaultClick: function (evt) {
 395         if (this.performedDrag)  {
 396             this.performedDrag = false;
 397             return false;
 398         }
 399     },
 400
 401     CLASS_NAME: "OpenLayers.Control.MouseToolbar"
 402 });
 403
 404 OpenLayers.Control.MouseToolbar.X = 6;
 405 OpenLayers.Control.MouseToolbar.Y = 300;