react-bkoi-gl 1.0.1

package/src/components/popup.ts

@@ -0,0 +1,116 @@
+/* global document */
+import * as React from 'react';
+import {createPortal} from 'react-dom';
+import {useImperativeHandle, useEffect, useMemo, useRef, useContext, forwardRef, memo} from 'react';
+import {applyReactStyle} from '../utils/apply-react-style';
+
+import type {PopupEvent, PopupInstance} from '../types';
+
+import {MapContext} from './map';
+import {deepEqual} from '../utils/deep-equal';
+
+export type PopupProps<OptionsT, PopupT extends PopupInstance> = OptionsT & {
+  /** Longitude of the anchor location */
+  longitude: number;
+  /** Latitude of the anchor location */
+  latitude: number;
+
+  // These types will be further constraint by OptionsT
+  anchor?: string;
+  offset?: any;
+  className?: string;
+  maxWidth?: string;
+
+  /** CSS style override, applied to the control's container */
+  style?: React.CSSProperties;
+
+  onOpen?: (e: PopupEvent<PopupT>) => void;
+  onClose?: (e: PopupEvent<PopupT>) => void;
+  children?: React.ReactNode;
+};
+
+// Adapted from https://github.com/mapbox/mapbox-gl-js/blob/v1.13.0/src/ui/popup.js
+function getClassList(className: string) {
+  return new Set(className ? className.trim().split(/\s+/) : []);
+}
+
+/* eslint-disable complexity,max-statements */
+function Popup<PopupOptions, PopupT extends PopupInstance>(
+  props: PopupProps<PopupOptions, PopupT>,
+  ref: React.Ref<PopupT>
+) {
+  const {map, mapLib} = useContext(MapContext);
+  const container = useMemo(() => {
+    return document.createElement('div');
+  }, []);
+  const thisRef = useRef({props});
+  thisRef.current.props = props;
+
+  const popup: PopupT = useMemo(() => {
+    const options = {...props};
+    const pp = new mapLib.Popup(options) as PopupT;
+    pp.setLngLat([props.longitude, props.latitude]);
+    pp.once('open', e => {
+      thisRef.current.props.onOpen?.(e as PopupEvent<PopupT>);
+    });
+    return pp;
+  }, []);
+
+  useEffect(() => {
+    const onClose = e => {
+      thisRef.current.props.onClose?.(e as PopupEvent<PopupT>);
+    };
+    popup.on('close', onClose);
+    popup.setDOMContent(container).addTo(map.getMap());
+
+    return () => {
+      // https://github.com/visgl/react-map-gl/issues/1825
+      // onClose should not be fired if the popup is removed by unmounting
+      // When using React strict mode, the component is mounted twice.
+      // Firing the onClose callback here would be a false signal to remove the component.
+      popup.off('close', onClose);
+      if (popup.isOpen()) {
+        popup.remove();
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    applyReactStyle(popup.getElement(), props.style);
+  }, [props.style]);
+
+  useImperativeHandle(ref, () => popup, []);
+
+  if (popup.isOpen()) {
+    if (popup.getLngLat().lng !== props.longitude || popup.getLngLat().lat !== props.latitude) {
+      popup.setLngLat([props.longitude, props.latitude]);
+    }
+    if (props.offset && !deepEqual(popup.options.offset, props.offset)) {
+      popup.setOffset(props.offset);
+    }
+    if (popup.options.anchor !== props.anchor || popup.options.maxWidth !== props.maxWidth) {
+      popup.options.anchor = props.anchor;
+      popup.setMaxWidth(props.maxWidth);
+    }
+    if (popup.options.className !== props.className) {
+      const prevClassList = getClassList(popup.options.className);
+      const nextClassList = getClassList(props.className);
+
+      for (const c of prevClassList) {
+        if (!nextClassList.has(c)) {
+          popup.removeClassName(c);
+        }
+      }
+      for (const c of nextClassList) {
+        if (!prevClassList.has(c)) {
+          popup.addClassName(c);
+        }
+      }
+      popup.options.className = props.className;
+    }
+  }
+
+  return createPortal(props.children, container);
+}
+
+export default memo(forwardRef(Popup));

package/src/components/scale-control.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {useEffect, useRef, memo} from 'react';
+import {applyReactStyle} from '../utils/apply-react-style';
+import useControl from './use-control';
+
+import type {ControlPosition, ScaleControlInstance} from '../types';
+
+export type ScaleControlProps<OptionsT> = OptionsT & {
+  // These props will be further constraint by OptionsT
+  unit?: string;
+  maxWidth?: number;
+
+  /** Placement of the control relative to the map. */
+  position?: ControlPosition;
+  /** CSS style override, applied to the control's container */
+  style?: React.CSSProperties;
+};
+
+function ScaleControl<ScaleControlOptions, ControlT extends ScaleControlInstance>(
+  props: ScaleControlProps<ScaleControlOptions>
+): null {
+  const ctrl = useControl<ControlT>(({mapLib}) => new mapLib.ScaleControl(props) as ControlT, {
+    position: props.position
+  });
+  const propsRef = useRef<ScaleControlProps<ScaleControlOptions>>(props);
+
+  const prevProps = propsRef.current;
+  propsRef.current = props;
+
+  const {style} = props;
+
+  if (props.maxWidth !== undefined && props.maxWidth !== prevProps.maxWidth) {
+    ctrl.options.maxWidth = props.maxWidth;
+  }
+  if (props.unit !== undefined && props.unit !== prevProps.unit) {
+    ctrl.setUnit(props.unit);
+  }
+
+  useEffect(() => {
+    applyReactStyle(ctrl._container, style);
+  }, [style]);
+
+  return null;
+}
+
+export default memo(ScaleControl);

package/src/components/source.ts

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import {useContext, useEffect, useMemo, useState, useRef} from 'react';
+import {cloneElement} from 'react';
+import {MapContext} from './map';
+import assert from '../utils/assert';
+import {deepEqual} from '../utils/deep-equal';
+
+import type {
+  MapInstance,
+  ISource,
+  CustomSource,
+  GeoJSONSourceImplementation,
+  ImageSourceImplemtation,
+  AnySourceImplementation
+} from '../types';
+import type {GeoJSONSourceRaw, ImageSourceRaw, VectorSourceRaw} from '../types/style-spec-bkoi-gl';
+
+export type SourceProps<SourceT> = (SourceT | CustomSource) & {
+  id?: string;
+  children?: any;
+};
+
+let sourceCounter = 0;
+
+function createSource<SourceT extends ISource>(
+  map: MapInstance,
+  id: string,
+  props: SourceProps<SourceT>
+) {
+  // @ts-ignore
+  if (map.style && map.style._loaded) {
+    const options = {...props};
+    delete options.id;
+    delete options.children;
+    // @ts-ignore
+    map.addSource(id, options);
+    return map.getSource(id);
+  }
+  return null;
+}
+
+/* eslint-disable complexity */
+function updateSource<SourceT extends ISource>(
+  source: AnySourceImplementation,
+  props: SourceProps<SourceT>,
+  prevProps: SourceProps<SourceT>
+) {
+  assert(props.id === prevProps.id, 'source id changed');
+  assert(props.type === prevProps.type, 'source type changed');
+
+  let changedKey = '';
+  let changedKeyCount = 0;
+
+  for (const key in props) {
+    if (key !== 'children' && key !== 'id' && !deepEqual(prevProps[key], props[key])) {
+      changedKey = key;
+      changedKeyCount++;
+    }
+  }
+
+  if (!changedKeyCount) {
+    return;
+  }
+
+  const type = props.type;
+
+  if (type === 'geojson') {
+    (source as GeoJSONSourceImplementation).setData(
+      (props as unknown as GeoJSONSourceRaw).data as any
+    );
+  } else if (type === 'image') {
+    (source as ImageSourceImplemtation).updateImage({
+      url: (props as unknown as ImageSourceRaw).url,
+      coordinates: (props as unknown as ImageSourceRaw).coordinates
+    });
+  } else if ('setCoordinates' in source && changedKeyCount === 1 && changedKey === 'coordinates') {
+    source.setCoordinates((props as ImageSourceRaw).coordinates);
+  } else if ('setUrl' in source) {
+    // Added in 1.12.0:
+    // vectorTileSource.setTiles
+    // vectorTileSource.setUrl
+    switch (changedKey) {
+      case 'url':
+        source.setUrl((props as VectorSourceRaw).url);
+        break;
+      case 'tiles':
+        source.setTiles((props as VectorSourceRaw).tiles);
+        break;
+      default:
+    }
+  } else {
+    // eslint-disable-next-line
+    console.warn(`Unable to update <Source> prop: ${changedKey}`);
+  }
+}
+/* eslint-enable complexity */
+
+function Source<SourceT extends ISource>(props: SourceProps<SourceT>) {
+  const map = useContext(MapContext).map.getMap();
+  const propsRef = useRef(props);
+  const [, setStyleLoaded] = useState(0);
+
+  const id = useMemo(() => props.id || `jsx-source-${sourceCounter++}`, []);
+
+  useEffect(() => {
+    if (map) {
+      /* global setTimeout */
+      const forceUpdate = () => setTimeout(() => setStyleLoaded(version => version + 1), 0);
+      map.on('styledata', forceUpdate);
+      forceUpdate();
+
+      return () => {
+        map.off('styledata', forceUpdate);
+        // @ts-ignore
+        if (map.style && map.style._loaded && map.getSource(id)) {
+          // Parent effects are destroyed before child ones, see
+          // https://github.com/facebook/react/issues/16728
+          // Source can only be removed after all child layers are removed
+          const allLayers = map.getStyle()?.layers;
+          if (allLayers) {
+            for (const layer of allLayers) {
+              // @ts-ignore (2339) source does not exist on all layer types
+              if (layer.source === id) {
+                map.removeLayer(layer.id);
+              }
+            }
+          }
+          map.removeSource(id);
+        }
+      };
+    }
+    return undefined;
+  }, [map]);
+
+  // @ts-ignore
+  let source = map && map.style && map.getSource(id);
+  if (source) {
+    updateSource(source, props, propsRef.current);
+  } else {
+    source = createSource(map, id, props);
+  }
+  propsRef.current = props;
+
+  return (
+    (source &&
+      React.Children.map(
+        props.children,
+        child =>
+          child &&
+          cloneElement(child, {
+            source: id
+          })
+      )) ||
+    null
+  );
+}
+
+export default Source;

package/src/components/use-control.ts

@@ -0,0 +1,64 @@
+import {useContext, useMemo, useEffect} from 'react';
+import type {IControl, ControlPosition} from '../types';
+import {MapContext} from './map';
+import type {MapContextValue} from './map';
+
+type ControlOptions = {
+  position?: ControlPosition;
+};
+
+function useControl<T extends IControl>(
+  onCreate: (context: MapContextValue) => T,
+  opts?: ControlOptions
+): T;
+
+function useControl<T extends IControl>(
+  onCreate: (context: MapContextValue) => T,
+  onRemove: (context: MapContextValue) => void,
+  opts?: ControlOptions
+): T;
+
+function useControl<T extends IControl>(
+  onCreate: (context: MapContextValue) => T,
+  onAdd: (context: MapContextValue) => void,
+  onRemove: (context: MapContextValue) => void,
+  opts?: ControlOptions
+): T;
+
+function useControl<T extends IControl>(
+  onCreate: (context: MapContextValue) => T,
+  arg1?: ((context: MapContextValue) => void) | ControlOptions,
+  arg2?: ((context: MapContextValue) => void) | ControlOptions,
+  arg3?: ControlOptions
+): T {
+  const context = useContext(MapContext);
+  const ctrl = useMemo(() => onCreate(context), []);
+
+  useEffect(() => {
+    const opts = (arg3 || arg2 || arg1) as ControlOptions;
+    const onAdd = typeof arg1 === 'function' && typeof arg2 === 'function' ? arg1 : null;
+    const onRemove = typeof arg2 === 'function' ? arg2 : typeof arg1 === 'function' ? arg1 : null;
+
+    const {map} = context;
+    if (!map.hasControl(ctrl)) {
+      map.addControl(ctrl, opts?.position);
+      if (onAdd) {
+        onAdd(context);
+      }
+    }
+
+    return () => {
+      if (onRemove) {
+        onRemove(context);
+      }
+      // Map might have been removed (parent effects are destroyed before child ones)
+      if (map.hasControl(ctrl)) {
+        map.removeControl(ctrl);
+      }
+    };
+  }, []);
+
+  return ctrl;
+}
+
+export default useControl;

package/src/components/use-map.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import {useState, useCallback, useMemo, useContext} from 'react';
+
+import {MapRef} from '../mapbox/create-ref';
+import {MapContext} from './map';
+import {MapInstance} from '../types';
+
+type MountedMapsContextValue = {
+  maps: {[id: string]: MapRef<MapInstance>};
+  onMapMount: (map: MapRef<MapInstance>, id: string) => void;
+  onMapUnmount: (id: string) => void;
+};
+
+export const MountedMapsContext = React.createContext<MountedMapsContextValue>(null);
+
+export const MapProvider: React.FC<{children?: React.ReactNode}> = props => {
+  const [maps, setMaps] = useState<{[id: string]: MapRef<MapInstance>}>({});
+
+  const onMapMount = useCallback((map: MapRef<MapInstance>, id: string = 'default') => {
+    setMaps(currMaps => {
+      if (id === 'current') {
+        throw new Error("'current' cannot be used as map id");
+      }
+      if (currMaps[id]) {
+        throw new Error(`Multiple maps with the same id: ${id}`);
+      }
+      return {...currMaps, [id]: map};
+    });
+  }, []);
+
+  const onMapUnmount = useCallback((id: string = 'default') => {
+    setMaps(currMaps => {
+      if (currMaps[id]) {
+        const nextMaps = {...currMaps};
+        delete nextMaps[id];
+        return nextMaps;
+      }
+      return currMaps;
+    });
+  }, []);
+
+  return (
+    <MountedMapsContext.Provider
+      value={{
+        maps,
+        onMapMount,
+        onMapUnmount
+      }}
+    >
+      {props.children}
+    </MountedMapsContext.Provider>
+  );
+};
+
+export type MapCollection<MapT extends MapInstance> = {
+  [id: string]: MapRef<MapT> | undefined;
+  current?: MapRef<MapT>;
+};
+
+export function useMap<MapT extends MapInstance>(): MapCollection<MapT> {
+  const maps = useContext(MountedMapsContext)?.maps;
+  const currentMap = useContext(MapContext);
+
+  const mapsWithCurrent = useMemo(() => {
+    return {...maps, current: currentMap?.map};
+  }, [maps, currentMap]);
+
+  return mapsWithCurrent as MapCollection<MapT>;
+}

package/src/exports-bkoi-gl.ts

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import {
+  Map as BkoiMap,
+  MapOptions,
+  Marker as BkoiMarker,
+  MarkerOptions,
+  Popup as BkoiPopup,
+  PopupOptions,
+  AttributionControl as BkoiAttributionControl,
+  FullscreenControl as BkoiFullscreenControl,
+  GeolocateControl as BkoiGeolocateControl,
+  NavigationControl as BkoiNavigationControl,
+  ScaleControl as BkoiScaleControl
+  // @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+} from 'bkoi-gl';
+import { MapStyle, AnyLayer, AnySource } from './types/style-spec-bkoi-gl';
+
+import { default as _Map, MapProps as _MapProps } from './components/map';
+import { default as _Marker, MarkerProps as _MarkerProps } from './components/marker';
+import { default as _Popup, PopupProps as _PopupProps } from './components/popup';
+import {
+  default as _AttributionControl,
+  AttributionControlProps as _AttributionControlProps
+} from './components/attribution-control';
+import {
+  default as _FullscreenControl,
+  FullscreenControlProps as _FullscreenControlProps
+} from './components/fullscreen-control';
+import {
+  default as _GeolocateControl,
+  GeolocateControlProps as _GeolocateControlProps
+} from './components/geolocate-control';
+import {
+  default as _NavigationControl,
+  NavigationControlProps as _NavigationControlProps
+} from './components/navigation-control';
+import {
+  default as _ScaleControl,
+  ScaleControlProps as _ScaleControlProps
+} from './components/scale-control';
+import { default as _Layer, LayerProps as _LayerProps } from './components/layer';
+import { default as _Source, SourceProps as _SourceProps } from './components/source';
+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-bkoi-gl';
+
+export function useMap() {
+  return _useMap<BkoiMap>();
+}
+
+export type MapProps = _MapProps<MapOptions, MapStyle, MapCallbacks, BkoiMap>;
+export type MapRef = _MapRef<BkoiMap>;
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+const mapLib = import('bkoi-gl');
+export const Map = (() => {
+  return React.forwardRef(function Map(props: MapProps, ref: React.Ref<MapRef>) {
+    return _Map<MapOptions, MapStyle, MapCallbacks, BkoiMap>(props, ref, mapLib);
+  });
+})();
+
+export type MarkerProps = _MarkerProps<MarkerOptions, BkoiMarker>;
+export const Marker = _Marker as (
+  props: MarkerProps & React.RefAttributes<BkoiMarker>
+) => React.ReactElement | null;
+
+export type PopupProps = _PopupProps<PopupOptions, BkoiPopup>;
+export const Popup = _Popup as (
+  props: PopupProps & React.RefAttributes<BkoiPopup>
+) => React.ReactElement | null;
+
+type AttributionControlOptions = ConstructorParameters<typeof BkoiAttributionControl>[0];
+export type AttributionControlProps = _AttributionControlProps<AttributionControlOptions>;
+export const AttributionControl = _AttributionControl as (
+  props: AttributionControlProps
+) => React.ReactElement | null;
+
+type FullscreenControlOptions = ConstructorParameters<typeof BkoiFullscreenControl>[0];
+export type FullscreenControlProps = _FullscreenControlProps<FullscreenControlOptions>;
+export const FullscreenControl = _FullscreenControl as (
+  props: FullscreenControlProps
+) => React.ReactElement | null;
+
+type NavigationControlOptions = ConstructorParameters<typeof BkoiNavigationControl>[0];
+export type NavigationControlProps = _NavigationControlProps<NavigationControlOptions>;
+export const NavigationControl = _NavigationControl as (
+  props: NavigationControlProps
+) => React.ReactElement | null;
+
+type GeolocateControlOptions = ConstructorParameters<typeof BkoiGeolocateControl>[0];
+export type GeolocateControlProps = _GeolocateControlProps<
+  GeolocateControlOptions,
+  BkoiGeolocateControl
+>;
+export const GeolocateControl = _GeolocateControl as (
+  props: GeolocateControlProps & React.RefAttributes<BkoiGeolocateControl>
+) => React.ReactElement | null;
+
+type ScaleControlOptions = ConstructorParameters<typeof BkoiScaleControl>[0];
+export type ScaleControlProps = _ScaleControlProps<ScaleControlOptions>;
+export const ScaleControl = _ScaleControl as (
+  props: ScaleControlProps
+) => React.ReactElement | null;
+
+export type LayerProps = _LayerProps<AnyLayer>;
+export const Layer = _Layer as (props: LayerProps) => React.ReactElement | null;
+
+export type SourceProps = _SourceProps<AnySource>;
+export const Source = _Source as (props: SourceProps) => React.ReactElement | null;
+
+export { default as useControl } from './components/use-control';
+export { MapProvider } from './components/use-map';
+
+export default Map;
+
+// Types
+export * from './types/public';
+export type { default as Point } from '@mapbox/point-geometry';
+// export type {
+//   PointLike,
+//   LngLat,
+//   LngLatLike,
+//   LngLatBounds,
+//   LngLatBoundsLike,
+//   PaddingOptions,
+//   MapGeoJSONFeature,
+//   GeoJSONSource,
+//   VideoSource,
+//   ImageSource,
+//   CanvasSource,
+//   VectorTileSource
+// } from 'maplibre-gl';
+export * from './types/style-spec-bkoi-gl';
+
+// Events
+export type {
+  MapEvent,
+  MapMouseEvent,
+  MapLayerMouseEvent,
+  MapTouchEvent,
+  MapLayerTouchEvent,
+  MapStyleDataEvent,
+  MapSourceDataEvent,
+  MapWheelEvent,
+  MapBoxZoomEvent,
+  ErrorEvent,
+  ViewStateChangeEvent
+} from './types/events-bkoi-gl';
+export type PopupEvent = events.PopupEvent<BkoiPopup>;
+export type MarkerEvent = events.MarkerEvent<BkoiMarker>;
+export type MarkerDragEvent = events.MarkerDragEvent<BkoiMarker>;
+export type GeolocateEvent = events.GeolocateEvent<BkoiGeolocateControl>;
+export type GeolocateResultEvent = events.GeolocateResultEvent<BkoiGeolocateControl>;
+export type GeolocateErrorEvent = events.GeolocateErrorEvent<BkoiGeolocateControl>;