react-three-map 1.0.0-next.0 → 1.0.0-next.1

package/dist/es/main7.mjs

@@ -1,5 +1,5 @@
 import { MathUtils } from "three";
-import { earthRadius } from "./main24.mjs";
+import { earthRadius } from "./main14.mjs";
 function vector3ToCoords(position, origin) {
   const [x, y, z] = position;
   const latitude = origin.latitude + -z / earthRadius * MathUtils.RAD2DEG;

package/dist/es/main8.mjs

@@ -1,93 +1,26 @@
-import * as React from "react";
-import { useContext, useState, useRef, useEffect, useImperativeHandle, useMemo } from "react";
-import { MountedMapsContext } from "./main17.mjs";
-import Mapbox from "./main33.mjs";
-import createRef from "./main34.mjs";
-import useIsomorphicLayoutEffect from "./main35.mjs";
-import setGlobals from "./main36.mjs";
-const MapContext = React.createContext(null);
-function _Map(props, ref) {
-  const mountedMapsContext = useContext(MountedMapsContext);
-  const [mapInstance, setMapInstance] = useState(null);
-  const containerRef = useRef();
-  const { current: contextValue } = useRef({ mapLib: null, map: null });
-  useEffect(() => {
-    const mapLib = props.mapLib;
-    let isMounted = true;
-    let mapbox;
-    Promise.resolve(mapLib || import("mapbox-gl")).then((module) => {
-      if (!isMounted) {
-        return;
-      }
-      if (!module) {
-        throw new Error("Invalid mapLib");
-      }
-      const mapboxgl = "Map" in module ? module : module.default;
-      if (!mapboxgl.Map) {
-        throw new Error("Invalid mapLib");
-      }
-      setGlobals(mapboxgl, props);
-      if (!mapboxgl.supported || mapboxgl.supported(props)) {
-        if (props.reuseMaps) {
-          mapbox = Mapbox.reuse(props, containerRef.current);
-        }
-        if (!mapbox) {
-          mapbox = new Mapbox(mapboxgl.Map, props, containerRef.current);
-        }
-        contextValue.map = createRef(mapbox);
-        contextValue.mapLib = mapboxgl;
-        setMapInstance(mapbox);
-        mountedMapsContext == null ? void 0 : mountedMapsContext.onMapMount(contextValue.map, props.id);
-      } else {
-        throw new Error("Map is not supported by this browser");
-      }
-    }).catch((error) => {
-      const { onError } = props;
-      if (onError) {
-        onError({
-          type: "error",
-          target: null,
-          error
-        });
-      } else {
-        console.error(error);
-      }
-    });
-    return () => {
-      isMounted = false;
-      if (mapbox) {
-        mountedMapsContext == null ? void 0 : mountedMapsContext.onMapUnmount(props.id);
-        if (props.reuseMaps) {
-          mapbox.recycle();
-        } else {
-          mapbox.destroy();
-        }
-      }
-    };
-  }, []);
-  useIsomorphicLayoutEffect(() => {
-    if (mapInstance) {
-      mapInstance.setProps(props);
-    }
+import { useCoordsToMatrix } from "./main12.mjs";
+import { useRender } from "./main16.mjs";
+import { useRoot } from "./main17.mjs";
+function useCanvasInLayer(props, fromLngLat, map) {
+  const { latitude, longitude, altitude, frameloop } = props;
+  const origin = useCoordsToMatrix({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat
   });
-  useImperativeHandle(ref, () => contextValue.map, [mapInstance]);
-  const style = useMemo(() => ({
-    position: "relative",
-    width: "100%",
-    height: "100%",
-    ...props.style
-  }), [props.style]);
-  const CHILD_CONTAINER_STYLE = {
-    height: "100%"
+  const { onRemove, useThree, r3m } = useRoot(fromLngLat, map, props);
+  const render = useRender({ origin, frameloop, useThree, map, r3m });
+  return {
+    id: props.id,
+    beforeId: props.beforeId,
+    onRemove,
+    render,
+    type: "custom",
+    renderingMode: "3d"
   };
-  return React.createElement("div", { id: props.id, ref: containerRef, style }, mapInstance && React.createElement(
-    MapContext.Provider,
-    { value: contextValue },
-    React.createElement("div", { "mapboxgl-children": "", style: CHILD_CONTAINER_STYLE }, props.children)
-  ));
 }
-React.forwardRef(_Map);
 export {
-  MapContext
+  useCanvasInLayer
 };
 //# sourceMappingURL=main8.mjs.map

package/dist/es/main8.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main8.mjs","sources":["../../node_modules/@vis.gl/react-mapbox/dist/components/map.js"],"sourcesContent":["import * as React from 'react';\nimport { useState, useRef, useEffect, useContext, useMemo, useImperativeHandle } from 'react';\nimport { MountedMapsContext } from \"./use-map.js\";\nimport Mapbox from \"../mapbox/mapbox.js\";\nimport createRef from \"../mapbox/create-ref.js\";\nimport useIsomorphicLayoutEffect from \"../utils/use-isomorphic-layout-effect.js\";\nimport setGlobals from \"../utils/set-globals.js\";\nexport const MapContext = React.createContext(null);\nfunction _Map(props, ref) {\n    const mountedMapsContext = useContext(MountedMapsContext);\n    const [mapInstance, setMapInstance] = useState(null);\n    const containerRef = useRef();\n    const { current: contextValue } = useRef({ mapLib: null, map: null });\n    useEffect(() => {\n        const mapLib = props.mapLib;\n        let isMounted = true;\n        let mapbox;\n        Promise.resolve(mapLib || import('mapbox-gl'))\n            .then((module) => {\n            if (!isMounted) {\n                return;\n            }\n            if (!module) {\n                throw new Error('Invalid mapLib');\n            }\n            const mapboxgl = 'Map' in module ? module : module.default;\n            if (!mapboxgl.Map) {\n                throw new Error('Invalid mapLib');\n            }\n            // workerUrl & workerClass may change the result of supported()\n            // https://github.com/visgl/react-map-gl/discussions/2027\n            setGlobals(mapboxgl, props);\n            if (!mapboxgl.supported || mapboxgl.supported(props)) {\n                if (props.reuseMaps) {\n                    mapbox = Mapbox.reuse(props, containerRef.current);\n                }\n                if (!mapbox) {\n                    mapbox = new Mapbox(mapboxgl.Map, props, containerRef.current);\n                }\n                contextValue.map = createRef(mapbox);\n                contextValue.mapLib = mapboxgl;\n                setMapInstance(mapbox);\n                mountedMapsContext?.onMapMount(contextValue.map, props.id);\n            }\n            else {\n                throw new Error('Map is not supported by this browser');\n            }\n        })\n            .catch(error => {\n            const { onError } = props;\n            if (onError) {\n                onError({\n                    type: 'error',\n                    target: null,\n                    error\n                });\n            }\n            else {\n                console.error(error); // eslint-disable-line\n            }\n        });\n        return () => {\n            isMounted = false;\n            if (mapbox) {\n                mountedMapsContext?.onMapUnmount(props.id);\n                if (props.reuseMaps) {\n                    mapbox.recycle();\n                }\n                else {\n                    mapbox.destroy();\n                }\n            }\n        };\n    }, []);\n    useIsomorphicLayoutEffect(() => {\n        if (mapInstance) {\n            mapInstance.setProps(props);\n        }\n    });\n    useImperativeHandle(ref, () => contextValue.map, [mapInstance]);\n    const style = useMemo(() => ({\n        position: 'relative',\n        width: '100%',\n        height: '100%',\n        ...props.style\n    }), [props.style]);\n    const CHILD_CONTAINER_STYLE = {\n        height: '100%'\n    };\n    return (React.createElement(\"div\", { id: props.id, ref: containerRef, style: style }, mapInstance && (React.createElement(MapContext.Provider, { value: contextValue },\n        React.createElement(\"div\", { \"mapboxgl-children\": \"\", style: CHILD_CONTAINER_STYLE }, props.children)))));\n}\nexport const Map = React.forwardRef(_Map);\n//# sourceMappingURL=map.js.map"],"names":[],"mappings":";;;;;;;AAOY,MAAC,aAAa,MAAM,cAAc,IAAI;AAClD,SAAS,KAAK,OAAO,KAAK;AACtB,QAAM,qBAAqB,WAAW,kBAAkB;AACxD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AACnD,QAAM,eAAe;AACrB,QAAM,EAAE,SAAS,aAAY,IAAK,OAAO,EAAE,QAAQ,MAAM,KAAK,KAAI,CAAE;AACpE,YAAU,MAAM;AACZ,UAAM,SAAS,MAAM;AACrB,QAAI,YAAY;AAChB,QAAI;AACJ,YAAQ,QAAQ,UAAU,OAAO,WAAW,CAAC,EACxC,KAAK,CAAC,WAAW;AAClB,UAAI,CAAC,WAAW;AACZ;AAAA,MACH;AACD,UAAI,CAAC,QAAQ;AACT,cAAM,IAAI,MAAM,gBAAgB;AAAA,MACnC;AACD,YAAM,WAAW,SAAS,SAAS,SAAS,OAAO;AACnD,UAAI,CAAC,SAAS,KAAK;AACf,cAAM,IAAI,MAAM,gBAAgB;AAAA,MACnC;AAGD,iBAAW,UAAU,KAAK;AAC1B,UAAI,CAAC,SAAS,aAAa,SAAS,UAAU,KAAK,GAAG;AAClD,YAAI,MAAM,WAAW;AACjB,mBAAS,OAAO,MAAM,OAAO,aAAa,OAAO;AAAA,QACpD;AACD,YAAI,CAAC,QAAQ;AACT,mBAAS,IAAI,OAAO,SAAS,KAAK,OAAO,aAAa,OAAO;AAAA,QAChE;AACD,qBAAa,MAAM,UAAU,MAAM;AACnC,qBAAa,SAAS;AACtB,uBAAe,MAAM;AACrB,iEAAoB,WAAW,aAAa,KAAK,MAAM;AAAA,MAC1D,OACI;AACD,cAAM,IAAI,MAAM,sCAAsC;AAAA,MACzD;AAAA,IACb,CAAS,EACI,MAAM,WAAS;AAChB,YAAM,EAAE,QAAS,IAAG;AACpB,UAAI,SAAS;AACT,gBAAQ;AAAA,UACJ,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,QACpB,CAAiB;AAAA,MACJ,OACI;AACD,gBAAQ,MAAM,KAAK;AAAA,MACtB;AAAA,IACb,CAAS;AACD,WAAO,MAAM;AACT,kBAAY;AACZ,UAAI,QAAQ;AACR,iEAAoB,aAAa,MAAM;AACvC,YAAI,MAAM,WAAW;AACjB,iBAAO,QAAO;AAAA,QACjB,OACI;AACD,iBAAO,QAAO;AAAA,QACjB;AAAA,MACJ;AAAA,IACb;AAAA,EACK,GAAE,CAAE,CAAA;AACL,4BAA0B,MAAM;AAC5B,QAAI,aAAa;AACb,kBAAY,SAAS,KAAK;AAAA,IAC7B;AAAA,EACT,CAAK;AACD,sBAAoB,KAAK,MAAM,aAAa,KAAK,CAAC,WAAW,CAAC;AAC9D,QAAM,QAAQ,QAAQ,OAAO;AAAA,IACzB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAG,MAAM;AAAA,EACZ,IAAG,CAAC,MAAM,KAAK,CAAC;AACjB,QAAM,wBAAwB;AAAA,IAC1B,QAAQ;AAAA,EAChB;AACI,SAAQ,MAAM,cAAc,OAAO,EAAE,IAAI,MAAM,IAAI,KAAK,cAAc,MAAc,GAAE,eAAgB,MAAM;AAAA,IAAc,WAAW;AAAA,IAAU,EAAE,OAAO,aAAc;AAAA,IAClK,MAAM,cAAc,OAAO,EAAE,qBAAqB,IAAI,OAAO,sBAAuB,GAAE,MAAM,QAAQ;AAAA,EAAC,CAAE;AAC/G;AACmB,MAAM,WAAW,IAAI;","x_google_ignoreList":[0]}
+{"version":3,"file":"main8.mjs","sources":["../../src/core/canvas-in-layer/use-canvas-in-layer.tsx"],"sourcesContent":["import { CanvasProps } from \"../../api/canvas-props\";\nimport { FromLngLat, MapInstance } from \"../generic-map\";\nimport { useCoordsToMatrix } from \"../use-coords-to-matrix\";\nimport { useRender } from \"./use-render\";\nimport { useRoot } from \"./use-root\";\n\n/** get all the properties that you need to render as a map `<Layer>` */\nexport function useCanvasInLayer(props: CanvasProps,fromLngLat: FromLngLat, map: MapInstance) {\n\n  const {latitude, longitude, altitude, frameloop } = props;\n\n    const origin = useCoordsToMatrix({\n      latitude, longitude, altitude, fromLngLat,\n    });\n\n    const { onRemove, useThree, r3m } = useRoot(fromLngLat, map, props);\n  \n    const render = useRender({origin, frameloop, useThree, map, r3m});\n  \n    return {\n      id: props.id,\n      beforeId: props.beforeId,\n      onRemove,\n      render,\n      type: 'custom',\n      renderingMode: '3d'\n    } as const\n\n}"],"names":[],"mappings":";;;AAOgB,SAAA,iBAAiB,OAAmB,YAAwB,KAAkB;AAE5F,QAAM,EAAC,UAAU,WAAW,UAAU,cAAc;AAElD,QAAM,SAAS,kBAAkB;AAAA,IAC/B;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAEK,QAAA,EAAE,UAAU,UAAU,IAAA,IAAQ,QAAQ,YAAY,KAAK,KAAK;AAE5D,QAAA,SAAS,UAAU,EAAC,QAAQ,WAAW,UAAU,KAAK,KAAI;AAEzD,SAAA;AAAA,IACL,IAAI,MAAM;AAAA,IACV,UAAU,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,eAAe;AAAA,EAAA;AAGrB;"}

package/dist/es/main9.mjs

@@ -1,86 +1,30 @@
-import * as React from "react";
-import { memo, forwardRef, useContext, useRef, useMemo, useEffect, useImperativeHandle } from "react";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { memo, useState, useEffect } from "react";
 import { createPortal } from "react-dom";
-import { applyReactStyle } from "./main37.mjs";
-import { MapContext } from "./main8.mjs";
-import { arePointsEqual } from "./main38.mjs";
-memo(forwardRef((props, ref) => {
-  const { map, mapLib } = useContext(MapContext);
-  const thisRef = useRef({ props });
-  thisRef.current.props = props;
-  const marker = useMemo(() => {
-    let hasChildren = false;
-    React.Children.forEach(props.children, (el) => {
-      if (el) {
-        hasChildren = true;
-      }
-    });
-    const options = {
-      ...props,
-      element: hasChildren ? document.createElement("div") : null
-    };
-    const mk = new mapLib.Marker(options);
-    mk.setLngLat([props.longitude, props.latitude]);
-    mk.getElement().addEventListener("click", (e) => {
-      var _a, _b;
-      (_b = (_a = thisRef.current.props).onClick) == null ? void 0 : _b.call(_a, {
-        type: "click",
-        target: mk,
-        originalEvent: e
-      });
-    });
-    mk.on("dragstart", (e) => {
-      var _a, _b;
-      const evt = e;
-      evt.lngLat = marker.getLngLat();
-      (_b = (_a = thisRef.current.props).onDragStart) == null ? void 0 : _b.call(_a, evt);
-    });
-    mk.on("drag", (e) => {
-      var _a, _b;
-      const evt = e;
-      evt.lngLat = marker.getLngLat();
-      (_b = (_a = thisRef.current.props).onDrag) == null ? void 0 : _b.call(_a, evt);
-    });
-    mk.on("dragend", (e) => {
-      var _a, _b;
-      const evt = e;
-      evt.lngLat = marker.getLngLat();
-      (_b = (_a = thisRef.current.props).onDragEnd) == null ? void 0 : _b.call(_a, evt);
-    });
-    return mk;
-  }, []);
+import { CanvasPortal } from "./main18.mjs";
+const InitCanvasFC = memo((props) => {
+  const canvas = props.map.getCanvas();
+  const [el] = useState(() => {
+    const el2 = document.createElement("div");
+    el2.style.position = "absolute";
+    el2.style.top = "0";
+    el2.style.bottom = "0";
+    el2.style.left = "0";
+    el2.style.right = "0";
+    el2.style.pointerEvents = "none";
+    return el2;
+  });
   useEffect(() => {
-    marker.addTo(map.getMap());
+    const parent = canvas.parentElement;
+    parent.appendChild(el);
     return () => {
-      marker.remove();
+      parent.removeChild(el);
     };
   }, []);
-  const { longitude, latitude, offset, style, draggable = false, popup = null, rotation = 0, rotationAlignment = "auto", pitchAlignment = "auto" } = props;
-  useEffect(() => {
-    applyReactStyle(marker.getElement(), style);
-  }, [style]);
-  useImperativeHandle(ref, () => marker, []);
-  if (marker.getLngLat().lng !== longitude || marker.getLngLat().lat !== latitude) {
-    marker.setLngLat([longitude, latitude]);
-  }
-  if (offset && !arePointsEqual(marker.getOffset(), offset)) {
-    marker.setOffset(offset);
-  }
-  if (marker.isDraggable() !== draggable) {
-    marker.setDraggable(draggable);
-  }
-  if (marker.getRotation() !== rotation) {
-    marker.setRotation(rotation);
-  }
-  if (marker.getRotationAlignment() !== rotationAlignment) {
-    marker.setRotationAlignment(rotationAlignment);
-  }
-  if (marker.getPitchAlignment() !== pitchAlignment) {
-    marker.setPitchAlignment(pitchAlignment);
-  }
-  if (marker.getPopup() !== popup) {
-    marker.setPopup(popup);
-  }
-  return createPortal(props.children, marker.getElement());
-}));
+  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(/* @__PURE__ */ jsx(CanvasPortal, { ...props }), el) });
+});
+InitCanvasFC.displayName = "InitCanvasFC";
+export {
+  InitCanvasFC
+};
 //# sourceMappingURL=main9.mjs.map

package/dist/es/main9.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main9.mjs","sources":["../../node_modules/@vis.gl/react-mapbox/dist/components/marker.js"],"sourcesContent":["/* global document */\nimport * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { useImperativeHandle, useEffect, useMemo, useRef, useContext, forwardRef, memo } from 'react';\nimport { applyReactStyle } from \"../utils/apply-react-style.js\";\nimport { MapContext } from \"./map.js\";\nimport { arePointsEqual } from \"../utils/deep-equal.js\";\n/* eslint-disable complexity,max-statements */\nexport const Marker = memo(forwardRef((props, ref) => {\n    const { map, mapLib } = useContext(MapContext);\n    const thisRef = useRef({ props });\n    thisRef.current.props = props;\n    const marker = useMemo(() => {\n        let hasChildren = false;\n        React.Children.forEach(props.children, el => {\n            if (el) {\n                hasChildren = true;\n            }\n        });\n        const options = {\n            ...props,\n            element: hasChildren ? document.createElement('div') : null\n        };\n        const mk = new mapLib.Marker(options);\n        mk.setLngLat([props.longitude, props.latitude]);\n        mk.getElement().addEventListener('click', (e) => {\n            thisRef.current.props.onClick?.({\n                type: 'click',\n                target: mk,\n                originalEvent: e\n            });\n        });\n        mk.on('dragstart', e => {\n            const evt = e;\n            evt.lngLat = marker.getLngLat();\n            thisRef.current.props.onDragStart?.(evt);\n        });\n        mk.on('drag', e => {\n            const evt = e;\n            evt.lngLat = marker.getLngLat();\n            thisRef.current.props.onDrag?.(evt);\n        });\n        mk.on('dragend', e => {\n            const evt = e;\n            evt.lngLat = marker.getLngLat();\n            thisRef.current.props.onDragEnd?.(evt);\n        });\n        return mk;\n    }, []);\n    useEffect(() => {\n        marker.addTo(map.getMap());\n        return () => {\n            marker.remove();\n        };\n    }, []);\n    const { longitude, latitude, offset, style, draggable = false, popup = null, rotation = 0, rotationAlignment = 'auto', pitchAlignment = 'auto' } = props;\n    useEffect(() => {\n        applyReactStyle(marker.getElement(), style);\n    }, [style]);\n    useImperativeHandle(ref, () => marker, []);\n    if (marker.getLngLat().lng !== longitude || marker.getLngLat().lat !== latitude) {\n        marker.setLngLat([longitude, latitude]);\n    }\n    if (offset && !arePointsEqual(marker.getOffset(), offset)) {\n        marker.setOffset(offset);\n    }\n    if (marker.isDraggable() !== draggable) {\n        marker.setDraggable(draggable);\n    }\n    if (marker.getRotation() !== rotation) {\n        marker.setRotation(rotation);\n    }\n    if (marker.getRotationAlignment() !== rotationAlignment) {\n        marker.setRotationAlignment(rotationAlignment);\n    }\n    if (marker.getPitchAlignment() !== pitchAlignment) {\n        marker.setPitchAlignment(pitchAlignment);\n    }\n    if (marker.getPopup() !== popup) {\n        marker.setPopup(popup);\n    }\n    return createPortal(props.children, marker.getElement());\n}));\n//# sourceMappingURL=marker.js.map"],"names":[],"mappings":";;;;;;AAQsB,KAAK,WAAW,CAAC,OAAO,QAAQ;AAClD,QAAM,EAAE,KAAK,OAAQ,IAAG,WAAW,UAAU;AAC7C,QAAM,UAAU,OAAO,EAAE,MAAO,CAAA;AAChC,UAAQ,QAAQ,QAAQ;AACxB,QAAM,SAAS,QAAQ,MAAM;AACzB,QAAI,cAAc;AAClB,UAAM,SAAS,QAAQ,MAAM,UAAU,QAAM;AACzC,UAAI,IAAI;AACJ,sBAAc;AAAA,MACjB;AAAA,IACb,CAAS;AACD,UAAM,UAAU;AAAA,MACZ,GAAG;AAAA,MACH,SAAS,cAAc,SAAS,cAAc,KAAK,IAAI;AAAA,IACnE;AACQ,UAAM,KAAK,IAAI,OAAO,OAAO,OAAO;AACpC,OAAG,UAAU,CAAC,MAAM,WAAW,MAAM,QAAQ,CAAC;AAC9C,OAAG,WAAY,EAAC,iBAAiB,SAAS,CAAC,MAAM;;AAC7C,0BAAQ,QAAQ,OAAM,YAAtB,4BAAgC;AAAA,QAC5B,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,eAAe;AAAA,MAC/B;AAAA,IACA,CAAS;AACD,OAAG,GAAG,aAAa,OAAK;;AACpB,YAAM,MAAM;AACZ,UAAI,SAAS,OAAO;AACpB,0BAAQ,QAAQ,OAAM,gBAAtB,4BAAoC;AAAA,IAChD,CAAS;AACD,OAAG,GAAG,QAAQ,OAAK;;AACf,YAAM,MAAM;AACZ,UAAI,SAAS,OAAO;AACpB,0BAAQ,QAAQ,OAAM,WAAtB,4BAA+B;AAAA,IAC3C,CAAS;AACD,OAAG,GAAG,WAAW,OAAK;;AAClB,YAAM,MAAM;AACZ,UAAI,SAAS,OAAO;AACpB,0BAAQ,QAAQ,OAAM,cAAtB,4BAAkC;AAAA,IAC9C,CAAS;AACD,WAAO;AAAA,EACV,GAAE,CAAE,CAAA;AACL,YAAU,MAAM;AACZ,WAAO,MAAM,IAAI,OAAQ,CAAA;AACzB,WAAO,MAAM;AACT,aAAO,OAAM;AAAA,IACzB;AAAA,EACK,GAAE,CAAE,CAAA;AACL,QAAM,EAAE,WAAW,UAAU,QAAQ,OAAO,YAAY,OAAO,QAAQ,MAAM,WAAW,GAAG,oBAAoB,QAAQ,iBAAiB,OAAQ,IAAG;AACnJ,YAAU,MAAM;AACZ,oBAAgB,OAAO,WAAY,GAAE,KAAK;AAAA,EAClD,GAAO,CAAC,KAAK,CAAC;AACV,sBAAoB,KAAK,MAAM,QAAQ,CAAE,CAAA;AACzC,MAAI,OAAO,UAAW,EAAC,QAAQ,aAAa,OAAO,UAAS,EAAG,QAAQ,UAAU;AAC7E,WAAO,UAAU,CAAC,WAAW,QAAQ,CAAC;AAAA,EACzC;AACD,MAAI,UAAU,CAAC,eAAe,OAAO,UAAS,GAAI,MAAM,GAAG;AACvD,WAAO,UAAU,MAAM;AAAA,EAC1B;AACD,MAAI,OAAO,YAAa,MAAK,WAAW;AACpC,WAAO,aAAa,SAAS;AAAA,EAChC;AACD,MAAI,OAAO,YAAa,MAAK,UAAU;AACnC,WAAO,YAAY,QAAQ;AAAA,EAC9B;AACD,MAAI,OAAO,qBAAsB,MAAK,mBAAmB;AACrD,WAAO,qBAAqB,iBAAiB;AAAA,EAChD;AACD,MAAI,OAAO,kBAAmB,MAAK,gBAAgB;AAC/C,WAAO,kBAAkB,cAAc;AAAA,EAC1C;AACD,MAAI,OAAO,SAAU,MAAK,OAAO;AAC7B,WAAO,SAAS,KAAK;AAAA,EACxB;AACD,SAAO,aAAa,MAAM,UAAU,OAAO,WAAY,CAAA;AAC3D,CAAC,CAAC;","x_google_ignoreList":[0]}
+{"version":3,"file":"main9.mjs","sources":["../../src/core/canvas-overlay/init-canvas-fc.tsx"],"sourcesContent":["import { memo, useEffect, useState } from \"react\";\nimport { createPortal } from 'react-dom';\nimport { Matrix4Tuple } from \"three\";\nimport { CanvasProps } from \"../../api/canvas-props\";\nimport { FromLngLat, MapInstance } from \"../generic-map\";\nimport { CanvasPortal } from \"./canvas-portal\";\n\ninterface InitCanvasFCProps extends CanvasProps {\n  map: MapInstance,\n  setOnRender: (callback: () => (mx: Matrix4Tuple) => void) => void,\n  frameloop?: 'always' | 'demand',\n  fromLngLat: FromLngLat,\n}\nexport const InitCanvasFC = memo<InitCanvasFCProps>((props) => {\n  const canvas = props.map.getCanvas() // eslint-disable-line @typescript-eslint/no-non-null-assertion\n\n  const [el] = useState(() => {\n    const el = document.createElement('div');\n    el.style.position = 'absolute';\n    el.style.top = '0';\n    el.style.bottom = '0';\n    el.style.left = '0';\n    el.style.right = '0';\n    el.style.pointerEvents = 'none';\n    return el\n  })\n\n  useEffect(() => {\n    const parent = canvas.parentElement!; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n    parent.appendChild(el);\n    return () => {\n      parent.removeChild(el);\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n  return <>\n    {createPortal((\n      <CanvasPortal {...props} />\n    ), el)}\n  </>\n})\nInitCanvasFC.displayName = 'InitCanvasFC';\n"],"names":["el"],"mappings":";;;;AAaa,MAAA,eAAe,KAAwB,CAAC,UAAU;AACvD,QAAA,SAAS,MAAM,IAAI,UAAU;AAEnC,QAAM,CAAC,EAAE,IAAI,SAAS,MAAM;AACpBA,UAAAA,MAAK,SAAS,cAAc,KAAK;AACvCA,QAAG,MAAM,WAAW;AACpBA,QAAG,MAAM,MAAM;AACfA,QAAG,MAAM,SAAS;AAClBA,QAAG,MAAM,OAAO;AAChBA,QAAG,MAAM,QAAQ;AACjBA,QAAG,MAAM,gBAAgB;AAClBA,WAAAA;AAAAA,EAAA,CACR;AAED,YAAU,MAAM;AACd,UAAM,SAAS,OAAO;AACtB,WAAO,YAAY,EAAE;AACrB,WAAO,MAAM;AACX,aAAO,YAAY,EAAE;AAAA,IAAA;AAAA,EAEzB,GAAG,CAAE,CAAA;AACE,SAAA,oBAAA,UAAA,EACJ,uBACE,oBAAA,cAAA,EAAc,GAAG,MAAO,CAAA,GACxB,EAAE,EACP,CAAA;AACF,CAAC;AACD,aAAa,cAAc;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-map",
-  "version": "1.0.0-next.0",
+  "version": "1.0.0-next.1",
   "description": "Use react-three-fiber inside MapLibre and Mapbox",
   "main": "dist/cjs/main.js",
   "module": "dist/es/main.mjs",

package/stories/package.json

@@ -16,7 +16,7 @@
     "leva": "^0.9.35",
     "luxon": "^3.4.4",
     "mapbox-gl": "^3.9.4",
-    "maplibre-gl": "^5.1.0",
+    "maplibre-gl": "^4.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^8.0.1",

package/stories/yarn.lock

@@ -821,16 +821,16 @@
     rw "^1.3.3"
     sort-object "^3.0.3"
 
-"@maplibre/maplibre-gl-style-spec@^23.1.0":
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-23.1.0.tgz#ad59731b0547ee0986ba4ccff699894dd60f0650"
-  integrity sha512-R6/ihEuC5KRexmKIYkWqUv84Gm+/QwsOUgHyt1yy2XqCdGdLvlBWVWIIeTZWN4NGdwmY6xDzdSGU2R9oBLNg2w==
+"@maplibre/maplibre-gl-style-spec@^20.3.1":
+  version "20.4.0"
+  resolved "https://registry.yarnpkg.com/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.4.0.tgz#408339e051fb51e022b40af2235e0beb037937ea"
+  integrity sha512-AzBy3095fTFPjDjmWpR2w6HVRAZJ6hQZUCwk5Plz6EyfnfuQW1odeW5i2Ai47Y6TBA2hQnC+azscjBSALpaWgw==
   dependencies:
     "@mapbox/jsonlint-lines-primitives" "~2.0.2"
     "@mapbox/unitbezier" "^0.0.1"
     json-stringify-pretty-compact "^4.0.0"
     minimist "^1.2.8"
-    quickselect "^3.0.0"
+    quickselect "^2.0.0"
     rw "^1.3.3"
     tinyqueue "^3.0.0"
 
@@ -1452,7 +1452,7 @@
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
   integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==
 
-"@types/geojson@^7946.0.15", "@types/geojson@^7946.0.16":
+"@types/geojson@^7946.0.14", "@types/geojson@^7946.0.15":
   version "7946.0.16"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.16.tgz#8ebe53d69efada7044454e3305c19017d97ced2a"
   integrity sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==
@@ -2252,7 +2252,7 @@ draco3d@^1.4.1:
   resolved "https://registry.yarnpkg.com/draco3d/-/draco3d-1.5.6.tgz#0d570a9792e3a3a9fafbfea065b692940441c626"
   integrity sha512-+3NaRjWktb5r61ZFoDejlykPEFKT5N/LkbXsaddlw6xNSXBanUYpFc2AXXpbJDilPHazcSreU/DpQIaxfX0NfQ==
 
-earcut@^3.0.0, earcut@^3.0.1:
+earcut@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/earcut/-/earcut-3.0.1.tgz#f60b3f671c5657cca9d3e131c5527c5dde00ef38"
   integrity sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw==
@@ -3218,10 +3218,10 @@ mapbox-gl@^3.9.4:
     tinyqueue "^3.0.0"
     vt-pbf "^3.1.3"
 
-maplibre-gl@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-5.1.0.tgz#201459a840519033147ff054cdb1ab5539a34d2d"
-  integrity sha512-6lbf7qAnqAVm1T/vJBMmRtP+g8G/O/Z52IBtWX31SbFj7sEdlrk4YugxJen8IdV/pFjLFnDOw7HiHZl5nYdVjg==
+maplibre-gl@^4.7.1:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-4.7.1.tgz#06a524438ee2aafbe8bcd91002a4e01468ea5486"
+  integrity sha512-lgL7XpIwsgICiL82ITplfS7IGwrB1OJIw/pCvprDp2dhmSSEBgmPzYRvwYYYvJGJD7fxUv1Tvpih4nZ6VrLuaA==
   dependencies:
     "@mapbox/geojson-rewind" "^0.5.2"
     "@mapbox/jsonlint-lines-primitives" "^2.0.2"
@@ -3230,14 +3230,14 @@ maplibre-gl@^5.1.0:
     "@mapbox/unitbezier" "^0.0.1"
     "@mapbox/vector-tile" "^1.3.1"
     "@mapbox/whoots-js" "^3.1.0"
-    "@maplibre/maplibre-gl-style-spec" "^23.1.0"
-    "@types/geojson" "^7946.0.16"
+    "@maplibre/maplibre-gl-style-spec" "^20.3.1"
+    "@types/geojson" "^7946.0.14"
     "@types/geojson-vt" "3.2.5"
     "@types/mapbox__point-geometry" "^0.1.4"
     "@types/mapbox__vector-tile" "^1.3.4"
     "@types/pbf" "^3.0.5"
     "@types/supercluster" "^7.1.3"
-    earcut "^3.0.1"
+    earcut "^3.0.0"
     geojson-vt "^4.0.2"
     gl-matrix "^3.4.3"
     global-prefix "^4.0.0"
@@ -4196,6 +4196,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+quickselect@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-2.0.0.tgz#f19680a486a5eefb581303e023e98faaf25dd018"
+  integrity sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==
+
 quickselect@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-3.0.0.tgz#a37fc953867d56f095a20ac71c6d27063d2de603"

package/dist/es/main23.mjs

@@ -1,26 +0,0 @@
-import { useThree, _roots } from "@react-three/fiber";
-import { useState } from "react";
-import { Matrix4 } from "three";
-function useR3M() {
-  const r3m = useThree((s) => s.r3m);
-  return r3m;
-}
-function useInitR3M(props) {
-  const canvas = useThree((s) => s.gl.domElement);
-  useState(() => {
-    const store = _roots.get(canvas).store;
-    initR3M({ ...props, store });
-  });
-}
-function initR3M({ store, ...props }) {
-  const viewProjMx = new Matrix4().identity().toArray();
-  const r3m = { ...props, viewProjMx };
-  store.setState({ r3m });
-  return r3m;
-}
-export {
-  initR3M,
-  useInitR3M,
-  useR3M
-};
-//# sourceMappingURL=main23.mjs.map

package/dist/es/main23.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"main23.mjs","sources":["../../src/core/use-r3m.ts"],"sourcesContent":["import { RootState, _roots, useThree } from \"@react-three/fiber\";\nimport { useState } from \"react\";\nimport { Matrix4, Matrix4Tuple } from \"three\";\nimport { UseBoundStore } from 'zustand';\nimport { FromLngLat, MapInstance } from \"./generic-map\";\n\nexport interface R3M<T extends MapInstance = MapInstance> {\n  /** Map provider */\n  map: T,\n  /** view projection matrix coming from the map provider */\n  viewProjMx: Matrix4Tuple,\n  fromLngLat: FromLngLat,\n}\n\nexport function useR3M<T extends MapInstance> () {\n  const r3m = useThree(s=>(s as any).r3m) as R3M<T>; // eslint-disable-line @typescript-eslint/no-explicit-any\n  return r3m;\n}\n\n/** init `useR3M` hook */\nexport function useInitR3M<T extends MapInstance>(props: {\n  map: T; fromLngLat: FromLngLat;\n}) {\n  const canvas = useThree(s => s.gl.domElement);\n  // to run only once\n  useState(()=>{\n    const store = _roots.get(canvas)!.store; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n    initR3M({...props, store})\n  })\n}\n\nexport function initR3M<T extends MapInstance>({store, ...props}: {\n  map: T;\n  fromLngLat: FromLngLat;\n  store: UseBoundStore<RootState>;\n}) {\n  const viewProjMx = new Matrix4().identity().toArray();\n  const r3m : R3M<T> = { ...props, viewProjMx };\n  store.setState({r3m} as any); // eslint-disable-line @typescript-eslint/no-explicit-any\n  return r3m;\n}"],"names":[],"mappings":";;;AAcO,SAAS,SAAiC;AAC/C,QAAM,MAAM,SAAS,CAAI,MAAA,EAAU,GAAG;AAC/B,SAAA;AACT;AAGO,SAAS,WAAkC,OAE/C;AACD,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AAE5C,WAAS,MAAI;AACX,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAClC,YAAQ,EAAC,GAAG,OAAO,MAAM,CAAA;AAAA,EAAA,CAC1B;AACH;AAEO,SAAS,QAA+B,EAAC,OAAO,GAAG,SAIvD;AACD,QAAM,aAAa,IAAI,QAAA,EAAU,WAAW,QAAQ;AACpD,QAAM,MAAe,EAAE,GAAG,OAAO,WAAW;AACtC,QAAA,SAAS,EAAC,IAAA,CAAW;AACpB,SAAA;AACT;"}

package/dist/es/main24.mjs

@@ -1,5 +0,0 @@
-const earthRadius = 63710088e-1;
-export {
-  earthRadius
-};
-//# sourceMappingURL=main24.mjs.map

package/dist/es/main24.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"main24.mjs","sources":["../../src/core/earth-radius.ts"],"sourcesContent":["export const earthRadius = 6371008.8;\n"],"names":[],"mappings":"AAAO,MAAM,cAAc;"}

package/dist/es/main25.mjs

@@ -1,33 +0,0 @@
-import { useThree, _roots } from "@react-three/fiber";
-import { useMemo } from "react";
-function useCoords() {
-  const coords = useThree((s) => s.coords);
-  return coords;
-}
-function useSetCoords({ longitude, latitude, altitude }) {
-  const canvas = useThree((s) => s.gl.domElement);
-  useMemo(() => {
-    const store = _roots.get(canvas).store;
-    const coords = { longitude, latitude, altitude };
-    setCoords(store, coords);
-  }, [longitude, latitude, altitude]);
-}
-function useSetRootCoords(store, {
-  longitude,
-  latitude,
-  altitude
-}) {
-  useMemo(() => {
-    setCoords(store, { longitude, latitude, altitude });
-  }, [longitude, latitude, altitude]);
-}
-function setCoords(store, coords) {
-  store.setState({ coords });
-}
-export {
-  setCoords,
-  useCoords,
-  useSetCoords,
-  useSetRootCoords
-};
-//# sourceMappingURL=main25.mjs.map

package/dist/es/main25.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"main25.mjs","sources":["../../src/core/use-coords.tsx"],"sourcesContent":["import { RootState, _roots, useThree } from \"@react-three/fiber\";\nimport { useMemo } from \"react\";\nimport { UseBoundStore } from 'zustand';\nimport { Coords } from \"../api/coords\";\n\nexport function useCoords() {\n  const coords = useThree(s=>(s as any).coords) as Coords; // eslint-disable-line @typescript-eslint/no-explicit-any\n  return coords;\n}\n\nexport function useSetCoords({longitude, latitude, altitude}: Coords) {\n  \n  const canvas = useThree(s => s.gl.domElement);\n  useMemo(()=>{\n    const store = _roots.get(canvas)!.store; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n    const coords : Coords = { longitude, latitude, altitude };\n    setCoords(store, coords);\n  }, [longitude, latitude, altitude]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nexport function useSetRootCoords(store:UseBoundStore<RootState>, {\n  longitude, latitude, altitude\n}: Coords) {\n  useMemo(()=>{\n    setCoords(store, {longitude, latitude, altitude});\n  }, [longitude, latitude, altitude]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nexport function setCoords(store:UseBoundStore<RootState>, coords: Coords) {\n  store.setState({coords} as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n}"],"names":[],"mappings":";;AAKO,SAAS,YAAY;AAC1B,QAAM,SAAS,SAAS,CAAI,MAAA,EAAU,MAAM;AACrC,SAAA;AACT;AAEO,SAAS,aAAa,EAAC,WAAW,UAAU,YAAmB;AAEpE,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AAC5C,UAAQ,MAAI;AACV,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAClC,UAAM,SAAkB,EAAE,WAAW,UAAU,SAAS;AACxD,cAAU,OAAO,MAAM;AAAA,EACtB,GAAA,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;AAEO,SAAS,iBAAiB,OAAgC;AAAA,EAC/D;AAAA,EAAW;AAAA,EAAU;AACvB,GAAW;AACT,UAAQ,MAAI;AACV,cAAU,OAAO,EAAC,WAAW,UAAU,SAAS,CAAA;AAAA,EAC/C,GAAA,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;AAEgB,SAAA,UAAU,OAAgC,QAAgB;AAClE,QAAA,SAAS,EAAC,OAAA,CAAc;AAChC;"}

package/dist/es/main26.mjs

@@ -1,27 +0,0 @@
-import { syncCamera } from "./main21.mjs";
-import { useFunction } from "./main20.mjs";
-function useRender({
-  map,
-  origin,
-  useThree,
-  frameloop,
-  r3m
-}) {
-  const render = useFunction((_gl, projViewMx) => {
-    const pVMx = "defaultProjectionData" in projViewMx ? Object.values(projViewMx.defaultProjectionData.mainMatrix) : projViewMx;
-    r3m.viewProjMx.splice(0, 16, ...pVMx);
-    const state = useThree.getState();
-    const camera = state.camera;
-    const { gl, advance } = state;
-    syncCamera(camera, origin, projViewMx);
-    gl.resetState();
-    advance(Date.now() * 1e-3, true);
-    if (!frameloop || frameloop === "always")
-      map.triggerRepaint();
-  });
-  return render;
-}
-export {
-  useRender
-};
-//# sourceMappingURL=main26.mjs.map

package/dist/es/main26.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"main26.mjs","sources":["../../src/core/canvas-in-layer/use-render.ts"],"sourcesContent":["import { RootState } from \"@react-three/fiber\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { UseBoundStore } from \"zustand\";\nimport { MapInstance } from \"../generic-map\";\nimport { syncCamera } from \"../sync-camera\";\nimport { useFunction } from \"../use-function\";\nimport { R3M } from \"../use-r3m\";\n\nexport function useRender({\n  map, origin, useThree, frameloop, r3m,\n} :{\n  map: MapInstance,\n  origin: Matrix4Tuple,\n  useThree: UseBoundStore<RootState>,\n  frameloop?: 'always' | 'demand',\n  r3m: R3M\n}) {\n  const render = useFunction((_gl: WebGL2RenderingContext, projViewMx: number[] | {defaultProjectionData: {mainMatrix: Record<string, number>}}) => {\n    const pVMx = 'defaultProjectionData' in projViewMx ? Object.values(projViewMx.defaultProjectionData.mainMatrix) : projViewMx;\n    r3m.viewProjMx.splice(0, 16, ...pVMx)\n    const state = useThree.getState();\n    const camera = state.camera as PerspectiveCamera;\n    const {gl, advance} = state;\n    syncCamera(camera as PerspectiveCamera, origin, projViewMx as Matrix4Tuple);\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    if (!frameloop || frameloop === 'always') map.triggerRepaint();\n  })\n  return render;\n}"],"names":[],"mappings":";;AAQO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAK;AAAA,EAAQ;AAAA,EAAU;AAAA,EAAW;AACpC,GAMG;AACD,QAAM,SAAS,YAAY,CAAC,KAA6B,eAAyF;AAC1I,UAAA,OAAO,2BAA2B,aAAa,OAAO,OAAO,WAAW,sBAAsB,UAAU,IAAI;AAClH,QAAI,WAAW,OAAO,GAAG,IAAI,GAAG,IAAI;AAC9B,UAAA,QAAQ,SAAS;AACvB,UAAM,SAAS,MAAM;AACf,UAAA,EAAC,IAAI,QAAW,IAAA;AACX,eAAA,QAA6B,QAAQ,UAA0B;AAC1E,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAC5B,QAAA,CAAC,aAAa,cAAc;AAAU,UAAI,eAAe;AAAA,EAAA,CAC9D;AACM,SAAA;AACT;"}

package/dist/es/main27.mjs

@@ -1,98 +0,0 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { createRoot, _roots } from "@react-three/fiber";
-import { useState, useEffect } from "react";
-import { events } from "./main30.mjs";
-import { setCoords, useSetRootCoords } from "./main25.mjs";
-import { useFunction } from "./main20.mjs";
-import { initR3M } from "./main23.mjs";
-function useRoot(fromLngLat, map, { frameloop, longitude, latitude, altitude, ...props }) {
-  const [{ root, useThree, canvas, r3m }] = useState(() => {
-    const canvas2 = map.getCanvas();
-    const gl = canvas2.getContext("webgl2") || canvas2.getContext("webgl");
-    const root2 = createRoot(canvas2);
-    root2.configure({
-      dpr: window.devicePixelRatio,
-      events,
-      ...props,
-      frameloop: "never",
-      gl: {
-        context: gl,
-        autoClear: false,
-        antialias: true,
-        ...props == null ? void 0 : props.gl
-      },
-      onCreated: (state) => {
-        state.gl.forceContextLoss = () => {
-        };
-      },
-      camera: {
-        matrixAutoUpdate: false,
-        near: 0
-      },
-      size: {
-        width: canvas2.clientWidth,
-        height: canvas2.clientHeight,
-        top: canvas2.offsetTop,
-        left: canvas2.offsetLeft,
-        updateStyle: false,
-        ...props == null ? void 0 : props.size
-      }
-    });
-    const store = _roots.get(canvas2).store;
-    const r3m2 = initR3M({ map, fromLngLat, store });
-    setCoords(store, { longitude, latitude, altitude });
-    if (frameloop === "demand") {
-      store.setState({
-        frameloop,
-        invalidate: () => {
-          map.triggerRepaint();
-        }
-      });
-    }
-    return { root: root2, useThree: store, map, canvas: canvas2, r3m: r3m2 };
-  });
-  const onResize = useFunction(() => {
-    const { setDpr, setSize } = useThree.getState();
-    setDpr(window.devicePixelRatio);
-    setSize(
-      canvas.clientWidth,
-      canvas.clientHeight,
-      false,
-      canvas.offsetTop,
-      canvas.offsetLeft
-    );
-  });
-  const onRemove = useFunction(() => {
-    root.unmount();
-  });
-  useSetRootCoords(useThree, { longitude, latitude, altitude });
-  useEffect(() => {
-    if (frameloop !== "demand")
-      return;
-    const setState = useThree.setState;
-    const { invalidate } = useThree.getState();
-    setState({
-      frameloop,
-      invalidate: () => {
-        map.triggerRepaint();
-      }
-    });
-    return () => {
-      setState({ frameloop: "never", invalidate });
-    };
-  }, [frameloop]);
-  useEffect(() => {
-    map.on("resize", onResize);
-    return () => {
-      map.off("resize", onResize);
-    };
-  }, []);
-  useEffect(() => {
-    root.render(/* @__PURE__ */ jsx(Fragment, { children: props.children }));
-  }, [props.children]);
-  return { onRemove, useThree, r3m };
-}
-export {
-  useRoot
-};
-//# sourceMappingURL=main27.mjs.map

package/dist/es/main27.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"main27.mjs","sources":["../../src/core/canvas-in-layer/use-root.tsx"],"sourcesContent":["import { _roots, createRoot } from \"@react-three/fiber\";\nimport { useEffect, useState } from \"react\";\nimport { CanvasProps } from \"../../api/canvas-props\";\nimport { events } from \"../events\";\nimport { FromLngLat, MapInstance } from \"../generic-map\";\nimport { setCoords, useSetRootCoords } from \"../use-coords\";\nimport { useFunction } from \"../use-function\";\nimport { initR3M } from \"../use-r3m\";\n\nexport function useRoot(\n  fromLngLat: FromLngLat,\n  map: MapInstance,\n  { frameloop, longitude, latitude, altitude, ...props }: CanvasProps\n) {\n\n  const [{ root, useThree, canvas, r3m }] = useState(() => {\n    const canvas = map.getCanvas();\n    const gl = (canvas.getContext('webgl2') || canvas.getContext('webgl')) as WebGLRenderingContext;\n\n    const root = createRoot(canvas);\n    root.configure({\n      dpr: window.devicePixelRatio,\n      events,\n      ...props,\n      frameloop: 'never',\n      gl: {\n        context: gl,\n        autoClear: false,\n        antialias: true,\n        ...props?.gl,\n      },\n      onCreated: (state) => {\n        state.gl.forceContextLoss = () => { }; // eslint-disable-line @typescript-eslint/no-empty-function\n      },\n      camera: {\n        matrixAutoUpdate: false,\n        near: 0,\n      },\n      size: {\n        width: canvas.clientWidth,\n        height: canvas.clientHeight,\n        top: canvas.offsetTop,\n        left: canvas.offsetLeft,\n        updateStyle: false,\n        ...props?.size,\n      },\n    });\n\n    const store = _roots.get(canvas)!.store; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n\n    const r3m = initR3M({ map, fromLngLat, store });\n    setCoords(store, {longitude, latitude, altitude});\n\n    if (frameloop === 'demand') {\n      store.setState({\n        frameloop,\n        invalidate: () => {\n          map.triggerRepaint();\n        },\n      })\n    }\n\n    return { root, useThree: store, map, canvas, r3m }\n\n  })\n\n  const onResize = useFunction(() => {\n\n    const { setDpr, setSize } = useThree.getState();\n\n    setDpr(window.devicePixelRatio);\n\n    setSize(\n      canvas.clientWidth,\n      canvas.clientHeight,\n      false,\n      canvas.offsetTop,\n      canvas.offsetLeft,\n    );\n\n  })\n\n  const onRemove = useFunction(() => {\n    root.unmount();\n  })\n\n  useSetRootCoords(useThree, {longitude, latitude, altitude});\n\n  // on `frameloop` change\n  useEffect(() => {\n    if (frameloop !== 'demand') return;\n    const setState = useThree.setState;\n    const { invalidate } = useThree.getState();\n    setState({\n      frameloop,\n      invalidate: () => {\n        map.triggerRepaint();\n      }\n    });\n    return () => {\n      setState({ frameloop: 'never', invalidate })\n    }\n  }, [frameloop]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // on mount / unmount\n  useEffect(() => {\n    map.on('resize', onResize);\n    return () => {\n      map.off('resize', onResize)\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // root.render\n  useEffect(() => {\n    root.render(<>\n      {props.children}\n    </>);\n  }, [props.children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return { onRemove, useThree, r3m };\n}"],"names":["canvas","root","r3m"],"mappings":";;;;;;;AASgB,SAAA,QACd,YACA,KACA,EAAE,WAAW,WAAW,UAAU,UAAU,GAAG,SAC/C;AAEM,QAAA,CAAC,EAAE,MAAM,UAAU,QAAQ,IAAK,CAAA,IAAI,SAAS,MAAM;AACjDA,UAAAA,UAAS,IAAI;AACnB,UAAM,KAAMA,QAAO,WAAW,QAAQ,KAAKA,QAAO,WAAW,OAAO;AAE9DC,UAAAA,QAAO,WAAWD,OAAM;AAC9BC,UAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ;AAAA,MACA,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,+BAAO;AAAA,MACZ;AAAA,MACA,WAAW,CAAC,UAAU;AACd,cAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,OAAOD,QAAO;AAAA,QACd,QAAQA,QAAO;AAAA,QACf,KAAKA,QAAO;AAAA,QACZ,MAAMA,QAAO;AAAA,QACb,aAAa;AAAA,QACb,GAAG,+BAAO;AAAA,MACZ;AAAA,IAAA,CACD;AAED,UAAM,QAAQ,OAAO,IAAIA,OAAM,EAAG;AAElC,UAAME,OAAM,QAAQ,EAAE,KAAK,YAAY,OAAO;AAC9C,cAAU,OAAO,EAAC,WAAW,UAAU,SAAS,CAAA;AAEhD,QAAI,cAAc,UAAU;AAC1B,YAAM,SAAS;AAAA,QACb;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,eAAe;AAAA,QACrB;AAAA,MAAA,CACD;AAAA,IACH;AAEO,WAAA,EAAE,MAAAD,OAAM,UAAU,OAAO,KAAK,QAAAD,SAAQ,KAAAE;EAAI,CAElD;AAEK,QAAA,WAAW,YAAY,MAAM;AAEjC,UAAM,EAAE,QAAQ,QAAQ,IAAI,SAAS,SAAS;AAE9C,WAAO,OAAO,gBAAgB;AAE9B;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EACT,CAED;AAEK,QAAA,WAAW,YAAY,MAAM;AACjC,SAAK,QAAQ;AAAA,EAAA,CACd;AAED,mBAAiB,UAAU,EAAC,WAAW,UAAU,SAAS,CAAA;AAG1D,YAAU,MAAM;AACd,QAAI,cAAc;AAAU;AAC5B,UAAM,WAAW,SAAS;AAC1B,UAAM,EAAE,WAAA,IAAe,SAAS,SAAS;AAChC,aAAA;AAAA,MACP;AAAA,MACA,YAAY,MAAM;AAChB,YAAI,eAAe;AAAA,MACrB;AAAA,IAAA,CACD;AACD,WAAO,MAAM;AACX,eAAS,EAAE,WAAW,SAAS,WAAY,CAAA;AAAA,IAAA;AAAA,EAC7C,GACC,CAAC,SAAS,CAAC;AAGd,YAAU,MAAM;AACV,QAAA,GAAG,UAAU,QAAQ;AACzB,WAAO,MAAM;AACP,UAAA,IAAI,UAAU,QAAQ;AAAA,IAAA;AAAA,EAE9B,GAAG,CAAE,CAAA;AAGL,YAAU,MAAM;AACd,SAAK,OAAO,oBAAA,UAAA,EACT,UAAM,MAAA,SACT,CAAA,CAAG;AAAA,EAAA,GACF,CAAC,MAAM,QAAQ,CAAC;AAEZ,SAAA,EAAE,UAAU,UAAU;AAC/B;"}