geojs 1.6.5 → 1.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geojs",
-  "version": "1.6.5",
+  "version": "1.7.2",
   "description": "JavaScript Geo Visualization and Analysis Library",
   "homepage": "https://github.com/OpenGeoscience/geojs",
   "license": "Apache-2.0",
@@ -30,7 +30,7 @@
     "vtk.js": "*"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.5",
+    "@babel/core": "^7.17.0",
     "@babel/plugin-proposal-class-properties": "^7.16.5",
     "@babel/preset-env": "^7.16.5",
     "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
@@ -40,7 +40,7 @@
     "bootswatch": "^3.4.1",
     "codemirror": "^5.65.0",
     "colorbrewer": "^1.5.1",
-    "css-loader": "^6.5.1",
+    "css-loader": "^6.6.0",
     "docco": "^0.9.1",
     "eslint": "^7.12.1",
     "eslint-config-semistandard": "^16.0.0",
@@ -57,13 +57,13 @@
     "jaguarjs-jsdoc": "^1.0.2",
     "jasmine-core": "^4.0.0",
     "js-yaml": "^4.1.0",
-    "jsdoc": "^3.6.7",
+    "jsdoc": "^3.6.10",
     "jsdoc-autoprivate": "0.0.1",
     "jsonlint-mod": "^1.7.6",
     "jstransformer-markdown-it": "^2.0.0",
-    "karma": "^6.3.13",
+    "karma": "^6.3.15",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage": "^2.1.0",
+    "karma-coverage": "^2.1.1",
     "karma-firefox-launcher": "^2.1.2",
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
@@ -72,6 +72,7 @@
     "karma-spec-reporter": "^0.0.33",
     "karma-webpack": "^5.0.0",
     "nib": "^1.1.2",
+    "npm-run-all": "^4.1.5",
     "pako": "^2.0.4",
     "pug": "^3.0.2",
     "pug-lint": "^2.6.0",
@@ -124,7 +125,9 @@
     ]
   },
   "scripts": {
-    "build": "webpack --config webpack.config.js && webpack --config webpack-lean.config.js",
+    "build": "npm-run-all -p build-full build-lean",
+    "build-full": "webpack --config webpack.config.js",
+    "build-lean": "webpack --config webpack-lean.config.js",
     "build-examples": "node examples/build.js && webpack --config webpack-examples.config.js",
     "build-website-examples": "node examples/build-website.js && webpack --config webpack-website-examples.config.js",
     "build-tutorials": "node tutorials/build.js && webpack --config webpack-tutorials.config.js",
@@ -143,19 +146,18 @@
     "test-tutorialsci-all": "GEOJS_TEST_CASE=tests/tutorials.js karma start karma-cov.conf.js --single-run --browsers ChromeHeadlessTouch,FirefoxHeadlessTouch",
     "get-data-files": "node scripts/datastore.js dist/data",
     "ci-clean": "git clean -fxd dist -e dist/data jsdoc/tmpl jsdoc/static images lcov",
-    "ci": "npm run ci-build && npm run ci-test",
-    "ci-build": "bash -c '(webpack --config webpack.config.js & webpack --config webpack-lean.config.js & npm run docs & npm run get-data-files & npm run lint & npm run puglint & npm run glsllint & npm run build-examples & npm run build-tutorials & wait -n && wait -n && wait -n && wait -n && wait -n && wait -n && wait -n && wait -n && wait -n)'",
-    "ci-build-wait": "bash -c '(webpack --config webpack.config.js & webpack --config webpack-lean.config.js & npm run docs & npm run get-data-files & npm run lint & npm run puglint & npm run glsllint & npm run build-examples & npm run build-tutorials & wait -n && wait -n && wait -n && wait -n && wait -n && wait -n && wait -n && wait -n && wait -n && FAIL=0 || FAIL=1; wait; [ \"$FAIL\" == \"0\" ])'",
-    "ci-test": "npm run test-headless && npm run test-webglheadless && npm run test-headed && npm run test-tutorials",
-    "ci-xvfb": "npm run ci-clean && npm run ci-build && TEST_SAVE_IMAGE='all' xvfb-run -s '-ac -screen 0 1280x1024x24' npm run ci-test",
+    "ci": "npm-run-all ci-build ci-test",
+    "ci-build": "npm-run-all -c -p build-full build-lean docs get-data-files lint puglint glsllint build-examples build-tutorials",
+    "ci-test": "npm-run-all test-headless test-webglheadless test-headed test-tutorials",
+    "ci-xvfb": "npm-run-all ci-clean ci-build && TEST_SAVE_IMAGE='all' xvfb-run -s '-ac -screen 0 1280x1024x24' npm run ci-test",
     "start": "karma start karma.conf.js",
-    "examples": "node examples/build.js && webpack --config webpack-examples.config.js && node tutorials/build.js && webpack --config webpack-tutorials.config.js && node ./tests/runners/server.js --host \"${HOST-}\" --port ${PORT-8082} --dist",
+    "examples": "npm-run-all -p build-examples build-tutorials && node ./tests/runners/server.js --host \"${HOST-}\" --port ${PORT-8082} --dist",
     "docs": "jsdoc --pedantic -d dist/apidocs -r src package.json -c jsdoc.conf.json",
     "website": "cd website && npx hexo server",
     "setup-website": "cd website && npm install",
-    "build-website": "npm run ci-build && npm run ci-build-website",
+    "build-website": "npm-run-all ci-build ci-build-website",
     "ci-build-website": "cp -a dist/built/. website/source/built && bash -c '(npm run build-website-examples & npm run build-website-tutorials & wait -n && wait -n)' && cd dist && cp -ar data ../website/source/. && rm -rf ../website/source/data/tiles && rm -rf ../website/source/data/tiles.tgz && rm -rf ../website/source/data/base-images && rm -rf ../website/source/data/base-images.tgz && cp -ar apidocs/. ../website/source/apidocs && cd ../website && npm install && rm -f db.json && npx hexo generate",
-    "prepublishOnly": "webpack --config webpack.config.js && webpack --config webpack-lean.config.js && cp dist/built/*.js .",
+    "prepublishOnly": "npm run build && cp dist/built/*.js .",
     "semantic-release": "semantic-release"
   },
   "keywords": [

package/src/canvas/pixelmapFeature.js

@@ -1,6 +1,27 @@
 var inherit = require('../inherit');
 var registerFeature = require('../registry').registerFeature;
 var pixelmapFeature = require('../pixelmapFeature');
+var geo_event = require('../event');
+var util = require('../util');
+
+/**
+ * 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 {CanvasRenderingContext2D} 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.
@@ -22,6 +43,193 @@ var canvas_pixelmapFeature = function (arg) {
   var object = require('./object');
   object.call(this);
 
+  var m_quadFeature,
+      s_exit = this._exit,
+      m_this = this;
+
+  /**
+   * 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.
+   *
+   * @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.
+   */
+  this.pointSearch = function (geo, gcs) {
+    if (m_quadFeature && m_this.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_this.m_info.width);
+        y = Math.floor(basis.y * m_this.m_info.height);
+        if (x >= 0 && x < m_this.m_info.width &&
+            y >= 0 && y < m_this.m_info.height) {
+          idx = m_this.m_info.indices[y * m_this.m_info.width + x];
+          result = {
+            index: [idx],
+            found: [m_this.data()[idx]]
+          };
+          return result;
+        }
+      }
+    }
+    return {index: [], found: []};
+  };
+
+  /**
+   * 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_this.m_srcImage)) {
+      return;
+    }
+    m_this.m_info = {
+      width: m_this.m_srcImage.naturalWidth,
+      height: m_this.m_srcImage.naturalHeight,
+      canvas: document.createElement('canvas')
+    };
+
+    m_this.m_info.canvas.width = m_this.m_info.width;
+    m_this.m_info.canvas.height = m_this.m_info.height;
+    m_this.m_info.context = m_this.m_info.canvas.getContext('2d');
+
+    m_this.m_info.context.drawImage(m_this.m_srcImage, 0, 0);
+    m_this.m_info.imageData = m_this.m_info.context.getImageData(
+      0, 0, m_this.m_info.canvas.width, m_this.m_info.canvas.height);
+    pixelData = m_this.m_info.imageData.data;
+    m_this.m_info.indices = new Array(pixelData.length / 4);
+    m_this.m_info.area = pixelData.length / 4;
+
+    m_this.m_info.mappedColors = {};
+    for (i = 0; i < pixelData.length; i += 4) {
+      idx = pixelData[i] + (pixelData[i + 1] << 8) + (pixelData[i + 2] << 16);
+      m_this.m_info.indices[i / 4] = idx;
+      if (!m_this.m_info.mappedColors[idx]) {
+        m_this.m_info.mappedColors[idx] = {first: i / 4};
+      }
+      m_this.m_info.mappedColors[idx].last = i / 4;
+    }
+    return m_this.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_this.m_info) {
+      m_this.indexModified(undefined, 'clear');
+      if (!m_this._preparePixelmap()) {
+        return;
+      }
+      prepared = true;
+    }
+    m_this.indexModified(undefined, 'clear');
+    mappedColors = m_this.m_info.mappedColors;
+    updateFirst = m_this.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_this.m_info.imageData.data;
+    indices = m_this.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_this.m_info.context.putImageData(
+      m_this.m_info.imageData, 0, 0, 0, Math.floor(updateFirst / m_this.m_info.width),
+      m_this.m_info.width, Math.ceil((updateLast + 1) / m_this.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_this.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
+      });
+    }
+  };
+
+  /**
+   * 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();
+    return m_this;
+  };
+
   this._init(arg);
   return this;
 };

package/src/index.js

@@ -77,6 +77,7 @@ module.exports = $.extend({
   polygonFeature: require('./polygonFeature'),
   quadFeature: require('./quadFeature'),
   pixelmapFeature: require('./pixelmapFeature'),
+  pixelmapLayer: require('./pixelmapLayer'),
   renderer: require('./renderer'),
   sceneObject: require('./sceneObject'),
   textFeature: require('./textFeature'),