@maplibre/maplibre-react-native 10.0.0-alpha.9 → 10.0.0-beta.2

package/javascript/utils/StyleValue.ts

@@ -1,49 +0,0 @@
-import { Image, processColor } from "react-native";
-
-import BridgeValue, {
-  type RawValueType,
-  type StyleValueJSON,
-} from "./BridgeValue";
-import { AllLayerStyleProps } from "./MaplibreStyles";
-import { getStyleType } from "./styleMap";
-
-export type StyleValue = {
-  styletype: string;
-  stylevalue: StyleValueJSON;
-};
-
-export function transformStyle(
-  style: AllLayerStyleProps | undefined,
-): undefined | { [key: string]: StyleValue } {
-  if (!style) {
-    return;
-  }
-
-  const nativeStyle: { [key: string]: StyleValue } = {};
-  const styleProps = Object.keys(style) as (keyof typeof style)[];
-  for (const styleProp of styleProps) {
-    const styleType = getStyleType(styleProp);
-    let rawStyle: RawValueType | undefined = style[styleProp];
-
-    if (styleType === "color" && typeof rawStyle === "string") {
-      const color = processColor(rawStyle);
-      if (color === null || color === undefined || typeof color === "symbol") {
-        console.error(`RNMaplibre: Invalid color value: ${rawStyle} using red`);
-        rawStyle = "ff0000";
-      } else {
-        rawStyle = color;
-      }
-    } else if (styleType === "image" && typeof rawStyle === "number") {
-      rawStyle =
-        (Image.resolveAssetSource(rawStyle) as unknown as RawValueType) || {};
-    }
-
-    const bridgeValue = new BridgeValue(rawStyle);
-    nativeStyle[styleProp] = {
-      styletype: styleType,
-      stylevalue: bridgeValue.toJSON(),
-    };
-  }
-
-  return nativeStyle;
-}

package/javascript/utils/animated/Animated.ts

@@ -1,61 +0,0 @@
-import React from "react";
-import { Animated as RNAnimated } from "react-native";
-
-import AnimatedCoordinatesArray from "./AnimatedCoordinatesArray";
-import AnimatedExtractCoordinateFromArray from "./AnimatedExtractCoordinateFromArray";
-import AnimatedRouteCoordinatesArray from "./AnimatedRouteCoordinatesArray";
-import AnimatedShape from "./AnimatedShape";
-import BackgroundLayer from "../../components/BackgroundLayer";
-import CircleLayer from "../../components/CircleLayer";
-import FillExtrusionLayer from "../../components/FillExtrusionLayer";
-import FillLayer from "../../components/FillLayer";
-import ImageSource from "../../components/ImageSource";
-import LineLayer from "../../components/LineLayer";
-import RasterLayer from "../../components/RasterLayer";
-import ShapeSource, {
-  ShapeSourceProps,
-  ShapeSourceRef,
-} from "../../components/ShapeSource";
-import SymbolLayer from "../../components/SymbolLayer";
-
-const Animated = {
-  // sources
-  ShapeSource: RNAnimated.createAnimatedComponent(ShapeSource),
-  ImageSource: RNAnimated.createAnimatedComponent(ImageSource),
-
-  // layers
-  FillLayer: RNAnimated.createAnimatedComponent(FillLayer),
-  FillExtrusionLayer: RNAnimated.createAnimatedComponent(FillExtrusionLayer),
-  LineLayer: RNAnimated.createAnimatedComponent(LineLayer),
-  CircleLayer: RNAnimated.createAnimatedComponent(CircleLayer),
-  SymbolLayer: RNAnimated.createAnimatedComponent(SymbolLayer),
-  RasterLayer: RNAnimated.createAnimatedComponent(RasterLayer),
-  BackgroundLayer: RNAnimated.createAnimatedComponent(BackgroundLayer),
-
-  // values
-  CoordinatesArray: AnimatedCoordinatesArray,
-  RouteCoordinatesArray: AnimatedRouteCoordinatesArray,
-  Shape: AnimatedShape,
-  ExtractCoordinateFromArray: AnimatedExtractCoordinateFromArray,
-};
-
-type ShapeSourcePropsWithRef = ShapeSourceProps &
-  React.RefAttributes<ShapeSourceRef>;
-
-type BaseShapeSourceComponent =
-  React.ForwardRefExoticComponent<ShapeSourcePropsWithRef>;
-
-type AnimatedShapeSourceType =
-  RNAnimated.AnimatedComponent<BaseShapeSourceComponent> &
-    React.MemoExoticComponent<BaseShapeSourceComponent>;
-
-/**
- * Manual typing is required for AnimatedShapeSource because the
- * following error:
- * `Type instantiation is excessively deep and possibly infinite.ts(2589)`
- */
-export const AnimatedShapeSource = RNAnimated.createAnimatedComponent(
-  ShapeSource,
-) as AnimatedShapeSourceType;
-
-export default Animated;

package/javascript/utils/animated/AnimatedCoordinatesArray.ts

@@ -1,108 +0,0 @@
-import AbstractAnimatedCoordinates, {
-  AnimatedCoordinates,
-} from "./AbstractAnimatedCoordinates";
-
-interface CoordinatesState {
-  coords: AnimatedCoordinates[];
-  targetCoords: AnimatedCoordinates[];
-}
-
-class AnimatedCoordinatesArray extends AbstractAnimatedCoordinates<CoordinatesState> {
-  /**
-   * Subclasses can override to calculate initial state
-   *
-   * @param {AnimatedCoordinates} coordinatesArray - to value from animate
-   * @returns {object} - the state object
-   */
-  onInitialState(coordinatesArray: AnimatedCoordinates[]): CoordinatesState {
-    return {
-      coords: coordinatesArray.map((coord) => [coord[0], coord[1]]),
-      targetCoords: [],
-    };
-  }
-
-  /**
-   * Subclasses can override getValue to calculate value from state.
-   * Value is typically coordinates array, but can be anything
-   *
-   * @param {object} state - either state from initialState and/or from calculate
-   * @returns {object}
-   */
-  onGetValue(state: CoordinatesState): CoordinatesState["coords"] {
-    return state.coords;
-  }
-
-  /**
-   * Calculates state based on startingState and progress, returns a new state
-   *
-   * @param {object} state - state object from initialState and/or from calculate
-   * @param {number} progress - value between 0 and 1
-   * @returns {object} next state
-   */
-  onCalculate(state: CoordinatesState, progress: number): CoordinatesState {
-    const { coords, targetCoords } = state;
-    const newF = progress;
-    const origF = 1.0 - newF;
-
-    // common
-    const commonLen = Math.min(coords.length, targetCoords.length);
-    const common = coords
-      .slice(0, commonLen)
-      .map((origCoord, i): [number, number] => [
-        origCoord[0] * origF + targetCoords[i][0] * newF,
-        origCoord[1] * origF + targetCoords[i][1] * newF,
-      ]);
-
-    if (targetCoords.length > coords.length) {
-      // only in new (adding)
-      const addingOrig =
-        coords.length > 0 ? coords[coords.length - 1] : targetCoords[0];
-      const adding = targetCoords
-        .slice(commonLen, targetCoords.length)
-        .map((newCoord): [number, number] => [
-          addingOrig[0] * origF + newCoord[0] * newF,
-          addingOrig[1] * origF + newCoord[1] * newF,
-        ]);
-      return { coords: [...common, ...adding], targetCoords };
-    }
-
-    if (coords.length > targetCoords.length) {
-      // only in orig (dissapearing)
-      const dissapearingNew =
-        targetCoords.length > 0
-          ? targetCoords[targetCoords.length - 1]
-          : coords[0];
-      const dissapearing = coords
-        .slice(commonLen, coords.length)
-        .map((origCoord): [number, number] => [
-          origCoord[0] * origF + dissapearingNew[0] * newF,
-          origCoord[1] * origF + dissapearingNew[1] * newF,
-        ]);
-      return { coords: [...common, ...dissapearing], targetCoords };
-    }
-
-    return { coords: common, targetCoords };
-  }
-
-  /**
-   * Subclasses can override to start a new animation
-   *
-   * @param {*} toValue - to value from animate
-   * @param {*} actCoords - the current coordinates array to start from
-   * @returns {object} The state
-   */
-  onStart(
-    state: CoordinatesState,
-    toValue: AnimatedCoordinates[],
-  ): CoordinatesState {
-    const targetCoords = toValue.map(
-      (coord): AnimatedCoordinates => [coord[0], coord[1]],
-    );
-    return {
-      ...state,
-      targetCoords,
-    };
-  }
-}
-
-export default AnimatedCoordinatesArray;

package/javascript/utils/animated/AnimatedPoint.ts

@@ -1,134 +0,0 @@
-import { Animated } from "react-native";
-
-// Used react-native-maps as a reference
-// https://github.com/react-community/react-native-maps/blob/master/lib/components/AnimatedRegion.js
-const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
-
-const DEFAULT_COORD = [0, 0];
-const DEFAULT_POINT = { type: "Point", coordinates: DEFAULT_COORD };
-
-let uniqueID = 0;
-
-export class AnimatedPoint extends AnimatedWithChildren {
-  constructor(point = DEFAULT_POINT) {
-    super();
-
-    this.longitude = point.coordinates[0] || 0;
-    this.latitude = point.coordinates[1] || 0;
-
-    if (!(this.longitude instanceof Animated.Value)) {
-      this.longitude = new Animated.Value(this.longitude);
-    }
-
-    if (!(this.latitude instanceof Animated.Value)) {
-      this.latitude = new Animated.Value(this.latitude);
-    }
-
-    this._listeners = {};
-  }
-
-  setValue(point = DEFAULT_POINT): void {
-    this.longitude.setValue(point.coordinates[0]);
-    this.latitude.setValue(point.coordinates[1]);
-  }
-
-  setOffset(point = DEFAULT_POINT): void {
-    this.longitude.setOffset(point.coordinates[0]);
-    this.latitude.setOffset(point.coordinates[1]);
-  }
-
-  flattenOffset(): void {
-    this.longitude.flattenOffset();
-    this.latitude.flattenOffset();
-  }
-
-  stopAnimation(cb?: (value: GeoJSON.Point) => void): void {
-    this.longitude.stopAnimation();
-    this.latitude.stopAnimation();
-
-    if (typeof cb === "function") {
-      cb(this.__getValue());
-    }
-  }
-
-  addListener(cb?: (value: GeoJSON.Point) => void): string {
-    uniqueID += 1;
-    const id = `${String(uniqueID)}-${String(Date.now())}`;
-
-    const completeCB = (): void => {
-      if (typeof cb === "function") {
-        cb(this.__getValue());
-      }
-    };
-
-    this._listeners[id] = {
-      longitude: this.longitude.addListener(completeCB),
-      latitude: this.latitude.addListener(completeCB),
-    };
-
-    return id;
-  }
-
-  removeListener(id: string): void {
-    this.longitude.removeListener(this._listeners[id].longitude);
-    this.latitude.removeListener(this._listeners[id].latitude);
-    delete this._listeners[id];
-  }
-
-  spring(
-    config: Partial<Animated.TimingAnimationConfig> & {
-      coordinates: GeoJSON.Position;
-    } = { coordinates: DEFAULT_COORD },
-  ): Animated.CompositeAnimation {
-    return Animated.parallel([
-      Animated.spring(this.longitude, {
-        ...config,
-        toValue: config.coordinates[0],
-        useNativeDriver: false,
-      }),
-      Animated.spring(this.latitude, {
-        ...config,
-        toValue: config.coordinates[1],
-        useNativeDriver: false,
-      }),
-    ]);
-  }
-
-  timing(
-    config: Partial<Animated.TimingAnimationConfig> & {
-      coordinates: GeoJSON.Position;
-    } = { coordinates: DEFAULT_COORD },
-  ): Animated.CompositeAnimation {
-    return Animated.parallel([
-      Animated.timing(this.longitude, {
-        ...config,
-        toValue: config.coordinates[0],
-        useNativeDriver: false,
-      }),
-      Animated.timing(this.latitude, {
-        ...config,
-        toValue: config.coordinates[1],
-        useNativeDriver: false,
-      }),
-    ]);
-  }
-
-  __getValue(): GeoJSON.Point {
-    return {
-      type: "Point",
-      coordinates: [this.longitude.__getValue(), this.latitude.__getValue()],
-    };
-  }
-
-  __attach(): void {
-    this.longitude.__addChild(this);
-    this.latitude.__addChild(this);
-  }
-
-  __detach(): void {
-    this.longitude.__removeChild(this);
-    this.latitude.__removeChild(this);
-  }
-}
-
-export default AnimatedPoint;

package/javascript/utils/animated/AnimatedRouteCoordinatesArray.ts

@@ -1,145 +0,0 @@
-import distance from "@turf/distance";
-import { lineString, point, convertLength, Coord, Units } from "@turf/helpers";
-import length from "@turf/length";
-import nearestPointOnLine from "@turf/nearest-point-on-line";
-
-import AbstractAnimatedCoordinates, {
-  AnimatedCoordinates,
-} from "./AbstractAnimatedCoordinates";
-
-interface AnimatedRouteState {
-  actRoute?: AnimatedCoordinates[];
-  fullRoute: AnimatedCoordinates[];
-  end: {
-    from: number;
-    current?: number;
-    to: number;
-    point?: Coord;
-    along?: Coord;
-  };
-}
-
-export default class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoordinates<AnimatedRouteState> {
-  /**
-   * Calculate initial state
-   *
-   * @param {*} args - to value from animate
-   * @returns {object} - the state object
-   */
-  onInitialState(coordinatesArray: AnimatedCoordinates[]): AnimatedRouteState {
-    return {
-      fullRoute: coordinatesArray.map(
-        (coord): AnimatedCoordinates => [coord[0], coord[1]],
-      ),
-      end: { from: 0, to: 0 },
-    };
-  }
-
-  /**
-   * Calculate value from state.
-   *
-   * @param {object} state - either state from initialState and/or from calculate
-   * @returns {object}
-   */
-  onGetValue(
-    state: AnimatedRouteState,
-  ): AnimatedRouteState | AnimatedCoordinates[] {
-    return state.actRoute || state.fullRoute;
-  }
-
-  /**
-   * Calculates state based on startingState and progress, returns a new state
-   *
-   * @param {object} state - state object from initialState and/or from calculate
-   * @param {number} progress - value between 0 and 1
-   * @returns {object} next state
-   */
-  onCalculate(state: AnimatedRouteState, progress: number): AnimatedRouteState {
-    const { fullRoute, end } = state;
-    const currentEnd = end.from * (1.0 - progress) + progress * end.to;
-
-    let prevsum = 0;
-    let actsum = 0;
-    let i = fullRoute.length - 1;
-    while (actsum < currentEnd && i > 0) {
-      prevsum = actsum;
-      actsum += distance(
-        point(fullRoute[i]),
-        point(fullRoute[i - 1]),
-        this.distconf,
-      );
-      i -= 1;
-    }
-    if (actsum <= currentEnd) {
-      const actRoute = [...fullRoute.slice(0, i + 1)];
-      return { fullRoute, end: { ...end, current: currentEnd }, actRoute };
-    }
-    const r = (currentEnd - prevsum) / (actsum - prevsum);
-    const or = 1.0 - r;
-
-    const actRoute = [
-      ...fullRoute.slice(0, i + 1),
-      [
-        fullRoute[i][0] * r + fullRoute[i + 1][0] * or,
-        fullRoute[i][1] * r + fullRoute[i + 1][1] * or,
-      ] as AnimatedCoordinates,
-    ];
-    return { fullRoute, end: { ...end, current: currentEnd }, actRoute };
-  }
-
-  /**
-   * Subclasses can override to start a new animation
-   *
-   * @param {*} toValue - to value from animate
-   * @param {*} actCoords - the current coordinates array to start from
-   * @returns {object} The state
-   */
-  onStart(
-    state: AnimatedRouteState,
-    toValue: { end: { point?: Coord; along?: number }; units?: Units },
-  ): AnimatedRouteState {
-    const { fullRoute, end } = state;
-    let toDist = 0;
-    if (!toValue.end) {
-      console.error(
-        "RouteCoordinatesArray: toValue should have end with either along or point",
-      );
-    }
-    if (toValue.end.along) {
-      const { units } = toValue;
-      const ls = lineString(fullRoute);
-      toDist = convertLength(toValue.end.along, units);
-      toDist = length(ls) - toDist;
-    }
-    if (toDist != null) {
-      if (toValue.end.point) {
-        console.warn(
-          "RouteCoordinatesArray: toValue.end: has both along and point, point is ignored",
-        );
-      }
-    } else if (toValue.end.point) {
-      const ls = lineString(fullRoute);
-
-      const nearest = nearestPointOnLine(ls, toValue.end.point);
-      toDist = length(ls) - nearest.properties.location!;
-    } else {
-      console.warn(
-        "RouteCoordinatesArray: toValue.end: should have either along or point",
-      );
-    }
-
-    const result = {
-      fullRoute,
-      end: {
-        ...end,
-        from: end.current != null ? end.current : end.from,
-        to: toDist,
-      },
-    };
-    return result;
-  }
-
-  get originalRoute(): AnimatedCoordinates[] {
-    return this.state.fullRoute;
-  }
-}

package/javascript/utils/filterUtils.ts

@@ -1,9 +0,0 @@
-import { FilterExpression } from "./MaplibreStyles";
-
-export function getFilter(filter: FilterExpression | undefined): string[] {
-  if (!Array.isArray(filter) || filter.length === 0) {
-    return [];
-  }
-
-  return filter;
-}

package/javascript/utils/geoUtils.ts

@@ -1,79 +0,0 @@
-import geoViewport from "@mapbox/geo-viewport";
-import along from "@turf/along";
-import distance from "@turf/distance";
-import {
-  featureCollection,
-  point,
-  feature,
-  lineString,
-  Id,
-  Properties,
-} from "@turf/helpers";
-
-const VECTOR_TILE_SIZE = 512;
-
-export const makePoint = point;
-
-export const makeLineString = lineString;
-
-export function makeLatLngBounds(
-  northEastCoordinates: GeoJSON.Position,
-  southWestCoordinates: GeoJSON.Position,
-): GeoJSON.FeatureCollection {
-  return featureCollection([
-    point(northEastCoordinates),
-    point(southWestCoordinates),
-  ]);
-}
-
-export const makeFeature = feature;
-
-export function makeFeatureCollection(
-  features: GeoJSON.Feature[] = [],
-  options?: { bbox?: GeoJSON.BBox; id?: Id },
-): GeoJSON.FeatureCollection {
-  return featureCollection(features, options);
-}
-
-export function addToFeatureCollection<T extends GeoJSON.Geometry>(
-  newFeatureCollection: GeoJSON.FeatureCollection<T, Properties>,
-  newFeature: GeoJSON.Feature<T, Properties>,
-): GeoJSON.FeatureCollection<T, Properties> {
-  return {
-    ...newFeatureCollection,
-    features: [...newFeatureCollection.features, newFeature],
-  };
-}
-
-export const calculateDistance = distance;
-
-export const pointAlongLine = along;
-
-export function getOrCalculateVisibleRegion(
-  coord: [number, number] | { lon: number; lat: number },
-  zoomLevel: number,
-  width: number,
-  height: number,
-  nativeRegion: { properties: { visibleBounds: [number, number][] } },
-): { ne: [number, number]; sw: [number, number] } {
-  const region = {
-    ne: [0, 0] as [number, number],
-    sw: [0, 0] as [number, number],
-  };
-
-  if (!nativeRegion || !Array.isArray(nativeRegion.properties.visibleBounds)) {
-    const bounds = geoViewport.bounds(
-      coord,
-      zoomLevel,
-      [width, height],
-      VECTOR_TILE_SIZE,
-    );
-    region.ne = [bounds[3], bounds[2]];
-    region.sw = [bounds[1], bounds[0]];
-  } else {
-    region.ne = nativeRegion.properties.visibleBounds[0];
-    region.sw = nativeRegion.properties.visibleBounds[1];
-  }
-
-  return region;
-}