Let's take care that background graphic nodes of features with backgroundGraphic style get removed properly when the style is changed to display: "none".

This solves the backgroundGraphic issue of #1709, the remaining issue with externalGraphic will be fixed by #1675.

Thanks jstern81 for the patch, and I am truly impressed by jstern81 finding the right spot in the codebase that needs to be fixed -- as an OpenLayers newcomer.

Tests added by myself. r=me. (references #1709)

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

lib/OpenLayers/Renderer/Elements.js

@@ -463,16 +463,18 @@ OpenLayers.Renderer.Elements = OpenLayers.Class(OpenLayers.Renderer, {
             return;
         };
 
-        //
-        if (style.backgroundGraphic) {
-            this.redrawBackgroundNode(geometry.id, geometry, style, featureId);
-        }
-        
         if (style.display != "none") {
+            if (style.backgroundGraphic) {
+                this.redrawBackgroundNode(geometry.id, geometry, style, featureId);
+            }
             this.redrawNode(geometry.id, geometry, style, featureId);
         } else {
             var node = OpenLayers.Util.getElement(geometry.id);
             if (node) {
+                if (node._style.backgroundGraphic) {
+                    node.parentNode.removeChild(document.getElementById(
+                        geometry.id + this.BACKGROUND_ID_SUFFIX));
+                }
                 node.parentNode.removeChild(node);
             }
         }

tests/Renderer/Elements.html

@@ -127,13 +127,14 @@
     }
     
     function test_Elements_drawGeometry(t) {
-        t.plan(5);
+        t.plan(7);
 
         setUp();
 
         var r = create_renderer();
         
         var element = document.createElement("div");
+        document.body.appendChild(element);
         r.root = element;
 
         r.nodeFactory = function(id, type) {
@@ -145,6 +146,12 @@
             g_Node = node;
             return node;
         };
+        r.redrawBackgroundNode = function(id, geometry, style, featureId) {
+            var el = r.nodeFactory();
+            el.id = "foo_background";
+            r.root.appendChild(el);
+        };
+
         r.getNodeType = function(geometry, style) {
             return "div";
         };
@@ -152,12 +159,13 @@
             id: 'foo',
             CLASS_NAME: 'bar'
         };
-        var style = true;
+        var style = {'backgroundGraphic': 'foo'};
         var featureId = 'dude';
         r.drawGeometry(geometry, style, featureId);
         t.ok(g_Node.parentNode == r.root, "node is correctly appended to root");
+        t.eq(r.root.childNodes.length, 2, "redrawBackgroundNode appended background node");
         t.eq(g_Node._featureId, 'dude', "_featureId is correct");
-        t.ok(g_Node._style, "_style is correct");
+        t.eq(g_Node._style.backgroundGraphic, "foo", "_style is correct");
         t.eq(g_Node._geometryClass, 'bar', "_geometryClass is correct");
 
         var _getElement = OpenLayers.Util.getElement;
@@ -165,9 +173,10 @@
             return g_Node;
         }
         
-        var style = {'display':'none'};
+        style = {'display':'none'};
         r.drawGeometry(geometry, style, featureId);
         t.ok(g_Node.parentNode != r.root, "node is correctly removed");
+        t.ok(!document.getElementById("foo_background"), "background node correctly removed")
             
         tearDown();
     }