@mappedin/blue-dot 6.0.1-beta.60 → 6.0.1-beta.62

package/lib/esm/react/index.js

@@ -1,75 +1 @@
-import {
-  BlueDot,
-  __name,
-  init_define_process
-} from "../chunk-RONFZDXM.js";
-
-// src/react/index.ts
-init_define_process();
-
-// src/react/use-blue-dot.tsx
-init_define_process();
-import { useCallback, useState } from "react";
-import { useMap, useMapViewExtension } from "@mappedin/react-sdk";
-function useForceUpdate() {
-  const [, setState] = useState({});
-  return useCallback(() => setState({}), []);
-}
-__name(useForceUpdate, "useForceUpdate");
-function useBlueDot() {
-  const { mapView } = useMap();
-  const forceUpdate = useForceUpdate();
-  const { register } = useMapViewExtension("blue-dot", {
-    onRegister: /* @__PURE__ */ __name(() => {
-      const bd = new BlueDot(mapView);
-      bd.on("position-update", forceUpdate);
-      bd.on("status-change", forceUpdate);
-      bd.on("follow-change", forceUpdate);
-      bd.on("error", forceUpdate);
-      return bd;
-    }, "onRegister"),
-    onDeregister: /* @__PURE__ */ __name((bd) => {
-      bd.off("position-update", forceUpdate);
-      bd.off("status-change", forceUpdate);
-      bd.off("follow-change", forceUpdate);
-      bd.off("error", forceUpdate);
-      bd.destroy();
-    }, "onDeregister")
-  });
-  const blueDot = register();
-  if (!blueDot) {
-    throw new Error("BlueDot failed to initialize.");
-  }
-  return blueDot;
-}
-__name(useBlueDot, "useBlueDot");
-
-// src/react/use-blue-dot-event.tsx
-init_define_process();
-import { useCallback as useCallback2, useEffect, useRef } from "react";
-function useBlueDotEvent(eventName, callback) {
-  const instance = useBlueDot();
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-  const handleCallback = useCallback2((payload) => {
-    callbackRef.current(payload);
-  }, []);
-  useEffect(() => {
-    if (instance == null) {
-      return;
-    }
-    instance.on(eventName, handleCallback);
-    return () => {
-      if (instance == null) {
-        return;
-      }
-      instance.off(eventName, handleCallback);
-    };
-  }, [instance, eventName, handleCallback]);
-}
-__name(useBlueDotEvent, "useBlueDotEvent");
-export {
-  useBlueDot,
-  useBlueDotEvent
-};
-//# sourceMappingURL=index.js.map
+import{a as n,b as u,c as f}from"../chunk-TYUDBRNJ.js";u();u();import{useCallback as c,useState as p}from"react";import{useMap as D,useMapViewExtension as m}from"@mappedin/react-sdk";function B(){let[,t]=p({});return c(()=>t({}),[])}n(B,"useForceUpdate");function l(){let{mapView:t}=D(),o=B(),{register:r}=m("blue-dot",{onRegister:n(()=>{let e=new f(t);return e.on("position-update",o),e.on("status-change",o),e.on("follow-change",o),e.on("error",o),e},"onRegister"),onDeregister:n(e=>{e.off("position-update",o),e.off("status-change",o),e.off("follow-change",o),e.off("error",o),e.destroy()},"onDeregister")}),s=r();if(!s)throw new Error("BlueDot failed to initialize.");return s}n(l,"useBlueDot");u();import{useCallback as d,useEffect as E,useRef as g}from"react";function w(t,o){let r=l(),s=g(o);s.current=o;let e=d(i=>{s.current(i)},[]);E(()=>{if(r!=null)return r.on(t,e),()=>{r!=null&&r.off(t,e)}},[r,t,e])}n(w,"useBlueDotEvent");export{l as useBlueDot,w as useBlueDotEvent};

package/lib/rn/blue-dot.d.ts

@@ -15,15 +15,15 @@ import type { ReadonlyDeep } from 'type-fest';
  * const mapView = await show3dMap(...);
  *
  * // Enable BlueDot
- * new BlueDot(mapView).enable();
+ * const blueDot = new BlueDot(mapView).enable();
  *
  * // Option 1: Listen for position updates from the device
- * mapView.BlueDot.on('position-update', (position) => {
+ * blueDot.on('position-update', (position) => {
  *   console.log('User position:', position);
  * });
  *
  * // Option 2: Update position manually
- * new BlueDot(mapView).update({ latitude, longitude, accuracy, floorOrFloorId });
+ * blueDot.update({ latitude, longitude, accuracy, floorOrFloorId });
  *
  * ```
  */
@@ -78,20 +78,28 @@ export declare class BlueDot implements MapViewExtension<BlueDotState> {
      * The coordinate of the current position.
      */
     get coordinate(): Coordinate | undefined;
-    getState: () => ReadonlyDeep<BlueDotState>;
+    /**
+     * Returns the current Blue Dot state.
+     */
+    getState(): ReadonlyDeep<BlueDotState>;
     /**
      * The floor the Blue Dot is currently on. If undefined, the Blue Dot will appear on every floor.
      */
     get floor(): Floor | undefined;
     /**
      * Enable the Blue Dot. It will be hidden until a position is received either from the browser or by calling {@link BlueDot.update}.
-     * @param options - The options to setup the Blue Dot (see {@link BlueDotOptions}).
+     * @param options - The options to setup the Blue Dot (see {@link BlueDotUpdateState}).
      *
      * @example Enable with default options
-     * mapView.BlueDot.enable();
-     *
+     * ```ts
+     * const blueDot = new BlueDot(mapView);
+     * blueDot.enable();
+     * ```
      * @example Enable with custom color and accuracy ring
-     * mapView.BlueDot.enable({ color: '#00ff00', accuracyRing: { color: '#00ff00', opacity: 0.2 } });
+     * ```ts
+     * const blueDot = new BlueDot(mapView);
+     * blueDot.enable({ color: '#00ff00', accuracyRing: { color: '#00ff00', opacity: 0.2 } });
+     * ```
      *
      * @see See the [BlueDot Guide](https://developer.mappedin.com/web-sdk/blue-dot) for more information.
      */
@@ -118,21 +126,51 @@ export declare class BlueDot implements MapViewExtension<BlueDotState> {
      * @param options - The options to update
      *
      * @example Update color and accuracy ring
-     * mapView.BlueDot.updateState({
+     * ```ts
+     * const blueDot = new BlueDot(mapView);
+     * blueDot.updateState({
      *   color: '#ff0000',
      *   accuracyRing: { color: '#ff0000', opacity: 0.5 }
      * });
+     * ```
      */
     updateState: (options: BlueDotUpdateState) => void;
     /**
      * Enable or disable the devices's geolocation listener to automatically position the Blue Dot.
      * If enabled, the device will request permission to access the user's precise location.
+     *
+     * @remarks This will emit a 'position-update' event every time a new position is received.
+     *
      * @param watch - Whether to enable or disable the listener.
      */
     watchDevicePosition: (watch: boolean) => void;
+    /**
+     * Enable or disable the device orientation listener to automatically update the Blue Dot's heading.
+     * This must be enabled in response to a user action such as a tap or click and cannot be enabled automatically.
+     *
+     * @remarks This will emit a 'device-orientation-update' event every time the device's orientation changes.
+     * Device orientation changes will not emit a 'position-update' event.
+     *
+     * @see https://www.w3.org/TR/orientation-event/#dom-deviceorientationevent-requestpermission
+     *
+     * @param watch - Whether to enable or disable the listener.
+     *
+     * @example Enable device orientation listener
+     * ```ts
+     * const blueDot = new BlueDot(mapView);
+     * // Enable device orientation on button click
+     * button.addEventListener('click', () => {
+     *   blueDot.watchDeviceOrientation(true);
+     * });
+     * ```
+     */
+    watchDeviceOrientation: (watch: boolean) => Promise<void>;
     /**
      * Manually override some position properties of the Blue Dot.
      * Accepts a full GeolocationPosition object or a partial {@link BlueDotPositionUpdate} object.
+     *
+     * @remarks This will emit a 'position-update' event.
+     *
      * @example Manually set the accuracy and heading
      * ```ts
      * api.BlueDot.update({ accuracy: 10, heading: 90 });

package/lib/rn/constants.d.ts

@@ -1,4 +1,5 @@
 import type { BlueDotState } from './types';
+export declare const DEVICE_ORIENTATION_DELTA_THRESHOLD = 2;
 export declare const POSITION_ANIMATION_DURATION = 1000;
 export declare const SCALE_ANIMATION_DURATION = 150;
 export declare const ROTATION_ANIMATION_DURATION = 150;