Type source and subclasses

mapbox · Jul 12, 2017 · d6b4d98 · d6b4d98
1 parent 52359d8
commit d6b4d98
Show file tree

Hide file tree

Showing 10 changed files with 352 additions and 221 deletions.
diff --git a/build/generate-flow-typed-style-spec.js b/build/generate-flow-typed-style-spec.js
@@ -22,7 +22,12 @@ function flowType(property) {
         case 'enum':
             return flowEnum(property.values);
         case 'array':
-            return `Array<${flowType(typeof property.value === 'string' ? {type: property.value} : property.value)}>`;
+            const elementType = flowType(typeof property.value === 'string' ? {type: property.value} : property.value)
+            if (property.length) {
+                return `[${Array(property.length).fill(elementType).join(', ')}]`;
+            } else {
+                return `Array<${elementType}>`;
+            }
         case 'light':
             return 'LightSpecification';
         case 'sources':

diff --git a/flow-typed/style-spec.js b/flow-typed/style-spec.js
@@ -21,7 +21,7 @@ declare type StyleSpecification = {|
 
 declare type LightSpecification = {|
     "anchor"?: "map" | "viewport",
-    "position"?: Array<number>,
+    "position"?: [number, number, number],
     "color"?: ColorSpecification,
     "intensity"?: number
 |}
@@ -49,18 +49,18 @@ declare type GeojsonSourceSpecification = {|
 declare type VideoSourceSpecification = {|
     "type": "video",
     "urls": Array<string>,
-    "coordinates": Array<Array<number>>
+    "coordinates": [[number, number], [number, number], [number, number], [number, number]]
 |}
 
 declare type ImageSourceSpecification = {|
     "type": "image",
     "url": string,
-    "coordinates": Array<Array<number>>
+    "coordinates": [[number, number], [number, number], [number, number], [number, number]]
 |}
 
 declare type CanvasSourceSpecification = {|
     "type": "canvas",
-    "coordinates": Array<Array<number>>,
+    "coordinates": [[number, number], [number, number], [number, number], [number, number]],
     "animate"?: boolean,
     "canvas": string
 |}
@@ -86,7 +86,7 @@ declare type FillLayerSpecification = {|
         "fill-opacity"?: number,
         "fill-color"?: ColorSpecification,
         "fill-outline-color"?: ColorSpecification,
-        "fill-translate"?: Array<number>,
+        "fill-translate"?: [number, number],
         "fill-translate-anchor"?: "map" | "viewport",
         "fill-pattern"?: string
     |},
@@ -107,7 +107,7 @@ declare type LineLayerSpecification = {|
     "layout"?: {|
         "line-opacity"?: number,
         "line-color"?: ColorSpecification,
-        "line-translate"?: Array<number>,
+        "line-translate"?: [number, number],
         "line-translate-anchor"?: "map" | "viewport",
         "line-width"?: number,
         "line-gap-width"?: number,
@@ -140,14 +140,14 @@ declare type SymbolLayerSpecification = {|
         "icon-halo-color"?: ColorSpecification,
         "icon-halo-width"?: number,
         "icon-halo-blur"?: number,
-        "icon-translate"?: Array<number>,
+        "icon-translate"?: [number, number],
         "icon-translate-anchor"?: "map" | "viewport",
         "text-opacity"?: number,
         "text-color"?: ColorSpecification,
         "text-halo-color"?: ColorSpecification,
         "text-halo-width"?: number,
         "text-halo-blur"?: number,
-        "text-translate"?: Array<number>,
+        "text-translate"?: [number, number],
         "text-translate-anchor"?: "map" | "viewport"
     |},
     "paint"?: {|
@@ -160,12 +160,12 @@ declare type SymbolLayerSpecification = {|
         "icon-rotation-alignment"?: "map" | "viewport" | "auto",
         "icon-size"?: number,
         "icon-text-fit"?: "none" | "width" | "height" | "both",
-        "icon-text-fit-padding"?: Array<number>,
+        "icon-text-fit-padding"?: [number, number, number, number],
         "icon-image"?: string,
         "icon-rotate"?: number,
         "icon-padding"?: number,
         "icon-keep-upright"?: boolean,
-        "icon-offset"?: Array<number>,
+        "icon-offset"?: [number, number],
         "icon-pitch-alignment"?: "map" | "viewport" | "auto",
         "text-pitch-alignment"?: "map" | "viewport" | "auto",
         "text-rotation-alignment"?: "map" | "viewport" | "auto",
@@ -182,7 +182,7 @@ declare type SymbolLayerSpecification = {|
         "text-padding"?: number,
         "text-keep-upright"?: boolean,
         "text-transform"?: "none" | "uppercase" | "lowercase",
-        "text-offset"?: Array<number>,
+        "text-offset"?: [number, number],
         "text-allow-overlap"?: boolean,
         "text-ignore-placement"?: boolean,
         "text-optional"?: boolean,
@@ -204,7 +204,7 @@ declare type CircleLayerSpecification = {|
         "circle-color"?: ColorSpecification,
         "circle-blur"?: number,
         "circle-opacity"?: number,
-        "circle-translate"?: Array<number>,
+        "circle-translate"?: [number, number],
         "circle-translate-anchor"?: "map" | "viewport",
         "circle-pitch-scale"?: "map" | "viewport",
         "circle-pitch-alignment"?: "map" | "viewport",
@@ -229,7 +229,7 @@ declare type FillExtrusionLayerSpecification = {|
     "layout"?: {|
         "fill-extrusion-opacity"?: number,
         "fill-extrusion-color"?: ColorSpecification,
-        "fill-extrusion-translate"?: Array<number>,
+        "fill-extrusion-translate"?: [number, number],
         "fill-extrusion-translate-anchor"?: "map" | "viewport",
         "fill-extrusion-pattern"?: string,
         "fill-extrusion-height"?: number,

diff --git a/src/source/canvas_source.js b/src/source/canvas_source.js
@@ -1,7 +1,12 @@
+// @flow
 
 const ImageSource = require('./image_source');
 const window = require('../util/window');
 
+import type Map from '../ui/map';
+import type Dispatcher from '../util/dispatcher';
+import type Evented from '../util/evented';
+
 /**
  * A data source containing the contents of an HTML canvas.
  * (See the [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#sources-canvas) for detailed documentation of options.)
@@ -32,11 +37,18 @@ const window = require('../util/window');
  * map.removeSource('some id');  // remove
  */
 class CanvasSource extends ImageSource {
-
-    constructor(id, options, dispatcher, eventedParent) {
+    options: CanvasSourceSpecification;
+    animate: boolean;
+    canvas: HTMLCanvasElement;
+    width: number;
+    height: number;
+    play: () => void;
+    pause: () => void;
+
+    constructor(id: string, options: CanvasSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
         super(id, options, dispatcher, eventedParent);
         this.options = options;
-        this.animate = options.hasOwnProperty('animate') ? options.animate : true;
+        this.animate = options.animate !== undefined ? options.animate : true;
     }
 
     load() {
@@ -68,7 +80,7 @@ class CanvasSource extends ImageSource {
         return this.canvas;
     }
 
-    onAdd(map) {
+    onAdd(map: Map) {
         if (this.map) return;
         this.map = map;
         this.load();
@@ -105,7 +117,7 @@ class CanvasSource extends ImageSource {
         this._prepareImage(this.map.painter.gl, this.canvas, resize);
     }
 
-    serialize() {
+    serialize(): Object {
         return {
             type: 'canvas',
             canvas: this.canvas,

diff --git a/src/source/geojson_source.js b/src/source/geojson_source.js
@@ -1,9 +1,15 @@
+// @flow
 
 const Evented = require('../util/evented');
 const util = require('../util/util');
 const window = require('../util/window');
 const EXTENT = require('../data/extent');
 
+import type {Source} from './source';
+import type Map from '../ui/map';
+import type Dispatcher from '../util/dispatcher';
+import type Tile from './tile';
+
 /**
  * A source containing GeoJSON.
  * (See the [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#sources-geojson) for detailed documentation of options.)
@@ -51,11 +57,26 @@ const EXTENT = require('../data/extent');
  * @see [Add a GeoJSON line](https://www.mapbox.com/mapbox-gl-js/example/geojson-line/)
  * @see [Create a heatmap from points](https://www.mapbox.com/mapbox-gl-js/example/heatmap/)
  */
-class GeoJSONSource extends Evented {
-
-    constructor(id, options, dispatcher, eventedParent) {
+class GeoJSONSource extends Evented implements Source {
+    type: 'geojson';
+    id: string;
+    minzoom: number;
+    maxzoom: number;
+    tileSize: number;
+
+    isTileClipped: boolean;
+    reparseOverscaled: boolean;
+    _data: GeoJSON | string;
+    _options: any;
+    workerOptions: any;
+    dispatcher: Dispatcher;
+    map: Map;
+    workerID: number;
+    _loaded: boolean;
+
+    constructor(id: string, options: GeojsonSourceSpecification & { workerOptions?: any }, dispatcher: Dispatcher, eventedParent: Evented) {
         super();
-        options = options || {};
+
         this.id = id;
 
         // `type` is a property rather than a constant to make it easy for 3rd
@@ -93,7 +114,9 @@ class GeoJSONSource extends Evented {
                 maxZoom: this.maxzoom
             },
             superclusterOptions: {
-                maxZoom: Math.min(options.clusterMaxZoom, this.maxzoom - 1) || (this.maxzoom - 1),
+                maxZoom: options.clusterMaxZoom !== undefined ?
+                    Math.min(options.clusterMaxZoom, this.maxzoom - 1) :
+                    (this.maxzoom - 1),
                 extent: EXTENT,
                 radius: (options.clusterRadius || 50) * scale,
                 log: false
@@ -114,7 +137,7 @@ class GeoJSONSource extends Evented {
         });
     }
 
-    onAdd(map) {
+    onAdd(map: Map) {
         this.load();
         this.map = map;
     }
@@ -125,7 +148,7 @@ class GeoJSONSource extends Evented {
      * @param {Object|string} data A GeoJSON data object or a URL to one. The latter is preferable in the case of large GeoJSON files.
      * @returns {GeoJSONSource} this
      */
-    setData(data) {
+    setData(data: GeoJSON | string) {
         this._data = data;
         this.fire('dataloading', {dataType: 'source'});
         this._updateWorkerData((err) => {
@@ -143,7 +166,7 @@ class GeoJSONSource extends Evented {
      * handles loading the geojson data and preparing to serve it up as tiles,
      * using geojson-vt or supercluster as appropriate.
      */
-    _updateWorkerData(callback) {
+    _updateWorkerData(callback: Function) {
         const options = util.extend({}, this.workerOptions);
         const data = this._data;
         if (typeof data === 'string') {
@@ -161,7 +184,7 @@ class GeoJSONSource extends Evented {
         }, this.workerID);
     }
 
-    loadTile(tile, callback) {
+    loadTile(tile: Tile, callback: Callback<void>) {
         const message = !tile.workerID || tile.state === 'expired' ? 'loadTile' : 'reloadTile';
         const params = {
             type: this.type,
@@ -200,11 +223,11 @@ class GeoJSONSource extends Evented {
         }, this.workerID);
     }
 
-    abortTile(tile) {
+    abortTile(tile: Tile) {
         tile.aborted = true;
     }
 
-    unloadTile(tile) {
+    unloadTile(tile: Tile) {
         tile.unloadVectorData();
         this.dispatcher.send('removeTile', { uid: tile.uid, type: this.type, source: this.id }, () => {}, tile.workerID);
     }