Merge branch 'master' into quad-location

examples/quads/main.js

@@ -20,91 +20,125 @@ $(function () {
     features: query.renderer ? undefined : ['quad']
   });
   var quads = layer.createFeature('quad', {selectionAPI: true});
+  var quadData = [{
+    ll: {x: -108, y: 29},
+    ur: {x: -88, y: 49},
+    image: '../../data/tilefancy.png'
+  }, {
+    ll: {x: -88, y: 29},
+    ur: {x: -58, y: 49},
+    image: 'flower1.jpg',
+    opacity: 0.75
+  }, {
+    ul: {x: -108, y: 29},
+    ur: {x: -58, y: 29},
+    ll: {x: -98, y: 9},
+    lr: {x: -68, y: 9},
+    previewImage: null,
+    image: 'flower3.jpg'
+  }, {
+    lr: {x: -58, y: 29},
+    ur: {x: -58, y: 49},
+    ul: {x: -38, y: 54},
+    ll: {x: -33, y: 34},
+    image: 'flower2.jpg',
+    opacity: 0.15
+  }, {
+    ll: {x: -33, y: 34},
+    lr: {x: -33, y: 9},
+    ur: {x: -68, y: 9},
+    ul: {x: -58, y: 29},
+    image: '../../data/tilefancy.png'
+  }, {
+    ll: {x: -128, y: 29},
+    ur: {x: -108, y: 49},
+    image: '../../data/nosuchimage.png'
+  }, {
+    ul: {x: -128, y: 29},
+    ur: {x: -108, y: 29},
+    ll: {x: -123, y: 9},
+    lr: {x: -98, y: 9},
+    previewImage: null,
+    image: '../../data/nosuchimage.png'
+  }, {
+    ul: {x: -148, y: 29},
+    ur: {x: -128, y: 29},
+    ll: {x: -148, y: 9},
+    lr: {x: -123, y: 9},
+    previewImage: previewImage,
+    image: '../../data/nosuchimage.png'
+  }, {
+    ll: {x: -138, y: 29},
+    ur: {x: -128, y: 39},
+    color: '#FF0000'
+  }, {
+    ll: {x: -148, y: 39},
+    ur: {x: -138, y: 49},
+    color: '#FF0000'
+  }, {
+    ll: {x: -138, y: 39},
+    ur: {x: -128, y: 49},
+    color: '#00FFFF'
+  }, {
+    ll: {x: -148, y: 29},
+    ur: {x: -138, y: 39},
+    opacity: 0.25,
+    color: '#0000FF'
+  }];
+  if (query.canvas === 'true') {
+    // You can render a canvas on a quad, but only on the canvas and vgl
+    // renderers.  On the vgl renderer, it may not update when the quad's
+    // canvas element is changed.
+    var canvasElement = document.createElement('canvas');
+    canvasElement.width = 640;
+    canvasElement.height = 480;
+    var context = canvasElement.getContext('2d');
+    var gradient = context.createRadialGradient(320, 240, 0, 320, 240, 320);
+    gradient.addColorStop(0, 'black');
+    gradient.addColorStop(1, 'green');
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, 640, 480);
+    quadData.push({
+      ul: {x: -98, y: 9},
+      ur: {x: -68, y: 9},
+      ll: {x: -98, y: -11},
+      lr: {x: -68, y: -11},
+      image: canvasElement
+    });
+    // change the gradient after 10 seconds
+    window.setTimeout(function () {
+      var gradient = context.createRadialGradient(320, 240, 0, 320, 240, 320);
+      gradient.addColorStop(0, 'green');
+      gradient.addColorStop(1, 'black');
+      context.fillStyle = gradient;
+      context.fillRect(0, 0, 640, 480);
+      quads.draw();
+    }, 10000);
+  }
+  if (query.warped === 'true') {
+    /* You can specify quads so that the corners are 'twisted' and the quad
+     * would be non-convex.  In this case, the quads are each rendered as a
+     * pair of triangles, but they probably aren't what is desired. */
+    quadData.push({
+      ll: {x: -108, y: 49},
+      lr: {x: -88, y: 49},
+      ur: {x: -108, y: 59},
+      ul: {x: -88, y: 59},
+      image: '../../data/tilefancy.png'
+    });
+    quadData.push({
+      ll: {x: -88, y: 49},
+      ur: {x: -68, y: 49},
+      ul: {x: -88, y: 59},
+      lr: {x: -68, y: 59},
+      image: '../../data/tilefancy.png'
+    });
+  }
   var previewImage = new Image();
   previewImage.onload = function () {
 
     quads
-      .data([{
-        ll: {x: -108, y: 29},
-        ur: {x: -88, y: 49},
-        image: '../../data/tilefancy.png'
-      }, {
-        ll: {x: -88, y: 29},
-        ur: {x: -58, y: 49},
-        image: 'flower1.jpg',
-        opacity: 0.75
-      }, {
-        ul: {x: -108, y: 29},
-        ur: {x: -58, y: 29},
-        ll: {x: -98, y: 9},
-        lr: {x: -68, y: 9},
-        previewImage: null,
-        image: 'flower3.jpg'
-      }, {
-        lr: {x: -58, y: 29},
-        ur: {x: -58, y: 49},
-        ul: {x: -38, y: 54},
-        ll: {x: -33, y: 34},
-        image: 'flower2.jpg',
-        opacity: 0.15
-      }, {
-        ll: {x: -33, y: 34},
-        lr: {x: -33, y: 9},
-        ur: {x: -68, y: 9},
-        ul: {x: -58, y: 29},
-        image: '../../data/tilefancy.png'
-      }, {
-        ll: {x: -128, y: 29},
-        ur: {x: -108, y: 49},
-        image: '../../data/nosuchimage.png'
-      }, {
-        ul: {x: -128, y: 29},
-        ur: {x: -108, y: 29},
-        ll: {x: -123, y: 9},
-        lr: {x: -98, y: 9},
-        previewImage: null,
-        image: '../../data/nosuchimage.png'
-      }, {
-        ul: {x: -148, y: 29},
-        ur: {x: -128, y: 29},
-        ll: {x: -148, y: 9},
-        lr: {x: -123, y: 9},
-        previewImage: previewImage,
-        image: '../../data/nosuchimage.png'
-      }, {
-        ll: {x: -138, y: 29},
-        ur: {x: -128, y: 39},
-        color: '#FF0000'
-      }, {
-        ll: {x: -148, y: 39},
-        ur: {x: -138, y: 49},
-        color: '#FF0000'
-      }, {
-        ll: {x: -138, y: 39},
-        ur: {x: -128, y: 49},
-        color: '#00FFFF'
-      }, {
-        ll: {x: -148, y: 29},
-        ur: {x: -138, y: 39},
-        opacity: 0.25,
-        color: '#0000FF'
-      /* You can specify quads so that the corners are 'twisted' and the quad
-       * would be non-convex.  In this case, the quads are each rendered as a
-       * pair of triangles, but they probably aren't what is desired.
-      }, {
-        ll: {x: -108, y: 49},
-        lr: {x: -88, y: 49},
-        ur: {x: -108, y: 59},
-        ul: {x: -88, y: 59},
-        image: '../../data/tilefancy.png'
-      }, {
-        ll: {x: -88, y: 49},
-        ur: {x: -68, y: 49},
-        ul: {x: -88, y: 59},
-        lr: {x: -68, y: 59},
-        image: '../../data/tilefancy.png'
-      */
-      }])
+      .data(quadData)
       .style({
         opacity: function (d) {
           return d.opacity !== undefined ? d.opacity : 1;

src/canvas/canvasRenderer.js

@@ -105,7 +105,9 @@ var canvasRenderer = function (arg) {
 
         var features = layer.features();
         for (var i = 0; i < features.length; i += 1) {
-          features[i]._renderOnCanvas(m_this.context2d, map);
+          if (features[i].visible()) {
+            features[i]._renderOnCanvas(m_this.context2d, map);
+          }
         }
       });
     }

src/canvas/quadFeature.js

@@ -154,6 +154,7 @@ capabilities[quadFeature.capabilities.image] = true;
 capabilities[quadFeature.capabilities.imageCrop] = true;
 capabilities[quadFeature.capabilities.imageFixedScale] = true;
 capabilities[quadFeature.capabilities.imageFull] = false;
+capabilities[quadFeature.capabilities.canvas] = true;
 
 registerFeature('canvas', 'quad', canvas_quadFeature, capabilities);
 module.exports = canvas_quadFeature;

src/d3/d3Renderer.js

@@ -478,6 +478,7 @@ var d3Renderer = function (arg) {
       data: arg.data,
       index: arg.dataIndex,
       style: arg.style,
+      visible: arg.visible,
       attributes: arg.attributes,
       classes: arg.classes,
       append: arg.append,
@@ -538,6 +539,7 @@ var d3Renderer = function (arg) {
     var data = m_features[id].data,
         index = m_features[id].index,
         style = m_features[id].style,
+        visible = m_features[id].visible,
         attributes = m_features[id].attributes,
         classes = m_features[id].classes,
         append = m_features[id].append,
@@ -549,6 +551,9 @@ var d3Renderer = function (arg) {
     setAttrs(rendersel, attributes);
     rendersel.attr('class', classes.concat([id]).join(' '));
     setStyles(rendersel, style);
+    if (visible) {
+      rendersel.style('visibility', visible() ? 'visible' : 'hidden');
+    }
     if (entries.size() && m_features[id].sortByZ) {
       selection.sort(function (a, b) {
         return (a.zIndex || 0) - (b.zIndex || 0);

src/d3/lineFeature.js

@@ -99,6 +99,7 @@ var d3_lineFeature = function (arg) {
         },
         id: m_this._d3id() + idx,
         classes: ['d3LineFeature', 'd3SubLine-' + idx],
+        visible: m_this.visible,
         style: style
       };
 

src/d3/pathFeature.js

@@ -94,6 +94,7 @@ var d3_pathFeature = function (arg) {
       'fill': function () { return false; },
       'fillColor': function () { return { r: 0, g: 0, b: 0 }; }
     }, s_style);
+    m_style.visible = m_this.visible;
 
     m_this.renderer()._drawFeatures(m_style);
 

src/d3/pointFeature.js

@@ -81,6 +81,7 @@ var d3_pointFeature = function (arg) {
     };
     m_style.style = s_style;
     m_style.classes = ['d3PointFeature'];
+    m_style.visible = m_this.visible;
 
     // pass to renderer to draw
     m_this.renderer()._drawFeatures(m_style);

src/d3/quadFeature.js

@@ -182,6 +182,7 @@ var d3_quadFeature = function (arg) {
       },
       onlyRenderNew: !this.style('previewColor') && !this.style('previewImage'),
       sortByZ: true,
+      visible: m_this.visible,
       classes: ['d3QuadFeature']
     };
     renderer._drawFeatures(feature);
@@ -234,6 +235,7 @@ capabilities[quadFeature.capabilities.image] = true;
 capabilities[quadFeature.capabilities.imageCrop] = false;
 capabilities[quadFeature.capabilities.imageFixedScale] = false;
 capabilities[quadFeature.capabilities.imageFull] = false;
+capabilities[quadFeature.capabilities.canvas] = false;
 
 registerFeature('d3', 'quad', d3_quadFeature, capabilities);
 module.exports = d3_quadFeature;

src/d3/vectorFeature.js

@@ -242,6 +242,7 @@ var d3_vectorFeature = function (arg) {
       endStyle: s_style.endStyle
     };
     m_style.classes = ['d3VectorFeature'];
+    m_style.visible = m_this.visible;
 
     // Add markers to the defition list
     updateMarkers(data, s_style.strokeColor, s_style.strokeOpacity, s_style.originStyle, s_style.endStyle);

src/feature.js

@@ -41,6 +41,7 @@ var feature = function (arg) {
       m_dataTime = timestamp(),
       m_buildTime = timestamp(),
       m_updateTime = timestamp(),
+      m_dependentFeatures = [],
       m_selectedFeatures = [];
 
   ////////////////////////////////////////////////////////////////////////////
@@ -417,7 +418,8 @@ var feature = function (arg) {
   this.visible = function (val) {
     if (val === undefined) {
       return m_visible;
-    } else {
+    }
+    if (m_visible !== val) {
       m_visible = val;
       m_this.modified();
 
@@ -427,9 +429,25 @@ var feature = function (arg) {
       } else {
         m_this._unbindMouseHandlers();
       }
+      for (var i = 0; i < m_dependentFeatures.length; i += 1) {
+        m_dependentFeatures[i].visible(val);
+      }
+    }
+    return m_this;
+  };
 
-      return m_this;
+  ////////////////////////////////////////////////////////////////////////////
+  /**
+   * Get/Set a list of dependent features.  Dependent features have their
+   * visibility changed at the same time as the feature.
+   */
+  ////////////////////////////////////////////////////////////////////////////
+  this.dependentFeatures = function (arg) {
+    if (arg === undefined) {
+      return m_dependentFeatures.slice();
     }
+    m_dependentFeatures = arg.slice();
+    return m_this;
   };
 
   ////////////////////////////////////////////////////////////////////////////

src/gl/quadFeature.js

@@ -423,6 +423,7 @@ capabilities[quadFeature.capabilities.image] = true;
 capabilities[quadFeature.capabilities.imageCrop] = true;
 capabilities[quadFeature.capabilities.imageFixedScale] = false;
 capabilities[quadFeature.capabilities.imageFull] = true;
+capabilities[quadFeature.capabilities.canvas] = false;
 
 registerFeature('vgl', 'quad', gl_quadFeature, capabilities);
 module.exports = gl_quadFeature;

src/polyfills.js

@@ -34,4 +34,3 @@ Math.sinh = Math.sinh || function (x) {
   var y = Math.exp(x);
   return (y - 1 / y) / 2;
 };
-

src/polygonFeature.js

@@ -260,15 +260,20 @@ var polygonFeature = function (arg) {
       if (m_lineFeature && m_this.layer()) {
         m_this.layer().deleteFeature(m_lineFeature);
         m_lineFeature = null;
+        m_this.dependentFeatures([]);
       }
       return;
     }
     if (!m_this.layer()) {
       return;
     }
     if (!m_lineFeature) {
-      m_lineFeature = m_this.layer().createFeature(
-        'line', {selectionAPI: false, gcs: this.gcs()});
+      m_lineFeature = m_this.layer().createFeature('line', {
+        selectionAPI: false,
+        gcs: m_this.gcs(),
+        visible: m_this.visible()
+      });
+      m_this.dependentFeatures([m_lineFeature]);
     }
     var polyStyle = m_this.style();
     m_lineFeature.style({
@@ -345,6 +350,7 @@ var polygonFeature = function (arg) {
     if (m_lineFeature && m_this.layer()) {
       m_this.layer().deleteFeature(m_lineFeature);
       m_lineFeature = null;
+      m_this.dependentFeatures([]);
     }
     s_exit();
   };