From ce7dc2fdc39e3815cc0f0f667d41d767623dbd9e Mon Sep 17 00:00:00 2001 From: Xiaoji Chen Date: Thu, 10 Aug 2023 18:17:37 -0700 Subject: [PATCH] Separate event types --- src/components/map.tsx | 18 ++-- src/components/source.ts | 4 +- src/exports-mapbox.ts | 29 +++--- src/exports-maplibre.ts | 29 +++--- src/mapbox/create-ref.ts | 17 +++- src/mapbox/mapbox.ts | 188 ++++++++++++----------------------- src/types/common.ts | 3 +- src/types/events-mapbox.ts | 76 ++++++++++++++ src/types/events-maplibre.ts | 76 ++++++++++++++ src/types/events.ts | 79 ++------------- 10 files changed, 282 insertions(+), 237 deletions(-) create mode 100644 src/types/events-mapbox.ts create mode 100644 src/types/events-maplibre.ts diff --git a/src/components/map.tsx b/src/components/map.tsx index 7a77db0e6..fa0db6fc0 100644 --- a/src/components/map.tsx +++ b/src/components/map.tsx @@ -8,7 +8,7 @@ import createRef, {MapRef} from '../mapbox/create-ref'; import type {CSSProperties} from 'react'; import useIsomorphicLayoutEffect from '../utils/use-isomorphic-layout-effect'; import setGlobals, {GlobalSettings} from '../utils/set-globals'; -import type {MapLib, MapInstance, MapStyle} from '../types'; +import type {MapLib, MapInstance, MapStyle, Callbacks} from '../types'; export type MapContextValue = { mapLib: MapLib; @@ -25,9 +25,10 @@ type MapInitOptions = Omit< export type MapProps< MapOptions, StyleT extends MapStyle, + CallbacksT extends Callbacks, MapT extends MapInstance > = MapInitOptions & - MapboxProps & + MapboxProps & GlobalSettings & { mapLib?: MapLib | Promise>; reuseMaps?: boolean; @@ -38,13 +39,18 @@ export type MapProps< children?: any; }; -export default function Map( - props: MapProps, +export default function Map< + MapOptions, + StyleT extends MapStyle, + CallbacksT extends Callbacks, + MapT extends MapInstance +>( + props: MapProps, ref: React.Ref>, defaultLib: MapLib | Promise> ) { const mountedMapsContext = useContext(MountedMapsContext); - const [mapInstance, setMapInstance] = useState>(null); + const [mapInstance, setMapInstance] = useState>(null); const containerRef = useRef(); const {current: contextValue} = useRef>({mapLib: null, map: null}); @@ -52,7 +58,7 @@ export default function Map { const mapLib = props.mapLib; let isMounted = true; - let mapbox: Mapbox; + let mapbox: Mapbox; Promise.resolve(mapLib || defaultLib) .then((module: MapLib | {default: MapLib}) => { diff --git a/src/components/source.ts b/src/components/source.ts index a0de4ad10..28382aa83 100644 --- a/src/components/source.ts +++ b/src/components/source.ts @@ -65,7 +65,9 @@ function updateSource( const type = props.type; if (type === 'geojson') { - (source as GeoJSONSourceImplementation).setData((props as unknown as GeoJSONSource).data as any); + (source as GeoJSONSourceImplementation).setData( + (props as unknown as GeoJSONSource).data as any + ); } else if (type === 'image') { (source as ImageSourceImplemtation).updateImage({ url: (props as unknown as ImageSource).url, diff --git a/src/exports-mapbox.ts b/src/exports-mapbox.ts index 7f6f766cf..30e07b0e3 100644 --- a/src/exports-mapbox.ts +++ b/src/exports-mapbox.ts @@ -42,17 +42,18 @@ import {default as _Source, SourceProps as _SourceProps} from './components/sour import {useMap as _useMap} from './components/use-map'; import type {MapRef as _MapRef} from './mapbox/create-ref'; import type * as events from './types/events'; +import type {MapCallbacks} from './types/events-mapbox'; export function useMap() { return _useMap(); } -export type MapProps = _MapProps; +export type MapProps = _MapProps; export type MapRef = _MapRef; const mapLib = import('mapbox-gl'); export const Map = (() => { return React.forwardRef(function Map(props: MapProps, ref: React.Ref) { - return _Map(props, ref, mapLib); + return _Map(props, ref, mapLib); }); })(); @@ -115,17 +116,19 @@ export * from './types/public'; export * from './types/style-spec-mapbox'; // Events -export type MapEvent = events.MapEvent; -export type ErrorEvent = events.ErrorEvent; -export type MapStyleDataEvent = events.MapStyleDataEvent; -export type MapSourceDataEvent = events.MapSourceDataEvent; -export type MapMouseEvent = events.MapMouseEvent; -export type MapLayerMouseEvent = events.MapLayerMouseEvent; -export type MapTouchEvent = events.MapTouchEvent; -export type MapLayerTouchEvent = events.MapLayerTouchEvent; -export type MapWheelEvent = events.MapWheelEvent; -export type MapBoxZoomEvent = events.MapBoxZoomEvent; -export type ViewStateChangeEvent = events.ViewStateChangeEvent; +export { + MapEvent, + MapMouseEvent, + MapLayerMouseEvent, + MapTouchEvent, + MapLayerTouchEvent, + MapStyleDataEvent, + MapSourceDataEvent, + MapWheelEvent, + MapBoxZoomEvent, + ErrorEvent, + ViewStateChangeEvent +} from './types/events-mapbox'; export type PopupEvent = events.PopupEvent; export type MarkerEvent = events.MarkerEvent; export type MarkerDragEvent = events.MarkerDragEvent; diff --git a/src/exports-maplibre.ts b/src/exports-maplibre.ts index 40ce5c212..37c2927d4 100644 --- a/src/exports-maplibre.ts +++ b/src/exports-maplibre.ts @@ -42,17 +42,18 @@ import {default as _Source, SourceProps as _SourceProps} from './components/sour import {useMap as _useMap} from './components/use-map'; import type {MapRef as _MapRef} from './mapbox/create-ref'; import type * as events from './types/events'; +import type {MapCallbacks} from './types/events-maplibre'; export function useMap() { return _useMap(); } -export type MapProps = _MapProps; +export type MapProps = _MapProps; export type MapRef = _MapRef; const mapLib = import('maplibre-gl'); export const Map = (() => { return React.forwardRef(function Map(props: MapProps, ref: React.Ref) { - return _Map(props, ref, mapLib); + return _Map(props, ref, mapLib); }); })(); @@ -115,17 +116,19 @@ export * from './types/public'; export * from './types/style-spec-maplibre'; // Events -export type MapEvent = events.MapEvent; -export type ErrorEvent = events.ErrorEvent; -export type MapStyleDataEvent = events.MapStyleDataEvent; -export type MapSourceDataEvent = events.MapSourceDataEvent; -export type MapMouseEvent = events.MapMouseEvent; -export type MapLayerMouseEvent = events.MapLayerMouseEvent; -export type MapTouchEvent = events.MapTouchEvent; -export type MapLayerTouchEvent = events.MapLayerTouchEvent; -export type MapWheelEvent = events.MapWheelEvent; -export type MapBoxZoomEvent = events.MapBoxZoomEvent; -export type ViewStateChangeEvent = events.ViewStateChangeEvent; +export { + MapEvent, + MapMouseEvent, + MapLayerMouseEvent, + MapTouchEvent, + MapLayerTouchEvent, + MapStyleDataEvent, + MapSourceDataEvent, + MapWheelEvent, + MapBoxZoomEvent, + ErrorEvent, + ViewStateChangeEvent +} from './types/events-maplibre'; export type PopupEvent = events.PopupEvent; export type MarkerEvent = events.MarkerEvent; export type MarkerDragEvent = events.MarkerDragEvent; diff --git a/src/mapbox/create-ref.ts b/src/mapbox/create-ref.ts index 7cd9d57b7..0566c214e 100644 --- a/src/mapbox/create-ref.ts +++ b/src/mapbox/create-ref.ts @@ -1,4 +1,11 @@ -import type {MapInstance, MapInstanceInternal, MapStyle, LngLatLike, PointLike} from '../types'; +import type { + MapInstance, + MapInstanceInternal, + MapStyle, + Callbacks, + LngLatLike, + PointLike +} from '../types'; import type Mapbox from './mapbox'; /** These methods may break the react binding if called directly */ @@ -29,9 +36,11 @@ export type MapRef = { getMap(): MapT; } & Omit; -export default function createRef( - mapInstance: Mapbox -): MapRef { +export default function createRef< + StyleT extends MapStyle, + CallbacksT extends Callbacks, + MapT extends MapInstance +>(mapInstance: Mapbox): MapRef { if (!mapInstance) { return null; } diff --git a/src/mapbox/mapbox.ts b/src/mapbox/mapbox.ts index d4a573a52..7dd209bd0 100644 --- a/src/mapbox/mapbox.ts +++ b/src/mapbox/mapbox.ts @@ -17,15 +17,10 @@ import type { MapStyle, ImmutableLike, LngLatBoundsLike, - MapMouseEvent, - MapLayerMouseEvent, - MapLayerTouchEvent, - MapWheelEvent, - MapBoxZoomEvent, - MapStyleDataEvent, - MapSourceDataEvent, + Callbacks, MapEvent, ErrorEvent, + MapMouseEvent, MapGeoJSONFeature, MapInstance, MapInstanceInternal @@ -33,102 +28,56 @@ import type { export type MapboxProps< StyleT extends MapStyle = MapStyle, - MapT extends MapInstance = MapInstance -> = Partial & { - // Init options - mapboxAccessToken?: string; - - /** Camera options used when constructing the Map instance */ - initialViewState?: Partial & { - /** The initial bounds of the map. If bounds is specified, it overrides longitude, latitude and zoom options. */ - bounds?: LngLatBoundsLike; - /** A fitBounds options object to use only when setting the bounds option. */ - fitBoundsOptions?: { - offset?: PointLike; - minZoom?: number; - maxZoom?: number; - padding?: number | PaddingOptions; + CallbacksT extends Callbacks = {} +> = Partial & + CallbacksT & { + // Init options + mapboxAccessToken?: string; + + /** Camera options used when constructing the Map instance */ + initialViewState?: Partial & { + /** The initial bounds of the map. If bounds is specified, it overrides longitude, latitude and zoom options. */ + bounds?: LngLatBoundsLike; + /** A fitBounds options object to use only when setting the bounds option. */ + fitBoundsOptions?: { + offset?: PointLike; + minZoom?: number; + maxZoom?: number; + padding?: number | PaddingOptions; + }; }; - }; - /** If provided, render into an external WebGL context */ - gl?: WebGLRenderingContext; + /** If provided, render into an external WebGL context */ + gl?: WebGLRenderingContext; - /** For external controller to override the camera state */ - viewState?: ViewState & { - width: number; - height: number; - }; - - // Styling + /** For external controller to override the camera state */ + viewState?: ViewState & { + width: number; + height: number; + }; - /** Mapbox style */ - mapStyle?: string | StyleT | ImmutableLike; - /** Enable diffing when the map style changes - * @default true - */ - styleDiffing?: boolean; - /** The fog property of the style. Must conform to the Fog Style Specification . - * If `undefined` is provided, removes the fog from the map. */ - fog?: StyleT['fog']; - /** Light properties of the map. */ - light?: StyleT['light']; - /** Terrain property of the style. Must conform to the Terrain Style Specification . - * If `undefined` is provided, removes terrain from the map. */ - terrain?: StyleT['terrain']; - - /** Default layers to query on pointer events */ - interactiveLayerIds?: string[]; - /** CSS cursor */ - cursor?: string; - - // Callbacks - onMouseDown?: (e: MapLayerMouseEvent) => void; - onMouseUp?: (e: MapLayerMouseEvent) => void; - onMouseOver?: (e: MapLayerMouseEvent) => void; - onMouseMove?: (e: MapLayerMouseEvent) => void; - onClick?: (e: MapLayerMouseEvent) => void; - onDblClick?: (e: MapLayerMouseEvent) => void; - onMouseEnter?: (e: MapLayerMouseEvent) => void; - onMouseLeave?: (e: MapLayerMouseEvent) => void; - onMouseOut?: (e: MapLayerMouseEvent) => void; - onContextMenu?: (e: MapLayerMouseEvent) => void; - onTouchStart?: (e: MapLayerTouchEvent) => void; - onTouchEnd?: (e: MapLayerTouchEvent) => void; - onTouchMove?: (e: MapLayerTouchEvent) => void; - onTouchCancel?: (e: MapLayerTouchEvent) => void; - - onMoveStart?: (e: ViewStateChangeEvent) => void; - onMove?: (e: ViewStateChangeEvent) => void; - onMoveEnd?: (e: ViewStateChangeEvent) => void; - onDragStart?: (e: ViewStateChangeEvent) => void; - onDrag?: (e: ViewStateChangeEvent) => void; - onDragEnd?: (e: ViewStateChangeEvent) => void; - onZoomStart?: (e: ViewStateChangeEvent) => void; - onZoom?: (e: ViewStateChangeEvent) => void; - onZoomEnd?: (e: ViewStateChangeEvent) => void; - onRotateStart?: (e: ViewStateChangeEvent) => void; - onRotate?: (e: ViewStateChangeEvent) => void; - onRotateEnd?: (e: ViewStateChangeEvent) => void; - onPitchStart?: (e: ViewStateChangeEvent) => void; - onPitch?: (e: ViewStateChangeEvent) => void; - onPitchEnd?: (e: ViewStateChangeEvent) => void; - - onWheel?: (e: MapWheelEvent) => void; - onBoxZoomStart?: (e: MapBoxZoomEvent) => void; - onBoxZoomEnd?: (e: MapBoxZoomEvent) => void; - onBoxZoomCancel?: (e: MapBoxZoomEvent) => void; - - onResize?: (e: MapEvent) => void; - onLoad?: (e: MapEvent) => void; - onRender?: (e: MapEvent) => void; - onIdle?: (e: MapEvent) => void; - onError?: (e: ErrorEvent) => void; - onRemove?: (e: MapEvent) => void; - onData?: (e: MapStyleDataEvent | MapSourceDataEvent) => void; - onStyleData?: (e: MapStyleDataEvent) => void; - onSourceData?: (e: MapSourceDataEvent) => void; -}; + // Styling + + /** Mapbox style */ + mapStyle?: string | StyleT | ImmutableLike; + /** Enable diffing when the map style changes + * @default true + */ + styleDiffing?: boolean; + /** The fog property of the style. Must conform to the Fog Style Specification . + * If `undefined` is provided, removes the fog from the map. */ + fog?: StyleT['fog']; + /** Light properties of the map. */ + light?: StyleT['light']; + /** Terrain property of the style. Must conform to the Terrain Style Specification . + * If `undefined` is provided, removes terrain from the map. */ + terrain?: StyleT['terrain']; + + /** Default layers to query on pointer events */ + interactiveLayerIds?: string[]; + /** CSS cursor */ + cursor?: string; + }; const DEFAULT_STYLE = {version: 8, sources: {}, layers: []} as MapStyle; @@ -205,13 +154,14 @@ const handlerNames = [ */ export default class Mapbox< StyleT extends MapStyle = MapStyle, + CallbacksT extends Callbacks = {}, MapT extends MapInstance = MapInstance > { private _MapClass: {new (options: any): MapInstance}; // mapboxgl.Map instance private _map: MapInstanceInternal = null; // User-supplied props - props: MapboxProps; + props: MapboxProps; // Mapbox map is stateful. // During method calls/user interactions, map.transform is mutated and @@ -241,7 +191,7 @@ export default class Mapbox< constructor( MapClass: {new (options: any): MapInstance}, - props: MapboxProps, + props: MapboxProps, container: HTMLDivElement ) { this._MapClass = MapClass; @@ -257,7 +207,7 @@ export default class Mapbox< return this._renderTransform; } - setProps(props: MapboxProps) { + setProps(props: MapboxProps) { const oldProps = this.props; this.props = props; @@ -279,11 +229,11 @@ export default class Mapbox< } } - static reuse( - props: MapboxProps, + static reuse( + props: MapboxProps, container: HTMLDivElement - ): Mapbox { - const that = Mapbox.savedMaps.pop() as Mapbox; + ): Mapbox { + const that = Mapbox.savedMaps.pop() as Mapbox; if (!that) { return null; } @@ -464,7 +414,7 @@ export default class Mapbox< @param {object} nextProps @returns {bool} true if size has changed */ - _updateSize(nextProps: MapboxProps): boolean { + _updateSize(nextProps: MapboxProps): boolean { // Check if size is controlled const {viewState} = nextProps; if (viewState) { @@ -483,7 +433,7 @@ export default class Mapbox< @param {bool} triggerEvents - should fire camera events @returns {bool} true if anything is changed */ - _updateViewState(nextProps: MapboxProps, triggerEvents: boolean): boolean { + _updateViewState(nextProps: MapboxProps, triggerEvents: boolean): boolean { if (this._internalUpdate) { return false; } @@ -530,10 +480,7 @@ export default class Mapbox< @param {object} currProps @returns {bool} true if anything is changed */ - _updateSettings( - nextProps: MapboxProps, - currProps: MapboxProps - ): boolean { + _updateSettings(nextProps: MapboxProps, currProps: MapboxProps): boolean { const map = this._map; let changed = false; for (const propName of settingNames) { @@ -551,10 +498,7 @@ export default class Mapbox< @param {object} currProps @returns {bool} true if style is changed */ - _updateStyle( - nextProps: MapboxProps, - currProps: MapboxProps - ): boolean { + _updateStyle(nextProps: MapboxProps, currProps: MapboxProps): boolean { if (nextProps.cursor !== currProps.cursor) { this._map.getCanvas().style.cursor = nextProps.cursor; } @@ -578,10 +522,7 @@ export default class Mapbox< @param {object} currProps @returns {bool} true if anything is changed */ - _updateStyleComponents( - nextProps: MapboxProps, - currProps: MapboxProps - ): boolean { + _updateStyleComponents(nextProps: MapboxProps, currProps: MapboxProps): boolean { const map = this._map; let changed = false; if (map.isStyleLoaded()) { @@ -612,10 +553,7 @@ export default class Mapbox< @param {object} currProps @returns {bool} true if anything is changed */ - _updateHandlers( - nextProps: MapboxProps, - currProps: MapboxProps - ): boolean { + _updateHandlers(nextProps: MapboxProps, currProps: MapboxProps): boolean { const map = this._map; let changed = false; for (const propName of handlerNames) { @@ -682,7 +620,7 @@ export default class Mapbox< } } - _onPointerEvent = (e: MapLayerMouseEvent | MapLayerTouchEvent) => { + _onPointerEvent = (e: MapMouseEvent | MapMouseEvent) => { if (e.type === 'mousemove' || e.type === 'mouseout') { this._updateHover(e); } diff --git a/src/types/common.ts b/src/types/common.ts index 63561d170..71df4b6dc 100644 --- a/src/types/common.ts +++ b/src/types/common.ts @@ -1,5 +1,4 @@ import type GeoJSON from 'geojson'; -import type {AnyLayer} from './style-spec-maplibre'; /* Data types */ @@ -102,7 +101,7 @@ export interface ImmutableLike { } export type MapGeoJSONFeature = GeoJSON.Feature & { - layer: AnyLayer; + layer: any; source: string; sourceLayer: string; state: {[key: string]: any}; diff --git a/src/types/events-mapbox.ts b/src/types/events-mapbox.ts new file mode 100644 index 000000000..44b3b90a0 --- /dev/null +++ b/src/types/events-mapbox.ts @@ -0,0 +1,76 @@ +import { + Map, + MapboxEvent as MapEvent, + MapMouseEvent, + MapLayerMouseEvent, + MapTouchEvent, + MapLayerTouchEvent, + MapStyleDataEvent, + MapSourceDataEvent, + MapWheelEvent, + MapBoxZoomEvent +} from 'mapbox-gl'; +import {ErrorEvent as _ErrorEvent, ViewStateChangeEvent as _ViewStateChangeEvent} from './events'; + +export type { + MapEvent, + MapMouseEvent, + MapLayerMouseEvent, + MapTouchEvent, + MapLayerTouchEvent, + MapStyleDataEvent, + MapSourceDataEvent, + MapWheelEvent, + MapBoxZoomEvent +}; + +export type ErrorEvent = _ErrorEvent; +export type ViewStateChangeEvent = _ViewStateChangeEvent; + +export type MapCallbacks = { + onMouseDown?: (e: MapLayerMouseEvent) => void; + onMouseUp?: (e: MapLayerMouseEvent) => void; + onMouseOver?: (e: MapLayerMouseEvent) => void; + onMouseMove?: (e: MapLayerMouseEvent) => void; + onClick?: (e: MapLayerMouseEvent) => void; + onDblClick?: (e: MapLayerMouseEvent) => void; + onMouseEnter?: (e: MapLayerMouseEvent) => void; + onMouseLeave?: (e: MapLayerMouseEvent) => void; + onMouseOut?: (e: MapLayerMouseEvent) => void; + onContextMenu?: (e: MapLayerMouseEvent) => void; + onTouchStart?: (e: MapLayerTouchEvent) => void; + onTouchEnd?: (e: MapLayerTouchEvent) => void; + onTouchMove?: (e: MapLayerTouchEvent) => void; + onTouchCancel?: (e: MapLayerTouchEvent) => void; + + onMoveStart?: (e: ViewStateChangeEvent) => void; + onMove?: (e: ViewStateChangeEvent) => void; + onMoveEnd?: (e: ViewStateChangeEvent) => void; + onDragStart?: (e: ViewStateChangeEvent) => void; + onDrag?: (e: ViewStateChangeEvent) => void; + onDragEnd?: (e: ViewStateChangeEvent) => void; + onZoomStart?: (e: ViewStateChangeEvent) => void; + onZoom?: (e: ViewStateChangeEvent) => void; + onZoomEnd?: (e: ViewStateChangeEvent) => void; + onRotateStart?: (e: ViewStateChangeEvent) => void; + onRotate?: (e: ViewStateChangeEvent) => void; + onRotateEnd?: (e: ViewStateChangeEvent) => void; + onPitchStart?: (e: ViewStateChangeEvent) => void; + onPitch?: (e: ViewStateChangeEvent) => void; + onPitchEnd?: (e: ViewStateChangeEvent) => void; + + onWheel?: (e: MapWheelEvent) => void; + onBoxZoomStart?: (e: MapBoxZoomEvent) => void; + onBoxZoomEnd?: (e: MapBoxZoomEvent) => void; + onBoxZoomCancel?: (e: MapBoxZoomEvent) => void; + + onResize?: (e: MapEvent) => void; + onLoad?: (e: MapEvent) => void; + onRender?: (e: MapEvent) => void; + onIdle?: (e: MapEvent) => void; + onError?: (e: ErrorEvent) => void; + onRemove?: (e: MapEvent) => void; + onData?: (e: MapStyleDataEvent | MapSourceDataEvent) => void; + onStyleData?: (e: MapStyleDataEvent) => void; + onSourceData?: (e: MapSourceDataEvent) => void; +}; diff --git a/src/types/events-maplibre.ts b/src/types/events-maplibre.ts new file mode 100644 index 000000000..c6714464c --- /dev/null +++ b/src/types/events-maplibre.ts @@ -0,0 +1,76 @@ +import { + Map, + MapLibreEvent as MapEvent, + MapMouseEvent, + MapLayerMouseEvent, + MapTouchEvent, + MapLayerTouchEvent, + MapStyleDataEvent, + MapSourceDataEvent, + MapWheelEvent, + MapLibreZoomEvent as MapBoxZoomEvent +} from 'maplibre-gl'; +import {ErrorEvent as _ErrorEvent, ViewStateChangeEvent as _ViewStateChangeEvent} from './events'; + +export type { + MapEvent, + MapMouseEvent, + MapLayerMouseEvent, + MapTouchEvent, + MapLayerTouchEvent, + MapStyleDataEvent, + MapSourceDataEvent, + MapWheelEvent, + MapBoxZoomEvent +}; + +export type ErrorEvent = _ErrorEvent; +export type ViewStateChangeEvent = _ViewStateChangeEvent; + +export type MapCallbacks = { + onMouseDown?: (e: MapLayerMouseEvent) => void; + onMouseUp?: (e: MapLayerMouseEvent) => void; + onMouseOver?: (e: MapLayerMouseEvent) => void; + onMouseMove?: (e: MapLayerMouseEvent) => void; + onClick?: (e: MapLayerMouseEvent) => void; + onDblClick?: (e: MapLayerMouseEvent) => void; + onMouseEnter?: (e: MapLayerMouseEvent) => void; + onMouseLeave?: (e: MapLayerMouseEvent) => void; + onMouseOut?: (e: MapLayerMouseEvent) => void; + onContextMenu?: (e: MapLayerMouseEvent) => void; + onTouchStart?: (e: MapLayerTouchEvent) => void; + onTouchEnd?: (e: MapLayerTouchEvent) => void; + onTouchMove?: (e: MapLayerTouchEvent) => void; + onTouchCancel?: (e: MapLayerTouchEvent) => void; + + onMoveStart?: (e: ViewStateChangeEvent) => void; + onMove?: (e: ViewStateChangeEvent) => void; + onMoveEnd?: (e: ViewStateChangeEvent) => void; + onDragStart?: (e: ViewStateChangeEvent) => void; + onDrag?: (e: ViewStateChangeEvent) => void; + onDragEnd?: (e: ViewStateChangeEvent) => void; + onZoomStart?: (e: ViewStateChangeEvent) => void; + onZoom?: (e: ViewStateChangeEvent) => void; + onZoomEnd?: (e: ViewStateChangeEvent) => void; + onRotateStart?: (e: ViewStateChangeEvent) => void; + onRotate?: (e: ViewStateChangeEvent) => void; + onRotateEnd?: (e: ViewStateChangeEvent) => void; + onPitchStart?: (e: ViewStateChangeEvent) => void; + onPitch?: (e: ViewStateChangeEvent) => void; + onPitchEnd?: (e: ViewStateChangeEvent) => void; + + onWheel?: (e: MapWheelEvent) => void; + onBoxZoomStart?: (e: MapBoxZoomEvent) => void; + onBoxZoomEnd?: (e: MapBoxZoomEvent) => void; + onBoxZoomCancel?: (e: MapBoxZoomEvent) => void; + + onResize?: (e: MapEvent) => void; + onLoad?: (e: MapEvent) => void; + onRender?: (e: MapEvent) => void; + onIdle?: (e: MapEvent) => void; + onError?: (e: ErrorEvent) => void; + onRemove?: (e: MapEvent) => void; + onData?: (e: MapStyleDataEvent | MapSourceDataEvent) => void; + onStyleData?: (e: MapStyleDataEvent) => void; + onSourceData?: (e: MapSourceDataEvent) => void; +}; diff --git a/src/types/events.ts b/src/types/events.ts index f93f0192c..784ae678b 100644 --- a/src/types/events.ts +++ b/src/types/events.ts @@ -1,4 +1,4 @@ -import type {ViewState, Point, LngLat, LngLatBounds, MapGeoJSONFeature} from './common'; +import type {ViewState, Point, LngLat, MapGeoJSONFeature} from './common'; import type { MapInstance, Evented, @@ -6,7 +6,10 @@ import type { PopupInstance, GeolocateControlInstance } from './lib'; -import type {AnySource} from './style-spec-maplibre'; + +export interface Callbacks { + [key: `on${string}`]: Function; +} export interface MapEvent { type: string; @@ -19,80 +22,10 @@ export type ErrorEvent = MapEvent & { error: Error; }; -export type MapStyleDataEvent = MapEvent & { - dataType: 'style'; -}; - -export type MapSourceDataEvent = MapEvent & { - dataType: 'source'; - isSourceLoaded: boolean; - source: AnySource; - sourceId: string; - sourceDataType: 'metadata' | 'content'; - tile: any; - coord: { - canonical: { - x: number; - y: number; - z: number; - key: number; - }; - wrap: number; - key: number; - }; -}; - export type MapMouseEvent = MapEvent & { - type: - | 'mousedown' - | 'mouseup' - | 'click' - | 'dblclick' - | 'mousemove' - | 'mouseover' - | 'mouseenter' - | 'mouseleave' - | 'mouseout' - | 'contextmenu'; - - point: Point; - lngLat: LngLat; - - preventDefault(): void; - defaultPrevented: boolean; -}; - -export type MapLayerMouseEvent = MapMouseEvent & { - features?: MapGeoJSONFeature[] | undefined; -}; - -export type MapTouchEvent = MapEvent & { - type: 'touchstart' | 'touchend' | 'touchcancel'; - point: Point; lngLat: LngLat; - points: Point[]; - lngLats: LngLat[]; - - preventDefault(): void; - defaultPrevented: boolean; -}; - -export type MapLayerTouchEvent = MapTouchEvent & { - features?: MapGeoJSONFeature[] | undefined; -}; - -export type MapWheelEvent = MapEvent & { - type: 'wheel'; - - preventDefault(): void; - defaultPrevented: boolean; -}; - -export type MapBoxZoomEvent = MapEvent & { - type: 'boxzoomstart' | 'boxzoomend' | 'boxzoomcancel'; - - boxZoomBounds: LngLatBounds; + features?: MapGeoJSONFeature[]; }; export type ViewStateChangeEvent =