@mapvina-com/mapvina-react-native 1.0.0

package/src/types/PixelPoint.ts

@@ -0,0 +1,4 @@
+/**
+ * Pixel coordinates
+ */
+export type PixelPoint = [x: number, y: number];

package/src/types/PixelPointBounds.ts

@@ -0,0 +1,9 @@
+/**
+ * Bounds in pixel coordinates
+ *
+ * Uses common order of top-left and bottom-right corners.
+ */
+export type PixelPointBounds = [
+  topLeft: [left: number, top: number],
+  bottomRight: [right: number, bottom: number],
+];

package/src/types/PressEvent.ts

@@ -0,0 +1,17 @@
+import type { LngLat } from "./LngLat";
+import type { PixelPoint } from "./PixelPoint";
+
+/**
+ * Event data for map press interactions.
+ */
+export interface PressEvent {
+  /**
+   * Geographic coordinates of the touch event
+   */
+  lngLat: LngLat;
+
+  /**
+   * Pixel point of the touch event within the elements' viewport
+   */
+  point: PixelPoint;
+}

package/src/types/PressEventWithFeatures.ts

@@ -0,0 +1,8 @@
+import type { PressEvent } from "./PressEvent";
+
+/**
+ * Press event data enriched with GeoJSON features at the pressed location.
+ */
+export interface PressEventWithFeatures extends PressEvent {
+  features: GeoJSON.Feature[];
+}

package/src/types/PressableSourceProps.ts

@@ -0,0 +1,21 @@
+import type { NativeSyntheticEvent } from "react-native";
+
+import type { PressEventWithFeatures } from "./PressEventWithFeatures";
+import type { ViewPadding } from "./ViewPadding";
+
+/**
+ * Props shared by source components that support press interactions.
+ */
+export interface PressableSourceProps {
+  /**
+   * Emits on press when a child `Layer` within the hitbox has highest z-index
+   *
+   * This bubbles up to Map's onPress unless `event.stopPropagation()` is called.
+   */
+  onPress?: (event: NativeSyntheticEvent<PressEventWithFeatures>) => void;
+
+  /**
+   * Overrides the default touch hitbox (44 x 44 pixels) for the source layers
+   */
+  hitbox?: ViewPadding;
+}

package/src/types/ViewPadding.ts

@@ -0,0 +1,9 @@
+/**
+ * Pixel insets used for view padding.
+ */
+export type ViewPadding = {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+};

package/src/types/codegen/UnsafeMixed.ts

@@ -0,0 +1,9 @@
+/**
+ * This type makes it possible to us strict types in TypeScript while being
+ * loose on native.
+ *
+ * RN codegen specifies `type UnsafeMixed = unknown` mapping to folly::dynamic.
+ * During codegen only the name of the type is analyzed, making it possible to
+ * override their type this way.
+ */
+export type UnsafeMixed<T> = T;

package/src/utils/BridgeValue.ts

@@ -0,0 +1,90 @@
+import { isBoolean, isNumber, isString } from "./index";
+
+export type RawValueType =
+  | string
+  | number
+  | boolean
+  | RawValueType[]
+  | { [key: string]: RawValueType };
+
+export type StyleValueJSON =
+  | { type: "boolean"; value: boolean }
+  | { type: "number"; value: number }
+  | { type: "string"; value: string }
+  | { type: "hashmap"; value: object }
+  | { type: "array"; value: unknown[] };
+
+type StyleValueTypes = "boolean" | "number" | "string" | "hashmap" | "array";
+
+export class BridgeValue {
+  rawValue: RawValueType;
+
+  constructor(rawValue: RawValueType) {
+    this.rawValue = rawValue;
+  }
+
+  get type(): StyleValueTypes {
+    if (Array.isArray(this.rawValue)) {
+      return "array";
+    }
+    if (isBoolean(this.rawValue)) {
+      return "boolean";
+    }
+    if (isNumber(this.rawValue)) {
+      return "number";
+    }
+    if (isString(this.rawValue)) {
+      return "string";
+    }
+    if (this.rawValue && typeof this.rawValue === "object") {
+      return "hashmap";
+    }
+    throw new Error(
+      `[type - ${this.rawValue}] BridgeValue must be a primitive/array/object`,
+    );
+  }
+
+  get value():
+    | [StyleValueJSON, StyleValueJSON][]
+    | StyleValueJSON[]
+    | RawValueType {
+    const { type } = this;
+
+    let value;
+
+    if (type === "array") {
+      value = [];
+
+      for (const innerRawValue of this.rawValue as RawValueType[]) {
+        const bridgeValue = new BridgeValue(innerRawValue);
+        value.push(bridgeValue.toJSON());
+      }
+    } else if (type === "hashmap") {
+      const rawValue = this.rawValue as { [key: string]: RawValueType };
+
+      value = Object.entries(rawValue).map(
+        ([key, value]) =>
+          [new BridgeValue(key).toJSON(), new BridgeValue(value).toJSON()] as [
+            StyleValueJSON,
+            StyleValueJSON,
+          ],
+      );
+    } else if (type === "boolean" || type === "number" || type === "string") {
+      value = this.rawValue;
+    } else {
+      throw new Error(
+        `[value - ${this.rawValue}] BridgeValue must be a primitive/array/object`,
+      );
+    }
+
+    return value;
+  }
+
+  toJSON(formatter?: <T>(arg0: T) => T): StyleValueJSON {
+    return {
+      type: this.type,
+      value:
+        typeof formatter === "function" ? formatter(this.value) : this.value,
+    } as StyleValueJSON;
+  }
+}

package/src/utils/StyleValue.ts

@@ -0,0 +1,52 @@
+import { Image, processColor } from "react-native";
+
+import {
+  BridgeValue,
+  type RawValueType,
+  type StyleValueJSON,
+} from "./BridgeValue";
+import { getStylePropertyType } from "./getStylePropertyType";
+import { type AllLayerStyle } from "../types/MapVinaRNStyles";
+
+export type StyleValue = {
+  styletype: string;
+  stylevalue: StyleValueJSON;
+};
+
+export function transformStyle(
+  style: AllLayerStyle | undefined,
+): undefined | { [key: string]: StyleValue } {
+  if (!style) {
+    return undefined;
+  }
+
+  const nativeStyle: { [key: string]: StyleValue } = {};
+  const styleProps = Object.keys(style) as (keyof typeof style)[];
+  for (const styleProp of styleProps) {
+    const styleType = getStylePropertyType(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(
+          `@mapvina/mapvina-react-native: Invalid color value ${rawStyle}, using #ff0000 (red) instead`,
+        );
+        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/src/utils/animated/AbstractAnimatedCoordinates.ts

@@ -0,0 +1,145 @@
+import { Animated } from "react-native";
+
+const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+
+export type AnimatedCoordinates = [number, number];
+
+const defaultConfig = {
+  useNativeDriver: false,
+};
+
+export abstract class AbstractAnimatedCoordinates<
+  State,
+  ToValue = AnimatedCoordinates[],
+> extends AnimatedWithChildren {
+  constructor(coordinates: AnimatedCoordinates[]) {
+    super();
+
+    this.state = this.onInitialState(coordinates);
+  }
+
+  /**
+   * Subclasses can override to calculate initial state
+   *
+   * @returns the state object
+   */
+  protected abstract onInitialState(coordinates: AnimatedCoordinates[]): State;
+
+  /**
+   * Calculates state based on startingState and progress, returns a new state
+   *
+   * @param state - state object from initialState and/or from calculate
+   * @param progress - value between 0 and 1
+   * @returns next state
+   */
+  protected abstract onCalculate(state: State, progress: number): State;
+
+  /**
+   * Subclasses can override getValue to calculate value from state. Value is
+   * typically coordinates array, but can be anything
+   *
+   * @param state - either state from initialState and/or from calculate
+   */
+  protected abstract onGetValue(state: State): AnimatedCoordinates[];
+
+  animate(
+    progressValue: Animated.Value,
+    progressAnimation: Animated.CompositeAnimation,
+    config: Omit<
+      | Animated.TimingAnimationConfig
+      | Animated.SpringAnimationConfig
+      | Animated.DecayAnimationConfig,
+      "toValue"
+    > & { toValue: ToValue },
+  ): Animated.CompositeAnimation {
+    const onAnimationStart = (animation: Animated.CompositeAnimation): void => {
+      if (this.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: Omit<
+      Animated.TimingAnimationConfig,
+      "toValue" | "useNativeDriver"
+    > & {
+      toValue: ToValue;
+    },
+  ): Animated.CompositeAnimation {
+    const progressValue = new Animated.Value(0.0);
+    return this.animate(
+      progressValue,
+      Animated.timing(progressValue, {
+        ...defaultConfig,
+        ...config,
+        toValue: 1.0,
+      }),
+      {
+        ...defaultConfig,
+        ...config,
+      },
+    );
+  }
+
+  spring(
+    config: Omit<Animated.SpringAnimationConfig, "toValue"> & {
+      toValue: ToValue;
+    },
+  ): Animated.CompositeAnimation {
+    const progressValue = new Animated.Value(0.0);
+    return this.animate(
+      progressValue,
+      Animated.spring(progressValue, {
+        ...defaultConfig,
+        ...config,
+        toValue: 1.0,
+      }),
+      config,
+    );
+  }
+
+  decay(
+    config: Omit<Animated.DecayAnimationConfig, "toValue"> & {
+      toValue: ToValue;
+    },
+  ): 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()),
+    );
+  }
+}

package/src/utils/animated/Animated.ts

@@ -0,0 +1,33 @@
+import type { ComponentProps, ComponentType } from "react";
+import { Animated as RNAnimated } from "react-native";
+
+import { AnimatedCoordinatesArray } from "./AnimatedCoordinatesArray";
+import { AnimatedExtractCoordinateFromArray } from "./AnimatedExtractCoordinateFromArray";
+import { AnimatedGeoJSON } from "./AnimatedGeoJSON";
+import { AnimatedPoint } from "./AnimatedPoint";
+import { AnimatedRouteCoordinatesArray } from "./AnimatedRouteCoordinatesArray";
+import { Marker } from "../../components/annotations/marker/Marker";
+import { Layer } from "../../components/layer/Layer";
+import { GeoJSONSource } from "../../components/sources/geojson-source/GeoJSONSource";
+import { ImageSource } from "../../components/sources/image-source/ImageSource";
+
+export const Animated = {
+  // Components
+  GeoJSONSource: RNAnimated.createAnimatedComponent(
+    GeoJSONSource as unknown as ComponentType<
+      Omit<ComponentProps<typeof GeoJSONSource>, "data"> & {
+        data: string | GeoJSON.GeoJSON | AnimatedGeoJSON;
+      }
+    >,
+  ),
+  ImageSource: RNAnimated.createAnimatedComponent(ImageSource),
+  Marker: RNAnimated.createAnimatedComponent(Marker),
+  Layer: RNAnimated.createAnimatedComponent(Layer),
+
+  // Values
+  Point: AnimatedPoint,
+  CoordinatesArray: AnimatedCoordinatesArray,
+  RouteCoordinatesArray: AnimatedRouteCoordinatesArray,
+  GeoJSON: AnimatedGeoJSON,
+  ExtractCoordinateFromArray: AnimatedExtractCoordinateFromArray,
+};

package/src/utils/animated/AnimatedCoordinatesArray.ts

@@ -0,0 +1,114 @@
+import {
+  AbstractAnimatedCoordinates,
+  type AnimatedCoordinates,
+} from "./AbstractAnimatedCoordinates";
+
+interface CoordinatesState {
+  coords: AnimatedCoordinates[];
+  targetCoords: AnimatedCoordinates[];
+}
+
+export class AnimatedCoordinatesArray extends AbstractAnimatedCoordinates<CoordinatesState> {
+  /**
+   * Subclasses can override to calculate initial state
+   *
+   * @param coordinatesArray - to value from animate
+   * @returns {object} - the state object
+   */
+  protected onInitialState(
+    coordinatesArray: AnimatedCoordinates[],
+  ): CoordinatesState {
+    return {
+      coords: coordinatesArray.map((coordinates) => [
+        coordinates[0],
+        coordinates[1],
+      ]),
+      targetCoords: [],
+    };
+  }
+
+  /**
+   * Subclasses can override getValue to calculate value from state. Value is
+   * typically coordinates array, but can be anything
+   *
+   * @param state - either state from initialState and/or from calculate
+   * @returns {object}
+   */
+  protected onGetValue(state: CoordinatesState): CoordinatesState["coords"] {
+    return state.coords;
+  }
+
+  /**
+   * Calculates state based on startingState and progress, returns a new state
+   *
+   * @param state - state object from initialState and/or from calculate
+   * @param 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((originalCoordinates, i): [number, number] => [
+        originalCoordinates[0] * origF + (targetCoords[i]?.[0] ?? 0) * newF,
+        originalCoordinates[1] * origF + (targetCoords[i]?.[1] ?? 0) * newF,
+      ]);
+
+    if (targetCoords.length > coords.length) {
+      // only in new (adding)
+      const addingOriginal =
+        coords.length > 0 ? coords[coords.length - 1] : targetCoords[0];
+
+      const adding = targetCoords
+        .slice(commonLen, targetCoords.length)
+        .map((newCoordinates): [number, number] => [
+          (addingOriginal?.[0] ?? 0) * origF + newCoordinates[0] * newF,
+          (addingOriginal?.[1] ?? 0) * origF + newCoordinates[1] * newF,
+        ]);
+
+      return { coords: [...common, ...adding], targetCoords };
+    }
+
+    if (coords.length > targetCoords.length) {
+      // only in orig (disappearing)
+      const disappearingNew =
+        targetCoords.length > 0
+          ? targetCoords[targetCoords.length - 1]
+          : coords[0];
+      const disappearing = coords
+        .slice(commonLen, coords.length)
+        .map((originalCoordinates): [number, number] => [
+          originalCoordinates[0] * origF + (disappearingNew?.[0] ?? 0) * newF,
+          originalCoordinates[1] * origF + (disappearingNew?.[1] ?? 0) * newF,
+        ]);
+      return { coords: [...common, ...disappearing], targetCoords };
+    }
+
+    return { coords: common, targetCoords };
+  }
+
+  /**
+   * Subclasses can override to start a new animation
+   *
+   * @param state - to value from animate
+   * @param toValue - the current coordinates array to start from
+   * @returns The state
+   */
+  protected onStart(
+    state: CoordinatesState,
+    toValue: AnimatedCoordinates[],
+  ): CoordinatesState {
+    const targetCoords = toValue.map(
+      (coordinates): AnimatedCoordinates => [coordinates[0], coordinates[1]],
+    );
+    return {
+      ...state,
+      targetCoords,
+    };
+  }
+}

package/src/utils/animated/AnimatedExtractCoordinateFromArray.ts

@@ -0,0 +1,37 @@
+import { Animated } from "react-native";
+
+import type { AnimatedCoordinates } from "./AbstractAnimatedCoordinates";
+import { AnimatedRouteCoordinatesArray } from "./AnimatedRouteCoordinatesArray";
+
+const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+
+export class AnimatedExtractCoordinateFromArray extends AnimatedWithChildren {
+  private array: AnimatedRouteCoordinatesArray;
+  private readonly index: number;
+
+  constructor(array: AnimatedRouteCoordinatesArray, index: number) {
+    super();
+    this.array = array;
+    this.index = index;
+  }
+
+  __getValue(): AnimatedCoordinates {
+    const actArray = this.array.__getValue();
+    let index = this.index;
+
+    if (index < 0) {
+      index += actArray.length;
+    }
+
+    return actArray[index]!;
+  }
+
+  __attach(): void {
+    this.array.__addChild(this);
+  }
+
+  __detach(): void {
+    this.array.__removeChild(this);
+    super.__detach();
+  }
+}

package/src/utils/animated/AnimatedGeoJSON.ts

@@ -0,0 +1,90 @@
+import { Animated } from "react-native";
+
+import type { AnimatedCoordinatesArray } from "./AnimatedCoordinatesArray";
+import { AnimatedExtractCoordinateFromArray } from "./AnimatedExtractCoordinateFromArray";
+import { AnimatedRouteCoordinatesArray } from "./AnimatedRouteCoordinatesArray";
+
+const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+
+type AnimatedGeoJSONValueIn =
+  | {
+      type: "Point";
+      coordinates: AnimatedExtractCoordinateFromArray;
+    }
+  | {
+      type: "LineString";
+      coordinates: AnimatedCoordinatesArray | AnimatedRouteCoordinatesArray;
+    };
+
+/**
+ * AnimatedGeoJSON can be used to have animated properties inside the data
+ * property
+ *
+ * Equivalent of AnimatedStyle for GeoJSON
+ * https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js
+ *
+ * @example
+ * <AnimatedGeoJSONSource ... data={new AnimatedGeoJSON({type:'LineString', coordinates: animatedCoords})} />
+ */
+export class AnimatedGeoJSON extends AnimatedWithChildren {
+  constructor(valueIn: AnimatedGeoJSONValueIn) {
+    super();
+    this.geojson = valueIn;
+  }
+
+  private walkGeoJSONAndGetValues(value: any): any {
+    if (Array.isArray(value)) {
+      return value.map((i) => this.walkGeoJSONAndGetValues(i));
+    }
+
+    if (value instanceof AnimatedWithChildren) {
+      return (value as any).__getValue();
+    }
+
+    if (typeof value === "object") {
+      const result: { [key: string]: any } = {};
+
+      for (const key in value) {
+        result[key] = this.walkGeoJSONAndGetValues(value[key]);
+      }
+
+      return result;
+    }
+
+    return value;
+  }
+
+  private walkAndProcess(
+    value: any,
+    cb: (value: Animated.AnimatedNode) => void,
+  ): void {
+    if (Array.isArray(value)) {
+      value.forEach((i) => this.walkAndProcess(i, cb));
+    } else if (value instanceof AnimatedWithChildren) {
+      cb(value);
+    } else if (typeof value === "object") {
+      for (const key in value) {
+        this.walkAndProcess(value[key], cb);
+      }
+    }
+  }
+
+  __getValue(): GeoJSON.Point | GeoJSON.LineString {
+    const geojson = this.walkGeoJSONAndGetValues(this.geojson);
+
+    if (geojson.type === "LineString" && geojson.coordinates.length === 1) {
+      geojson.coordinates = [...geojson.coordinates, ...geojson.coordinates];
+    }
+
+    return geojson;
+  }
+
+  __attach(): void {
+    this.walkAndProcess(this.geojson, (v) => (v as any).__addChild(this));
+  }
+
+  __detach(): void {
+    this.walkAndProcess(this.geojson, (v) => (v as any).__removeChild(this));
+    super.__detach();
+  }
+}