react-three-map 0.1.4 → 0.1.5

package/dist/cjs/main.js.js

@@ -1 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),h=require("@react-three/fiber"),d=require("react"),M=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,w=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),w.set(o,-o,o),x.setFromEuler(C.set(-Math.PI*.5,0,0)),new m.Matrix4().compose(y,x,w)}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:"demand",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=M.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),r.current.state.frameloop==="always"&&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(M.Layer,{id:s,type:"custom",renderingMode:"3d",onAdd:l,onRemove:a,render:f})});exports.Canvas=L;

package/dist/es/main.js4.mjs

@@ -1,15 +1,15 @@
-import { createRoot as h } from "@react-three/fiber";
+import { createRoot as r } from "@react-three/fiber";
 import { useState as g } from "react";
-import { createEvents as v } from "./main.js6.mjs";
+import { createEvents as d } 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);
+  const [m, l] = g(!1), f = a((t, u) => {
+    const n = t.getCanvas(), i = r(n);
     i.configure({
-      frameloop: "never",
+      frameloop: "demand",
       dpr: window.devicePixelRatio,
       shadows: !0,
-      events: v(),
+      events: d(),
       ...o,
       gl: {
         context: u,
@@ -39,8 +39,8 @@ function C(e, o) {
     }), e.current = {
       map: t,
       root: i
-    }, t.on("resize", f), setTimeout(() => l(!0));
-  }), f = a(() => {
+    }, t.on("resize", h), setTimeout(() => l(!0));
+  }), h = a(() => {
     var i;
     if (!((i = e.current) != null && i.state))
       return;
@@ -51,7 +51,7 @@ function C(e, o) {
       e.current && (e.current.root.unmount(), t.off(c));
     });
   });
-  return { onAdd: r, onRemove: c, mounted: m };
+  return { onAdd: f, 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 { 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;"}
+{"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: \"demand\",\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/dist/es/main.js5.mjs

@@ -1,16 +1,16 @@
 import { useFunction as u } from "./main.js7.mjs";
 import { useMap as s } from "react-map-gl/maplibre";
-function l(a, r) {
+function g(a, t) {
   const e = s();
-  return u((m, c) => {
+  return u((m, o) => {
     var n;
-    if (!e.current || !((n = r.current) != null && n.state))
+    if (!e.current || !((n = t.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();
+    const r = t.current.state.camera, c = t.current.state.gl, i = t.current.state.advance;
+    r.projectionMatrix.fromArray(o).multiply(a), r.projectionMatrixInverse.copy(r.projectionMatrix).invert(), c.resetState(), i(Date.now() * 1e-3, !0), t.current.state.frameloop === "always" && e.current.triggerRepaint();
   });
 }
 export {
-  l as useRender
+  g 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-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.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    if(ref.current.state.frameloop === 'always') {\n      map.current.triggerRepaint();\n    }\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;AAiBL,SAfQC,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,GAC7BT,EAAI,QAAQ,MAAM,cAAc,YACjCC,EAAI,QAAQ;EACd,CACD;AAIH;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-map",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "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

@@ -12,11 +12,7 @@ export function useOnAdd (ref: StateRef, renderProps: RenderProps<HTMLCanvasElem
   const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext)=>{
    
     const canvas = map.getCanvas();
-    const invalidate = () => {
-      map.triggerRepaint();
-      return 0;
-    }
-    const root = createRoot(canvas, invalidate);
+    const root = createRoot(canvas);
     root.configure({
       frameloop: "demand",
       dpr: window.devicePixelRatio,

package/src/stories/render-on-demand.stories.tsx

@@ -39,7 +39,7 @@ export function Default() {
         <Stats />
       </Canvas>
     </Map>
-    <div style={{position: 'absolute', top: 0, right: 0}}>
+    <div style={{position: 'absolute', top: 0, right: 0, left: 80, background: '#ffffffc2', padding: 5}}>
       Hover over the box, it will only render once to change colour, or when you move the camera. Look at the stats to confirm.
     </div>
   </div>