OpenLayers OpenLayers

Ticket #1308: patch-1308-r5916-A0.diff

File patch-1308-r5916-A0.diff, 15.2 kB (added by pgiraud, 1 year ago)

  • tests/test_Tween.html

    old new  
     1<html>  
     2<head>  
     3    <script src="../lib/OpenLayers.js"></script>  
     4    <script type="text/javascript"> 
     5 
     6    function test_Tween_constructor(t) {  
     7        t.plan(3); 
     8         
     9        var tween = new OpenLayers.Tween(); 
     10        t.ok(tween instanceof OpenLayers.Tween,  
     11             "new OpenLayers.Tween returns object" ); 
     12        t.eq(typeof tween.easing, "function",  
     13            "constructor sets easing correctly");  
     14        t.eq(typeof tween.start, "function", "tween has a start function");  
     15    } 
     16     
     17    function test_Tween_start(t) { 
     18        t.plan(5); 
     19         
     20        var tween = new OpenLayers.Tween(); 
     21 
     22        var start = {foo: 0, bar: 10}; 
     23        var finish = {foo: 10, bar: 0}; 
     24        var _start = false; 
     25        var _done = false; 
     26        var _eachStep = false; 
     27        var callbacks = { 
     28            start: function() { 
     29                _start = true; 
     30            }, 
     31            done: function() { 
     32                _done = true; 
     33            }, 
     34            eachStep: function() { 
     35                _eachStep = true; 
     36            } 
     37        } 
     38        tween.start(start, finish, 10, {callbacks: callbacks}); 
     39        t.ok(tween.interval != null, "interval correctly set"); 
     40        t.delay_call(0.8, function() { 
     41            t.eq(_start, true, "start callback called"); 
     42            t.eq(_done, true, "finish callback called"); 
     43            t.eq(_eachStep, true, "eachStep callback called"); 
     44            t.eq(tween.time, 11, "Number of steps reached is correct"); 
     45        }); 
     46    } 
     47 
     48    function test_Tween_stop(t) { 
     49        t.plan(1); 
     50         
     51        var tween = new OpenLayers.Tween(); 
     52        tween.interval = window.setInterval(function() {}, 10); 
     53        tween.stop(); 
     54        t.eq(tween.interval, null, "tween correctly stopped"); 
     55    } 
     56 
     57    </script>  
     58</head>  
     59<body>  
     60  <div id="map" style="width:500px;height:500px"></div> 
     61</body>  
     62</html>  

  • tests/list-tests.html

    old new  
    105105    <li>Renderer/test_SVG.html</li> 
    106106    <li>Renderer/test_VML.html</li> 
    107107    <li>test_Map.html</li> 
     108    <li>test_Tween.html</li> 
    108109</ul> 

  • lib/OpenLayers/Map.js

    old new  
    12371237        } 
    12381238 
    12391239   }, 
     1240    
     1241   /**  
     1242     * APIMethod: panTo 
     1243     * Allows user to pan to a new lonlat 
     1244     * If the new lonlat is in the current extent the map will slide smoothly 
     1245     *  
     1246     * Parameters: 
     1247     * lonlat - {<OpenLayers.Lonlat>} 
     1248     */ 
     1249    panTo: function(lonlat) { 
     1250        if (this.getExtent().containsLonLat(lonlat)) { 
     1251            if (!this.panTween) { 
     1252                this.panTween = new OpenLayers.Tween(OpenLayers.Easing.Expo.easeOut); 
     1253            } 
     1254            var center = this.getCenter(); 
     1255            var from = { 
     1256                lon: center.lon, 
     1257                lat: center.lat 
     1258            }; 
     1259            var to = { 
     1260                lon: lonlat.lon, 
     1261                lat: lonlat.lat 
     1262            }; 
     1263            this.panTween.start(from, to, 50, { 
     1264                callbacks: { 
     1265                    start: OpenLayers.Function.bind(function(lonlat) { 
     1266                        this.events.triggerEvent("movestart"); 
     1267                    }, this), 
     1268                    eachStep: OpenLayers.Function.bind(function(lonlat) { 
     1269                        var lonlat = new OpenLayers.LonLat(lonlat.lon, lonlat.lat); 
     1270                        this.setCenter(lonlat, this.zoom, true); 
     1271                    }, this), 
     1272                    done: OpenLayers.Function.bind(function(lonlat) { 
     1273                        this.events.triggerEvent("moveend"); 
     1274                    }, this) 
     1275                } 
     1276            }); 
     1277        } else { 
     1278            this.setCenter(lonlat); 
     1279        } 
     1280    }, 
    12401281 
    12411282    /** 
    12421283     * APIMethod: setCenter 

  • lib/OpenLayers/Control/OverviewMap.js

    old new  
    508508     */ 
    509509    updateMapToRect: function() { 
    510510        var lonLatBounds = this.getMapBoundsFromRectBounds(this.rectPxBounds); 
    511         this.map.setCenter(lonLatBounds.getCenterLonLat(), this.map.zoom); 
     511        this.map.panTo(lonLatBounds.getCenterLonLat()); 
    512512    }, 
    513513 
    514514    /** 

  • lib/OpenLayers/Tween.js

    old new  
     1/* Copyright (c) 2006-2007 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 * Namespace: OpenLayers.Tween 
     7 */ 
     8OpenLayers.Tween = OpenLayers.Class({ 
     9     
     10    /** 
     11     * Constant: INTERVAL 
     12     * {int} Interval in milliseconds between 2 steps 
     13     */ 
     14    INTERVAL: 10, 
     15     
     16    /** 
     17     * Property: easing 
     18     * {<OpenLayers.Easing>(Function)} Easing equation used for the animation 
     19     *     Defaultly set to OpenLayers.Easing.Expo.easeOut 
     20     */ 
     21    easing: null, 
     22     
     23    /** 
     24     * Property: begin 
     25     * {Object} Values to start the animation with 
     26     */ 
     27    begin: null, 
     28     
     29    /** 
     30     * Property: finish 
     31     * {Object} Values to finish the animation with 
     32     */ 
     33    finish: null, 
     34     
     35    /** 
     36     * Property: duration 
     37     * {int} duration of the tween (number of steps) 
     38     */ 
     39    duration: null, 
     40     
     41    /** 
     42     * Property: callbacks 
     43     * {Object} An object with start, eachStep and done properties whose values 
     44     *     are functions to be call during the animation. They are passed the 
     45     *     current computed value as argument. 
     46     */ 
     47    callbacks: null, 
     48     
     49    /** 
     50     * Property: time 
     51     * {int} Step counter 
     52     */ 
     53    time: null, 
     54     
     55    /** 
     56     * Property: interval 
     57     * {int} Interval id returned by window.setInterval 
     58     */ 
     59    interval: null, 
     60     
     61    /** 
     62     *  
     63     * Params: 
     64     * easing - {<OpenLayers.Easing>(Function)} easing function method to use 
     65     */  
     66    initialize: function(easing) { 
     67        this.easing = (easing) ? easing : OpenLayers.Easing.Expo.easeOut; 
     68    }, 
     69     
     70    /** 
     71     * APIMethod: start 
     72     * Plays the Tween, and calls the callback method on each step 
     73     *  
     74     * begin - {Object} values to start the animation with 
     75     * finish - {Object} values to finish the animation with 
     76     * duration - {int} duration of the tween (number of steps) 
     77     * options - {Object} hash of options (for example callbacks (start, eachStep, done)) 
     78     */ 
     79    start: function(begin, finish, duration, options) { 
     80        this.begin = begin; 
     81        this.finish = finish; 
     82        this.duration = duration; 
     83        this.callbacks = options.callbacks; 
     84        this.time = 0; 
     85        if (this.interval) { 
     86            window.clearInterval(this.interval); 
     87            this.interval = null; 
     88        } 
     89        if (this.callbacks && this.callbacks.start) { 
     90            this.callbacks.start.call(this, this.begin); 
     91        } 
     92        this.interval = window.setInterval( 
     93            OpenLayers.Function.bind(this.play, this), this.INTERVAL); 
     94    }, 
     95     
     96    /** 
     97     * APIMethod: stop 
     98     * Stops the Tween, and calls the finish callback 
     99     */ 
     100    stop: function() { 
     101        if (this.callbacks && this.callbacks.done) { 
     102            this.callbacks.done.call(this, this.finish); 
     103        } 
     104        window.clearInterval(this.interval); 
     105        this.interval = null; 
     106    }, 
     107     
     108    /** 
     109     * Method: play 
     110     * Calls the appropriate easing method 
     111     */ 
     112    play: function() { 
     113        var value = {}; 
     114        for (var i in this.begin) { 
     115            var b = this.begin[i]; 
     116            var f = this.finish[i]; 
     117            if (b == null || f == null || isNaN(b) || isNaN(f)) { 
     118                OpenLayers.Console.error('invalid value for Tween'); 
     119            } 
     120             
     121            var c = f - b; 
     122            value[i] = this.easing.apply(this, [this.time, b, c, this.duration]); 
     123        } 
     124        this.time++; 
     125         
     126        if (this.callbacks && this.callbacks.eachStep) { 
     127            this.callbacks.eachStep.call(this, value); 
     128        } 
     129         
     130        if (this.time > this.duration) { 
     131            if (this.callbacks && this.callbacks.done) { 
     132                this.callbacks.done.call(this, this.finish); 
     133            } 
     134            window.clearInterval(this.interval); 
     135            this.interval = null; 
     136        } 
     137    }, 
     138     
     139    /** 
     140     * Create empty functions for all easing methods. 
     141     */ 
     142    CLASS_NAME: "OpenLayers.Tween" 
     143}); 
     144 
     145/** 
     146 * Namespace: OpenLayers.Easing 
     147 *  
     148 * Credits: 
     149 *      Easing Equations by Robert Penner, <http://www.robertpenner.com/easing/> 
     150 */ 
     151OpenLayers.Easing = { 
     152    /** 
     153     * Create empty functions for all easing methods. 
     154     */ 
     155    CLASS_NAME: "OpenLayers.Easing" 
     156} 
     157 
     158/** 
     159 * Namespace: OpenLayers.Easing.Linear 
     160 */ 
     161OpenLayers.Easing.Linear = { 
     162     
     163    /** 
     164     * APIFunction: easeIn 
     165     *  
     166     * Parameters: 
     167     * t - {Float} time 
     168     * b - {Float} beginning position 
     169     * c - {Float} total change 
     170     * d - {Float} duration of the transition 
     171     */ 
     172    easeIn: function(t, b, c, d) { 
     173        return c*t/d + b; 
     174    }, 
     175     
     176    /** 
     177     * APIFunction: easeOut 
     178     *  
     179     * Parameters: 
     180     * t - {Float} time 
     181     * b - {Float} beginning position 
     182     * c - {Float} total change 
     183     * d - {Float} duration of the transition 
     184     */ 
     185    easeOut: function(t, b, c, d) { 
     186        return c*t/d + b; 
     187    }, 
     188     
     189    /** 
     190     * APIFunction: easeInOut 
     191     *  
     192     * Parameters: 
     193     * t - {Float} time 
     194     * b - {Float} beginning position 
     195     * c - {Float} total change 
     196     * d - {Float} duration of the transition 
     197     */ 
     198    easeInOut: function(t, b, c, d) { 
     199        return c*t/d + b; 
     200    }, 
     201 
     202    CLASS_NAME: "OpenLayers.Easing.Linear" 
     203}; 
     204 
     205/** 
     206 * Namespace: OpenLayers.Easing.Expo 
     207 */ 
     208OpenLayers.Easing.Expo = { 
     209     
     210    /** 
     211     * APIFunction: easeIn 
     212     *  
     213     * Parameters: 
     214     * t - {Float} time 
     215     * b - {Float} beginning position 
     216     * c - {Float} total change 
     217     * d - {Float} duration of the transition 
     218     */ 
     219    easeIn: function(t, b, c, d) { 
     220        return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; 
     221    }, 
     222     
     223    /** 
     224     * APIFunction: easeOut 
     225     *  
     226     * Parameters: 
     227     * t - {Float} time 
     228     * b - {Float} beginning position 
     229     * c - {Float} total change 
     230     * d - {Float} duration of the transition 
     231     */ 
     232    easeOut: function(t, b, c, d) { 
     233        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 
     234    }, 
     235     
     236    /** 
     237     * APIFunction: easeInOut 
     238     *  
     239     * Parameters: 
     240     * t - {Float} time 
     241     * b - {Float} beginning position 
     242     * c - {Float} total change 
     243     * d - {Float} duration of the transition 
     244     */ 
     245    easeInOut: function(t, b, c, d) { 
     246        if (t==0) return b; 
     247        if (t==d) return b+c; 
     248        if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 
     249        return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 
     250    }, 
     251 
     252    CLASS_NAME: "OpenLayers.Easing.Expo" 
     253}; 

  • lib/OpenLayers.js

    old new  
    7474            "OpenLayers/BaseTypes/Pixel.js", 
    7575            "OpenLayers/BaseTypes/Size.js", 
    7676            "OpenLayers/Console.js", 
     77            "OpenLayers/Tween.js", 
    7778            "Rico/Corner.js", 
    7879            "Rico/Color.js", 
    7980            "OpenLayers/Ajax.js", 

  • examples/tween.html

    old new  
     1<html xmlns="http://www.w3.org/1999/xhtml"> 
     2  <head> 
     3    <title>Tween Example</title> 
     4    <style type="text/css"> 
     5        #viewport { 
     6            width: 500px; 
     7            height: 300px; 
     8            border: 1px solid black; 
     9        } 
     10        #block { 
     11            width: 10px; 
     12            height: 10px; 
     13            background-color: red; 
     14            position: absolute; 
     15        } 
     16    </style> 
     17    <script src="../lib/OpenLayers.js"></script> 
     18    <script type="text/javascript"> 
     19        var tween, events; 
     20 
     21        function init(){ 
     22            tween = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeIn); 
     23             
     24            events = new OpenLayers.Events(null, OpenLayers.Util.getElement('viewport'), null, true); 
     25            events.register("mousedown", null, moveBlock); 
     26        } 
     27        function moveBlock(e) { 
     28            var block = OpenLayers.Util.getElement('block'); 
     29            var viewport = OpenLayers.Util.getElement('viewport'); 
     30            var blockPosition = OpenLayers.Util.pagePosition(block); 
     31            var viewportPosition = OpenLayers.Util.pagePosition(viewport); 
     32            e.xy = events.getMousePosition(e); 
     33            var from = { 
     34                x: blockPosition[0] - viewportPosition[0], 
     35                y: blockPosition[1] - viewportPosition[1] 
     36            }; 
     37            var to = { 
     38                x: e.xy.x, 
     39                y: e.xy.y 
     40            } 
     41            var callbacks = { 
     42                eachStep: function(value) { 
     43                    block.style.left = (value.x + viewportPosition[0]) + 'px'; 
     44                    block.style.top = (value.y + viewportPosition[1]) + 'px'; 
     45                } 
     46            } 
     47            tween.start(from, to, 100, {callbacks: callbacks}); 
     48             
     49        } 
     50        function changeTween() { 
     51            var transition = OpenLayers.Util.getElement('transition').value; 
     52            var easing = OpenLayers.Util.getElement('easing').value; 
     53            tween = new OpenLayers.Tween(OpenLayers.Easing[transition][easing]); 
     54        } 
     55    </script> 
     56  </head> 
     57  <body onload="init()"> 
     58    <div id="title">Tween Example</div> 
     59    <div id="tags"></div> 
     60    <div id="shortdesc">Show transition effects</div> 
     61    <select name="transition" id="transition" onchange="changeTween()"> 
     62        <option value="Linear">Linear</option> 
     63        <option value="Expo">Expo</option> 
     64    </select> 
     65    <select name="easing" id="easing" onchange="changeTween()"> 
     66        <option value="easeIn">EaseIn</option> 
     67        <option value="easeOut">EaseOut</option> 
     68    </select> 
     69    <div id="viewport"> 
     70        <div id="block"></div> 
     71    </div> 
     72    <div id="docs"> 
     73        This is an example of transition effects. 
     74    </div> 
     75    <button onclick="setCenter()">recenter to random lonlat</button> 
     76  </body> 
     77</html>