geojs 1.6.5 → 1.7.2

package/src/pixelmapFeature.js

@@ -1,7 +1,6 @@
 var $ = require('jquery');
 var inherit = require('./inherit');
 var feature = require('./feature');
-var geo_event = require('./event');
 var util = require('./util');
 
 /**
@@ -31,25 +30,6 @@ var util = require('./util');
  *   transformations for those two triangles.
  */
 
-/**
- * Pixelmap feature information record.
- *
- * @typedef {object} geo.pixelmapFeature.info
- * @property {number} width The width of the source image.
- * @property {number} height The width of the source image.
- * @property {context} context The HTMLCanvasElement context used for handling
- *    the pixelmap.
- * @property {ImageData} imageData The context's image data.
- * @property {number[]} indices An array, one per pixel, of the index value in
- *    the image.  This decodes the pixel value to the corresponding integer.
- * @property number} area The number of pixels in the image.  This is
- *    `width * height`.
- * @property {object[]} mappedColors This has one entry for each distinct index
- *    value.  Each entry has `first` and `last` with the first and last pixel
- *    locations where that index occurs.  Note that last is the inclusive value
- *    of the location (so its maximum possible value is `size - 1`).
- */
-
 /**
  * Create a new instance of class pixelmapFeature
  *
@@ -72,12 +52,9 @@ var pixelmapFeature = function (arg) {
    * @private
    */
   var m_this = this,
-      m_quadFeature,
-      m_srcImage,
-      m_info,
       s_update = this._update,
-      s_init = this._init,
-      s_exit = this._exit;
+      m_modifiedIndexRange,
+      s_init = this._init;
 
   this.featureType = 'pixelmap';
 
@@ -113,7 +90,7 @@ var pixelmapFeature = function (arg) {
     if (val === undefined) {
       return m_this.style('url');
     } else if (val !== m_this.style('url')) {
-      m_srcImage = m_info = undefined;
+      m_this.m_srcImage = m_this.m_info = undefined;
       m_this.style('url', val);
       m_this.dataTime().modified();
       m_this.modified();
@@ -121,28 +98,6 @@ var pixelmapFeature = function (arg) {
     return m_this;
   };
 
-  /**
-   * Get the maximum index value from the pixelmap.  This is a value present in
-   * the pixelmap.
-   *
-   * @returns {number} The maximum index value.
-   */
-  this.maxIndex = function () {
-    if (m_info) {
-      /* This isn't just m_info.mappedColors.length - 1, since there
-       * may be more data than actual indices. */
-      if (m_info.maxIndex === undefined) {
-        m_info.maxIndex = 0;
-        for (var idx in m_info.mappedColors) {
-          if (m_info.mappedColors.hasOwnProperty(idx)) {
-            m_info.maxIndex = Math.max(m_info.maxIndex, idx);
-          }
-        }
-      }
-      return m_info.maxIndex;
-    }
-  };
-
   /**
    * Get/Set color accessor.
    *
@@ -162,35 +117,87 @@ var pixelmapFeature = function (arg) {
   };
 
   /**
-   * If the specified coordinates are in the rendered quad, use the basis
-   * information from the quad to determine the pixelmap index value so that it
-   * can be included in the `found` results.
+   * Mark that an index's data value (and hence its color) has changed without
+   * marking all of the data array as changed.  If this function is called
+   * without any parameters, it clears the tracked changes.
    *
-   * @param {geo.geoPosition} geo Coordinate.
-   * @param {string|geo.transform|null} [gcs] Input gcs.  `undefined` to use
-   *    the interface gcs, `null` to use the map gcs, or any other transform.
-   * @returns {geo.feature.searchResult} An object with a list of features and
-   *    feature indices that are located at the specified point.
+   * @param {number} [idx] The lowest data index that has changed.  If
+   *    `undefined`, return the current tracked changed range.
+   * @param {number|'clear'} [idx2] If an index was specified in `idx` and
+   *    this is specified, the highest index (inclusive) that has changed.  If
+   *    returning the tracked changed range and this is `clear`, clear the
+   *    tracked range.
+   * @returns {this|number[]} When returning a range, this is the lowest and
+   *    highest index values that have changed (inclusive), so their range is
+   *    `[0, data.length)`.
    */
-  this.pointSearch = function (geo, gcs) {
-    if (m_quadFeature && m_info) {
-      var result = m_quadFeature.pointSearch(geo, gcs);
-      if (result.index.length === 1 && result.extra && result.extra[result.index[0]].basis) {
-        var basis = result.extra[result.index[0]].basis, x, y, idx;
-        x = Math.floor(basis.x * m_info.width);
-        y = Math.floor(basis.y * m_info.height);
-        if (x >= 0 && x < m_info.width &&
-            y >= 0 && y < m_info.height) {
-          idx = m_info.indices[y * m_info.width + x];
-          result = {
-            index: [idx],
-            found: [m_this.data()[idx]]
-          };
-          return result;
+  this.indexModified = function (idx, idx2) {
+    if (idx === undefined) {
+      const range = m_modifiedIndexRange;
+      if (idx2 === 'clear') {
+        m_modifiedIndexRange = undefined;
+      }
+      return range;
+    }
+    m_this.modified();
+    if (m_modifiedIndexRange === undefined) {
+      m_modifiedIndexRange = [idx, idx];
+    }
+    if (idx < m_modifiedIndexRange[0]) {
+      m_modifiedIndexRange[0] = idx;
+    }
+    if ((idx2 || idx) > m_modifiedIndexRange[1]) {
+      m_modifiedIndexRange[1] = (idx2 || idx);
+    }
+    return m_this;
+  };
+
+  /**
+   * Update.
+   *
+   * @returns {this}
+   */
+  this._update = function () {
+    s_update.call(m_this);
+    if (m_this.buildTime().timestamp() <= m_this.dataTime().timestamp() ||
+        m_this.updateTime().timestamp() < m_this.timestamp()) {
+      m_this._build();
+    }
+
+    m_this.updateTime().modified();
+    return m_this;
+  };
+
+  /**
+   * Get the maximum index value from the pixelmap.  This is a value present in
+   * the pixelmap.
+   *
+   * @returns {number} The maximum index value.
+   */
+  this.maxIndex = function () {
+    if (m_this.m_info) {
+      /* This isn't just m_info.mappedColors.length - 1, since there
+       * may be more data than actual indices. */
+      if (m_this.m_info.maxIndex === undefined) {
+        m_this.m_info.maxIndex = 0;
+        for (var idx in m_this.m_info.mappedColors) {
+          if (m_this.m_info.mappedColors.hasOwnProperty(idx)) {
+            m_this.m_info.maxIndex = Math.max(m_this.m_info.maxIndex, idx);
+          }
         }
       }
+      return m_this.m_info.maxIndex;
     }
-    return {index: [], found: []};
+  };
+
+  /**
+   * Given the loaded pixelmap image, create a canvas the size of the image.
+   * Compute a color for each distinct index and recolor the canvas based on
+   * these colors, then draw the resultant image as a quad.
+   *
+   * @fires geo.event.pixelmap.prepared
+   */
+  this._computePixelmap = function () {
   };
 
   /**
@@ -203,43 +210,42 @@ var pixelmapFeature = function (arg) {
      * drawing a quad, which can trigger a full layer update, which in turn
      * checks if this feature is built.  Setting the build time avoids calling
      * this a second time. */
-    m_this.buildTime().modified();
-    if (!m_srcImage) {
+    if (!m_this.m_srcImage) {
       var src = m_this.style.get('url')();
       if (util.isReadyImage(src)) {
         /* we have an already loaded image, so we can just use it. */
-        m_srcImage = src;
+        m_this.m_srcImage = src;
         m_this._computePixelmap();
       } else if (src) {
         var defer = $.Deferred(), prev_onload, prev_onerror;
         if (src instanceof Image) {
           /* we have an unloaded image.  Hook to the load and error callbacks
            * so that when it is loaded we can use it. */
-          m_srcImage = src;
+          m_this.m_srcImage = src;
           prev_onload = src.onload;
           prev_onerror = src.onerror;
         } else {
           /* we were given a url, so construct a new image */
-          m_srcImage = new Image();
+          m_this.m_srcImage = new Image();
           // Only set the crossOrigin parameter if this is going across origins.
           if (src.indexOf(':') >= 0 &&
               src.indexOf('/') === src.indexOf(':') + 1) {
-            m_srcImage.crossOrigin = m_this.style.get('crossDomain')() || 'anonymous';
+            m_this.m_srcImage.crossOrigin = m_this.style.get('crossDomain')() || 'anonymous';
           }
         }
-        m_srcImage.onload = function () {
+        m_this.m_srcImage.onload = function () {
           if (prev_onload) {
             prev_onload.apply(m_this, arguments);
           }
           /* Only use this image if our pixelmap hasn't changed since we
            * attached our handler */
           if (m_this.style.get('url')() === src) {
-            m_info = undefined;
+            m_this.m_info = undefined;
             m_this._computePixelmap();
           }
           defer.resolve();
         };
-        m_srcImage.onerror = function () {
+        m_this.m_srcImage.onerror = function () {
           if (prev_onerror) {
             prev_onerror.apply(m_this, arguments);
           }
@@ -248,177 +254,13 @@ var pixelmapFeature = function (arg) {
         defer.promise(m_this);
         m_this.layer().addPromise(m_this);
         if (!(src instanceof Image)) {
-          m_srcImage.src = src;
+          m_this.m_srcImage.src = src;
         }
       }
-    } else if (m_info) {
+    } else if (m_this.m_info) {
       m_this._computePixelmap();
     }
-    return m_this;
-  };
-
-  /**
-   * Compute information for this pixelmap image.  It is wasteful to call this
-   * if the pixelmap has already been prepared (it is invalidated by a change
-   * in the image).
-   *
-   * @returns {geo.pixelmapFeature.info}
-   */
-  this._preparePixelmap = function () {
-    var i, idx, pixelData;
-
-    if (!util.isReadyImage(m_srcImage)) {
-      return;
-    }
-    m_info = {
-      width: m_srcImage.naturalWidth,
-      height: m_srcImage.naturalHeight,
-      canvas: document.createElement('canvas')
-    };
-
-    m_info.canvas.width = m_info.width;
-    m_info.canvas.height = m_info.height;
-    m_info.context = m_info.canvas.getContext('2d');
-
-    m_info.context.drawImage(m_srcImage, 0, 0);
-    m_info.imageData = m_info.context.getImageData(
-      0, 0, m_info.canvas.width, m_info.canvas.height);
-    pixelData = m_info.imageData.data;
-    m_info.indices = new Array(pixelData.length / 4);
-    m_info.area = pixelData.length / 4;
-
-    m_info.mappedColors = {};
-    for (i = 0; i < pixelData.length; i += 4) {
-      idx = pixelData[i] + (pixelData[i + 1] << 8) + (pixelData[i + 2] << 16);
-      m_info.indices[i / 4] = idx;
-      if (!m_info.mappedColors[idx]) {
-        m_info.mappedColors[idx] = {first: i / 4};
-      }
-      m_info.mappedColors[idx].last = i / 4;
-    }
-    return m_info;
-  };
-
-  /**
-   * Given the loaded pixelmap image, create a canvas the size of the image.
-   * Compute a color for each distinct index and recolor the canvas based on
-   * these colors, then draw the resultant image as a quad.
-   *
-   * @fires geo.event.pixelmap.prepared
-   */
-  this._computePixelmap = function () {
-    var data = m_this.data() || [],
-        colorFunc = m_this.style.get('color'),
-        i, idx, lastidx, color, pixelData, indices, mappedColors,
-        updateFirst, updateLast = -1, update, prepared;
-
-    if (!m_info) {
-      if (!m_this._preparePixelmap()) {
-        return;
-      }
-      prepared = true;
-    }
-    mappedColors = m_info.mappedColors;
-    updateFirst = m_info.area;
-    for (idx in mappedColors) {
-      if (mappedColors.hasOwnProperty(idx)) {
-        color = colorFunc(data[idx], +idx) || {};
-        color = [
-          (color.r || 0) * 255,
-          (color.g || 0) * 255,
-          (color.b || 0) * 255,
-          color.a === undefined ? 255 : (color.a * 255)
-        ];
-        mappedColors[idx].update = (
-          !mappedColors[idx].color ||
-          mappedColors[idx].color[0] !== color[0] ||
-          mappedColors[idx].color[1] !== color[1] ||
-          mappedColors[idx].color[2] !== color[2] ||
-          mappedColors[idx].color[3] !== color[3]);
-        if (mappedColors[idx].update) {
-          mappedColors[idx].color = color;
-          updateFirst = Math.min(mappedColors[idx].first, updateFirst);
-          updateLast = Math.max(mappedColors[idx].last, updateLast);
-        }
-      }
-    }
-    /* If nothing was updated, we are done */
-    if (updateFirst >= updateLast) {
-      return;
-    }
-    /* Update only the extent that has changed */
-    pixelData = m_info.imageData.data;
-    indices = m_info.indices;
-    for (i = updateFirst; i <= updateLast; i += 1) {
-      idx = indices[i];
-      if (idx !== lastidx) {
-        lastidx = idx;
-        color = mappedColors[idx].color;
-        update = mappedColors[idx].update;
-      }
-      if (update) {
-        pixelData[i * 4] = color[0];
-        pixelData[i * 4 + 1] = color[1];
-        pixelData[i * 4 + 2] = color[2];
-        pixelData[i * 4 + 3] = color[3];
-      }
-    }
-    /* Place the updated area into the canvas */
-    m_info.context.putImageData(
-      m_info.imageData, 0, 0, 0, Math.floor(updateFirst / m_info.width),
-      m_info.width, Math.ceil((updateLast + 1) / m_info.width));
-
-    /* If we haven't made a quad feature, make one now.  The quad feature needs
-     * to have the canvas capability. */
-    if (!m_quadFeature) {
-      m_quadFeature = m_this.layer().createFeature('quad', {
-        selectionAPI: false,
-        gcs: m_this.gcs(),
-        visible: m_this.visible(undefined, true)
-      });
-      m_this.dependentFeatures([m_quadFeature]);
-      m_quadFeature.style({
-        image: m_info.canvas,
-        position: m_this.style.get('position')})
-      .data([{}])
-      .draw();
-    }
-    /* If we prepared the pixelmap and rendered it, send a prepared event */
-    if (prepared) {
-      m_this.geoTrigger(geo_event.pixelmap.prepared, {
-        pixelmap: m_this
-      });
-    }
-  };
-
-  /**
-   * Update.
-   *
-   * @returns {this}
-   */
-  this._update = function () {
-    s_update.call(m_this);
-    if (m_this.buildTime().timestamp() <= m_this.dataTime().timestamp() ||
-        m_this.updateTime().timestamp() < m_this.timestamp()) {
-      m_this._build();
-    }
-
-    m_this.updateTime().modified();
-    return m_this;
-  };
-
-  /**
-   * Destroy.  Deletes the associated quadFeature.
-   *
-   * @returns {this}
-   */
-  this._exit = function () {
-    if (m_quadFeature && m_this.layer()) {
-      m_this.layer().deleteFeature(m_quadFeature);
-      m_quadFeature = null;
-      m_this.dependentFeatures([]);
-    }
-    s_exit();
+    m_this.buildTime().modified();
     return m_this;
   };
 
@@ -458,6 +300,10 @@ var pixelmapFeature = function (arg) {
     }
     m_this.style(style);
     m_this.dataTime().modified();
+    if (arg.quadFeature) {
+      m_this.m_srcImage = true;
+      m_this._computePixelmap();
+    }
 
     return m_this;
   };
@@ -483,7 +329,9 @@ pixelmapFeature.create = function (layer, spec) {
 
 pixelmapFeature.capabilities = {
   /* core feature name -- support in any manner */
-  feature: 'pixelmap'
+  feature: 'pixelmap',
+  /* support for image-based lookup */
+  lookup: 'pixelmap.lookup'
 };
 
 inherit(pixelmapFeature, feature);

package/src/pixelmapLayer.js

@@ -0,0 +1,145 @@
+var $ = require('jquery');
+var inherit = require('./inherit');
+var tileLayer = require('./tileLayer');
+var registry = require('./registry');
+var quadFeature = require('./quadFeature');
+var pixelmapFeature = require('./pixelmapFeature');
+
+/**
+ * Object specification for a pixelmap layer.
+ *
+ * @typedef {geo.tileLayer.spec} geo.pixelmapLayer.spec
+ * @extends {geo.tileLayer.spec}
+ * @property {geo.geoColor|function} [color] The color that should be used
+ *   for each data element.  Data elements correspond to the indices in the
+ *   pixel map. If an index is larger than the number of data elements, it will
+ *   be transparent.  If there is more data than there are indices, it is
+ *   ignored.
+ * @property {object} [style] An optional style object that could contain
+ *   `color` or other style values.
+ * @property {array} [data] A new data array.
+ * @property {string} [crossDomain='anonymous'] Image CORS attribute.  This is
+ *   used for the `crossorigin` property when loading images.
+ */
+
+/**
+ * Create a new instance of pixelmapLayer.  This is a {@link geo.tileLayer} with
+ * an OSM url and attribution defaults and with the tiles centered on the
+ * origin.
+ *
+ * @class
+ * @alias geo.pixelmapLayer
+ * @extends geo.tileLayer
+ *
+ * @param {geo.pixelmapLayer.spec} [arg] Specification for the layer.
+ */
+var pixelmapLayer = function (arg) {
+
+  var imageTile = require('./imageTile');
+
+  if (!(this instanceof pixelmapLayer)) {
+    return new pixelmapLayer(arg);
+  }
+  arg = arg || {};
+  arg = $.extend(
+    true,
+    {},
+    this.constructor.defaults,
+    arg);
+  tileLayer.call(this, arg);
+
+  var s_init = this._init,
+      m_pixelmapFeature,
+      m_this = this;
+
+  /**
+   * Returns an instantiated imageTile object with the given indices.  This
+   * method always returns a new tile object.  Use `_getTileCached` to use
+   * the caching layer.
+   *
+   * @param {object} index The tile index.
+   * @param {number} index.x
+   * @param {number} index.y
+   * @param {number} index.level
+   * @param {object} source The tile index used for constructing the url.
+   * @param {number} source.x
+   * @param {number} source.y
+   * @param {number} source.level
+   * @returns {geo.tile}
+   */
+  this._getTile = function (index, source) {
+    var urlParams = source || index;
+    return imageTile({
+      index: index,
+      size: {x: m_this._options.tileWidth, y: m_this._options.tileHeight},
+      queue: m_this._queue,
+      overlap: m_this._options.tileOverlap,
+      scale: m_this._options.tileScale,
+      url: m_this._options.url.call(
+        m_this, urlParams.x, urlParams.y, urlParams.level || 0,
+        m_this._options.subdomains),
+      crossDomain: m_this._options.crossDomain
+    });
+  };
+
+  /**
+   * Initialize.
+   *
+   * @returns {this} The current layer.
+   */
+  this._init = function () {
+    // Call super class init
+    s_init.apply(m_this, arguments);
+
+    const pixelmapArgs = {quadFeature: m_this.features()[0]};
+    if (arg.style) {
+      pixelmapArgs.style = arg.style;
+    }
+    if (arg.color) {
+      pixelmapArgs.color = arg.color;
+    }
+    m_pixelmapFeature = m_this.createFeature('pixelmap', pixelmapArgs);
+    if (arg.data) {
+      m_pixelmapFeature.data(arg.data);
+    }
+    m_this.style = m_pixelmapFeature.style;
+    m_this.data = m_pixelmapFeature.data;
+    m_this.indexModified = m_pixelmapFeature.indexModified;
+    const s_dataTimeModified = m_this.dataTime().modified;
+    m_this.dataTime().modified = () => {
+      m_pixelmapFeature.dataTime().modified();
+      return s_dataTimeModified();
+    };
+    ['modified', 'geoOn', 'geoOff', 'geoOnce'].forEach((funcName) => {
+      const superFunc = m_this[funcName];
+      m_this[funcName] = function () {
+        m_pixelmapFeature[funcName].apply(this, arguments);
+        return superFunc.apply(this, arguments);
+      };
+    });
+    return m_this;
+  };
+
+  return m_this;
+};
+
+/**
+ * This object contains the default options used to initialize the
+ * pixelmapLayer.
+ */
+pixelmapLayer.defaults = $.extend({}, tileLayer.defaults, {
+  features: [quadFeature.capabilities.image, pixelmapFeature.capabilities.lookup],
+  tileOffset : function (level) {
+    var s = Math.pow(2, level - 1) * 256;
+    return {x: s, y: s};
+  },
+  url: ''
+});
+
+inherit(pixelmapLayer, tileLayer);
+/* By default, ask to support image quads.  If the user needs full
+ * reprojection, they will need to require the
+ * quadFeature.capabilities.imageFull feature */
+registry.registerLayer('pixelmap', pixelmapLayer, [quadFeature.capabilities.image]);
+
+module.exports = pixelmapLayer;

package/src/quadFeature.js

@@ -232,7 +232,7 @@ var quadFeature = function (arg) {
             coordbasis.y = 1 - coordbasis.y;
           }
           if (coordbasis) {
-            extra[quad.idx] = {basis: coordbasis};
+            extra[quad.idx] = {basis: coordbasis, _quad: quad};
           }
         }
       });

package/src/tileLayer.js

@@ -676,7 +676,10 @@ var tileLayer = function (arg) {
   this._getTiles = function (maxLevel, bounds, sorted, onlyIfChanged) {
     var i, j, tiles = [], index, nTilesLevel,
         start, end, indexRange, source, center, changed = false, old, level,
-        minLevel = (m_this._options.keepLower ? m_this._options.minLevel : maxLevel);
+        minLevel = (
+          m_this._options.keepLower ?
+            m_this._options.minLevel :
+            Math.min(Math.max(maxLevel, m_this._options.minLevel), m_this._options.maxLevel));
     if (maxLevel < minLevel) {
       maxLevel = minLevel;
     }
@@ -1532,7 +1535,10 @@ var tileLayer = function (arg) {
        * finished, purge all but the current layer.  This is important for
        * semi-transparent layers. */
       if ((doneLoading || m_this._isCovered(tile)) &&
-          zoom !== tile.index.level) {
+          zoom !== tile.index.level &&
+          (zoom >= m_this._options.minLevel || tile.index.level !== m_this._options.minLevel) &&
+          (zoom < m_this._options.maxLevel || tile.index.level !== m_this._options.maxLevel)
+      ) {
         return true;
       }
     }

package/src/webgl/index.js

@@ -8,8 +8,10 @@ module.exports = {
   isolineFeature: require('./isolineFeature'),
   layer: require('./layer'),
   lineFeature: require('./lineFeature'),
+  lookupTable2D: require('./lookupTable2D'),
   markerFeature: require('./markerFeature'),
   meshColored: require('./meshColored'),
+  pixelmapFeature: require('./pixelmapFeature'),
   pointFeature: require('./pointFeature'),
   polygonFeature: require('./polygonFeature'),
   quadFeature: require('./quadFeature'),