react-three-map 0.0.4 → 0.1.1

package/dist/cjs/main.js.js

@@ -1 +1 @@
-"use strict";var K=Object.create;var j=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,ee=Object.prototype.hasOwnProperty;var te=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of J(t))!ee.call(e,r)&&r!==o&&j(e,r,{get:()=>t[r],enumerable:!(n=Y(t,r))||n.enumerable});return e};var ne=(e,t,o)=>(o=e!=null?K(X(e)):{},te(t||!e||!e.__esModule?j(o,"default",{value:e,enumerable:!0}):o,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react/jsx-runtime"),A=require("@react-three/fiber"),l=require("react"),V=require("react-dom"),w=require("three"),oe=require("maplibre-gl");function G(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const M=G(l),re=G(w),$=M.createContext(null);function ie(){var e;const t=(e=l.useContext($))===null||e===void 0?void 0:e.maps,o=l.useContext(x);return l.useMemo(()=>({...t,current:o==null?void 0:o.map}),[t,o])}function ae(e){const t=e.clone();return t.pixelsToGLUnits=e.pixelsToGLUnits,t}function N(e){return{longitude:e.center.lng,latitude:e.center.lat,zoom:e.zoom,pitch:e.pitch,bearing:e.bearing,padding:e.padding}}function P(e,t){const o=t.viewState||t;let n=!1;if("longitude"in o&&"latitude"in o){const r=e.center;e.center=new r.constructor(o.longitude,o.latitude),n=n||r!==e.center}if("zoom"in o){const r=e.zoom;e.zoom=o.zoom,n=n||r!==e.zoom}if("bearing"in o){const r=e.bearing;e.bearing=o.bearing,n=n||r!==e.bearing}if("pitch"in o){const r=e.pitch;e.pitch=o.pitch,n=n||r!==e.pitch}return o.padding&&!e.isPaddingEqual(o.padding)&&(n=!0,e.padding=o.padding),n}const se=["type","source","source-layer","minzoom","maxzoom","filter","layout"];function F(e){if(!e)return null;if(typeof e=="string"||("toJS"in e&&(e=e.toJS()),!e.layers))return e;const t={};for(const n of e.layers)t[n.id]=n;const o=e.layers.map(n=>{let r=null;"interactive"in n&&(r=Object.assign({},n),delete r.interactive);const i=t[n.ref];if(i){r=r||Object.assign({},n),delete r.ref;for(const a of se)a in i&&(r[a]=i[a])}return r||n});return{...e,layers:o}}function ce(e,t){const o=Array.isArray(e)?e[0]:e?e.x:0,n=Array.isArray(e)?e[1]:e?e.y:0,r=Array.isArray(t)?t[0]:t?t.x:0,i=Array.isArray(t)?t[1]:t?t.y:0;return o===r&&n===i}function y(e,t){if(e===t)return!0;if(!e||!t)return!1;if(Array.isArray(e)){if(!Array.isArray(t)||e.length!==t.length)return!1;for(let o=0;o<e.length;o++)if(!y(e[o],t[o]))return!1;return!0}else if(Array.isArray(t))return!1;if(typeof e=="object"&&typeof t=="object"){const o=Object.keys(e),n=Object.keys(t);if(o.length!==n.length)return!1;for(const r of o)if(!t.hasOwnProperty(r)||!y(e[r],t[r]))return!1;return!0}return!1}const I={version:8,sources:{},layers:[]},D={mousedown:"onMouseDown",mouseup:"onMouseUp",mouseover:"onMouseOver",mousemove:"onMouseMove",click:"onClick",dblclick:"onDblClick",mouseenter:"onMouseEnter",mouseleave:"onMouseLeave",mouseout:"onMouseOut",contextmenu:"onContextMenu",touchstart:"onTouchStart",touchend:"onTouchEnd",touchmove:"onTouchMove",touchcancel:"onTouchCancel"},T={movestart:"onMoveStart",move:"onMove",moveend:"onMoveEnd",dragstart:"onDragStart",drag:"onDrag",dragend:"onDragEnd",zoomstart:"onZoomStart",zoom:"onZoom",zoomend:"onZoomEnd",rotatestart:"onRotateStart",rotate:"onRotate",rotateend:"onRotateEnd",pitchstart:"onPitchStart",pitch:"onPitch",pitchend:"onPitchEnd"},U={wheel:"onWheel",boxzoomstart:"onBoxZoomStart",boxzoomend:"onBoxZoomEnd",boxzoomcancel:"onBoxZoomCancel",resize:"onResize",load:"onLoad",render:"onRender",idle:"onIdle",remove:"onRemove",data:"onData",styledata:"onStyleData",sourcedata:"onSourceData",error:"onError"},le=["minZoom","maxZoom","minPitch","maxPitch","maxBounds","projection","renderWorldCopies"],ue=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate","touchPitch"];class L{constructor(t,o,n){this._map=null,this._internalUpdate=!1,this._inRender=!1,this._hoveredFeatures=null,this._deferredEvents={move:!1,zoom:!1,pitch:!1,rotate:!1},this._onEvent=r=>{const i=this.props[U[r.type]];i?i(r):r.type==="error"&&console.error(r.error)},this._onPointerEvent=r=>{(r.type==="mousemove"||r.type==="mouseout")&&this._updateHover(r);const i=this.props[D[r.type]];i&&(this.props.interactiveLayerIds&&r.type!=="mouseover"&&r.type!=="mouseout"&&(r.features=this._hoveredFeatures||this._queryRenderedFeatures(r.point)),i(r),delete r.features)},this._onCameraEvent=r=>{if(!this._internalUpdate){const i=this.props[T[r.type]];i&&i(r)}r.type in this._deferredEvents&&(this._deferredEvents[r.type]=!1)},this._MapClass=t,this.props=o,this._initialize(n)}get map(){return this._map}get transform(){return this._renderTransform}setProps(t){const o=this.props;this.props=t;const n=this._updateSettings(t,o);n&&this._createShadowTransform(this._map);const r=this._updateSize(t),i=this._updateViewState(t,!0);this._updateStyle(t,o),this._updateStyleComponents(t,o),this._updateHandlers(t,o),(n||r||i&&!this._map.isMoving())&&this.redraw()}static reuse(t,o){const n=L.savedMaps.pop();if(!n)return null;const r=n.map,i=r.getContainer();for(o.className=i.className;i.childNodes.length>0;)o.appendChild(i.childNodes[0]);r._container=o;const a=r._resizeObserver;a&&(a.disconnect(),a.observe(o)),n.setProps({...t,styleDiffing:!1}),r.resize();const{initialViewState:s}=t;return s&&(s.bounds?r.fitBounds(s.bounds,{...s.fitBoundsOptions,duration:0}):n._updateViewState(s,!1)),r.isStyleLoaded()?r.fire("load"):r.once("styledata",()=>r.fire("load")),r._update(),n}_initialize(t){const{props:o}=this,{mapStyle:n=I}=o,r={...o,...o.initialViewState,accessToken:o.mapboxAccessToken||fe()||null,container:t,style:F(n)},i=r.initialViewState||r.viewState||r;if(Object.assign(r,{center:[i.longitude||0,i.latitude||0],zoom:i.zoom||0,pitch:i.pitch||0,bearing:i.bearing||0}),o.gl){const f=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=()=>(HTMLCanvasElement.prototype.getContext=f,o.gl)}const a=new this._MapClass(r);i.padding&&a.setPadding(i.padding),o.cursor&&(a.getCanvas().style.cursor=o.cursor),this._createShadowTransform(a);const s=a._render;a._render=f=>{this._inRender=!0,s.call(a,f),this._inRender=!1};const u=a._renderTaskQueue.run;a._renderTaskQueue.run=f=>{u.call(a._renderTaskQueue,f),this._onBeforeRepaint()},a.on("render",()=>this._onAfterRepaint());const c=a.fire;a.fire=this._fireEvent.bind(this,c),a.on("resize",()=>{this._renderTransform.resize(a.transform.width,a.transform.height)}),a.on("styledata",()=>this._updateStyleComponents(this.props,{})),a.on("sourcedata",()=>this._updateStyleComponents(this.props,{}));for(const f in D)a.on(f,this._onPointerEvent);for(const f in T)a.on(f,this._onCameraEvent);for(const f in U)a.on(f,this._onEvent);this._map=a}recycle(){const o=this.map.getContainer().querySelector("[mapboxgl-children]");o==null||o.remove(),L.savedMaps.push(this)}destroy(){this._map.remove()}redraw(){const t=this._map;!this._inRender&&t.style&&(t._frame&&(t._frame.cancel(),t._frame=null),t._render())}_createShadowTransform(t){const o=ae(t.transform);t.painter.transform=o,this._renderTransform=o}_updateSize(t){const{viewState:o}=t;if(o){const n=this._map;if(o.width!==n.transform.width||o.height!==n.transform.height)return n.resize(),!0}return!1}_updateViewState(t,o){if(this._internalUpdate)return!1;const n=this._map,r=this._renderTransform,{zoom:i,pitch:a,bearing:s}=r,u=n.isMoving();u&&(r.cameraElevationReference="sea");const c=P(r,{...N(n.transform),...t});if(u&&(r.cameraElevationReference="ground"),c&&o){const f=this._deferredEvents;f.move=!0,f.zoom||(f.zoom=i!==r.zoom),f.rotate||(f.rotate=s!==r.bearing),f.pitch||(f.pitch=a!==r.pitch)}return u||P(n.transform,t),c}_updateSettings(t,o){const n=this._map;let r=!1;for(const i of le)if(i in t&&!y(t[i],o[i])){r=!0;const a=n[`set${i[0].toUpperCase()}${i.slice(1)}`];a==null||a(t[i])}return r}_updateStyle(t,o){if(t.cursor!==o.cursor&&(this._map.getCanvas().style.cursor=t.cursor),t.mapStyle!==o.mapStyle){const{mapStyle:n=I,styleDiffing:r=!0}=t,i={diff:r};return"localIdeographFontFamily"in t&&(i.localIdeographFontFamily=t.localIdeographFontFamily),this._map.setStyle(F(n),i),!0}return!1}_updateStyleComponents(t,o){const n=this._map;let r=!1;return n.isStyleLoaded()&&("light"in t&&n.setLight&&!y(t.light,o.light)&&(r=!0,n.setLight(t.light)),"fog"in t&&n.setFog&&!y(t.fog,o.fog)&&(r=!0,n.setFog(t.fog)),"terrain"in t&&n.setTerrain&&!y(t.terrain,o.terrain)&&(!t.terrain||n.getSource(t.terrain.source))&&(r=!0,n.setTerrain(t.terrain))),r}_updateHandlers(t,o){var n,r;const i=this._map;let a=!1;for(const s of ue){const u=(n=t[s])!==null&&n!==void 0?n:!0,c=(r=o[s])!==null&&r!==void 0?r:!0;y(u,c)||(a=!0,u?i[s].enable(u):i[s].disable())}return a}_queryRenderedFeatures(t){const o=this._map,{interactiveLayerIds:n=[]}=this.props;try{return o.queryRenderedFeatures(t,{layers:n.filter(o.getLayer.bind(o))})}catch{return[]}}_updateHover(t){var o;const{props:n}=this;if(n.interactiveLayerIds&&(n.onMouseMove||n.onMouseEnter||n.onMouseLeave)){const i=t.type,a=((o=this._hoveredFeatures)===null||o===void 0?void 0:o.length)>0,s=this._queryRenderedFeatures(t.point),u=s.length>0;!u&&a&&(t.type="mouseleave",this._onPointerEvent(t)),this._hoveredFeatures=s,u&&!a&&(t.type="mouseenter",this._onPointerEvent(t)),t.type=i}else this._hoveredFeatures=null}_fireEvent(t,o,n){const r=this._map,i=r.transform,a=typeof o=="string"?o:o.type;return a==="move"&&this._updateViewState(this.props,!1),a in T&&(typeof o=="object"&&(o.viewState=N(i)),this._map.isMoving())?(r.transform=this._renderTransform,t.call(r,o,n),r.transform=i,r):(t.call(r,o,n),r)}_onBeforeRepaint(){const t=this._map;this._internalUpdate=!0;for(const n in this._deferredEvents)this._deferredEvents[n]&&t.fire(n);this._internalUpdate=!1;const o=this._map.transform;this._map.transform=this._renderTransform,this._onAfterRepaint=()=>{this._map.transform=o}}}L.savedMaps=[];function fe(){let e=null;if(typeof location<"u"){const t=/access_token=([^&\/]*)/.exec(location.search);e=t&&t[1]}try{e=e||process.env.MapboxAccessToken}catch{}try{e=e||process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}catch{}return e}const de=["setMaxBounds","setMinZoom","setMaxZoom","setMinPitch","setMaxPitch","setRenderWorldCopies","setProjection","setStyle","addSource","removeSource","addLayer","removeLayer","setLayerZoomRange","setFilter","setPaintProperty","setLayoutProperty","setLight","setTerrain","setFog","remove"];function me(e){if(!e)return null;const t=e.map,o={getMap:()=>t,getCenter:()=>e.transform.center,getZoom:()=>e.transform.zoom,getBearing:()=>e.transform.bearing,getPitch:()=>e.transform.pitch,getPadding:()=>e.transform.padding,getBounds:()=>e.transform.getBounds(),project:n=>{const r=t.transform;t.transform=e.transform;const i=t.project(n);return t.transform=r,i},unproject:n=>{const r=t.transform;t.transform=e.transform;const i=t.unproject(n);return t.transform=r,i},queryTerrainElevation:(n,r)=>{const i=t.transform;t.transform=e.transform;const a=t.queryTerrainElevation(n,r);return t.transform=i,a}};for(const n of he(t))!(n in o)&&!de.includes(n)&&(o[n]=t[n].bind(t));return o}function he(e){const t=new Set;let o=e;for(;o;){for(const n of Object.getOwnPropertyNames(o))n[0]!=="_"&&typeof e[n]=="function"&&n!=="fire"&&n!=="setEventedParent"&&t.add(n);o=Object.getPrototypeOf(o)}return Array.from(t)}const ge=typeof document<"u"?l.useLayoutEffect:l.useEffect,ve=["baseApiUrl","maxParallelImageRequests","workerClass","workerCount","workerUrl"];function ye(e,t){for(const n of ve)n in t&&(e[n]=t[n]);const{RTLTextPlugin:o="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js"}=t;o&&e.getRTLTextPluginStatus&&e.getRTLTextPluginStatus()==="unavailable"&&e.setRTLTextPlugin(o,n=>{n&&console.error(n)},!1)}const x=M.createContext(null);function pe(e,t,o){const n=l.useContext($),[r,i]=l.useState(null),a=l.useRef(),{current:s}=l.useRef({mapLib:null,map:null});l.useEffect(()=>{const f=e.mapLib;let d=!0,g;return Promise.resolve(f||o).then(p=>{if(!d)return;if(!p)throw new Error("Invalid mapLib");const h="Map"in p?p:p.default;if(!h.Map)throw new Error("Invalid mapLib");if(ye(h,e),!h.supported||h.supported(e))e.reuseMaps&&(g=L.reuse(e,a.current)),g||(g=new L(h.Map,e,a.current)),s.map=me(g),s.mapLib=h,i(g),n==null||n.onMapMount(s.map,e.id);else throw new Error("Map is not supported by this browser")}).catch(p=>{const{onError:h}=e;h?h({type:"error",target:null,originalEvent:null,error:p}):console.error(p)}),()=>{d=!1,g&&(n==null||n.onMapUnmount(e.id),e.reuseMaps?g.recycle():g.destroy())}},[]),ge(()=>{r&&r.setProps(e)}),l.useImperativeHandle(t,()=>s.map,[r]);const u=l.useMemo(()=>({position:"relative",width:"100%",height:"100%",...e.style}),[e.style]),c={height:"100%"};return M.createElement("div",{id:e.id,ref:a,style:u},r&&M.createElement(x.Provider,{value:s},M.createElement("div",{"mapboxgl-children":"",style:c},e.children)))}const _e=/box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;function b(e,t){if(!e||!t)return;const o=e.style;for(const n in t){const r=t[n];Number.isFinite(r)&&!_e.test(n)?o[n]=`${r}px`:o[n]=r}}function Ee(e,t){const{map:o,mapLib:n}=l.useContext(x),r=l.useRef({props:e});r.current.props=e;const i=l.useMemo(()=>{let O=!1;M.Children.forEach(e.children,_=>{_&&(O=!0)});const Q={...e,element:O?document.createElement("div"):null},C=new n.Marker(Q);return C.setLngLat([e.longitude,e.latitude]),C.getElement().addEventListener("click",_=>{var v,m;(m=(v=r.current.props).onClick)===null||m===void 0||m.call(v,{type:"click",target:C,originalEvent:_})}),C.on("dragstart",_=>{var v,m;const E=_;E.lngLat=i.getLngLat(),(m=(v=r.current.props).onDragStart)===null||m===void 0||m.call(v,E)}),C.on("drag",_=>{var v,m;const E=_;E.lngLat=i.getLngLat(),(m=(v=r.current.props).onDrag)===null||m===void 0||m.call(v,E)}),C.on("dragend",_=>{var v,m;const E=_;E.lngLat=i.getLngLat(),(m=(v=r.current.props).onDragEnd)===null||m===void 0||m.call(v,E)}),C},[]);l.useEffect(()=>(i.addTo(o.getMap()),()=>{i.remove()}),[]);const{longitude:a,latitude:s,offset:u,style:c,draggable:f=!1,popup:d=null,rotation:g=0,rotationAlignment:p="auto",pitchAlignment:h="auto"}=e;return l.useEffect(()=>{b(i.getElement(),c)},[c]),l.useImperativeHandle(t,()=>i,[]),(i.getLngLat().lng!==a||i.getLngLat().lat!==s)&&i.setLngLat([a,s]),u&&!ce(i.getOffset(),u)&&i.setOffset(u),i.isDraggable()!==f&&i.setDraggable(f),i.getRotation()!==g&&i.setRotation(g),i.getRotationAlignment()!==p&&i.setRotationAlignment(p),i.getPitchAlignment()!==h&&i.setPitchAlignment(h),i.getPopup()!==d&&i.setPopup(d),V.createPortal(e.children,i.getElement())}l.memo(l.forwardRef(Ee));function H(e){return new Set(e?e.trim().split(/\s+/):[])}function Ce(e,t){const{map:o,mapLib:n}=l.useContext(x),r=l.useMemo(()=>document.createElement("div"),[]),i=l.useRef({props:e});i.current.props=e;const a=l.useMemo(()=>{const s={...e},u=new n.Popup(s);return u.setLngLat([e.longitude,e.latitude]),u.once("open",c=>{var f,d;(d=(f=i.current.props).onOpen)===null||d===void 0||d.call(f,c)}),u},[]);if(l.useEffect(()=>{const s=u=>{var c,f;(f=(c=i.current.props).onClose)===null||f===void 0||f.call(c,u)};return a.on("close",s),a.setDOMContent(r).addTo(o.getMap()),()=>{a.off("close",s),a.isOpen()&&a.remove()}},[]),l.useEffect(()=>{b(a.getElement(),e.style)},[e.style]),l.useImperativeHandle(t,()=>a,[]),a.isOpen()&&((a.getLngLat().lng!==e.longitude||a.getLngLat().lat!==e.latitude)&&a.setLngLat([e.longitude,e.latitude]),e.offset&&!y(a.options.offset,e.offset)&&a.setOffset(e.offset),(a.options.anchor!==e.anchor||a.options.maxWidth!==e.maxWidth)&&(a.options.anchor=e.anchor,a.setMaxWidth(e.maxWidth)),a.options.className!==e.className)){const s=H(a.options.className),u=H(e.className);for(const c of s)u.has(c)||a.removeClassName(c);for(const c of u)s.has(c)||a.addClassName(c);a.options.className=e.className}return V.createPortal(e.children,r)}l.memo(l.forwardRef(Ce));function S(e,t,o,n){const r=l.useContext(x),i=l.useMemo(()=>e(r),[]);return l.useEffect(()=>{const a=n||o||t,s=typeof t=="function"&&typeof o=="function"?t:null,u=typeof o=="function"?o:typeof t=="function"?t:null,{map:c}=r;return c.hasControl(i)||(c.addControl(i,a==null?void 0:a.position),s&&s(r)),()=>{u&&u(r),c.hasControl(i)&&c.removeControl(i)}},[]),i}function Me(e){const t=S(({mapLib:o})=>new o.AttributionControl(e),{position:e.position});return l.useEffect(()=>{b(t._container,e.style)},[e.style]),null}l.memo(Me);function be(e){const t=S(({mapLib:o})=>new o.FullscreenControl({container:e.containerId&&document.getElementById(e.containerId)}),{position:e.position});return l.useEffect(()=>{b(t._controlContainer,e.style)},[e.style]),null}l.memo(be);function Le(e,t){const o=l.useRef({props:e}),n=S(({mapLib:r})=>{const i=new r.GeolocateControl(e),a=i._setupUI;return i._setupUI=s=>{i._container.hasChildNodes()||a(s)},i.on("geolocate",s=>{var u,c;(c=(u=o.current.props).onGeolocate)===null||c===void 0||c.call(u,s)}),i.on("error",s=>{var u,c;(c=(u=o.current.props).onError)===null||c===void 0||c.call(u,s)}),i.on("outofmaxbounds",s=>{var u,c;(c=(u=o.current.props).onOutOfMaxBounds)===null||c===void 0||c.call(u,s)}),i.on("trackuserlocationstart",s=>{var u,c;(c=(u=o.current.props).onTrackUserLocationStart)===null||c===void 0||c.call(u,s)}),i.on("trackuserlocationend",s=>{var u,c;(c=(u=o.current.props).onTrackUserLocationEnd)===null||c===void 0||c.call(u,s)}),i},{position:e.position});return o.current.props=e,l.useImperativeHandle(t,()=>n,[]),l.useEffect(()=>{b(n._container,e.style)},[e.style]),null}l.memo(l.forwardRef(Le));function we(e){const t=S(({mapLib:o})=>new o.NavigationControl(e),{position:e.position});return l.useEffect(()=>{b(t._container,e.style)},[e.style]),null}l.memo(we);function xe(e){const t=S(({mapLib:i})=>new i.ScaleControl(e),{position:e.position}),o=l.useRef(e),n=o.current;o.current=e;const{style:r}=e;return e.maxWidth!==void 0&&e.maxWidth!==n.maxWidth&&(t.options.maxWidth=e.maxWidth),e.unit!==void 0&&e.unit!==n.unit&&t.setUnit(e.unit),l.useEffect(()=>{b(t._container,r)},[r]),null}l.memo(xe);function q(e,t){if(!e)throw new Error(t)}function Se(e,t,o,n){if(q(o.id===n.id,"layer id changed"),q(o.type===n.type,"layer type changed"),o.type==="custom"||n.type==="custom")return;const{layout:r={},paint:i={},filter:a,minzoom:s,maxzoom:u,beforeId:c}=o;if(c!==n.beforeId&&e.moveLayer(t,c),r!==n.layout){const f=n.layout||{};for(const d in r)y(r[d],f[d])||e.setLayoutProperty(t,d,r[d]);for(const d in f)r.hasOwnProperty(d)||e.setLayoutProperty(t,d,void 0)}if(i!==n.paint){const f=n.paint||{};for(const d in i)y(i[d],f[d])||e.setPaintProperty(t,d,i[d]);for(const d in f)i.hasOwnProperty(d)||e.setPaintProperty(t,d,void 0)}y(a,n.filter)||e.setFilter(t,a),(s!==n.minzoom||u!==n.maxzoom)&&e.setLayerZoomRange(t,s,u)}function Re(e,t,o){if(e.style&&e.style._loaded&&(!("source"in o)||e.getSource(o.source))){const n={...o,id:t};delete n.beforeId,e.addLayer(n,o.beforeId)}}let Te=0;function ze(e){const t=l.useContext(x).map.getMap(),o=l.useRef(e),[,n]=l.useState(0),r=l.useMemo(()=>e.id||`jsx-layer-${Te++}`,[]);if(l.useEffect(()=>{if(t){const a=()=>n(s=>s+1);return t.on("styledata",a),a(),()=>{t.off("styledata",a),t.style&&t.style._loaded&&t.getLayer(r)&&t.removeLayer(r)}}},[t]),t&&t.style&&t.getLayer(r))try{Se(t,r,e,o.current)}catch(a){console.warn(a)}else Re(t,r,e);return o.current=e,null}function ke(){return ie()}const Ae=import("maplibre-gl");M.forwardRef(function(t,o){return pe(t,o,Ae)});const W=new w.Quaternion,Oe=new w.Euler,Z=new w.Vector3,B=new w.Vector3;function je({longitude:e,latitude:t,altitude:o}){const n=oe.MercatorCoordinate.fromLngLat([e,t],o),r=n.meterInMercatorCoordinateUnits();return Z.set(n.x,n.y,n.z||0),B.set(r,-r,r),W.setFromEuler(Oe.set(-Math.PI*.5,0,0)),new w.Matrix4().compose(Z,W,B)}const z={onClick:["click",!1],onContextMenu:["contextmenu",!1],onDoubleClick:["dblclick",!1],onWheel:["wheel",!0],onPointerDown:["pointerdown",!0],onPointerUp:["pointerup",!0],onPointerLeave:["pointerleave",!0],onPointerMove:["pointermove",!0],onPointerCancel:["pointercancel",!0],onLostPointerCapture:["lostpointercapture",!0]};function Ne(){return e=>{const{handlePointer:t}=A.createEvents(e);return{priority:1,enabled:!0,compute(o,n){n.size.width=n.gl.domElement.width,n.size.height=n.gl.domElement.height,n.pointer.x=o.offsetX/(n.size.width/window.devicePixelRatio)*2-1,n.pointer.y=1-o.offsetY/(n.size.height/window.devicePixelRatio)*2,n.raycaster.camera=n.camera,n.raycaster.ray.origin.setScalar(0).applyMatrix4(n.camera.projectionMatrixInverse),n.raycaster.ray.direction.set(n.pointer.x,n.pointer.y,1).applyMatrix4(n.camera.projectionMatrixInverse).sub(n.raycaster.ray.origin).normalize()},connected:void 0,handlers:Object.keys(z).reduce((o,n)=>({...o,[n]:t(n)}),{}),update:()=>{var r;const{events:o,internal:n}=e.getState();(r=n.lastEvent)!=null&&r.current&&o.handlers&&o.handlers.onPointerMove(n.lastEvent.current)},connect:o=>{var i;const{set:n,events:r}=e.getState();(i=r.disconnect)==null||i.call(r),n(a=>({events:{...a.events,connected:o}})),Object.entries(r.handlers??[]).forEach(([a,s])=>{const[u,c]=z[a];o.addEventListener(u,s,{passive:c})})},disconnect:()=>{const{set:o,events:n}=e.getState();n.connected&&(Object.entries(n.handlers??[]).forEach(([r,i])=>{if(n&&n.connected instanceof HTMLElement){const[a]=z[r];n.connected.removeEventListener(a,i)}}),o(r=>({events:{...r.events,connected:void 0}})))}}}}const k=e=>{const t=l.useRef(e);return t.current=e,l.useCallback((...o)=>t.current(...o),[])};function Pe(e,t){const[o,n]=l.useState(!1),r=k((a,s)=>{const u=a.getCanvas(),c=A.createRoot(u);c.configure({frameloop:"never",dpr:window.devicePixelRatio,shadows:!0,events:Ne(),...t,gl:{context:s,depth:!0,autoClear:!1,antialias:!0,...t==null?void 0:t.gl},onCreated:f=>{e.current={state:f,map:a,root:c},f.gl.forceContextLoss=()=>{}},camera:{matrixAutoUpdate:!1},size:{width:u.clientWidth,height:u.clientHeight,top:0,left:0,...t==null?void 0:t.size}}),e.current={map:a,root:c},setTimeout(()=>n(!0))}),i=k(()=>{setTimeout(()=>{e.current&&e.current.root.unmount()})});return{onAdd:r,onRemove:i,mounted:o}}function Fe(e,t){const o=ke();return k((r,i)=>{var c;if(!o.current||!((c=t.current)!=null&&c.state))return;const a=t.current.state.camera,s=t.current.state.gl,u=t.current.state.advance;a.projectionMatrix.fromArray(i).multiply(e),a.projectionMatrixInverse.copy(a.projectionMatrix).invert(),s.resetState(),u(Date.now()*.001,!0),o.current.triggerRepaint()})}A.extend(re);const Ie=l.memo(({longitude:e,latitude:t,altitude:o=0,children:n,...r})=>{const i=l.useId(),a=l.useRef(),s=l.useMemo(()=>je({latitude:t,longitude:e,altitude:o}),[t,e,o]),{onAdd:u,onRemove:c,mounted:f}=Pe(a,r),d=Fe(s,a);return l.useEffect(()=>{f&&a.current&&a.current.root.render(R.jsx(R.Fragment,{children:n}))},[a,f,n]),R.jsx(ze,{id:i,type:"custom",renderingMode:"3d",onAdd:u,onRemove:c,render:d})});exports.Canvas=Ie;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),g=require("@react-three/fiber"),u=require("react"),M=require("react-map-gl/maplibre"),d=require("three"),E=require("maplibre-gl");function b(r){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(n,t,e.get?e:{enumerable:!0,get:()=>r[t]})}}return n.default=r,Object.freeze(n)}const j=b(d),h=new d.Quaternion,C=new d.Euler,x=new d.Vector3,y=new d.Vector3;function R({longitude:r,latitude:n,altitude:t}){const e=E.MercatorCoordinate.fromLngLat([r,n],t),o=e.meterInMercatorCoordinateUnits();return x.set(e.x,e.y,e.z||0),y.set(o,-o,o),h.setFromEuler(C.set(-Math.PI*.5,0,0)),new d.Matrix4().compose(x,h,y)}const v={onClick:["click",!1],onContextMenu:["contextmenu",!1],onDoubleClick:["dblclick",!1],onWheel:["wheel",!0],onPointerDown:["pointerdown",!0],onPointerUp:["pointerup",!0],onPointerLeave:["pointerleave",!0],onPointerMove:["pointermove",!0],onPointerCancel:["pointercancel",!0],onLostPointerCapture:["lostpointercapture",!0]};function O(){return r=>{const{handlePointer:n}=g.createEvents(r);return{priority:1,enabled:!0,compute(t,e){e.size.width=e.gl.domElement.width,e.size.height=e.gl.domElement.height,e.pointer.x=t.offsetX/(e.size.width/window.devicePixelRatio)*2-1,e.pointer.y=1-t.offsetY/(e.size.height/window.devicePixelRatio)*2,e.raycaster.camera=e.camera,e.raycaster.ray.origin.setScalar(0).applyMatrix4(e.camera.projectionMatrixInverse),e.raycaster.ray.direction.set(e.pointer.x,e.pointer.y,1).applyMatrix4(e.camera.projectionMatrixInverse).sub(e.raycaster.ray.origin).normalize()},connected:void 0,handlers:Object.keys(v).reduce((t,e)=>({...t,[e]:n(e)}),{}),update:()=>{var o;const{events:t,internal:e}=r.getState();(o=e.lastEvent)!=null&&o.current&&t.handlers&&t.handlers.onPointerMove(e.lastEvent.current)},connect:t=>{var i;const{set:e,events:o}=r.getState();(i=o.disconnect)==null||i.call(o),e(c=>({events:{...c.events,connected:t}})),Object.entries(o.handlers??[]).forEach(([c,l])=>{const[s,a]=v[c];t.addEventListener(s,l,{passive:a})})},disconnect:()=>{const{set:t,events:e}=r.getState();e.connected&&(Object.entries(e.handlers??[]).forEach(([o,i])=>{if(e&&e.connected instanceof HTMLElement){const[c]=v[o];e.connected.removeEventListener(c,i)}}),t(o=>({events:{...o.events,connected:void 0}})))}}}}const p=r=>{const n=u.useRef(r);return n.current=r,u.useCallback((...t)=>n.current(...t),[])};function S(r,n){const[t,e]=u.useState(!1),o=p((c,l)=>{const s=c.getCanvas(),a=g.createRoot(s);a.configure({frameloop:"never",dpr:window.devicePixelRatio,shadows:!0,events:O(),...n,gl:{context:l,depth:!0,autoClear:!1,antialias:!0,...n==null?void 0:n.gl},onCreated:m=>{r.current={state:m,map:c,root:a},m.gl.forceContextLoss=()=>{}},camera:{matrixAutoUpdate:!1},size:{width:s.clientWidth,height:s.clientHeight,top:0,left:0,...n==null?void 0:n.size}}),r.current={map:c,root:a},setTimeout(()=>e(!0))}),i=p(()=>{setTimeout(()=>{r.current&&r.current.root.unmount()})});return{onAdd:o,onRemove:i,mounted:t}}function z(r,n){const t=M.useMap();return p((o,i)=>{var a;if(!t.current||!((a=n.current)!=null&&a.state))return;const c=n.current.state.camera,l=n.current.state.gl,s=n.current.state.advance;c.projectionMatrix.fromArray(i).multiply(r),c.projectionMatrixInverse.copy(c.projectionMatrix).invert(),l.resetState(),s(Date.now()*.001,!0),t.current.triggerRepaint()})}g.extend(j);const L=u.memo(({longitude:r,latitude:n,altitude:t=0,children:e,...o})=>{const i=u.useId(),c=u.useRef(),l=u.useMemo(()=>R({latitude:n,longitude:r,altitude:t}),[n,r,t]),{onAdd:s,onRemove:a,mounted:m}=S(c,o),w=z(l,c);return u.useEffect(()=>{m&&c.current&&c.current.root.render(f.jsx(f.Fragment,{children:e}))},[c,m,e]),f.jsx(M.Layer,{id:i,type:"custom",renderingMode:"3d",onAdd:s,onRemove:a,render:w})});exports.Canvas=L;

package/dist/es/main.js2.mjs

@@ -1,40 +1,39 @@
 import { jsx as s, Fragment as a } from "react/jsx-runtime";
 import { extend as x } from "@react-three/fiber";
 import { memo as R, useId as E, useRef as M, useMemo as v, useEffect as y } from "react";
-import "./main.js3.mjs";
-import * as A from "three";
-import { coordsToMatrix as T } from "./main.js4.mjs";
-import { useOnAdd as g } from "./main.js5.mjs";
-import { useRender as j } from "./main.js6.mjs";
-import C from "./main.js7.mjs";
-x(A);
-const w = R(({
+import { Layer as A } from "react-map-gl/maplibre";
+import * as T from "three";
+import { coordsToMatrix as g } from "./main.js3.mjs";
+import { useOnAdd as j } from "./main.js4.mjs";
+import { useRender as C } from "./main.js5.mjs";
+x(T);
+const q = R(({
   longitude: o,
   latitude: e,
   altitude: m = 0,
   children: t,
   ...f
 }) => {
-  const d = E(), r = M(), p = v(() => T({
+  const d = E(), r = M(), c = v(() => g({
     latitude: e,
     longitude: o,
     altitude: m
-  }), [e, o, m]), { onAdd: c, onRemove: i, mounted: n } = g(r, f), u = j(p, r);
+  }), [e, o, m]), { onAdd: p, onRemove: u, mounted: n } = j(r, f), i = C(c, r);
   return y(() => {
     n && r.current && r.current.root.render(/* @__PURE__ */ s(a, { children: t }));
   }, [r, n, t]), /* @__PURE__ */ s(
-    C,
+    A,
     {
       id: d,
       type: "custom",
       renderingMode: "3d",
-      onAdd: c,
-      onRemove: i,
-      render: u
+      onAdd: p,
+      onRemove: u,
+      render: i
     }
   );
 });
 export {
-  w as Canvas
+  q as Canvas
 };
 //# sourceMappingURL=main.js2.mjs.map

package/dist/es/main.js2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main.js2.mjs","sources":["../../src/canvas/canvas.tsx"],"sourcesContent":["import { RenderProps, extend } from \"@react-three/fiber\";\nimport { PropsWithChildren, memo, useEffect, useId, useMemo, useRef } from \"react\";\nimport { Layer } from \"react-map-gl/maplibre\";\nimport * as THREE from \"three\";\nimport { coordsToMatrix } from \"./coords-to-matrix\";\nimport { StateRef } from \"./state-ref\";\nimport { useOnAdd } from \"./use-on-add\";\nimport { useRender } from \"./use-render\";\n\nextend(THREE);\n\nexport interface CanvasProps extends RenderProps<HTMLCanvasElement>, PropsWithChildren {\n  longitude: number,\n  latitude: number,\n  altitude?: number\n}\n\n/** react`-three-fiber` canvas inside `MapLibre` */\nexport const Canvas = memo<CanvasProps>(({\n  longitude, latitude, altitude = 0,\n  children, ...renderProps\n})=>{\n  const id = useId();\n  \n  const ref : StateRef = useRef();\n\n  const m4 = useMemo(()=>coordsToMatrix({\n    latitude, longitude, altitude\n  }), [latitude, longitude, altitude])\n\n  const {onAdd, onRemove, mounted} = useOnAdd(ref, renderProps);\n\n  const render = useRender(m4, ref);\n\n  useEffect(()=>{\n    if(!mounted) return;\n    if(!ref.current) return;\n    ref.current.root.render(<>{children}</>);\n  }, [ref, mounted, children])\n\n  return <Layer\n    id={id}\n    type=\"custom\"\n    renderingMode=\"3d\"\n    onAdd={onAdd}\n    onRemove={onRemove}\n    render={render}\n  />\n})"],"names":["extend","THREE","Canvas","memo","longitude","latitude","altitude","children","renderProps","id","useId","ref","useRef","m4","useMemo","coordsToMatrix","onAdd","onRemove","mounted","useOnAdd","render","useRender","useEffect","jsx","Fragment","Layer"],"mappings":";;;;;;;;;AASAA,EAAOC,CAAK;AASC,MAAAC,IAASC,EAAkB,CAAC;AAAA,EACvC,WAAAC;AAAA,EAAW,UAAAC;AAAA,EAAU,UAAAC,IAAW;AAAA,EAChC,UAAAC;AAAA,EAAU,GAAGC;AACf,MAAI;AACF,QAAMC,IAAKC,KAELC,IAAiBC,KAEjBC,IAAKC,EAAQ,MAAIC,EAAe;AAAA,IACpC,UAAAV;AAAA,IAAU,WAAAD;AAAA,IAAW,UAAAE;AAAA,EACtB,CAAA,GAAG,CAACD,GAAUD,GAAWE,CAAQ,CAAC,GAE7B,EAAC,OAAAU,GAAO,UAAAC,GAAU,SAAAC,EAAW,IAAAC,EAASR,GAAKH,CAAW,GAEtDY,IAASC,EAAUR,GAAIF,CAAG;AAEhC,SAAAW,EAAU,MAAI;AACZ,IAAIJ,KACAP,EAAI,WACRA,EAAI,QAAQ,KAAK,OAAO,gBAAAY,EAAAC,GAAA,EAAG,UAAAjB,EAAS,CAAA,CAAG;AAAA,EACtC,GAAA,CAACI,GAAKO,GAASX,CAAQ,CAAC,GAEpB,gBAAAgB;AAAA,IAACE;AAAA,IAAA;AAAA,MACN,IAAAhB;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd,OAAAO;AAAA,MACA,UAAAC;AAAA,MACA,QAAAG;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}
+{"version":3,"file":"main.js2.mjs","sources":["../../src/canvas/canvas.tsx"],"sourcesContent":["import { RenderProps, extend } from \"@react-three/fiber\";\nimport { PropsWithChildren, memo, useEffect, useId, useMemo, useRef } from \"react\";\nimport { Layer } from \"react-map-gl/maplibre\";\nimport * as THREE from \"three\";\nimport { coordsToMatrix } from \"./coords-to-matrix\";\nimport { StateRef } from \"./state-ref\";\nimport { useOnAdd } from \"./use-on-add\";\nimport { useRender } from \"./use-render\";\n\nextend(THREE);\n\nexport interface CanvasProps extends RenderProps<HTMLCanvasElement>, PropsWithChildren {\n  longitude: number,\n  latitude: number,\n  altitude?: number\n}\n\n/** react`-three-fiber` canvas inside `MapLibre` */\nexport const Canvas = memo<CanvasProps>(({\n  longitude, latitude, altitude = 0,\n  children, ...renderProps\n})=>{\n  const id = useId();\n  \n  const ref : StateRef = useRef();\n\n  const m4 = useMemo(()=>coordsToMatrix({\n    latitude, longitude, altitude\n  }), [latitude, longitude, altitude])\n\n  const {onAdd, onRemove, mounted} = useOnAdd(ref, renderProps);\n\n  const render = useRender(m4, ref);\n\n  useEffect(()=>{\n    if(!mounted) return;\n    if(!ref.current) return;\n    ref.current.root.render(<>{children}</>);\n  }, [ref, mounted, children])\n\n  return <Layer\n    id={id}\n    type=\"custom\"\n    renderingMode=\"3d\"\n    onAdd={onAdd}\n    onRemove={onRemove}\n    render={render}\n  />\n})"],"names":["extend","THREE","Canvas","memo","longitude","latitude","altitude","children","renderProps","id","useId","ref","useRef","m4","useMemo","coordsToMatrix","onAdd","onRemove","mounted","useOnAdd","render","useRender","useEffect","jsx","Fragment","Layer"],"mappings":";;;;;;;;AASAA,EAAOC,CAAK;AASC,MAAAC,IAASC,EAAkB,CAAC;AAAA,EACvC,WAAAC;AAAA,EAAW,UAAAC;AAAA,EAAU,UAAAC,IAAW;AAAA,EAChC,UAAAC;AAAA,EAAU,GAAGC;AACf,MAAI;AACF,QAAMC,IAAKC,KAELC,IAAiBC,KAEjBC,IAAKC,EAAQ,MAAIC,EAAe;AAAA,IACpC,UAAAV;AAAA,IAAU,WAAAD;AAAA,IAAW,UAAAE;AAAA,EACtB,CAAA,GAAG,CAACD,GAAUD,GAAWE,CAAQ,CAAC,GAE7B,EAAC,OAAAU,GAAO,UAAAC,GAAU,SAAAC,EAAW,IAAAC,EAASR,GAAKH,CAAW,GAEtDY,IAASC,EAAUR,GAAIF,CAAG;AAEhC,SAAAW,EAAU,MAAI;AACZ,IAAIJ,KACAP,EAAI,WACRA,EAAI,QAAQ,KAAK,OAAO,gBAAAY,EAAAC,GAAA,EAAG,UAAAjB,EAAS,CAAA,CAAG;AAAA,EACtC,GAAA,CAACI,GAAKO,GAASX,CAAQ,CAAC,GAEpB,gBAAAgB;AAAA,IAACE;AAAA,IAAA;AAAA,MACN,IAAAhB;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd,OAAAO;AAAA,MACA,UAAAC;AAAA,MACA,QAAAG;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}

package/dist/es/main.js3.mjs

@@ -1,21 +1,11 @@
-import * as t from "react";
-import p from "./main.js8.mjs";
-import "./main.js9.mjs";
-import "./main.js10.mjs";
-import "./main.js11.mjs";
-import "./main.js12.mjs";
-import "./main.js13.mjs";
-import "./main.js14.mjs";
-import "./main.js15.mjs";
-import { useMap as m } from "./main.js16.mjs";
-function b() {
-  return m();
+import { MercatorCoordinate as m } from "maplibre-gl";
+import { Quaternion as u, Euler as l, Vector3 as s, Matrix4 as p } from "three";
+const o = new u(), w = new l(), r = new s(), n = new s();
+function x({ longitude: c, latitude: a, altitude: i }) {
+  const t = m.fromLngLat([c, a], i), e = t.meterInMercatorCoordinateUnits();
+  return r.set(t.x, t.y, t.z || 0), n.set(e, -e, e), o.setFromEuler(w.set(-Math.PI * 0.5, 0, 0)), new p().compose(r, o, n);
 }
-const i = import("maplibre-gl");
-t.forwardRef(function(r, o) {
-  return p(r, o, i);
-});
 export {
-  b as useMap
+  x as coordsToMatrix
 };
 //# sourceMappingURL=main.js3.mjs.map

package/dist/es/main.js3.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main.js3.mjs","sources":["../../node_modules/react-map-gl/dist/esm/exports-maplibre.js"],"sourcesContent":["import * as React from 'react';\nimport { default as _Map } from './components/map';\nimport { default as _Marker } from './components/marker';\nimport { default as _Popup } from './components/popup';\nimport { default as _AttributionControl } from './components/attribution-control';\nimport { default as _FullscreenControl } from './components/fullscreen-control';\nimport { default as _GeolocateControl } from './components/geolocate-control';\nimport { default as _NavigationControl } from './components/navigation-control';\nimport { default as _ScaleControl } from './components/scale-control';\nimport { useMap as _useMap } from './components/use-map';\nexport function useMap() {\n    return _useMap();\n}\nconst mapLib = import('maplibre-gl');\nexport const Map = (() => {\n    return React.forwardRef(function Map(props, ref) {\n        return _Map(props, ref, mapLib);\n    });\n})();\nexport const Marker = _Marker;\nexport const Popup = _Popup;\nexport const AttributionControl = _AttributionControl;\nexport const FullscreenControl = _FullscreenControl;\nexport const NavigationControl = _NavigationControl;\nexport const GeolocateControl = _GeolocateControl;\nexport const ScaleControl = _ScaleControl;\nexport { default as Source } from './components/source';\nexport { default as Layer } from './components/layer';\nexport { default as useControl } from './components/use-control';\nexport { MapProvider } from './components/use-map';\nexport default Map;\n// Types\nexport * from './types/public';\n//# sourceMappingURL=exports-maplibre.js.map"],"names":["useMap","_useMap","mapLib","React","props","ref","_Map"],"mappings":";;;;;;;;;;AAUO,SAASA,IAAS;AACrB,SAAOC,EAAO;AAClB;AACA,MAAMC,IAAS,OAAO,aAAa;AAExBC,EAAM,WAAW,SAAaC,GAAOC,GAAK;AAC7C,SAAOC,EAAKF,GAAOC,GAAKH,CAAM;AACtC,CAAK;","x_google_ignoreList":[0]}
+{"version":3,"file":"main.js3.mjs","sources":["../../src/canvas/coords-to-matrix.ts"],"sourcesContent":["import { MercatorCoordinate } from \"maplibre-gl\";\nimport { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix ({ longitude, latitude, altitude }: {\n  longitude: number, latitude: number, altitude: number\n}) {\n  const center = MercatorCoordinate.fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n  pos.set(center.x, center.y, center.z || 0);\n  scale.set(scaleUnit, -scaleUnit, scaleUnit);\n  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));  \n  return new Matrix4().compose(pos, quat, scale);\n}\n"],"names":["quat","Quaternion","euler","Euler","pos","Vector3","scale","coordsToMatrix","longitude","latitude","altitude","center","MercatorCoordinate","scaleUnit","Matrix4"],"mappings":";;AAGA,MAAMA,IAAO,IAAIC,KACXC,IAAQ,IAAIC,KACZC,IAAM,IAAIC,KACVC,IAAQ,IAAID;AAGX,SAASE,EAAgB,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,KAEpD;AACD,QAAMC,IAASC,EAAmB,WAAW,CAACJ,GAAWC,CAAQ,GAAGC,CAAQ,GACtEG,IAAYF,EAAO;AACzB,SAAAP,EAAI,IAAIO,EAAO,GAAGA,EAAO,GAAGA,EAAO,KAAK,CAAC,GACzCL,EAAM,IAAIO,GAAW,CAACA,GAAWA,CAAS,GACrCb,EAAA,aAAaE,EAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC,GACzC,IAAIY,EAAQ,EAAE,QAAQV,GAAKJ,GAAMM,CAAK;AAC/C;"}

package/dist/es/main.js4.mjs

@@ -1,11 +1,53 @@
-import { MercatorCoordinate as m } from "maplibre-gl";
-import { Quaternion as u, Euler as l, Vector3 as s, Matrix4 as p } from "three";
-const o = new u(), w = new l(), r = new s(), n = new s();
-function x({ longitude: c, latitude: a, altitude: i }) {
-  const t = m.fromLngLat([c, a], i), e = t.meterInMercatorCoordinateUnits();
-  return r.set(t.x, t.y, t.z || 0), n.set(e, -e, e), o.setFromEuler(w.set(-Math.PI * 0.5, 0, 0)), new p().compose(r, o, n);
+import { createRoot as g } from "@react-three/fiber";
+import { createEvents as h } from "./main.js6.mjs";
+import { useFunction as c } from "./main.js7.mjs";
+import { useState as v } from "react";
+function C(e, t) {
+  const [a, m] = v(!1), s = c((o, f) => {
+    const i = o.getCanvas(), n = g(i);
+    n.configure({
+      frameloop: "never",
+      dpr: window.devicePixelRatio,
+      shadows: !0,
+      events: h(),
+      ...t,
+      gl: {
+        context: f,
+        depth: !0,
+        autoClear: !1,
+        antialias: !0,
+        ...t == null ? void 0 : t.gl
+      },
+      onCreated: (u) => {
+        e.current = {
+          state: u,
+          map: o,
+          root: n
+        }, u.gl.forceContextLoss = () => {
+        };
+      },
+      camera: {
+        matrixAutoUpdate: !1
+      },
+      size: {
+        width: i.clientWidth,
+        height: i.clientHeight,
+        top: 0,
+        left: 0,
+        ...t == null ? void 0 : t.size
+      }
+    }), e.current = {
+      map: o,
+      root: n
+    }, setTimeout(() => m(!0));
+  }), l = c(() => {
+    setTimeout(() => {
+      e.current && e.current.root.unmount();
+    });
+  });
+  return { onAdd: s, onRemove: l, mounted: a };
 }
 export {
-  x as coordsToMatrix
+  C as useOnAdd
 };
 //# sourceMappingURL=main.js4.mjs.map

package/dist/es/main.js4.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main.js4.mjs","sources":["../../src/canvas/coords-to-matrix.ts"],"sourcesContent":["import { MercatorCoordinate } from \"maplibre-gl\";\nimport { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix ({ longitude, latitude, altitude }: {\n  longitude: number, latitude: number, altitude: number\n}) {\n  const center = MercatorCoordinate.fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n  pos.set(center.x, center.y, center.z || 0);\n  scale.set(scaleUnit, -scaleUnit, scaleUnit);\n  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));  \n  return new Matrix4().compose(pos, quat, scale);\n}\n"],"names":["quat","Quaternion","euler","Euler","pos","Vector3","scale","coordsToMatrix","longitude","latitude","altitude","center","MercatorCoordinate","scaleUnit","Matrix4"],"mappings":";;AAGA,MAAMA,IAAO,IAAIC,KACXC,IAAQ,IAAIC,KACZC,IAAM,IAAIC,KACVC,IAAQ,IAAID;AAGX,SAASE,EAAgB,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,KAEpD;AACD,QAAMC,IAASC,EAAmB,WAAW,CAACJ,GAAWC,CAAQ,GAAGC,CAAQ,GACtEG,IAAYF,EAAO;AACzB,SAAAP,EAAI,IAAIO,EAAO,GAAGA,EAAO,GAAGA,EAAO,KAAK,CAAC,GACzCL,EAAM,IAAIO,GAAW,CAACA,GAAWA,CAAS,GACrCb,EAAA,aAAaE,EAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC,GACzC,IAAIY,EAAQ,EAAE,QAAQV,GAAKJ,GAAMM,CAAK;AAC/C;"}
+{"version":3,"file":"main.js4.mjs","sources":["../../src/canvas/use-on-add.ts"],"sourcesContent":["import { RenderProps, createRoot } from \"@react-three/fiber\";\nimport { MapInstance } from \"react-map-gl\";\nimport { createEvents } from \"./create-events\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\nimport { useState } from \"react\";\n\nexport function useOnAdd (ref: StateRef, renderProps: RenderProps<HTMLCanvasElement>) {\n\n  const [mounted, setMounted] = useState(false);\n\n  const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext)=>{\n   \n    const canvas = map.getCanvas();\n    const root = createRoot(canvas);\n    root.configure({\n      frameloop: \"never\",\n      dpr: window.devicePixelRatio,\n      shadows: true,\n      events: createEvents(),\n      ...renderProps,\n      gl: {\n        context: gl,\n        depth: true,\n        autoClear: false,\n        antialias: true,\n        ...renderProps?.gl,\n      },\n      onCreated: (state) => {\n        ref.current = {\n          state,\n          map,\n          root,\n        }\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        state.gl.forceContextLoss = () => { };\n      },\n      camera: {\n        matrixAutoUpdate: false,\n      },\n      size: {\n        width: canvas.clientWidth,\n        height: canvas.clientHeight,\n        top: 0,\n        left: 0,\n        ...renderProps?.size,\n      },\n    });\n\n    ref.current = {\n      map,\n      root,\n    }\n\n    setTimeout(()=>setMounted(true));\n    \n  })\n\n  const onRemove = useFunction(()=>{\n    setTimeout(()=>{\n      if(!ref.current) return;\n      ref.current.root.unmount();\n    })\n  })\n\n  return {onAdd, onRemove, mounted};\n}"],"names":["useOnAdd","ref","renderProps","mounted","setMounted","useState","onAdd","useFunction","map","gl","canvas","root","createRoot","createEvents","state","onRemove"],"mappings":";;;;AAOgB,SAAAA,EAAUC,GAAeC,GAA6C;AAEpF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAQC,EAAY,CAACC,GAAkBC,MAA4B;AAEjE,UAAAC,IAASF,EAAI,aACbG,IAAOC,EAAWF,CAAM;AAC9B,IAAAC,EAAK,UAAU;AAAA,MACb,WAAW;AAAA,MACX,KAAK,OAAO;AAAA,MACZ,SAAS;AAAA,MACT,QAAQE,EAAa;AAAA,MACrB,GAAGX;AAAA,MACH,IAAI;AAAA,QACF,SAASO;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAGP,KAAA,gBAAAA,EAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAACY,MAAU;AACpB,QAAAb,EAAI,UAAU;AAAA,UACZ,OAAAa;AAAA,UACA,KAAAN;AAAA,UACA,MAAAG;AAAA,QAAA,GAGIG,EAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,MACpB;AAAA,MACA,MAAM;AAAA,QACJ,OAAOJ,EAAO;AAAA,QACd,QAAQA,EAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAGR,KAAA,gBAAAA,EAAa;AAAA,MAClB;AAAA,IAAA,CACD,GAEDD,EAAI,UAAU;AAAA,MACZ,KAAAO;AAAA,MACA,MAAAG;AAAA,IAAA,GAGS,WAAA,MAAIP,EAAW,EAAI,CAAC;AAAA,EAAA,CAEhC,GAEKW,IAAWR,EAAY,MAAI;AAC/B,eAAW,MAAI;AACb,MAAIN,EAAI,WACJA,EAAA,QAAQ,KAAK;IAAQ,CAC1B;AAAA,EAAA,CACF;AAEM,SAAA,EAAC,OAAAK,GAAO,UAAAS,GAAU,SAAAZ;AAC3B;"}

package/dist/es/main.js5.mjs

@@ -1,53 +1,16 @@
-import { createRoot as g } from "@react-three/fiber";
-import { createEvents as h } from "./main.js17.mjs";
-import { useFunction as c } from "./main.js18.mjs";
-import { useState as v } from "react";
-function C(e, t) {
-  const [a, m] = v(!1), s = c((o, f) => {
-    const i = o.getCanvas(), n = g(i);
-    n.configure({
-      frameloop: "never",
-      dpr: window.devicePixelRatio,
-      shadows: !0,
-      events: h(),
-      ...t,
-      gl: {
-        context: f,
-        depth: !0,
-        autoClear: !1,
-        antialias: !0,
-        ...t == null ? void 0 : t.gl
-      },
-      onCreated: (u) => {
-        e.current = {
-          state: u,
-          map: o,
-          root: n
-        }, u.gl.forceContextLoss = () => {
-        };
-      },
-      camera: {
-        matrixAutoUpdate: !1
-      },
-      size: {
-        width: i.clientWidth,
-        height: i.clientHeight,
-        top: 0,
-        left: 0,
-        ...t == null ? void 0 : t.size
-      }
-    }), e.current = {
-      map: o,
-      root: n
-    }, setTimeout(() => m(!0));
-  }), l = c(() => {
-    setTimeout(() => {
-      e.current && e.current.root.unmount();
-    });
+import { useFunction as u } from "./main.js7.mjs";
+import { useMap as s } from "react-map-gl/maplibre";
+function l(a, r) {
+  const e = s();
+  return u((m, c) => {
+    var n;
+    if (!e.current || !((n = r.current) != null && n.state))
+      return;
+    const t = r.current.state.camera, o = r.current.state.gl, i = r.current.state.advance;
+    t.projectionMatrix.fromArray(c).multiply(a), t.projectionMatrixInverse.copy(t.projectionMatrix).invert(), o.resetState(), i(Date.now() * 1e-3, !0), e.current.triggerRepaint();
   });
-  return { onAdd: s, onRemove: l, mounted: a };
 }
 export {
-  C as useOnAdd
+  l as useRender
 };
 //# sourceMappingURL=main.js5.mjs.map

package/dist/es/main.js5.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main.js5.mjs","sources":["../../src/canvas/use-on-add.ts"],"sourcesContent":["import { RenderProps, createRoot } from \"@react-three/fiber\";\nimport { MapInstance } from \"react-map-gl\";\nimport { createEvents } from \"./create-events\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\nimport { useState } from \"react\";\n\nexport function useOnAdd (ref: StateRef, renderProps: RenderProps<HTMLCanvasElement>) {\n\n  const [mounted, setMounted] = useState(false);\n\n  const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext)=>{\n   \n    const canvas = map.getCanvas();\n    const root = createRoot(canvas);\n    root.configure({\n      frameloop: \"never\",\n      dpr: window.devicePixelRatio,\n      shadows: true,\n      events: createEvents(),\n      ...renderProps,\n      gl: {\n        context: gl,\n        depth: true,\n        autoClear: false,\n        antialias: true,\n        ...renderProps?.gl,\n      },\n      onCreated: (state) => {\n        ref.current = {\n          state,\n          map,\n          root,\n        }\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        state.gl.forceContextLoss = () => { };\n      },\n      camera: {\n        matrixAutoUpdate: false,\n      },\n      size: {\n        width: canvas.clientWidth,\n        height: canvas.clientHeight,\n        top: 0,\n        left: 0,\n        ...renderProps?.size,\n      },\n    });\n\n    ref.current = {\n      map,\n      root,\n    }\n\n    setTimeout(()=>setMounted(true));\n    \n  })\n\n  const onRemove = useFunction(()=>{\n    setTimeout(()=>{\n      if(!ref.current) return;\n      ref.current.root.unmount();\n    })\n  })\n\n  return {onAdd, onRemove, mounted};\n}"],"names":["useOnAdd","ref","renderProps","mounted","setMounted","useState","onAdd","useFunction","map","gl","canvas","root","createRoot","createEvents","state","onRemove"],"mappings":";;;;AAOgB,SAAAA,EAAUC,GAAeC,GAA6C;AAEpF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAQC,EAAY,CAACC,GAAkBC,MAA4B;AAEjE,UAAAC,IAASF,EAAI,aACbG,IAAOC,EAAWF,CAAM;AAC9B,IAAAC,EAAK,UAAU;AAAA,MACb,WAAW;AAAA,MACX,KAAK,OAAO;AAAA,MACZ,SAAS;AAAA,MACT,QAAQE,EAAa;AAAA,MACrB,GAAGX;AAAA,MACH,IAAI;AAAA,QACF,SAASO;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAGP,KAAA,gBAAAA,EAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAACY,MAAU;AACpB,QAAAb,EAAI,UAAU;AAAA,UACZ,OAAAa;AAAA,UACA,KAAAN;AAAA,UACA,MAAAG;AAAA,QAAA,GAGIG,EAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,MACpB;AAAA,MACA,MAAM;AAAA,QACJ,OAAOJ,EAAO;AAAA,QACd,QAAQA,EAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAGR,KAAA,gBAAAA,EAAa;AAAA,MAClB;AAAA,IAAA,CACD,GAEDD,EAAI,UAAU;AAAA,MACZ,KAAAO;AAAA,MACA,MAAAG;AAAA,IAAA,GAGS,WAAA,MAAIP,EAAW,EAAI,CAAC;AAAA,EAAA,CAEhC,GAEKW,IAAWR,EAAY,MAAI;AAC/B,eAAW,MAAI;AACb,MAAIN,EAAI,WACJA,EAAA,QAAQ,KAAK;IAAQ,CAC1B;AAAA,EAAA,CACF;AAEM,SAAA,EAAC,OAAAK,GAAO,UAAAS,GAAU,SAAAZ;AAC3B;"}
+{"version":3,"file":"main.js5.mjs","sources":["../../src/canvas/use-render.ts"],"sourcesContent":["import { Matrix4 } from \"three\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\nimport { useMap } from \"react-map-gl/maplibre\";\n\nexport function useRender(\n  m4: Matrix4, ref: StateRef\n  ) {\n\n  const map = useMap()\n\n  const render = useFunction((_gl: WebGL2RenderingContext, matrix: number[])=>{\n    if(!map.current) return;\n    if(!ref.current?.state) return;\n    const camera = ref.current.state.camera;\n    const gl = ref.current.state.gl;\n    const advance = ref.current.state.advance;\n    camera.projectionMatrix.fromArray(matrix).multiply(m4);\n    camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    map.current.triggerRepaint();\n  })\n\n  return render;\n\n}"],"names":["useRender","m4","ref","map","useMap","useFunction","_gl","matrix","_a","camera","gl","advance"],"mappings":";;AAKgB,SAAAA,EACdC,GAAaC,GACX;AAEF,QAAMC,IAAMC;AAeL,SAbQC,EAAY,CAACC,GAA6BC,MAAmB;;AAEvE,QADA,CAACJ,EAAI,WACL,GAACK,IAAAN,EAAI,YAAJ,QAAAM,EAAa;AAAO;AAClB,UAAAC,IAASP,EAAI,QAAQ,MAAM,QAC3BQ,IAAKR,EAAI,QAAQ,MAAM,IACvBS,IAAUT,EAAI,QAAQ,MAAM;AAClC,IAAAO,EAAO,iBAAiB,UAAUF,CAAM,EAAE,SAASN,CAAE,GACrDQ,EAAO,wBAAwB,KAAKA,EAAO,gBAAgB,EAAE,UAC7DC,EAAG,WAAW,GACdC,EAAQ,KAAK,IAAQ,IAAA,MAAO,EAAI,GAChCR,EAAI,QAAQ;EAAe,CAC5B;AAIH;"}

package/dist/es/main.js6.mjs

@@ -1,16 +1,56 @@
-import { useFunction as u } from "./main.js18.mjs";
-import { useMap as s } from "./main.js3.mjs";
-function l(a, r) {
-  const e = s();
-  return u((m, c) => {
-    var n;
-    if (!e.current || !((n = r.current) != null && n.state))
-      return;
-    const t = r.current.state.camera, o = r.current.state.gl, i = r.current.state.advance;
-    t.projectionMatrix.fromArray(c).multiply(a), t.projectionMatrixInverse.copy(t.projectionMatrix).invert(), o.resetState(), i(Date.now() * 1e-3, !0), e.current.triggerRepaint();
-  });
+import { createEvents as p } from "@react-three/fiber";
+const c = {
+  onClick: ["click", !1],
+  onContextMenu: ["contextmenu", !1],
+  onDoubleClick: ["dblclick", !1],
+  onWheel: ["wheel", !0],
+  onPointerDown: ["pointerdown", !0],
+  onPointerUp: ["pointerup", !0],
+  onPointerLeave: ["pointerleave", !0],
+  onPointerMove: ["pointermove", !0],
+  onPointerCancel: ["pointercancel", !0],
+  onLostPointerCapture: ["lostpointercapture", !0]
+};
+function u() {
+  return (o) => {
+    const { handlePointer: a } = p(o);
+    return {
+      priority: 1,
+      enabled: !0,
+      compute(n, e) {
+        e.size.width = e.gl.domElement.width, e.size.height = e.gl.domElement.height, e.pointer.x = n.offsetX / (e.size.width / window.devicePixelRatio) * 2 - 1, e.pointer.y = 1 - n.offsetY / (e.size.height / window.devicePixelRatio) * 2, e.raycaster.camera = e.camera, e.raycaster.ray.origin.setScalar(0).applyMatrix4(e.camera.projectionMatrixInverse), e.raycaster.ray.direction.set(e.pointer.x, e.pointer.y, 1).applyMatrix4(e.camera.projectionMatrixInverse).sub(e.raycaster.ray.origin).normalize();
+      },
+      connected: void 0,
+      handlers: Object.keys(c).reduce(
+        (n, e) => ({ ...n, [e]: a(e) }),
+        {}
+      ),
+      update: () => {
+        var t;
+        const { events: n, internal: e } = o.getState();
+        (t = e.lastEvent) != null && t.current && n.handlers && n.handlers.onPointerMove(e.lastEvent.current);
+      },
+      connect: (n) => {
+        var i;
+        const { set: e, events: t } = o.getState();
+        (i = t.disconnect) == null || i.call(t), e((r) => ({ events: { ...r.events, connected: n } })), Object.entries(t.handlers ?? []).forEach(([r, l]) => {
+          const [s, d] = c[r];
+          n.addEventListener(s, l, { passive: d });
+        });
+      },
+      disconnect: () => {
+        const { set: n, events: e } = o.getState();
+        e.connected && (Object.entries(e.handlers ?? []).forEach(([t, i]) => {
+          if (e && e.connected instanceof HTMLElement) {
+            const [r] = c[t];
+            e.connected.removeEventListener(r, i);
+          }
+        }), n((t) => ({ events: { ...t.events, connected: void 0 } })));
+      }
+    };
+  };
 }
 export {
-  l as useRender
+  u as createEvents
 };
 //# sourceMappingURL=main.js6.mjs.map

package/dist/es/main.js6.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main.js6.mjs","sources":["../../src/canvas/use-render.ts"],"sourcesContent":["import { Matrix4 } from \"three\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\nimport { useMap } from \"react-map-gl/maplibre\";\n\nexport function useRender(\n  m4: Matrix4, ref: StateRef\n  ) {\n\n  const map = useMap()\n\n  const render = useFunction((_gl: WebGL2RenderingContext, matrix: number[])=>{\n    if(!map.current) return;\n    if(!ref.current?.state) return;\n    const camera = ref.current.state.camera;\n    const gl = ref.current.state.gl;\n    const advance = ref.current.state.advance;\n    camera.projectionMatrix.fromArray(matrix).multiply(m4);\n    camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    map.current.triggerRepaint();\n  })\n\n  return render;\n\n}"],"names":["useRender","m4","ref","map","useMap","useFunction","_gl","matrix","_a","camera","gl","advance"],"mappings":";;AAKgB,SAAAA,EACdC,GAAaC,GACX;AAEF,QAAMC,IAAMC;AAeL,SAbQC,EAAY,CAACC,GAA6BC,MAAmB;;AAEvE,QADA,CAACJ,EAAI,WACL,GAACK,IAAAN,EAAI,YAAJ,QAAAM,EAAa;AAAO;AAClB,UAAAC,IAASP,EAAI,QAAQ,MAAM,QAC3BQ,IAAKR,EAAI,QAAQ,MAAM,IACvBS,IAAUT,EAAI,QAAQ,MAAM;AAClC,IAAAO,EAAO,iBAAiB,UAAUF,CAAM,EAAE,SAASN,CAAE,GACrDQ,EAAO,wBAAwB,KAAKA,EAAO,gBAAgB,EAAE,UAC7DC,EAAG,WAAW,GACdC,EAAQ,KAAK,IAAQ,IAAA,MAAO,EAAI,GAChCR,EAAI,QAAQ;EAAe,CAC5B;AAIH;"}
+{"version":3,"file":"main.js6.mjs","sources":["../../src/canvas/create-events.ts"],"sourcesContent":["import { Events, RenderProps, RootState, createEvents as createFiberEvents } from \"@react-three/fiber\";\nimport { UseBoundStore } from \"zustand\";\n\ntype DomEvent = PointerEvent | MouseEvent | WheelEvent;\n\nconst DOM_EVENTS = {\n  onClick: [\"click\", false],\n  onContextMenu: [\"contextmenu\", false],\n  onDoubleClick: [\"dblclick\", false],\n  onWheel: [\"wheel\", true],\n  onPointerDown: [\"pointerdown\", true],\n  onPointerUp: [\"pointerup\", true],\n  onPointerLeave: [\"pointerleave\", true],\n  onPointerMove: [\"pointermove\", true],\n  onPointerCancel: [\"pointercancel\", true],\n  onLostPointerCapture: [\"lostpointercapture\", true],\n} as const;\n\n/** ThreeLayer event manager for MapLibre and Mapbox */\nexport function createEvents() : RenderProps<HTMLCanvasElement>[\"events\"] {\n  return (store: UseBoundStore<RootState>) => {\n    const { handlePointer } = createFiberEvents(store);\n    return {\n      priority: 1,\n      enabled: true,\n      compute(event: DomEvent, state: RootState) {\n        state.size.width = state.gl.domElement.width;\n        state.size.height = state.gl.domElement.height;\n        state.pointer.x = (event.offsetX / (state.size.width / window.devicePixelRatio)) * 2 - 1;\n        state.pointer.y = 1 - (event.offsetY / (state.size.height / window.devicePixelRatio)) * 2;\n        state.raycaster.camera = state.camera;\n        state.raycaster.ray.origin.setScalar(0).applyMatrix4(state.camera.projectionMatrixInverse);\n        state.raycaster.ray.direction\n          .set(state.pointer.x, state.pointer.y, 1)\n          .applyMatrix4(state.camera.projectionMatrixInverse)\n          .sub(state.raycaster.ray.origin)\n          .normalize();\n      },\n      connected: undefined,\n      handlers: Object.keys(DOM_EVENTS).reduce(\n        (acc, key) => ({ ...acc, [key]: handlePointer(key) }),\n        {}\n      ) as unknown as Events,\n      update: () => {\n        const { events, internal } = store.getState();\n        if (internal.lastEvent?.current && events.handlers) {\n          events.handlers.onPointerMove(internal.lastEvent.current);\n        }\n      },\n      connect: (target: HTMLElement) => {\n        const { set, events } = store.getState();\n        events.disconnect?.();\n        set((state) => ({ events: { ...state.events, connected: target } }));\n        Object.entries(events.handlers ?? []).forEach(([name, event]) => {\n          const [eventName, passive] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];\n          target.addEventListener(eventName, event, { passive });\n        });\n      },\n      disconnect: () => {\n        const { set, events } = store.getState();\n        if (events.connected) {\n          Object.entries(events.handlers ?? []).forEach(([name, event]) => {\n            if (events && events.connected instanceof HTMLElement) {\n              const [eventName] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];\n              events.connected.removeEventListener(eventName, event);\n            }\n          });\n          set((state) => ({ events: { ...state.events, connected: undefined } }));\n        }\n      },\n    };\n  };\n}\n"],"names":["DOM_EVENTS","createEvents","store","handlePointer","createFiberEvents","event","state","acc","key","events","internal","_a","target","set","name","eventName","passive"],"mappings":";AAKA,MAAMA,IAAa;AAAA,EACjB,SAAS,CAAC,SAAS,EAAK;AAAA,EACxB,eAAe,CAAC,eAAe,EAAK;AAAA,EACpC,eAAe,CAAC,YAAY,EAAK;AAAA,EACjC,SAAS,CAAC,SAAS,EAAI;AAAA,EACvB,eAAe,CAAC,eAAe,EAAI;AAAA,EACnC,aAAa,CAAC,aAAa,EAAI;AAAA,EAC/B,gBAAgB,CAAC,gBAAgB,EAAI;AAAA,EACrC,eAAe,CAAC,eAAe,EAAI;AAAA,EACnC,iBAAiB,CAAC,iBAAiB,EAAI;AAAA,EACvC,sBAAsB,CAAC,sBAAsB,EAAI;AACnD;AAGO,SAASC,IAA0D;AACxE,SAAO,CAACC,MAAoC;AAC1C,UAAM,EAAE,eAAAC,EAAA,IAAkBC,EAAkBF,CAAK;AAC1C,WAAA;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQG,GAAiBC,GAAkB;AACzC,QAAAA,EAAM,KAAK,QAAQA,EAAM,GAAG,WAAW,OACvCA,EAAM,KAAK,SAASA,EAAM,GAAG,WAAW,QAClCA,EAAA,QAAQ,IAAKD,EAAM,WAAWC,EAAM,KAAK,QAAQ,OAAO,oBAAqB,IAAI,GACjFA,EAAA,QAAQ,IAAI,IAAKD,EAAM,WAAWC,EAAM,KAAK,SAAS,OAAO,oBAAqB,GAClFA,EAAA,UAAU,SAASA,EAAM,QACzBA,EAAA,UAAU,IAAI,OAAO,UAAU,CAAC,EAAE,aAAaA,EAAM,OAAO,uBAAuB,GACnFA,EAAA,UAAU,IAAI,UACjB,IAAIA,EAAM,QAAQ,GAAGA,EAAM,QAAQ,GAAG,CAAC,EACvC,aAAaA,EAAM,OAAO,uBAAuB,EACjD,IAAIA,EAAM,UAAU,IAAI,MAAM,EAC9B,UAAU;AAAA,MACf;AAAA,MACA,WAAW;AAAA,MACX,UAAU,OAAO,KAAKN,CAAU,EAAE;AAAA,QAChC,CAACO,GAAKC,OAAS,EAAE,GAAGD,GAAK,CAACC,CAAG,GAAGL,EAAcK,CAAG;QACjD,CAAC;AAAA,MACH;AAAA,MACA,QAAQ,MAAM;;AACZ,cAAM,EAAE,QAAAC,GAAQ,UAAAC,EAAS,IAAIR,EAAM,SAAS;AAC5C,SAAIS,IAAAD,EAAS,cAAT,QAAAC,EAAoB,WAAWF,EAAO,YACxCA,EAAO,SAAS,cAAcC,EAAS,UAAU,OAAO;AAAA,MAE5D;AAAA,MACA,SAAS,CAACE,MAAwB;;AAChC,cAAM,EAAE,KAAAC,GAAK,QAAAJ,EAAO,IAAIP,EAAM,SAAS;AACvC,SAAAS,IAAAF,EAAO,eAAP,QAAAE,EAAA,KAAAF,IACII,EAAA,CAACP,OAAW,EAAE,QAAQ,EAAE,GAAGA,EAAM,QAAQ,WAAWM,EAAO,EAAA,EAAI,GAC5D,OAAA,QAAQH,EAAO,YAAY,CAAA,CAAE,EAAE,QAAQ,CAAC,CAACK,GAAMT,CAAK,MAAM;AAC/D,gBAAM,CAACU,GAAWC,CAAO,IAAIhB,EAAWc,CAA+B;AACvE,UAAAF,EAAO,iBAAiBG,GAAWV,GAAO,EAAE,SAAAW,EAAS,CAAA;AAAA,QAAA,CACtD;AAAA,MACH;AAAA,MACA,YAAY,MAAM;AAChB,cAAM,EAAE,KAAAH,GAAK,QAAAJ,EAAO,IAAIP,EAAM,SAAS;AACvC,QAAIO,EAAO,cACF,OAAA,QAAQA,EAAO,YAAY,CAAA,CAAE,EAAE,QAAQ,CAAC,CAACK,GAAMT,CAAK,MAAM;AAC3D,cAAAI,KAAUA,EAAO,qBAAqB,aAAa;AACrD,kBAAM,CAACM,CAAS,IAAIf,EAAWc,CAA+B;AACvD,YAAAL,EAAA,UAAU,oBAAoBM,GAAWV,CAAK;AAAA;AAAA,QACvD,CACD,GACGQ,EAAA,CAACP,OAAW,EAAE,QAAQ,EAAE,GAAGA,EAAM,QAAQ,WAAW,OAAU,EAAA,EAAI;AAAA,MAE1E;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/es/main.js7.mjs

@@ -1,62 +1,9 @@
-import { useContext as m, useRef as L, useState as g, useMemo as x, useEffect as h } from "react";
-import { MapContext as b } from "./main.js8.mjs";
-import d from "./main.js26.mjs";
-import { deepEqual as c } from "./main.js24.mjs";
-function k(t, e, a, o) {
-  if (d(a.id === o.id, "layer id changed"), d(a.type === o.type, "layer type changed"), a.type === "custom" || o.type === "custom")
-    return;
-  const {
-    layout: r = {},
-    paint: f = {},
-    // @ts-expect-error filter is not defined on some layer types
-    filter: y,
-    minzoom: u,
-    maxzoom: l,
-    beforeId: s
-  } = a;
-  if (s !== o.beforeId && t.moveLayer(e, s), r !== o.layout) {
-    const i = o.layout || {};
-    for (const n in r)
-      c(r[n], i[n]) || t.setLayoutProperty(e, n, r[n]);
-    for (const n in i)
-      r.hasOwnProperty(n) || t.setLayoutProperty(e, n, void 0);
-  }
-  if (f !== o.paint) {
-    const i = o.paint || {};
-    for (const n in f)
-      c(f[n], i[n]) || t.setPaintProperty(e, n, f[n]);
-    for (const n in i)
-      f.hasOwnProperty(n) || t.setPaintProperty(e, n, void 0);
-  }
-  c(y, o.filter) || t.setFilter(e, y), (u !== o.minzoom || l !== o.maxzoom) && t.setLayerZoomRange(e, u, l);
-}
-function z(t, e, a) {
-  if (t.style && t.style._loaded && (!("source" in a) || t.getSource(a.source))) {
-    const o = { ...a, id: e };
-    delete o.beforeId, t.addLayer(o, a.beforeId);
-  }
-}
-let I = 0;
-function S(t) {
-  const e = m(b).map.getMap(), a = L(t), [, o] = g(0), r = x(() => t.id || `jsx-layer-${I++}`, []);
-  if (h(() => {
-    if (e) {
-      const y = () => o((u) => u + 1);
-      return e.on("styledata", y), y(), () => {
-        e.off("styledata", y), e.style && e.style._loaded && e.getLayer(r) && e.removeLayer(r);
-      };
-    }
-  }, [e]), e && e.style && e.getLayer(r))
-    try {
-      k(e, r, t, a.current);
-    } catch (y) {
-      console.warn(y);
-    }
-  else
-    z(e, r, t);
-  return a.current = t, null;
-}
+import { useRef as n, useCallback as u } from "react";
+const o = (r) => {
+  const e = n(r);
+  return e.current = r, u((...t) => e.current(...t), []);
+};
 export {
-  S as default
+  o as useFunction
 };
 //# sourceMappingURL=main.js7.mjs.map

package/dist/es/main.js7.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main.js7.mjs","sources":["../../node_modules/react-map-gl/dist/esm/components/layer.js"],"sourcesContent":["import { useContext, useEffect, useMemo, useState, useRef } from 'react';\nimport { MapContext } from './map';\nimport assert from '../utils/assert';\nimport { deepEqual } from '../utils/deep-equal';\n/* eslint-disable complexity, max-statements */\nfunction updateLayer(map, id, props, prevProps) {\n    assert(props.id === prevProps.id, 'layer id changed');\n    assert(props.type === prevProps.type, 'layer type changed');\n    if (props.type === 'custom' || prevProps.type === 'custom') {\n        return;\n    }\n    const { layout = {}, paint = {}, \n    // @ts-expect-error filter is not defined on some layer types\n    filter, minzoom, maxzoom, beforeId } = props;\n    if (beforeId !== prevProps.beforeId) {\n        map.moveLayer(id, beforeId);\n    }\n    if (layout !== prevProps.layout) {\n        const prevLayout = prevProps.layout || {};\n        for (const key in layout) {\n            if (!deepEqual(layout[key], prevLayout[key])) {\n                map.setLayoutProperty(id, key, layout[key]);\n            }\n        }\n        for (const key in prevLayout) {\n            if (!layout.hasOwnProperty(key)) {\n                map.setLayoutProperty(id, key, undefined);\n            }\n        }\n    }\n    if (paint !== prevProps.paint) {\n        const prevPaint = prevProps.paint || {};\n        for (const key in paint) {\n            if (!deepEqual(paint[key], prevPaint[key])) {\n                map.setPaintProperty(id, key, paint[key]);\n            }\n        }\n        for (const key in prevPaint) {\n            if (!paint.hasOwnProperty(key)) {\n                map.setPaintProperty(id, key, undefined);\n            }\n        }\n    }\n    // @ts-expect-error filter is not defined on some layer types\n    if (!deepEqual(filter, prevProps.filter)) {\n        map.setFilter(id, filter);\n    }\n    if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.maxzoom) {\n        map.setLayerZoomRange(id, minzoom, maxzoom);\n    }\n}\nfunction createLayer(map, id, props) {\n    // @ts-ignore\n    if (map.style && map.style._loaded && (!('source' in props) || map.getSource(props.source))) {\n        const options = { ...props, id };\n        delete options.beforeId;\n        // @ts-ignore\n        map.addLayer(options, props.beforeId);\n    }\n}\n/* eslint-enable complexity, max-statements */\nlet layerCounter = 0;\nfunction Layer(props) {\n    const map = useContext(MapContext).map.getMap();\n    const propsRef = useRef(props);\n    const [, setStyleLoaded] = useState(0);\n    const id = useMemo(() => props.id || `jsx-layer-${layerCounter++}`, []);\n    useEffect(() => {\n        if (map) {\n            const forceUpdate = () => setStyleLoaded(version => version + 1);\n            map.on('styledata', forceUpdate);\n            forceUpdate();\n            return () => {\n                map.off('styledata', forceUpdate);\n                // @ts-ignore\n                if (map.style && map.style._loaded && map.getLayer(id)) {\n                    map.removeLayer(id);\n                }\n            };\n        }\n        return undefined;\n    }, [map]);\n    // @ts-ignore\n    const layer = map && map.style && map.getLayer(id);\n    if (layer) {\n        try {\n            updateLayer(map, id, props, propsRef.current);\n        }\n        catch (error) {\n            console.warn(error); // eslint-disable-line\n        }\n    }\n    else {\n        createLayer(map, id, props);\n    }\n    // Store last rendered props\n    propsRef.current = props;\n    return null;\n}\nexport default Layer;\n//# sourceMappingURL=layer.js.map"],"names":["updateLayer","map","id","props","prevProps","assert","layout","paint","filter","minzoom","maxzoom","beforeId","prevLayout","key","deepEqual","prevPaint","createLayer","options","layerCounter","Layer","useContext","MapContext","propsRef","useRef","setStyleLoaded","useState","useMemo","useEffect","forceUpdate","version","error"],"mappings":";;;;AAKA,SAASA,EAAYC,GAAKC,GAAIC,GAAOC,GAAW;AAG5C,MAFAC,EAAOF,EAAM,OAAOC,EAAU,IAAI,kBAAkB,GACpDC,EAAOF,EAAM,SAASC,EAAU,MAAM,oBAAoB,GACtDD,EAAM,SAAS,YAAYC,EAAU,SAAS;AAC9C;AAEJ,QAAM;AAAA,IAAE,QAAAE,IAAS;IAAI,OAAAC,IAAQ,CAAE;AAAA;AAAA,IAE/B,QAAAC;AAAA,IAAQ,SAAAC;AAAA,IAAS,SAAAC;AAAA,IAAS,UAAAC;AAAA,EAAQ,IAAKR;AAIvC,MAHIQ,MAAaP,EAAU,YACvBH,EAAI,UAAUC,GAAIS,CAAQ,GAE1BL,MAAWF,EAAU,QAAQ;AAC7B,UAAMQ,IAAaR,EAAU,UAAU;AACvC,eAAWS,KAAOP;AACd,MAAKQ,EAAUR,EAAOO,CAAG,GAAGD,EAAWC,CAAG,CAAC,KACvCZ,EAAI,kBAAkBC,GAAIW,GAAKP,EAAOO,CAAG,CAAC;AAGlD,eAAWA,KAAOD;AACd,MAAKN,EAAO,eAAeO,CAAG,KAC1BZ,EAAI,kBAAkBC,GAAIW,GAAK,MAAS;AAAA;AAIpD,MAAIN,MAAUH,EAAU,OAAO;AAC3B,UAAMW,IAAYX,EAAU,SAAS;AACrC,eAAWS,KAAON;AACd,MAAKO,EAAUP,EAAMM,CAAG,GAAGE,EAAUF,CAAG,CAAC,KACrCZ,EAAI,iBAAiBC,GAAIW,GAAKN,EAAMM,CAAG,CAAC;AAGhD,eAAWA,KAAOE;AACd,MAAKR,EAAM,eAAeM,CAAG,KACzBZ,EAAI,iBAAiBC,GAAIW,GAAK,MAAS;AAAA;AAKnD,EAAKC,EAAUN,GAAQJ,EAAU,MAAM,KACnCH,EAAI,UAAUC,GAAIM,CAAM,IAExBC,MAAYL,EAAU,WAAWM,MAAYN,EAAU,YACvDH,EAAI,kBAAkBC,GAAIO,GAASC,CAAO;AAElD;AACA,SAASM,EAAYf,GAAKC,GAAIC,GAAO;AAEjC,MAAIF,EAAI,SAASA,EAAI,MAAM,YAAY,EAAE,YAAYE,MAAUF,EAAI,UAAUE,EAAM,MAAM,IAAI;AACzF,UAAMc,IAAU,EAAE,GAAGd,GAAO,IAAAD,EAAE;AAC9B,WAAOe,EAAQ,UAEfhB,EAAI,SAASgB,GAASd,EAAM,QAAQ;AAAA;AAE5C;AAEA,IAAIe,IAAe;AACnB,SAASC,EAAMhB,GAAO;AAClB,QAAMF,IAAMmB,EAAWC,CAAU,EAAE,IAAI,OAAM,GACvCC,IAAWC,EAAOpB,CAAK,GACvB,GAAGqB,CAAc,IAAIC,EAAS,CAAC,GAC/BvB,IAAKwB,EAAQ,MAAMvB,EAAM,MAAM,aAAae,OAAkB,CAAA,CAAE;AAkBtE,MAjBAS,EAAU,MAAM;AACZ,QAAI1B,GAAK;AACL,YAAM2B,IAAc,MAAMJ,EAAe,CAAAK,MAAWA,IAAU,CAAC;AAC/D,aAAA5B,EAAI,GAAG,aAAa2B,CAAW,GAC/BA,KACO,MAAM;AACT,QAAA3B,EAAI,IAAI,aAAa2B,CAAW,GAE5B3B,EAAI,SAASA,EAAI,MAAM,WAAWA,EAAI,SAASC,CAAE,KACjDD,EAAI,YAAYC,CAAE;AAAA,MAEtC;AAAA;AAAA,EAGA,GAAO,CAACD,CAAG,CAAC,GAEMA,KAAOA,EAAI,SAASA,EAAI,SAASC,CAAE;AAE7C,QAAI;AACA,MAAAF,EAAYC,GAAKC,GAAIC,GAAOmB,EAAS,OAAO;AAAA,IAC/C,SACMQ,GAAP;AACI,cAAQ,KAAKA,CAAK;AAAA,IACrB;AAAA;AAGD,IAAAd,EAAYf,GAAKC,GAAIC,CAAK;AAG9B,SAAAmB,EAAS,UAAUnB,GACZ;AACX;","x_google_ignoreList":[0]}
+{"version":3,"file":"main.js7.mjs","sources":["../../src/canvas/use-function.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const useFunction = <T extends (...args: any[]) => any>(callback: T): T => {\n  const callbackRef = useRef(callback);\n  callbackRef.current = callback;\n  return useCallback((...args: any[]) => {\n    return callbackRef.current(...args);\n  }, []) as T;\n};\n"],"names":["useFunction","callback","callbackRef","useRef","useCallback","args"],"mappings":";AAGa,MAAAA,IAAc,CAAoCC,MAAmB;AAC1E,QAAAC,IAAcC,EAAOF,CAAQ;AACnC,SAAAC,EAAY,UAAUD,GACfG,EAAY,IAAIC,MACdH,EAAY,QAAQ,GAAGG,CAAI,GACjC,CAAE,CAAA;AACP;"}

package/package.json

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

package/dist/es/main.js10.mjs

@@ -1,40 +0,0 @@
-import { createPortal as h } from "react-dom";
-import { memo as L, forwardRef as v, useContext as C, useMemo as f, useRef as x, useEffect as m, useImperativeHandle as N } from "react";
-import { applyReactStyle as M } from "./main.js23.mjs";
-import { MapContext as O } from "./main.js8.mjs";
-import { deepEqual as y } from "./main.js24.mjs";
-function r(t) {
-  return new Set(t ? t.trim().split(/\s+/) : []);
-}
-function E(t, u) {
-  const { map: d, mapLib: g } = C(O), c = f(() => document.createElement("div"), []), i = x({ props: t });
-  i.current.props = t;
-  const e = f(() => {
-    const a = { ...t }, o = new g.Popup(a);
-    return o.setLngLat([t.longitude, t.latitude]), o.once("open", (n) => {
-      var s, l;
-      (l = (s = i.current.props).onOpen) === null || l === void 0 || l.call(s, n);
-    }), o;
-  }, []);
-  if (m(() => {
-    const a = (o) => {
-      var n, s;
-      (s = (n = i.current.props).onClose) === null || s === void 0 || s.call(n, o);
-    };
-    return e.on("close", a), e.setDOMContent(c).addTo(d.getMap()), () => {
-      e.off("close", a), e.isOpen() && e.remove();
-    };
-  }, []), m(() => {
-    M(e.getElement(), t.style);
-  }, [t.style]), N(u, () => e, []), e.isOpen() && ((e.getLngLat().lng !== t.longitude || e.getLngLat().lat !== t.latitude) && e.setLngLat([t.longitude, t.latitude]), t.offset && !y(e.options.offset, t.offset) && e.setOffset(t.offset), (e.options.anchor !== t.anchor || e.options.maxWidth !== t.maxWidth) && (e.options.anchor = t.anchor, e.setMaxWidth(t.maxWidth)), e.options.className !== t.className)) {
-    const a = r(e.options.className), o = r(t.className);
-    for (const n of a)
-      o.has(n) || e.removeClassName(n);
-    for (const n of o)
-      a.has(n) || e.addClassName(n);
-    e.options.className = t.className;
-  }
-  return h(t.children, c);
-}
-L(v(E));
-//# sourceMappingURL=main.js10.mjs.map

package/dist/es/main.js10.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.js10.mjs","sources":["../../node_modules/react-map-gl/dist/esm/components/popup.js"],"sourcesContent":["import { createPortal } from 'react-dom';\nimport { useImperativeHandle, useEffect, useMemo, useRef, useContext, forwardRef, memo } from 'react';\nimport { applyReactStyle } from '../utils/apply-react-style';\nimport { MapContext } from './map';\nimport { deepEqual } from '../utils/deep-equal';\n// Adapted from https://github.com/mapbox/mapbox-gl-js/blob/v1.13.0/src/ui/popup.js\nfunction getClassList(className) {\n    return new Set(className ? className.trim().split(/\\s+/) : []);\n}\n/* eslint-disable complexity,max-statements */\nfunction Popup(props, ref) {\n    const { map, mapLib } = useContext(MapContext);\n    const container = useMemo(() => {\n        return document.createElement('div');\n    }, []);\n    const thisRef = useRef({ props });\n    thisRef.current.props = props;\n    const popup = useMemo(() => {\n        const options = { ...props };\n        const pp = new mapLib.Popup(options);\n        pp.setLngLat([props.longitude, props.latitude]);\n        pp.once('open', e => {\n            var _a, _b;\n            (_b = (_a = thisRef.current.props).onOpen) === null || _b === void 0 ? void 0 : _b.call(_a, e);\n        });\n        return pp;\n    }, []);\n    useEffect(() => {\n        const onClose = e => {\n            var _a, _b;\n            (_b = (_a = thisRef.current.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a, e);\n        };\n        popup.on('close', onClose);\n        popup.setDOMContent(container).addTo(map.getMap());\n        return () => {\n            // https://github.com/visgl/react-map-gl/issues/1825\n            // onClose should not be fired if the popup is removed by unmounting\n            // When using React strict mode, the component is mounted twice.\n            // Firing the onClose callback here would be a false signal to remove the component.\n            popup.off('close', onClose);\n            if (popup.isOpen()) {\n                popup.remove();\n            }\n        };\n    }, []);\n    useEffect(() => {\n        applyReactStyle(popup.getElement(), props.style);\n    }, [props.style]);\n    useImperativeHandle(ref, () => popup, []);\n    if (popup.isOpen()) {\n        if (popup.getLngLat().lng !== props.longitude || popup.getLngLat().lat !== props.latitude) {\n            popup.setLngLat([props.longitude, props.latitude]);\n        }\n        if (props.offset && !deepEqual(popup.options.offset, props.offset)) {\n            popup.setOffset(props.offset);\n        }\n        if (popup.options.anchor !== props.anchor || popup.options.maxWidth !== props.maxWidth) {\n            popup.options.anchor = props.anchor;\n            popup.setMaxWidth(props.maxWidth);\n        }\n        if (popup.options.className !== props.className) {\n            const prevClassList = getClassList(popup.options.className);\n            const nextClassList = getClassList(props.className);\n            for (const c of prevClassList) {\n                if (!nextClassList.has(c)) {\n                    popup.removeClassName(c);\n                }\n            }\n            for (const c of nextClassList) {\n                if (!prevClassList.has(c)) {\n                    popup.addClassName(c);\n                }\n            }\n            popup.options.className = props.className;\n        }\n    }\n    return createPortal(props.children, container);\n}\nexport default memo(forwardRef(Popup));\n//# sourceMappingURL=popup.js.map"],"names":["getClassList","className","Popup","props","ref","map","mapLib","useContext","MapContext","container","useMemo","thisRef","useRef","popup","options","pp","e","_a","_b","useEffect","onClose","applyReactStyle","useImperativeHandle","deepEqual","prevClassList","nextClassList","c","createPortal","memo","forwardRef"],"mappings":";;;;;AAMA,SAASA,EAAaC,GAAW;AAC7B,SAAO,IAAI,IAAIA,IAAYA,EAAU,KAAM,EAAC,MAAM,KAAK,IAAI,CAAA,CAAE;AACjE;AAEA,SAASC,EAAMC,GAAOC,GAAK;AACvB,QAAM,EAAE,KAAAC,GAAK,QAAAC,EAAQ,IAAGC,EAAWC,CAAU,GACvCC,IAAYC,EAAQ,MACf,SAAS,cAAc,KAAK,GACpC,CAAE,CAAA,GACCC,IAAUC,EAAO,EAAE,OAAAT,EAAO,CAAA;AAChC,EAAAQ,EAAQ,QAAQ,QAAQR;AACxB,QAAMU,IAAQH,EAAQ,MAAM;AACxB,UAAMI,IAAU,EAAE,GAAGX,KACfY,IAAK,IAAIT,EAAO,MAAMQ,CAAO;AACnC,WAAAC,EAAG,UAAU,CAACZ,EAAM,WAAWA,EAAM,QAAQ,CAAC,GAC9CY,EAAG,KAAK,QAAQ,CAAAC,MAAK;AACjB,UAAIC,GAAIC;AACR,OAACA,KAAMD,IAAKN,EAAQ,QAAQ,OAAO,YAAY,QAAQO,MAAO,UAAkBA,EAAG,KAAKD,GAAID,CAAC;AAAA,IACzG,CAAS,GACMD;AAAA,EACV,GAAE,CAAE,CAAA;AAuBL,MAtBAI,EAAU,MAAM;AACZ,UAAMC,IAAU,CAAAJ,MAAK;AACjB,UAAIC,GAAIC;AACR,OAACA,KAAMD,IAAKN,EAAQ,QAAQ,OAAO,aAAa,QAAQO,MAAO,UAAkBA,EAAG,KAAKD,GAAID,CAAC;AAAA,IAC1G;AACQ,WAAAH,EAAM,GAAG,SAASO,CAAO,GACzBP,EAAM,cAAcJ,CAAS,EAAE,MAAMJ,EAAI,OAAM,CAAE,GAC1C,MAAM;AAKT,MAAAQ,EAAM,IAAI,SAASO,CAAO,GACtBP,EAAM,YACNA,EAAM,OAAM;AAAA,IAE5B;AAAA,EACK,GAAE,CAAE,CAAA,GACLM,EAAU,MAAM;AACZ,IAAAE,EAAgBR,EAAM,WAAY,GAAEV,EAAM,KAAK;AAAA,EACvD,GAAO,CAACA,EAAM,KAAK,CAAC,GAChBmB,EAAoBlB,GAAK,MAAMS,GAAO,CAAE,CAAA,GACpCA,EAAM,cACFA,EAAM,YAAY,QAAQV,EAAM,aAAaU,EAAM,UAAW,EAAC,QAAQV,EAAM,aAC7EU,EAAM,UAAU,CAACV,EAAM,WAAWA,EAAM,QAAQ,CAAC,GAEjDA,EAAM,UAAU,CAACoB,EAAUV,EAAM,QAAQ,QAAQV,EAAM,MAAM,KAC7DU,EAAM,UAAUV,EAAM,MAAM,IAE5BU,EAAM,QAAQ,WAAWV,EAAM,UAAUU,EAAM,QAAQ,aAAaV,EAAM,cAC1EU,EAAM,QAAQ,SAASV,EAAM,QAC7BU,EAAM,YAAYV,EAAM,QAAQ,IAEhCU,EAAM,QAAQ,cAAcV,EAAM,YAAW;AAC7C,UAAMqB,IAAgBxB,EAAaa,EAAM,QAAQ,SAAS,GACpDY,IAAgBzB,EAAaG,EAAM,SAAS;AAClD,eAAWuB,KAAKF;AACZ,MAAKC,EAAc,IAAIC,CAAC,KACpBb,EAAM,gBAAgBa,CAAC;AAG/B,eAAWA,KAAKD;AACZ,MAAKD,EAAc,IAAIE,CAAC,KACpBb,EAAM,aAAaa,CAAC;AAG5B,IAAAb,EAAM,QAAQ,YAAYV,EAAM;AAAA;AAGxC,SAAOwB,EAAaxB,EAAM,UAAUM,CAAS;AACjD;AACemB,EAAKC,EAAW3B,CAAK,CAAC;","x_google_ignoreList":[0]}