OpenLayers OpenLayers

Ticket #442: final_animatedZooming_Mouse.patch

File final_animatedZooming_Mouse.patch, 13.3 kB (added by emanuel, 3 years ago)

mouseWheel, zoomBox, DblClick supports animated zooming (included unit tests)

  • tests/Control/test_MouseDefaults.html

    old new  
     1<html> 
     2<head> 
     3  <script src="../../lib/OpenLayers.js"></script> 
     4  <script type="text/javascript"><!-- 
     5    var map;  
     6    var layer;  
     7    var name = 'Test Layer'; 
     8    var url = "http://octo.metacarta.com/cgi-bin/mapserv"; 
     9    var params = { map: '/mapdata/vmap_wms.map',  
     10                   layers: 'basic',  
     11                   format: 'image/png'};  
     12 
     13    function test_01_Control_MouseDefaults_constructor (t) { 
     14        t.plan( 1 ); 
     15     
     16        control = new OpenLayers.Control.MouseDefaults(); 
     17        t.ok( control instanceof OpenLayers.Control.MouseDefaults, "new OpenLayers.Control.MouseDefaults returns object" ); 
     18    } 
     19    function test_02_Control_MouseDefaults_addControl (t) { 
     20        t.plan( 4 ); 
     21        map = new OpenLayers.Map('map'); 
     22        control = new OpenLayers.Control.MouseDefaults(); 
     23        t.ok( control instanceof OpenLayers.Control.MouseDefaults, "new OpenLayers.Control.MouseDefaults returns object" ); 
     24        t.ok( map instanceof OpenLayers.Map, "new OpenLayers.Map creates map" ); 
     25        map.addControl(control); 
     26        t.ok( control.map === map, "Control.map is set to the map object" ); 
     27        t.ok( map.controls[3] === control, "map.controls contains control" ); 
     28    } 
     29    function test_03_Control_MouseDefaults_control_events (t) { 
     30        t.plan( 10 ); 
     31        if ((navigator.userAgent.indexOf("compatible") == -1)) {  
     32            var evt = {which: 1}; // control expects left-click 
     33            map = new OpenLayers.Map('map'); 
     34            layer = new OpenLayers.Layer.WMS(name, url, params); 
     35            map.addLayer(layer); 
     36 
     37            control = new OpenLayers.Control.MouseDefaults(); 
     38            map.addControl(control); 
     39 
     40            var centerLL = new OpenLayers.LonLat(0,0);  
     41            map.setCenter(centerLL, 5); 
     42 
     43             
     44 
     45            evt.xy = new OpenLayers.Pixel(100,100); 
     46            control.defaultDblClick(evt); 
     47 
     48            t.delay_call(  
     49                1, function() { 
     50                    t.eq(map.getZoom(), 6,  
     51                        "Map zoom set correctly after double clicking on map"); 
     52                    var cent = map.getCenter(); 
     53                    t.eq(cent.lon, -18.10546875,  
     54                        "Map center lon set correctly after double clicking on map"); 
     55                    t.eq(cent.lat, 6.85546875, 
     56                        "Map center lat set correctly after double clicking on map"); 
     57                     
     58                    // set zoomanimation flag manually, 
     59                    // reason: loadend event in layers.js will not achieved in unittests 
     60                    map.zoomanimationActive = false; 
     61 
     62                    evt.shiftKey = true; 
     63                    evt.xy = new OpenLayers.Size(5,5); 
     64                    control.defaultMouseDown(evt); 
     65                    evt.xy = new OpenLayers.Size(15,15); 
     66                    control.defaultMouseUp(evt); 
     67                }, 
     68                1, function() { 
     69                    t.eq(map.getZoom(), 7, 
     70                        "Map zoom set correctly after using shift-zoombox"); 
     71 
     72                    // set zoomanimation flag manually, 
     73                    // reason: loadend event in layers.js will not achieved in unittests 
     74                    map.zoomanimationActive = false; 
     75 
     76                    evt.xy = new OpenLayers.Pixel(100,100); 
     77                    control.defaultWheelUp(evt) 
     78                }, 
     79                1, function() { 
     80                    t.eq(map.getZoom(), 8, 
     81                        "Map zoom set correctly after using mouse wheel up"); 
     82                    var cent = map.getCenter(); 
     83                    t.eq(cent.lon, -20.36865234375,  
     84                        "Map center lon set correctly after using mouse wheel up"); 
     85                    t.eq(cent.lat, 7.71240234375, 
     86                        "Map center lat set correctly after using mouse wheel up"); 
     87                     
     88                    // set zoomanimation flag manually, 
     89                    // reason: loadend event in layers.js will not achieved in unittests 
     90                    map.zoomanimationActive = false; 
     91 
     92                    evt.xy = new OpenLayers.Pixel(100,100); 
     93                    control.defaultWheelDown(evt) 
     94                }, 
     95                1, function() { 
     96                    t.eq(map.getZoom(), 7, 
     97                        "Map zoom set correctly after using mouse wheel up"); 
     98                    var cent = map.getCenter(); 
     99                    t.eq(cent.lon, -18.10546875,  
     100                        "Map center lon set correctly after using mouse wheel up"); 
     101                    t.eq(cent.lat, 6.85546875, 
     102                        "Map center lat set correctly after using mouse wheel up"); 
     103                } 
     104            ); 
     105        } else { 
     106            t.ok(true, "IE does not run this test.")  
     107        } 
     108    } 
     109  // --> 
     110  </script> 
     111</head> 
     112<body> 
     113    <div id="map" style="width: 1024px; height: 512px;"/> 
     114</body> 
     115</html> 

  • tests/Control/test_MouseToolbar.html

    old new  
    4545            control.defaultMouseDown(evt); 
    4646            evt.xy = new OpenLayers.Size(15,15); 
    4747            control.defaultMouseUp(evt); 
    48             t.eq(map.getZoom(), 6, "Map zoom set correctly after zoombox"); 
     48            t.delay_call( 1, function() { 
     49                t.eq(map.getZoom(), 6, "Map zoom set correctly after zoombox"); 
     50            }); 
    4951        } else { 
    5052            t.ok(true, "IE does not run this test.")  
    5153        } 

  • lib/OpenLayers/Control/MouseToolbar.js

    old new  
    112112    * @param {Event} evt 
    113113    */ 
    114114    defaultDblClick: function (evt) { 
    115         this.switchModeTo("pan"); 
    116         this.performedDrag = false; 
    117         var newCenter = this.map.getLonLatFromViewPortPx( evt.xy );  
    118         this.map.setCenter(newCenter, this.map.zoom + 1); 
    119         OpenLayers.Event.stop(evt); 
    120         return false; 
     115        if (!this.map.zoomanimationActive){ 
     116            this.switchModeTo("pan"); 
     117            this.performedDrag = false; 
     118 
     119            // convert the (old) center of the map in pixel 
     120            var centerPx = this.map.getPixelFromLonLat(this.map.getCenter()); 
     121 
     122            // pan to new center    
     123            var deltaX = evt.xy.x - centerPx.x;  
     124            var deltaY = evt.xy.y - centerPx.y;  
     125            this.map.pan(deltaX, deltaY,true); 
     126 
     127            // zoom to new level  
     128            this.map.zoomIn(); 
     129 
     130            OpenLayers.Event.stop(evt); 
     131            return false; 
     132        } 
    121133    }, 
    122134 
    123135    /** 

  • lib/OpenLayers/Control/MouseDefaults.js

    old new  
    7171    * @param {Event} evt 
    7272    */ 
    7373    defaultDblClick: function (evt) { 
    74         var newCenter = this.map.getLonLatFromViewPortPx( evt.xy );  
    75         this.map.setCenter(newCenter, this.map.zoom + 1); 
    76         OpenLayers.Event.stop(evt); 
    77         return false; 
     74        if (!this.map.zoomanimationActive){ 
     75            // convert the (old) center of the map in pixel 
     76            var centerPx = this.map.getPixelFromLonLat(this.map.getCenter()); 
     77             
     78            // pan to new center    
     79            var deltaX = evt.xy.x - centerPx.x;  
     80            var deltaY = evt.xy.y - centerPx.y;  
     81            this.map.pan(deltaX, deltaY,true); 
     82 
     83            // zoom to new level  
     84            this.map.zoomIn();  
     85 
     86            OpenLayers.Event.stop(evt); 
     87            return false; 
     88        } 
    7889    }, 
    7990 
    8091    /** 
    …… 
    173184     */ 
    174185    defaultWheelUp: function(evt) { 
    175186        if (this.map.getZoom() <= this.map.getNumZoomLevels()) { 
    176             this.map.setCenter(this.map.getLonLatFromPixel(evt.xy), 
    177                                this.map.getZoom() + 1); 
     187            if (!this.map.zoomanimationActive) { 
     188                // convert the current center of the map in pixel 
     189                var centerPx = this.map.getPixelFromLonLat(this.map.getCenter()); 
     190 
     191                // determine lonlat from target (mouse position) 
     192                var targetLonLat = this.map.getLonLatFromViewPortPx( evt.xy );  
     193 
     194                // determine offset target-center in pixel 
     195                var offset = new OpenLayers.Pixel(); 
     196                offset.x = evt.xy.x - centerPx.x; 
     197                offset.y = evt.xy.y - centerPx.y; 
     198 
     199                // convert offset of zoomlevel n to zoomlevel n+1 
     200                offset.x = offset.x / 2; 
     201                offset.y = offset.y / 2; 
     202 
     203                // pan to new center    
     204                this.map.pan(offset.x, offset.y, true); 
     205 
     206                // zoom to new level  
     207                this.map.zoomIn(); 
     208            } 
    178209        } 
    179210    }, 
    180211 
    …… 
    183214     */ 
    184215    defaultWheelDown: function(evt) { 
    185216        if (this.map.getZoom() > 0) { 
    186             this.map.setCenter(this.map.getLonLatFromPixel(evt.xy), 
    187                                this.map.getZoom() - 1); 
     217            if (!this.map.zoomanimationActive) { 
     218                // convert the current center of the map in pixel 
     219                var centerPx = this.map.getPixelFromLonLat(this.map.getCenter()); 
     220 
     221                // determine lonlat from target (mouse position) 
     222                var targetLonLat = this.map.getLonLatFromViewPortPx( evt.xy );  
     223 
     224                // determine offset target-center in pixel... 
     225                var offset = new OpenLayers.Pixel(); 
     226                offset.x = evt.xy.x - centerPx.x; 
     227                offset.y = evt.xy.y - centerPx.y; 
     228 
     229                // convert offset of zoomlevel n to zoomlevel n-1 
     230                offset.x = -offset.x; 
     231                offset.y = -offset.y; 
     232 
     233                // pan to new center    
     234                this.map.pan(offset.x, offset.y, true); 
     235 
     236                // zoom to new level  
     237                this.map.zoomOut(); 
     238            } 
    188239        } 
    189240    }, 
    190241 
    …… 
    193244     */ 
    194245    zoomBoxEnd: function(evt) { 
    195246        if (this.mouseDragStart != null) { 
    196             if (Math.abs(this.mouseDragStart.x - evt.xy.x) > 5 ||     
    197                 Math.abs(this.mouseDragStart.y - evt.xy.y) > 5) {    
    198                 var start = this.map.getLonLatFromViewPortPx( this.mouseDragStart );  
    199                 var end = this.map.getLonLatFromViewPortPx( evt.xy ); 
    200                 var top = Math.max(start.lat, end.lat); 
    201                 var bottom = Math.min(start.lat, end.lat); 
    202                 var left = Math.min(start.lon, end.lon); 
    203                 var right = Math.max(start.lon, end.lon); 
    204                 var bounds = new OpenLayers.Bounds(left, bottom, right, top); 
    205                 this.map.zoomToExtent(bounds); 
    206             } else { 
    207                 var end = this.map.getLonLatFromViewPortPx( evt.xy ); 
    208                 this.map.setCenter(new OpenLayers.LonLat( 
    209                   (end.lon), 
    210                   (end.lat) 
    211                  ), this.map.getZoom() + 1); 
    212             }     
     247            if (!this.map.zoomanimationActive) { 
     248                if (Math.abs(this.mouseDragStart.x - evt.xy.x) > 5 ||     
     249                    Math.abs(this.mouseDragStart.y - evt.xy.y) > 5) {    
     250                    var start = this.map.getLonLatFromViewPortPx( this.mouseDragStart );  
     251                    var end = this.map.getLonLatFromViewPortPx( evt.xy ); 
     252                    var top = Math.max(start.lat, end.lat); 
     253                    var bottom = Math.min(start.lat, end.lat); 
     254                    var left = Math.min(start.lon, end.lon); 
     255                    var right = Math.max(start.lon, end.lon); 
     256                    var bounds = new OpenLayers.Bounds(left, bottom, right, top); 
     257                    this.map.zoomToExtent(bounds); 
     258                } else { 
     259                    // convert the (old) center of the map in pixel 
     260                    var centerPx = this.map.getPixelFromLonLat(this.map.getCenter()) 
     261                    // pan to new center    
     262                    var deltaX = evt.xy.x - centerPx.x;  
     263                    var deltaY = evt.xy.y - centerPx.y;  
     264                    this.map.pan(deltaX, deltaY,true); 
     265 
     266                    // zoom to new level  
     267                    this.map.zoomIn();         
     268                }     
     269            } 
    213270            this.removeZoomBox(); 
    214        } 
     271        } 
    215272    }, 
    216273 
    217274    /** 

  • examples/controls.html

    old new  
    1414            var map = new OpenLayers.Map('map', { controls: [] }); 
    1515 
    1616            map.addControl(new OpenLayers.Control.PanZoomBar()); 
    17             map.addControl(new OpenLayers.Control.MouseToolbar()); 
     17            map.addControl(new OpenLayers.Control.MouseDefaults()); 
    1818            map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false})); 
    1919            map.addControl(new OpenLayers.Control.Permalink()); 
    2020            map.addControl(new OpenLayers.Control.Permalink('permalink'));