react-bkoi-gl 1.0.1

package/src/types/style-spec-bkoi-gl.ts

@@ -0,0 +1,81 @@
+/*
+ * Maplibre Style Specification types
+ * Type names are aligned with mapbox
+ */
+import type {
+  BackgroundLayerSpecification as BackgroundLayer,
+  CircleLayerSpecification as CircleLayer,
+  FillLayerSpecification as FillLayer,
+  FillExtrusionLayerSpecification as FillExtrusionLayer,
+  HeatmapLayerSpecification as HeatmapLayer,
+  HillshadeLayerSpecification as HillshadeLayer,
+  LineLayerSpecification as LineLayer,
+  RasterLayerSpecification as RasterLayer,
+  SymbolLayerSpecification as SymbolLayer,
+  GeoJSONSourceSpecification as GeoJSONSourceRaw,
+  VideoSourceSpecification as VideoSourceRaw,
+  ImageSourceSpecification as ImageSourceRaw,
+  VectorSourceSpecification as VectorSourceRaw,
+  RasterSourceSpecification as RasterSource,
+  RasterDEMSourceSpecification as RasterDemSource
+} from '@maplibre/maplibre-gl-style-spec';
+
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import {CanvasSourceSpecification as CanvasSourceRaw} from 'bkoi-gl';
+
+// Layers
+export type {
+  BackgroundLayer,
+  CircleLayer,
+  FillLayer,
+  FillExtrusionLayer,
+  HeatmapLayer,
+  HillshadeLayer,
+  LineLayer,
+  RasterLayer,
+  SymbolLayer
+};
+
+export type AnyLayer =
+  | BackgroundLayer
+  | CircleLayer
+  | FillLayer
+  | FillExtrusionLayer
+  | HeatmapLayer
+  | HillshadeLayer
+  | LineLayer
+  | RasterLayer
+  | SymbolLayer;
+
+// Sources
+export type {
+  GeoJSONSourceRaw,
+  VideoSourceRaw,
+  ImageSourceRaw,
+  CanvasSourceRaw,
+  VectorSourceRaw,
+  RasterSource,
+  RasterDemSource
+};
+
+export type AnySource =
+  | GeoJSONSourceRaw
+  | VideoSourceRaw
+  | ImageSourceRaw
+  | CanvasSourceRaw
+  | VectorSourceRaw
+  | RasterSource
+  | RasterDemSource;
+
+// Other style types
+
+export type {
+  StyleSpecification as MapStyle,
+  LightSpecification as Light,
+  TerrainSpecification as Terrain
+} from '@maplibre/maplibre-gl-style-spec';
+
+// The following types are not yet supported by maplibre
+export type Fog = never;
+export type Projection = never;

package/src/types/style-spec-mapbox.ts

@@ -0,0 +1,80 @@
+/*
+ * Mapbox Style Specification types
+ */
+// Layers
+import type {
+  BackgroundLayer,
+  SkyLayer,
+  CircleLayer,
+  FillLayer,
+  FillExtrusionLayer,
+  HeatmapLayer,
+  HillshadeLayer,
+  LineLayer,
+  RasterLayer,
+  SymbolLayer
+} from 'mapbox-gl';
+
+export type AnyLayer =
+  | BackgroundLayer
+  | CircleLayer
+  | FillExtrusionLayer
+  | FillLayer
+  | HeatmapLayer
+  | HillshadeLayer
+  | LineLayer
+  | RasterLayer
+  | SymbolLayer
+  | SkyLayer;
+
+export type {
+  BackgroundLayer,
+  SkyLayer,
+  CircleLayer,
+  FillLayer,
+  FillExtrusionLayer,
+  HeatmapLayer,
+  HillshadeLayer,
+  LineLayer,
+  RasterLayer,
+  SymbolLayer
+};
+
+// Sources
+import type {
+  GeoJSONSourceRaw,
+  VideoSourceRaw,
+  ImageSourceRaw,
+  VectorSource as VectorSourceRaw,
+  RasterSource,
+  CanvasSourceRaw,
+  RasterDemSource
+} from 'mapbox-gl';
+
+export type AnySource =
+  | GeoJSONSourceRaw
+  | VideoSourceRaw
+  | ImageSourceRaw
+  | CanvasSourceRaw
+  | VectorSourceRaw
+  | RasterSource
+  | RasterDemSource;
+
+export type {
+  GeoJSONSourceRaw,
+  VideoSourceRaw,
+  ImageSourceRaw,
+  CanvasSourceRaw,
+  VectorSourceRaw,
+  RasterSource,
+  RasterDemSource
+};
+
+// Other
+export type {
+  Style as MapStyle,
+  Light,
+  Fog,
+  TerrainSpecification as Terrain,
+  Projection
+} from 'mapbox-gl';

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

@@ -0,0 +1,20 @@
+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

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

package/src/utils/deep-equal.ts

@@ -0,0 +1,61 @@
+import type {PointLike} from '../types';
+
+/**
+ * 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

@@ -0,0 +1,57 @@
+export type GlobalSettings = {
+  /** The map's default API URL for requesting tiles, styles, sprites, and glyphs. */
+  baseApiUrl?: string;
+  /** 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 | false;
+  /** Provides an interface for external module bundlers such as Webpack or Rollup to package mapbox-gl's WebWorker into a separate class and integrate it with the library.
+Takes precedence over `workerUrl`. */
+  workerClass?: any;
+  /** The number of web workers instantiated on a page with mapbox-gl maps.
+   * @default 2
+   */
+  workerCount?: number;
+  /** Provides an interface for loading mapbox-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;
+};
+
+const globalSettings = [
+  'baseApiUrl',
+  'maxParallelImageRequests',
+  'workerClass',
+  'workerCount',
+  'workerUrl'
+] as const;
+
+export default function setGlobals(mapLib: any, props: GlobalSettings) {
+  for (const key of globalSettings) {
+    if (key in props) {
+      mapLib[key] = props[key];
+    }
+  }
+
+  const {
+    RTLTextPlugin = 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'
+  } = props;
+  if (
+    RTLTextPlugin &&
+    mapLib.getRTLTextPluginStatus &&
+    mapLib.getRTLTextPluginStatus() === 'unavailable'
+  ) {
+    mapLib.setRTLTextPlugin(
+      RTLTextPlugin,
+      (error?: Error) => {
+        if (error) {
+          // eslint-disable-next-line
+          console.error(error);
+        }
+      },
+      true
+    );
+  }
+}

package/src/utils/style-utils.ts

@@ -0,0 +1,59 @@
+import {ImmutableLike, MapStyle} from '../types';
+
+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 | MapStyle | ImmutableLike<MapStyle>
+): string | MapStyle {
+  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

@@ -0,0 +1,86 @@
+import type {MapboxProps} from '../mapbox/mapbox';
+import type {Transform, ViewState} from '../types';
+import {deepEqual} from './deep-equal';
+
+/**
+ * Make a copy of a transform
+ * @param tr
+ */
+export function cloneTransform(tr: Transform): Transform {
+  const newTransform = tr.clone();
+  // Work around mapbox bug - this value is not assigned in clone(), only in resize()
+  newTransform.pixelsToGLUnits = tr.pixelsToGLUnits;
+  return newTransform;
+}
+
+/**
+ * Copy projection from one transform to another. This only applies to mapbox-gl transforms
+ * @param src the transform to copy projection settings from
+ * @param dest to transform to copy projection settings to
+ */
+export function syncProjection(src: Transform, dest: Transform): void {
+  if (!src.getProjection) {
+    return;
+  }
+  const srcProjection = src.getProjection();
+  const destProjection = dest.getProjection();
+
+  if (!deepEqual(srcProjection, destProjection)) {
+    dest.setProjection(srcProjection);
+  }
+}
+
+/**
+ * Capture a transform's current state
+ * @param transform
+ * @returns descriptor of the view state
+ */
+export function transformToViewState(tr: Transform): 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 */
+/**
+ * Mutate a transform to match the given view state
+ * @param transform
+ * @param viewState
+ * @returns true if the transform has changed
+ */
+export function applyViewStateToTransform(tr: Transform, props: MapboxProps): boolean {
+  const v: Partial<ViewState> = props.viewState || props;
+  let changed = false;
+
+  if ('zoom' in v) {
+    const zoom = tr.zoom;
+    tr.zoom = v.zoom;
+    changed = changed || zoom !== tr.zoom;
+  }
+  if ('bearing' in v) {
+    const bearing = tr.bearing;
+    tr.bearing = v.bearing;
+    changed = changed || bearing !== tr.bearing;
+  }
+  if ('pitch' in v) {
+    const pitch = tr.pitch;
+    tr.pitch = v.pitch;
+    changed = changed || pitch !== tr.pitch;
+  }
+  if (v.padding && !tr.isPaddingEqual(v.padding)) {
+    changed = true;
+    tr.padding = v.padding;
+  }
+  if ('longitude' in v && 'latitude' in v) {
+    const center = tr.center;
+    // @ts-ignore
+    tr.center = new center.constructor(v.longitude, v.latitude);
+    changed = changed || center !== tr.center;
+  }
+  return changed;
+}

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

@@ -0,0 +1,7 @@
+// 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;