From 43ced3fe679143e0e60eb966d1d03db48991925a Mon Sep 17 00:00:00 2001 From: Fabio Berta Date: Sun, 18 Nov 2018 12:58:37 +0100 Subject: [PATCH] update for 4.0 --- types/react-map-gl/index.d.ts | 269 ++++++++++++---------- types/react-map-gl/react-map-gl-tests.tsx | 18 +- 2 files changed, 150 insertions(+), 137 deletions(-) diff --git a/types/react-map-gl/index.d.ts b/types/react-map-gl/index.d.ts index 7f59244154..4522ddf729 100644 --- a/types/react-map-gl/index.d.ts +++ b/types/react-map-gl/index.d.ts @@ -9,12 +9,13 @@ import * as React from 'react'; import * as MapboxGL from 'mapbox-gl'; import * as GeoJSON from 'geojson'; -export interface Viewport { +export interface ViewState { latitude: number; longitude: number; zoom: number; bearing?: number; pitch?: number; + altitude?: number; } export interface MapError { @@ -31,31 +32,37 @@ export interface MapRequest { credentials?: string; } -export interface MapboxProps extends Partial { - container?: {}; +export interface MapboxProps extends Partial { + container?: object; + gl?: object; mapboxApiAccessToken?: string; attributionControl?: boolean; preserveDrawingBuffer?: boolean; + reuseMaps?: boolean; + transformRequest?: (url?: string, resourceType?: string) => MapRequest; + mapOptions?: object; + mapStyle?: string | object; + visible?: boolean; onLoad?: () => void; onError?: (e: MapError) => void; - reuseMaps?: boolean; reuseMap?: boolean; - transformRequest?: (url?: string, resourceType?: string) => MapRequest; - - mapStyle?: string | {}; - - width: number; - height: number; - - viewState?: Viewport; - - altitude?: number; // Note: Non-public API, see https://github.com/mapbox/mapbox-gl-js/issues/1137 + width: number | string; + height: number | string; + viewState?: ViewState; } export interface StaticMapProps extends MapboxProps { + onResize?: (dimensions: { width: number; height: number }) => void; preventStyleDiffing?: boolean; - visible?: boolean; + disableTokenWarning?: boolean; className?: string; + style?: object; + visibilityConstraints?: { + minZoom?: number; + maxZoom?: number; + minPitch?: number; + maxPitch?: number; + }; } export interface QueryRenderedFeaturesParams { @@ -68,30 +75,71 @@ export class StaticMap extends React.Component { queryRenderedFeatures(geometry?: MapboxGL.PointLike | MapboxGL.PointLike[], parameters?: QueryRenderedFeaturesParams): Array>; } -export interface InteractiveMapState { +export interface ExtraState { isDragging: boolean; isHovering: boolean; } -export interface MapEvent { - lngLat: [number, number]; - features: Array<{}>; +export interface PositionInput { + pos: [number, number]; } -export interface MjolnirEvent { - type: string; - offsetCenter: {x: number, y: number}; - deltaX: number; - deltaY: number; - delta: number; - scale: number; - rotation: number; - pointerType: string; - metaKey: boolean; - rightButton: boolean; - stopPropagation: () => void; - preventDefault: () => void; - srcEvent: any; +export interface MapControllerOptions { + onViewportChange?: (viewState: ViewState) => void; + onStateChange?: (state: MapState) => void; + eventManager?: any; + isInteractive: boolean; + scrollZoom?: boolean; + dragPan?: boolean; + dragRotate?: boolean; + doubleClickZoom?: boolean; + touchZoom?: boolean; + touchRotate?: boolean; + keyboard?: boolean; +} + +export interface ViewportProps { + width: number; + height: number; + latitude: number; + longitude: number; + zoom: number; + bearing: number; + pitch: number; + altitude: number; + maxZoom: number; + minZoom: number; + maxPitch: number; + minPitch: number; + transitionDuration?: number; + transitionInterpolator?: TransitionInterpolator; + transitionInterruption?: TRANSITION_EVENTS; + transitionEasing?: EasingFunction; +} + +export interface InteractiveState { + startPanLngLat?: [number, number]; + startZoomLngLat?: [number, number]; + startBearing?: number; + startPitch?: number; + startZoom?: number; +} + +export type MapStateProps = Partial; + +export class MapState { + constructor(props: MapStateProps); + getViewportProps(): ViewportProps; + getInteractiveState(): InteractiveState; + panStart(input: PositionInput): MapState; + pan(input: PositionInput & { startPos?: [number, number] }): MapState; + panEnd(): MapState; + rotateStart(input: PositionInput): MapState; + rotate(input: { deltaScaleX?: number; deltaScaleY?: number }): MapState; + rotateEnd(): MapState; + zoomStart(input: PositionInput): MapState; + zoom(input: PositionInput & { scale: number; startPos?: [number, number] }): MapState; + zoomEnd(): MapState; } export interface Center { @@ -113,11 +161,30 @@ export interface MapControlEvent { delta?: number; } -export interface BaseMapControls { +export interface BaseMapController { events: string[]; handleEvent(event: MapControlEvent): void; } +export class MapController implements BaseMapController { + events: string[]; + handleEvent(event: MapControlEvent): void; + getMapState(overrides: Partial): MapState; + setOptions(options: MapControllerOptions): void; + setState(newState: MapState): void; + updateViewport(newMapState: MapState, extraProps: any, extraState: ExtraState): void; +} + +export interface PointerEvent { + type: string; + point: [number, number]; + lngLat: [number, number]; + target: any; + srcEvent: any; + // backward compatibility: v3 interface + features: any[]; +} + export type EasingFunction = (t: number) => number; export enum TRANSITION_EVENTS { @@ -135,7 +202,7 @@ export class LinearInterpolator extends TransitionInterpolator { export class FlyToInterpolator extends TransitionInterpolator {} export interface ViewStateChangeInfo { - viewState: Viewport; + viewState: ViewState; } export interface InteractiveMapProps extends StaticMapProps { @@ -143,10 +210,9 @@ export interface InteractiveMapProps extends StaticMapProps { minZoom?: number; maxPitch?: number; minPitch?: number; - - onViewportChange?: (viewport: Viewport) => void; onViewStateChange?: (info: ViewStateChangeInfo) => void; - + onViewportChange?: (viewState: ViewState) => void; + onInteractionStateChange?: (state: ExtraState) => void; transitionDuration?: number; transitionInterpolator?: TransitionInterpolator; transitionInterruption?: TRANSITION_EVENTS; @@ -154,7 +220,6 @@ export interface InteractiveMapProps extends StaticMapProps { onTransitionStart?: () => void; onTransitionInterrupt?: () => void; onTransitionEnd?: () => void; - scrollZoom?: boolean; dragPan?: boolean; dragRotate?: boolean; @@ -162,37 +227,25 @@ export interface InteractiveMapProps extends StaticMapProps { touchZoom?: boolean; touchRotate?: boolean; keyboard?: boolean; - - onHover?: (event: MapEvent) => void; - onClick?: (event: MapEvent) => void; - onDblClick?: (event: MapEvent) => void; - onMouseDown?: (event: MapEvent) => void; - onMouseMove?: (event: MapEvent) => void; - onMouseUp?: (event: MapEvent) => void; - onTouchStart?: (event: MapEvent) => void; - onTouchMove?: (event: MapEvent) => void; - onTouchEnd?: (event: MapEvent) => void; - onMouseEnter?: (event: MapEvent) => void; - onMouseLeave?: (event: MapEvent) => void; - onWheel?: (event: MapEvent) => void; - onMouseOut?: (event: MapEvent) => void; - - onContextMenu?: (event: MapEvent) => void; - + onHover?: (event: PointerEvent) => void; + onClick?: (event: PointerEvent) => void; + onDblClick?: (event: PointerEvent) => void; + onContextMenu?: (event: PointerEvent) => void; + onMouseDown?: (event: PointerEvent) => void; + onMouseMove?: (event: PointerEvent) => void; + onMouseUp?: (event: PointerEvent) => void; + onTouchStart?: (event: PointerEvent) => void; + onTouchMove?: (event: PointerEvent) => void; + onTouchEnd?: (event: PointerEvent) => void; + onMouseEnter?: (event: PointerEvent) => void; + onMouseLeave?: (event: PointerEvent) => void; + onMouseOut?: (event: PointerEvent) => void; + onWheel?: (event: PointerEvent) => void; touchAction?: string; - clickRadius?: number; - - getCursor?: (state: InteractiveMapState) => void; - - visibilityConstraints?: { - minZoom?: number; - maxZoom?: number; - minPitch?: number; - maxPitch?: number; - }; - - mapControls?: BaseMapControls; + interactiveLayerIds?: string[]; + getCursor?: (state: ExtraState) => void; + controller?: MapController; } export class InteractiveMap extends React.Component { @@ -211,15 +264,21 @@ export interface BaseControlProps { export class BaseControl extends React.Component {} +export interface DragEvent { + lngLat: [number, number]; + [key: string]: any; +} + export interface MarkerProps extends BaseControlProps { className?: string; longitude: number; latitude: number; offsetLeft?: number; offsetTop?: number; - onDrag: (event: MjolnirEvent) => void; - onDragStart: (event: MjolnirEvent) => void; - onDragEnd: (event: MjolnirEvent) => void; + draggable?: boolean; + onDrag?: (event: DragEvent) => void; + onDragEnd?: (event: DragEvent) => void; + onDragStart?: (event: DragEvent) => void; } export class Marker extends BaseControl {} @@ -228,6 +287,7 @@ export interface PopupProps extends BaseControlProps { className?: string; longitude: number; latitude: number; + altitude?: number; offsetLeft?: number; offsetTop?: number; tipSize?: number; @@ -244,13 +304,22 @@ export class Popup extends BaseControl {} export interface NavigationControlProps extends BaseControlProps { className?: string; onViewStateChange: (info: ViewStateChangeInfo) => void; - onViewportChange: (viewport: Viewport) => void; + onViewportChange: (viewport: ViewState) => void; showCompass?: boolean; showZoom?: boolean; } export class NavigationControl extends BaseControl {} +export interface DraggableControlProps extends BaseControlProps { + draggable?: boolean; + onDrag?: (event: DragEvent) => void; + onDragEnd?: (event: DragEvent) => void; + onDragStart?: (event: DragEvent) => void; +} + +export class DraggableControl extends BaseControl {} + export interface HTMLRedrawOptions { width: number; height: number; @@ -283,59 +352,3 @@ export interface SVGOverlayProps extends BaseControlProps { } export class SVGOverlay extends BaseControl {} - -export namespace experimental { - interface Options { - // TODO(deprecate): remove this when `touchZoomRotate` gets deprecated - touchZoomRotate?: boolean; - - onViewStateChange?: (info: ViewStateChangeInfo) => void; - onViewportChange?: (viewport: Viewport) => void; - onStateChange?: (state: MapState) => void; - eventManager?: any; - scrollZoom?: boolean; - dragPan?: boolean; - dragRotate?: boolean; - doubleClickZoom?: boolean; - touchZoom?: boolean; - touchRotate?: boolean; - keyboard?: boolean; - } - - class MapState implements Viewport { - width: number; - height: number; - latitude: number; - longitude: number; - zoom: number; - bearing?: number; - pitch?: number; - altitude?: number; - - maxZoom?: number; - minZoom?: number; - maxPitch?: number; - minPitch?: number; - - transitionDuration?: number; - transitionInterpolator?: TransitionInterpolator; - transitionInterruption?: TRANSITION_EVENTS; - transitionEasing?: EasingFunction; - - startPanLngLat?: [number, number]; - startZoomLngLat?: [number, number]; - startBearing?: number; - startPitch?: number; - startZoom?: number; - } - - class MapControls implements BaseMapControls { - events: string[]; - - handleEvent(event: MapControlEvent): void; - getMapState(overrides: Partial): MapState; - setOptions(options: Options): void; - setState(newState: MapState): void; - updateViewport(newMapState: MapState, extraProps: any, extraState: InteractiveMapState): void; - } -} diff --git a/types/react-map-gl/react-map-gl-tests.tsx b/types/react-map-gl/react-map-gl-tests.tsx index 7eb5bfd590..c9024287c9 100644 --- a/types/react-map-gl/react-map-gl-tests.tsx +++ b/types/react-map-gl/react-map-gl-tests.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { - Viewport, + ViewState, InteractiveMap, CanvasOverlay, SVGOverlay, @@ -13,12 +13,12 @@ import { import * as MapboxGL from "mapbox-gl"; interface State { - viewport: Viewport; + viewState: ViewState; } class MyMap extends React.Component<{}, State> { readonly state: State = { - viewport: { + viewState: { bearing: 0, latitude: 0, longitude: 0, @@ -31,14 +31,14 @@ class MyMap extends React.Component<{}, State> { return (
{ + redraw={opts => { const { ctx, height, @@ -51,7 +51,7 @@ class MyMap extends React.Component<{}, State> { }} /> {}} + redraw={opts => {}} captureScroll={true} captureDrag={true} captureClick={true} @@ -61,7 +61,7 @@ class MyMap extends React.Component<{}, State> { redraw={() => {}} /> { + redraw={opts => { const { height, project, @@ -79,7 +79,7 @@ class MyMap extends React.Component<{}, State> { redraw={() => {}} /> { + redraw={opts => { const { height, project, @@ -98,7 +98,7 @@ class MyMap extends React.Component<{}, State> { />