Add video quads

examples/quads/example.json

@@ -3,5 +3,6 @@
   "exampleJs": ["main.js"],
   "about": {
     "text": "This example shows how to add dynamic quads to a map."
-  }
+  },
+  "disabled": true
 }

examples/quads/main.js

@@ -19,6 +19,7 @@ $(function () {
     renderer: query.renderer ? (query.renderer === 'html' ? null : query.renderer) : undefined,
     features: query.renderer ? undefined : ['quad']
   });
+  var previewImage = new Image();
   var quads = layer.createFeature('quad', {selectionAPI: true});
   var quadData = [{
     ll: {x: -108, y: 29},
@@ -115,6 +116,23 @@ $(function () {
       quads.draw();
     }, 10000);
   }
+  if (query.video === 'true') {
+    /* You can render videos on a quad.  This is currently only supported on
+     * the canvas renderer. */
+    quadData.push({
+      ul: {x: -128, y: 9},
+      lr: {x: -98, y: -11},
+      video: '../../data/earthquakes-video.webm'
+    });
+    /* Add the same video via a video element and flip it vertically. */
+    var vid = document.createElement('video');
+    vid.src = '../../data/earthquakes-video.webm';
+    quadData.push({
+      ll: {x: -158, y: 9},
+      ur: {x: -128, y: -11},
+      video: vid
+    });
+  }
   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
@@ -134,7 +152,6 @@ $(function () {
       image: '../../data/tilefancy.png'
     });
   }
-  var previewImage = new Image();
   previewImage.onload = function () {
 
     quads
@@ -158,17 +175,20 @@ $(function () {
         evt.data.opacity = 0.5;
         // we either have to clear the internal cache on the item, or have
         // asked for it not to have been cached to begin with.
-        delete evt.data._cachedQuad;
-        this.modified();
+        this.cacheUpdate(evt.data);
         this.draw();
+        // if this is a video element, start it playing
+        if (quads.video(evt.data)) {
+          quads.video(evt.data).currentTime = 0;
+          quads.video(evt.data).play();
+        }
       })
       .geoOn(geo.event.feature.mouseout, function (evt) {
         if (evt.data.orig_opacity === undefined) {
           evt.data.orig_opacity = (evt.data.opacity || null);
         }
         evt.data.opacity = evt.data.orig_opacity || undefined;
-        delete evt.data._cachedQuad;
-        this.modified();
+        this.cacheUpdate(evt.data);
         this.draw();
       })
       .draw();

src/canvas/canvasRenderer.js

@@ -3,11 +3,12 @@ var registerRenderer = require('../registry').registerRenderer;
 var renderer = require('../renderer');
 
 /**
- * Create a new instance of class canvasRenderer
+ * Create a new instance of class canvasRenderer.
  *
  * @class geo.canvas.renderer
  * @extends geo.renderer
- * @param canvas
+ * @param {object} arg Options for the renderer.  This will typically have
+ *   `layer` and `canvas`.
  * @returns {geo.canvas.canvasRenderer}
  */
 var canvasRenderer = function (arg) {
@@ -26,19 +27,29 @@ var canvasRenderer = function (arg) {
       s_init = this._init,
       s_exit = this._exit;
 
+  /**
+   * Set the clear canvas flag.  If truthy, the canvas is erased at the start
+   * of the render cycle.  If falsy, the old data is kept.
+   *
+   * @param {boolean} arg Truthy to clear the canvas when rendering is started.
+   */
   this.clearCanvas = function (arg) {
     m_clearCanvas = arg;
   };
 
   /**
-   * Get API used by the renderer
+   * Get API used by the renderer.
+   *
+   * @returns {string} 'canvas'.
    */
   this.api = function () {
     return 'canvas';
   };
 
   /**
-   * Initialize
+   * Initialize.
+   *
+   * @returns {this}
    */
   this._init = function () {
     if (m_this.initialized()) {
@@ -63,7 +74,13 @@ var canvasRenderer = function (arg) {
   };
 
   /**
-   * Handle resize event
+   * Handle resize event.
+   *
+   * @param {number} x Ignored.
+   * @param {number} y Ignored.
+   * @param {number} w New width in pixels.
+   * @param {number} h New height in pixels.
+   * @returns {this}
    */
   this._resize = function (x, y, w, h) {
     m_this.canvas().attr('width', w);
@@ -74,7 +91,9 @@ var canvasRenderer = function (arg) {
   };
 
   /**
-   * Render
+   * Render.
+   *
+   * @returns {this}
    */
   this._render = function () {
     m_this.layer().map().scheduleAnimationFrame(this._renderFrame);
@@ -88,24 +107,34 @@ var canvasRenderer = function (arg) {
     var layer = m_this.layer(),
         map = layer.map(),
         camera = map.camera(),
-        viewport = camera._viewport;
+        viewport = camera._viewport,
+        features = layer.features(),
+        i;
+
+    for (i = 0; i < features.length; i += 1) {
+      if (features[i]._delayRender()) {
+        // reschedule the render for the next animation frame
+        m_this._render();
+        // exit this render loop so it doesn't occur
+        return;
+      }
+    }
 
     // Clear the canvas.
     if (m_clearCanvas) {
       m_this.context2d.setTransform(1, 0, 0, 1, 0, 0);
       m_this.context2d.clearRect(0, 0, viewport.width, viewport.height);
     }
 
-    var features = layer.features();
-    for (var i = 0; i < features.length; i += 1) {
+    for (i = 0; i < features.length; i += 1) {
       if (features[i].visible()) {
         features[i]._renderOnCanvas(m_this.context2d, map);
       }
     }
   };
 
   /**
-   * Exit
+   * Exit.
    */
   this._exit = function () {
     m_this.canvas().remove();
@@ -148,7 +177,7 @@ registerRenderer('canvas', canvasRenderer);
    * If the canvas renderer is not supported, supply the name of a renderer that
    * should be used instead.  This asks for the null renderer.
    *
-   * @returns null for the null renderer.
+   * @returns {null} `null` for the null renderer.
    */
   canvasRenderer.fallback = function () {
     return null;

src/canvas/object.js

@@ -31,6 +31,16 @@ var canvas_object = function (arg) {
   this._renderOnCanvas = function () {
   };
 
+  /**
+   * If this returns true, the render will be skipped and tried again on the
+   * next animation frame.
+   *
+   * @returns {boolean} Truthy to delay rendering.
+   */
+  this._delayRender = function () {
+    return false;
+  };
+
   /**
    * Check if a property has already been set on a canvas's context.  If so,
    * don't set it again.  Some browsers are much slower if the properties are