don't waste coordinate space by using a smaller renderer extent and updating it on moveend. r=bartvde (closes #3359)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@12163 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Layer/Vector.js

@@ -474,7 +474,7 @@ OpenLayers.Layer.Vector = OpenLayers.Class(OpenLayers.Layer, {
         
         var ng = (OpenLayers.Renderer.NG && this.renderer instanceof OpenLayers.Renderer.NG);
         if (ng) {
-            zoomChanged && this.renderer.updateDimensions();
+            dragging || this.renderer.updateDimensions(zoomChanged);
         } else {
             var coordSysUnchanged = true;
 

lib/OpenLayers/Renderer/NG.js

@@ -38,10 +38,14 @@ OpenLayers.Renderer.NG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
      * To be extended by subclasses - here we set positioning related styles
      * on HTML elements, subclasses have to do the same for renderer specific
      * elements (e.g. viewBox, width and height of the rendererRoot)
+     *
+     * Parameters:
+     * zoomChanged - {Boolean} Has the zoom changed? If so, subclasses may have
+     *     to update feature styles/dimensions.
      */
-    updateDimensions: function() {
+    updateDimensions: function(zoomChanged) {
         var mapExtent = this.map.getExtent();
-        var renderExtent = this.map.getMaxExtent();
+        var renderExtent = mapExtent.scale(3);
         this.setExtent(renderExtent, true);
         var res = this.getResolution();
         var div = this.rendererRoot.parentNode;

lib/OpenLayers/Renderer/SVG2.js

@@ -73,8 +73,11 @@ OpenLayers.Renderer.SVG2 = OpenLayers.Class(OpenLayers.Renderer.NG, {
 
     /**
      * Method: updateDimensions
+     *
+     * Parameters:
+     * zoomChanged - {Boolean}
      */
-    updateDimensions: function() {
+    updateDimensions: function(zoomChanged) {
         OpenLayers.Renderer.NG.prototype.updateDimensions.apply(this, arguments);
         
         var res = this.getResolution();
@@ -92,19 +95,21 @@ OpenLayers.Renderer.SVG2 = OpenLayers.Class(OpenLayers.Renderer.NG, {
         this.rendererRoot.setAttributeNS(null, "width", width / res);
         this.rendererRoot.setAttributeNS(null, "height", height / res);
 
-        // update styles for the new resolution
+        if (zoomChanged === true) {
-        var i, len;
+            // update styles for the new resolution
-        var nodes = this.vectorRoot.childNodes;
+            var i, len;
-        for (i=0, len=nodes.length; i<len; ++i) {
+            var nodes = this.vectorRoot.childNodes;
-            this.setStyle(nodes[i]);
+            for (i=0, len=nodes.length; i<len; ++i) {
-        }
+                this.setStyle(nodes[i]);
-        var textNodes = this.textRoot.childNodes;
+            }
-        var label;
+            var textNodes = this.textRoot.childNodes;
-        for (i=0, len=textNodes.length; i<len; ++i) {
+            var label;
-            label = textNodes[i];
+            for (i=0, len=textNodes.length; i<len; ++i) {
-            this.drawText(label, label._style,
+                label = textNodes[i];
-                new OpenLayers.Geometry.Point(label._x, label._y)
+                this.drawText(label, label._style,
-            );
+                    new OpenLayers.Geometry.Point(label._x, label._y)
+                );
+            }
         }
     },
     

tests/Renderer/SVG2.html

@@ -48,7 +48,7 @@
             return;
         }
         
-        t.plan(5);
+        t.plan(7);
         
         OpenLayers.Renderer.SVG2.prototype._setExtent =
             OpenLayers.Renderer.SVG2.prototype.setExtent;
@@ -76,14 +76,16 @@
         
         t.eq(g_SetExtent, true, "Elements.setExtent() called");
         
-        t.eq(r.rendererRoot.getAttributeNS(null, "width"), "4", "width is correct");
+        t.eq(r.extent.toString(), extent.scale(3).toString(), "renderer's extent is correct");
-        t.eq(r.rendererRoot.getAttributeNS(null, "height"), "4", "height is correct");
+        t.eq(r.rendererRoot.getAttributeNS(null, "width"), "12", "width is correct");
-        t.eq(r.rendererRoot.getAttributeNS(null, "viewBox"), "1 -4 2 2", "rendererRoot viewBox is correct");
+        t.eq(r.rendererRoot.getAttributeNS(null, "height"), "12", "height is correct");
+        t.eq(r.rendererRoot.getAttributeNS(null, "viewBox"), "-1 -6 6 6", "rendererRoot viewBox is correct");
         
         // test extent changes
         extent = new OpenLayers.Bounds(2,3,5,6);
         r.updateDimensions();
-        t.eq(r.rendererRoot.getAttributeNS(null, "viewBox"), "2 -6 3 3", "rendererRoot viewBox is correct after a new setExtent");
+        t.eq(r.extent.toString(), extent.scale(3).toString(), "renderer's extent changed after updateDimensions");
+        t.eq(r.rendererRoot.getAttributeNS(null, "viewBox"), "-1 -9 9 9", "rendererRoot viewBox is correct after a new setExtent");
 
         OpenLayers.Renderer.SVG2.prototype.setExtent =
             OpenLayers.Renderer.SVG2.prototype._setExtent;

tests/manual/svg2-coordinaterange.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
+<link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
+<style type="text/css">
+    #map {
+        width: 512px;
+        height: 512px;
+        border: 1px solid gray;
+    }
+</style>
+<title>SVG2 coordinate range check</title>
+<script type="text/javascript" src="../../lib/OpenLayers.js"></script>
+<script>
+
+var WGS84 = new OpenLayers.Projection("EPSG:4326");
+var Mercator = new OpenLayers.Projection("EPSG:900913");
+var wkt = new OpenLayers.Format.WKT({ internalProjection: Mercator, externalProjection: WGS84 });
+
+function init() {
+    var externalGraphic, baseURL, baseLayer, layerOptions, hidemessenger;
+
+    var map = new OpenLayers.Map('map', {
+        controls: [
+            new OpenLayers.Control.Navigation(),
+            new OpenLayers.Control.PanZoom(),
+            new OpenLayers.Control.Attribution()
+        ],
+        theme: null
+    });
+
+    baseLayer = new OpenLayers.Layer.OSM("OSM");
+
+    var viewLayer = new OpenLayers.Layer.Vector("View Layer", {renderers: ["SVG2"]});
+    map.addLayers([baseLayer, viewLayer]);
+
+    viewLayer.addFeatures([wkt.read("LINESTRING(2.4356174739332 48.816618174539, 2.4313688548536 48.826083884311)")]);
+    var lonLat = new OpenLayers.LonLat( 2.43686, 48.81742) .transform( WGS84, Mercator);
+    map.setCenter (lonLat, 16);
+}
+</script>
+
+<body onload="init()">
+<div id="map"></div>
+<p>The map should show a line on top of the OSM layer. If it does not, then
+    either the CSS or the SVG coordinate range is exceeded.</p>
+<p>This test only works on browsers that support SVG.</p>
+</body>
+</html>