OpenLayers OpenLayers

Changeset 5674

Show
Ignore:
Timestamp:
01/07/08 15:54:28 (8 months ago)
Author:
tschaub
Message:

Gutting the OverviewMap control to give it an update. Now uses a click handler and a drag handler instead of its own event handling code. In addition, the control now has a minRecSize property. When the extent rectangle is smaller than the specified size, its style is switched. By default, we provide a rectangle replacement graphic. This can be customized with CSS. Finally, I'm tucking in one non-API property. The dragging arg sent to map.setCenter is now stored at map.dragging. This gives easy reference to dragging state where a reference to the navigation control and its drag handler is not convenient. r=pspencer (closes #1244)

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • trunk/openlayers/examples/overviewmap.html

    r5362 r5674  
    8787        map2.addControl(new OpenLayers.Control.LayerSwitcher()); 
    8888         
    89         // create an overview map control with the default options 
     89        // create an overview map control with non-default options 
    9090        var controlOptions = { 
    9191            mapOptions: mapOptions 

  • trunk/openlayers/lib/OpenLayers/Control/OverviewMap.js

    r5614 r5674  
    2121 
    2222    /** 
    23      * Property: id 
    24      * {String} For div.id 
    25      */ 
    26     id:  "OverviewMap", 
    27  
    28     /** 
    2923     * Property: element 
    3024     * {DOMElement} The DOM element that contains the overview map 
    …… 
    3731     */ 
    3832    ovmap: null, 
    39          
     33 
    4034    /** 
    4135     * APIProperty: size 
    …… 
    5347     */ 
    5448    layers: null, 
     49     
     50    /** 
     51     * APIProperty: minRectSize 
     52     * {Integer} The minimum width or height (in pixels) of the extent 
     53     *     rectangle on the overview map.  When the extent rectangle reaches 
     54     *     this size, it will be replaced depending on the value of the 
     55     *     <minRectDisplayClass> property.  Default is 15 pixels. 
     56     */ 
     57    minRectSize: 15, 
     58     
     59    /** 
     60     * APIProperty: minRectDisplayClass 
     61     * {String} Replacement style class name for the extent rectangle when 
     62     *     <minRectSize> is reached.  This string will be suffixed on to the 
     63     *     displayClass.  Default is "RectReplacement". 
     64     * 
     65     * Example CSS declaration: 
     66     * (code) 
     67     * .olControlOverviewMapRectReplacement { 
     68     *     overflow: hidden; 
     69     *     cursor: move; 
     70     *     background-image: url("img/overview_replacement.gif"); 
     71     *     background-repeat: no-repeat; 
     72     *     background-position: center; 
     73     * } 
     74     * (end) 
     75     */ 
     76    minRectDisplayClass: "RectReplacement", 
    5577 
    5678    /** 
    …… 
    7597     */ 
    7698    mapOptions: null, 
     99     
     100    /** 
     101     * Property: dragHandler 
     102     * {<OpenLayers.Handler.Drag>} A handler for dragging the extent rectangle. 
     103     */ 
     104    dragHandler: null, 
    77105 
    78106    /** 
    …… 
    98126            return; 
    99127        } 
     128        this.dragHandler.destroy(); 
     129        this.clickHandler.destroy(); 
     130 
    100131        this.mapDiv.removeChild(this.extentRectangle); 
    101132        this.extentRectangle = null; 
    …… 
    108139        this.element.removeChild(this.mapDiv); 
    109140        this.mapDiv = null; 
    110         this.mapDivEvents.destroy();  
    111         this.mapDivEvents = null; 
    112141 
    113142        this.div.removeChild(this.element); 
    114143        this.element = null; 
    115         this.elementEvents.destroy(); 
    116         this.elementEvents = null; 
    117144 
    118145        if (this.maximizeDiv) { 
    …… 
    166193        this.extentRectangle.style.position = 'absolute'; 
    167194        this.extentRectangle.style.zIndex = 1000;  //HACK 
    168         this.extentRectangle.style.overflow = 'hidden'; 
    169         this.extentRectangle.style.backgroundImage = 'url(' + 
    170                                         OpenLayers.Util.getImagesLocation() + 
    171                                         'blank.gif)'; 
    172195        this.extentRectangle.className = this.displayClass+'ExtentRectangle'; 
    173196        this.mapDiv.appendChild(this.extentRectangle); 
    174                  
     197 
    175198        this.element.appendChild(this.mapDiv);   
    176199 
    …… 
    178201 
    179202        this.map.events.register('moveend', this, this.update); 
    180          
    181         // Set up events.  The image div recenters the map on click. 
    182         // The extent rectangle can be dragged to recenter the map. 
    183         // If the mousedown happened elsewhere, then mousemove and mouseup 
    184         // should slip through. 
    185         this.elementEvents = new OpenLayers.Events(this, this.element); 
    186         this.elementEvents.register('mousedown', this, function(e) { 
    187             OpenLayers.Event.stop(e); 
    188         }); 
    189         this.elementEvents.register('click', this, function(e) { 
    190             OpenLayers.Event.stop(e); 
    191         }); 
    192         this.elementEvents.register('dblclick', this, function(e) { 
    193             OpenLayers.Event.stop(e); 
    194         }); 
    195         this.rectEvents = new OpenLayers.Events(this, this.extentRectangle, 
    196                                                 null, true); 
    197         this.rectEvents.register('mouseout', this, this.rectMouseOut); 
    198         this.rectEvents.register('mousedown', this, this.rectMouseDown); 
    199         this.rectEvents.register('mousemove', this, this.rectMouseMove); 
    200         this.rectEvents.register('mouseup', this, this.rectMouseUp); 
    201         this.rectEvents.register('click', this, function(e) { 
    202             OpenLayers.Event.stop(e); 
    203         }); 
    204         this.rectEvents.register('dblclick', this, this.rectDblClick ); 
    205         this.mapDivEvents = new OpenLayers.Events(this, this.mapDiv); 
    206         this.mapDivEvents.register('click', this, this.mapDivClick); 
    207203 
    208204        // Optionally add min/max buttons if the control will go in the 
    …… 
    277273 
    278274    /** 
    279      * Method: rectMouseOut 
    280      * Handle browser events 
    281      * 
    282      * Parameters: 
    283      * evt - {<OpenLayers.Event>} evt 
    284      */ 
    285     rectMouseOut: function (evt) { 
    286         if(this.rectDragStart != null) { 
    287             if(this.performedRectDrag) { 
    288                 this.rectMouseMove(evt); 
    289                 var rectPxBounds = this.getRectPxBounds();  
    290                 // if we're off of the overview map, update the main map 
    291                 // otherwise, keep moving the rect 
    292                 if((rectPxBounds.top <= 0) || (rectPxBounds.left <= 0) ||  
    293                    (rectPxBounds.bottom >= this.size.h - this.hComp) ||  
    294                    (rectPxBounds.right >= this.size.w - this.wComp)) { 
    295                     this.updateMapToRect(); 
    296                 } else { 
    297                     return;  
    298                 } 
    299             } 
    300             document.onselectstart = null; 
    301             this.rectDragStart = null; 
    302         } 
    303     }, 
    304  
    305     /** 
    306      * Method: rectMouseDown 
    307      * Handle browser events 
    308      * 
    309      * Parameters: 
    310      * evt - {<OpenLayers.Event>} evt 
    311      */ 
    312     rectMouseDown: function (evt) { 
    313         if(!OpenLayers.Event.isLeftClick(evt)) { 
    314             return; 
    315         } 
    316         this.rectDragStart = evt.xy.clone(); 
    317         this.performedRectDrag = false; 
    318         OpenLayers.Event.stop(evt); 
    319     }, 
    320  
    321     /** 
    322      * Method: rectMouseMove 
    323      * Handle browser events 
    324      * 
    325      * Parameters: 
    326      * evt - {<OpenLayers.Event>} evt 
    327      */ 
    328     rectMouseMove: function(evt) { 
    329         if(this.rectDragStart != null) { 
    330             var deltaX = this.rectDragStart.x - evt.xy.x; 
    331             var deltaY = this.rectDragStart.y - evt.xy.y; 
    332             var rectPxBounds = this.getRectPxBounds(); 
    333             var rectTop = rectPxBounds.top; 
    334             var rectLeft = rectPxBounds.left; 
    335             var rectHeight = Math.abs(rectPxBounds.getHeight()); 
    336             var rectWidth = rectPxBounds.getWidth(); 
     275     * Method: rectDrag 
     276     * Handle extent rectangle drag 
     277     * 
     278     * Parameters: 
     279     * px - {<OpenLayers.Pixel>} The pixel location of the drag. 
     280     */ 
     281    rectDrag: function(px) { 
     282        var deltaX = this.dragHandler.last.x - px.x; 
     283        var deltaY = this.dragHandler.last.y - px.y; 
     284        if(deltaX != 0 || deltaY != 0) { 
     285            var rectTop = this.rectPxBounds.top; 
     286            var rectLeft = this.rectPxBounds.left; 
     287            var rectHeight = Math.abs(this.rectPxBounds.getHeight()); 
     288            var rectWidth = this.rectPxBounds.getWidth(); 
    337289            // don't allow dragging off of parent element 
    338290            var newTop = Math.max(0, (rectTop - deltaY)); 
    …… 
    346298                                                       newLeft + rectWidth, 
    347299                                                       newTop)); 
    348             this.rectDragStart = evt.xy.clone(); 
    349             this.performedRectDrag = true; 
    350             OpenLayers.Event.stop(evt); 
    351         } 
    352     }, 
    353  
    354     /** 
    355      * Method: rectMouseUp 
    356      * Handle browser events 
    357      * 
    358      * Parameters: 
    359      * evt - {<OpenLayers.Event>} evt 
    360      */ 
    361     rectMouseUp: function(evt) { 
    362         if(!OpenLayers.Event.isLeftClick(evt)) { 
    363             return; 
    364         } 
    365         if(this.performedRectDrag) { 
    366             this.updateMapToRect(); 
    367             OpenLayers.Event.stop(evt); 
    368         }         
    369         document.onselectstart = null; 
    370         this.rectDragStart = null; 
    371     }, 
    372      
    373     /** 
    374      * Method: rectDblClick 
    375      * Handle browser events 
    376      * 
    377      * Parameters: 
    378      * evt - {<OpenLayers.Event>} evt 
    379      */ 
    380     rectDblClick: function(evt) { 
    381         this.performedRectDrag = false; 
    382         OpenLayers.Event.stop(evt); 
    383         this.updateOverview(); 
    384     }, 
    385  
     300        } 
     301    }, 
     302     
    386303    /** 
    387304     * Method: mapDivClick 
    …… 
    392309     */ 
    393310    mapDivClick: function(evt) { 
    394         var pxBounds = this.getRectPxBounds(); 
    395         var pxCenter = pxBounds.getCenterPixel(); 
     311        var pxCenter = this.rectPxBounds.getCenterPixel(); 
    396312        var deltaX = evt.xy.x - pxCenter.x; 
    397313        var deltaY = evt.xy.y - pxCenter.y; 
    398         var top = pxBounds.top; 
    399         var left = pxBounds.left; 
    400         var height = Math.abs(pxBounds.getHeight()); 
    401         var width = pxBounds.getWidth(); 
     314        var top = this.rectPxBounds.top; 
     315        var left = this.rectPxBounds.left; 
     316        var height = Math.abs(this.rectPxBounds.getHeight()); 
     317        var width = this.rectPxBounds.getWidth(); 
    402318        var newTop = Math.max(0, (top + deltaY)); 
    403319        newTop = Math.min(newTop, this.ovmap.size.h - height); 
    …… 
    533449                                               'border-bottom-width')); 
    534450        this.hComp = (this.hComp) ? this.hComp : 2; 
     451 
     452        this.dragHandler = new OpenLayers.Handler.Drag( 
     453            this, {move: this.rectDrag, done: this.updateMapToRect}, 
     454            {map: this.ovmap} 
     455        ); 
     456        this.clickHandler = new OpenLayers.Handler.Click( 
     457            this, { 
     458                "click": this.mapDivClick 
     459            },{ 
     460                "single": true, "double": false, 
     461                "stopSingle": true, "stopDouble": true, 
     462                "pixelTolerance": 1, 
     463                map: this.ovmap 
     464            } 
     465        ); 
     466        this.clickHandler.activate(); 
     467         
     468        this.rectEvents = new OpenLayers.Events(this, this.extentRectangle, 
     469                                                null, true); 
     470        this.rectEvents.register("mouseover", this, function(e) { 
     471            if(!this.dragHandler.active && !this.map.dragging) { 
     472                // this click handler de/activation can be removed when 
     473                // ticket #1247 is addressed 
     474                this.clickHandler.deactivate(); 
     475                this.dragHandler.activate(); 
     476                this.clickHandler.activate(); 
     477            } 
     478        }); 
     479        this.rectEvents.register("mouseout", this, function(e) { 
     480            if(!this.dragHandler.dragging) { 
     481                this.dragHandler.deactivate(); 
     482            } 
     483        }); 
     484 
    535485    }, 
    536486         
    …… 
    549499        var pxBounds = this.getRectBoundsFromMapBounds(this.map.getExtent()); 
    550500        if (pxBounds) { 
    551           this.setRectPxBounds(pxBounds); 
     501            this.setRectPxBounds(pxBounds); 
    552502        } 
    553503    }, 
    …… 
    558508     */ 
    559509    updateMapToRect: function() { 
    560         var pxBounds = this.getRectPxBounds(); 
    561         var lonLatBounds = this.getMapBoundsFromRectBounds(pxBounds); 
     510        var lonLatBounds = this.getMapBoundsFromRectBounds(this.rectPxBounds); 
    562511        this.map.setCenter(lonLatBounds.getCenterLonLat(), this.map.zoom); 
    563     }, 
    564      
    565     /** 
    566      * Method: getRectPxBounds 
    567      * Get extent rectangle pixel bounds 
    568      * 
    569      * Returns: 
    570      * {<OpenLayers.Bounds>} A bounds which is the extent rectangle's pixel 
    571      * bounds (relative to the parent element) 
    572      */ 
    573     getRectPxBounds: function() { 
    574         var top = parseInt(this.extentRectangle.style.top); 
    575         var left = parseInt(this.extentRectangle.style.left); 
    576         var height = parseInt(this.extentRectangle.style.height); 
    577         var width = parseInt(this.extentRectangle.style.width); 
    578         return new OpenLayers.Bounds(left, top + height, left + width, top); 
    579512    }, 
    580513 
    …… 
    593526        var right = Math.min(pxBounds.left + pxBounds.getWidth(), 
    594527                             this.ovmap.size.w - this.wComp); 
    595         this.extentRectangle.style.top = parseInt(top) + 'px'; 
    596         this.extentRectangle.style.left = parseInt(left) + 'px'; 
    597         this.extentRectangle.style.height = parseInt(Math.max(bottom - top, 0))+ 'px'; 
    598         this.extentRectangle.style.width = parseInt(Math.max(right - left, 0)) + 'px'; 
     528        var width = Math.max(right - left, 0); 
     529        var height = Math.max(bottom - top, 0); 
     530        if(width < this.minRectSize || height < this.minRectSize) { 
     531            this.extentRectangle.className = this.displayClass + 
     532                                             this.minRectDisplayClass; 
     533            var rLeft = left + (width / 2) - (this.minRectSize / 2); 
     534            var rTop = top + (height / 2) - (this.minRectSize / 2); 
     535            this.extentRectangle.style.top = Math.round(rTop) + 'px'; 
     536            this.extentRectangle.style.left = Math.round(rLeft) + 'px'; 
     537            this.extentRectangle.style.height = this.minRectSize + 'px'; 
     538            this.extentRectangle.style.width = this.minRectSize + 'px'; 
     539        } else { 
     540            this.extentRectangle.className = this.displayClass + 
     541                                             'ExtentRectangle'; 
     542            this.extentRectangle.style.top = Math.round(top) + 'px'; 
     543            this.extentRectangle.style.left = Math.round(left) + 'px'; 
     544            this.extentRectangle.style.height = Math.round(height) + 'px'; 
     545            this.extentRectangle.style.width = Math.round(width) + 'px'; 
     546        } 
     547        this.rectPxBounds = new OpenLayers.Bounds( 
     548            Math.round(left), Math.round(bottom), 
     549            Math.round(right), Math.round(top) 
     550        ); 
    599551    }, 
    600552 

  • trunk/openlayers/lib/OpenLayers/Map.js

    r5614 r5674  
    5454     */ 
    5555    div: null, 
     56     
     57    /** 
     58     * Property: dragging 
     59     * {Boolean} The map is currently being dragged. 
     60     */ 
     61    dragging: false, 
    5662 
    5763    /** 
    …… 
    12221228     */ 
    12231229    setCenter: function (lonlat, zoom, dragging, forceZoomChange) { 
    1224  
     1230        this.dragging = !!dragging; 
     1231         
    12251232        if (!this.center && !this.isValidLonLat(lonlat)) { 
    12261233            lonlat = this.maxExtent.getCenterLonLat(); 

  • trunk/openlayers/tests/Control/test_OverviewMap.html

    r4792 r5674  
    5252        t.eq(cent.lat, 42.17578125, "Clicking on the Overview Map has the correct effect on map lat"); 
    5353 
    54         control.rectMouseDown({'xy':new OpenLayers.Pixel(5,5), 'which':1}); 
    55         control.rectMouseMove({'xy':new OpenLayers.Pixel(15,15), 'which':1}); 
    56         control.rectMouseUp({'xy':new OpenLayers.Pixel(15,15), 'which':1}); 
     54        control.dragHandler = { 
     55            last: new OpenLayers.Pixel(5,5), 
     56            destroy: function() {} 
     57        }; 
     58        control.rectDrag(new OpenLayers.Pixel(15, 15)); 
     59        control.updateMapToRect(); 
    5760         
    5861        var cent = map.getCenter(); 

  • trunk/openlayers/theme/default/style.css

    r5406 r5674  
    6565 
    6666.olControlOverviewMapExtentRectangle { 
    67    cursor: move; 
     67    overflow: hidden; 
     68    background-image: url("img/blank.gif"); 
     69    cursor: move; 
    6870    border: 2px dotted red; 
    6971} 
     72.olControlOverviewMapRectReplacement { 
     73    overflow: hidden; 
     74    cursor: move; 
     75    background-image: url("img/overview_replacement.gif"); 
     76    background-repeat: no-repeat; 
     77    background-position: center; 
     78} 
     79 
    7080.olLayerGeoRSSDescription { 
    7181    float:left;