Merge pull request #602 from OpenGeoscience/close-lines

Add closed flag to line features

examples/picking/main.js

@@ -1,7 +1,11 @@
+/* globals utils */
+
 // Run after the DOM loads
 $(function () {
   'use strict';
 
+  var query = utils.getQuery();
+
   // Create a map object with the OpenStreetMaps base layer.
   var map = geo.map({
         node: '#map',
@@ -62,9 +66,10 @@ $(function () {
   vglLayer.createFeature('line', {selectionAPI: true})
     .data([window.randomPath(1000, 0.1, -88, 30), window.randomPath(500, 0.05, -110, 40)])
     .style({
-      'strokeColor': function (d, i, e, j) { return (j % 2) ? color(0) : color(1); },
-      'strokeWidth': 5,
-      'strokeOpacity': function (d, i, e) { return e.clicked ? 1 : 0.5; }
+      strokeColor: function (d, i, e, j) { return (j % 2) ? color(0) : color(1); },
+      strokeWidth: 5,
+      strokeOpacity: function (d, i, e) { return e.clicked ? 1 : 0.5; },
+      closed: query.closed === 'true'
     })
     .geoOn(geo.event.feature.mouseover, handleMouseOver)
     .geoOn(geo.event.feature.mouseout, handleMouseOut)
@@ -74,9 +79,10 @@ $(function () {
   svgLayer.createFeature('line', {selectionAPI: true})
     .data([window.randomPath(1000, 0.1, -108, 30), window.randomPath(500, 0.05, -88, 40)])
     .style({
-      'strokeColor': function (d, i, l, j) { return (j % 2) ? color(2) : color(3); },
-      'strokeWidth': 5,
-      'strokeOpacity': function (d, i, e) { return e.clicked ? 1 : 0.5; }
+      strokeColor: function (d, i, l, j) { return (j % 2) ? color(2) : color(3); },
+      strokeWidth: 5,
+      strokeOpacity: function (d, i, e) { return e.clicked ? 1 : 0.5; },
+      closed: query.closed === 'true'
     })
     .geoOn(geo.event.feature.mouseover, handleMouseOver)
     .geoOn(geo.event.feature.mouseout, handleMouseOut)

src/d3/lineFeature.js

@@ -59,9 +59,7 @@ var d3_lineFeature = function (arg) {
         s_style = m_this.style(),
         m_renderer = m_this.renderer(),
         pos_func = m_this.position(),
-        line = d3.svg.line()
-                .x(function (d) { return m_this.featureGcsToDisplay(d).x; })
-                .y(function (d) { return m_this.featureGcsToDisplay(d).y; });
+        line;
 
     s_update.call(m_this);
     s_style.fill = function () { return false; };
@@ -86,6 +84,11 @@ var d3_lineFeature = function (arg) {
         }
       }
 
+      line = d3.svg.line()
+          .x(function (d) { return m_this.featureGcsToDisplay(d).x; })
+          .y(function (d) { return m_this.featureGcsToDisplay(d).y; })
+          .interpolate(m_this.style.get('closed')(item, idx) && ln.length > 2 ?
+                       'linear-closed' : 'linear');
       // item is an object representing a single line
       // m_this.line()(item) is an array of coordinates
       m_style = {

src/gl/lineFeature.js

@@ -127,11 +127,11 @@ var gl_lineFeature = function (arg) {
 
   function createGLLines() {
     var data = m_this.data(),
-        i, j, k, v,
+        i, j, k, v, lidx,
         numSegments = 0, len,
         lineItem, lineItemData,
         vert = [{}, {}], vertTemp,
-        pos, posIdx3,
+        pos, posIdx3, firstpos, firstPosIdx3,
         position = [],
         posFunc = m_this.position(),
         strkWidthFunc = m_this.style.get('strokeWidth'),
@@ -141,7 +141,8 @@ var gl_lineFeature = function (arg) {
         posBuf, nextBuf, prevBuf, offsetBuf, indicesBuf,
         strokeWidthBuf, strokeColorBuf, strokeOpacityBuf,
         dest, dest3,
-        geom = m_mapper.geometryData();
+        geom = m_mapper.geometryData(),
+        closedFunc = m_this.style.get('closed'), closed = [];
 
     for (i = 0; i < data.length; i += 1) {
       lineItem = m_this.line()(data[i], i);
@@ -151,6 +152,19 @@ var gl_lineFeature = function (arg) {
         position.push(pos.x);
         position.push(pos.y);
         position.push(pos.z || 0.0);
+        if (!j) {
+          firstpos = pos;
+        }
+      }
+      if (lineItem.length > 2 && closedFunc(data[i], i)) {
+        /* line is closed */
+        if (pos.x !== firstpos.x || pos.y !== firstpos.y ||
+            pos.z !== firstpos.z) {
+          numSegments += 1;
+          closed[i] = 2;  /* first and last points are distinct */
+        } else {
+          closed[i] = 1;  /* first point is repeated as last point */
+        }
       }
     }
 
@@ -174,21 +188,30 @@ var gl_lineFeature = function (arg) {
 
     for (i = posIdx3 = dest = dest3 = 0; i < data.length; i += 1) {
       lineItem = m_this.line()(data[i], i);
-      for (j = 0; j < lineItem.length; j += 1, posIdx3 += 3) {
-        lineItemData = lineItem[j];
+      firstPosIdx3 = posIdx3;
+      for (j = 0; j < lineItem.length + (closed[i] === 2 ? 1 : 0); j += 1, posIdx3 += 3) {
+        lidx = j;
+        if (j === lineItem.length) {
+          lidx = 0;
+          posIdx3 -= 3;
+        }
+        lineItemData = lineItem[lidx];
         /* swap entries in vert so that vert[0] is the first vertex, and
          * vert[1] will be reused for the second vertex */
         if (j) {
           vertTemp = vert[0];
           vert[0] = vert[1];
           vert[1] = vertTemp;
         }
-        vert[1].pos = posIdx3;
-        vert[1].prev = posIdx3 - (j ? 3 : 0);
-        vert[1].next = posIdx3 + (j + 1 < lineItem.length ? 3 : 0);
-        vert[1].strokeWidth = strkWidthFunc(lineItemData, j, lineItem, i);
-        vert[1].strokeColor = strkColorFunc(lineItemData, j, lineItem, i);
-        vert[1].strokeOpacity = strkOpacityFunc(lineItemData, j, lineItem, i);
+        vert[1].pos = j === lidx ? posIdx3 : firstPosIdx3;
+        vert[1].prev = lidx ? posIdx3 - 3 : (closed[i] ?
+            firstPosIdx3 + (lineItem.length - 3 + closed[i]) * 3 : posIdx3);
+        vert[1].next = j + 1 < lineItem.length ? posIdx3 + 3 : (closed[i] ?
+            (j !== lidx ? firstPosIdx3 + 3 : firstPosIdx3 + 6 - closed[i] * 3) :
+            posIdx3);
+        vert[1].strokeWidth = strkWidthFunc(lineItemData, lidx, lineItem, i);
+        vert[1].strokeColor = strkColorFunc(lineItemData, lidx, lineItem, i);
+        vert[1].strokeOpacity = strkOpacityFunc(lineItemData, lidx, lineItem, i);
         if (j) {
           for (k = 0; k < order.length; k += 1, dest += 1, dest3 += 3) {
             v = vert[order[k][0]];
@@ -384,6 +407,7 @@ var gl_lineFeature = function (arg) {
   ////////////////////////////////////////////////////////////////////////////
   this._exit = function () {
     m_this.renderer().contextRenderer().removeActor(m_actor);
+    m_actor = null;
     s_exit();
   };
 

src/lineFeature.js

@@ -69,7 +69,12 @@ var lineFeature = function (arg) {
   /**
    * Returns an array of datum indices that contain the given point.
    * This is a slow implementation with runtime order of the number of
-   * vertices.
+   * vertices.  A point is considered on a line segment if it is close to the
+   * line or either end point.  Closeness is based on the maximum width of the
+   * line segement, and is ceil(maxwidth / 2) + 2 pixels.  This means that
+   * corner extensions due to mitering may be outside of the selection area and
+   * that variable width lines will have a greater selection region than their
+   * visual size at the narrow end.
    */
   ////////////////////////////////////////////////////////////////////////////
   this.pointSearch = function (p) {
@@ -118,7 +123,8 @@ var lineFeature = function (arg) {
 
     // for each line
     data.forEach(function (d, index) {
-      var last = null;
+      var closed = m_this.style.get('closed')(d, index),
+          last, lastr, first;
 
       try {
         line(d, index).forEach(function (current, j) {
@@ -127,19 +133,25 @@ var lineFeature = function (arg) {
           var p = pos(current, j, d, index);
           var s = m_this.featureGcsToDisplay(p);
           var r = Math.ceil(width(p, j, d, index) / 2) + 2;
-          r = r * r;
 
           if (last) {
+            var r2 = lastr > r ? lastr * lastr : r * r;
             // test the line segment s -> last
-            if (lineDist2(pt, s, last) <= r) {
-
+            if (lineDist2(pt, s, last) <= r2) {
               // short circuit the loop here
               throw 'found';
             }
           }
 
           last = s;
+          lastr = r;
+          if (!first && closed) {
+            first = {s: s, r: r};
+          }
         });
+        if (closed && lineDist2(pt, last, first.s) <= first.r) {
+          throw 'found';
+        }
       } catch (err) {
         if (err !== 'found') {
           throw err;
@@ -150,7 +162,7 @@ var lineFeature = function (arg) {
     });
 
     return {
-      data: found,
+      found: found,
       index: indices
     };
   };
@@ -168,7 +180,7 @@ var lineFeature = function (arg) {
     opts = opts || {};
     opts.partial = opts.partial || false;
     if (opts.partial) {
-      throw 'Unimplemented query method.';
+      throw new Error('Unimplemented query method.');
     }
 
     m_this.data().forEach(function (d, i) {
@@ -197,18 +209,20 @@ var lineFeature = function (arg) {
    */
   ////////////////////////////////////////////////////////////////////////////
   this._init = function (arg) {
+    arg = arg || {};
     s_init.call(m_this, arg);
 
     var defaultStyle = $.extend(
       {},
       {
-        'strokeWidth': 1.0,
+        strokeWidth: 1.0,
         // Default to gold color for lines
-        'strokeColor': { r: 1.0, g: 0.8431372549, b: 0.0 },
-        'strokeStyle': 'solid',
-        'strokeOpacity': 1.0,
-        'line': function (d) { return d; },
-        'position': function (d) { return d; }
+        strokeColor: { r: 1.0, g: 0.8431372549, b: 0.0 },
+        strokeStyle: 'solid',
+        strokeOpacity: 1.0,
+        closed: false,
+        line: function (d) { return d; },
+        position: function (d) { return d; }
       },
       arg.style === undefined ? {} : arg.style
     );
@@ -240,6 +254,7 @@ var lineFeature = function (arg) {
 lineFeature.create = function (layer, spec) {
   'use strict';
 
+  spec = spec || {};
   spec.type = 'line';
   return feature.create(layer, spec);
 };

src/pointFeature.js

@@ -282,7 +282,7 @@ var pointFeature = function (arg) {
     });
 
     return {
-      data: found,
+      found: found,
       index: ifound
     };
   };

src/polygonFeature.js

@@ -247,24 +247,15 @@ var polygonFeature = function (arg) {
    * @param {object} item: the polygon.
    * @param {number} itemIndex: the index of the polygon
    * @param {Array} loop: the inner or outer loop.
-   * @param {function} posFunc: a function that gets the coordinates of a
-   *    vertex.  Used to compare the first and last vertices of the polygon.
-   *    If they do not match exactly, the first vertex is added at the end to
-   *    close the polyline.
    * @returns {Array} the loop with the data necessary to send to the position
    *    function for each vertex.
    */
-  this._getLoopData = function (item, itemIndex, loop, posFunc) {
-    var line = [], i, startpos, endpos;
+  this._getLoopData = function (item, itemIndex, loop) {
+    var line = [], i;
 
     for (i = 0; i < loop.length; i += 1) {
       line.push([loop[i], i, item, itemIndex]);
     }
-    startpos = posFunc(loop[0], 0, item, itemIndex);
-    endpos = posFunc(loop[loop.length - 1], loop.length - 1, item, itemIndex);
-    if (startpos.x !== endpos.x || startpos.y !== endpos.y || startpos.z !== endpos.z) {
-      line.push([loop[0], 0, item, itemIndex]);
-    }
     return line;
   };
 
@@ -291,6 +282,7 @@ var polygonFeature = function (arg) {
     }
     var polyStyle = m_this.style();
     m_lineFeature.style({
+      closed: true,
       strokeWidth: polyStyle.strokeWidth,
       strokeStyle: polyStyle.strokeStyle,
       strokeColor: polyStyle.strokeColor,
@@ -306,10 +298,10 @@ var polygonFeature = function (arg) {
       for (i = 0; i < data.length; i += 1) {
         polygon = m_this.polygon()(data[i], i);
         loop = polygon.outer || (polygon instanceof Array ? polygon : []);
-        lineData.push(m_this._getLoopData(data[i], i, loop, posFunc));
+        lineData.push(m_this._getLoopData(data[i], i, loop));
         if (polygon.inner) {
           polygon.inner.forEach(function (loop) {
-            lineData.push(m_this._getLoopData(data[i], i, loop, posFunc));
+            lineData.push(m_this._getLoopData(data[i], i, loop));
           });
         }
       }