Type ui directory

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

@@ -100,7 +100,17 @@ const layerTypes = Object.keys(spec.layer.type.values);
 fs.writeFileSync('flow-typed/style-spec.js', `// Generated code; do not edit. Edit build/generate-flow-typed-style-spec.js instead.
 
 declare type ColorSpecification = string;
-declare type FilterSpecification = Array<any>;
+
+declare type FilterSpecification =
+ | ['has', string]
+ | ['!has', string]
+ | ['==', string, string | number | boolean]
+ | ['!=', string, string | number | boolean]
+ | ['>', string, string | number | boolean]
+ | ['>=', string, string | number | boolean]
+ | ['<', string, string | number | boolean]
+ | ['<=', string, string | number | boolean]
+ | Array<string | FilterSpecification>; // Can't type in, !in, all, any, none -- https://github.com/facebook/flow/issues/2443
 
 declare type TransitionSpecification = {
  duration?: number,

flow-typed/geojson.js

@@ -1,14 +1,14 @@
-type Position = [number, number] | [number, number, number];
+type GeoJSONPosition = [number, number] | [number, number, number];
 type Geometry<T, C> = { type: T, coordinates: C }
 
-declare type GeoJSONPoint = Geometry< 'Point', Position>;
-declare type GeoJSONMultiPoint = Geometry<'MultiPoint', Array<Position>>;
+declare type GeoJSONPoint = Geometry< 'Point', GeoJSONPosition>;
+declare type GeoJSONMultiPoint = Geometry<'MultiPoint', Array<GeoJSONPosition>>;
 
-declare type GeoJSONLineString = Geometry< 'LineString', Array<Position>>;
-declare type GeoJSONMultiLineString = Geometry<'MultiLineString', Array<Array<Position>>>;
+declare type GeoJSONLineString = Geometry< 'LineString', Array<GeoJSONPosition>>;
+declare type GeoJSONMultiLineString = Geometry<'MultiLineString', Array<Array<GeoJSONPosition>>>;
 
-declare type GeoJSONPolygon = Geometry< 'Polygon', Array<Array<Position>>>;
-declare type GeoJSONMultiPolygon = Geometry<'MultiPolygon', Array<Array<Array<Position>>>>;
+declare type GeoJSONPolygon = Geometry< 'Polygon', Array<Array<GeoJSONPosition>>>;
+declare type GeoJSONMultiPolygon = Geometry<'MultiPolygon', Array<Array<Array<GeoJSONPosition>>>>;
 
 declare type GeoJSONGeometry =
  | GeoJSONPoint

flow-typed/style-spec.js

@@ -1,7 +1,17 @@
 // Generated code; do not edit. Edit build/generate-flow-typed-style-spec.js instead.
 
 declare type ColorSpecification = string;
-declare type FilterSpecification = Array<any>;
+
+declare type FilterSpecification =
+ | ['has', string]
+ | ['!has', string]
+ | ['==', string, string | number | boolean]
+ | ['!=', string, string | number | boolean]
+ | ['>', string, string | number | boolean]
+ | ['>=', string, string | number | boolean]
+ | ['<', string, string | number | boolean]
+ | ['<=', string, string | number | boolean]
+ | Array<string | FilterSpecification>; // Can't type in, !in, all, any, none -- https://github.com/facebook/flow/issues/2443
 
 declare type TransitionSpecification = {
  duration?: number,

src/data/feature_index.js

@@ -41,7 +41,7 @@ type QueryParameters = {
  tileSize: number,
  queryGeometry: Array<Array<{x: number, y: number}>>,
  params: {
- filter: any,
+ filter: FilterSpecification,
  layers: Array<string>,
  }
 }

src/source/query_features.js

@@ -9,7 +9,7 @@ import type Coordinate from '../geo/coordinate';
 exports.rendered = function(sourceCache: SourceCache,
  styleLayers: {[string]: StyleLayer},
  queryGeometry: Array<Coordinate>,
- params: { filter: any, layers: Array<string> },
+ params: { filter: FilterSpecification, layers: Array<string> },
  zoom: number,
  bearing: number) {
  const tilesIn = sourceCache.tilesIn(queryGeometry);

src/source/source.js

@@ -45,6 +45,7 @@ export interface Source {
  minzoom: number,
  maxzoom: number,
  tileSize: number,
+ attribution?: string,
 
  roundZoom?: boolean,
  reparseOverscaled?: boolean,

src/style/style.js

@@ -248,7 +248,7 @@ class Style extends Evented {
  return ids.map((id) => this._layers[id].serialize());
  }
 
- _applyClasses(classes?: Array<string>, options: {}) {
+ _applyClasses(classes?: Array<string>, options: ?{}) {
  if (!this._loaded) return;
 
  classes = classes || [];
@@ -334,7 +334,7 @@ class Style extends Evented {
  /**
  * Apply queued style updates in a batch
  */
- update(classes: Array<string>, options: {}) {
+ update(classes: Array<string>, options: ?{}) {
  if (!this._changed) return;
 
  const updatedIds = Object.keys(this._updatedLayers);
@@ -547,7 +547,7 @@ class Style extends Evented {
  * @param {StyleLayer|Object} layer
  * @param {string=} before ID of an existing layer to insert before
  */
- moveLayer(id: string, before: string) {
+ moveLayer(id: string, before?: string) {
  this._checkLoaded();
  this._changed = true;
 
@@ -650,7 +650,7 @@ class Style extends Evented {
  this._updateLayer(layer);
  }
 
- setFilter(layerId: string, filter: any) {
+ setFilter(layerId: string, filter: FilterSpecification) {
  this._checkLoaded();
 
  const layer = this.getLayer(layerId);
@@ -868,7 +868,7 @@ class Style extends Evented {
  return this.light.getLight();
  }
 
- setLight(lightOptions: LightSpecification, transitionOptions: {}) {
+ setLight(lightOptions: LightSpecification, transitionOptions?: {}) {
  this._checkLoaded();
 
  const light = this.light.getLight();

src/ui/bind_handlers.js

@@ -1,7 +1,10 @@
+// @flow
 
 const DOM = require('../util/dom');
 const Point = require('@mapbox/point-geometry');
 
+import type Map from './map';
+
 const handlers = {
  scrollZoom: require('./handler/scroll_zoom'),
  boxZoom: require('./handler/box_zoom'),
@@ -12,17 +15,17 @@ const handlers = {
  touchZoomRotate: require('./handler/touch_zoom_rotate')
 };
 
-module.exports = function bindHandlers(map, options) {
+module.exports = function bindHandlers(map: Map, options: {}) {
  const el = map.getCanvasContainer();
  let contextMenuEvent = null;
  let mouseDown = false;
  let startPos = null;
  let tapped = null;
 
  for (const name in handlers) {
- map[name] = new handlers[name](map, options);
+ (map : any)[name] = new handlers[name](map, options);
  if (options.interactive && options[name]) {
- map[name].enable(options[name]);
+ (map : any)[name].enable(options[name]);
  }
  }
 
@@ -38,19 +41,19 @@ module.exports = function bindHandlers(map, options) {
  el.addEventListener('dblclick', onDblClick, false);
  el.addEventListener('contextmenu', onContextMenu, false);
 
- function onMouseOut(e) {
+ function onMouseOut(e: MouseEvent) {
  fireMouseEvent('mouseout', e);
  }
 
- function onMouseDown(e) {
+ function onMouseDown(e: MouseEvent) {
  map.stop();
  startPos = DOM.mousePos(el, e);
  fireMouseEvent('mousedown', e);
 
  mouseDown = true;
  }
 
- function onMouseUp(e) {
+ function onMouseUp(e: MouseEvent) {
  const rotating = map.dragRotate && map.dragRotate.isActive();
 
  if (contextMenuEvent && !rotating) {
@@ -63,18 +66,18 @@ module.exports = function bindHandlers(map, options) {
  fireMouseEvent('mouseup', e);
  }
 
- function onMouseMove(e) {
+ function onMouseMove(e: MouseEvent) {
  if (map.dragPan && map.dragPan.isActive()) return;
  if (map.dragRotate && map.dragRotate.isActive()) return;
 
- let target = e.toElement || e.target;
+ let target: any = e.toElement || e.target;
  while (target && target !== el) target = target.parentNode;
  if (target !== el) return;
 
  fireMouseEvent('mousemove', e);
  }
 
- function onTouchStart(e) {
+ function onTouchStart(e: TouchEvent) {
  map.stop();
  fireTouchEvent('touchstart', e);
 
@@ -90,36 +93,36 @@ module.exports = function bindHandlers(map, options) {
  }
  }
 
- function onTouchMove(e) {
+ function onTouchMove(e: TouchEvent) {
  fireTouchEvent('touchmove', e);
  }
 
- function onTouchEnd(e) {
+ function onTouchEnd(e: TouchEvent) {
  fireTouchEvent('touchend', e);
  }
 
- function onTouchCancel(e) {
+ function onTouchCancel(e: TouchEvent) {
  fireTouchEvent('touchcancel', e);
  }
 
  function onTouchTimeout() {
  tapped = null;
  }
 
- function onClick(e) {
+ function onClick(e: MouseEvent) {
  const pos = DOM.mousePos(el, e);
 
- if (pos.equals(startPos)) {
+ if (pos.equals((startPos : any))) {
  fireMouseEvent('click', e);
  }
  }
 
- function onDblClick(e) {
+ function onDblClick(e: MouseEvent) {
  fireMouseEvent('dblclick', e);
  e.preventDefault();
  }
 
- function onContextMenu(e) {
+ function onContextMenu(e: MouseEvent) {
  const rotating = map.dragRotate && map.dragRotate.isActive();
  if (!mouseDown && !rotating) {
  // Windows: contextmenu fired on mouseup, so fire event now

src/ui/camera.js

@@ -386,7 +386,7 @@ class Camera extends Evented {
  return 0;
  }), ["bottom", "left", "right", "top"])) {
  util.warnOnce("options.padding must be a positive number, or an Object with keys 'bottom', 'left', 'right', 'top'");
- return;
+ return this;
  }
 
  bounds = LngLatBounds.convert(bounds);
@@ -410,7 +410,7 @@ class Camera extends Evented {
 
  if (scaleY < 0 || scaleX < 0) {
  util.warnOnce('Map cannot fit within canvas with the given bounds, padding, and/or offset.');
- return;
+ return this;
  }
 
  options.center = tr.unproject(nw.add(se).div(2));

src/ui/control/attribution_control.js

@@ -1,8 +1,11 @@
+// @flow
 
 const DOM = require('../../util/dom');
 const util = require('../../util/util');
 const config = require('../../util/config');
 
+import type Map from '../map';
+
 /**
  * An `AttributionControl` control presents the map's [attribution information](https://www.mapbox.com/help/attribution/).
  *
@@ -16,8 +19,14 @@ const config = require('../../util/config');
  * }));
  */
 class AttributionControl {
-
- constructor(options) {
+ options: any;
+ _map: Map;
+ _container: HTMLElement;
+ _editLink: ?HTMLAnchorElement;
+ styleId: string;
+ styleOwner: string;
+
+ constructor(options: any) {
  this.options = options;
 
  util.bindAll([
@@ -31,7 +40,7 @@ class AttributionControl {
  return 'bottom-right';
  }
 
- onAdd(map) {
+ onAdd(map: Map) {
  const compact = this.options && this.options.compact;
 
  this._map = map;
@@ -56,37 +65,39 @@ class AttributionControl {
  }
 
  onRemove() {
- this._container.parentNode.removeChild(this._container);
+ DOM.remove(this._container);
 
  this._map.off('sourcedata', this._updateData);
  this._map.off('moveend', this._updateEditLink);
  this._map.off('resize', this._updateCompact);
 
- this._map = undefined;
+ this._map = (undefined : any);
  }
 
  _updateEditLink() {
- if (!this._editLink) this._editLink = this._container.querySelector('.mapbox-improve-map');
+ let editLink = this._editLink;
+ if (!editLink) {
+ editLink = this._editLink = (this._container.querySelector('.mapbox-improve-map'): any);
+ }
+
  const params = [
  {key: "owner", value: this.styleOwner},
  {key: "id", value: this.styleId},
  {key: "access_token", value: config.ACCESS_TOKEN}
  ];
 
- if (this._editLink) {
+ if (editLink) {
  const paramString = params.reduce((acc, next, i) => {
- if (next.value !== undefined) {
+ if (next.value) {
  acc += `${next.key}=${next.value}${i < params.length - 1 ? '&' : ''}`;
  }
  return acc;
  }, `?`);
- this._editLink.href = `https://www.mapbox.com/feedback/${paramString}${this._map._hash ? this._map._hash.getHashString(true) : ''}`;
-
+ editLink.href = `https://www.mapbox.com/feedback/${paramString}${this._map._hash ? this._map._hash.getHashString(true) : ''}`;
  }
  }
 
-
- _updateData(e) {
+ _updateData(e: any) {
  if (e && e.sourceDataType === 'metadata') {
  this._updateAttributions();
  this._updateEditLink();
@@ -95,10 +106,10 @@ class AttributionControl {
 
  _updateAttributions() {
  if (!this._map.style) return;
- let attributions = [];
+ let attributions: Array<string> = [];
 
  if (this._map.style.stylesheet) {
- const stylesheet = this._map.style.stylesheet;
+ const stylesheet: any = this._map.style.stylesheet;
  this.styleOwner = stylesheet.owner;
  this.styleId = stylesheet.id;
  }
@@ -126,9 +137,11 @@ class AttributionControl {
  }
 
  _updateCompact() {
- const compact = this._map.getCanvasContainer().offsetWidth <= 640;
-
- this._container.classList[compact ? 'add' : 'remove']('mapboxgl-compact');
+ if (this._map.getCanvasContainer().offsetWidth <= 640) {
+ this._container.classList.add('mapboxgl-compact');
+ } else {
+ this._container.classList.remove('mapboxgl-compact');
+ }
  }
 
 }