Replace vendored wigglemaps with kdbush

package.json

@@ -61,6 +61,7 @@
     "karma-sinon": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.7.0",
+    "kdbush": "^1.0.1",
     "mousetrap": "^1.6.0",
     "nib": "^1.1.2",
     "node-resemble": "^1.1.3",

src/gl/pointFeature.js

@@ -38,6 +38,11 @@ var gl_pointFeature = function (arg) {
       m_pixelWidthUniform = null,
       m_aspectUniform = null,
       m_dynamicDraw = arg.dynamicDraw === undefined ? false : arg.dynamicDraw,
+      /* If you are drawing very large points, you will often get better
+       * performance using a different primitiveShape.  The 'sprite' shape uses
+       * the least memory, but has hardware-specific limitations to its size.
+       * 'triangle' seems to be fastest on low-powered hardware, but 'square'
+       * visits fewer fragments. */
       m_primitiveShape = 'sprite', // arg can change this, below
       s_init = this._init,
       s_update = this._update,
@@ -529,6 +534,7 @@ var gl_pointFeature = function (arg) {
   ////////////////////////////////////////////////////////////////////////////
   this._exit = function () {
     m_this.renderer().contextRenderer().removeActor(m_actor);
+    m_actor = null;
     s_exit();
   };
 

src/index.js

@@ -25,6 +25,10 @@
  * earcut
  * @copyright 2016, Mapbox
  * @license ISC
+ *
+ * kdbush
+ * @copyright 2017, Vladimir Agafonkin
+ * @license ISC
  */
 
 var $ = require('jquery');

src/pointFeature.js

@@ -25,7 +25,7 @@ var pointFeature = function (arg) {
   var ClusterGroup = require('./util/clustering');
   var geo_event = require('./event');
   var util = require('./util');
-  var wigglemaps = require('./util/wigglemaps');
+  var kdbush = require('kdbush');
 
   ////////////////////////////////////////////////////////////////////////////
   /**
@@ -62,10 +62,9 @@ var pointFeature = function (arg) {
       m_clusterTree = null;
       m_clustering = false;
       s_data(m_allData);
-      m_allData = null;
-    } else if (!m_clustering && val) {
+    } else if (val && m_clustering !== val) {
       // Generate the cluster tree
-      m_clustering = true;
+      m_clustering = val;
       m_this._clusterData();
     }
     return m_this;
@@ -158,12 +157,14 @@ var pointFeature = function (arg) {
     if (val === undefined) {
       return m_this.style('position');
     } else {
-      val = util.ensureFunction(val);
+      var isFunc = util.isFunction(val);
       m_this.style('position', function (d, i) {
         if (d.__cluster) {
           return d;
-        } else {
+        } else if (isFunc) {
           return val(d, i);
+        } else {
+          return val;
         }
       });
       m_this.dataTime().modified();
@@ -194,18 +195,17 @@ var pointFeature = function (arg) {
     // create an array of positions in geo coordinates
     pts = m_this.data().map(function (d, i) {
       var pt = position(d);
-      pt.idx = i;
 
       // store the maximum point radius
       m_maxRadius = Math.max(
         m_maxRadius,
         radius(d, i) + (stroke(d, i) ? strokeWidth(d, i) : 0)
       );
 
-      return pt;
+      return [pt.x, pt.y];
     });
 
-    m_rangeTree = new wigglemaps.RangeTree(pts);
+    m_rangeTree = kdbush(pts);
     m_rangeTreeTime.modified();
   };
 
@@ -218,16 +218,12 @@ var pointFeature = function (arg) {
    */
   ////////////////////////////////////////////////////////////////////////////
   this.pointSearch = function (p) {
-    var min, max, data, idx = [], box, found = [], ifound = [], map, pt,
+    var min, max, data, idx = [], found = [], ifound = [], map, pt,
         corners,
         stroke = m_this.style.get('stroke'),
         strokeWidth = m_this.style.get('strokeWidth'),
         radius = m_this.style.get('radius');
 
-    if (!m_this.selectionAPI()) {
-      return [];
-    }
-
     data = m_this.data();
     if (!data || !data.length) {
       return {
@@ -236,6 +232,10 @@ var pointFeature = function (arg) {
       };
     }
 
+    // We need to do this before we find corners, since the max radius is
+    // determined then
+    m_this._updateRangeTree();
+
     map = m_this.layer().map();
     pt = map.gcsToDisplay(p);
     // check all corners to make sure we handle rotations
@@ -255,14 +255,7 @@ var pointFeature = function (arg) {
     };
 
     // Find points inside the bounding box
-    box = new wigglemaps.Box(
-      wigglemaps.vect(min.x, min.y),
-      wigglemaps.vect(max.x, max.y)
-    );
-    m_this._updateRangeTree();
-    m_rangeTree.search(box).forEach(function (q) {
-      idx.push(q.idx);
-    });
+    idx = m_rangeTree.range(min.x, min.y, max.x, max.y);
 
     // Filter by circular region
     idx.forEach(function (i) {
@@ -319,8 +312,10 @@ var pointFeature = function (arg) {
     if (data === undefined) {
       return s_data();
     }
-    if (m_clustering && !m_ignoreData) {
+    if (!m_ignoreData) {
       m_allData = data;
+    }
+    if (m_clustering && !m_ignoreData) {
       m_this._clusterData();
     } else {
       s_data(data);
@@ -329,55 +324,13 @@ var pointFeature = function (arg) {
     return m_this;
   };
 
-  ////////////////////////////////////////////////////////////////////////////
-  /**
-   * Returns the bounding box for a given datum in screen coordinates as an
-   * object: ::
-   *
-   *   {
-   *     min: {
-   *       x: value,
-   *       y: value
-   *     },
-   *     max: {
-   *       x: value,
-   *       y: value
-   *     }
-   *   }
-   *
-   * @returns {object}
-   */
-  ////////////////////////////////////////////////////////////////////////////
-  this._boundingBox = function (d) {
-    var pt, radius;
-
-    // get the position in geo coordinates
-    pt = m_this.position()(d);
-
-    // convert to screen coordinates
-    pt = m_this.layer().map().gcsToDisplay(pt);
-
-    // get the radius of the points (should we add stroke width?)
-    radius = m_this.style().radius(d);
-
-    return {
-      min: {
-        x: pt.x - radius,
-        y: pt.y - radius
-      },
-      max: {
-        x: pt.x + radius,
-        y: pt.y + radius
-      }
-    };
-  };
-
   ////////////////////////////////////////////////////////////////////////////
   /**
    * Initialize
    */
   ////////////////////////////////////////////////////////////////////////////
   this._init = function (arg) {
+    arg = arg || {};
     s_init.call(m_this, arg);
 
     var defaultStyle = $.extend(
@@ -403,6 +356,9 @@ var pointFeature = function (arg) {
     }
 
     m_this.style(defaultStyle);
+    if (defaultStyle.position) {
+      m_this.position(defaultStyle.position);
+    }
     m_this.dataTime().modified();
 
     // bind to the zoom handler for point clustering
@@ -429,9 +385,10 @@ var pointFeature = function (arg) {
  * @param {geo.pointFeature.spec} spec The object specification
  * @returns {geo.pointFeature|null}
  */
-pointFeature.create = function (layer, renderer, spec) {
+pointFeature.create = function (layer, spec) {
   'use strict';
 
+  spec = spec || {};
   spec.type = 'point';
   return feature.create(layer, spec);
 };