@mapvina-com/mapvina-react-native 1.0.0

package/src/utils/animated/AnimatedPoint.ts

@@ -0,0 +1,153 @@
+import { Animated } from "react-native";
+
+let uniqueID = 0;
+
+type AnimatedPointValueIn =
+  | GeoJSON.Point
+  | { type: "Point"; coordinates: Animated.AnimatedValue[] };
+
+const AnimatedWithChildren = Object.getPrototypeOf(
+  Animated.ValueXY,
+) as typeof Animated.AnimatedWithChildren;
+
+export class AnimatedPoint extends AnimatedWithChildren {
+  longitude: Animated.Value;
+  latitude: Animated.Value;
+
+  _lngLatListeners: Record<string, { longitude: string; latitude: string }>;
+
+  constructor(valueIn?: AnimatedPointValueIn) {
+    super();
+
+    const longitudeIn = valueIn?.coordinates[0] ?? 0;
+    const latitudeIn = valueIn?.coordinates[1] ?? 0;
+
+    if (longitudeIn instanceof Animated.Value) {
+      this.longitude = longitudeIn;
+    } else {
+      this.longitude = new Animated.Value(longitudeIn);
+    }
+
+    if (latitudeIn instanceof Animated.Value) {
+      this.latitude = latitudeIn;
+    } else {
+      this.latitude = new Animated.Value(latitudeIn);
+    }
+
+    this._lngLatListeners = {};
+  }
+
+  setValue(value: GeoJSON.Point): void {
+    this.longitude.setValue(value.coordinates[0] ?? 0);
+    this.latitude.setValue(value.coordinates[1] ?? 0);
+  }
+
+  setOffset(offset: GeoJSON.Point): void {
+    this.longitude.setOffset(offset.coordinates[0] ?? 0);
+    this.latitude.setOffset(offset.coordinates[1] ?? 0);
+  }
+
+  flattenOffset(): void {
+    this.longitude.flattenOffset();
+    this.latitude.flattenOffset();
+  }
+
+  stopAnimation(callback?: (value: GeoJSON.Point) => void): void {
+    this.longitude.stopAnimation();
+    this.latitude.stopAnimation();
+
+    if (typeof callback === "function") {
+      callback(this.__getValue());
+    }
+  }
+
+  addListener(callback?: (value: GeoJSON.Point) => void): string {
+    uniqueID += 1;
+    const id = `${uniqueID}-${Date.now()}`;
+
+    const completeCallback = (): void => {
+      if (typeof callback === "function") {
+        callback(this.__getValue());
+      }
+    };
+
+    this._lngLatListeners[id] = {
+      longitude: this.longitude.addListener(completeCallback),
+      latitude: this.latitude.addListener(completeCallback),
+    };
+
+    return id;
+  }
+
+  removeListener(id: string): void {
+    const listener = this._lngLatListeners[id];
+
+    if (listener) {
+      this.longitude.removeListener(listener.longitude);
+      this.latitude.removeListener(listener.latitude);
+      delete this._lngLatListeners[id];
+    }
+  }
+
+  spring({
+    toValue,
+    ...config
+  }: Omit<Animated.SpringAnimationConfig, "useNativeDriver" | "toValue"> & {
+    toValue: GeoJSON.Point;
+  }): Animated.CompositeAnimation {
+    return Animated.parallel([
+      Animated.spring(this.longitude, {
+        ...config,
+        toValue: toValue.coordinates[0] ?? 0,
+        useNativeDriver: false,
+      }),
+      Animated.spring(this.latitude, {
+        ...config,
+        toValue: toValue.coordinates[1] ?? 0,
+        useNativeDriver: false,
+      }),
+    ]);
+  }
+
+  timing({
+    toValue,
+    ...config
+  }: Omit<Animated.TimingAnimationConfig, "useNativeDriver" | "toValue"> & {
+    toValue: GeoJSON.Point;
+  }): Animated.CompositeAnimation {
+    return Animated.parallel([
+      Animated.timing(this.longitude, {
+        ...config,
+        toValue: toValue.coordinates[0] ?? 0,
+        useNativeDriver: false,
+      }),
+      Animated.timing(this.latitude, {
+        ...config,
+        toValue: toValue.coordinates[1] ?? 0,
+        useNativeDriver: false,
+      }),
+    ]);
+  }
+
+  __getValue(): GeoJSON.Point {
+    return {
+      type: "Point",
+      coordinates: [
+        (this.longitude as any).__getValue(),
+        (this.latitude as any).__getValue(),
+      ],
+    };
+  }
+
+  __attach(): void {
+    (this.longitude as any).__addChild(this);
+    (this.latitude as any).__addChild(this);
+  }
+
+  __detach(): void {
+    (this.longitude as any).__removeChild(this);
+    (this.latitude as any).__removeChild(this);
+    // @ts-ignore
+    super.__detach();
+  }
+}

package/src/utils/animated/AnimatedRouteCoordinatesArray.ts

@@ -0,0 +1,155 @@
+import { distance } from "@turf/distance";
+import {
+  convertLength,
+  type Coord,
+  lineString,
+  point,
+  type Units,
+} from "@turf/helpers";
+import { length } from "@turf/length";
+import { nearestPointOnLine } from "@turf/nearest-point-on-line";
+
+import {
+  AbstractAnimatedCoordinates,
+  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;
+      };
+}
+
+interface AnimatedRouteState {
+  actRoute?: AnimatedCoordinates[];
+  fullRoute: AnimatedCoordinates[];
+  end: {
+    from: number;
+    current?: number;
+    to: number;
+  } & ({ point?: Coord | AnimatedCoordinates } | { along?: number });
+}
+
+export class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoordinates<
+  AnimatedRouteState,
+  AnimatedRouteToValue
+> {
+  /**
+   * Calculate initial state
+   *
+   * @param coordinatesArray -
+   * @returns {AnimatedRouteState}
+   */
+  protected onInitialState(
+    coordinatesArray: AnimatedCoordinates[],
+  ): AnimatedRouteState {
+    return {
+      fullRoute: coordinatesArray.map(
+        (coordinates): AnimatedCoordinates => [coordinates[0], coordinates[1]],
+      ),
+      end: { from: 0, to: 0 },
+    };
+  }
+
+  /**
+   * Calculate value from state
+   *
+   * @param state - Previous state
+   * @returns {AnimatedCoordinates[]}
+   */
+  protected onGetValue(state: AnimatedRouteState): AnimatedCoordinates[] {
+    return state.actRoute || state.fullRoute;
+  }
+
+  /**
+   * Calculates state based on startingState and progress, returns a new state
+   *
+   * @param state - Previous state
+   * @param progress - Value between 0 and 1
+   * @returns {AnimatedRouteState}
+   */
+  protected 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;
+      const start = fullRoute[i];
+      const end = fullRoute[i - 1];
+      actSum +=
+        start && end ? distance(point(start), point(end), this.distconf) : 0;
+      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] ?? 0) * r + (fullRoute[i + 1]?.[0] ?? 0) * or,
+        (fullRoute[i]?.[1] ?? 0) * r + (fullRoute[i + 1]?.[1] ?? 0) * or,
+      ] as AnimatedCoordinates,
+    ];
+    return { fullRoute, end: { ...end, current: currentEnd }, actRoute };
+  }
+
+  /**
+   * Subclasses can override to start a new animation
+   *
+   * @param state -
+   * @param toValue - to value from animate
+   * @returns {object} The state
+   */
+  protected onStart(
+    state: AnimatedRouteState,
+    toValue: AnimatedRouteToValue,
+  ): AnimatedRouteState {
+    const { fullRoute, end } = state;
+    const fullRouteLineString = lineString(fullRoute);
+
+    let to: number | undefined = undefined;
+
+    if ("along" in toValue.end) {
+      to =
+        length(fullRouteLineString) -
+        convertLength(toValue.end.along, toValue.end.units);
+    } else {
+      const nearest = nearestPointOnLine(
+        fullRouteLineString,
+        toValue.end.point,
+      );
+      to = length(fullRouteLineString) - nearest.properties.location!;
+    }
+
+    return {
+      fullRoute,
+      end: {
+        ...end,
+        from: end.current ?? end.from,
+        to,
+      },
+    };
+  }
+
+  get originalRoute(): AnimatedCoordinates[] {
+    return this.state.fullRoute;
+  }
+}

package/src/utils/convertStyleSpec.ts

@@ -0,0 +1,61 @@
+import type { AllLayerStyle } from "../types/MapVinaRNStyles";
+
+/**
+ * Converts a kebab-case string to camelCase.
+ *
+ * @example
+ * kebabToCamel('fill-color') // Returns: 'fillColor'
+ * kebabToCamel('line-gap-width') // Returns: 'lineGapWidth'
+ */
+function kebabToCamel(str: string): string {
+  return str.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+}
+
+/**
+ * Converts style spec compliant paint/layout objects (kebab-case) to internal
+ * style format (camelCase).
+ *
+ * @example
+ * convertToInternalStyle({ 'fill-color': 'red' })
+ * // Returns: { fillColor: 'red' }
+ */
+export function convertToInternalStyle(
+  specStyle: Record<string, unknown> | undefined,
+): Partial<AllLayerStyle> | undefined {
+  if (!specStyle) {
+    return undefined;
+  }
+
+  const result: Record<string, unknown> = {};
+
+  for (const key of Object.keys(specStyle)) {
+    result[kebabToCamel(key)] = specStyle[key];
+  }
+
+  return result as Partial<AllLayerStyle>;
+}
+
+/**
+ * Merges paint and layout props into a single internal style object. Priority
+ * order (highest to lowest): paint > layout > style (deprecated)
+ */
+export function mergeStyleProps(
+  paint: Record<string, unknown> | undefined,
+  layout: Record<string, unknown> | undefined,
+  deprecatedStyle: AllLayerStyle | undefined,
+): AllLayerStyle | undefined {
+  const convertedPaint = convertToInternalStyle(paint);
+  const convertedLayout = convertToInternalStyle(layout);
+
+  // If nothing provided, return undefined
+  if (!convertedPaint && !convertedLayout && !deprecatedStyle) {
+    return undefined;
+  }
+
+  // Merge: deprecated style has lowest precedence
+  return {
+    ...deprecatedStyle,
+    ...convertedLayout,
+    ...convertedPaint,
+  } as AllLayerStyle;
+}

package/src/utils/findNodeHandle.ts

@@ -0,0 +1,14 @@
+import { Component } from "react";
+import { findNodeHandle as rnFindNodeHandle } from "react-native";
+
+export const findNodeHandle = (ref: Component | null) => {
+  const nodeHandle = rnFindNodeHandle(ref);
+
+  if (nodeHandle === null) {
+    throw new Error(
+      "NativeComponent ref is null, wait for the map being initialized",
+    );
+  }
+
+  return nodeHandle;
+};

package/src/utils/getNativeFilter.ts

@@ -0,0 +1,15 @@
+import type { FilterSpecification } from "@mapvina/mapvina-gl-style-spec";
+
+export function getNativeFilter(
+  filter: FilterSpecification | undefined,
+): unknown[] {
+  if (Array.isArray(filter)) {
+    return filter;
+  }
+
+  if (typeof filter === "boolean") {
+    return ["literal", filter] satisfies FilterSpecification;
+  }
+
+  return [];
+}

package/src/utils/getStylePropertyType.ts

@@ -0,0 +1,268 @@
+// DO NOT MODIFY
+// This file is auto-generated from scripts/src/templates/renderGetStylePropertyType.ts
+
+import { isAndroid } from "./index";
+
+const StyleType = {
+  Constant: "constant",
+  Color: "color",
+  Transition: "transition",
+  Translation: "translation",
+  Function: "function",
+  Image: "image",
+  Enum: "enum",
+};
+
+const STYLE_MAP = {
+  fillSortKey: StyleType.Constant,
+  fillAntialias: StyleType.Constant,
+  fillOpacity: StyleType.Constant,
+  fillOpacityTransition: StyleType.Transition,
+  fillColor: StyleType.Color,
+  fillColorTransition: StyleType.Transition,
+  fillOutlineColor: StyleType.Color,
+  fillOutlineColorTransition: StyleType.Transition,
+  fillTranslate: StyleType.Translation,
+  fillTranslateTransition: StyleType.Transition,
+  fillTranslateAnchor: StyleType.Enum,
+  fillPattern: StyleType.Image,
+  fillPatternTransition: StyleType.Transition,
+
+  lineCap: StyleType.Enum,
+  lineJoin: StyleType.Enum,
+  lineMiterLimit: StyleType.Constant,
+  lineRoundLimit: StyleType.Constant,
+  lineSortKey: StyleType.Constant,
+  lineOpacity: StyleType.Constant,
+  lineOpacityTransition: StyleType.Transition,
+  lineColor: StyleType.Color,
+  lineColorTransition: StyleType.Transition,
+  lineTranslate: StyleType.Translation,
+  lineTranslateTransition: StyleType.Transition,
+  lineTranslateAnchor: StyleType.Enum,
+  lineWidth: StyleType.Constant,
+  lineWidthTransition: StyleType.Transition,
+  lineGapWidth: StyleType.Constant,
+  lineGapWidthTransition: StyleType.Transition,
+  lineOffset: StyleType.Constant,
+  lineOffsetTransition: StyleType.Transition,
+  lineBlur: StyleType.Constant,
+  lineBlurTransition: StyleType.Transition,
+  lineDasharray: StyleType.Constant,
+  lineDasharrayTransition: StyleType.Transition,
+  linePattern: StyleType.Image,
+  linePatternTransition: StyleType.Transition,
+  lineGradient: StyleType.Color,
+
+  symbolPlacement: StyleType.Enum,
+  symbolSpacing: StyleType.Constant,
+  symbolAvoidEdges: StyleType.Constant,
+  symbolSortKey: StyleType.Constant,
+  symbolZOrder: StyleType.Enum,
+  iconAllowOverlap: StyleType.Constant,
+  iconOverlap: StyleType.Enum,
+  iconIgnorePlacement: StyleType.Constant,
+  iconOptional: StyleType.Constant,
+  iconRotationAlignment: StyleType.Enum,
+  iconSize: StyleType.Constant,
+  iconTextFit: StyleType.Enum,
+  iconTextFitPadding: StyleType.Constant,
+  iconImage: StyleType.Image,
+  iconRotate: StyleType.Constant,
+  iconPadding: StyleType.Constant,
+  iconKeepUpright: StyleType.Constant,
+  iconOffset: StyleType.Constant,
+  iconAnchor: StyleType.Enum,
+  iconPitchAlignment: StyleType.Enum,
+  textPitchAlignment: StyleType.Enum,
+  textRotationAlignment: StyleType.Enum,
+  textField: StyleType.Constant,
+  textFont: StyleType.Constant,
+  textSize: StyleType.Constant,
+  textMaxWidth: StyleType.Constant,
+  textLineHeight: StyleType.Constant,
+  textLetterSpacing: StyleType.Constant,
+  textJustify: StyleType.Enum,
+  textRadialOffset: StyleType.Constant,
+  textVariableAnchor: StyleType.Constant,
+  textAnchor: StyleType.Enum,
+  textMaxAngle: StyleType.Constant,
+  textWritingMode: StyleType.Constant,
+  textRotate: StyleType.Constant,
+  textPadding: StyleType.Constant,
+  textKeepUpright: StyleType.Constant,
+  textTransform: StyleType.Enum,
+  textOffset: StyleType.Constant,
+  textAllowOverlap: StyleType.Constant,
+  textOverlap: StyleType.Enum,
+  textIgnorePlacement: StyleType.Constant,
+  textOptional: StyleType.Constant,
+  iconOpacity: StyleType.Constant,
+  iconOpacityTransition: StyleType.Transition,
+  iconColor: StyleType.Color,
+  iconColorTransition: StyleType.Transition,
+  iconHaloColor: StyleType.Color,
+  iconHaloColorTransition: StyleType.Transition,
+  iconHaloWidth: StyleType.Constant,
+  iconHaloWidthTransition: StyleType.Transition,
+  iconHaloBlur: StyleType.Constant,
+  iconHaloBlurTransition: StyleType.Transition,
+  iconTranslate: StyleType.Translation,
+  iconTranslateTransition: StyleType.Transition,
+  iconTranslateAnchor: StyleType.Enum,
+  textOpacity: StyleType.Constant,
+  textOpacityTransition: StyleType.Transition,
+  textColor: StyleType.Color,
+  textColorTransition: StyleType.Transition,
+  textHaloColor: StyleType.Color,
+  textHaloColorTransition: StyleType.Transition,
+  textHaloWidth: StyleType.Constant,
+  textHaloWidthTransition: StyleType.Transition,
+  textHaloBlur: StyleType.Constant,
+  textHaloBlurTransition: StyleType.Transition,
+  textTranslate: StyleType.Translation,
+  textTranslateTransition: StyleType.Transition,
+  textTranslateAnchor: StyleType.Enum,
+
+  circleSortKey: StyleType.Constant,
+  circleRadius: StyleType.Constant,
+  circleRadiusTransition: StyleType.Transition,
+  circleColor: StyleType.Color,
+  circleColorTransition: StyleType.Transition,
+  circleBlur: StyleType.Constant,
+  circleBlurTransition: StyleType.Transition,
+  circleOpacity: StyleType.Constant,
+  circleOpacityTransition: StyleType.Transition,
+  circleTranslate: StyleType.Translation,
+  circleTranslateTransition: StyleType.Transition,
+  circleTranslateAnchor: StyleType.Enum,
+  circlePitchScale: StyleType.Enum,
+  circlePitchAlignment: StyleType.Enum,
+  circleStrokeWidth: StyleType.Constant,
+  circleStrokeWidthTransition: StyleType.Transition,
+  circleStrokeColor: StyleType.Color,
+  circleStrokeColorTransition: StyleType.Transition,
+  circleStrokeOpacity: StyleType.Constant,
+  circleStrokeOpacityTransition: StyleType.Transition,
+
+  heatmapRadius: StyleType.Constant,
+  heatmapRadiusTransition: StyleType.Transition,
+  heatmapWeight: StyleType.Constant,
+  heatmapIntensity: StyleType.Constant,
+  heatmapIntensityTransition: StyleType.Transition,
+  heatmapColor: StyleType.Color,
+  heatmapOpacity: StyleType.Constant,
+  heatmapOpacityTransition: StyleType.Transition,
+
+  fillExtrusionOpacity: StyleType.Constant,
+  fillExtrusionOpacityTransition: StyleType.Transition,
+  fillExtrusionColor: StyleType.Color,
+  fillExtrusionColorTransition: StyleType.Transition,
+  fillExtrusionTranslate: StyleType.Translation,
+  fillExtrusionTranslateTransition: StyleType.Transition,
+  fillExtrusionTranslateAnchor: StyleType.Enum,
+  fillExtrusionPattern: StyleType.Image,
+  fillExtrusionPatternTransition: StyleType.Transition,
+  fillExtrusionHeight: StyleType.Constant,
+  fillExtrusionHeightTransition: StyleType.Transition,
+  fillExtrusionBase: StyleType.Constant,
+  fillExtrusionBaseTransition: StyleType.Transition,
+  fillExtrusionVerticalGradient: StyleType.Constant,
+
+  rasterOpacity: StyleType.Constant,
+  rasterOpacityTransition: StyleType.Transition,
+  rasterHueRotate: StyleType.Constant,
+  rasterHueRotateTransition: StyleType.Transition,
+  rasterBrightnessMin: StyleType.Constant,
+  rasterBrightnessMinTransition: StyleType.Transition,
+  rasterBrightnessMax: StyleType.Constant,
+  rasterBrightnessMaxTransition: StyleType.Transition,
+  rasterSaturation: StyleType.Constant,
+  rasterSaturationTransition: StyleType.Transition,
+  rasterContrast: StyleType.Constant,
+  rasterContrastTransition: StyleType.Transition,
+  rasterResampling: StyleType.Enum,
+  rasterFadeDuration: StyleType.Constant,
+
+  hillshadeIlluminationDirection: StyleType.Constant,
+  hillshadeIlluminationAltitude: StyleType.Constant,
+  hillshadeIlluminationAnchor: StyleType.Enum,
+  hillshadeExaggeration: StyleType.Constant,
+  hillshadeExaggerationTransition: StyleType.Transition,
+  hillshadeShadowColor: StyleType.Color,
+  hillshadeShadowColorTransition: StyleType.Transition,
+  hillshadeHighlightColor: StyleType.Color,
+  hillshadeHighlightColorTransition: StyleType.Transition,
+  hillshadeAccentColor: StyleType.Color,
+  hillshadeAccentColorTransition: StyleType.Transition,
+  hillshadeMethod: StyleType.Enum,
+
+  backgroundColor: StyleType.Color,
+  backgroundColorTransition: StyleType.Transition,
+  backgroundPattern: StyleType.Image,
+  backgroundPatternTransition: StyleType.Transition,
+  backgroundOpacity: StyleType.Constant,
+  backgroundOpacityTransition: StyleType.Transition,
+
+  anchor: StyleType.Enum,
+  position: StyleType.Constant,
+  positionTransition: StyleType.Transition,
+  color: StyleType.Color,
+  colorTransition: StyleType.Transition,
+  intensity: StyleType.Constant,
+  intensityTransition: StyleType.Transition,
+
+  visibility: StyleType.Constant,
+};
+
+const STYLE_OVERRIDES = {
+  // padding
+  iconTextFitPadding: {
+    iosType: "edgeinsets",
+  },
+
+  // offsets
+  iconOffset: {
+    iosType: "vector",
+  },
+  textOffset: {
+    iosType: "vector",
+  },
+  lineOffset: {
+    iosType: "vector",
+  },
+
+  // translates
+  fillTranslate: {
+    iosType: "vector",
+  },
+  lineTranslate: {
+    iosType: "vector",
+  },
+  iconTranslate: {
+    iosType: "vector",
+  },
+  textTranslate: {
+    iosType: "vector",
+  },
+  circleTranslate: {
+    iosType: "vector",
+  },
+  fillExtrusionTranslate: {
+    iosType: "vector",
+  },
+};
+
+export function getStylePropertyType(
+  styleProperty: keyof typeof STYLE_OVERRIDES,
+): string {
+  if (!isAndroid() && STYLE_OVERRIDES[styleProperty]) {
+    return STYLE_OVERRIDES[styleProperty].iosType;
+  }
+
+  if (STYLE_MAP[styleProperty]) {
+    return STYLE_MAP[styleProperty];
+  }
+
+  throw new Error(`${styleProperty} is not a valid MapVina layer style`);
+}