@mappedin/react-sdk 6.0.1-beta.8 → 6.1.0

package/lib/esm/index.js

@@ -1 +1,727 @@
-import{a as w,h as E,i as V,j as b}from"./chunk-NMYDM4WH.js";import"./chunk-5CLC3TYJ.js";import"./chunk-2VWRFWQ6.js";import"./chunk-VSK4OUQK.js";import"./chunk-W7UWRYFM.js";import{a as o,j as a}from"./chunk-U7HFWTFB.js";a();a();import{useContext as j,useEffect as W,useRef as H,useState as K}from"react";import{createPortal as _}from"react-dom";a();import{createContext as C,useContext as O}from"react";a();var N=class N extends Error{constructor(t){super("".concat(t," must be used within a MapView component."))}};o(N,"MapViewNullError");var m=N;var p=C({mapData:void 0,mapView:void 0});function R(){let{mapData:e,mapView:t}=O(p);if(!e||!t)throw new m("useMap");return{mapData:e,mapView:t}}o(R,"useMap");a();import{useEffect as k}from"react";function u(e,t){k(()=>{t!=null&&typeof e=="function"&&e(t)},[e,t])}o(u,"useOnLoad");var Re=o(e=>{let{mapView:t}=j(p),r=H(),[n,i]=K(null);return W(()=>{if(t==null)throw new m("Marker");return r.current=t.Markers.add(e.target,"",{...e.options,dynamicResize:!0}),i(r.current),()=>{t==null||r.current==null||t.Markers.remove(r.current)}},[t,e.target,e.options]),u(e.onLoad,n),t==null||n==null?null:_(e.children,n.contentEl,n.id)},"Marker");a();import{useContext as z,useEffect as I,useRef as U,useState as F}from"react";function Ie(e){let{mapView:t}=z(p),r=U(),[n,i]=F(void 0);return I(()=>{if(t==null)throw new m("Label");return r.current=t.Labels.add(e.target,e.text,e.options),i(r.current),()=>{t==null||r.current==null||t.Labels.remove(r.current)}},[t,e.target,e.text,e.options]),u(e.onLoad,n),null}o(Ie,"Label");a();import{useCallback as G,useContext as Y,useEffect as $}from"react";function Be(e,t){let{mapView:r}=Y(p),n=G(i=>t(i),[t]);$(()=>{if(r==null)throw new m("useEvent");return r.on(e,n),()=>{r!=null&&r.off(e,n)}},[r,e,t])}o(Be,"useEvent");a();import{useContext as q,useEffect as B,useRef as J,useState as Q}from"react";function at(e){let{mapView:t}=q(p),r=J(),[n,i]=Q(void 0);return B(()=>{if(t==null)throw new m("Path");let d=!1,f=t.Paths.add(e.coordinate,e.options);return f.then(s=>{d?t.Paths.remove(s):(r.current=s,i(s))}),()=>{d=!0,r.current?t.Paths.remove(r.current):f.then(s=>{t.Paths.remove(s)})}},[t,e.coordinate,e.options]),u(e.onLoad,n),null}o(at,"Path");a();import x,{useCallback as X,useEffect as Z,useMemo as ee,useRef as v,useState as A}from"react";var te={width:"100%",height:"100%",position:"relative"};function lt(e){let{mapData:t,options:r,style:n,fallback:i,children:d,...f}=e,s=v(!1),[c,h]=A(void 0),[y,M]=A(!0),P=v(null),L=ee(()=>r,[]),g=X(()=>{if(t&&(P!=null&&P.current)){if(c)return;V(P.current,t,L).then(S=>{h(S)}).catch(S=>{w.error("Failed to render MapView",S)}).finally(()=>{M(!1)})}},[t,P.current,L]);return Z(()=>{s.current||(s.current=!0,g())},[g]),u(e.onLoad,c),x.createElement(p.Provider,{value:{mapData:t,mapView:c}},x.createElement("div",{"data-testid":"mappedin-map",ref:P,style:{...te,...n},...f}),y?x.createElement(x.Fragment,null,i):d)}o(lt,"MapView");a();import{useContext as re,useEffect as D,useRef as ae,useState as oe}from"react";function wt(e){let{mapView:t}=re(p),[r,n]=oe(!1),i=ae(Promise.resolve());return D(()=>{if(t==null)throw new m("Navigation");let d=!1,f=o(()=>d?Promise.resolve():t.Navigation.draw(e.directions,e.options).then(()=>{d||n(!0)}),"navigationOperation");return i.current=i.current.then(f),()=>{d=!0,i.current=i.current.then(()=>{t.Navigation.clear()})}},[t,e.directions,e.options]),D(()=>{r!==!1&&typeof e.onLoad=="function"&&e.onLoad()},[e.onLoad,r]),null}o(wt,"Navigation");a();import{useContext as ne,useEffect as ie,useRef as pe,useState as me}from"react";function Et(e){let{mapView:t}=ne(p),r=pe(),[n,i]=me(void 0);return ie(()=>{if(t==null)throw new Error("MapView not initialized");return r.current=t.Shapes.add(e.geometry,e.style,e.floor),i(r.current),()=>{t==null||r.current==null||t.Shapes.remove(r.current)}},[t,e.geometry,e.style,e.floor]),u(e.onLoad,n),null}o(Et,"Shape");a();import{useContext as se,useEffect as ue,useRef as de,useState as le}from"react";function Rt(e){let{mapView:t}=se(p),r=de(),[n,i]=le(void 0);return ue(()=>{if(t==null)throw new m("Model");return r.current=t.Models.add(e.models,e.options),i(r.current),()=>{if(!(t==null||r.current==null))for(let d of r.current)t.Models.remove(d)}},[t,e.models,e.options]),u(e.onLoad,n),null}o(Rt,"Model");a();import{useCallback as fe,useEffect as ce,useMemo as Me,useRef as Pe,useState as T}from"react";function zt(e){let[t,r]=T(void 0),[n,i]=T(!0),[d,f]=T(void 0),s=Pe(0),c=Me(()=>e,[]),h=fe(()=>{let y=++s.current;i(!0),f(void 0),E(c).then(M=>{s.current===y&&r(M)}).catch(M=>{s.current===y&&(w.error("Failed to fetch MapData",M),f(M))}).finally(()=>{s.current===y&&i(!1)})},[c]);return ce(()=>{h()},[h]),{mapData:t,isLoading:n,error:d}}o(zt,"useMapData");var Gt=b;export{Ie as Label,lt as MapView,Re as Marker,Rt as Model,wt as Navigation,at as Path,Et as Shape,Gt as default,Be as useEvent,R as useMap,zt as useMapData};
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// <define:process>
+var define_process_default;
+var init_define_process = __esm({
+  "<define:process>"() {
+    define_process_default = { env: { npm_package_version: "6.1.0" } };
+  }
+});
+
+// ../../node_modules/.pnpm/fast-deep-equal@3.1.3/node_modules/fast-deep-equal/index.js
+var require_fast_deep_equal = __commonJS({
+  "../../node_modules/.pnpm/fast-deep-equal@3.1.3/node_modules/fast-deep-equal/index.js"(exports, module) {
+    "use strict";
+    init_define_process();
+    module.exports = /* @__PURE__ */ __name(function equal3(a, b) {
+      if (a === b) return true;
+      if (a && b && typeof a == "object" && typeof b == "object") {
+        if (a.constructor !== b.constructor) return false;
+        var length, i, keys;
+        if (Array.isArray(a)) {
+          length = a.length;
+          if (length != b.length) return false;
+          for (i = length; i-- !== 0; )
+            if (!equal3(a[i], b[i])) return false;
+          return true;
+        }
+        if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+        if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+        if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+        keys = Object.keys(a);
+        length = keys.length;
+        if (length !== Object.keys(b).length) return false;
+        for (i = length; i-- !== 0; )
+          if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+        for (i = length; i-- !== 0; ) {
+          var key = keys[i];
+          if (!equal3(a[key], b[key])) return false;
+        }
+        return true;
+      }
+      return a !== a && b !== b;
+    }, "equal");
+  }
+});
+
+// src/index.tsx
+init_define_process();
+
+// src/MapDataProvider.tsx
+init_define_process();
+import React, { createContext, useCallback, useMemo, useRef } from "react";
+var MapDataContext = createContext({
+  getCache: /* @__PURE__ */ __name(() => void 0, "getCache"),
+  setCache: /* @__PURE__ */ __name(() => {
+  }, "setCache")
+});
+function MapDataProvider({ mapData, children }) {
+  const cachedEntryRef = useRef(
+    mapData ? { mapData, options: {} } : void 0
+  );
+  const getCache = useCallback(() => cachedEntryRef.current, []);
+  const setCache = useCallback((entry) => {
+    cachedEntryRef.current = entry;
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      getCache,
+      setCache
+    }),
+    [getCache, setCache]
+  );
+  return /* @__PURE__ */ React.createElement(MapDataContext.Provider, { value: contextValue }, children);
+}
+__name(MapDataProvider, "MapDataProvider");
+
+// src/hooks/useMapData.tsx
+init_define_process();
+var import_fast_deep_equal2 = __toESM(require_fast_deep_equal());
+import { useCallback as useCallback2, useContext, useEffect, useRef as useRef3, useState } from "react";
+import { getMapData } from "@mappedin/mappedin-js";
+
+// ../packages/common/Mappedin.Logger.ts
+init_define_process();
+var MI_ERROR_LABEL = "[MappedinJS]";
+function createLogger(name = "", { prefix = MI_ERROR_LABEL } = {}) {
+  const label = `${prefix}${name ? `-${name}` : ""}`;
+  const rnDebug = /* @__PURE__ */ __name((type, args) => {
+    if (typeof window !== "undefined" && window.rnDebug) {
+      const processed = args.map((arg) => {
+        if (arg instanceof Error && arg.stack) {
+          return `${arg.message}
+${arg.stack}`;
+        }
+        return arg;
+      });
+      window.rnDebug(`${name} ${type}: ${processed.join(" ")}`);
+    }
+  }, "rnDebug");
+  return {
+    logState: define_process_default.env.NODE_ENV === "test" ? 3 /* SILENT */ : 0 /* LOG */,
+    log(...args) {
+      if (this.logState <= 0 /* LOG */) {
+        console.log(label, ...args);
+        rnDebug("log", args);
+      }
+    },
+    warn(...args) {
+      if (this.logState <= 1 /* WARN */) {
+        console.warn(label, ...args);
+        rnDebug("warn", args);
+      }
+    },
+    error(...args) {
+      if (this.logState <= 2 /* ERROR */) {
+        console.error(label, ...args);
+        rnDebug("error", args);
+      }
+    },
+    // It's a bit tricky to prepend [MappedinJs] to assert and time because of how the output is structured in the console, so it is left out for simplicity
+    assert(...args) {
+      console.assert(...args);
+    },
+    time(label2) {
+      console.time(label2);
+    },
+    timeEnd(label2) {
+      console.timeEnd(label2);
+    },
+    setLevel(level) {
+      if (0 /* LOG */ <= level && level <= 3 /* SILENT */) {
+        this.logState = level;
+      }
+    }
+  };
+}
+__name(createLogger, "createLogger");
+var Logger = createLogger();
+var Mappedin_Logger_default = Logger;
+
+// src/hooks/useMemoDeep.tsx
+init_define_process();
+var import_fast_deep_equal = __toESM(require_fast_deep_equal());
+import { useRef as useRef2 } from "react";
+function useMemoDeep(factory, deps) {
+  const valueRef = useRef2();
+  const depsRef = useRef2();
+  if (!(0, import_fast_deep_equal.default)(deps, depsRef.current)) {
+    valueRef.current = factory();
+    depsRef.current = deps;
+  }
+  return valueRef.current;
+}
+__name(useMemoDeep, "useMemoDeep");
+
+// src/hooks/useMapData.tsx
+function useMapData(options) {
+  const { getCache, setCache } = useContext(MapDataContext);
+  const [mapData, setMapData] = useState(void 0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(void 0);
+  const fetchIdRef = useRef3(0);
+  const memoizedOptions = useMemoDeep(
+    () => options && { ...options, analytics: { context: "reactsdk", ...options?.analytics } },
+    [options]
+  );
+  const fetchMapData = useCallback2((options2) => {
+    const fetchId = ++fetchIdRef.current;
+    setIsLoading(true);
+    setError(void 0);
+    getMapData(options2).then((fetchedMapData) => {
+      if (fetchIdRef.current === fetchId) {
+        setMapData(fetchedMapData);
+      }
+    }).catch((err) => {
+      if (fetchIdRef.current === fetchId) {
+        Mappedin_Logger_default.error("Failed to fetch MapData", err);
+        setError(err);
+      }
+    }).finally(() => {
+      if (fetchIdRef.current === fetchId) setIsLoading(false);
+    });
+  }, []);
+  useEffect(() => {
+    const cachedEntry = getCache?.();
+    if (cachedEntry != null) {
+      if (
+        // No options provided, use cached data
+        memoizedOptions == null || // Options provided and matches cached data
+        cachedEntry.mapData.mapId === memoizedOptions.mapId && (0, import_fast_deep_equal2.default)(cachedEntry.options, memoizedOptions)
+      ) {
+        setMapData(cachedEntry.mapData);
+        setIsLoading(false);
+        setError(void 0);
+        return;
+      }
+    }
+    if (!memoizedOptions) {
+      setError(new Error("useMapData requires options if not use within a MapDataProvider or MapView component."));
+      return;
+    }
+    fetchMapData(memoizedOptions);
+  }, [fetchMapData, getCache, memoizedOptions]);
+  useEffect(() => {
+    const cachedEntry = getCache?.();
+    if (mapData != null && (cachedEntry == null || cachedEntry.mapData.mapId === mapData.mapId)) {
+      setCache?.({ mapData, options: memoizedOptions || {} });
+    }
+  }, [mapData, memoizedOptions, getCache, setCache]);
+  return { mapData, isLoading, error };
+}
+__name(useMapData, "useMapData");
+
+// src/hooks/useMapDataEvent.tsx
+init_define_process();
+import { useCallback as useCallback3, useContext as useContext2, useEffect as useEffect2 } from "react";
+function useMapDataEvent(event, callback) {
+  const { getCache: getCachedMapData } = useContext2(MapDataContext);
+  const handleCallback = useCallback3((payload) => callback(payload), [callback]);
+  useEffect2(() => {
+    const mapData = getCachedMapData?.()?.mapData;
+    if (mapData == null) {
+      throw new Error("useMapDataEvent must be used within a MapDataProvider or MapView component.");
+    }
+    mapData.on(event, handleCallback);
+    return () => {
+      if (mapData == null) {
+        return;
+      }
+      mapData.off(event, handleCallback);
+    };
+  }, [getCachedMapData, event, handleCallback]);
+}
+__name(useMapDataEvent, "useMapDataEvent");
+
+// src/MapView.tsx
+init_define_process();
+import React2, {
+  useCallback as useCallback4,
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useRef as useRef4,
+  useState as useState2,
+  forwardRef,
+  useImperativeHandle,
+  createContext as createContext2
+} from "react";
+import { show3dMap } from "@mappedin/mappedin-js";
+var MapViewContext = createContext2({
+  mapView: void 0,
+  extensions: {}
+});
+var DEFAULT_STYLE = {
+  width: "100%",
+  height: "100%",
+  position: "relative"
+};
+var MapView = forwardRef((props, ref) => {
+  const { mapData, options, style, fallback, children, ...rest } = props;
+  const thisRef = useRef4({
+    extensions: {}
+    // store the extensions in the ref so we don't re-render children when they change
+  }).current;
+  const [isLoading, setIsLoading] = useState2(true);
+  const [isMounted, setIsMounted] = useState2(false);
+  const mapEl = useRef4(null);
+  const memoizedMapData = useMemo2(() => mapData, [mapData]);
+  const memoizedOptions = useMemoDeep(() => options, [options]);
+  useImperativeHandle(ref, () => thisRef.mapView);
+  const contextValue = useMemo2(() => {
+    return {
+      mapView: thisRef.mapView,
+      extensions: thisRef.extensions
+    };
+  }, [memoizedMapData, thisRef.mapView, thisRef.extensions]);
+  const cleanUpExtensions = useCallback4((extensions) => {
+    try {
+      const extensionNames = Object.keys(extensions);
+      for (const extensionName of extensionNames) {
+        const extensionEntry = extensions[extensionName];
+        if (extensionEntry) {
+          extensionEntry.onDeregister(extensionEntry.instance);
+          delete extensions[extensionName];
+        }
+      }
+    } catch (error) {
+      Mappedin_Logger_default.error("Failed to clean up extensions", error);
+    }
+    return {};
+  }, []);
+  const destroyMapView = useCallback4((mapView) => {
+    const mapViewToDestroy = mapView || thisRef.mapView;
+    try {
+      mapViewToDestroy?.destroy?.();
+    } catch (error) {
+      Mappedin_Logger_default.error("Failed to destroy MapView", error);
+    }
+    if (!mapView) {
+      thisRef.extensions = cleanUpExtensions(thisRef.extensions);
+      thisRef.mapView = void 0;
+      setIsMounted(false);
+    }
+  }, []);
+  useEffect3(() => {
+    if (!memoizedMapData || !mapEl.current) {
+      return;
+    }
+    destroyMapView();
+    let cancelled = false;
+    setIsLoading(true);
+    show3dMap(mapEl.current, memoizedMapData, memoizedOptions).then((mapView) => {
+      if (!cancelled) {
+        thisRef.mapView = mapView;
+        setIsMounted(true);
+      } else {
+        destroyMapView(mapView);
+      }
+    }).catch((err) => {
+      Mappedin_Logger_default.error("Failed to render MapView", err);
+    }).finally(() => {
+      if (!cancelled) {
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+      if (thisRef.mapView) {
+        destroyMapView();
+      }
+    };
+  }, [memoizedMapData, memoizedOptions, destroyMapView]);
+  return /* @__PURE__ */ React2.createElement(MapDataProvider, { mapData: memoizedMapData }, /* @__PURE__ */ React2.createElement(MapViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React2.createElement("div", { "data-testid": "mappedin-map", ref: mapEl, style: { ...DEFAULT_STYLE, ...style }, ...rest }), isLoading ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, fallback) : isMounted ? children : null));
+});
+
+// src/hooks/useMapViewEvent.tsx
+init_define_process();
+import { useCallback as useCallback5, useContext as useContext3, useEffect as useEffect4 } from "react";
+
+// src/errors.ts
+init_define_process();
+var MapViewNullError = class extends Error {
+  static {
+    __name(this, "MapViewNullError");
+  }
+  constructor(name) {
+    super(`${name} must be used within a MapView component.`);
+  }
+};
+
+// src/hooks/useMapViewEvent.tsx
+function useMapViewEvent(event, callback) {
+  const { mapView } = useContext3(MapViewContext);
+  const handleCallback = useCallback5((payload) => callback(payload), [callback]);
+  useEffect4(() => {
+    if (mapView == null) {
+      throw new MapViewNullError("useMapViewEvent");
+    }
+    mapView.on(event, handleCallback);
+    return () => {
+      if (mapView == null) {
+        return;
+      }
+      mapView.off(event, handleCallback);
+    };
+  }, [mapView, event, callback]);
+}
+__name(useMapViewEvent, "useMapViewEvent");
+
+// src/hooks/useMapViewExtension.tsx
+init_define_process();
+import { useCallback as useCallback6, useContext as useContext4 } from "react";
+function useMapViewExtension(name, options) {
+  const { extensions } = useContext4(MapViewContext);
+  if (!options?.onRegister || !options?.onDeregister) {
+    throw new Error("onRegister and onDeregister are required");
+  }
+  const register = useCallback6(() => {
+    const existingEntry = extensions[name];
+    let instance = existingEntry?.instance;
+    if (!instance) {
+      instance = options.onRegister();
+      extensions[name] = {
+        instance,
+        onDeregister: options.onDeregister
+      };
+    }
+    return instance;
+  }, [extensions, name, options.onRegister]);
+  const deregister = useCallback6(() => {
+    const extensionEntry = extensions[name];
+    if (extensionEntry) {
+      extensionEntry.onDeregister(extensionEntry.instance);
+      delete extensions[name];
+    }
+  }, [extensions, name, options.onDeregister]);
+  return {
+    register,
+    deregister
+  };
+}
+__name(useMapViewExtension, "useMapViewExtension");
+
+// src/Path.tsx
+init_define_process();
+import { useContext as useContext5, useEffect as useEffect6, useRef as useRef6, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle2, useState as useState3 } from "react";
+
+// src/hooks/useUpdateEffect.ts
+init_define_process();
+import { useEffect as useEffect5, useRef as useRef5 } from "react";
+function useUpdateEffect(effect, deps) {
+  const isInitialRender = useRef5(true);
+  useEffect5(() => {
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+      return;
+    }
+    return effect();
+  }, deps);
+}
+__name(useUpdateEffect, "useUpdateEffect");
+
+// src/Path.tsx
+var Path = forwardRef2((props, ref) => {
+  const { mapView } = useContext5(MapViewContext);
+  const pathRef = useRef6();
+  const memoizedOptions = useMemoDeep(() => props.options, [props.options]);
+  const [pathReady, setPathReady] = useState3(false);
+  useImperativeHandle2(ref, () => pathRef.current, [pathReady]);
+  useEffect6(() => {
+    if (mapView == null) {
+      throw new MapViewNullError("Path");
+    }
+    const path = mapView.Paths.add(props.coordinate, memoizedOptions);
+    path.animation.then(() => {
+      props.onDrawComplete?.();
+    });
+    pathRef.current = path;
+    setPathReady(true);
+    return () => {
+      if (pathRef.current) {
+        mapView.Paths.remove(pathRef.current);
+      }
+      setPathReady(false);
+    };
+  }, [mapView, props.coordinate]);
+  useUpdateEffect(() => {
+    if (pathRef.current && memoizedOptions) {
+      mapView?.updateState(pathRef.current, memoizedOptions);
+    }
+  }, [memoizedOptions]);
+  return null;
+});
+
+// src/Navigation.tsx
+init_define_process();
+import { useContext as useContext6, useEffect as useEffect7 } from "react";
+function Navigation(props) {
+  const { mapView } = useContext6(MapViewContext);
+  const memoizedOptions = useMemoDeep(() => props.options, [props.options]);
+  useEffect7(() => {
+    if (mapView == null) {
+      throw new MapViewNullError("Navigation");
+    }
+    mapView.Navigation.draw(props.directions, memoizedOptions).then(() => {
+      props.onDrawComplete?.();
+    });
+    return () => {
+      mapView.Navigation.clear();
+    };
+  }, [mapView, props.directions, memoizedOptions]);
+  return null;
+}
+__name(Navigation, "Navigation");
+
+// src/Shape.tsx
+init_define_process();
+import { useContext as useContext7, useEffect as useEffect8, useRef as useRef7, forwardRef as forwardRef3, useImperativeHandle as useImperativeHandle3, useState as useState4 } from "react";
+var Shape = forwardRef3((props, ref) => {
+  const { mapView } = useContext7(MapViewContext);
+  const shapeRef = useRef7();
+  const memoizedStyle = useMemoDeep(() => props.style, [props.style]);
+  const [shapeReady, setShapeReady] = useState4(false);
+  useImperativeHandle3(ref, () => shapeRef.current, [shapeReady]);
+  useEffect8(() => {
+    if (mapView == null) {
+      throw new Error("MapView not initialized");
+    }
+    shapeRef.current = mapView.Shapes.add(props.geometry, props.style, props.floor);
+    setShapeReady(true);
+    return () => {
+      if (mapView == null || shapeRef.current == null) {
+        return;
+      }
+      mapView.Shapes.remove(shapeRef.current);
+      setShapeReady(false);
+    };
+  }, [mapView, props.geometry, props.style, props.floor]);
+  useUpdateEffect(() => {
+    if (shapeRef.current && memoizedStyle) {
+      mapView?.updateState(shapeRef.current, memoizedStyle);
+    }
+  }, [memoizedStyle]);
+  return null;
+});
+
+// src/Model.tsx
+init_define_process();
+import { useContext as useContext8, useEffect as useEffect9, useRef as useRef8, forwardRef as forwardRef4, useImperativeHandle as useImperativeHandle4, useState as useState5 } from "react";
+var Model = forwardRef4((props, ref) => {
+  const { mapView } = useContext8(MapViewContext);
+  const modelRef = useRef8();
+  const memoizedOptions = useMemoDeep(() => props.options, [props.options]);
+  const [modelReady, setModelReady] = useState5(false);
+  useImperativeHandle4(ref, () => modelRef.current, [modelReady]);
+  useEffect9(() => {
+    if (mapView == null) {
+      throw new MapViewNullError("Model");
+    }
+    modelRef.current = mapView.Models.add(props.coordinate, props.url, memoizedOptions);
+    setModelReady(true);
+    return () => {
+      if (mapView == null || modelRef.current == null) {
+        return;
+      }
+      mapView.Models.remove(modelRef.current);
+      setModelReady(false);
+    };
+  }, [mapView, props.url]);
+  useUpdateEffect(() => {
+    if (modelRef.current) {
+      mapView?.updateState(modelRef.current, {
+        position: props.coordinate,
+        ...memoizedOptions
+      });
+    }
+  }, [props.coordinate, memoizedOptions]);
+  return null;
+});
+
+// src/hooks/useMap.tsx
+init_define_process();
+import { useContext as useContext9 } from "react";
+function useMap() {
+  const { mapView } = useContext9(MapViewContext);
+  const { getCache: getCachedMapData } = useContext9(MapDataContext);
+  if (!mapView) {
+    throw new MapViewNullError("useMap");
+  }
+  return { mapData: getCachedMapData?.()?.mapData || mapView.getMapData(), mapView };
+}
+__name(useMap, "useMap");
+
+// src/Marker.tsx
+init_define_process();
+import React3, {
+  useCallback as useCallback7,
+  useContext as useContext10,
+  useEffect as useEffect10,
+  useMemo as useMemo3,
+  useRef as useRef9,
+  forwardRef as forwardRef5,
+  useImperativeHandle as useImperativeHandle5,
+  useState as useState6
+} from "react";
+import { createPortal } from "react-dom";
+
+// ../packages/common/random-id.ts
+init_define_process();
+var SLICE_POSITIONS = [0, 4, 6, 8, 10];
+var randomId = /* @__PURE__ */ __name(() => {
+  const array = new Array(16).fill(0);
+  let seed = Math.random() * 4294967296;
+  for (let i = 0; i < array.length; i++) {
+    if (i > 0 && (i & 3) === 0) {
+      seed = Math.random() * 4294967296;
+    }
+    array[i] = seed >>> ((i & 3) << 3) & 255;
+  }
+  const hexArray = array.map((n) => n.toString(16).padStart(2, "0"));
+  hexArray[6] = "4" + hexArray[6][1];
+  hexArray[8] = ["8", "9", "a", "b"].includes(hexArray[7][0]) ? hexArray[7] : "a" + hexArray[7][1];
+  return SLICE_POSITIONS.map(
+    (v, i) => hexArray.slice(v, i === SLICE_POSITIONS.length - 1 ? void 0 : SLICE_POSITIONS[i + 1]).join("")
+  ).join("-");
+}, "randomId");
+
+// src/Marker.tsx
+var Marker = forwardRef5((props, ref) => {
+  const { mapView } = useContext10(MapViewContext);
+  const markerRef = useRef9();
+  const [markerReady, setMarkerReady] = useState6(false);
+  const memoizedOptions = useMemoDeep(() => props.options, [props.options]);
+  useImperativeHandle5(ref, () => markerRef.current, [markerReady]);
+  useEffect10(() => {
+    if (mapView == null) {
+      throw new MapViewNullError("Marker");
+    }
+    markerRef.current = mapView.Markers.add(props.target, "", memoizedOptions);
+    setMarkerReady(true);
+    return () => {
+      if (mapView == null || markerRef.current == null) {
+        return;
+      }
+      mapView.Markers.remove(markerRef.current);
+      setMarkerReady(false);
+    };
+  }, [mapView, props.target]);
+  useUpdateEffect(() => {
+    if (markerRef.current && memoizedOptions) {
+      mapView?.updateState(markerRef.current, memoizedOptions);
+    }
+  }, [memoizedOptions]);
+  if (mapView == null || markerRef.current == null) {
+    return null;
+  }
+  return createPortal(props.children, markerRef.current.contentEl, markerRef.current.id);
+});
+var AnimatedMarker = forwardRef5(
+  (props, ref) => {
+    const { mapView } = useContext10(MapViewContext);
+    const keyRef = useRef9(randomId());
+    const markerRef = useRef9();
+    const [markerReady, setMarkerReady] = useState6(false);
+    const initialTarget = useRef9(props.target);
+    useImperativeHandle5(ref, () => markerRef.current, [markerReady]);
+    const handleMarkerRef = useCallback7((marker) => {
+      markerRef.current = marker || void 0;
+      setMarkerReady(!!marker);
+    }, []);
+    useEffect10(() => {
+      if (mapView == null) {
+        throw new MapViewNullError("Marker");
+      }
+      if (markerRef.current && markerRef.current.target !== props.target) {
+        const { duration = 300, easing = "linear" } = props;
+        mapView.Markers.animateTo(markerRef.current, props.target, { duration, easing });
+      }
+      return () => {
+        setMarkerReady(false);
+      };
+    }, [mapView, props.target]);
+    const propsWithoutAnimation = useMemo3(
+      () => ({ ...props, duration: void 0, easing: void 0 }),
+      [props.duration, props.easing]
+    );
+    return /* @__PURE__ */ React3.createElement(Marker, { ...propsWithoutAnimation, key: keyRef.current, target: initialTarget.current, ref: handleMarkerRef });
+  }
+);
+
+// src/Label.tsx
+init_define_process();
+import { forwardRef as forwardRef6, useContext as useContext11, useEffect as useEffect11, useImperativeHandle as useImperativeHandle6, useRef as useRef10, useState as useState7 } from "react";
+var Label = forwardRef6((props, ref) => {
+  const { mapView } = useContext11(MapViewContext);
+  const labelRef = useRef10();
+  const [isLabelReady, setIsLabelReady] = useState7(false);
+  const memoizedOptions = useMemoDeep(() => props.options, [props.options]);
+  useImperativeHandle6(ref, () => labelRef.current, [isLabelReady]);
+  useEffect11(() => {
+    if (mapView == null) {
+      throw new MapViewNullError("Label");
+    }
+    labelRef.current = mapView.Labels.add(props.target, props.text, memoizedOptions);
+    setIsLabelReady(true);
+    return () => {
+      if (mapView == null || labelRef.current == null) {
+        return;
+      }
+      mapView.Labels.remove(labelRef.current);
+      setIsLabelReady(false);
+    };
+  }, [mapView, props.target]);
+  useUpdateEffect(() => {
+    if (labelRef.current) {
+      mapView?.updateState(labelRef.current, {
+        text: props.text,
+        ...memoizedOptions
+      });
+    }
+  }, [props.text, memoizedOptions]);
+  return null;
+});
+export {
+  AnimatedMarker,
+  Label,
+  MapDataProvider,
+  MapView,
+  Marker,
+  Model,
+  Navigation,
+  Path,
+  Shape,
+  useMap,
+  useMapData,
+  useMapDataEvent,
+  useMapViewEvent,
+  useMapViewExtension
+};
+//# sourceMappingURL=index.js.map