@mappedin/blue-dot 6.0.1-beta.57 → 6.0.1-beta.59

package/lib/esm/react/index.js

@@ -0,0 +1,75 @@
+import {
+  BlueDot,
+  __name,
+  init_define_process
+} from "../chunk-EEQMR2QG.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

package/lib/esm/react/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/react/index.ts", "../../../src/react/use-blue-dot.tsx", "../../../src/react/use-blue-dot-event.tsx"],
+  "sourcesContent": ["export { useBlueDot } from './use-blue-dot';\nexport { useBlueDotEvent } from './use-blue-dot-event';\n", "import { useCallback, useState } from 'react';\nimport { BlueDot } from '../blue-dot';\nimport { useMap, useMapViewExtension } from '@mappedin/react-sdk';\n\n/**\n * Simple hook to force a re-render when the returned function is called\n */\nfunction useForceUpdate() {\n\tconst [, setState] = useState({});\n\treturn useCallback(() => setState({}), []);\n}\n\nexport function useBlueDot(): BlueDot {\n\tconst { mapView } = useMap();\n\n\t// Force a re-render on blue-dot state change to sync it up with react render cycle\n\t// The benefit of this is that blue-dot states like position, status, following, etc. changing will update the react component\n\tconst forceUpdate = useForceUpdate();\n\n\t// Register or retrieve the existing instance from the extension registry\n\tconst { register } = useMapViewExtension('blue-dot', {\n\t\tonRegister: () => {\n\t\t\tconst bd = new BlueDot(mapView);\n\t\t\t// when these events are emitted we force a re-render to get the latest blue-dot state\n\t\t\tbd.on('position-update', forceUpdate);\n\t\t\tbd.on('status-change', forceUpdate);\n\t\t\tbd.on('follow-change', forceUpdate);\n\t\t\tbd.on('error', forceUpdate);\n\t\t\treturn bd;\n\t\t},\n\t\tonDeregister: bd => {\n\t\t\tbd.off('position-update', forceUpdate);\n\t\t\tbd.off('status-change', forceUpdate);\n\t\t\tbd.off('follow-change', forceUpdate);\n\t\t\tbd.off('error', forceUpdate);\n\t\t\tbd.destroy();\n\t\t},\n\t});\n\tconst blueDot = register();\n\n\tif (!blueDot) {\n\t\tthrow new Error('BlueDot failed to initialize.');\n\t}\n\n\treturn blueDot;\n}\n", "import { useCallback, useEffect, useRef } from 'react';\nimport type { BlueDotEventPayloads, BlueDotEvents } from '../types';\nimport { useBlueDot } from './use-blue-dot';\n\nexport function useBlueDotEvent<T extends BlueDotEvents>(\n\teventName: T,\n\tcallback: (payload: BlueDotEventPayloads[T]) => void,\n) {\n\tconst instance = useBlueDot();\n\tconst callbackRef = useRef(callback);\n\tcallbackRef.current = callback;\n\n\tconst handleCallback = useCallback(payload => {\n\t\tcallbackRef.current(payload);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (instance == null) {\n\t\t\treturn;\n\t\t}\n\t\tinstance.on(eventName, handleCallback);\n\t\treturn () => {\n\t\t\tif (instance == null) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tinstance.off(eventName, handleCallback);\n\t\t};\n\t}, [instance, eventName, handleCallback]);\n}\n"],
+  "mappings": ";;;;;;;AAAA;;;ACAA;AAAA,SAAS,aAAa,gBAAgB;AAEtC,SAAS,QAAQ,2BAA2B;AAK5C,SAAS,iBAAiB;AACzB,QAAM,CAAC,EAAE,QAAQ,IAAI,SAAS,CAAC,CAAC;AAChC,SAAO,YAAY,MAAM,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC;AAC1C;AAHS;AAKF,SAAS,aAAsB;AACrC,QAAM,EAAE,QAAQ,IAAI,OAAO;AAI3B,QAAM,cAAc,eAAe;AAGnC,QAAM,EAAE,SAAS,IAAI,oBAAoB,YAAY;AAAA,IACpD,YAAY,6BAAM;AACjB,YAAM,KAAK,IAAI,QAAQ,OAAO;AAE9B,SAAG,GAAG,mBAAmB,WAAW;AACpC,SAAG,GAAG,iBAAiB,WAAW;AAClC,SAAG,GAAG,iBAAiB,WAAW;AAClC,SAAG,GAAG,SAAS,WAAW;AAC1B,aAAO;AAAA,IACR,GARY;AAAA,IASZ,cAAc,+BAAM;AACnB,SAAG,IAAI,mBAAmB,WAAW;AACrC,SAAG,IAAI,iBAAiB,WAAW;AACnC,SAAG,IAAI,iBAAiB,WAAW;AACnC,SAAG,IAAI,SAAS,WAAW;AAC3B,SAAG,QAAQ;AAAA,IACZ,GANc;AAAA,EAOf,CAAC;AACD,QAAM,UAAU,SAAS;AAEzB,MAAI,CAAC,SAAS;AACb,UAAM,IAAI,MAAM,+BAA+B;AAAA,EAChD;AAEA,SAAO;AACR;AAjCgB;;;ACZhB;AAAA,SAAS,eAAAA,cAAa,WAAW,cAAc;AAIxC,SAAS,gBACf,WACA,UACC;AACD,QAAM,WAAW,WAAW;AAC5B,QAAM,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AAEtB,QAAM,iBAAiBC,aAAY,aAAW;AAC7C,gBAAY,QAAQ,OAAO;AAAA,EAC5B,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACf,QAAI,YAAY,MAAM;AACrB;AAAA,IACD;AACA,aAAS,GAAG,WAAW,cAAc;AACrC,WAAO,MAAM;AACZ,UAAI,YAAY,MAAM;AACrB;AAAA,MACD;AACA,eAAS,IAAI,WAAW,cAAc;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,UAAU,WAAW,cAAc,CAAC;AACzC;AAxBgB;",
+  "names": ["useCallback", "useCallback"]
+}

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

@@ -0,0 +1,188 @@
+import type { Floor, MapView, Model } from '@mappedin/mappedin-js';
+import { Coordinate } from '@mappedin/mappedin-js';
+import type { MapViewExtension } from '@packages/internal/common/extensions';
+import { PubSub } from '@packages/internal/common/pubsub';
+import type { BlueDotEventPayloads, BlueDotState, BlueDotPositionProcessor, BlueDotPositionUpdate, BlueDotStatus, BlueDotUpdateOptions, FollowCameraOptions, FollowMode, GeolocationPositionExtended, BlueDotUpdateState } from './types';
+import type { ReadonlyDeep } from 'type-fest';
+/**
+ * Show a Blue Dot indicating the device's position on the map.
+ *
+ * @example
+ * ```ts
+ * import { show3dMap } from '@mappedin/mappedin-js';
+ * import { BlueDot } from '@mappedin/blue-dot';
+ *
+ * const mapView = await show3dMap(...);
+ *
+ * // Enable BlueDot
+ * new BlueDot(mapView).enable();
+ *
+ * // Option 1: Listen for position updates from the device
+ * mapView.BlueDot.on('position-update', (position) => {
+ *   console.log('User position:', position);
+ * });
+ *
+ * // Option 2: Update position manually
+ * new BlueDot(mapView).update({ latitude, longitude, accuracy, floorOrFloorId });
+ *
+ * ```
+ */
+export declare class BlueDot implements MapViewExtension<BlueDotState> {
+    #private;
+    /**
+     * Create a new {@link BlueDot} instance.
+     */
+    constructor(mapView: MapView);
+    /**
+     * Get the Model for the BlueDot core element.
+     */
+    get dotModel(): Model | undefined;
+    /**
+     * Get the Model for the accuracy ring.
+     */
+    get accuracyRingModel(): Model | undefined;
+    /**
+     * Get the Model for the heading cone.
+     */
+    get headingConeModel(): Model | undefined;
+    /**
+     * Whether the BlueDot is currently enabled.
+     */
+    get isEnabled(): boolean;
+    /**
+     * The current state of the BlueDot. Can be 'hidden', 'active', 'inactive', or 'disabled'.
+     * Listen for state changes using the 'status-change' event.
+     *
+     * @example
+     * mapView.BlueDot.on('status-change', ({ status }) => {
+     *   if (status === 'active') {
+     *     // BlueDot is visible and tracking
+     *   }
+     * });
+     */
+    get status(): BlueDotStatus;
+    /**
+     * Whether the BlueDot is currently following the user (camera follow mode).
+     */
+    get isFollowing(): boolean;
+    /**
+     * The direction the user is facing in degrees from north clockwise.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates/heading
+     */
+    get heading(): GeolocationPosition['coords']['heading'] | undefined;
+    /**
+     * The accuracy of the current position in metres.
+     */
+    get accuracy(): GeolocationPosition['coords']['accuracy'] | undefined;
+    /**
+     * The coordinate of the current position.
+     */
+    get coordinate(): Coordinate | undefined;
+    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}).
+     *
+     * @example Enable with default options
+     * mapView.BlueDot.enable();
+     *
+     * @example Enable with custom color and accuracy ring
+     * 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.
+     */
+    enable: (options?: BlueDotUpdateState) => void;
+    /**
+     * Disable the Blue Dot. It will be hidden and no longer update.
+     */
+    disable: () => void;
+    /**
+     * Subscribe to a BlueDot event.
+     * @param eventName The name of the event to listen for.
+     * @param fn The function to call when the event is emitted.
+     */
+    on: PubSub<BlueDotEventPayloads>['on'];
+    /**
+     * Unsubscribe from a BlueDot event.
+     * @param eventName The name of the event to unsubscribe from.
+     * @param fn The function to unsubscribe from the event.
+     */
+    off: PubSub<BlueDotEventPayloads>['off'];
+    /**
+     * Update the BlueDot state after it has been enabled.
+     * This allows overriding previously set values like colors, and other options.
+     * @param options - The options to update
+     *
+     * @example Update color and accuracy ring
+     * 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.
+     * @param watch - Whether to enable or disable the listener.
+     */
+    watchDevicePosition: (watch: boolean) => void;
+    /**
+     * Manually override some position properties of the Blue Dot.
+     * Accepts a full GeolocationPosition object or a partial {@link BlueDotPositionUpdate} object.
+     * @example Manually set the accuracy and heading
+     * ```ts
+     * api.BlueDot.update({ accuracy: 10, heading: 90 });
+     * ```
+     * @example Reset accuracy and heading to device values
+     * ```ts
+     * api.BlueDot.update({ accuracy: 'device', heading: 'device' });
+     * ```
+     */
+    update: (position: GeolocationPositionExtended | BlueDotPositionUpdate | undefined, options?: BlueDotUpdateOptions) => void;
+    /**
+     * Set the camera to follow the BlueDot in various modes. User interaction will cancel following automatically.
+     * @param mode The follow mode ('position-only', 'position-and-heading', 'position-and-path-direction', or false to disable).
+     * @param cameraOptions Optional camera options (zoom, pitch, etc.).
+     *
+     * @example
+     * mapView.BlueDot.follow('position-and-heading', { zoomLevel: 21, pitch: 45 });
+     */
+    follow: (mode: FollowMode, cameraOptions?: FollowCameraOptions) => void;
+    /**
+     * Set a position processor callback that allows intercepting and modifying device/geolocation position updates before they are applied.
+     *
+     * **Note**: This processor only applies to automatic position updates from device geolocation.
+     * Manual position updates via `update()` method bypass the processor and are applied directly.
+     *
+     * @param processor - A callback function that receives current state and incoming update. Return undefined to discard the update, or return a modified update object.
+     *
+     * @example Discard inaccurate positions
+     * ```ts
+     * blueDot.setPositionProcessor((current, incoming) => {
+     *   if (incoming.accuracy && incoming.accuracy > 50) {
+     *     return undefined; // Discard update
+     *   }
+     *   return incoming; // Accept update
+     * });
+     * ```
+     *
+     * @example Modify incoming positions
+     * ```ts
+     * blueDot.setPositionProcessor((current, incoming) => {
+     *   // Apply custom smoothing or validation logic
+     *   return {
+     *     ...incoming,
+     *     accuracy: Math.min(incoming.accuracy || 100, 10) // Cap accuracy
+     *   };
+     * });
+     * ```
+     */
+    setPositionProcessor(processor?: BlueDotPositionProcessor): void;
+    destroy: () => void;
+    private onPositionUpdate;
+    private onPositionError;
+}

package/lib/rn/constants.d.ts

@@ -0,0 +1,11 @@
+import type { BlueDotState } from './types';
+export declare const POSITION_ANIMATION_DURATION = 1000;
+export declare const SCALE_ANIMATION_DURATION = 150;
+export declare const ROTATION_ANIMATION_DURATION = 150;
+export declare const MIN_BLUEDOT_RADIUS = 0.35;
+export declare const BLUEDOT_RADIUS = 10;
+export declare const BASE_COLOR = "#2266ff";
+export declare const INACTIVE_COLOR = "#808080";
+export declare const HEADING_CONE_OPACITY = 0.7;
+export declare const ACCURACY_RING_OPACITY = 0.3;
+export declare const DEFAULT_BLUEDOT_OPTIONS: BlueDotState;