@maplibre/maplibre-react-native 10.1.0 → 10.1.2

package/src/utils/animated/AbstractAnimatedCoordinates.ts

@@ -1,8 +1,8 @@
 import { Animated } from "react-native";
 
-// see
-// https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedWithChildren.js
+// https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/nodes/AnimatedWithChildren.js
 const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+
 if (__DEV__) {
   if (AnimatedWithChildren.name !== "AnimatedWithChildren") {
     console.error(
@@ -19,20 +19,21 @@ const defaultConfig = {
 
 export abstract class AbstractAnimatedCoordinates<
   State,
+  ToValue = AnimatedCoordinates[],
 > extends AnimatedWithChildren {
-  constructor(coords: AnimatedCoordinates[]) {
+  constructor(coordinates: AnimatedCoordinates[]) {
     super();
 
-    this.state = this.onInitialState(coords);
+    this.state = this.onInitialState(coordinates);
   }
 
   /**
    * Subclasses can override to calculate initial state
    *
-   * @param {AnimatedCoordinates} coordinatesArray - to value from animate
    * @returns {object} - the state object
+   * @param coordinates
    */
-  abstract onInitialState(coords: AnimatedCoordinates[]): State;
+  abstract onInitialState(coordinates: AnimatedCoordinates[]): State;
   /**
    * Calculates state based on startingState and progress, returns a new state
    *
@@ -45,15 +46,15 @@ export abstract class AbstractAnimatedCoordinates<
   animate(
     progressValue: Animated.Value,
     progressAnimation: Animated.CompositeAnimation,
-    config: (
+    config: Omit<
       | Animated.TimingAnimationConfig
       | Animated.SpringAnimationConfig
-      | Animated.DecayAnimationConfig
-    ) & { toValue: AnimatedCoordinates[] },
+      | Animated.DecayAnimationConfig,
+      "toValue"
+    > & { toValue: ToValue },
   ): 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);
@@ -78,8 +79,11 @@ export abstract class AbstractAnimatedCoordinates<
   }
 
   timing(
-    config: Animated.TimingAnimationConfig & {
-      toValue: AnimatedCoordinates[];
+    config: Omit<
+      Animated.TimingAnimationConfig,
+      "toValue" | "useNativeDriver"
+    > & {
+      toValue: ToValue;
     },
   ): Animated.CompositeAnimation {
     const progressValue = new Animated.Value(0.0);
@@ -90,12 +94,17 @@ export abstract class AbstractAnimatedCoordinates<
         ...config,
         toValue: 1.0,
       }),
-      config,
+      {
+        ...defaultConfig,
+        ...config,
+      },
     );
   }
 
   spring(
-    config: Animated.SpringAnimationConfig & { toValue: AnimatedCoordinates[] },
+    config: Omit<Animated.SpringAnimationConfig, "toValue"> & {
+      toValue: ToValue;
+    },
   ): Animated.CompositeAnimation {
     const progressValue = new Animated.Value(0.0);
     return this.animate(
@@ -110,7 +119,9 @@ export abstract class AbstractAnimatedCoordinates<
   }
 
   decay(
-    config: Animated.DecayAnimationConfig & { toValue: AnimatedCoordinates[] },
+    config: Omit<Animated.DecayAnimationConfig, "toValue"> & {
+      toValue: ToValue;
+    },
   ): Animated.CompositeAnimation {
     const progressValue = new Animated.Value(0.0);
     return this.animate(

package/src/utils/animated/AnimatedExtractCoordinateFromArray.ts

@@ -1,8 +1,11 @@
 import { Animated } from "react-native";
 
-// see
-// https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedWithChildren.js
+import type { AnimatedCoordinates } from "./AbstractAnimatedCoordinates";
+import { AnimatedRouteCoordinatesArray } from "./AnimatedRouteCoordinatesArray";
+
+// https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/nodes/AnimatedWithChildren.js
 const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+
 if (__DEV__) {
   if (AnimatedWithChildren.name !== "AnimatedWithChildren") {
     console.error(
@@ -12,24 +15,25 @@ if (__DEV__) {
 }
 
 export class AnimatedExtractCoordinateFromArray extends AnimatedWithChildren {
-  _array: AnimatedExtractCoordinateFromArray;
+  _array: AnimatedRouteCoordinatesArray;
 
   _index = 0;
 
-  constructor(array: AnimatedExtractCoordinateFromArray, index: number) {
+  constructor(array: AnimatedRouteCoordinatesArray, index: number) {
     super();
     this._array = array;
     this._index = index;
   }
 
-  __getValue(): AnimatedExtractCoordinateFromArray {
+  __getValue(): AnimatedCoordinates {
     const actArray = this._array.__getValue();
     let index = this._index;
 
     if (index < 0) {
       index += actArray.length;
     }
-    return actArray[index];
+
+    return actArray[index]!;
   }
 
   __attach(): void {

package/src/utils/animated/AnimatedRouteCoordinatesArray.ts

@@ -1,9 +1,9 @@
 import distance from "@turf/distance";
 import {
-  lineString,
-  point,
   convertLength,
   type Coord,
+  lineString,
+  point,
   type Units,
 } from "@turf/helpers";
 import length from "@turf/length";
@@ -14,6 +14,25 @@ import {
   type AnimatedCoordinates,
 } from "./AbstractAnimatedCoordinates";
 
+interface AnimatedRouteToValue {
+  end: /**
+   * Animate to this point on the coordinates array
+   */
+  | { point: Coord | AnimatedCoordinates }
+    /**
+     * Animate to this length of the coordinates array
+     */
+    | {
+        along: number;
+        units?: Units;
+      };
+
+  /**
+   * @deprecated Use `end.units` in conjunction with `end.along` instead
+   */
+  units?: Units;
+}
+
 interface AnimatedRouteState {
   actRoute?: AnimatedCoordinates[];
   fullRoute: AnimatedCoordinates[];
@@ -21,66 +40,65 @@ interface AnimatedRouteState {
     from: number;
     current?: number;
     to: number;
-    point?: Coord;
-    along?: Coord;
-  };
+  } & ({ point?: Coord | AnimatedCoordinates } | { along?: number });
 }
 
-export class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoordinates<AnimatedRouteState> {
+export class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoordinates<
+  AnimatedRouteState,
+  AnimatedRouteToValue
+> {
   /**
    * Calculate initial state
    *
-   * @param {*} args - to value from animate
-   * @returns {object} - the state object
+   * @param {AnimatedCoordinates[]} coordinatesArray
+   * @returns {AnimatedRouteState}
    */
   onInitialState(coordinatesArray: AnimatedCoordinates[]): AnimatedRouteState {
     return {
       fullRoute: coordinatesArray.map(
-        (coord): AnimatedCoordinates => [coord[0], coord[1]],
+        (coordinates): AnimatedCoordinates => [coordinates[0], coordinates[1]],
       ),
       end: { from: 0, to: 0 },
     };
   }
 
   /**
-   * Calculate value from state.
+   * Calculate value from state
    *
-   * @param {object} state - either state from initialState and/or from calculate
-   * @returns {object}
+   * @param {AnimatedRouteState} state Previous state
+   * @returns {AnimatedCoordinates[]}
    */
-  onGetValue(
-    state: AnimatedRouteState,
-  ): AnimatedRouteState | AnimatedCoordinates[] {
+  onGetValue(state: 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
+   * @param {AnimatedRouteState} state Previous state
+   * @param {number} progress Value between 0 and 1
+   * @returns {AnimatedRouteState}
    */
   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 prevSum = 0;
+    let actSum = 0;
     let i = fullRoute.length - 1;
-    while (actsum < currentEnd && i > 0) {
-      prevsum = actsum;
+    while (actSum < currentEnd && i > 0) {
+      prevSum = actSum;
       const start = fullRoute[i];
       const end = fullRoute[i - 1];
-      actsum +=
+      actSum +=
         start && end ? distance(point(start), point(end), this.distconf) : 0;
       i -= 1;
     }
-    if (actsum <= currentEnd) {
+    if (actSum <= currentEnd) {
       const actRoute = [...fullRoute.slice(0, i + 1)];
       return { fullRoute, end: { ...end, current: currentEnd }, actRoute };
     }
-    const r = (currentEnd - prevsum) / (actsum - prevsum);
+    const r = (currentEnd - prevSum) / (actSum - prevSum);
     const or = 1.0 - r;
 
     const actRoute = [
@@ -96,53 +114,47 @@ export class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoordinates<A
   /**
    * Subclasses can override to start a new animation
    *
+   * @param {AnimatedRouteState} state
    * @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 },
+    toValue: AnimatedRouteToValue,
   ): 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 fullRouteLineString = lineString(fullRoute);
+
+    let to: number | undefined = undefined;
+
+    if ("along" in toValue.end) {
       const { units } = toValue;
-      const ls = lineString(fullRoute);
-      toDist = convertLength(toValue.end.along, units);
-      toDist = length(ls) - toDist;
-    }
-    if (toDist != null) {
-      if (toValue.end.point) {
+
+      if (units !== undefined) {
         console.warn(
-          "RouteCoordinatesArray: toValue.end: has both along and point, point is ignored",
+          "RouteCoordinatesArray: `toValue.units` is deprecated, use `toValue.end.units` instead.",
         );
       }
-    } else if (toValue.end.point) {
-      const ls = lineString(fullRoute);
 
-      const nearest = nearestPointOnLine(ls, toValue.end.point);
-      toDist = length(ls) - nearest.properties.location!;
+      to =
+        length(fullRouteLineString) -
+        convertLength(toValue.end.along, toValue.end.units ?? units);
     } else {
-      console.warn(
-        "RouteCoordinatesArray: toValue.end: should have either along or point",
+      const nearest = nearestPointOnLine(
+        fullRouteLineString,
+        toValue.end.point,
       );
+      to = length(fullRouteLineString) - nearest.properties.location!;
     }
 
-    const result = {
+    return {
       fullRoute,
       end: {
         ...end,
-        from: end.current != null ? end.current : end.from,
-        to: toDist,
+        from: end.current ?? end.from,
+        to,
       },
     };
-    return result;
   }
 
   get originalRoute(): AnimatedCoordinates[] {

package/src/utils/animated/AnimatedShape.ts

@@ -2,13 +2,13 @@
 
 import { Animated } from "react-native";
 
-import { AnimatedCoordinatesArray } from "./AnimatedCoordinatesArray";
+import type { AnimatedCoordinatesArray } from "./AnimatedCoordinatesArray";
 import { AnimatedExtractCoordinateFromArray } from "./AnimatedExtractCoordinateFromArray";
 import { AnimatedRouteCoordinatesArray } from "./AnimatedRouteCoordinatesArray";
 
-// see
-// https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedWithChildren.js
+// https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/nodes/AnimatedWithChildren.js
 const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+
 if (__DEV__) {
   if (AnimatedWithChildren.name !== "AnimatedWithChildren") {
     console.error(
@@ -20,24 +20,23 @@ if (__DEV__) {
 type Shape =
   | {
       type: "Point";
-      coordinates:
-        | AnimatedExtractCoordinateFromArray
-        | AnimatedRouteCoordinatesArray;
+      coordinates: AnimatedExtractCoordinateFromArray;
     }
   | {
       type: "LineString";
-      coordinates: AnimatedCoordinatesArray;
+      coordinates: AnimatedCoordinatesArray | AnimatedRouteCoordinatesArray;
     };
 
 /**
  * AnimatedShape can be used to have animated properties inside the shape property
+ *
+ * Equivalent of AnimatedStyle for shapes
+ * https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js
+ *
  * @example
  * <AnimatedShapeSource ... shape={new AnimatedShape({type:'LineString', coordinates: animatedCoords})} />
  */
 export 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: Shape) {
     super();
     this.shape = shape;
@@ -47,23 +46,33 @@ export class AnimatedShape extends AnimatedWithChildren {
     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 as any).__getValue();
     }
+
     if (typeof value === "object") {
       const result: { [key: string]: any } = {};
+
       for (const key in value) {
         result[key] = this._walkShapeAndGetValues(value[key]);
       }
+
       return result;
     }
+
     return value;
   }
 
-  __getValue(): any {
-    const result = this._walkShapeAndGetValues(this.shape);
-    return result;
+  __getValue(): GeoJSON.Point | GeoJSON.LineString {
+    const shape = this._walkShapeAndGetValues(this.shape);
+
+    if (shape.type === "LineString" && shape.coordinates.length === 1) {
+      shape.coordinates = [...shape.coordinates, ...shape.coordinates];
+    }
+
+    return shape;
   }
 
   // @ts-expect-error Animated.Node is not exported

package/lib/commonjs/components/HeadingIndicator.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_SymbolLayer","require","_heading","_interopRequireDefault","_jsxRuntime","e","__esModule","default","style","iconImage","headingIcon","iconAllowOverlap","iconPitchAlignment","iconRotationAlignment","HeadingIndicator","heading","jsx","SymbolLayer","id","belowLayerID","iconRotate","exports"],"sourceRoot":"../../../src","sources":["components/HeadingIndicator.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAgD,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGhD,MAAMG,KAAK,GAAG;EACZC,SAAS,EAAEC,gBAAW;EACtBC,gBAAgB,EAAE,IAAI;EACtBC,kBAAkB,EAAE,KAAK;EACzBC,qBAAqB,EAAE;AACzB,CAAU;AAMH,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,kBACjE,IAAAX,WAAA,CAAAY,GAAA,EAAChB,YAAA,CAAAiB,WAAW;EAEVC,EAAE,EAAC,oCAAoC;EACvCC,YAAY,EAAC,+BAA+B;EAC5CX,KAAK,EAAE;IACLY,UAAU,EAAEL,OAAO;IACnB,GAAGP;EACL;AAAE,GANE,oCAOL,CACF;AAACa,OAAA,CAAAP,gBAAA,GAAAA,gBAAA","ignoreList":[]}

package/lib/module/components/HeadingIndicator.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["SymbolLayer","headingIcon","jsx","_jsx","style","iconImage","iconAllowOverlap","iconPitchAlignment","iconRotationAlignment","HeadingIndicator","heading","id","belowLayerID","iconRotate"],"sourceRoot":"../../../src","sources":["components/HeadingIndicator.tsx"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,kBAAe;AAC3C,OAAOC,WAAW,MAAM,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGhD,MAAMC,KAAK,GAAG;EACZC,SAAS,EAAEJ,WAAW;EACtBK,gBAAgB,EAAE,IAAI;EACtBC,kBAAkB,EAAE,KAAK;EACzBC,qBAAqB,EAAE;AACzB,CAAU;AAMV,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,kBACjEP,IAAA,CAACH,WAAW;EAEVW,EAAE,EAAC,oCAAoC;EACvCC,YAAY,EAAC,+BAA+B;EAC5CR,KAAK,EAAE;IACLS,UAAU,EAAEH,OAAO;IACnB,GAAGN;EACL;AAAE,GANE,oCAOL,CACF","ignoreList":[]}

package/lib/typescript/commonjs/src/components/HeadingIndicator.d.ts

@@ -1,7 +0,0 @@
-import { type BaseProps } from "../types/BaseProps";
-interface HeadingIndicatorProps extends BaseProps {
-    heading?: number;
-}
-export declare const HeadingIndicator: ({ heading }: HeadingIndicatorProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=HeadingIndicator.d.ts.map

package/lib/typescript/commonjs/src/components/HeadingIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeadingIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/HeadingIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AASpD,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,gBAAgB,gBAAiB,qBAAqB,4CAUlE,CAAC"}

package/lib/typescript/module/src/components/HeadingIndicator.d.ts

@@ -1,7 +0,0 @@
-import { type BaseProps } from "../types/BaseProps";
-interface HeadingIndicatorProps extends BaseProps {
-    heading?: number;
-}
-export declare const HeadingIndicator: ({ heading }: HeadingIndicatorProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=HeadingIndicator.d.ts.map

package/lib/typescript/module/src/components/HeadingIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeadingIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/HeadingIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AASpD,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,gBAAgB,gBAAiB,qBAAqB,4CAUlE,CAAC"}

package/src/components/HeadingIndicator.tsx

@@ -1,26 +0,0 @@
-import { SymbolLayer } from "./SymbolLayer";
-import headingIcon from "../assets/heading.png";
-import { type BaseProps } from "../types/BaseProps";
-
-const style = {
-  iconImage: headingIcon,
-  iconAllowOverlap: true,
-  iconPitchAlignment: "map",
-  iconRotationAlignment: "map",
-} as const;
-
-interface HeadingIndicatorProps extends BaseProps {
-  heading?: number;
-}
-
-export const HeadingIndicator = ({ heading }: HeadingIndicatorProps) => (
-  <SymbolLayer
-    key="mapboxUserLocationHeadingIndicator"
-    id="mapboxUserLocationHeadingIndicator"
-    belowLayerID="mapboxUserLocationWhiteCircle"
-    style={{
-      iconRotate: heading,
-      ...style,
-    }}
-  />
-);