From 7ddd7652fea7defe0a3d9f7c9547a1cbe8bccab1 Mon Sep 17 00:00:00 2001
From: javi <qualopec@gmail.com>
Date: Sun, 19 Oct 2014 12:07:41 +0200
Subject: [PATCH] no render when maker-width = 0 or opacity = 0

there was no way to avoid rendering in some conditions, with this patch the points are not rendered when marker-width or opacity is 0. Thin lines are also not rendered, this avoid to spend extra time rendering them when there are really thin and avoid a safari rendering bug (think lines are rendered wider than they should)
---
 lib/torque/renderer/cartocss_render.js |  6 +++-
 lib/torque/renderer/point.js           | 16 +++++++----
 test/renderer/point.js                 | 38 ++++++++++++++++++++++++++
 test/suite.html                        |  1 +
 4 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/lib/torque/renderer/cartocss_render.js b/lib/torque/renderer/cartocss_render.js
index 3d00f9a..2b2ed64 100644
--- a/lib/torque/renderer/cartocss_render.js
+++ b/lib/torque/renderer/cartocss_render.js
@@ -3,6 +3,10 @@
   exports.torque = exports.torque || {};
 
   var TAU = Math.PI*2;
+  // min value to render a line. 
+  // it does not make sense to render a line of a width is not even visible
+  var LINEWIDTH_MIN_VALUE = 0.05; 
+
   function renderPoint(ctx, st) {
     ctx.fillStyle = st.fillStyle;
     var pixel_size = st['point-radius'];
@@ -22,7 +26,7 @@
 
     // stroke
     ctx.globalAlpha = 1.0;
-    if (st.strokeStyle && st.lineWidth) {
+    if (st.strokeStyle && st.lineWidth && st.lineWidth > LINEWIDTH_MIN_VALUE) {
       if (st.strokeOpacity) {
         ctx.globalAlpha = st.strokeOpacity;
       }
diff --git a/lib/torque/renderer/point.js b/lib/torque/renderer/point.js
index 068ae96..c4dc2d9 100644
--- a/lib/torque/renderer/point.js
+++ b/lib/torque/renderer/point.js
@@ -69,7 +69,11 @@
 
       var pointSize = st['point-radius'];
       if (!pointSize) {
-        throw new Error("marker-width property should be set");
+        return null;
+      }
+
+      if (st.fillOpacity === 0 && !st.strokeOpacity) {
+        return null;
       }
 
       var canvas = document.createElement('canvas');
@@ -143,12 +147,14 @@
           var c = tile.renderData[pixelIndex + p];
           if(c) {
            var sp = sprites[c];
-           if(!sp) {
+           if(sp === undefined) {
              sp = sprites[c] = this.generateSprite(shader, c, _.extend({ zoom: tile.z, 'frame-offset': frame_offset }, shaderVars));
            }
-           var x = tile.x[posIdx]- (sp.width >> 1);
-           var y = tileMax - tile.y[posIdx]; // flip mercator
-           ctx.drawImage(sp, x, y - (sp.height >> 1));
+           if (sp) {
+             var x = tile.x[posIdx]- (sp.width >> 1);
+             var y = tileMax - tile.y[posIdx]; // flip mercator
+             ctx.drawImage(sp, x, y - (sp.height >> 1));
+           }
           }
         }
       }
diff --git a/test/renderer/point.js b/test/renderer/point.js
index 6cf8ad0..14b15a9 100644
--- a/test/renderer/point.js
+++ b/test/renderer/point.js
@@ -48,6 +48,44 @@ test('render conditional point layers', function() {
   equal(st['point-radius'], 20);
 });
 
+test('should generate sprite when maker-fill > 0', function() {
+  var css = [
+  '#test {',
+  '  marker-width: 10;',
+  '}'].join('\n');
+
+  renderer.setCartoCSS(css)
+  var layer = renderer._shader.getLayers()[0];
+  var sprite = renderer.generateSprite(layer, 0, { zoom: 0 })
+  notEqual(sprite, null);
+});
+
+
+test('should not generate sprite when maker-fill: 0', function() {
+  var css = [
+  '#test {',
+  '  marker-width: 0;',
+  '}'].join('\n');
+
+  renderer.setCartoCSS(css)
+  var layer = renderer._shader.getLayers()[0];
+  var sprite = renderer.generateSprite(layer, 0, { zoom: 0 })
+  equal(sprite, null);
+});
+
+test('should not generate sprite when maker-opacity: 0', function() {
+  var css = [
+  '#test {',
+  '  marker-width: 10;',
+  '  marker-opacity: 0;',
+  '}'].join('\n');
+
+  renderer.setCartoCSS(css)
+  var layer = renderer._shader.getLayers()[0];
+  var sprite = renderer.generateSprite(layer, 0, { zoom: 0 })
+  equal(sprite, null);
+});
+
 test('get value for position', function() {
   var mercator = new torque.Mercator();
   tile = {
diff --git a/test/suite.html b/test/suite.html
index 1711d38..143059a 100644
--- a/test/suite.html
+++ b/test/suite.html
@@ -21,6 +21,7 @@
   <script src="../lib/torque/leaflet/canvas_layer.js"></script>
   <script src="../lib/torque/renderer/point.js"></script>
   <script src="../lib/torque/renderer/rectangle.js"></script>
+  <script src="../lib/torque/renderer/cartocss_render.js"></script>
   <script src="../lib/torque/provider.json.js"></script>
   <script src="../lib/torque/provider.windshaft.js"></script>
   <script src="../lib/torque/provider.jsonarray.js"></script>