@maplibre/maplibre-react-native 9.1.0 → 10.0.0-alpha.2

package/javascript/utils/StyleValue.ts

@@ -0,0 +1,49 @@
+import BridgeValue, {
+  type RawValueType,
+  type StyleValueJSON,
+} from './BridgeValue';
+import {AllLayerStyleProps} from './MaplibreStyles';
+import {getStyleType} from './styleMap';
+
+import {Image, processColor} from 'react-native';
+
+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 Array<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/AbstractAnimatedCoordinates.ts

@@ -0,0 +1,134 @@
+import {Animated} from 'react-native';
+
+// see
+// https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedWithChildren.js
+const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+if (__DEV__) {
+  if (AnimatedWithChildren.name !== 'AnimatedWithChildren') {
+    console.error(
+      'AnimatedCoordinatesArray could not obtain AnimatedWithChildren base class',
+    );
+  }
+}
+
+export type AnimatedCoordinates = [number, number];
+
+const defaultConfig = {
+  useNativeDriver: false,
+};
+
+abstract class AbstractAnimatedCoordinates<State> extends AnimatedWithChildren {
+  constructor(coords: AnimatedCoordinates[]) {
+    super();
+
+    this.state = this.onInitialState(coords);
+  }
+
+  /**
+   * Subclasses can override to calculate initial state
+   *
+   * @param {AnimatedCoordinates} coordinatesArray - to value from animate
+   * @returns {object} - the state object
+   */
+  abstract onInitialState(coords: AnimatedCoordinates[]): State;
+  /**
+   * 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
+   */
+  abstract onCalculate(state: State, progress: number): State;
+
+  animate(
+    progressValue: Animated.Value,
+    progressAnimation: Animated.CompositeAnimation,
+    config: (
+      | Animated.TimingAnimationConfig
+      | Animated.SpringAnimationConfig
+      | Animated.DecayAnimationConfig
+    ) & {toValue: AnimatedCoordinates[]},
+  ): Animated.CompositeAnimation {
+    const onAnimationStart = (animation: Animated.CompositeAnimation): void => {
+      if (this.animation) {
+        // there was a started but not finsihed animation
+        const actProgress = this.progressValue.__getValue();
+        this.animation.stop();
+        this.state = this.onCalculate(this.state, actProgress);
+        this.progressValue.__removeChild(this);
+        this.progressValue = null;
+        this.animation = null;
+      }
+
+      this.progressValue = progressValue;
+      this.progressValue.__addChild(this);
+      this.animation = animation;
+      this.state = this.onStart(this.state, config.toValue);
+    };
+
+    const origAnimationStart = progressAnimation.start;
+    const newAnimation = progressAnimation;
+    newAnimation.start = function start(...args): void {
+      onAnimationStart(progressAnimation);
+      origAnimationStart(...args);
+    };
+    return newAnimation;
+  }
+
+  timing(
+    config: Animated.TimingAnimationConfig & {
+      toValue: AnimatedCoordinates[];
+    },
+  ): Animated.CompositeAnimation {
+    const progressValue = new Animated.Value(0.0);
+    return this.animate(
+      progressValue,
+      Animated.timing(progressValue, {
+        ...defaultConfig,
+        ...config,
+        toValue: 1.0,
+      }),
+      config,
+    );
+  }
+
+  spring(
+    config: Animated.SpringAnimationConfig & {toValue: AnimatedCoordinates[]},
+  ): Animated.CompositeAnimation {
+    const progressValue = new Animated.Value(0.0);
+    return this.animate(
+      progressValue,
+      Animated.spring(progressValue, {
+        ...defaultConfig,
+        ...config,
+        toValue: 1.0,
+      }),
+      config,
+    );
+  }
+
+  decay(
+    config: Animated.DecayAnimationConfig & {toValue: AnimatedCoordinates[]},
+  ): Animated.CompositeAnimation {
+    const progressValue = new Animated.Value(0.0);
+    return this.animate(
+      progressValue,
+      Animated.decay(this.progressValue, {
+        ...defaultConfig,
+        ...config,
+      }),
+      config,
+    );
+  }
+
+  __getValue(): AnimatedCoordinates[] {
+    if (!this.progressValue) {
+      return this.onGetValue(this.state);
+    }
+    return this.onGetValue(
+      this.onCalculate(this.state, this.progressValue.__getValue()),
+    );
+  }
+}
+
+export default AbstractAnimatedCoordinates;

package/javascript/utils/animated/AnimatedCoordinatesArray.ts

@@ -0,0 +1,112 @@
+import AbstractAnimatedCoordinates, {
+  AnimatedCoordinates,
+} from './AbstractAnimatedCoordinates';
+
+interface CoordinatesState {
+  coords: AnimatedCoordinates[];
+  targetCoords: AnimatedCoordinates[];
+}
+
+class AnimatedCoordinatesArray extends AbstractAnimatedCoordinates<CoordinatesState> {
+  constructor(coords: AnimatedCoordinates[]) {
+    super(coords);
+  }
+
+  /**
+   * 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/{AnimatedExtractCoordinateFromArray.js → AnimatedExtractCoordinateFromArray.ts}

@@ -12,17 +12,17 @@ if (__DEV__) {
 }
 
 export default class AnimatedExtractCoordinateFromArray extends AnimatedWithChildren {
-  _array = null;
+  _array: AnimatedExtractCoordinateFromArray;
 
   _index = 0;
 
-  constructor(array, index) {
+  constructor(array: AnimatedExtractCoordinateFromArray, index: number) {
     super();
     this._array = array;
     this._index = index;
   }
 
-  __getValue() {
+  __getValue(): AnimatedExtractCoordinateFromArray {
     const actArray = this._array.__getValue();
     let index = this._index;
 
@@ -32,11 +32,11 @@ export default class AnimatedExtractCoordinateFromArray extends AnimatedWithChil
     return actArray[index];
   }
 
-  __attach() {
+  __attach(): void {
     this._array.__addChild(this);
   }
 
-  __detach() {
+  __detach(): void {
     this._array.__removeChild(this);
     super.__detach();
   }

package/javascript/utils/animated/{AnimatedPoint.js → AnimatedPoint.ts}

@@ -27,22 +27,22 @@ export class AnimatedPoint extends AnimatedWithChildren {
     this._listeners = {};
   }
 
-  setValue(point = DEFAULT_POINT) {
+  setValue(point = DEFAULT_POINT): void {
     this.longitude.setValue(point.coordinates[0]);
     this.latitude.setValue(point.coordinates[1]);
   }
 
-  setOffset(point = DEFAULT_POINT) {
+  setOffset(point = DEFAULT_POINT): void {
     this.longitude.setOffset(point.coordinates[0]);
     this.latitude.setOffset(point.coordinates[1]);
   }
 
-  flattenOffset() {
+  flattenOffset(): void {
     this.longitude.flattenOffset();
     this.latitude.flattenOffset();
   }
 
-  stopAnimation(cb) {
+  stopAnimation(cb?: (value: GeoJSON.Point) => void): void {
     this.longitude.stopAnimation();
     this.latitude.stopAnimation();
 
@@ -51,11 +51,11 @@ export class AnimatedPoint extends AnimatedWithChildren {
     }
   }
 
-  addListener(cb) {
+  addListener(cb?: (value: GeoJSON.Point) => void): string {
     uniqueID += 1;
     const id = `${String(uniqueID)}-${String(Date.now())}`;
 
-    const completeCB = () => {
+    const completeCB = (): void => {
       if (typeof cb === 'function') {
         cb(this.__getValue());
       }
@@ -69,13 +69,17 @@ export class AnimatedPoint extends AnimatedWithChildren {
     return id;
   }
 
-  removeListener(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 = {coordinates: DEFAULT_COORD}) {
+  spring(
+    config: Partial<Animated.TimingAnimationConfig> & {
+      coordinates: GeoJSON.Position;
+    } = {coordinates: DEFAULT_COORD},
+  ): Animated.CompositeAnimation {
     return Animated.parallel([
       Animated.spring(this.longitude, {
         ...config,
@@ -90,7 +94,11 @@ export class AnimatedPoint extends AnimatedWithChildren {
     ]);
   }
 
-  timing(config = {coordinates: DEFAULT_COORD}) {
+  timing(
+    config: Partial<Animated.TimingAnimationConfig> & {
+      coordinates: GeoJSON.Position;
+    } = {coordinates: DEFAULT_COORD},
+  ): Animated.CompositeAnimation {
     return Animated.parallel([
       Animated.timing(this.longitude, {
         ...config,
@@ -105,19 +113,19 @@ export class AnimatedPoint extends AnimatedWithChildren {
     ]);
   }
 
-  __getValue() {
+  __getValue(): GeoJSON.Point {
     return {
       type: 'Point',
       coordinates: [this.longitude.__getValue(), this.latitude.__getValue()],
     };
   }
 
-  __attach() {
+  __attach(): void {
     this.longitude.__addChild(this);
     this.latitude.__addChild(this);
   }
 
-  __detach() {
+  __detach(): void {
     this.longitude.__removeChild(this);
     this.latitude.__removeChild(this);
   }

package/javascript/utils/animated/{AnimatedRouteCoordinatesArray.js → AnimatedRouteCoordinatesArray.ts}

@@ -1,21 +1,41 @@
-import AnimatedCoordinatesArray from './AnimatedCoordinatesArray';
+import AbstractAnimatedCoordinates, {
+  AnimatedCoordinates,
+} from './AbstractAnimatedCoordinates';
 
-import {lineString, point, convertLength} from '@turf/helpers';
+import {lineString, point, convertLength, Coord, Units} from '@turf/helpers';
 import distance from '@turf/distance';
 import nearestPointOnLine from '@turf/nearest-point-on-line';
 import length from '@turf/length';
 
-export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesArray {
+interface AnimatedRouteState {
+  actRoute?: AnimatedCoordinates[];
+  fullRoute: AnimatedCoordinates[];
+  end: {
+    from: number;
+    current?: number;
+    to: number;
+    point?: Coord;
+    along?: Coord;
+  };
+}
+
+export default class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoordinates<AnimatedRouteState> {
+  constructor(coords: AnimatedCoordinates[]) {
+    super(coords);
+  }
+
   /**
    * Calculate initial state
    *
    * @param {*} args - to value from animate
    * @returns {object} - the state object
    */
-  onInitialState(coordinatesArray) {
+  onInitialState(coordinatesArray: AnimatedCoordinates[]): AnimatedRouteState {
     return {
-      fullRoute: coordinatesArray.map(coord => [coord[0], coord[1]]),
-      end: {from: 0},
+      fullRoute: coordinatesArray.map(
+        (coord): AnimatedCoordinates => [coord[0], coord[1]],
+      ),
+      end: {from: 0, to: 0},
     };
   }
 
@@ -25,7 +45,9 @@ export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesAr
    * @param {object} state - either state from initialState and/or from calculate
    * @returns {object}
    */
-  onGetValue(state) {
+  onGetValue(
+    state: AnimatedRouteState,
+  ): AnimatedRouteState | AnimatedCoordinates[] {
     return state.actRoute || state.fullRoute;
   }
 
@@ -36,7 +58,7 @@ export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesAr
    * @param {number} progress - value between 0 and 1
    * @returns {object} next state
    */
-  onCalculate(state, progress) {
+  onCalculate(state: AnimatedRouteState, progress: number): AnimatedRouteState {
     const {fullRoute, end} = state;
     const currentEnd = end.from * (1.0 - progress) + progress * end.to;
 
@@ -64,7 +86,7 @@ export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesAr
       [
         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};
   }
@@ -76,15 +98,18 @@ export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesAr
    * @param {*} actCoords - the current coordinates array to start from
    * @returns {object} The state
    */
-  onStart(state, toValue) {
+  onStart(
+    state: AnimatedRouteState,
+    toValue: {end: {point?: Coord; along?: number}; units?: Units},
+  ): AnimatedRouteState {
     const {fullRoute, end} = state;
-    let toDist;
+    let toDist = 0;
     if (!toValue.end) {
       console.error(
         'RouteCoordinatesArray: toValue should have end with either along or point',
       );
     }
-    if (toValue.end.along != null) {
+    if (toValue.end.along) {
       const {units} = toValue;
       const ls = lineString(fullRoute);
       toDist = convertLength(toValue.end.along, units);
@@ -100,7 +125,7 @@ export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesAr
       const ls = lineString(fullRoute);
 
       const nearest = nearestPointOnLine(ls, toValue.end.point);
-      toDist = length(ls) - nearest.properties.location;
+      toDist = length(ls) - nearest.properties.location!;
     } else {
       console.warn(
         'RouteCoordinatesArray: toValue.end: should have either along or point',
@@ -118,7 +143,7 @@ export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesAr
     return result;
   }
 
-  get originalRoute() {
+  get originalRoute(): AnimatedCoordinates[] {
     return this.state.fullRoute;
   }
 }

package/javascript/utils/animated/{AnimatedShape.js → AnimatedShape.ts}

@@ -1,3 +1,9 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import AnimatedCoordinatesArray from './AnimatedCoordinatesArray';
+import AnimatedExtractCoordinateFromArray from './AnimatedExtractCoordinateFromArray';
+import AnimatedRouteCoordinatesArray from './AnimatedRouteCoordinatesArray';
+
 import {Animated} from 'react-native';
 
 // see
@@ -11,6 +17,18 @@ if (__DEV__) {
   }
 }
 
+type Shape =
+  | {
+      type: 'Point';
+      coordinates:
+        | AnimatedExtractCoordinateFromArray
+        | AnimatedRouteCoordinatesArray;
+    }
+  | {
+      type: 'LineString';
+      coordinates: AnimatedCoordinatesArray;
+    };
+
 /**
  * AnimatedShape can be used to have animated properties inside the shape property
  * @example
@@ -20,20 +38,21 @@ class AnimatedShape extends AnimatedWithChildren {
   // equivalent of AnimatedStyle for shapes
   // https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedStyle.js
 
-  constructor(shape) {
+  constructor(shape: Shape) {
     super();
     this.shape = shape;
   }
 
-  _walkShapeAndGetValues(value) {
+  _walkShapeAndGetValues(value: any): any {
     if (Array.isArray(value)) {
       return value.map(i => this._walkShapeAndGetValues(i));
     }
+    // @ts-expect-error Animated.Node is not exported
     if (value instanceof Animated.Node) {
-      return value.__getValue();
+      return (value as any).__getValue();
     }
     if (typeof value === 'object') {
-      const result = {};
+      const result: {[key: string]: any} = {};
       for (const key in value) {
         result[key] = this._walkShapeAndGetValues(value[key]);
       }
@@ -42,14 +61,16 @@ class AnimatedShape extends AnimatedWithChildren {
     return value;
   }
 
-  __getValue() {
+  __getValue(): any {
     const result = this._walkShapeAndGetValues(this.shape);
     return result;
   }
 
-  _walkAndProcess(value, cb) {
+  // @ts-expect-error Animated.Node is not exported
+  _walkAndProcess(value: any, cb: (value: Animated.Node) => void): void {
     if (Array.isArray(value)) {
       value.forEach(i => this._walkAndProcess(i, cb));
+      // @ts-expect-error Animated.Node is not exported
     } else if (value instanceof Animated.Node) {
       cb(value);
     } else if (typeof value === 'object') {
@@ -59,12 +80,12 @@ class AnimatedShape extends AnimatedWithChildren {
     }
   }
 
-  __attach() {
-    this._walkAndProcess(this.shape, v => v.__addChild(this));
+  __attach(): void {
+    this._walkAndProcess(this.shape, v => (v as any).__addChild(this));
   }
 
-  __detach() {
-    this._walkAndProcess(this.shape, v => v.__removeChild(this));
+  __detach(): void {
+    this._walkAndProcess(this.shape, v => (v as any).__removeChild(this));
     super.__detach();
   }
 }

package/javascript/utils/{deprecation.js → deprecation.ts}

@@ -3,12 +3,15 @@
  * calls onDeprecatedCalled callback in case a copied property is invoked.
  */
 
-export function copyPropertiesAsDeprecated(
-  origObject,
-  newObject,
-  onDeprecatedCalled,
-  accessors = {},
-) {
+export function copyPropertiesAsDeprecated<
+  DeprecatedType extends object,
+  WithDeprecatedType extends Record<string, unknown>,
+>(
+  origObject: DeprecatedType,
+  newObject: WithDeprecatedType,
+  onDeprecatedCalled: (key: string) => void,
+  accessors: Record<string, (value: any) => unknown> = {},
+): WithDeprecatedType {
   const result = newObject;
   for (const [key, value] of Object.entries(origObject)) {
     if (!newObject[key]) {

package/javascript/utils/filterUtils.ts

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