geojs 1.4.3 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geojs",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "JavaScript Geo Visualization and Analysis Library",
   "homepage": "https://github.com/OpenGeoscience/geojs",
   "license": "Apache-2.0",
@@ -37,7 +37,6 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.7.0",
-    "body-parser": "^1.19.0",
     "bootstrap": "^3.4.1",
     "bootswatch": "^3.4.1",
     "codemirror": "^5.54.0",
@@ -51,7 +50,6 @@
     "eslint-plugin-node": "^7.0.1",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "exports-loader": "^0.7.0",
     "expose-loader": "^0.7.5",
     "express": "^4.17.1",
     "file-loader": "^2.0.0",
@@ -86,7 +84,7 @@
     "phantomjs-prebuilt": "^2.1.5",
     "pug": "^3.0.1",
     "pug-lint": "^2.4.0",
-    "pug-loader": "^2.4.0",
+    "pug-load": "^3.0.0",
     "raw-body": "^2.1.6",
     "resemblejs": "^3.2.4",
     "semantic-release": "^17.4.3",
@@ -102,9 +100,7 @@
     "uglifyjs-webpack-plugin": "^1.2.5",
     "url-loader": "^1.1.2",
     "webpack": "^3.12.0",
-    "webpack-cli": "^2.1.3",
-    "webpack-merge": "^4.2.2",
-    "webpack-serve": "^1.0.2"
+    "webpack-merge": "^4.2.2"
   },
   "release": {
     "plugins": [

package/src/canvas/heatmapFeature.js

@@ -39,6 +39,7 @@ var canvas_heatmapFeature = function (arg) {
       m_heatMapTransform,
       s_init = this._init,
       s_update = this._update,
+      m_lastRenderDuration,
       m_renderTime = timestamp();
 
   /**
@@ -72,15 +73,22 @@ var canvas_heatmapFeature = function (arg) {
   };
 
   /**
-   * Create circle for each data point.
+   * Create a circle to render at each data point.
    *
    * @returns {this}
    */
   this._createCircle = function () {
-    var circle, ctx, r, r2, blur, gaussian;
+    var circle, ctx, r, r2, blur, gaussian, scale;
     r = m_this.style('radius');
     blur = m_this.style('blurRadius');
     gaussian = m_this.style('gaussian');
+    scale = m_this.style('scaleWithZoom');
+    if (scale) {
+      let zoom = this.layer().map().zoom();
+      scale = Math.pow(2, zoom);
+      r *= scale;
+      blur *= scale;
+    }
     if (!m_this._circle || m_this._circle.gaussian !== gaussian ||
         m_this._circle.radius !== r || m_this._circle.blurRadius !== blur) {
       circle = m_this._circle = document.createElement('canvas');
@@ -298,6 +306,7 @@ var canvas_heatmapFeature = function (arg) {
   this._renderOnCanvas = function (context2d, map) {
 
     if (m_renderTime.timestamp() < m_this.buildTime().timestamp()) {
+      let starttime = Date.now();
       var data = m_this.data() || [],
           radius = m_this.style('radius') + m_this.style('blurRadius'),
           binned = m_this.binned(),
@@ -305,9 +314,12 @@ var canvas_heatmapFeature = function (arg) {
           layer = m_this.layer(),
           mapSize = map.size();
 
+      if (m_this.style('scaleWithZoom')) {
+        radius *= Math.pow(2, map.zoom());
+      }
       /* Determine if we should bin the data */
       if (binned === true || binned === 'auto') {
-        binned = Math.max(Math.floor(radius / 8), 3);
+        binned = Math.max(Math.floor(radius / 8), Math.max(1.5, Math.min(3, radius / 2.5)));
         if (m_this.binned() === 'auto') {
           var numbins = (Math.ceil((mapSize.width + radius * 2) / binned) *
                          Math.ceil((mapSize.height + radius * 2) / binned));
@@ -325,20 +337,22 @@ var canvas_heatmapFeature = function (arg) {
       context2d.setTransform(1, 0, 0, 1, 0, 0);
       context2d.clearRect(0, 0, mapSize.width, mapSize.height);
       m_heatMapTransform = '';
-      map.scheduleAnimationFrame(m_this._setTransform, false);
-      layer.canvas().css({transform: ''});
-
-      m_this._createCircle();
-      m_this._computeGradient();
-      if (!binned) {
-        m_this._renderPoints(context2d, map, data, radius);
-      } else {
-        m_this._renderBinnedData(context2d, map, data, radius, binned);
+      if (radius > 0.5 && radius < 8192) {
+        map.scheduleAnimationFrame(m_this._setTransform, false);
+        layer.canvas().css({transform: ''});
+
+        m_this._createCircle();
+        m_this._computeGradient();
+        if (!binned) {
+          m_this._renderPoints(context2d, map, data, radius);
+        } else {
+          m_this._renderBinnedData(context2d, map, data, radius, binned);
+        }
+        canvas = layer.canvas()[0];
+        pixelArray = context2d.getImageData(0, 0, canvas.width, canvas.height);
+        m_this._colorize(pixelArray.data, m_this._grad);
+        context2d.putImageData(pixelArray, 0, 0);
       }
-      canvas = layer.canvas()[0];
-      pixelArray = context2d.getImageData(0, 0, canvas.width, canvas.height);
-      m_this._colorize(pixelArray.data, m_this._grad);
-      context2d.putImageData(pixelArray, 0, 0);
 
       m_heatMapPosition = {
         zoom: map.zoom(),
@@ -350,6 +364,7 @@ var canvas_heatmapFeature = function (arg) {
       };
       m_renderTime.modified();
       layer.renderer().clearCanvas(false);
+      m_lastRenderDuration = Date.now() - starttime;
     }
 
     return m_this;
@@ -440,6 +455,14 @@ var canvas_heatmapFeature = function (arg) {
         parseFloat((rotation - m_heatMapPosition.rotation).toFixed(4)) !== 0 ||
         parseFloat(origin.x.toFixed(1)) !== 0 ||
         parseFloat(origin.y.toFixed(1)) !== 0) {
+      let delay = m_this.updateDelay();
+      if (delay < 0 && m_lastRenderDuration) {
+        delay = m_lastRenderDuration - Math.floor(1000 / 60 * delay);
+      } else if (m_lastRenderDuration) {
+        delay = m_lastRenderDuration * 2;
+      } else {
+        delay = 100;
+      }
       m_heatMapPosition.timeout = window.setTimeout(function () {
         m_heatMapPosition.timeout = undefined;
         m_this.buildTime().modified();

package/src/heatmapFeature.js

@@ -19,8 +19,11 @@ var transform = require('./transform');
  * @property {number} [minIntensity=null] Minimum intensity of the data.
  *   Minimum intensity must be a positive real number and is used to normalize
  *   all intensities within a dataset.  If `null`, it is computed.
- * @property {number} [updateDelay=1000] Delay in milliseconds after a zoom,
- *   rotate, or pan event before recomputing the heatmap.
+ * @property {number} [updateDelay=-1] Delay in milliseconds after a zoom,
+ *   rotate, or pan event before recomputing the heatmap.  If 0, this is double
+ *   the last render time.  If negative, it is roughly the last render time
+ *   plus the absolute value of the specified number of refresh intervals.
+ *   compute a delay based on the last heatmap render time.
  * @property {boolean|number|'auto'} [binned='auto'] If `true` or a number,
  *   spatially bin data as part of producing the heatmap.  If falsy, each
  *   datapoint stands on its own.  If `'auto'`, bin data if there are more data
@@ -37,6 +40,11 @@ var transform = require('./transform');
  *   approximation.  The total weight of the gaussian area is approximately the
  *   `9/16 r^2`.  The sum of `radius + blurRadius` is used as the radius for
  *   the gaussian distribution.
+ * @property {boolean} [scaleWithZoom=false] If truthy, the value for radius
+ *   and blurRadius scale with zoom.  In this case, the values for radius and
+ *   blurRadius are the values at zoom-level zero.  If the scaled radius is
+ *   less than 0.5 or more than 8192 screen pixels, the heatmap will not
+ *   render.
  */
 
 /**
@@ -76,7 +84,7 @@ var heatmapFeature = function (arg) {
   m_maxIntensity = arg.maxIntensity !== undefined ? arg.maxIntensity : null;
   m_minIntensity = arg.minIntensity !== undefined ? arg.minIntensity : null;
   m_binned = arg.binned !== undefined ? arg.binned : 'auto';
-  m_updateDelay = arg.updateDelay ? parseInt(arg.updateDelay, 10) : 1000;
+  m_updateDelay = (arg.updateDelay || arg.updateDelay === 0) ? parseInt(arg.updateDelay, 10) : -1;
 
   /**
    * Get/Set maxIntensity.
@@ -121,7 +129,9 @@ var heatmapFeature = function (arg) {
    *
    * @param {number} [val] If not specified, return the current update delay.
    *    If specified, this is the delay in milliseconds after a zoom, rotate,
-   *    or pan event before recomputing the heatmap.
+   *    or pan event before recomputing the heatmap.  If 0, this is double the
+   *    last render time.  If negative, it is roughly the last render time plus
+   *    the absolute value of the specified number of refresh intervals.
    * @returns {number|this}
    */
   this.updateDelay = function (val) {
@@ -233,7 +243,8 @@ var heatmapFeature = function (arg) {
           0.25: {r: 0, g: 0, b: 1, a: 0.5},
           0.5:  {r: 0, g: 1, b: 1, a: 0.6},
           0.75: {r: 1, g: 1, b: 0, a: 0.7},
-          1:    {r: 1, g: 0, b: 0, a: 0.8}}
+          1:    {r: 1, g: 0, b: 0, a: 0.8}},
+        scaleWithZoom: false
       },
       arg.style === undefined ? {} : arg.style
     );

package/src/util/mockVGL.js

@@ -85,6 +85,7 @@ module.exports.mockWebglRenderer = function mockWebglRenderer(supported) {
     enable: noop('enable'),
     enableVertexAttribArray: noop('enableVertexAttribArray'),
     finish: noop('finish'),
+    getError: noop('getError'),
     getExtension: incID('getExtension'),
     getParameter: function (key) {
       count('getParameter');

package/src/webgl/quadFeature.js

@@ -361,7 +361,9 @@ var webgl_quadFeature = function (arg) {
         return;
       }
       quad.texture.bind(renderState);
-
+      if (context.getError() === context.OUT_OF_MEMORY) {
+        console.log('Insufficient GPU memory for texture');
+      }
       if (quad.opacity !== opacity) {
         opacity = quad.opacity;
         context.uniform1fv(renderState.m_material.shaderProgram()