From 6811dc3745f41f6a63e454bdd4dedfc980a7cb7a Mon Sep 17 00:00:00 2001
From: ahocevar <andreas.hocevar@gmail.com>
Date: Wed, 10 Feb 2010 07:04:31 +0000
Subject: [PATCH] Fix initial offset and visibility issues in VML renderer;
 also make sure that all floats are converted to integers (previously using
 toFixed(), now using (num | 0)). p=tschaub,me, r=tschaub,me (closes #2465)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@10039 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
---
 lib/OpenLayers/Renderer/VML.js | 65 ++++++++++++++++++----------------
 tests/Renderer/VML.html        | 11 ++++--
 2 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/lib/OpenLayers/Renderer/VML.js b/lib/OpenLayers/Renderer/VML.js
index 9ace86cb0f..3dff8ecb5d 100644
--- a/lib/OpenLayers/Renderer/VML.js
+++ b/lib/OpenLayers/Renderer/VML.js
@@ -11,7 +11,7 @@
  * Render vector features in browsers with VML capability.  Construct a new
  * VML renderer with the <OpenLayers.Renderer.VML> constructor.
  * 
- * Note that for all calculations in this class, we use toFixed() to round a 
+ * Note that for all calculations in this class, we use (num | 0) to truncate a 
  * float value to an integer. This is done because it seems that VML doesn't 
  * support float values.
  *
@@ -63,7 +63,6 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
         
         OpenLayers.Renderer.Elements.prototype.initialize.apply(this, 
                                                                 arguments);
-        this.offset = {x: 0, y: 0};
     },
 
     /**
@@ -102,9 +101,9 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
                                                                arguments);
         var resolution = this.getResolution();
     
-        var left = extent.left/resolution;
-        var top = extent.top/resolution - this.size.h;
-        if (resolutionChanged) {
+        var left = (extent.left/resolution) | 0;
+        var top = (extent.top/resolution - this.size.h) | 0;
+        if (resolutionChanged || !this.offset) {
             this.offset = {x: left, y: top};
             left = 0;
             top = 0;
@@ -233,8 +232,8 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
                 var yOffset = (style.graphicYOffset != undefined) ?
                     style.graphicYOffset : -(0.5 * height);
                 
-                node.style.left = ((geometry.x/resolution - this.offset.x)+xOffset).toFixed();
-                node.style.top = ((geometry.y/resolution - this.offset.y)-(yOffset+height)).toFixed();
+                node.style.left = (((geometry.x/resolution - this.offset.x)+xOffset) | 0) + "px";
+                node.style.top = (((geometry.y/resolution - this.offset.y)-(yOffset+height)) | 0) + "px";
                 node.style.width = width + "px";
                 node.style.height = height + "px";
                 node.style.flip = "y";
@@ -445,10 +444,13 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
 
     /**
      * Method: postDraw
-     * Some versions of Internet Explorer seem to be unable to set fillcolor
-     * and strokecolor to "none" correctly before the fill node is appended to
-     * a visible vml node. This method takes care of that and sets fillcolor
-     * and strokecolor again if needed.
+     * Does some node postprocessing to work around browser issues:
+     * - Some versions of Internet Explorer seem to be unable to set fillcolor
+     *   and strokecolor to "none" correctly before the fill node is appended
+     *   to a visible vml node. This method takes care of that and sets
+     *   fillcolor and strokecolor again if needed.
+     * - In some cases, a node won't become visible after being drawn. Setting
+     *   style.visibility to "visible" works around that.
      * 
      * Parameters:
      * node - {DOMElement}
@@ -464,6 +466,7 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
                 node.strokecolor != strokeColor) {
             node.strokecolor = strokeColor;
         }
+        node.style.visibility = "visible";
     },
 
 
@@ -483,10 +486,10 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
             var resolution = this.getResolution();
         
             var scaledBox = 
-                new OpenLayers.Bounds((bbox.left/resolution - this.offset.x).toFixed(),
-                                      (bbox.bottom/resolution - this.offset.y).toFixed(),
-                                      (bbox.right/resolution - this.offset.x).toFixed(),
-                                      (bbox.top/resolution - this.offset.y).toFixed());
+                new OpenLayers.Bounds((bbox.left/resolution - this.offset.x) | 0,
+                                      (bbox.bottom/resolution - this.offset.y) | 0,
+                                      (bbox.right/resolution - this.offset.x) | 0,
+                                      (bbox.top/resolution - this.offset.y) | 0);
             
             // Set the internal coordinate system to draw the path
             node.style.left = scaledBox.left + "px";
@@ -652,8 +655,8 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
         if(!isNaN(geometry.x)&& !isNaN(geometry.y)) {
             var resolution = this.getResolution();
 
-            node.style.left = ((geometry.x /resolution - this.offset.x).toFixed() - radius) + "px";
-            node.style.top = ((geometry.y /resolution - this.offset.y).toFixed() - radius) + "px";
+            node.style.left = (((geometry.x /resolution - this.offset.x) | 0) - radius) + "px";
+            node.style.top = (((geometry.y /resolution - this.offset.y) | 0) - radius) + "px";
     
             var diameter = radius * 2;
             
@@ -718,9 +721,9 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
         var comp, x, y;
         for (var i = 0; i < numComponents; i++) {
             comp = geometry.components[i];
-            x = (comp.x/resolution - this.offset.x);
-            y = (comp.y/resolution - this.offset.y);
-            parts[i] = " " + x.toFixed() + "," + y.toFixed() + " l ";
+            x = (comp.x/resolution - this.offset.x) | 0;
+            y = (comp.y/resolution - this.offset.y) | 0;
+            parts[i] = " " + x + "," + y + " l ";
         }
         var end = (closeLine) ? " x e" : " e";
         node.path = "m" + parts.join("") + end;
@@ -751,9 +754,9 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
             path.push("m");
             for (i=0, ilen=linearRing.components.length; i<ilen; i++) {
                 comp = linearRing.components[i];
-                x = comp.x / resolution - this.offset.x;
-                y = comp.y / resolution - this.offset.y;
-                path.push(" " + x.toFixed() + "," + y.toFixed());
+                x = (comp.x / resolution - this.offset.x) | 0;
+                y = (comp.y / resolution - this.offset.y) | 0;
+                path.push(" " + x + "," + y);
                 if (i==0) {
                     path.push(" l");
                 }
@@ -779,10 +782,10 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
     drawRectangle: function(node, geometry) {
         var resolution = this.getResolution();
     
-        node.style.left = (geometry.x/resolution - this.offset.x) + "px";
-        node.style.top = (geometry.y/resolution - this.offset.y) + "px";
-        node.style.width = geometry.width/resolution + "px";
-        node.style.height = geometry.height/resolution + "px";
+        node.style.left = ((geometry.x/resolution - this.offset.x) | 0) + "px";
+        node.style.top = ((geometry.y/resolution - this.offset.y) | 0) + "px";
+        node.style.width = ((geometry.width/resolution) | 0) + "px";
+        node.style.height = ((geometry.height/resolution) | 0) + "px";
         
         return node;
     },
@@ -801,8 +804,8 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
         var textbox = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_textbox", "olv:textbox");
         
         var resolution = this.getResolution();
-        label.style.left = (location.x/resolution - this.offset.x).toFixed() + "px";
-        label.style.top = (location.y/resolution - this.offset.y).toFixed() + "px";
+        label.style.left = ((location.x/resolution - this.offset.x) | 0) + "px";
+        label.style.top = ((location.y/resolution - this.offset.y) | 0) + "px";
         label.style.flip = "y";
 
         textbox.innerText = style.label;
@@ -869,8 +872,8 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
         var comp, x, y;
         for (var i=0, len=geometry.components.length; i<len; i++) {
             comp = geometry.components[i];
-            x = comp.x / resolution - this.offset.x;
-            y = comp.y / resolution - this.offset.y;
+            x = (comp.x / resolution - this.offset.x) | 0;
+            y = (comp.y / resolution - this.offset.y) | 0;
             if ((i%3)==0 && (i/3)==0) {
                 path.push("m");
             } else if ((i%3)==1) {
diff --git a/tests/Renderer/VML.html b/tests/Renderer/VML.html
index cf1412779b..0c5857cd46 100644
--- a/tests/Renderer/VML.html
+++ b/tests/Renderer/VML.html
@@ -48,7 +48,7 @@
             return;
         }
         
-        t.plan(3);
+        t.plan(4);
         
         OpenLayers.Renderer.Elements.prototype._setExtent =
             OpenLayers.Renderer.Elements.prototype.setExtent;
@@ -71,8 +71,9 @@
         
         t.eq(g_SetExtent, true, "Elements.setExtent() called");
         
-        t.ok(r.root.coordorigin == "2,4", "coordorigin is correct");
+        t.ok(r.root.coordorigin == "0,0", "coordorigin is correct");
         t.ok(r.root.coordsize == "4,4", "coordsize is correct");
+        t.eq(r.offset, {x:2, y:4}, "offset is correct");
         
         OpenLayers.Renderer.Elements.prototype.setExtent =
             OpenLayers.Renderer.Elements.prototype._setExtent;
@@ -106,6 +107,7 @@
         t.plan(2);
 
         var r = new OpenLayers.Renderer.VML(document.body);
+        r.offset = {x: 0, y: 0};
         
         r.LABEL_ID_SUFFIX = "";
         r.getResolution = function() {
@@ -155,6 +157,7 @@
         t.plan(4);
         
         var r = new OpenLayers.Renderer.VML(document.body);
+        r.offset = {x: 0, y: 0};
         r.resolution = 0.5;
         
         var node = document.createElement('div');
@@ -182,6 +185,7 @@
         t.plan(6);
         
         var r = new OpenLayers.Renderer.VML(document.body);
+        r.offset = {x: 0, y: 0};
         r.resolution = 1;
         
         var node = document.createElement('div');
@@ -263,6 +267,7 @@
         t.plan(8);
         
         var r = new OpenLayers.Renderer.VML(document.body);
+        r.offset = {x: 0, y: 0};
         r.resolution = 0.5;
         
         var node = document.createElement('div');
@@ -303,6 +308,7 @@
         t.plan(2);
         
         var r = new OpenLayers.Renderer.VML(document.body);
+        r.offset = {x: 0, y: 0};
         r.resolution = 0.5;
         
         g_SetNodeDimension = false;
@@ -347,6 +353,7 @@
         t.plan(4);
         
         var r = new OpenLayers.Renderer.VML(document.body);
+        r.offset = {x: 0, y: 0};
         r.resolution = 0.5;
         
         var node = document.createElement('div');