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'),