New SVG2 renderer for increased performance and smaller library size. Not enabled by default. To use, include 'SVG2' in the renderers array of your OpenLayers.Layer.Vector instance. r=crschmidt (closes #2802)

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

tests/Layer/Vector.html

@@ -458,9 +458,7 @@
         t.plan(9);
         
         var map = new OpenLayers.Map("map");
-        var layer = new OpenLayers.Layer.Vector(null, {
-            drawn: true
-        });
+        var layer = new OpenLayers.Layer.Vector();
         map.addLayer(layer);
         var feature = new OpenLayers.Feature.Vector(
             new OpenLayers.Geometry.Point(10, 10)
@@ -477,6 +475,7 @@
         };
         
         // draw feature with no state
+        layer.drawn = true;
         layer.drawFeature(feature);
         t.ok(log.feature === feature, "[no state] drawFeature called with correct feature");
         t.ok(log.style.display !== "none", "[no state] drawFeature called with style display not none");
@@ -707,6 +706,54 @@
                         (-y + customStyle6.graphicYOffset).toFixed().toString(),
                         "graphicYOffset correctly set");
         }
+        if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.SVG2') {
+                feature.style = customStyle1;
+                layer.drawFeature(feature);
+                var resolution = map.getResolution();
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                             (2*customStyle1.pointRadius*resolution).toString(),
+                             "given a pointRadius, width equals 2*pointRadius");
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                             (2*customStyle1.pointRadius*resolution).toString(),
+                             "given a pointRadius, height equals 2*pointRadius");
+                feature.style = customStyle2;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                             root.firstChild.getAttributeNS(null, 'height'),
+                             "given a graphicWidth, width equals height");
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                             (customStyle2.graphicWidth*resolution).toString(),
+                             "width is set correctly");
+                feature.style = customStyle3;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                             root.firstChild.getAttributeNS(null, 'width'),
+                             "given a graphicHeight, height equals width");
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                             (customStyle3.graphicHeight*resolution).toString(),
+                             "height is set correctly");
+                feature.style = customStyle4;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                             (customStyle4.graphicHeight*resolution).toString(),
+                             "given graphicHeight and graphicWidth, both are set: height");
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                             (customStyle4.graphicWidth*resolution).toString(),
+                             "given graphicHeight and graphicWidth, both are set: width");
+                feature.style = customStyle5;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'style'),
+                             'opacity: '+customStyle5.graphicOpacity.toString()+((OpenLayers.Util.getBrowserName() == "opera" || OpenLayers.Util.getBrowserName() == "safari") ? "" : ';'),
+                             "graphicOpacity correctly set");
+                feature.style = customStyle6;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'x'),
+                        (geometryX + customStyle6.graphicXOffset*resolution).toString(),
+                        "graphicXOffset correctly set");
+                t.eq(root.firstChild.getAttributeNS(null, 'y'),
+                        (-geometryY + customStyle6.graphicYOffset*resolution).toString(),
+                        "graphicYOffset correctly set");
+        }
         if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.VML') {
                 feature.style = customStyle1;
                 layer.drawFeature(feature);

tests/Renderer/SVG2.html

@@ -0,0 +1,424 @@
+<html>
+<head>
+<script src="../OLLoader.js"></script>
+  <script type="text/javascript">
+
+    var geometry = null, node = null;
+    
+    function test_SVG_constructor(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(1);
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        t.ok(r instanceof OpenLayers.Renderer.SVG2, "new OpenLayers.Renderer.SVG2 returns SVG object" );
+    }
+    
+    function test_SVG_destroy(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(1);
+        
+        var g_Destroy = false;
+        
+        OpenLayers.Renderer.Elements.prototype._destroy = 
+            OpenLayers.Renderer.Elements.prototype.destroy;
+            
+        OpenLayers.Renderer.prototype.destroy = function() {
+            g_Destroy = true;
+        }
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        r.destroy();
+        
+        t.eq(g_Destroy, true, "OpenLayers.Renderer.Elements.destroy() called");
+        
+        OpenLayers.Renderer.prototype.destroy = 
+            OpenLayers.Renderer.prototype._destroy;
+    }
+    
+    function test_SVG_updateDimensions(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(5);
+        
+        OpenLayers.Renderer.SVG2.prototype._setExtent =
+            OpenLayers.Renderer.SVG2.prototype.setExtent;
+        
+        var g_SetExtent = false;
+        OpenLayers.Renderer.SVG2.prototype.setExtent = function() {
+            g_SetExtent = true;
+            OpenLayers.Renderer.SVG2.prototype._setExtent.apply(this, arguments);
+        }
+                
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        var extent = new OpenLayers.Bounds(1,2,3,4);
+        r.map = {
+            getResolution: function() {
+                return 0.5;
+            },
+            getExtent: function() {
+                return extent;
+            },
+            getMaxExtent: function() {
+                return extent;
+            }
+        }
+        r.updateDimensions();
+        
+        t.eq(g_SetExtent, true, "Elements.setExtent() called");
+        
+        t.eq(r.rendererRoot.getAttributeNS(null, "width"), "4", "width is correct");
+        t.eq(r.rendererRoot.getAttributeNS(null, "height"), "4", "height is correct");
+        t.eq(r.rendererRoot.getAttributeNS(null, "viewBox"), "1 -4 2 2", "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");
+
+        OpenLayers.Renderer.SVG2.prototype.setExtent =
+            OpenLayers.Renderer.SVG2.prototype._setExtent;
+    }
+    
+    function test_SVG_drawpoint(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+    
+        t.plan(1);
+
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        
+        var properDraw = false;
+        var g_Radius = null;
+        r.drawCircle = function(n, g, r) {
+            properDraw = true;
+            g_Radius = 1;
+        }
+        r.drawPoint();
+        
+        t.ok(properDraw && g_Radius == 1, "drawPoint called drawCircle with radius set to 1");
+    }
+    
+    function test_SVG_drawcircle(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(5);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        r.resolution = 0.5;
+        r.left = 0;
+        r.top = 0;
+        
+        var node = document.createElement('div');
+        
+        var geometry = {
+            x: 1,
+            y: 2
+        }
+        
+        r.drawCircle(node, geometry, 3);
+        
+        t.eq(node.getAttributeNS(null, 'cx'), '1', "cx is correct");
+        t.eq(node.getAttributeNS(null, 'cy'), '-2', "cy is correct");
+        t.eq(node._radius, 3, "radius preset is correct");
+       
+        // #1274: out of bound node fails when first added
+        var geometry = {
+            x: 10000000,
+            y: 200000000,
+            CLASS_NAME: "OpenLayers.Geometry.Point",
+            id: "foo",
+            getBounds: function() {return {bottom: 0}}
+        }
+        node.id = geometry.id;
+        r.root.appendChild(node);
+
+        var drawCircleCalled = false;
+        r.drawCircle = function() {
+            drawCircleCalled = true;
+            return OpenLayers.Renderer.SVG2.prototype.drawCircle.apply(r, arguments);
+        }
+        
+        r.drawGeometry(geometry, {pointRadius: 3}, "blah_4000");
+        t.eq(drawCircleCalled, true, "drawCircle called on drawGeometry for a point geometry.")
+        t.ok(node.parentNode != r.root, "circle will not be drawn when coordinates are outside the valid range");
+    }
+    
+    function test_SVG_drawlinestring(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(2);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        
+        var node = document.createElement('div');
+        
+        var geometry = {
+            components: "foo"
+        }
+        g_GetString = false;
+        g_Components = null;
+        r.getComponentsString = function(c) {
+            g_GetString = true;
+            g_Components = c;
+            return "bar";
+        }
+        
+        r.drawLineString(node, geometry);
+        
+        t.ok(g_GetString && g_Components == "foo", "getComponentString is called with valid arguments");
+        t.eq(node.getAttributeNS(null, "points"), "bar", "points attribute is correct");
+    }
+    
+    function test_SVG_drawlinearring(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(2);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        
+        var node = document.createElement('div');
+        
+        var geometry = {
+            components: "foo"
+        }
+        g_GetString = false;
+        g_Components = null;
+        r.getComponentsString = function(c) {
+            g_GetString = true;
+            g_Components = c;
+            return "bar";
+        }
+        
+        r.drawLinearRing(node, geometry);
+        
+        t.ok(g_GetString, "getComponentString is called with valid arguments");
+        t.eq(node.getAttributeNS(null, "points"), "bar", "points attribute is correct");
+    }
+
+    function test_SVG_drawpolygon(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(3);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        
+        var node = document.createElement('div');
+        
+        var linearRings = [{
+            components: ["foo"]
+        },{
+            components: ["bar"]
+        }]
+        
+        var geometry = {
+            components: linearRings
+        }
+        g_GetString = false;
+        r.getShortString = function(c) {
+            g_GetString = true;
+            return c;
+        }
+        
+        r.drawPolygon(node, geometry);
+        
+        t.ok(g_GetString, "getShortString is called");
+        t.eq(node.getAttributeNS(null, "d"), "M foo M bar z", "d attribute is correctly set");
+        t.eq(node.getAttributeNS(null, "fill-rule"), "evenodd", "fill-rule attribute is correctly set");
+    }
+
+    function test_SVG_drawrectangle(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(4);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        r.resolution = 0.5;
+        r.left = 0;
+        r.top = 0;
+        
+        var node = document.createElement('div');
+        
+        var geometry = {
+            x: 1,
+            y: 2,
+            width: 3,
+            height: 4
+        }
+        
+        r.drawRectangle(node, geometry);
+        
+        t.eq(node.getAttributeNS(null, "x"), "1", "x attribute is correctly set");
+        t.eq(node.getAttributeNS(null, "y"), "-2", "y attribute is correctly set");
+        t.eq(node.getAttributeNS(null, "width"), "3", "width attribute is correctly set");
+        t.eq(node.getAttributeNS(null, "height"), "4", "height attribute is correctly set");
+    }
+    
+    function test_SVG_drawsurface(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(2);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        
+        var node = document.createElement('div');
+        
+        var geometry = {
+            components: ['foo', 'bar', 'dude']
+        }
+        g_GetString = false;
+        r.getShortString = function(c) {
+            g_GetString = true;
+            return c;
+        }
+        
+        r.drawSurface(node, geometry);
+        
+        t.ok(g_GetString, "getShortString is called");
+        
+        t.eq(node.getAttributeNS(null, "d"), "M foo C bar dude Z", "d attribute is correctly set");
+    }
+    
+    function test_SVG_getcomponentsstring(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(1);
+        
+        var components = ['foo', 'bar'];
+        
+        OpenLayers.Renderer.SVG2.prototype._getShortString = 
+            OpenLayers.Renderer.SVG2.prototype.getShortString;
+            
+        OpenLayers.Renderer.SVG2.prototype.getShortString = function(p) {
+            return p;
+        };
+        
+        var string = OpenLayers.Renderer.SVG2.prototype.getComponentsString(components);
+        t.eq(string, "foo,bar", "returned string is correct");
+        
+        OpenLayers.Renderer.SVG2.prototype.getShortString = 
+            OpenLayers.Renderer.SVG2.prototype._getShortString;
+    }
+    
+    
+    
+    function test_SVG_getshortstring(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(1);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        r.resolution = 0.5;
+        r.left = 0;
+        r.top = 0;
+        
+        var point = {
+            x: 1,
+            y: 2
+        };
+        
+        var string = r.getShortString(point);
+        t.eq(string, "1,-2", "returned string is correct");
+    }
+    
+    function test_svg_getnodetype(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+
+        t.plan(1);
+         
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+
+        var g = {CLASS_NAME: "OpenLayers.Geometry.Point"}
+        var s = {graphicName: "square"};
+        
+        t.eq(r.getNodeType(g, s), "svg", "Correct node type for well known symbols");
+    }
+        
+    function test_svg_importsymbol(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+
+        t.plan(2);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+
+        r.importSymbol("square");
+
+        var polygon = document.getElementById(r.container.id + "_defs").firstChild.firstChild;
+        
+        var pass = false;
+        for (var i = 0; i < polygon.points.numberOfItems; i++) {
+            var p = polygon.points.getItem(i);
+            pass = p.x === OpenLayers.Renderer.symbol.square[2*i] && 
+                   p.y === OpenLayers.Renderer.symbol.square[2*i+1];
+            if (!pass) {
+                break;
+            }
+        }
+        t.ok(pass, "Square symbol rendered correctly");
+        t.ok(r.symbolMetrics["-square"], "Symbol metrics cached correctly.");
+    }
+        
+    function test_svg_dashstyle(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+
+        t.plan(5);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+
+        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dot"}, 1), "1,4", "dot dasharray created correctly");
+        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dash"}, 1), "4,4", "dash dasharray created correctly");
+        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "longdash"}, 1), "8,4", "longdash dasharray created correctly");
+        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dashdot"}, 1), "4,4,1,4", "dashdot dasharray created correctly");
+        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "longdashdot"}, 1), "8,4,1,4", "dashdot dasharray created correctly");
+    }
+
+  </script>
+</head>
+<body>
+<div id="map" style="width:500px;height:550px"></div>
+</body>
+</html>

tests/list-tests.html

@@ -185,6 +185,7 @@
     <li>Renderer/Canvas.html</li>
     <li>Renderer/Elements.html</li>
     <li>Renderer/SVG.html</li>
+    <li>Renderer/SVG2.html</li>
     <li>Renderer/VML.html</li>
     <li>Request.html</li>
     <li>Request/XMLHttpRequest.html</li>

tests/speed/vector-renderers.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Vector Features Performance Test</title>
+    <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js#startOpened=true"></script>
+    <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="../../examples/style.css" type="text/css" />
+  </head>
+  <body>
+    <h1 id="title">Vector Rendering Performance</h1>
+    <div id="map" class="smallmap"></div>
+    <p>
+    This is a benchmark for vector rendering performance. Test results are
+    written to the debug console.
+    Select a renderer here:
+    <br/>
+    <select id="renderers"></select>
+    </p><p>
+    The benchmark shows the time needed to render the features, and how long a
+    move (drag or zoom) takes. Drag and zoom around to produce move results.
+    </p>
+    <script src="../../lib/OpenLayers.js"></script>
+    <script src="vector-renderers.js"></script>
+  </body>
+</html>

tests/speed/vector-renderers.js

@@ -0,0 +1,70 @@
+var map, vectorLayer, drawFeature, features
+
+map = new OpenLayers.Map('map', {
+    eventListeners: {
+        movestart: function() {
+            console.time("move");
+        },
+        moveend: function() {
+            console.timeEnd("move");
+        }
+    }
+});
+
+// allow testing of specific renderers via "?renderer=Canvas", etc
+var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
+renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
+
+vectorLayer = new OpenLayers.Layer.Vector("Vector Layer", {
+    isBaseLayer: true,
+    renderers: renderer,
+    eventListeners: {
+        beforefeaturesadded: function() {
+            console.time("addFeatures");
+        },
+        featuresadded: function() {
+            console.timeEnd("addFeatures");
+        }
+    }
+});
+
+map.addLayers([vectorLayer]);
+map.addControl(new OpenLayers.Control.MousePosition());
+map.setCenter(new OpenLayers.LonLat(0, 0), 2);
+
+features = new Array(500);
+var x, y, points
+for (var i = 0; i < 500; i++) {
+    x = 90-Math.random()*180;
+    y = 45-Math.random()*90;
+    var pointList = [];
+    for(var p=0; p<19; ++p) {
+        var a = p * (2 * Math.PI) / 20;
+        var r = Math.random() * 3 + 1;
+        var newPoint = new OpenLayers.Geometry.Point(x + (r * Math.cos(a)),
+                                                     y + (r * Math.sin(a)));
+        pointList.push(newPoint);
+    }
+    pointList.push(pointList[0]);
+    features[i] = new OpenLayers.Feature.Vector(
+        new OpenLayers.Geometry.LinearRing(pointList));
+        
+}
+vectorLayer.addFeatures(features);
+
+var select = document.getElementById("renderers");
+var renderers = OpenLayers.Layer.Vector.prototype.renderers;
+var option;
+for (var i=0, len=renderers.length; i<len; i++) {
+    if (OpenLayers.Renderer[renderers[i]].prototype.supported()) {
+        option = document.createElement("option");
+        option.textContent = renderers[i];
+        option.value = renderers[i];
+        option.selected = renderers[i] == vectorLayer.renderer.CLASS_NAME.split(".").pop();
+        select.appendChild(option);
+    }
+}
+select.onchange = function() {
+    window.location.href = window.location.href.split("?")[0] +
+        "?renderer=" + select.options[select.selectedIndex].value;
+}