update for 4.0

This commit is contained in:
Fabio Berta
2018-11-18 13:03:56 +01:00
parent c6b16d03af
commit 43ced3fe67
2 changed files with 150 additions and 137 deletions
+141 -128
View File
@@ -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<Viewport> {
container?: {};
export interface MapboxProps extends Partial<ViewState> {
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<StaticMapProps> {
queryRenderedFeatures(geometry?: MapboxGL.PointLike | MapboxGL.PointLike[], parameters?: QueryRenderedFeaturesParams): Array<GeoJSON.Feature<GeoJSON.GeometryObject>>;
}
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<ViewportProps & InteractiveState>;
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>): 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<InteractiveMapProps> {
@@ -211,15 +264,21 @@ export interface BaseControlProps {
export class BaseControl<T extends BaseControlProps> extends React.Component<T> {}
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<MarkerProps> {}
@@ -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<PopupProps> {}
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<NavigationControlProps> {}
export interface DraggableControlProps extends BaseControlProps {
draggable?: boolean;
onDrag?: (event: DragEvent) => void;
onDragEnd?: (event: DragEvent) => void;
onDragStart?: (event: DragEvent) => void;
}
export class DraggableControl extends BaseControl<DraggableControlProps> {}
export interface HTMLRedrawOptions {
width: number;
height: number;
@@ -283,59 +352,3 @@ export interface SVGOverlayProps extends BaseControlProps {
}
export class SVGOverlay extends BaseControl<SVGOverlayProps> {}
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>): MapState;
setOptions(options: Options): void;
setState(newState: MapState): void;
updateViewport(newMapState: MapState, extraProps: any, extraState: InteractiveMapState): void;
}
}
+9 -9
View File
@@ -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 (
<div>
<InteractiveMap
{...this.state.viewport}
{...this.state.viewState}
mapboxApiAccessToken="pk.test"
height={400}
width={400}
ref={this.setRefInteractive}
>
<CanvasOverlay
redraw={(opts: CanvasRedrawOptions) => {
redraw={opts => {
const {
ctx,
height,
@@ -51,7 +51,7 @@ class MyMap extends React.Component<{}, State> {
}}
/>
<CanvasOverlay
redraw={(opts: CanvasRedrawOptions) => {}}
redraw={opts => {}}
captureScroll={true}
captureDrag={true}
captureClick={true}
@@ -61,7 +61,7 @@ class MyMap extends React.Component<{}, State> {
redraw={() => {}}
/>
<SVGOverlay
redraw={(opts: SVGRedrawOptions) => {
redraw={opts => {
const {
height,
project,
@@ -79,7 +79,7 @@ class MyMap extends React.Component<{}, State> {
redraw={() => {}}
/>
<HTMLOverlay
redraw={(opts: HTMLRedrawOptions) => {
redraw={opts => {
const {
height,
project,
@@ -98,7 +98,7 @@ class MyMap extends React.Component<{}, State> {
/>
</InteractiveMap>
<StaticMap
{...this.state.viewport}
{...this.state.viewState}
mapboxApiAccessToken="pk.test"
height={400}
width={400}