@rnmapbox/maps 10.0.0-beta.28

package/javascript/utils/StyleValue.ts

@@ -0,0 +1,44 @@
+import { processColor } from 'react-native';
+import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
+
+import { getStyleType } from './styleMap';
+import BridgeValue from './BridgeValue';
+import { AllLayerStyleProps } from './MapboxStyles';
+
+type StyleValueArray = { type: 'array'; value: [any] };
+type StyleValueNumber = { type: 'number'; value: number };
+type StyleValueString = { type: 'string'; value: string };
+
+export type StyleValue = {
+  styletype: string;
+  stylevalue: StyleValueArray | StyleValueNumber | StyleValueString;
+};
+
+export function transformStyle(
+  style: AllLayerStyleProps,
+): 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: unknown = style[styleProp];
+
+    if (styleType === 'color' && typeof rawStyle === 'string') {
+      rawStyle = processColor(rawStyle);
+    } else if (styleType === 'image' && typeof rawStyle === 'number') {
+      rawStyle = resolveAssetSource(rawStyle) || {};
+    }
+
+    const bridgeValue = new BridgeValue(rawStyle);
+    nativeStyle[styleProp] = {
+      styletype: styleType,
+      stylevalue: bridgeValue.toJSON(),
+    };
+  }
+
+  return nativeStyle;
+}

package/javascript/utils/animated/Animated.js

@@ -0,0 +1,39 @@
+import { Animated as RNAnimated } from 'react-native';
+
+import ShapeSource from '../../components/ShapeSource';
+import ImageSource from '../../components/ImageSource';
+import FillLayer from '../../components/FillLayer';
+import FillExtrusionLayer from '../../components/FillExtrusionLayer';
+import LineLayer from '../../components/LineLayer';
+import CircleLayer from '../../components/CircleLayer';
+import SymbolLayer from '../../components/SymbolLayer';
+import RasterLayer from '../../components/RasterLayer';
+import BackgroundLayer from '../../components/BackgroundLayer';
+
+import AnimatedShape from './AnimatedShape';
+import AnimatedCoordinatesArray from './AnimatedCoordinatesArray';
+import AnimatedExtractCoordinateFromArray from './AnimatedExtractCoordinateFromArray';
+import AnimatedRouteCoordinatesArray from './AnimatedRouteCoordinatesArray';
+
+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,
+};
+
+export default Animated;

package/javascript/utils/animated/AnimatedCoordinatesArray.js

@@ -0,0 +1,191 @@
+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',
+    );
+  }
+}
+
+const defaultConfig = {
+  useNativeDriver: false,
+};
+
+class AnimatedCoordinatesArray extends AnimatedWithChildren {
+  constructor(...args) {
+    super();
+
+    this.state = this.onInitialState(...args);
+  }
+
+  /**
+   * Subclasses can override to calculate initial state
+   *
+   * @param {*} args - to value from animate
+   * @returns {object} - the state object
+   */
+  onInitialState(coordinatesArray) {
+    return { coords: coordinatesArray.map((coord) => [coord[0], coord[1]]) };
+  }
+
+  /**
+   * 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) {
+    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, progress) {
+    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) => [
+        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) => [
+          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) => [
+          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, toValue) {
+    const targetCoords = toValue.map((coord) => [coord[0], coord[1]]);
+    return {
+      ...state,
+      targetCoords,
+    };
+  }
+
+  animate(progressValue, progressAnimation, config) {
+    const { toValue } = config;
+
+    const onAnimationStart = (animation) => {
+      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, toValue);
+    };
+
+    const origAnimationStart = progressAnimation.start;
+    const newAnimation = progressAnimation;
+    newAnimation.start = function start(...args) {
+      onAnimationStart(progressAnimation);
+      origAnimationStart(...args);
+    };
+    return newAnimation;
+  }
+
+  timing(config) {
+    const progressValue = new Animated.Value(0.0);
+    return this.animate(
+      progressValue,
+      Animated.timing(progressValue, {
+        ...defaultConfig,
+        ...config,
+        toValue: 1.0,
+      }),
+      config,
+    );
+  }
+
+  spring(config) {
+    const progressValue = new Animated.Value(0.0);
+    return this.animate(
+      progressValue,
+      Animated.spring(progressValue, {
+        ...defaultConfig,
+        ...config,
+        toValue: 1.0,
+      }),
+      config,
+    );
+  }
+
+  decay(config) {
+    const progressValue = new Animated.Value(0.0);
+    return this.animate(
+      progressValue,
+      Animated.decay(this.progressValue, {
+        ...defaultConfig,
+        ...config,
+        toValue: 1.0,
+      }),
+      config,
+    );
+  }
+
+  __getValue() {
+    if (!this.progressValue) {
+      return this.onGetValue(this.state);
+    }
+    return this.onGetValue(
+      this.onCalculate(this.state, this.progressValue.__getValue()),
+    );
+  }
+}
+
+export default AnimatedCoordinatesArray;

package/javascript/utils/animated/AnimatedExtractCoordinateFromArray.js

@@ -0,0 +1,43 @@
+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 default class AnimatedExtractCoordinateFromArray extends AnimatedWithChildren {
+  _array = null;
+
+  _index = 0;
+
+  constructor(array, index) {
+    super();
+    this._array = array;
+    this._index = index;
+  }
+
+  __getValue() {
+    const actArray = this._array.__getValue();
+    let index = this._index;
+
+    if (index < 0) {
+      index += actArray.length;
+    }
+    return actArray[index];
+  }
+
+  __attach() {
+    this._array.__addChild(this);
+  }
+
+  __detach() {
+    this._array.__removeChild(this);
+    super.__detach();
+  }
+}

package/javascript/utils/animated/AnimatedPoint.js

@@ -0,0 +1,126 @@
+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) {
+    this.longitude.setValue(point.coordinates[0]);
+    this.latitude.setValue(point.coordinates[1]);
+  }
+
+  setOffset(point = DEFAULT_POINT) {
+    this.longitude.setOffset(point.coordinates[0]);
+    this.latitude.setOffset(point.coordinates[1]);
+  }
+
+  flattenOffset() {
+    this.longitude.flattenOffset();
+    this.latitude.flattenOffset();
+  }
+
+  stopAnimation(cb) {
+    this.longitude.stopAnimation();
+    this.latitude.stopAnimation();
+
+    if (typeof cb === 'function') {
+      cb(this.__getValue());
+    }
+  }
+
+  addListener(cb) {
+    uniqueID += 1;
+    const id = `${String(uniqueID)}-${String(Date.now())}`;
+
+    const completeCB = () => {
+      if (typeof cb === 'function') {
+        cb(this.__getValue());
+      }
+    };
+
+    this._listeners[id] = {
+      longitude: this.longitude.addListener(completeCB),
+      latitude: this.latitude.addListener(completeCB),
+    };
+
+    return id;
+  }
+
+  removeListener(id) {
+    this.longitude.removeListener(this._listeners[id].longitude);
+    this.latitude.removeListener(this._listeners[id].latitude);
+    delete this._listeners[id];
+  }
+
+  spring(config = { coordinates: DEFAULT_COORD }) {
+    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 = { coordinates: DEFAULT_COORD }) {
+    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() {
+    return {
+      type: 'Point',
+      coordinates: [this.longitude.__getValue(), this.latitude.__getValue()],
+    };
+  }
+
+  __attach() {
+    this.longitude.__addChild(this);
+    this.latitude.__addChild(this);
+  }
+
+  __detach() {
+    this.longitude.__removeChild(this);
+    this.latitude.__removeChild(this);
+  }
+}
+
+export default AnimatedPoint;

package/javascript/utils/animated/AnimatedRouteCoordinatesArray.js

@@ -0,0 +1,143 @@
+import {
+  lineString,
+  point,
+  convertDistance as convertDistanceFn, // eslint-disable-line import/named
+  convertLength as convertLengthFn,
+} from '@turf/helpers';
+import distance from '@turf/distance';
+import nearestPointOnLine from '@turf/nearest-point-on-line';
+import length from '@turf/length';
+
+import AnimatedCoordinatesArray from './AnimatedCoordinatesArray';
+
+const convertLength = convertLengthFn || convertDistanceFn;
+
+/**
+ * AnimatedRoutesCoordinatesArray - animates along route.
+ * By default start of route is start, and end of route animated from 100% of route to 0% or route.
+ * Eg we have full route to destination and as we're progressing the remaining route gets shorter and shorter.
+ */
+export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesArray {
+  /**
+   * Calculate initial state
+   *
+   * @param {*} args - to value from animate
+   * @param {} options - options, example
+   * @returns {object} - the state object
+   */
+  onInitialState(coordinatesArray, options = null) {
+    let end = { from: 0 };
+    if (options && options.end) {
+      end = options.end;
+    }
+    return {
+      fullRoute: coordinatesArray.map((coord) => [coord[0], coord[1]]),
+      end: { from: 0 },
+    };
+  }
+
+  /**
+   * Calculate value from state.
+   *
+   * @param {object} state - either state from initialState and/or from calculate
+   * @returns {object}
+   */
+  onGetValue(state) {
+    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, progress) {
+    const { fullRoute, end } = state;
+    const currentEnd = end.from * (1.0 - progress) + progress * end.to;
+
+    // console.log("Current end:", end, currentEnd);
+    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;
+
+    // console.log("i", i+1);
+    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,
+      ],
+    ];
+    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, toValue) {
+    const { fullRoute, end } = state;
+    let toDist;
+    if (!toValue.end) {
+      console.error(
+        'RouteCoordinatesArray: toValue should have end with either along or point',
+      );
+    }
+    if (toValue.end.along != null) {
+      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() {
+    return this.state.fullRoute;
+  }
+}

package/javascript/utils/animated/AnimatedShape.js

@@ -0,0 +1,72 @@
+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(
+      'AnimatedShape could not obtain AnimatedWithChildren base class',
+    );
+  }
+}
+
+/**
+ * AnimatedShape can be used to have animated properties inside the shape property
+ * @example
+ * <AnimatedShapeSource ... shape={new AnimatedShape({type:'LineString', coordinates: animatedCoords})} />
+ */
+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) {
+    super();
+    this.shape = shape;
+  }
+
+  _walkShapeAndGetValues(value) {
+    if (Array.isArray(value)) {
+      return value.map((i) => this._walkShapeAndGetValues(i));
+    }
+    if (value instanceof Animated.Node) {
+      return value.__getValue();
+    }
+    if (typeof value === 'object') {
+      const result = {};
+      for (const key in value) {
+        result[key] = this._walkShapeAndGetValues(value[key]);
+      }
+      return result;
+    }
+    return value;
+  }
+
+  __getValue() {
+    const result = this._walkShapeAndGetValues(this.shape);
+    return result;
+  }
+
+  _walkAndProcess(value, cb) {
+    if (Array.isArray(value)) {
+      value.forEach((i) => this._walkAndProcess(i, cb));
+    } else if (value instanceof Animated.Node) {
+      cb(value);
+    } else if (typeof value === 'object') {
+      for (const key in value) {
+        this._walkAndProcess(value[key], cb);
+      }
+    }
+  }
+
+  __attach() {
+    this._walkAndProcess(this.shape, (v) => v.__addChild(this));
+  }
+
+  __detach() {
+    this._walkAndProcess(this.shape, (v) => v.__removeChild(this));
+    super.__detach();
+  }
+}
+
+export default AnimatedShape;

package/javascript/utils/deprecation.js

@@ -0,0 +1,25 @@
+/**
+ * Copy properties from origObject to newObject, which not exists in newObject,
+ * calls onDeprecatedCalled callback in case a copied property is invoked.
+ */
+
+export function copyPropertiesAsDeprecated(
+  origObject,
+  newObject,
+  onDeprecatedCalled,
+  accessors = {},
+) {
+  const result = newObject;
+  for (const [key, value] of Object.entries(origObject)) {
+    if (!newObject[key]) {
+      // eslint-disable-next-line fp/no-mutating-methods
+      Object.defineProperty(result, key, {
+        get() {
+          onDeprecatedCalled(key);
+          return accessors[key] ? accessors[key](value) : value;
+        },
+      });
+    }
+  }
+  return result;
+}

package/javascript/utils/filterUtils.js

@@ -0,0 +1,7 @@
+export function getFilter(filter) {
+  if (!Array.isArray(filter) || filter.length === 0) {
+    return [];
+  }
+
+  return filter;
+}