GL and canvas features don't redraw when their draw methods are called.

Rather than calling draw on a layer or feature, you have to call draw on the whole map. This fixes the issue. Resolves issue #470. Fix the hurricanes example's line highlight. Fix the picking example (though keep it disabled).
OpenGeoscience · Jun 6, 2016 · d3f9deb · d3f9deb
1 parent 878ecc7
commit d3f9deb
Show file tree

Hide file tree

Showing 27 changed files with 169 additions and 53 deletions.
diff --git a/examples/choropleth/main.js b/examples/choropleth/main.js
@@ -71,10 +71,9 @@ $(function () {
 
         choropleth
           .scalar(mockScalarData2);
-
+        choropleth.draw();
       }, 5000);
-      // Draw the map
-      map.draw();
+      choropleth.draw();
     }
   });
 });
diff --git a/examples/contour/main.js b/examples/contour/main.js
@@ -79,16 +79,15 @@ $(function () {
     url: '../../data/oahu.json',
     success: function (data) {
       var contour = makeContour(data, vglLayer);
-      // Draw the map
-      map.draw();
+      contour.draw();
       /* After 10 second, load a denser data set */
       window.setTimeout(function () {
         $.ajax({
           url: '../../data/oahu-dense.json',
           success: function (data) {
             vglLayer.deleteFeature(contour);
             contour = makeContour(data, vglLayer, contour);
-            map.draw();
+            contour.draw();
           }
         });
       }, 10000);

diff --git a/examples/heatmap/main.js b/examples/heatmap/main.js
@@ -179,7 +179,7 @@ $(function () {
     }
     heatmap.data(rows);
     window.heatmap.rows = rows;
-    map.draw();
+    heatmap.draw();
     var text = 'Shown: ' + rows.length;
     $('#points-shown').text(text).attr('title', text);
   }
@@ -211,7 +211,7 @@ $(function () {
       case 'binned':
         heatmapOptions[param] = value;
         heatmap[param](value);
-        map.draw();
+        heatmap.draw();
         break;
       case 'blurRadius': case 'radius':
         processedValue = value.length ? parseFloat(value) : undefined;
@@ -221,15 +221,15 @@ $(function () {
         }
         heatmapOptions.style[param] = processedValue;
         heatmap.style(param, processedValue);
-        map.draw();
+        heatmap.draw();
         break;
       case 'dataset':
         fetch_data();
         break;
       case 'gaussian':
         heatmapOptions.style[param] = processedValue;
         heatmap.style(param, processedValue);
-        map.draw();
+        heatmap.draw();
         break;
       case 'gradient':
         var gradient = {};
@@ -251,7 +251,7 @@ $(function () {
         }
         heatmapOptions.style.color = gradient;
         heatmap.style('color', gradient);
-        map.draw();
+        heatmap.draw();
         var gradkeys = Object.keys(heatmapOptions.style.color).sort();
         value = gradkeys.map(function (key) {
           return [key, Math.round(gradient[key].r * 255), Math.round(gradient[key].g * 255), Math.round(gradient[key].b * 255), gradient[key].a].join(',');
@@ -264,7 +264,7 @@ $(function () {
         }
         heatmapOptions[param] = processedValue;
         heatmap[param](processedValue);
-        map.draw();
+        heatmap.draw();
         break;
       case 'opacity':
         processedValue = value.length ? parseFloat(value) : undefined;
@@ -296,7 +296,6 @@ $(function () {
   }
 
   map.createLayer('osm');
-  map.draw();
   layer = map.createLayer('feature', layerOptions);
   heatmap = layer.createFeature('heatmap', heatmapOptions)
     .intensity(function (d) {

diff --git a/examples/hurricanes/main.js b/examples/hurricanes/main.js
@@ -319,14 +319,14 @@ $(function () {
         'strokeColor': function (d) {
           return cscale(d.c);
         },
-        'strokeWidth': function (d, i, l) {
-          if (l.hover) {
+        'strokeWidth': function (d, i, l, pos) {
+          if (data[pos].hover) {
             return 5;
           }
           return 1.5;
         },
-        'strokeOpacity': function (d, i, l) {
-          if (l.hover) {
+        'strokeOpacity': function (d, i, l, pos) {
+          if (data[pos].hover) {
             return 1;
           }
           if (d.c === 0) {
@@ -346,9 +346,9 @@ $(function () {
         evt.data.hover = true;
         makeInfoBox(evt.data);
         this.modified();
-        map.draw();
+        feature.draw();
       });
-    map.draw();
+    feature.draw();
   }
 
   // Create a map object
@@ -369,9 +369,6 @@ $(function () {
     }
   );
 
-  // Draw the map
-  map.draw();
-
   // Create a feature layer to draw on
   layer = map.createLayer('feature');
 

diff --git a/examples/layerEvents/main.css b/examples/layerEvents/main.css
@@ -8,7 +8,7 @@
 
 .top-layer-overlay {
   fill: yellow;
-  fill-opacity: 5%;
+  fill-opacity: 0.05;
 }
 
 rect.background {

diff --git a/examples/layerEvents/main.js b/examples/layerEvents/main.js
@@ -101,9 +101,6 @@ $(function () {
       d3.event.stopPropagation();
     });
 
-  // Draw the map
-  map.draw();
-
   // Connect the button that adds or removes the top layer.
   var top = null;
   $('.layer-toggle ').text('Add top layer')

diff --git a/examples/layers/main.js b/examples/layers/main.js
@@ -136,6 +136,4 @@ $(function () {
   drawLayer(map, 'unscaled-moving', 'This is a moving layer without rescaling.', 1);
   drawLayer(map, 'scaled-moving', 'This is a moving layer with rescaling.', 2, true);
 
-  // Draw the map
-  map.draw();
 });
diff --git a/examples/legend/main.js b/examples/legend/main.js
@@ -112,6 +112,4 @@ $(function () {
     }
   ]);
 
-  // Draw the map
-  map.draw();
 });
diff --git a/examples/picking/example.json b/examples/picking/example.json
@@ -0,0 +1,10 @@
+{
+  "path": "picking",
+  "title": "Mouse picking for points and lines",
+  "exampleCss": ["main.css"],
+  "exampleJs": ["main.js", "widget.js"],
+  "about": {
+    "text": "This example demonstrates how to attach handlers to various mouse interactions that allow the users to select features.  Try moving the mouse over the features and clicking."
+  },
+  "disabled": true
+}
diff --git a/examples/picking/main.js b/examples/picking/main.js
@@ -49,13 +49,13 @@ $(function () {
   function handleMouseClick(evt) {
     evt.data.clicked = !evt.data.clicked;
     this.modified();
-    map.draw();
+    this.draw();
   }
 
   function handleBrush(evt) {
     evt.data.clicked = true;
     this.modified();
-    map.draw();
+    this.draw();
   }
 
   var color = d3.scale.category10();
@@ -83,6 +83,6 @@ $(function () {
     .geoOn(geo.event.feature.mouseclick, handleMouseClick)
     .geoOn(geo.event.feature.brushend, handleBrush);
 
-  // Draw the map
-  map.draw();
+  vglLayer.draw();
+  svgLayer.draw();
 });
diff --git a/examples/points/main.js b/examples/points/main.js
@@ -28,12 +28,12 @@ $(function () {
         .geoOn(geo.event.feature.mouseover, function (evt) {
           evt.data.opacity = 0.5;
           this.modified();        // mark the feature as modified
-          layer.map().draw();     // we must redraw as necessary
+          this.draw();            // we must redraw as necessary
         })
         .geoOn(geo.event.feature.mouseout, function (evt) {
           evt.data.opacity = 0.1;
           this.modified();
-          layer.map().draw();
+          this.draw();
         })
 
         // You must call the draw method after setting all feature
@@ -102,7 +102,4 @@ $(function () {
     };
   });
   makePoints(data, svgLayer, svgColor);
-
-  // Draw the map
-  map.draw();
 });
diff --git a/examples/quads/main.js b/examples/quads/main.js
@@ -125,7 +125,7 @@ $(function () {
         // asked for it not to have been cached to begin with.
         delete evt.data._cachedQuad;
         this.modified();
-        layer.map().draw();
+        this.draw();
       })
       .geoOn(geo.event.feature.mouseout, function (evt) {
         if (evt.data.orig_opacity === undefined) {
@@ -134,12 +134,10 @@ $(function () {
         evt.data.opacity = evt.data.orig_opacity || undefined;
         delete evt.data._cachedQuad;
         this.modified();
-        layer.map().draw();
+        this.draw();
       })
       .draw();
 
-    map.draw();
-
     quadDebug.map = map;
     quadDebug.layer = layer;
     quadDebug.quads = quads;

diff --git a/examples/reprojection/main.js b/examples/reprojection/main.js
@@ -177,7 +177,7 @@ $(function () {
         evt.data.opacity = 0.5;
         evt.data.strokeOpacity = 1;
         this.modified();
-        pointLayer.map().draw();
+        this.draw();
         tooltip.position({x: evt.data.longitude, y: evt.data.latitude});
         tooltipElem.text(evt.data.city);
         tooltipElem.removeClass('hidden');
@@ -186,10 +186,10 @@ $(function () {
         evt.data.opacity = undefined;
         evt.data.strokeOpacity = undefined;
         this.modified();
-        pointLayer.map().draw();
+        this.draw();
         tooltipElem.addClass('hidden');
-      });
-    pointLayer.map().draw();
+      })
+      .draw();
 
     // Make variables available as a global for easier debug
     exampleDebug.map = map;
@@ -228,7 +228,7 @@ $(function () {
       switch (param) {
         case 'capitals':
           pointFeature.visible(processedValue);
-          map.draw();
+          pointFeature.draw();
           break;
         case 'gcs':
           mapParams.gcs = gcsTable[processedValue] || 'EPSG:3857';

diff --git a/examples/vectors/main.js b/examples/vectors/main.js
@@ -91,5 +91,7 @@ $(function () {
       }
     });
 
+  /* We could draw the two features as we create them.  Instead, this ensures
+   * that all features get drawn. */
   map.draw();
 });
diff --git a/examples/widgets/main.js b/examples/widgets/main.js
@@ -54,7 +54,8 @@ $(function () {
     .data(coordinates)
     .style('radius', 5)
     .style('fillColor', function () { return 'red'; })
-    .position(function (d) { return d; });
+    .position(function (d) { return d; })
+    .draw();
 
   // Create a ui layer
   var ui = map.createLayer('ui');
@@ -83,7 +84,4 @@ $(function () {
 
   // Create a zoom slider widget
   ui.createWidget('slider');
-
-  // Draw the map
-  map.draw();
 });
diff --git a/src/canvas/heatmapFeature.js b/src/canvas/heatmapFeature.js
@@ -22,6 +22,9 @@ var canvas_heatmapFeature = function (arg) {
     return new canvas_heatmapFeature(arg);
   }
   heatmapFeature.call(this, arg);
+  var object = require('./object');
+
+  object.call(this);
 
   ////////////////////////////////////////////////////////////////////////////
   /**

diff --git a/src/canvas/object.js b/src/canvas/object.js
@@ -0,0 +1,44 @@
+var inherit = require('../inherit');
+var sceneObject = require('../sceneObject');
+
+//////////////////////////////////////////////////////////////////////////////
+/**
+ * Canvas specific subclass of object which rerenders when the object is drawn.
+ * @class geo.canvas.object
+ * @extends geo.sceneObject
+ */
+//////////////////////////////////////////////////////////////////////////////
+
+var canvas_object = function (arg) {
+  'use strict';
+
+  var object = require('../object');
+
+  // this is used to extend other geojs classes, so only generate
+  // a new object when that is not the case... like if this === window
+  if (!(this instanceof object)) {
+    return new canvas_object(arg);
+  }
+  sceneObject.call(this);
+
+  var m_this = this,
+      s_draw = this.draw;
+
+  ////////////////////////////////////////////////////////////////////////////
+  /**
+  *  Redraw the object.
+  */
+  ////////////////////////////////////////////////////////////////////////////
+  this.draw = function () {
+    m_this._update();
+    m_this.renderer()._render();
+    s_draw();
+    return m_this;
+  };
+
+  return this;
+};
+
+inherit(canvas_object, sceneObject);
+module.exports = canvas_object;
+
diff --git a/src/canvas/quadFeature.js b/src/canvas/quadFeature.js
@@ -20,6 +20,9 @@ var canvas_quadFeature = function (arg) {
   }
   quadFeature.call(this, arg);
 
+  var object = require('./object');
+  object.call(this);
+
   var $ = require('jquery');
 
   var m_this = this,

diff --git a/src/gl/choroplethFeature.js b/src/gl/choroplethFeature.js
@@ -29,6 +29,7 @@ var gl_choroplethFeature = function (arg) {
       m_gl_polygons = null,
       s_exit = this._exit,
       s_init = this._init,
+      s_draw = this.draw,
       s_update = this._update;
 
   /* Create the choropleth.  This calls the base class to generate the contours,
@@ -38,6 +39,17 @@ var gl_choroplethFeature = function (arg) {
     return m_this.createChoropleth();
   }
 
+  this.draw = function () {
+    m_this._update();
+    if (m_gl_polygons) {
+      for (var idx = 0; idx < m_gl_polygons.length; idx += 1) {
+        m_gl_polygons[idx].draw();
+      }
+    }
+    s_draw();
+    return m_this;
+  };
+
   ////////////////////////////////////////////////////////////////////////////
   /**
    * Initialize
-Original file line number
+Diff line change
@@ Expand Up / @@ -112,6 +112,4 @@ $(function () { @@
         }
       ]);
-      // Draw the map
-      map.draw();
     });