react-bkoi-gl 2.0.0 → 2.1.0

package/src/components/source.ts

@@ -1,159 +0,0 @@
-import * as React from "react";
-import {
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  useRef,
-  cloneElement,
-} from "react";
-import { MapContext } from "./map";
-import assert from "../utils/assert";
-import { deepEqual } from "../utils/deep-equal";
-
-import type {
-  GeoJSONSourceImplementation,
-  ImageSourceImplementation,
-  AnySourceImplementation,
-} from "../types/internal";
-import type { SourceSpecification } from "../types/style-spec";
-import type { Map as MapInstance } from "../types/lib";
-
-export type SourceProps = SourceSpecification & {
-  id?: string;
-  children?: any;
-};
-
-let sourceCounter = 0;
-
-function createSource(map: MapInstance, id: string, props: SourceProps) {
-  // @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(
-  source: AnySourceImplementation,
-  props: SourceProps,
-  prevProps: SourceProps,
-) {
-  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.data);
-  } else if (type === "image") {
-    (source as ImageSourceImplementation).updateImage({
-      url: props.url,
-      coordinates: props.coordinates,
-    });
-  } else {
-    switch (changedKey) {
-      case "coordinates":
-        // @ts-ignore
-        source.setCoordinates?.(props.coordinates);
-        break;
-      case "url":
-        // @ts-ignore
-        source.setUrl?.(props.url);
-        break;
-      case "tiles":
-        // @ts-ignore
-        source.setTiles?.(props.tiles);
-        break;
-      default:
-        // eslint-disable-next-line
-        console.warn(`Unable to update <Source> prop: ${changedKey}`);
-    }
-  }
-}
-/* eslint-enable complexity */
-
-export function Source(props: SourceProps) {
-  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
-  );
-}

package/src/components/terrain-control.ts

@@ -1,29 +0,0 @@
-import * as React from "react";
-import { useEffect, memo } from "react";
-import { applyReactStyle } from "../utils/apply-react-style";
-import { useControl } from "./use-control";
-
-import type { ControlPosition } from "../types/lib";
-import type { TerrainSpecification } from "../types/style-spec";
-
-export type TerrainControlProps = TerrainSpecification & {
-  /** Placement of the control relative to the map. */
-  position?: ControlPosition;
-  /** CSS style override, applied to the control's container */
-  style?: React.CSSProperties;
-};
-
-function _TerrainControl(props: TerrainControlProps) {
-  const ctrl = useControl(({ mapLib }) => new mapLib.TerrainControl(props), {
-    position: props.position,
-  });
-
-  useEffect(() => {
-    applyReactStyle(ctrl._container, props.style);
-  }, [props.style]);
-
-  return null;
-}
-
-export const TerrainControl: React.FC<TerrainControlProps> =
-  memo(_TerrainControl);

package/src/components/use-control.ts

@@ -1,68 +0,0 @@
-import { useContext, useMemo, useEffect } from "react";
-import type { IControl, ControlPosition } from "../types/lib";
-import { MapContext } from "./map";
-import type { MapContextValue } from "./map";
-
-type ControlOptions = {
-  position?: ControlPosition;
-};
-
-export function useControl<T extends IControl>(
-  onCreate: (context: MapContextValue) => T,
-  opts?: ControlOptions,
-): T;
-
-export function useControl<T extends IControl>(
-  onCreate: (context: MapContextValue) => T,
-  onRemove: (context: MapContextValue) => void,
-  opts?: ControlOptions,
-): T;
-
-export function useControl<T extends IControl>(
-  onCreate: (context: MapContextValue) => T,
-  onAdd: (context: MapContextValue) => void,
-  onRemove: (context: MapContextValue) => void,
-  opts?: ControlOptions,
-): T;
-
-export 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;
-}

package/src/components/use-map.tsx

@@ -1,71 +0,0 @@
-import * as React from "react";
-import { useState, useCallback, useMemo, useContext } from "react";
-
-import { MapRef } from "../maplibre/create-ref";
-import { MapContext } from "./map";
-
-type MountedMapsContextValue = {
-  maps: { [id: string]: MapRef };
-  onMapMount: (map: MapRef, 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 }>({});
-
-  const onMapMount = useCallback((map: MapRef, 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 = {
-  [id: string]: MapRef | undefined;
-  current?: MapRef;
-};
-
-export function useMap(): MapCollection {
-  const maps = useContext(MountedMapsContext)?.maps;
-  const currentMap = useContext(MapContext);
-
-  const mapsWithCurrent = useMemo(() => {
-    return { ...maps, current: currentMap?.map };
-  }, [maps, currentMap]);
-
-  return mapsWithCurrent as MapCollection;
-}

package/src/exports-maplibre-gl.ts

@@ -1,37 +0,0 @@
-import { Map } from "./components/map";
-export { Map };
-export default Map;
-
-export { Marker } from "./components/marker";
-export { Popup } from "./components/popup";
-export { AttributionControl } from "./components/attribution-control";
-export { FullscreenControl } from "./components/fullscreen-control";
-export { GeolocateControl } from "./components/geolocate-control";
-export { NavigationControl } from "./components/navigation-control";
-export { ScaleControl } from "./components/scale-control";
-export { TerrainControl } from "./components/terrain-control";
-export { LogoControl } from "./components/logo-control";
-export { Source } from "./components/source";
-export { Layer } from "./components/layer";
-export { useControl } from "./components/use-control";
-export { MapProvider, useMap } from "./components/use-map";
-
-export type { MapProps } from "./components/map";
-export type { MapRef } from "./maplibre/create-ref";
-export type { MarkerProps } from "./components/marker";
-export type { PopupProps } from "./components/popup";
-export type { AttributionControlProps } from "./components/attribution-control";
-export type { FullscreenControlProps } from "./components/fullscreen-control";
-export type { GeolocateControlProps } from "./components/geolocate-control";
-export type { NavigationControlProps } from "./components/navigation-control";
-export type { ScaleControlProps } from "./components/scale-control";
-export type { TerrainControlProps } from "./components/terrain-control";
-export type { LogoControlProps } from "./components/logo-control";
-export type { SourceProps } from "./components/source";
-export type { LayerProps } from "./components/layer";
-
-// Types
-export * from "./types/common";
-export * from "./types/events";
-export * from "./types/lib";
-export * from "./types/style-spec";

package/src/index.ts

@@ -1,3 +0,0 @@
-/* eslint-disable import/no-unresolved */
-export * from "./exports-maplibre-gl.js";
-export { default as default } from "./exports-maplibre-gl.js";

package/src/maplibre/create-ref.ts

@@ -1,70 +0,0 @@
-import type { Map as MapInstance } from "../types/lib";
-import type Maplibre from "./maplibre";
-
-/** These methods may break the react binding if called directly */
-const skipMethods = [
-  "setMaxBounds",
-  "setMinZoom",
-  "setMaxZoom",
-  "setMinPitch",
-  "setMaxPitch",
-  "setRenderWorldCopies",
-  "setProjection",
-  "setStyle",
-  "addSource",
-  "removeSource",
-  "addLayer",
-  "removeLayer",
-  "setLayerZoomRange",
-  "setFilter",
-  "setPaintProperty",
-  "setLayoutProperty",
-  "setLight",
-  "setTerrain",
-  "setFog",
-  "remove",
-] as const;
-
-export type MapRef = {
-  getMap(): MapInstance;
-} & Omit<MapInstance, (typeof skipMethods)[number]>;
-
-export default function createRef(mapInstance: Maplibre): MapRef | null {
-  if (!mapInstance) {
-    return null;
-  }
-
-  const map = mapInstance.map;
-  const result: any = {
-    getMap: () => map,
-  };
-
-  for (const key of getMethodNames(map)) {
-    // @ts-expect-error
-    if (!(key in result) && !skipMethods.includes(key)) {
-      result[key] = map[key].bind(map);
-    }
-  }
-
-  return result;
-}
-
-function getMethodNames(obj: Object) {
-  const result = new Set<string>();
-
-  let proto = obj;
-  while (proto) {
-    for (const key of Object.getOwnPropertyNames(proto)) {
-      if (
-        key[0] !== "_" &&
-        typeof obj[key] === "function" &&
-        key !== "fire" &&
-        key !== "setEventedParent"
-      ) {
-        result.add(key);
-      }
-    }
-    proto = Object.getPrototypeOf(proto);
-  }
-  return Array.from(result);
-}