react-three-map 0.1.1 → 0.1.3

package/dist/cjs/main.js.js

@@ -1 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),h=require("@react-three/fiber"),d=require("react"),w=require("react-map-gl/maplibre"),m=require("three"),E=require("maplibre-gl");function b(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(r,t,e.get?e:{enumerable:!0,get:()=>n[t]})}}return r.default=n,Object.freeze(r)}const j=b(m),x=new m.Quaternion,C=new m.Euler,y=new m.Vector3,M=new m.Vector3;function R({longitude:n,latitude:r,altitude:t}){const e=E.MercatorCoordinate.fromLngLat([n,r],t),o=e.meterInMercatorCoordinateUnits();return y.set(e.x,e.y,e.z||0),M.set(o,-o,o),x.setFromEuler(C.set(-Math.PI*.5,0,0)),new m.Matrix4().compose(y,x,M)}const g={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 z(){return n=>{const{handlePointer:r}=h.createEvents(n);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(g).reduce((t,e)=>({...t,[e]:r(e)}),{}),update:()=>{var o;const{events:t,internal:e}=n.getState();(o=e.lastEvent)!=null&&o.current&&t.handlers&&t.handlers.onPointerMove(e.lastEvent.current)},connect:t=>{var s;const{set:e,events:o}=n.getState();(s=o.disconnect)==null||s.call(o),e(c=>({events:{...c.events,connected:t}})),Object.entries(o.handlers??[]).forEach(([c,i])=>{const[l,a]=g[c];t.addEventListener(l,i,{passive:a})})},disconnect:()=>{const{set:t,events:e}=n.getState();e.connected&&(Object.entries(e.handlers??[]).forEach(([o,s])=>{if(e&&e.connected instanceof HTMLElement){const[c]=g[o];e.connected.removeEventListener(c,s)}}),t(o=>({events:{...o.events,connected:void 0}})))}}}}const v=n=>{const r=d.useRef(n);return r.current=n,d.useCallback((...t)=>r.current(...t),[])};function S(n,r){const[t,e]=d.useState(!1),o=v((i,l)=>{const a=i.getCanvas(),u=h.createRoot(a);u.configure({frameloop:"never",dpr:window.devicePixelRatio,shadows:!0,events:z(),...r,gl:{context:l,depth:!0,autoClear:!1,antialias:!0,...r==null?void 0:r.gl},onCreated:f=>{n.current={state:f,map:i,root:u},f.gl.forceContextLoss=()=>{}},camera:{matrixAutoUpdate:!1},size:{width:a.clientWidth,height:a.clientHeight,top:0,left:0,...r==null?void 0:r.size}}),n.current={map:i,root:u},i.on("resize",s),setTimeout(()=>e(!0))}),s=v(()=>{var u;if(!((u=n.current)!=null&&u.state))return;const i=n.current.state,a=n.current.map.getCanvas();i.setSize(a.width,a.height)}),c=v(i=>{setTimeout(()=>{n.current&&(n.current.root.unmount(),i.off(c))})});return{onAdd:o,onRemove:c,mounted:t}}function O(n,r){const t=w.useMap();return v((o,s)=>{var a;if(!t.current||!((a=r.current)!=null&&a.state))return;const c=r.current.state.camera,i=r.current.state.gl,l=r.current.state.advance;c.projectionMatrix.fromArray(s).multiply(n),c.projectionMatrixInverse.copy(c.projectionMatrix).invert(),i.resetState(),l(Date.now()*.001,!0),t.current.triggerRepaint()})}h.extend(j);const L=d.memo(({longitude:n,latitude:r,altitude:t=0,children:e,...o})=>{const s=d.useId(),c=d.useRef(),i=d.useMemo(()=>R({latitude:r,longitude:n,altitude:t}),[r,n,t]),{onAdd:l,onRemove:a,mounted:u}=S(c,o),f=O(i,c);return d.useEffect(()=>{u&&c.current&&c.current.root.render(p.jsx(p.Fragment,{children:e}))},[c,u,e]),p.jsx(w.Layer,{id:s,type:"custom",renderingMode:"3d",onAdd:l,onRemove:a,render:f})});exports.Canvas=L;

package/dist/es/main.js4.mjs

@@ -1,51 +1,57 @@
-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({
+import { createRoot as h } from "@react-three/fiber";
+import { useState as g } from "react";
+import { createEvents as v } from "./main.js6.mjs";
+import { useFunction as a } from "./main.js7.mjs";
+function C(e, o) {
+  const [m, l] = g(!1), r = a((t, u) => {
+    const n = t.getCanvas(), i = h(n);
+    i.configure({
       frameloop: "never",
       dpr: window.devicePixelRatio,
       shadows: !0,
-      events: h(),
-      ...t,
+      events: v(),
+      ...o,
       gl: {
-        context: f,
+        context: u,
         depth: !0,
         autoClear: !1,
         antialias: !0,
-        ...t == null ? void 0 : t.gl
+        ...o == null ? void 0 : o.gl
       },
-      onCreated: (u) => {
+      onCreated: (s) => {
         e.current = {
-          state: u,
-          map: o,
-          root: n
-        }, u.gl.forceContextLoss = () => {
+          state: s,
+          map: t,
+          root: i
+        }, s.gl.forceContextLoss = () => {
         };
       },
       camera: {
         matrixAutoUpdate: !1
       },
       size: {
-        width: i.clientWidth,
-        height: i.clientHeight,
+        width: n.clientWidth,
+        height: n.clientHeight,
         top: 0,
         left: 0,
-        ...t == null ? void 0 : t.size
+        ...o == null ? void 0 : o.size
       }
     }), e.current = {
-      map: o,
-      root: n
-    }, setTimeout(() => m(!0));
-  }), l = c(() => {
+      map: t,
+      root: i
+    }, t.on("resize", f), setTimeout(() => l(!0));
+  }), f = a(() => {
+    var i;
+    if (!((i = e.current) != null && i.state))
+      return;
+    const t = e.current.state, n = e.current.map.getCanvas();
+    t.setSize(n.width, n.height);
+  }), c = a((t) => {
     setTimeout(() => {
-      e.current && e.current.root.unmount();
+      e.current && (e.current.root.unmount(), t.off(c));
     });
   });
-  return { onAdd: s, onRemove: l, mounted: a };
+  return { onAdd: r, onRemove: c, mounted: m };
 }
 export {
   C as useOnAdd

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

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"main.js4.mjs","sources":["../../src/canvas/use-on-add.ts"],"sourcesContent":["import { RenderProps, createRoot } from \"@react-three/fiber\";\nimport { useState } from \"react\";\nimport { MapInstance } from \"react-map-gl\";\nimport { createEvents } from \"./create-events\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\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    map.on('resize', onResize)\n\n    setTimeout(()=>setMounted(true));\n    \n  })\n\n  const onResize = useFunction(()=>{\n    if(!ref.current?.state) return;\n    const state = ref.current.state;\n    const map = ref.current.map;\n    const canvas = map.getCanvas();\n    state.setSize(canvas.width, canvas.height);\n  })\n\n  const onRemove = useFunction((map: MapInstance)=>{\n    setTimeout(()=>{\n      if(!ref.current) return;\n      ref.current.root.unmount();\n      map.off(onRemove);\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","onResize","_a","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,GAGEH,EAAA,GAAG,UAAUO,CAAQ,GAEd,WAAA,MAAIX,EAAW,EAAI,CAAC;AAAA,EAAA,CAEhC,GAEKW,IAAWR,EAAY,MAAI;;AAC5B,QAAA,GAACS,IAAAf,EAAI,YAAJ,QAAAe,EAAa;AAAO;AAClB,UAAAF,IAAQb,EAAI,QAAQ,OAEpBS,IADMT,EAAI,QAAQ,IACL;AACnB,IAAAa,EAAM,QAAQJ,EAAO,OAAOA,EAAO,MAAM;AAAA,EAAA,CAC1C,GAEKO,IAAWV,EAAY,CAACC,MAAmB;AAC/C,eAAW,MAAI;AACb,MAAIP,EAAI,YACJA,EAAA,QAAQ,KAAK,WACjBO,EAAI,IAAIS,CAAQ;AAAA,IAAA,CACjB;AAAA,EAAA,CACF;AAEM,SAAA,EAAC,OAAAX,GAAO,UAAAW,GAAU,SAAAd;AAC3B;"}

package/package.json

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

package/src/canvas/use-on-add.ts

@@ -1,9 +1,9 @@
 import { RenderProps, createRoot } from "@react-three/fiber";
+import { useState } from "react";
 import { MapInstance } from "react-map-gl";
 import { createEvents } from "./create-events";
 import { StateRef } from "./state-ref";
 import { useFunction } from "./use-function";
-import { useState } from "react";
 
 export function useOnAdd (ref: StateRef, renderProps: RenderProps<HTMLCanvasElement>) {
 
@@ -52,14 +52,25 @@ export function useOnAdd (ref: StateRef, renderProps: RenderProps<HTMLCanvasElem
       root,
     }
 
+    map.on('resize', onResize)
+
     setTimeout(()=>setMounted(true));
     
   })
 
-  const onRemove = useFunction(()=>{
+  const onResize = useFunction(()=>{
+    if(!ref.current?.state) return;
+    const state = ref.current.state;
+    const map = ref.current.map;
+    const canvas = map.getCanvas();
+    state.setSize(canvas.width, canvas.height);
+  })
+
+  const onRemove = useFunction((map: MapInstance)=>{
     setTimeout(()=>{
       if(!ref.current) return;
       ref.current.root.unmount();
+      map.off(onRemove);
     })
   })