More fixups for the vtkjs renderer.

This removes the duplicate capitals.json and just references the file
from the reprojection example.

This adds a very basic test for the vtkjs point feature.  It really only
tests that the canvas is created.

examples/vtkjs/example.json

@@ -1,7 +1,8 @@
 {
-  "title": "VTK.js",
+  "title": "Use VTK.js along with GeoJS",
   "exampleJs": ["main.js"],
   "about": {
-    "text": "Show state capitals as points using the vtkjs renderer."
-  }
+    "text": "Show national capitals as points using the vtkjs renderer."
+  },
+  "disabled": true
 }

examples/vtkjs/main.js

@@ -1,31 +1,17 @@
 // Fetch the dataset from the server
-$.ajax({url: 'capitals.json'}).done(function (capitals) {
-  // Create a map object with reasonable center and zoom level
-  var map = geo.map({
-    node: '#map',
-    center: {x: 0, y: 0},
-    zoom: 2.5,
-    clampBoundsX: false,
-    clampBoundsY: false,
-    clampZoom: false,
-    discreteZoom: false
-  });
+$.ajax({url: '../reprojection/capitals.json'}).done(function (capitals) {
+  // Create a map
+  var map = geo.map({node: '#map'});
   // Add the map tile layer
-  map.createLayer('osm', {
-    zIndex: 0,
-    minLevel: 4,
-    keepLower: true,
-    wrapX: false,
-    wrapY: false
-  });
+  map.createLayer('osm');
   // Create a vtk point feature layer
-  var vtkLayer = map.createLayer('feature', { renderer: 'vtkjs' });
+  var vtkLayer = map.createLayer('feature', {renderer: 'vtkjs'});
   vtkLayer.createFeature('point', {
     selectionAPI: true,
     style: {
-      radius: 100,  // sphere radius (~0.1km)
+      radius: 5,
       fillColor: 'red',
-      fillOpacity: Math.random
+      fillOpacity: 1
     }
   })
   // Bind the dataset to the vtk layer

package.json

@@ -91,7 +91,6 @@
     "resemblejs": "^2.9.0",
     "serve-index": "^1.9.1",
     "sinon": "^1.17.7",
-    "string-replace-loader": "1.0.5",
     "string-replace-webpack-plugin": "^0.1.3",
     "style-loader": "^0.23.1",
     "stylus": "^0.54.5",

src/vtkjs/pointFeature.js

@@ -82,13 +82,13 @@ var vtkjs_pointFeature = function (arg) {
     /* It is more efficient to do a transform on a single array rather than on
       * an array of arrays or an array of objects. */
     for (i = i3 = 0; i < numPts; i += 1, i3 += 3) {
-      posVal = posFunc(data[i]);
+      posVal = posFunc(data[i], i);
       position[i3] = posVal.x;
       position[i3 + 1] = posVal.y;
       position[i3 + 2] = posVal.z || 0;
       nonzeroZ = nonzeroZ || position[i3 + 2];
       // TODO: fix the opacity per point.
-      m_actor.getProperty().setOpacity(opacityFunc(data[i]));
+      m_actor.getProperty().setOpacity(opacityFunc(data[i], i));
     }
     position = transform.transformCoordinates(
       m_this.gcs(), m_this.layer().map().gcs(),
@@ -106,16 +106,14 @@ var vtkjs_pointFeature = function (arg) {
     // TODO: points can vary, this needs to be refactors to have a distinct
     // size per point.  What should be done with the strokeColor, strokeWidth,
     // and strokeOpacity?  Honor the fill/stroke options or document that we
-    // don't honot them.
-    var rad = radFunc(), clr = colorFunc();
+    // don't honot them.  Handle the zero-data-itmes condition.
+    var rad = radFunc(data[0], 0), clr = colorFunc(data[0], 0);
     rad *= m_this.layer().map().unitsPerPixel(m_this.layer().map().zoom());
     m_pointSet.getPoints().setData(position, 3);
     m_source.setRadius(rad);
     // TODO: This is not setting the color of the rendered points
     m_actor.getProperty().setColor(clr.r, clr.g, clr.b);
     m_this.buildTime().modified();
-
-    console.debug('built vtkjs point feature');
   };
 
   /**

src/vtkjs/vtkjsRenderer.js

@@ -22,19 +22,19 @@ var vtkjsRenderer = function (arg) {
   var mat4 = require('gl-mat4');
   var geo_event = require('../event');
   var vtkjs = vtkjsRenderer.vtkjs;
-  // TODO: use the GenericRenderWindow, match the size of the parent div, and
-  // call setContainer to attach it to the parent div.  The parent div is:
-  // m_this.layer().node().get(0)
-  var vtkFullScreenRenderWindow = vtkjs.Rendering.Misc.vtkFullScreenRenderWindow;
+  var vtkGenericRenderWindow = vtkjs.Rendering.Misc.vtkGenericRenderWindow;
 
   var m_this = this,
       m_width = 0,
       m_height = 0,
       s_init = this._init;
 
-  // TODO: don't draw a background.  Does transparent work?
-  var vtkRenderer = vtkFullScreenRenderWindow.newInstance({
-    background: [0.1, 0.5, 0.5] });
+  var vtkRenderer = vtkGenericRenderWindow.newInstance({
+    background: [0, 0, 0, 0]});
+  vtkRenderer.setContainer(m_this.layer().node().get(0));
+  // TODO: Is there a way to start with no interactor rather than unbinding it?
+  vtkRenderer.getInteractor().unbindEvents()
+  vtkRenderer.resize();
   var vtkjsren = vtkRenderer.getRenderer();
   var renderWindow = vtkRenderer.getRenderWindow();
 
@@ -90,8 +90,8 @@ var vtkjsRenderer = function (arg) {
    * Handle resize event
    */
   this._resize = function (x, y, w, h) {
+    vtkRenderer.resize();
     m_this._render();
-
     return m_this;
   };
 
@@ -148,7 +148,7 @@ var vtkjsRenderer = function (arg) {
 
   /**
    * Connect to pan event.  This is sufficient, as all zooms and rotations also
-   *produce a pan
+   * produce a pan
    */
   m_this.layer().geoOn(geo_event.pan, function (evt) {
     // TODO: If the zoom level has changed, our point size needs to be

tests/gl-cases/vtkjsPointFeature.js

@@ -0,0 +1,40 @@
+var $ = require('jquery');
+var createMap = require('../test-utils').createMap;
+var destroyMap = require('../test-utils').destroyMap;
+var waitForIt = require('../test-utils').waitForIt;
+
+/* This is a basic integration test of geo.gvtkjs.pointFeature. */
+describe('geo.vtkjs.pointFeature', function () {
+  var testPoints = [
+    {x: 20, y: 10}, {x: 25, y: 10}, {x: 30, y: 10}, {x: 35, y: 12},
+    {x: 32, y: 15}, {x: 30, y: 20}, {x: 35, y: 22}, {x: 32, y: 25},
+    {x: 30, y: 30}, {x: 35, y: 32}, {x: 32, y: 35}, {x: 30, y: 30},
+    {x: 40, y: 20, radius: 10}, {x: 42, y: 20, radius: 5},
+    {x: 44, y: 20, radius: 2}, {x: 46, y: 20, radius: 2},
+    {x: 50, y: 10}, {x: 50, y: 10}, {x: 60, y: 10}
+  ];
+
+  var map, layer, point, calledRadius;
+  it('basic usage', function () {
+    map = createMap();
+    layer = map.createLayer('feature', {renderer: 'vtkjs'});
+    point = layer.createFeature('point', {
+      style: {
+        strokeWidth: 2,
+        radius: function (d) {
+          calledRadius = true;
+          return d.radius ? d.radius : 5;
+        }
+      }
+    }).data(testPoints);
+    point.draw();
+    expect($('#map div canvas').length).toBe(1);
+  });
+  waitForIt('points to be generated', function () {
+    return calledRadius;
+  });
+  it('exit', function () {
+    destroyMap();
+    expect(true).toBe(true);
+  });
+});

tests/test-utils.js

@@ -31,11 +31,13 @@ module.exports.waitForIt = function waitForIt(desc, testFunc) {
     interval = setInterval(function () {
       if (testFunc()) {
         clearInterval(interval);
+        expect(true).toBe(true);
         done();
       }
     }, 10);
   });
   it('done waiting for ' + desc, function () {
+    expect(!!(testFunc ? testFunc() : true)).toBe(true);
   });
 };