Merge pull request #597 from OpenGeoscience/stroke-polygons

Add stroking to polygons

Author: manthey

examples/polygons/main.js

@@ -36,14 +36,21 @@ $(function () {
         return {x: d[0], y: d[1]};
       })
       .data(data)
-      .style('uniformPolygon', true)
-      .style('fillOpacity', query.opacity ? parseFloat(query.opacity) : 0.5)
-      .style('fillColor', function (d, idx, poly, polyidx) {
-        return poly.hover ? hoverColor : (polyColor ? polyColor : {
-          r: (polyidx % 256) / 255,
-          g: polyidx / (data.length - 1),
-          b: 0.25
-        });
+      .style({
+        uniformPolygon: true,
+        fillOpacity: query.opacity ? parseFloat(query.opacity) : 0.5,
+        fillColor: function (d, idx, poly, polyidx) {
+          return poly.hover ? hoverColor : (polyColor ? polyColor : {
+            r: (polyidx % 256) / 255,
+            g: polyidx / (data.length - 1),
+            b: 0.25
+          });
+        },
+        stroke: query.stroke !== 'false' ? function (poly, polyidx) {
+          return poly.hover;
+        } : false,
+        strokeWidth: query.strokeWidth ? parseFloat(query.strokeWidth) : 1,
+        strokeColor: {r: 0, g: 0, b: 0}
       })
       .geoOn(geo.event.feature.mouseover, function (evt) {
         if (!evt.data.hover) {

package.json

@@ -64,7 +64,7 @@
     "sinon": "1.17.3",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
-    "vgl": "0.3.6",
+    "vgl": "0.3.8",
     "webpack": "^1.12.14",
     "webpack-dev-server": "^1.14.1",
     "xmlbuilder": "^8.2.2"

src/gl/lineFeature.js

@@ -61,14 +61,12 @@ var gl_lineFeature = function (arg) {
           'uniform float pixelWidth;',
           'uniform float aspect;',
 
-          'varying vec3 strokeColorVar;',
-          'varying float strokeWidthVar;',
-          'varying float strokeOpacityVar;',
+          'varying vec4 strokeColorVar;',
 
           'void main(void)',
           '{',
-      /* If any vertex has been deliberately set to a negative opacity,
-       * skip doing computations on it. */
+          /* If any vertex has been deliberately set to a negative opacity,
+           * skip doing computations on it. */
           '  if (strokeOpacity < 0.0) {',
           '    gl_Position = vec4(2, 2, 0, 1);',
           '    return;',
@@ -86,9 +84,7 @@ var gl_lineFeature = function (arg) {
           '  if (worldPrev.w != 0.0) {',
           '    worldPrev = worldPrev/worldPrev.w;',
           '  }',
-          '  strokeColorVar = strokeColor;',
-          '  strokeWidthVar = strokeWidth;',
-          '  strokeOpacityVar = strokeOpacity;',
+          '  strokeColorVar = vec4(strokeColor, strokeOpacity);',
           '  vec2 deltaNext = worldNext.xy - worldPos.xy;',
           '  vec2 deltaPrev = worldPos.xy - worldPrev.xy;',
           '  float angleNext = 0.0, anglePrev = 0.0;',
@@ -98,6 +94,8 @@ var gl_lineFeature = function (arg) {
           '  else  anglePrev = atan(deltaPrev.y / aspect, deltaPrev.x);',
           '  if (deltaNext.xy == vec2(0.0, 0.0)) angleNext = anglePrev;',
           '  float angle = (anglePrev + angleNext) / 2.0;',
+          '  if (abs(anglePrev - angleNext) >= PI)',
+          '    angle += PI;',
           '  float cosAngle = cos(anglePrev - angle);',
           '  if (cosAngle < 0.1) { cosAngle = sign(cosAngle) * 1.0; angle = 0.0; }',
           '  float distance = (offset * strokeWidth * pixelWidth) /',
@@ -117,11 +115,9 @@ var gl_lineFeature = function (arg) {
           '#ifdef GL_ES',
           '  precision highp float;',
           '#endif',
-          'varying vec3 strokeColorVar;',
-          'varying float strokeWidthVar;',
-          'varying float strokeOpacityVar;',
+          'varying vec4 strokeColorVar;',
           'void main () {',
-          '  gl_FragColor = vec4 (strokeColorVar, strokeOpacityVar);',
+          '  gl_FragColor = strokeColorVar;',
           '}'
         ].join('\n'),
         shader = new vgl.shader(vgl.GL.FRAGMENT_SHADER);
@@ -206,7 +202,7 @@ var gl_lineFeature = function (arg) {
             nextBuf[dest3 + 1] = position[v.next + 1];
             nextBuf[dest3 + 2] = position[v.next + 2];
             offsetBuf[dest] = order[k][1];
-            /* We can ignore the indicies (they will all be zero) */
+            /* We can ignore the indices (they will all be zero) */
             strokeWidthBuf[dest] = v.strokeWidth;
             strokeColorBuf[dest3] = v.strokeColor.r;
             strokeColorBuf[dest3 + 1] = v.strokeColor.g;

src/gl/object.js

@@ -1,6 +1,3 @@
-var inherit = require('../inherit');
-var sceneObject = require('../sceneObject');
-
 //////////////////////////////////////////////////////////////////////////////
 /**
  * VGL specific subclass of object which rerenders when the object is drawn.
@@ -19,7 +16,6 @@ var gl_object = function (arg) {
   if (!(this instanceof object)) {
     return new gl_object(arg);
   }
-  sceneObject.call(this);
 
   var m_this = this,
       s_draw = this.draw;
@@ -39,6 +35,5 @@ var gl_object = function (arg) {
   return this;
 };
 
-inherit(gl_object, sceneObject);
 module.exports = gl_object;
 

src/gl/polygonFeature.js

@@ -49,18 +49,15 @@ var gl_polygonFeature = function (arg) {
           'attribute float fillOpacity;',
           'uniform mat4 modelViewMatrix;',
           'uniform mat4 projectionMatrix;',
-          'uniform float pixelWidth;',
-          'varying vec3 fillColorVar;',
-          'varying float fillOpacityVar;',
+          'varying vec4 fillColorVar;',
 
           'void main(void)',
           '{',
           '  vec4 clipPos = projectionMatrix * modelViewMatrix * vec4(pos.xyz, 1);',
           '  if (clipPos.w != 0.0) {',
           '    clipPos = clipPos/clipPos.w;',
           '  }',
-          '  fillColorVar = fillColor;',
-          '  fillOpacityVar = fillOpacity;',
+          '  fillColorVar = vec4(fillColor, fillOpacity);',
           '  gl_Position = clipPos;',
           '}'
         ].join('\n'),
@@ -74,10 +71,9 @@ var gl_polygonFeature = function (arg) {
           '#ifdef GL_ES',
           '  precision highp float;',
           '#endif',
-          'varying vec3 fillColorVar;',
-          'varying float fillOpacityVar;',
+          'varying vec4 fillColorVar;',
           'void main () {',
-          '  gl_FragColor = vec4 (fillColorVar, fillOpacityVar);',
+          '  gl_FragColor = fillColorVar;',
           '}'
         ].join('\n'),
         shader = new vgl.shader(vgl.GL.FRAGMENT_SHADER);
@@ -105,20 +101,23 @@ var gl_polygonFeature = function (arg) {
     var posBuf, posFunc,
         fillColor, fillColorFunc, fillColorVal,
         fillOpacity, fillOpacityFunc, fillOpacityVal,
+        fillFunc, fillVal,
         uniformPolyFunc, uniform,
         indices,
         items = [],
         target_gcs = m_this.gcs(),
         map_gcs = m_this.layer().map().gcs(),
         numPts = 0,
         geom = m_mapper.geometryData(),
-        color, opacity, d, d3, vertices, i, j, k, n,
+        color, opacity, fill, d, d3, vertices, i, j, k, n,
         record, item, itemIndex, original;
 
     fillColorFunc = m_this.style.get('fillColor');
     fillColorVal = util.isFunction(m_this.style('fillColor')) ? undefined : fillColorFunc();
     fillOpacityFunc = m_this.style.get('fillOpacity');
     fillOpacityVal = util.isFunction(m_this.style('fillOpacity')) ? undefined : fillOpacityFunc();
+    fillFunc = m_this.style.get('fill');
+    fillVal = util.isFunction(m_this.style('fill')) ? undefined : fillFunc();
     uniformPolyFunc = m_this.style.get('uniformPolygon');
 
     if (!onlyStyle) {
@@ -190,6 +189,7 @@ var gl_polygonFeature = function (arg) {
     d = d3 = 0;
     color = fillColorVal;
     opacity = fillOpacityVal;
+    fill = fillVal;
     for (k = 0; k < items.length; k += 1) {
       n = items[k].triangles.length;
       vertices = items[k].vertices;
@@ -205,6 +205,12 @@ var gl_polygonFeature = function (arg) {
           opacity = fillOpacityFunc(vertices[0], 0, item, itemIndex);
         }
       }
+      if (fillVal === undefined) {
+        fill = fillFunc(item, itemIndex);
+      }
+      if (!fill) {
+        opacity = 0;
+      }
       if (uniform && onlyStyle && items[k].uniform && items[k].color &&
           color.r === items[k].color.r && color.g === items[k].color.g &&
           color.b === items[k].color.b && opacity === items[k].opacity) {

src/gl/quadFeature.js

@@ -262,7 +262,7 @@ var gl_quadFeature = function (arg) {
         m_quads.clrQuads.length * 12 > m_clrposbuf.length) {
       setupColorDrawObjects(renderState);
     }
-    mapper.s_render(renderState);
+    mapper.s_render(renderState, true);
 
     var context = renderState.m_context, opacity = 1, color;
 
@@ -289,6 +289,7 @@ var gl_quadFeature = function (arg) {
       context.drawArrays(vgl.GL.TRIANGLE_STRIP, 0, 4);
     });
     context.bindBuffer(vgl.GL.ARRAY_BUFFER, null);
+    mapper.undoBindVertexData(renderState);
   };
 
   /**
@@ -307,7 +308,7 @@ var gl_quadFeature = function (arg) {
         m_quads.imgQuads.length * 12 > m_imgposbuf.length) {
       setupDrawObjects(renderState);
     }
-    mapper.s_render(renderState);
+    mapper.s_render(renderState, true);
 
     var context = renderState.m_context, opacity = 1;
 
@@ -335,6 +336,7 @@ var gl_quadFeature = function (arg) {
       quad.texture.undoBind(renderState);
     });
     context.bindBuffer(vgl.GL.ARRAY_BUFFER, null);
+    mapper.undoBindVertexData(renderState);
   };
 
   ////////////////////////////////////////////////////////////////////////////

src/jsonReader.js

@@ -269,10 +269,10 @@ var jsonReader = function (arg) {
             })
             .position(m_this._position)
             .style({
-              fill: m_this._style('fill', true, polygons),
+              fill: m_this._style('fill', true),
               fillColor: m_this._style('fillColor', '#b0de5c', polygons, convertColor),
               fillOpacity: m_this._style('fillOpacity', 0.8, polygons),
-              stroke: m_this._style('stroke', true, polygons),
+              stroke: m_this._style('stroke', true),
               strokeColor: m_this._style('strokeColor', '#999999', polygons, convertColor),
               strokeWidth: m_this._style('strokeWidth', 2, polygons),
               strokeOpacity: m_this._style('strokeOpacity', 1, polygons)

src/lineFeature.js

@@ -203,7 +203,7 @@ var lineFeature = function (arg) {
       {},
       {
         'strokeWidth': 1.0,
-      // Default to gold color for lines
+        // Default to gold color for lines
         'strokeColor': { r: 1.0, g: 0.8431372549, b: 0.0 },
         'strokeStyle': 'solid',
         'strokeOpacity': 1.0,
@@ -247,7 +247,7 @@ lineFeature.create = function (layer, spec) {
 lineFeature.capabilities = {
   /* support for solid-colored, constant-width lines */
   basic: 'line.basic',
-  /* support for lines that very in width and color */
+  /* support for lines that vary in width and color */
   multicolor: 'line.multicolor'
 };