react-bkoi-gl 2.0.0 → 2.1.0

package/src/types/events.ts

@@ -1,133 +0,0 @@
-import type { Point, LngLat, MapGeoJSONFeature, ViewState } from "./common";
-
-import type {
-  Map,
-  Marker,
-  Popup,
-  GeolocateControl,
-  MapLibreEvent,
-  MapMouseEvent as _MapMouseEvent,
-  MapLayerMouseEvent,
-  MapTouchEvent,
-  MapLayerTouchEvent,
-  MapStyleDataEvent,
-  MapSourceDataEvent,
-  MapWheelEvent,
-  MapLibreZoomEvent as MapBoxZoomEvent,
-} from "maplibre-gl";
-
-export type {
-  MapLibreEvent as MapEvent,
-  MapLayerMouseEvent,
-  MapTouchEvent,
-  MapLayerTouchEvent,
-  MapStyleDataEvent,
-  MapSourceDataEvent,
-  MapWheelEvent,
-  MapBoxZoomEvent,
-};
-
-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: MapLibreEvent) => void;
-  onLoad?: (e: MapLibreEvent) => void;
-  onRender?: (e: MapLibreEvent) => void;
-  onIdle?: (e: MapLibreEvent) => void;
-  onError?: (e: ErrorEvent) => void;
-  onRemove?: (e: MapLibreEvent) => void;
-  onData?: (e: MapStyleDataEvent | MapSourceDataEvent) => void;
-  onStyleData?: (e: MapStyleDataEvent) => void;
-  onSourceData?: (e: MapSourceDataEvent) => void;
-};
-
-interface MapEvent<SourceT, OriginalEventT = undefined> {
-  type: string;
-  target: SourceT;
-  originalEvent: OriginalEventT;
-}
-
-export type ErrorEvent = MapEvent<Map> & {
-  type: "error";
-  error: Error;
-};
-
-export type MapMouseEvent = _MapMouseEvent & {
-  point: Point;
-  lngLat: LngLat;
-  features?: MapGeoJSONFeature[];
-};
-
-export type ViewStateChangeEvent =
-  | (MapEvent<Map, MouseEvent | TouchEvent | WheelEvent | undefined> & {
-      type: "movestart" | "move" | "moveend" | "zoomstart" | "zoom" | "zoomend";
-      viewState: ViewState;
-    })
-  | (MapEvent<Map, MouseEvent | TouchEvent | undefined> & {
-      type:
-        | "rotatestart"
-        | "rotate"
-        | "rotateend"
-        | "dragstart"
-        | "drag"
-        | "dragend"
-        | "pitchstart"
-        | "pitch"
-        | "pitchend";
-      viewState: ViewState;
-    });
-
-export type PopupEvent = {
-  type: "open" | "close";
-  target: Popup;
-};
-
-export type MarkerEvent<OriginalEventT = undefined> = MapEvent<
-  Marker,
-  OriginalEventT
->;
-
-export type MarkerDragEvent = MarkerEvent & {
-  type: "dragstart" | "drag" | "dragend";
-  lngLat: LngLat;
-};
-
-export type GeolocateEvent = MapEvent<GeolocateControl>;
-
-export type GeolocateResultEvent = GeolocateEvent & GeolocationPosition;
-
-export type GeolocateErrorEvent = GeolocateEvent & GeolocationPositionError;

package/src/types/internal.ts

@@ -1,26 +0,0 @@
-// Internal types
-import type { LngLat, PaddingOptions } from "maplibre-gl";
-
-/**
- * maplibre's Transform interface / CameraUpdateTransformFunction argument
- */
-export type TransformLike = {
-  center: LngLat;
-  zoom: number;
-  roll?: number;
-  pitch: number;
-  bearing: number;
-  elevation: number;
-  padding?: PaddingOptions;
-};
-
-export type {
-  GeoJSONSource as GeoJSONSourceImplementation,
-  ImageSource as ImageSourceImplementation,
-  CanvasSource as CanvasSourceImplementation,
-  VectorTileSource as VectorSourceImplementation,
-  RasterTileSource as RasterSourceImplementation,
-  RasterDEMTileSource as RasterDemSourceImplementation,
-  VideoSource as VideoSourceImplementation,
-  Source as AnySourceImplementation,
-} from "maplibre-gl";

package/src/types/lib.ts

@@ -1,84 +0,0 @@
-import type {
-  Map,
-  MapOptions,
-  Marker,
-  MarkerOptions,
-  Popup,
-  PopupOptions,
-  AttributionControl,
-  AttributionControlOptions,
-  FullscreenControl,
-  FullscreenControlOptions,
-  GeolocateControl,
-  GeolocateControlOptions,
-  NavigationControl,
-  NavigationControlOptions,
-  ScaleControl,
-  ScaleControlOptions,
-  TerrainControl,
-  TerrainSpecification,
-  LogoControl,
-  LogoControlOptions,
-} from "maplibre-gl";
-
-export type {
-  ControlPosition,
-  IControl,
-  Map,
-  MapOptions,
-  Marker,
-  MarkerOptions,
-  Popup,
-  PopupOptions,
-  AttributionControl,
-  AttributionControlOptions,
-  FullscreenControl,
-  FullscreenControlOptions,
-  GeolocateControl,
-  GeolocateControlOptions,
-  NavigationControl,
-  NavigationControlOptions,
-  ScaleControl,
-  ScaleControlOptions,
-  TerrainControl,
-  LogoControl,
-  LogoControlOptions,
-  CustomLayerInterface,
-} from "maplibre-gl";
-
-/**
- * A user-facing type that represents the minimal intersection between Mapbox and Maplibre
- * User provided `mapLib` is supposed to implement this interface
- * Only losely typed for compatibility
- */
-export interface MapLib {
-  supported?: (options: any) => boolean;
-
-  Map: { new (options: MapOptions): Map };
-
-  Marker: { new (options: MarkerOptions): Marker };
-
-  Popup: { new (options: PopupOptions): Popup };
-
-  AttributionControl: {
-    new (options: AttributionControlOptions): AttributionControl;
-  };
-
-  FullscreenControl: {
-    new (options: FullscreenControlOptions): FullscreenControl;
-  };
-
-  GeolocateControl: {
-    new (options: GeolocateControlOptions): GeolocateControl;
-  };
-
-  NavigationControl: {
-    new (options: NavigationControlOptions): NavigationControl;
-  };
-
-  ScaleControl: { new (options: ScaleControlOptions): ScaleControl };
-
-  TerrainControl: { new (options: TerrainSpecification): TerrainControl };
-
-  LogoControl: { new (options: LogoControlOptions): LogoControl };
-}

package/src/types/style-spec.ts

@@ -1,34 +0,0 @@
-/*
- * Maplibre Style Specification types
- * Type names are aligned with mapbox
- */
-export type {
-  // Layers
-  LayerSpecification,
-  FillLayerSpecification,
-  LineLayerSpecification,
-  SymbolLayerSpecification,
-  CircleLayerSpecification,
-  HeatmapLayerSpecification,
-  FillExtrusionLayerSpecification,
-  RasterLayerSpecification,
-  HillshadeLayerSpecification,
-  BackgroundLayerSpecification,
-
-  // Sources
-  SourceSpecification,
-  VectorSourceSpecification,
-  RasterSourceSpecification,
-  RasterDEMSourceSpecification,
-  GeoJSONSourceSpecification,
-  VideoSourceSpecification,
-  ImageSourceSpecification,
-  CanvasSourceSpecification,
-
-  // Style
-  StyleSpecification,
-  SkySpecification,
-  LightSpecification,
-  TerrainSpecification,
-  ProjectionSpecification,
-} from "maplibre-gl";

package/src/utils/apply-react-style.ts

@@ -1,24 +0,0 @@
-import * as React from "react";
-// This is a simplified version of
-// https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSPropertyOperations.js#L62
-const unitlessNumber =
-  /box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;
-
-export function applyReactStyle(
-  element: HTMLElement,
-  styles: React.CSSProperties,
-) {
-  if (!element || !styles) {
-    return;
-  }
-  const style = element.style;
-
-  for (const key in styles) {
-    const value = styles[key];
-    if (Number.isFinite(value) && !unitlessNumber.test(key)) {
-      style[key] = `${value}px`;
-    } else {
-      style[key] = value;
-    }
-  }
-}

package/src/utils/assert.ts

@@ -1,5 +0,0 @@
-export default function assert(condition: any, message: string) {
-  if (!condition) {
-    throw new Error(message);
-  }
-}

package/src/utils/compare-class-names.ts

@@ -1,29 +0,0 @@
-/** Compare two classNames string and return the difference */
-export function compareClassNames(
-  prevClassName: string | undefined,
-  nextClassName: string | undefined,
-): string[] | null {
-  if (prevClassName === nextClassName) {
-    return null;
-  }
-
-  const prevClassList = getClassList(prevClassName);
-  const nextClassList = getClassList(nextClassName);
-  const diff: string[] = [];
-
-  for (const c of nextClassList) {
-    if (!prevClassList.has(c)) {
-      diff.push(c);
-    }
-  }
-  for (const c of prevClassList) {
-    if (!nextClassList.has(c)) {
-      diff.push(c);
-    }
-  }
-  return diff.length === 0 ? null : diff;
-}
-
-function getClassList(className: string | undefined) {
-  return new Set(className ? className.trim().split(/\s+/) : []);
-}

package/src/utils/deep-equal.ts

@@ -1,61 +0,0 @@
-import type { PointLike } from "../types/common";
-
-/**
- * Compare two points
- * @param a
- * @param b
- * @returns true if the points are equal
- */
-export function arePointsEqual(a?: PointLike, b?: PointLike): boolean {
-  const ax = Array.isArray(a) ? a[0] : a ? a.x : 0;
-  const ay = Array.isArray(a) ? a[1] : a ? a.y : 0;
-  const bx = Array.isArray(b) ? b[0] : b ? b.x : 0;
-  const by = Array.isArray(b) ? b[1] : b ? b.y : 0;
-  return ax === bx && ay === by;
-}
-
-/* eslint-disable complexity */
-/**
- * Compare any two objects
- * @param a
- * @param b
- * @returns true if the objects are deep equal
- */
-export function deepEqual(a: any, b: any): boolean {
-  if (a === b) {
-    return true;
-  }
-  if (!a || !b) {
-    return false;
-  }
-  if (Array.isArray(a)) {
-    if (!Array.isArray(b) || a.length !== b.length) {
-      return false;
-    }
-    for (let i = 0; i < a.length; i++) {
-      if (!deepEqual(a[i], b[i])) {
-        return false;
-      }
-    }
-    return true;
-  } else if (Array.isArray(b)) {
-    return false;
-  }
-  if (typeof a === "object" && typeof b === "object") {
-    const aKeys = Object.keys(a);
-    const bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length) {
-      return false;
-    }
-    for (const key of aKeys) {
-      if (!b.hasOwnProperty(key)) {
-        return false;
-      }
-      if (!deepEqual(a[key], b[key])) {
-        return false;
-      }
-    }
-    return true;
-  }
-  return false;
-}

package/src/utils/set-globals.ts

@@ -1,51 +0,0 @@
-export type GlobalSettings = {
-  /** The maximum number of images (raster tiles, sprites, icons) to load in parallel.
-   * @default 16
-   */
-  maxParallelImageRequests?: number;
-  /** The map's RTL text plugin. Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left.  */
-  RTLTextPlugin?: string | { pluginUrl: string; lazy?: boolean };
-  /** The number of web workers instantiated on a page with maplibre-gl maps.
-   * @default 2
-   */
-  workerCount?: number;
-  /** Provides an interface for loading maplibre-gl's WebWorker bundle from a self-hosted URL.
-   * This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment
-   * wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior. */
-  workerUrl?: string;
-};
-
-export default function setGlobals(mapLib: any, props: GlobalSettings) {
-  const { RTLTextPlugin, maxParallelImageRequests, workerCount, workerUrl } =
-    props;
-  if (
-    RTLTextPlugin &&
-    mapLib.getRTLTextPluginStatus &&
-    mapLib.getRTLTextPluginStatus() === "unavailable"
-  ) {
-    const { pluginUrl, lazy = true } =
-      typeof RTLTextPlugin === "string"
-        ? { pluginUrl: RTLTextPlugin }
-        : RTLTextPlugin;
-
-    mapLib.setRTLTextPlugin(
-      pluginUrl,
-      (error?: Error) => {
-        if (error) {
-          // eslint-disable-next-line
-          console.error(error);
-        }
-      },
-      lazy,
-    );
-  }
-  if (maxParallelImageRequests !== undefined) {
-    mapLib.setMaxParallelImageRequests(maxParallelImageRequests);
-  }
-  if (workerCount !== undefined) {
-    mapLib.setWorkerCount(workerCount);
-  }
-  if (workerUrl !== undefined) {
-    mapLib.setWorkerUrl(workerUrl);
-  }
-}

package/src/utils/style-utils.ts

@@ -1,68 +0,0 @@
-import type { StyleSpecification } from "../types/style-spec";
-import type { ImmutableLike } from "../types/common";
-
-const refProps = [
-  "type",
-  "source",
-  "source-layer",
-  "minzoom",
-  "maxzoom",
-  "filter",
-  "layout",
-];
-
-// Prepare a map style object for diffing
-// If immutable - convert to plain object
-// Work around some issues in older styles that would fail Mapbox's diffing
-export function normalizeStyle(
-  style: string | StyleSpecification | ImmutableLike<StyleSpecification>,
-): string | StyleSpecification {
-  if (!style) {
-    return null;
-  }
-  if (typeof style === "string") {
-    return style;
-  }
-  if ("toJS" in style) {
-    style = style.toJS();
-  }
-  if (!style.layers) {
-    return style;
-  }
-  const layerIndex = {};
-
-  for (const layer of style.layers) {
-    layerIndex[layer.id] = layer;
-  }
-
-  const layers = style.layers.map((layer) => {
-    let normalizedLayer: typeof layer = null;
-
-    if ("interactive" in layer) {
-      normalizedLayer = Object.assign({}, layer);
-      // Breaks style diffing :(
-      // @ts-ignore legacy field not typed
-      delete normalizedLayer.interactive;
-    }
-
-    // Style diffing doesn't work with refs so expand them out manually before diffing.
-    // @ts-ignore legacy field not typed
-    const layerRef = layerIndex[layer.ref];
-    if (layerRef) {
-      normalizedLayer = normalizedLayer || Object.assign({}, layer);
-      // @ts-ignore
-      delete normalizedLayer.ref;
-      // https://github.com/mapbox/mapbox-gl-js/blob/master/src/style-spec/deref.js
-      for (const propName of refProps) {
-        if (propName in layerRef) {
-          normalizedLayer[propName] = layerRef[propName];
-        }
-      }
-    }
-
-    return normalizedLayer || layer;
-  });
-
-  // Do not mutate the style object provided by the user
-  return { ...style, layers };
-}

package/src/utils/transform.ts

@@ -1,58 +0,0 @@
-import type { MaplibreProps } from "../maplibre/maplibre";
-import type { ViewState } from "../types/common";
-import type { TransformLike } from "../types/internal";
-import { deepEqual } from "./deep-equal";
-
-/**
- * Capture a transform's current state
- * @param transform
- * @returns descriptor of the view state
- */
-export function transformToViewState(tr: TransformLike): ViewState {
-  return {
-    longitude: tr.center.lng,
-    latitude: tr.center.lat,
-    zoom: tr.zoom,
-    pitch: tr.pitch,
-    bearing: tr.bearing,
-    padding: tr.padding,
-  };
-}
-
-/* eslint-disable complexity */
-/**
- * Applies requested view state to a transform
- * @returns an object containing detected changes
- */
-export function applyViewStateToTransform(
-  /** An object that describes Maplibre's camera state */
-  tr: TransformLike,
-  /** Props from Map component */
-  props: MaplibreProps,
-): Partial<TransformLike> {
-  const v: Partial<ViewState> = props.viewState || props;
-  const changes: Partial<TransformLike> = {};
-
-  if (
-    "longitude" in v &&
-    "latitude" in v &&
-    (v.longitude !== tr.center.lng || v.latitude !== tr.center.lat)
-  ) {
-    const LngLat = tr.center.constructor;
-    // @ts-expect-error we should not import LngLat class from maplibre-gl because we don't know the source of mapLib
-    changes.center = new LngLat(v.longitude, v.latitude);
-  }
-  if ("zoom" in v && v.zoom !== tr.zoom) {
-    changes.zoom = v.zoom;
-  }
-  if ("bearing" in v && v.bearing !== tr.bearing) {
-    changes.bearing = v.bearing;
-  }
-  if ("pitch" in v && v.pitch !== tr.pitch) {
-    changes.pitch = v.pitch;
-  }
-  if (v.padding && tr.padding && !deepEqual(v.padding, tr.padding)) {
-    changes.padding = v.padding;
-  }
-  return changes;
-}

package/src/utils/use-isomorphic-layout-effect.ts

@@ -1,8 +0,0 @@
-// From https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts
-// useLayoutEffect but does not trigger warning in server-side rendering
-import { useEffect, useLayoutEffect } from "react";
-
-const useIsomorphicLayoutEffect =
-  typeof document !== "undefined" ? useLayoutEffect : useEffect;
-
-export default useIsomorphicLayoutEffect;