Canvas source initialization from HTML element

build/generate-flow-typed-style-spec.js

@@ -9,6 +9,10 @@ function flowEnum(values) {
     }
 }
 
+function flowUnion(types) {
+    return Object.keys(types).join(' | ');
+}
+
 function flowType(property) {
     if (typeof property.type === 'function') {
         return property.type();
@@ -22,6 +26,8 @@ function flowType(property) {
                 return property.type;
             case 'enum':
                 return flowEnum(property.values);
+            case 'union':
+                return flowUnion(property.types);
             case 'array':
                 const elementType = flowType(typeof property.value === 'string' ? {type: property.value} : property.value)
                 if (property.length) {

flow-typed/style-spec.js

@@ -133,7 +133,7 @@ declare type CanvasSourceSpecification = {|
     "type": "canvas",
     "coordinates": [[number, number], [number, number], [number, number], [number, number]],
     "animate"?: boolean,
-    "canvas": string
+    "canvas": string | HTMLCanvasElement
 |}
 
 declare type SourceSpecification =

src/source/canvas_source.js

@@ -75,7 +75,12 @@ class CanvasSource extends ImageSource {
      */
 
     load() {
-        this.canvas = this.canvas || window.document.getElementById(this.options.canvas);
+        if (!this.canvas) {
+            this.canvas = (this.options.canvas instanceof HTMLCanvasElement) ?
+                this.options.canvas :
+                window.document.getElementById(this.options.canvas);
+        }
+
         this.width = this.canvas.width;
         this.height = this.canvas.height;
 

src/style-spec/reference/v8.json

@@ -426,9 +426,27 @@
       "doc": "Whether the canvas source is animated. If the canvas is static, `animate` should be set to `false` to improve performance."
     },
     "canvas": {
-      "type": "string",
+      "type": "union",
+      "doc": "Source from which read canvas data.",
       "required": true,
-      "doc": "HTML ID of the canvas from which to read pixels."
+      "types": {
+        "string": {
+          "doc": "HTML ID of the canvas from which to read pixels.",
+          "sdk-support": {
+            "basic functionality": {
+              "js": "0.32.0"
+            }
+          }
+        },
+        "HTMLCanvasElement": {
+          "doc": "HTMLCanvasElement from which to read pixels.",
+          "sdk-support": {
+            "basic functionality": {
+              "js": "TODO"
+            }
+          }
+        }
+      }
     }
   },
   "layer": {

src/style-spec/util/get_type.js

@@ -1,4 +1,6 @@
 
+import window from '../../util/window';
+
 export default function getType(val) {
     if (val instanceof Number) {
         return 'number';
@@ -8,6 +10,8 @@ export default function getType(val) {
         return 'boolean';
     } else if (Array.isArray(val)) {
         return 'array';
+    } else if (val instanceof window.HTMLCanvasElement) {
+        return 'HTMLCanvasElement';
     } else if (val === null) {
         return 'null';
     } else {

src/style-spec/validate/validate.js

@@ -18,6 +18,7 @@ import validateLayer from './validate_layer';
 import validateSource from './validate_source';
 import validateLight from './validate_light';
 import validateString from './validate_string';
+import validateUnion from './validate_union';
 
 const VALIDATORS = {
     '*': function() {
@@ -35,7 +36,8 @@ const VALIDATORS = {
     'object': validateObject,
     'source': validateSource,
     'light': validateLight,
-    'string': validateString
+    'string': validateString,
+    'union': validateUnion
 };
 
 

src/style-spec/validate/validate_union.js

@@ -0,0 +1,18 @@
+
+import ValidationError from '../error/validation_error';
+import getType from '../util/get_type';
+
+export default function validateUnion(options) {
+    const key = options.key;
+    const value = options.value;
+    const valueSpec = options.valueSpec;
+    const errors = [];
+
+    const type = getType(value);
+
+    if (Object.keys(valueSpec.types).indexOf(type) === -1) {
+        errors.push(new ValidationError(key, value, `expected one of types [${Object.keys(valueSpec.types).join(', ')}], ${JSON.stringify(type)} found`));
+    }
+
+    return errors;
+}

test/unit/source/canvas_source.test.js

@@ -8,7 +8,7 @@ import window from '../../../src/util/window';
 function createSource(options) {
     window.useFakeHTMLCanvasGetContext();
 
-    const c = window.document.createElement('canvas');
+    const c = options && options.canvas || window.document.createElement('canvas');
     c.width = 20;
     c.height = 20;
 
@@ -58,6 +58,22 @@ test('CanvasSource', (t) => {
         source.onAdd(new StubMap());
     });
 
+    t.test('can be initialized with HTML element', (t) => {
+        const el = window.document.createElement('canvas');
+        const source = createSource({
+            canvas: el
+        });
+
+        source.on('data', (e) => {
+            if (e.dataType === 'source' && e.sourceDataType === 'metadata') {
+                t.equal(source.canvas, el);
+                t.end();
+            }
+        });
+
+        source.onAdd(new StubMap());
+    });
+
     t.test('rerenders if animated', (t) => {
         const source = createSource();
         const map = new StubMap();

test/unit/style-spec/fixture/sources.input.json

@@ -33,6 +33,22 @@
       "coordinates": [
         1, "2", [3, "4"], []
       ]
+    },
+    "canvas-valid-string": {
+      "type": "canvas",
+      "coordinates": [
+        [1, 2], [3, 4], [5, 6], [7, 8]
+      ],
+      "canvas": "canvasId",
+      "animate": false
+    },
+    "canvas-invalid-union-type": {
+      "type": "canvas",
+      "coordinates": [
+        [1, 2], [3, 4], [5, 6], [7, 8]
+      ],
+      "canvas": 3,
+      "animate": false
     }
   },
   "layers": []

test/unit/style-spec/fixture/sources.output.json

@@ -34,5 +34,9 @@
   {
     "message": "sources.video-wrong-coordinates.coordinates[3]: array length 2 expected, length 0 found",
     "line": 34
+  },
+  {
+    "message": "sources.canvas-invalid-union-type.canvas: expected one of types [string, HTMLCanvasElement], \"number\" found",
+    "line": 50
   }
-]
+]

test/unit/style-spec/spec.test.js

@@ -23,7 +23,7 @@ function validSchema(k, t, obj, ref, version, kind) {
     const types = Object.keys(ref).concat(['boolean', 'string', 'number',
         'array', 'enum', 'color', '*',
         // new in v8
-        'opacity', 'translate-array', 'dash-array', 'offset-array', 'font-array', 'field-template',
+        'opacity', 'translate-array', 'dash-array', 'offset-array', 'font-array', 'field-template', 'union',
         // new enums in v8
         'line-cap-enum',
         'line-join-enum',
@@ -51,6 +51,7 @@ function validSchema(k, t, obj, ref, version, kind) {
         'units',
         'tokens',
         'values',
+        'types',
         'maximum',
         'minimum',
         'period',
@@ -88,6 +89,17 @@ function validSchema(k, t, obj, ref, version, kind) {
             }
         }
 
+        if (obj.type === 'union') {
+            const types = Object.keys(obj.types);
+            t.ok(Array.isArray(types));
+            for (const v in obj.types) {
+                if (obj.types[v].doc !== undefined) {
+                    t.equal('string', typeof obj.types[v].doc, `${k}.doc (string)`);
+                    if (kind === 'min') t.fail(`minified file should not have ${k}.doc`);
+                } else if (t.name === 'latest') t.fail(`doc missing for ${k}`);
+            }
+        }
+
         // schema type is array, it must have 'value' and it must be a type.
         if (obj.value !== undefined) {
             if (Array.isArray(obj.value)) {