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. */
6 * @requires OpenLayers/Handler.js
7 * @requires OpenLayers/Handler/Drag.js
11 * Class: OpenLayers.Handler.Box
12 * Handler for dragging a rectangle across the map. Box is displayed
13 * on mouse down, moves on mouse move, and is finished on mouse up.
16 * - <OpenLayers.Handler>
18 OpenLayers.Handler.Box = OpenLayers.Class(OpenLayers.Handler, {
21 * Property: dragHandler
22 * {<OpenLayers.Handler.Drag>}
27 * APIProperty: boxDivClassName
28 * {String} The CSS class to use for drawing the box. Default is
31 boxDivClassName: 'olHandlerBoxZoomBox',
34 * Property: boxCharacteristics
35 * {Object} Caches some box characteristics from css. This is used
36 * by the getBoxCharacteristics method.
38 boxCharacteristics: null,
41 * Constructor: OpenLayers.Handler.Box
44 * control - {<OpenLayers.Control>}
45 * callbacks - {Object} An object containing a single function to be
46 * called when the drag operation is finished.
47 * The callback should expect to recieve a single
48 * argument, the point geometry.
51 initialize: function(control, callbacks, options) {
52 OpenLayers.Handler.prototype.initialize.apply(this, arguments);
54 "down": this.startBox,
56 "out": this.removeBox,
59 this.dragHandler = new OpenLayers.Handler.Drag(
60 this, callbacks, {keyMask: this.keyMask});
66 setMap: function (map) {
67 OpenLayers.Handler.prototype.setMap.apply(this, arguments);
68 if (this.dragHandler) {
69 this.dragHandler.setMap(map);
79 startBox: function (xy) {
80 this.zoomBox = OpenLayers.Util.createDiv('zoomBox',
81 this.dragHandler.start);
82 this.zoomBox.className = this.boxDivClassName;
83 this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
84 this.map.viewPortDiv.appendChild(this.zoomBox);
86 OpenLayers.Element.addClass(
87 this.map.viewPortDiv, "olDrawBox"
94 moveBox: function (xy) {
95 var startX = this.dragHandler.start.x;
96 var startY = this.dragHandler.start.y;
97 var deltaX = Math.abs(startX - xy.x);
98 var deltaY = Math.abs(startY - xy.y);
99 this.zoomBox.style.width = Math.max(1, deltaX) + "px";
100 this.zoomBox.style.height = Math.max(1, deltaY) + "px";
101 this.zoomBox.style.left = xy.x < startX ? xy.x+"px" : startX+"px";
102 this.zoomBox.style.top = xy.y < startY ? xy.y+"px" : startY+"px";
104 // depending on the box model, modify width and height to take borders
105 // of the box into account
106 var box = this.getBoxCharacteristics();
107 if (box.newBoxModel) {
109 this.zoomBox.style.width =
110 Math.max(1, deltaX - box.xOffset) + "px";
113 this.zoomBox.style.height =
114 Math.max(1, deltaY - box.yOffset) + "px";
122 endBox: function(end) {
124 if (Math.abs(this.dragHandler.start.x - end.x) > 5 ||
125 Math.abs(this.dragHandler.start.y - end.y) > 5) {
126 var start = this.dragHandler.start;
127 var top = Math.min(start.y, end.y);
128 var bottom = Math.max(start.y, end.y);
129 var left = Math.min(start.x, end.x);
130 var right = Math.max(start.x, end.x);
131 result = new OpenLayers.Bounds(left, bottom, right, top);
133 result = this.dragHandler.start.clone(); // i.e. OL.Pixel
137 this.callback("done", [result]);
142 * Remove the zoombox from the screen and nullify our reference to it.
144 removeBox: function() {
145 this.map.viewPortDiv.removeChild(this.zoomBox);
147 this.boxCharacteristics = null;
148 OpenLayers.Element.removeClass(
149 this.map.viewPortDiv, "olDrawBox"
157 activate: function () {
158 if (OpenLayers.Handler.prototype.activate.apply(this, arguments)) {
159 this.dragHandler.activate();
169 deactivate: function () {
170 if (OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) {
171 this.dragHandler.deactivate();
179 * Method: getCharacteristics
180 * Determines offset and box model for a box.
183 * {Object} a hash with the following properties:
184 * - xOffset - Corner offset in x-direction
185 * - yOffset - Corner offset in y-direction
186 * - newBoxModel - true for all browsers except IE in quirks mode
188 getBoxCharacteristics: function() {
189 if (!this.boxCharacteristics) {
190 var xOffset = parseInt(OpenLayers.Element.getStyle(this.zoomBox,
191 "border-left-width")) + parseInt(OpenLayers.Element.getStyle(
192 this.zoomBox, "border-right-width")) + 1;
193 var yOffset = parseInt(OpenLayers.Element.getStyle(this.zoomBox,
194 "border-top-width")) + parseInt(OpenLayers.Element.getStyle(
195 this.zoomBox, "border-bottom-width")) + 1;
196 // all browsers use the new box model, except IE in quirks mode
197 var newBoxModel = OpenLayers.Util.getBrowserName() == "msie" ?
198 document.compatMode != "BackCompat" : true;
199 this.boxCharacteristics = {
202 newBoxModel: newBoxModel
205 return this.boxCharacteristics;
208 CLASS_NAME: "OpenLayers.Handler.Box"