Merge pull request #581 from OpenGeoscience/d3-quad-feature

	Add a d3 quadFeature

examples/common/js/examples.js

@@ -0,0 +1,19 @@
+var exampleUtils = {
+ /* Decode query components into a dictionary of values.
+ *
+ * @returns {object}: the query parameters as a dictionary.
+ */
+ getQuery: function () {
+ var query = document.location.search.replace(/(^\?)/, '').split(
+ '&').map(function (n) {
+ n = n.split('=');
+ if (n[0]) {
+ this[decodeURIComponent(n[0])] = decodeURIComponent(n[1]);
+ }
+ return this;
+ }.bind({}))[0];
+ return query;
+ }
+};
+
+window.utils = exampleUtils;

examples/dynamicData/main.js

@@ -61,5 +61,4 @@ $(function () {
  .draw();
  });
 
- map.draw();
 });

examples/quads/main.js

@@ -1,9 +1,12 @@
+/* globals $, geo, utils */
+
 var quadDebug = {};
 
 // Run after the DOM loads
 $(function () {
  'use strict';
 
+ var query = utils.getQuery();
  var map = geo.map({
  node: '#map',
  center: {
@@ -12,7 +15,9 @@ $(function () {
  },
  zoom: 4
  });
- var layer = map.createLayer('feature', {renderer: 'vgl'});
+ var layer = map.createLayer('feature', {
+ renderer: query.renderer ? (query.renderer === 'html' ? null : query.renderer) : 'vgl'
+ });
  var quads = layer.createFeature('quad', {selectionAPI: true});
  var previewImage = new Image();
  previewImage.onload = function () {

examples/transitions/main.js

@@ -1,3 +1,5 @@
+/* globals $, d3, geo, utils */
+
 // Run after the DOM loads
 $(function () {
  'use strict';
@@ -9,15 +11,7 @@ $(function () {
  center: {x: 28.9550, y: 41.0136}
  });
 
- // Parse query parameters into an object for ease of access
- var query = document.location.search.replace(/(^\?)/, '').split(
- '&').map(function (n) {
- n = n.split('=');
- if (n[0]) {
- this[decodeURIComponent(n[0])] = decodeURIComponent(n[1]);
- }
- return this;
- }.bind({}))[0];
+ var query = utils.getQuery();
 
  if (query.test) {
  $('#test').removeClass('hidden');

jsdoc.conf.json

@@ -0,0 +1,7 @@
+{
+ "templates": {
+ "default": {
+ "useLongnameInNav": true
+ }
+ }
+}

package.json

@@ -70,6 +70,7 @@
  },
  "scripts": {
  "build": "webpack --config webpack.config.js && webpack --config external.config.js",
+ "build-examples": "webpack --config webpack-examples.config.js",
  "lint": "eslint --cache .",
  "test": "karma start karma-cov.conf.js --single-run",
  "start": "karma start karma.conf.js",
@@ -78,7 +79,7 @@
  "examples": "webpack-dev-server --config webpack-examples.config.js --port 8082 --content-base dist/",
  "start-test": "node examples/build.js; forever start ./testing/test-runners/server.js",
  "stop-test": "forever stop ./testing/test-runners/server.js",
- "docs": "jsdoc --pedantic -d dist/apidocs -r src"
+ "docs": "jsdoc --pedantic -d dist/apidocs -r src -c jsdoc.conf.json"
  },
  "keywords": [
  "map",

src/canvas/tileLayer.js

@@ -83,7 +83,7 @@ var canvas_tileLayer = function () {
 
  /* These functions don't need to do anything. */
  this._getSubLayer = function () {};
- this._updateSubLayer = undefined;
+ this._updateSubLayers = undefined;
 };
 
 registerLayerAdjustment('canvas', 'tile', canvas_tileLayer);

src/d3/d3Renderer.js

@@ -40,6 +40,9 @@ var d3Renderer = function (arg) {
  m_diagonal = null,
  m_scale = 1,
  m_transform = {dx: 0, dy: 0, rx: 0, ry: 0, rotation: 0},
+ m_renderAnimFrameRef = null,
+ m_renderIds = {},
+ m_removeIds = {},
  m_svg = null,
  m_defs = null;
 
@@ -81,13 +84,6 @@ var d3Renderer = function (arg) {
  };
  };
 
- this._convertPosition = function (f) {
- f = util.ensureFunction(f);
- return function () {
- return m_this.layer().map().worldToDisplay(f.apply(m_this, arguments));
- };
- };
-
  this._convertScale = function (f) {
  f = util.ensureFunction(f);
  return function () {
@@ -207,37 +203,30 @@ var d3Renderer = function (arg) {
  return;
  }
 
- var layer = m_this.layer(),
- map = layer.map(),
+ var layer = m_this.layer();
+
+ var map = layer.map(),
  upperLeft = map.gcsToDisplay(m_corners.upperLeft, null),
  lowerRight = map.gcsToDisplay(m_corners.lowerRight, null),
  center = map.gcsToDisplay(m_corners.center, null),
  group = getGroup(),
- canvas = m_this.canvas(),
  dx, dy, scale, rotation, rx, ry;
 
- if (canvas.attr('scale') !== null) {
- scale = parseFloat(canvas.attr('scale') || 1);
- rx = (parseFloat(canvas.attr('dx') || 0) +
- parseFloat(canvas.attr('offsetx') || 0));
- ry = (parseFloat(canvas.attr('dy') || 0) +
- parseFloat(canvas.attr('offsety') || 0));
- rotation = parseFloat(canvas.attr('rotation') || 0);
- dx = scale * rx + map.size().width / 2;
- dy = scale * ry + map.size().height / 2;
- } else {
- scale = Math.sqrt(
- Math.pow(lowerRight.y - upperLeft.y, 2) +
- Math.pow(lowerRight.x - upperLeft.x, 2)) / m_diagonal;
- // calculate the translation
- rotation = map.rotation();
- rx = -m_width / 2;
- ry = -m_height / 2;
- dx = scale * rx + center.x;
- dy = scale * ry + center.y;
- }
+ scale = Math.sqrt(
+ Math.pow(lowerRight.y - upperLeft.y, 2) +
+ Math.pow(lowerRight.x - upperLeft.x, 2)) / m_diagonal;
+ // calculate the translation
+ rotation = map.rotation();
+ rx = -m_width / 2;
+ ry = -m_height / 2;
+ dx = scale * rx + center.x;
+ dy = scale * ry + center.y;
 
  // set the group transform property
+ if (!rotation) {
+ dx = Math.round(dx);
+ dy = Math.round(dy);
+ }
  var transform = 'matrix(' + [scale, 0, 0, scale, dx, dy].join() + ')';
  if (rotation) {
  transform += ' rotate(' + [
@@ -443,6 +432,8 @@ var d3Renderer = function (arg) {
  m_svg = undefined;
  m_defs.remove();
  m_defs = undefined;
+ m_renderIds = {};
+ m_removeIds = {};
  s_exit();
  };
 
@@ -465,11 +456,19 @@ var d3Renderer = function (arg) {
  * {
  * id: A unique string identifying the feature.
  * data: Array of data objects used in a d3 data method.
- * index: A function that returns a unique id for each data element.
+ * dataIndex: A function that returns a unique id for each data element.
+ * defs: If set, a dictionary with values to render in the defs
+ * section. This can contain data, index, append, attributes,
+ * classes, style, and enter. enter is a function that is
+ * called on new elements.
  * style: An object containing element CSS styles.
  * attributes: An object containing element attributes.
  * classes: An array of classes to add to the elements.
  * append: The element type as used in d3 append methods.
+ * onlyRenderNew: a boolean. If true, features only get attributes and
+ * styles set when new. If false, features always have
+ * attributes and styles updated.
+ * sortByZ: a boolean. If true, sort features by the d.zIndex.
  * parentId: If set, the group ID of the parent element.
  * }
  */
@@ -482,6 +481,8 @@ var d3Renderer = function (arg) {
  attributes: arg.attributes,
  classes: arg.classes,
  append: arg.append,
+ onlyRenderNew: arg.onlyRenderNew,
+ sortByZ: arg.sortByZ,
  parentId: arg.parentId
  };
  return m_this.__render(arg.id, arg.parentId);
@@ -503,18 +504,56 @@ var d3Renderer = function (arg) {
  }
  return m_this;
  }
+ if (parentId) {
+ m_this._renderFeature(id, parentId);
+ } else {
+ m_renderIds[id] = true;
+ if (m_renderAnimFrameRef === null) {
+ m_renderAnimFrameRef = window.requestAnimationFrame(m_this._renderFrame);
+ }
+ }
+ };
+
+ this._renderFrame = function () {
+ var id;
+ for (id in m_removeIds) {
+ m_this.select(id).remove();
+ m_defs.selectAll('.' + id).remove();
+ }
+ m_removeIds = {};
+ var ids = m_renderIds;
+ m_renderIds = {};
+ m_renderAnimFrameRef = null;
+ for (id in ids) {
+ if (ids.hasOwnProperty(id)) {
+ m_this._renderFeature(id);
+ }
+ }
+ };
+
+ this._renderFeature = function (id, parentId) {
+ if (!m_features[id]) {
+ return;
+ }
  var data = m_features[id].data,
  index = m_features[id].index,
  style = m_features[id].style,
  attributes = m_features[id].attributes,
  classes = m_features[id].classes,
  append = m_features[id].append,
- selection = m_this.select(id, parentId).data(data, index);
- selection.enter().append(append);
+ selection = m_this.select(id, parentId).data(data, index),
+ entries, rendersel;
+ entries = selection.enter().append(append);
  selection.exit().remove();
- setAttrs(selection, attributes);
- selection.attr('class', classes.concat([id]).join(' '));
- setStyles(selection, style);
+ rendersel = m_features[id].onlyRenderNew ? entries : selection;
+ setAttrs(rendersel, attributes);
+ rendersel.attr('class', classes.concat([id]).join(' '));
+ setStyles(rendersel, style);
+ if (entries.size() && m_features[id].sortByZ) {
+ selection.sort(function (a, b) {
+ return (a.zIndex || 0) - (b.zIndex || 0);
+ });
+ }
  return m_this;
  };
 
@@ -533,8 +572,14 @@ var d3Renderer = function (arg) {
  */
  ////////////////////////////////////////////////////////////////////////////
  this._removeFeature = function (id) {
- m_this.select(id).remove();
+ m_removeIds[id] = true;
+ if (m_renderAnimFrameRef === null) {
+ m_renderAnimFrameRef = window.requestAnimationFrame(m_this._renderFrame);
+ }
  delete m_features[id];
+ if (m_renderIds[id]) {
+ delete m_renderIds[id];
+ }
  return m_this;
  };
 

src/d3/index.js

@@ -13,6 +13,7 @@ module.exports = {
  pathFeature: require('./pathFeature'),
  planeFeature: require('./planeFeature'),
  pointFeature: require('./pointFeature'),
+ quadFeature: require('./quadFeature'),
  renderer: require('./d3Renderer'),
  tileLayer: require('./tileLayer'),
  uniqueID: require('./uniqueID'),