react-three-map 0.3.1 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +6 -4
- package/dist/cjs/favicon.svg +1 -0
- package/dist/cjs/main.js +1 -1
- package/dist/es/favicon.svg +1 -0
- package/dist/es/main7.mjs +1 -1
- package/dist/es/main7.mjs.map +1 -1
- package/dist/maplibre/cjs/favicon.svg +1 -0
- package/dist/maplibre/cjs/main.js +1 -1
- package/dist/maplibre/es/favicon.svg +1 -0
- package/dist/maplibre/es/main7.mjs +1 -1
- package/dist/maplibre/es/main7.mjs.map +1 -1
- package/package.json +1 -1
- package/src/core/create-events.ts +4 -4
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
# React Three Map
|
|
1
|
+
# React Three Map
|
|
2
2
|
|
|
3
|
-
[](https://github.com/RodrigoHamuy/react-three-map)
|
|
4
|
+
[](https://npmjs.com/package/react-three-map)
|
|
5
|
+
[](https://bundlephobia.com/result?p=react-three-map)
|
|
6
|
+
[](https://rodrigohamuy.github.io/react-three-map/?story=canvas--a-maplibre-example)
|
|
7
|
+
[](https://github.com/RodrigoHamuy/react-three-map/actions?query=workflow%3Arelease)
|
|
6
8
|
|
|
7
9
|
`react-three-map` is a bridge to use [`react-three-fiber`](https://github.com/pmndrs/react-three-fiber) inside [`react-map-gl`](https://github.com/visgl/react-map-gl).
|
|
8
10
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#83af9b"></stop><stop offset="100%" stop-color="#fe4365"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path></svg>
|
package/dist/cjs/main.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),x=require("@react-three/fiber"),E=require("mapbox-gl"),l=require("react"),b=require("react-map-gl"),d=require("three");function j(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 C=j(d),y=new d.Quaternion,R=new d.Euler,w=new d.Vector3,M=new d.Vector3,z=new d.Matrix4;function S({longitude:n,latitude:r,altitude:t,fromLngLat:e}){const o=e([n,r],t),c=o.meterInMercatorCoordinateUnits();return w.set(o.x,o.y,o.z||0),M.set(c,-c,c),y.setFromEuler(R.set(-Math.PI*.5,0,0)),z.compose(w,y,M).toArray()}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 L(){return n=>{const{handlePointer:r}=x.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/
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),x=require("@react-three/fiber"),E=require("mapbox-gl"),l=require("react"),b=require("react-map-gl"),d=require("three");function j(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 C=j(d),y=new d.Quaternion,R=new d.Euler,w=new d.Vector3,M=new d.Vector3,z=new d.Matrix4;function S({longitude:n,latitude:r,altitude:t,fromLngLat:e}){const o=e([n,r],t),c=o.meterInMercatorCoordinateUnits();return w.set(o.x,o.y,o.z||0),M.set(c,-c,c),y.setFromEuler(R.set(-Math.PI*.5,0,0)),z.compose(w,y,M).toArray()}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 L(){return n=>{const{handlePointer:r}=x.createEvents(n);return{priority:1,enabled:!0,compute(t,e){e.size.width=e.gl.domElement.width/window.devicePixelRatio,e.size.height=e.gl.domElement.height/window.devicePixelRatio,e.pointer.x=t.offsetX/e.size.width*2-1,e.pointer.y=1-t.offsetY/e.size.height*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 c;const{set:e,events:o}=n.getState();(c=o.disconnect)==null||c.call(o),e(a=>({events:{...a.events,connected:t.parentNode}})),Object.entries(o.handlers??[]).forEach(([a,u])=>{const[i,s]=g[a];t.addEventListener(i,u,{passive:s})})},disconnect:()=>{const{set:t,events:e}=n.getState();e.connected&&(Object.entries(e.handlers??[]).forEach(([o,c])=>{if(e&&e.connected instanceof HTMLElement){const[a]=g[o];e.connected.removeEventListener(a,c)}}),t(o=>({events:{...o.events,connected:void 0}})))}}}}const p=n=>{const r=l.useRef(n);return r.current=n,l.useCallback((...t)=>r.current(...t),[])};function O(n,{frameloop:r,...t}){const[e,o]=l.useState(!1),c=p((i,s)=>{const m=i.getCanvas(),v=x.createRoot(m);v.configure({dpr:window.devicePixelRatio,events:L(),...t,frameloop:"never",gl:{context:s,depth:!0,autoClear:!1,antialias:!0,...t==null?void 0:t.gl},onCreated:f=>{r==="demand"&&f.set({frameloop:r,invalidate:()=>{i.triggerRepaint()}}),n.current={state:f,map:i,root:v},f.gl.forceContextLoss=()=>{},f.camera.matrixAutoUpdate=!1},size:{width:m.clientWidth,height:m.clientHeight,top:0,left:0,...t==null?void 0:t.size}}),n.current={map:i,root:v},i.on("resize",a),setTimeout(()=>o(!0))}),a=p(()=>{var v;if(!((v=n.current)!=null&&v.state))return;const i=n.current.state,m=n.current.map.getCanvas();i.setSize(m.width,m.height)}),u=p(i=>{setTimeout(()=>{n.current&&(n.current.root.unmount(),i.off("resize",a))})});return{onAdd:c,onRemove:u,mounted:e}}const T=new d.Matrix4;function A(n,r,t){return p((o,c)=>{var s;if(!((s=r.current)!=null&&s.state))return;const a=r.current.state.camera,u=r.current.state.gl,i=r.current.state.advance;a.projectionMatrix.fromArray(c).multiply(T.fromArray(n)),a.projectionMatrixInverse.copy(a.projectionMatrix).invert(),u.resetState(),i(Date.now()*.001,!0),t==="always"&&r.current.map.triggerRepaint()})}const q=({m4:n,children:r,frameloop:t,...e})=>{const o=l.useId(),c=l.useRef(),{onAdd:a,onRemove:u,mounted:i}=O(c,{frameloop:t,...e}),s=A(n,c,t);return l.useEffect(()=>{i&&c.current&&c.current.root.render(h.jsx(h.Fragment,{children:r}))},[c,i,r]),{id:o,onAdd:a,onRemove:u,render:s}};x.extend(C);const k=l.memo(({longitude:n,latitude:r,altitude:t=0,frameloop:e="always",...o})=>{const c=l.useMemo(()=>S({latitude:r,longitude:n,altitude:t,fromLngLat:E.MercatorCoordinate.fromLngLat}),[r,n,t]),{id:a,onAdd:u,onRemove:i,render:s}=q({m4:c,frameloop:e,...o});return h.jsx(b.Layer,{id:a,type:"custom",renderingMode:"3d",onAdd:u,onRemove:i,render:s})});exports.Canvas=k;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#83af9b"></stop><stop offset="100%" stop-color="#fe4365"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path></svg>
|
package/dist/es/main7.mjs
CHANGED
|
@@ -18,7 +18,7 @@ function u() {
|
|
|
18
18
|
priority: 1,
|
|
19
19
|
enabled: !0,
|
|
20
20
|
compute(n, e) {
|
|
21
|
-
e.size.width = e.gl.domElement.width, e.size.height = e.gl.domElement.height, e.pointer.x = n.offsetX /
|
|
21
|
+
e.size.width = e.gl.domElement.width / window.devicePixelRatio, e.size.height = e.gl.domElement.height / window.devicePixelRatio, e.pointer.x = n.offsetX / e.size.width * 2 - 1, e.pointer.y = 1 - n.offsetY / e.size.height * 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();
|
|
22
22
|
},
|
|
23
23
|
connected: void 0,
|
|
24
24
|
handlers: Object.keys(c).reduce(
|
package/dist/es/main7.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main7.mjs","sources":["../../src/core/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 /
|
|
1
|
+
{"version":3,"file":"main7.mjs","sources":["../../src/core/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 / window.devicePixelRatio;\n state.size.height = state.gl.domElement.height / window.devicePixelRatio;\n state.pointer.x = (event.offsetX / state.size.width) * 2 - 1;\n state.pointer.y = 1 - (event.offsetY / state.size.height) * 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.parentNode } }));\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":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#83af9b"></stop><stop offset="100%" stop-color="#fe4365"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),y=require("@react-three/fiber"),E=require("maplibre-gl"),l=require("react"),b=require("react-map-gl/maplibre"),d=require("three");function j(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 C=j(d),x=new d.Quaternion,R=new d.Euler,w=new d.Vector3,M=new d.Vector3,z=new d.Matrix4;function S({longitude:n,latitude:r,altitude:t,fromLngLat:e}){const o=e([n,r],t),c=o.meterInMercatorCoordinateUnits();return w.set(o.x,o.y,o.z||0),M.set(c,-c,c),x.setFromEuler(R.set(-Math.PI*.5,0,0)),z.compose(w,x,M).toArray()}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 L(){return n=>{const{handlePointer:r}=y.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/
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),y=require("@react-three/fiber"),E=require("maplibre-gl"),l=require("react"),b=require("react-map-gl/maplibre"),d=require("three");function j(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 C=j(d),x=new d.Quaternion,R=new d.Euler,w=new d.Vector3,M=new d.Vector3,z=new d.Matrix4;function S({longitude:n,latitude:r,altitude:t,fromLngLat:e}){const o=e([n,r],t),c=o.meterInMercatorCoordinateUnits();return w.set(o.x,o.y,o.z||0),M.set(c,-c,c),x.setFromEuler(R.set(-Math.PI*.5,0,0)),z.compose(w,x,M).toArray()}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 L(){return n=>{const{handlePointer:r}=y.createEvents(n);return{priority:1,enabled:!0,compute(t,e){e.size.width=e.gl.domElement.width/window.devicePixelRatio,e.size.height=e.gl.domElement.height/window.devicePixelRatio,e.pointer.x=t.offsetX/e.size.width*2-1,e.pointer.y=1-t.offsetY/e.size.height*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 c;const{set:e,events:o}=n.getState();(c=o.disconnect)==null||c.call(o),e(a=>({events:{...a.events,connected:t.parentNode}})),Object.entries(o.handlers??[]).forEach(([a,u])=>{const[i,s]=g[a];t.addEventListener(i,u,{passive:s})})},disconnect:()=>{const{set:t,events:e}=n.getState();e.connected&&(Object.entries(e.handlers??[]).forEach(([o,c])=>{if(e&&e.connected instanceof HTMLElement){const[a]=g[o];e.connected.removeEventListener(a,c)}}),t(o=>({events:{...o.events,connected:void 0}})))}}}}const p=n=>{const r=l.useRef(n);return r.current=n,l.useCallback((...t)=>r.current(...t),[])};function O(n,{frameloop:r,...t}){const[e,o]=l.useState(!1),c=p((i,s)=>{const m=i.getCanvas(),v=y.createRoot(m);v.configure({dpr:window.devicePixelRatio,events:L(),...t,frameloop:"never",gl:{context:s,depth:!0,autoClear:!1,antialias:!0,...t==null?void 0:t.gl},onCreated:f=>{r==="demand"&&f.set({frameloop:r,invalidate:()=>{i.triggerRepaint()}}),n.current={state:f,map:i,root:v},f.gl.forceContextLoss=()=>{},f.camera.matrixAutoUpdate=!1},size:{width:m.clientWidth,height:m.clientHeight,top:0,left:0,...t==null?void 0:t.size}}),n.current={map:i,root:v},i.on("resize",a),setTimeout(()=>o(!0))}),a=p(()=>{var v;if(!((v=n.current)!=null&&v.state))return;const i=n.current.state,m=n.current.map.getCanvas();i.setSize(m.width,m.height)}),u=p(i=>{setTimeout(()=>{n.current&&(n.current.root.unmount(),i.off("resize",a))})});return{onAdd:c,onRemove:u,mounted:e}}const T=new d.Matrix4;function A(n,r,t){return p((o,c)=>{var s;if(!((s=r.current)!=null&&s.state))return;const a=r.current.state.camera,u=r.current.state.gl,i=r.current.state.advance;a.projectionMatrix.fromArray(c).multiply(T.fromArray(n)),a.projectionMatrixInverse.copy(a.projectionMatrix).invert(),u.resetState(),i(Date.now()*.001,!0),t==="always"&&r.current.map.triggerRepaint()})}const q=({m4:n,children:r,frameloop:t,...e})=>{const o=l.useId(),c=l.useRef(),{onAdd:a,onRemove:u,mounted:i}=O(c,{frameloop:t,...e}),s=A(n,c,t);return l.useEffect(()=>{i&&c.current&&c.current.root.render(h.jsx(h.Fragment,{children:r}))},[c,i,r]),{id:o,onAdd:a,onRemove:u,render:s}};y.extend(C);const k=l.memo(({longitude:n,latitude:r,altitude:t=0,frameloop:e="always",...o})=>{const c=l.useMemo(()=>S({latitude:r,longitude:n,altitude:t,fromLngLat:E.MercatorCoordinate.fromLngLat}),[r,n,t]),{id:a,onAdd:u,onRemove:i,render:s}=q({m4:c,frameloop:e,...o});return h.jsx(b.Layer,{id:a,type:"custom",renderingMode:"3d",onAdd:u,onRemove:i,render:s})});exports.Canvas=k;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#83af9b"></stop><stop offset="100%" stop-color="#fe4365"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path></svg>
|
|
@@ -18,7 +18,7 @@ function u() {
|
|
|
18
18
|
priority: 1,
|
|
19
19
|
enabled: !0,
|
|
20
20
|
compute(n, e) {
|
|
21
|
-
e.size.width = e.gl.domElement.width, e.size.height = e.gl.domElement.height, e.pointer.x = n.offsetX /
|
|
21
|
+
e.size.width = e.gl.domElement.width / window.devicePixelRatio, e.size.height = e.gl.domElement.height / window.devicePixelRatio, e.pointer.x = n.offsetX / e.size.width * 2 - 1, e.pointer.y = 1 - n.offsetY / e.size.height * 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();
|
|
22
22
|
},
|
|
23
23
|
connected: void 0,
|
|
24
24
|
handlers: Object.keys(c).reduce(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main7.mjs","sources":["../../../src/core/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 /
|
|
1
|
+
{"version":3,"file":"main7.mjs","sources":["../../../src/core/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 / window.devicePixelRatio;\n state.size.height = state.gl.domElement.height / window.devicePixelRatio;\n state.pointer.x = (event.offsetX / state.size.width) * 2 - 1;\n state.pointer.y = 1 - (event.offsetY / state.size.height) * 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.parentNode } }));\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":"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"}
|
package/package.json
CHANGED
|
@@ -24,10 +24,10 @@ export function createEvents(): RenderProps<HTMLCanvasElement>["events"] {
|
|
|
24
24
|
priority: 1,
|
|
25
25
|
enabled: true,
|
|
26
26
|
compute(event: DomEvent, state: RootState) {
|
|
27
|
-
state.size.width = state.gl.domElement.width;
|
|
28
|
-
state.size.height = state.gl.domElement.height;
|
|
29
|
-
state.pointer.x = (event.offsetX /
|
|
30
|
-
state.pointer.y = 1 - (event.offsetY /
|
|
27
|
+
state.size.width = state.gl.domElement.width / window.devicePixelRatio;
|
|
28
|
+
state.size.height = state.gl.domElement.height / window.devicePixelRatio;
|
|
29
|
+
state.pointer.x = (event.offsetX / state.size.width) * 2 - 1;
|
|
30
|
+
state.pointer.y = 1 - (event.offsetY / state.size.height) * 2;
|
|
31
31
|
state.raycaster.camera = state.camera;
|
|
32
32
|
state.raycaster.ray.origin.setScalar(0).applyMatrix4(state.camera.projectionMatrixInverse);
|
|
33
33
|
state.raycaster.ray.direction
|