Merge pull request #597 from OpenGeoscience/stroke-polygons

Add stroking to polygons

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'
 };