react-three-map 0.3.0 → 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 +12 -0
- package/README.md +9 -5
- package/dist/cjs/favicon.svg +1 -0
- package/dist/cjs/main.js +1 -0
- package/dist/es/favicon.svg +1 -0
- package/dist/es/main.mjs +5 -0
- package/dist/es/main.mjs.map +1 -0
- package/dist/es/{main.js2.mjs → main2.mjs} +3 -3
- package/dist/es/main2.mjs.map +1 -0
- package/dist/es/{main.js3.mjs → main3.mjs} +1 -1
- package/dist/es/main3.mjs.map +1 -0
- package/dist/es/{main.js4.mjs → main4.mjs} +3 -3
- package/dist/es/main4.mjs.map +1 -0
- package/dist/es/{main.js5.mjs → main5.mjs} +3 -3
- package/dist/es/main5.mjs.map +1 -0
- package/dist/{maplibre/es/main.js6.mjs → es/main6.mjs} +2 -2
- package/dist/es/main6.mjs.map +1 -0
- package/dist/es/{main.js7.mjs → main7.mjs} +2 -2
- package/dist/es/main7.mjs.map +1 -0
- package/dist/es/{main.js8.mjs → main8.mjs} +1 -1
- package/dist/es/main8.mjs.map +1 -0
- package/dist/maplibre/cjs/favicon.svg +1 -0
- package/dist/maplibre/cjs/main.js +1 -0
- package/dist/maplibre/es/favicon.svg +1 -0
- package/dist/maplibre/es/main.mjs +5 -0
- package/dist/maplibre/es/main.mjs.map +1 -0
- package/dist/maplibre/es/{main.js2.mjs → main2.mjs} +3 -3
- package/dist/maplibre/es/main2.mjs.map +1 -0
- package/dist/maplibre/es/{main.js3.mjs → main3.mjs} +1 -1
- package/dist/{es/main.js3.mjs.map → maplibre/es/main3.mjs.map} +1 -1
- package/dist/maplibre/es/{main.js4.mjs → main4.mjs} +3 -3
- package/dist/{es/main.js4.mjs.map → maplibre/es/main4.mjs.map} +1 -1
- package/dist/maplibre/es/{main.js5.mjs → main5.mjs} +3 -3
- package/dist/{es/main.js5.mjs.map → maplibre/es/main5.mjs.map} +1 -1
- package/dist/{es/main.js6.mjs → maplibre/es/main6.mjs} +2 -2
- package/dist/{es/main.js6.mjs.map → maplibre/es/main6.mjs.map} +1 -1
- package/dist/maplibre/es/{main.js7.mjs → main7.mjs} +2 -2
- package/dist/maplibre/es/main7.mjs.map +1 -0
- package/dist/maplibre/es/{main.js8.mjs → main8.mjs} +1 -1
- package/dist/{es/main.js8.mjs.map → maplibre/es/main8.mjs.map} +1 -1
- package/example-mapbox/src/canvas.basic.stories.tsx +19 -4
- package/example-mapbox/src/comparison.stories.tsx +16 -3
- package/example-mapbox/src/html-on-top.stories.tsx +1 -1
- package/example-mapbox/src/my-scene.tsx +3 -10
- package/example-mapbox/src/render-on-demand.stories.tsx +1 -1
- package/example-mapbox/src/story-map.tsx +18 -3
- package/example-maplibre/src/comparison.stories.tsx +15 -2
- package/example-maplibre/src/html-on-top.stories.tsx +1 -1
- package/example-maplibre/src/my-scene.tsx +3 -11
- package/maplibre/package.json +1 -1
- package/package.json +16 -4
- package/src/core/create-events.ts +4 -4
- package/src/core/use-on-add.ts +1 -1
- package/src/stories/comparison.stories.tsx +16 -2
- package/src/stories/html-on-top.stories.tsx +2 -2
- package/src/stories/mapbox/story-mapbox.tsx +20 -5
- package/src/stories/mapbox-example.stories.tsx +18 -3
- package/src/stories/my-scene.tsx +3 -11
- package/src/stories/render-on-demand.stories.tsx +7 -2
- package/src/stories/story-map.tsx +4 -11
- package/dist/cjs/main.js.js +0 -1
- package/dist/es/main.js.mjs +0 -5
- package/dist/es/main.js.mjs.map +0 -1
- package/dist/es/main.js2.mjs.map +0 -1
- package/dist/es/main.js7.mjs.map +0 -1
- package/dist/maplibre/cjs/main.js.js +0 -1
- package/dist/maplibre/es/main.js.mjs +0 -5
- package/dist/maplibre/es/main.js.mjs.map +0 -1
- package/dist/maplibre/es/main.js2.mjs.map +0 -1
- package/dist/maplibre/es/main.js3.mjs.map +0 -1
- package/dist/maplibre/es/main.js4.mjs.map +0 -1
- package/dist/maplibre/es/main.js5.mjs.map +0 -1
- package/dist/maplibre/es/main.js6.mjs.map +0 -1
- package/dist/maplibre/es/main.js7.mjs.map +0 -1
- package/dist/maplibre/es/main.js8.mjs.map +0 -1
|
@@ -25,7 +25,7 @@ export function Default() {
|
|
|
25
25
|
<Stats className="stats" parent={ref} />
|
|
26
26
|
</Canvas>
|
|
27
27
|
</StoryMap>
|
|
28
|
-
<div style={{ position: 'absolute',
|
|
28
|
+
<div style={{ position: 'absolute', bottom: 0, right: 0, left: 0, background: '#ffffffc2', padding: '15px 20px 40px' }}>
|
|
29
29
|
Hover over the box, it will only render once to change colour, or when you move the camera. Look at the stats to confirm.
|
|
30
30
|
</div>
|
|
31
31
|
</div>
|
|
@@ -17,7 +17,12 @@ export const StoryMap: FC<StoryMapProps> = ({
|
|
|
17
17
|
latitude, longitude, zoom = 18, pitch = 60, children
|
|
18
18
|
}) => {
|
|
19
19
|
|
|
20
|
-
const { mapboxToken } = useControls({
|
|
20
|
+
const { mapboxToken } = useControls({
|
|
21
|
+
mapboxToken: {
|
|
22
|
+
value: import.meta.env.VITE_MAPBOX_TOKEN || '',
|
|
23
|
+
label: 'mapbox token',
|
|
24
|
+
}
|
|
25
|
+
})
|
|
21
26
|
|
|
22
27
|
const theme = useLadleContext().globalState.theme;
|
|
23
28
|
|
|
@@ -28,7 +33,7 @@ export const StoryMap: FC<StoryMapProps> = ({
|
|
|
28
33
|
Mapbox.accessToken = mapboxToken;
|
|
29
34
|
|
|
30
35
|
return <div style={{ height: '100vh', position: 'relative' }}>
|
|
31
|
-
{!mapboxToken &&
|
|
36
|
+
{!mapboxToken && <Center>Add a mapbox token to load this component</Center>}
|
|
32
37
|
{mapboxToken && <Map
|
|
33
38
|
antialias
|
|
34
39
|
initialViewState={{
|
|
@@ -43,4 +48,14 @@ export const StoryMap: FC<StoryMapProps> = ({
|
|
|
43
48
|
{children}
|
|
44
49
|
</Map>}
|
|
45
50
|
</div>
|
|
46
|
-
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
const Center = ({ children }: PropsWithChildren) => (
|
|
54
|
+
<div style={{
|
|
55
|
+
display: 'flex',
|
|
56
|
+
height: '100%',
|
|
57
|
+
width: '100%',
|
|
58
|
+
alignItems: 'center',
|
|
59
|
+
justifyContent: 'center',
|
|
60
|
+
}}>{children}</div>
|
|
61
|
+
)
|
|
@@ -1,22 +1,35 @@
|
|
|
1
1
|
import { MapControls } from "@react-three/drei";
|
|
2
2
|
import { Canvas as FiberCanvas } from "@react-three/fiber";
|
|
3
|
+
import { useControls } from "leva";
|
|
3
4
|
import { Canvas } from "react-three-map/maplibre";
|
|
4
5
|
import { MyScene } from "./my-scene";
|
|
5
6
|
import { StoryMap } from "./story-map";
|
|
6
7
|
|
|
7
8
|
export function WithMap() {
|
|
9
|
+
const showCamHelper = useShowCamHelper()
|
|
8
10
|
return <StoryMap latitude={51.5073218} longitude={-0.1276473} zoom={18}>
|
|
9
11
|
<Canvas latitude={51.5073218} longitude={-0.1276473} shadows="variance">
|
|
10
|
-
<MyScene />
|
|
12
|
+
<MyScene showCamHelper={showCamHelper} />
|
|
11
13
|
</Canvas>
|
|
12
14
|
</StoryMap>
|
|
13
15
|
}
|
|
14
16
|
|
|
15
17
|
export const WithoutMap = () => {
|
|
18
|
+
const showCamHelper = useShowCamHelper()
|
|
16
19
|
return <div style={{ height: '100vh' }}>
|
|
17
20
|
<FiberCanvas camera={{ position: [100, 100, 100] }} shadows="variance">
|
|
18
|
-
<MyScene />
|
|
21
|
+
<MyScene showCamHelper={showCamHelper} />
|
|
19
22
|
<MapControls makeDefault />
|
|
20
23
|
</FiberCanvas>
|
|
21
24
|
</div>
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const useShowCamHelper = () => {
|
|
28
|
+
const { showCamHelper } = useControls({
|
|
29
|
+
showCamHelper: {
|
|
30
|
+
value: false,
|
|
31
|
+
label: 'show camera helper'
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
return showCamHelper
|
|
22
35
|
}
|
|
@@ -10,7 +10,7 @@ export function Default() {
|
|
|
10
10
|
|
|
11
11
|
return <StoryMap latitude={51} longitude={0} zoom={13}>
|
|
12
12
|
<Canvas latitude={51} longitude={0} frameloop="demand">
|
|
13
|
-
<Html>
|
|
13
|
+
<Html center position={[0, 250, 0]} style={{ textAlign: 'center', fontSize: '2em', width: '10em', lineHeight: '1.5em' }}><i>Some</i> <b>HTML</b><br />content!</Html>
|
|
14
14
|
<Box
|
|
15
15
|
args={[500, 500, 500]}
|
|
16
16
|
position={[0, 250, 0]}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import { Box, Plane, useHelper } from "@react-three/drei";
|
|
2
2
|
import { MeshProps, useFrame, useThree } from '@react-three/fiber';
|
|
3
|
-
import { useControls } from "leva";
|
|
4
|
-
import 'maplibre-gl/dist/maplibre-gl.css';
|
|
5
3
|
import { useCallback, useRef, useState } from 'react';
|
|
6
4
|
import { CameraHelper, MathUtils, Mesh, OrthographicCamera } from "three";
|
|
7
5
|
|
|
8
|
-
export function MyScene() {
|
|
6
|
+
export function MyScene({ showCamHelper }: { showCamHelper?: boolean }) {
|
|
9
7
|
return <>
|
|
10
|
-
<Lights />
|
|
8
|
+
<Lights showCamHelper={showCamHelper} />
|
|
11
9
|
<Floor />
|
|
12
10
|
<MyBox position={[-8 * 3, 8 * 1.5, 0]} />
|
|
13
11
|
<MyBox position={[8 * 3, 8 * 1.5, 0]} />
|
|
@@ -53,15 +51,9 @@ function MyBox(props: MeshProps) {
|
|
|
53
51
|
</Box>
|
|
54
52
|
);
|
|
55
53
|
}
|
|
56
|
-
function Lights() {
|
|
54
|
+
function Lights({ showCamHelper }: { showCamHelper?: boolean }) {
|
|
57
55
|
const cam = useRef<OrthographicCamera>(null);
|
|
58
56
|
const noCam = useRef<OrthographicCamera>(null);
|
|
59
|
-
const { showCamHelper } = useControls({
|
|
60
|
-
showCamHelper: {
|
|
61
|
-
value: false,
|
|
62
|
-
label: 'show camera helper'
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
57
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
66
58
|
useHelper((showCamHelper ? cam : noCam) as any, CameraHelper)
|
|
67
59
|
const camSize = 100;
|
package/maplibre/package.json
CHANGED
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-three-map",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"description": "Use react-three-fiber inside MapLibre and Mapbox",
|
|
5
5
|
"main": "dist/cjs/main.js",
|
|
6
|
-
"module": "dist/es/main.
|
|
6
|
+
"module": "dist/es/main.mjs",
|
|
7
7
|
"types": "src/mapbox/index.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"repository": "https://github.com/RodrigoHamuy/react-three-map",
|
|
@@ -56,7 +56,19 @@
|
|
|
56
56
|
"vite": "^4.3.9"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
|
-
"@react-three/fiber": "
|
|
60
|
-
"
|
|
59
|
+
"@react-three/fiber": ">=8.13",
|
|
60
|
+
"mapbox-gl": ">=2.15",
|
|
61
|
+
"maplibre-gl": ">=3.1",
|
|
62
|
+
"react-map-gl": ">=7.1",
|
|
63
|
+
"react": ">=18.0",
|
|
64
|
+
"three": ">=0.133"
|
|
65
|
+
},
|
|
66
|
+
"peerDependenciesMeta": {
|
|
67
|
+
"mapbox-gl": {
|
|
68
|
+
"optional": true
|
|
69
|
+
},
|
|
70
|
+
"maplibre-gl": {
|
|
71
|
+
"optional": true
|
|
72
|
+
}
|
|
61
73
|
}
|
|
62
74
|
}
|
|
@@ -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
|
package/src/core/use-on-add.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { RenderProps, createRoot } from "@react-three/fiber";
|
|
2
2
|
import { useState } from "react";
|
|
3
3
|
import { createEvents } from "./create-events";
|
|
4
|
+
import { MapInstance } from "./generic-map";
|
|
4
5
|
import { StateRef } from "./state-ref";
|
|
5
6
|
import { useFunction } from "./use-function";
|
|
6
|
-
import { MapInstance } from "./generic-map";
|
|
7
7
|
|
|
8
8
|
export function useOnAdd(ref: StateRef, { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>) {
|
|
9
9
|
|
|
@@ -1,24 +1,38 @@
|
|
|
1
1
|
import { MapControls } from "@react-three/drei";
|
|
2
2
|
import { Canvas as FiberCanvas } from "@react-three/fiber";
|
|
3
|
+
import { useControls } from "leva";
|
|
3
4
|
import { MyScene } from "./my-scene";
|
|
4
5
|
import { StoryMap } from "./story-map";
|
|
5
6
|
|
|
6
7
|
export function WithMap() {
|
|
8
|
+
const showCamHelper = useShowCamHelper()
|
|
7
9
|
return <StoryMap
|
|
8
10
|
latitude={51.5073218}
|
|
9
11
|
longitude={-0.1276473}
|
|
10
12
|
zoom={18}
|
|
13
|
+
pitch={60}
|
|
11
14
|
canvas={{ shadows: 'variance' }}
|
|
12
15
|
>
|
|
13
|
-
<MyScene />
|
|
16
|
+
<MyScene showCamHelper={showCamHelper} />
|
|
14
17
|
</StoryMap>
|
|
15
18
|
}
|
|
16
19
|
|
|
17
20
|
export const WithoutMap = () => {
|
|
21
|
+
const showCamHelper = useShowCamHelper()
|
|
18
22
|
return <div style={{ height: '100vh' }}>
|
|
19
23
|
<FiberCanvas camera={{ position: [100, 100, 100] }} shadows="variance">
|
|
20
|
-
<MyScene />
|
|
24
|
+
<MyScene showCamHelper={showCamHelper} />
|
|
21
25
|
<MapControls makeDefault />
|
|
22
26
|
</FiberCanvas>
|
|
23
27
|
</div>
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
const useShowCamHelper = () => {
|
|
31
|
+
const { showCamHelper } = useControls({
|
|
32
|
+
showCamHelper: {
|
|
33
|
+
value: false,
|
|
34
|
+
label: 'show camera helper'
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
return showCamHelper
|
|
24
38
|
}
|
|
@@ -7,8 +7,8 @@ export function Default() {
|
|
|
7
7
|
|
|
8
8
|
const [hovered, hover] = useState(false);
|
|
9
9
|
|
|
10
|
-
return <StoryMap latitude={51} longitude={0}>
|
|
11
|
-
<Html>
|
|
10
|
+
return <StoryMap latitude={51} longitude={0} zoom={13} pitch={60}>
|
|
11
|
+
<Html center position={[0, 250, 0]} style={{ textAlign: 'center', fontSize: '2em', width: '10em', lineHeight: '1.5em' }}><i>Some</i> <b>HTML</b><br />content!</Html>
|
|
12
12
|
<Box
|
|
13
13
|
args={[500, 500, 500]}
|
|
14
14
|
position={[0, 250, 0]}
|
|
@@ -2,17 +2,22 @@ import { ThemeState, useLadleContext } from '@ladle/react';
|
|
|
2
2
|
import { useControls } from 'leva';
|
|
3
3
|
import Mapbox from "mapbox-gl";
|
|
4
4
|
import 'mapbox-gl/dist/mapbox-gl.css';
|
|
5
|
-
import { FC } from "react";
|
|
5
|
+
import { FC, PropsWithChildren } from "react";
|
|
6
6
|
import Map from 'react-map-gl';
|
|
7
|
-
import { StoryMapProps } from '../story-map';
|
|
8
7
|
import { Canvas } from 'react-three-map';
|
|
8
|
+
import { StoryMapProps } from '../story-map';
|
|
9
9
|
|
|
10
10
|
/** `<Map>` styled for stories */
|
|
11
11
|
export const StoryMapbox: FC<StoryMapProps> = ({
|
|
12
12
|
latitude, longitude, zoom = 18, pitch = 60, canvas, children
|
|
13
13
|
}) => {
|
|
14
14
|
|
|
15
|
-
const { mapboxToken } = useControls({
|
|
15
|
+
const { mapboxToken } = useControls({
|
|
16
|
+
mapboxToken: {
|
|
17
|
+
value: import.meta.env.VITE_MAPBOX_TOKEN || '',
|
|
18
|
+
label: 'mapbox token',
|
|
19
|
+
}
|
|
20
|
+
})
|
|
16
21
|
|
|
17
22
|
const theme = useLadleContext().globalState.theme;
|
|
18
23
|
|
|
@@ -23,7 +28,7 @@ export const StoryMapbox: FC<StoryMapProps> = ({
|
|
|
23
28
|
Mapbox.accessToken = mapboxToken;
|
|
24
29
|
|
|
25
30
|
return <div style={{ height: '100vh', position: 'relative' }}>
|
|
26
|
-
{!mapboxToken &&
|
|
31
|
+
{!mapboxToken && <Center>Add a mapbox token to load this component</Center>}
|
|
27
32
|
{!!mapboxToken && <Map
|
|
28
33
|
antialias
|
|
29
34
|
initialViewState={{
|
|
@@ -40,4 +45,14 @@ export const StoryMapbox: FC<StoryMapProps> = ({
|
|
|
40
45
|
</Canvas>
|
|
41
46
|
</Map>}
|
|
42
47
|
</div>
|
|
43
|
-
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
const Center = ({ children }: PropsWithChildren) => (
|
|
51
|
+
<div style={{
|
|
52
|
+
display: 'flex',
|
|
53
|
+
height: '100%',
|
|
54
|
+
width: '100%',
|
|
55
|
+
alignItems: 'center',
|
|
56
|
+
justifyContent: 'center',
|
|
57
|
+
}}>{children}</div>
|
|
58
|
+
)
|
|
@@ -2,7 +2,7 @@ import { useFrame, Vector3 } from "@react-three/fiber";
|
|
|
2
2
|
import { useControls } from "leva";
|
|
3
3
|
import Mapbox from "mapbox-gl";
|
|
4
4
|
import 'mapbox-gl/dist/mapbox-gl.css';
|
|
5
|
-
import { FC, useRef, useState } from "react";
|
|
5
|
+
import { FC, PropsWithChildren, useRef, useState } from "react";
|
|
6
6
|
import Map from 'react-map-gl';
|
|
7
7
|
import { Canvas } from "react-three-map";
|
|
8
8
|
import { Mesh } from "three";
|
|
@@ -11,12 +11,17 @@ export default { title: 'Canvas' }
|
|
|
11
11
|
|
|
12
12
|
export function MapboxExample() {
|
|
13
13
|
|
|
14
|
-
const { mapboxToken } = useControls({
|
|
14
|
+
const { mapboxToken } = useControls({
|
|
15
|
+
mapboxToken: {
|
|
16
|
+
value: import.meta.env.VITE_MAPBOX_TOKEN || '',
|
|
17
|
+
label: 'mapbox token',
|
|
18
|
+
}
|
|
19
|
+
})
|
|
15
20
|
|
|
16
21
|
Mapbox.accessToken = mapboxToken;
|
|
17
22
|
|
|
18
23
|
return <div style={{ height: '100vh' }}>
|
|
19
|
-
{!mapboxToken &&
|
|
24
|
+
{!mapboxToken && <Center>Add a mapbox token to load this component</Center>}
|
|
20
25
|
{!!mapboxToken && <Map
|
|
21
26
|
antialias
|
|
22
27
|
initialViewState={{
|
|
@@ -41,6 +46,16 @@ export function MapboxExample() {
|
|
|
41
46
|
</div>
|
|
42
47
|
}
|
|
43
48
|
|
|
49
|
+
const Center = ({ children }: PropsWithChildren) => (
|
|
50
|
+
<div style={{
|
|
51
|
+
display: 'flex',
|
|
52
|
+
height: '100%',
|
|
53
|
+
width: '100%',
|
|
54
|
+
alignItems: 'center',
|
|
55
|
+
justifyContent: 'center',
|
|
56
|
+
}}>{children}</div>
|
|
57
|
+
)
|
|
58
|
+
|
|
44
59
|
const Box: FC<{ position: Vector3 }> = (props) => {
|
|
45
60
|
// This reference gives us direct access to the THREE.Mesh object
|
|
46
61
|
const ref = useRef<Mesh>(null)
|
package/src/stories/my-scene.tsx
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { Box, Plane, useHelper } from "@react-three/drei";
|
|
2
2
|
import { MeshProps, useFrame, useThree } from '@react-three/fiber';
|
|
3
|
-
import { useControls } from "leva";
|
|
4
3
|
import { useCallback, useRef, useState } from 'react';
|
|
5
4
|
import { CameraHelper, MathUtils, Mesh, OrthographicCamera } from "three";
|
|
6
5
|
|
|
7
|
-
export function MyScene() {
|
|
6
|
+
export function MyScene({ showCamHelper }: { showCamHelper?: boolean }) {
|
|
8
7
|
return <>
|
|
9
|
-
<Lights />
|
|
8
|
+
<Lights showCamHelper={showCamHelper} />
|
|
10
9
|
<Floor />
|
|
11
10
|
<MyBox position={[-8 * 3, 8 * 1.5, 0]} />
|
|
12
11
|
<MyBox position={[8 * 3, 8 * 1.5, 0]} />
|
|
@@ -52,15 +51,9 @@ function MyBox(props: MeshProps) {
|
|
|
52
51
|
</Box>
|
|
53
52
|
);
|
|
54
53
|
}
|
|
55
|
-
function Lights() {
|
|
54
|
+
function Lights({ showCamHelper }: { showCamHelper?: boolean }) {
|
|
56
55
|
const cam = useRef<OrthographicCamera>(null);
|
|
57
56
|
const noCam = useRef<OrthographicCamera>(null);
|
|
58
|
-
const { showCamHelper } = useControls({
|
|
59
|
-
showCamHelper: {
|
|
60
|
-
value: false,
|
|
61
|
-
label: 'show camera helper'
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
57
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
65
58
|
useHelper((showCamHelper ? cam : noCam) as any, CameraHelper)
|
|
66
59
|
const camSize = 100;
|
|
@@ -76,7 +69,6 @@ function Lights() {
|
|
|
76
69
|
ref={cam}
|
|
77
70
|
attach="shadow-camera"
|
|
78
71
|
args={[-camSize, camSize, -camSize, camSize, 0.1, 100]}
|
|
79
|
-
rotation={[0, 90 * MathUtils.DEG2RAD, 0]}
|
|
80
72
|
/>
|
|
81
73
|
</directionalLight>
|
|
82
74
|
<pointLight position={[-10, 0, -20]} color="white" intensity={1} />
|
|
@@ -6,12 +6,17 @@ import { StoryMap } from "./story-map";
|
|
|
6
6
|
export function Default() {
|
|
7
7
|
|
|
8
8
|
const [hovered, hover] = useState(false);
|
|
9
|
-
|
|
9
|
+
|
|
10
10
|
const ref = useRef<HTMLDivElement>(null)
|
|
11
11
|
|
|
12
12
|
return <div ref={ref} style={{ height: '100vh', position: 'relative' }}>
|
|
13
13
|
<style>{`.stats{position:absolute !important}`}</style>
|
|
14
|
-
<StoryMap
|
|
14
|
+
<StoryMap
|
|
15
|
+
latitude={51}
|
|
16
|
+
longitude={0}
|
|
17
|
+
zoom={13}
|
|
18
|
+
pitch={60}
|
|
19
|
+
canvas={{ frameloop: 'demand' }}>
|
|
15
20
|
<Box
|
|
16
21
|
args={[500, 500, 500]}
|
|
17
22
|
position={[0, 250, 0]}
|
|
@@ -18,25 +18,18 @@ export interface StoryMapProps extends PropsWithChildren {
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
/** `<Map>` styled for stories */
|
|
21
|
-
export const StoryMap: FC<StoryMapProps> = ({
|
|
22
|
-
latitude, longitude, zoom = 13, pitch = 60, children
|
|
23
|
-
}) => {
|
|
21
|
+
export const StoryMap: FC<StoryMapProps> = (props) => {
|
|
24
22
|
|
|
25
23
|
const { mapProvider } = useControls({
|
|
26
24
|
mapProvider: {
|
|
27
25
|
value: MapProvider.maplibre,
|
|
28
26
|
options: MapProvider,
|
|
27
|
+
label: 'map provider'
|
|
29
28
|
},
|
|
30
29
|
});
|
|
31
30
|
|
|
32
|
-
const props : StoryMapProps = { latitude, longitude, zoom, pitch, children};
|
|
33
|
-
|
|
34
31
|
return <div style={{ height: '100vh', position: 'relative' }}>
|
|
35
|
-
{mapProvider === MapProvider.maplibre && <StoryMaplibre {...props}
|
|
36
|
-
|
|
37
|
-
</StoryMaplibre>}
|
|
38
|
-
{mapProvider === MapProvider.mapbox && <StoryMapbox {...props}>
|
|
39
|
-
{children}
|
|
40
|
-
</StoryMapbox>}
|
|
32
|
+
{mapProvider === MapProvider.maplibre && <StoryMaplibre {...props} />}
|
|
33
|
+
{mapProvider === MapProvider.mapbox && <StoryMapbox {...props} />}
|
|
41
34
|
</div>
|
|
42
35
|
}
|
package/dist/cjs/main.js.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
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/(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 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;
|
package/dist/es/main.js.mjs
DELETED
package/dist/es/main.js.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main.js.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/dist/es/main.js2.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main.js2.mjs","sources":["../../src/mapbox/canvas.tsx"],"sourcesContent":["import { RenderProps, extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"mapbox-gl\";\nimport { PropsWithChildren, memo, useMemo } from \"react\";\nimport { Layer } from \"react-map-gl\";\nimport * as THREE from \"three\";\nimport { coordsToMatrix } from \"../core/coords-to-matrix\";\nimport { useCanvas } from \"../core/use-canvas\";\n\nextend(THREE);\n\nexport interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n longitude: number,\n latitude: number,\n altitude?: number,\n frameloop?: 'always' | 'demand',\n}\n\n/** react`-three-fiber` canvas inside `MapLibre` */\nexport const Canvas = memo<CanvasProps>(({\n longitude, latitude, altitude = 0,\n frameloop = 'always', ...renderProps\n}) => {\n\n const m4 = useMemo(() => coordsToMatrix({\n latitude, longitude, altitude, fromLngLat: MercatorCoordinate.fromLngLat,\n }), [latitude, longitude, altitude]);\n\n const { id, onAdd, onRemove, render } = useCanvas({ m4, frameloop, ...renderProps });\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","frameloop","renderProps","m4","useMemo","coordsToMatrix","MercatorCoordinate","id","onAdd","onRemove","render","useCanvas","jsx","Layer"],"mappings":";;;;;;;;AAQAA,EAAOC,CAAK;AAUC,MAAAC,IAASC,EAAkB,CAAC;AAAA,EACvC,WAAAC;AAAA,EAAW,UAAAC;AAAA,EAAU,UAAAC,IAAW;AAAA,EAChC,WAAAC,IAAY;AAAA,EAAU,GAAGC;AAC3B,MAAM;AAEE,QAAAC,IAAKC,EAAQ,MAAMC,EAAe;AAAA,IACtC,UAAAN;AAAA,IAAU,WAAAD;AAAA,IAAW,UAAAE;AAAA,IAAU,YAAYM,EAAmB;AAAA,EAC/D,CAAA,GAAG,CAACP,GAAUD,GAAWE,CAAQ,CAAC,GAE7B,EAAE,IAAAO,GAAI,OAAAC,GAAO,UAAAC,GAAU,QAAAC,EAAO,IAAIC,EAAU,EAAE,IAAAR,GAAI,WAAAF,GAAW,GAAGC,EAAa,CAAA;AAE5E,SAAA,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACN,IAAAN;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,QAAAC;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}
|
package/dist/es/main.js7.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main.js7.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 / (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.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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"}
|
|
@@ -1 +0,0 @@
|
|
|
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/(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 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;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main.js.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main.js2.mjs","sources":["../../../src/maplibre/canvas.tsx"],"sourcesContent":["import { RenderProps, extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"maplibre-gl\";\nimport { PropsWithChildren, memo, useMemo } from \"react\";\nimport { Layer } from \"react-map-gl/maplibre\";\nimport * as THREE from \"three\";\nimport { coordsToMatrix } from \"../core/coords-to-matrix\";\nimport { useCanvas } from \"../core/use-canvas\";\n\nextend(THREE);\n\nexport interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n longitude: number,\n latitude: number,\n altitude?: number,\n frameloop?: 'always' | 'demand',\n}\n\n/** react`-three-fiber` canvas inside `MapLibre` */\nexport const Canvas = memo<CanvasProps>(({\n longitude, latitude, altitude = 0,\n frameloop = 'always', ...renderProps\n}) => {\n\n const m4 = useMemo(() => coordsToMatrix({\n latitude, longitude, altitude, fromLngLat: MercatorCoordinate.fromLngLat,\n }), [latitude, longitude, altitude]);\n\n const { id, onAdd, onRemove, render } = useCanvas({ m4, frameloop, ...renderProps });\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","frameloop","renderProps","m4","useMemo","coordsToMatrix","MercatorCoordinate","id","onAdd","onRemove","render","useCanvas","jsx","Layer"],"mappings":";;;;;;;;AAQAA,EAAOC,CAAK;AAUC,MAAAC,IAASC,EAAkB,CAAC;AAAA,EACvC,WAAAC;AAAA,EAAW,UAAAC;AAAA,EAAU,UAAAC,IAAW;AAAA,EAChC,WAAAC,IAAY;AAAA,EAAU,GAAGC;AAC3B,MAAM;AAEE,QAAAC,IAAKC,EAAQ,MAAMC,EAAe;AAAA,IACtC,UAAAN;AAAA,IAAU,WAAAD;AAAA,IAAW,UAAAE;AAAA,IAAU,YAAYM,EAAmB;AAAA,EAC/D,CAAA,GAAG,CAACP,GAAUD,GAAWE,CAAQ,CAAC,GAE7B,EAAE,IAAAO,GAAI,OAAAC,GAAO,UAAAC,GAAU,QAAAC,EAAO,IAAIC,EAAU,EAAE,IAAAR,GAAI,WAAAF,GAAW,GAAGC,EAAa,CAAA;AAE5E,SAAA,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACN,IAAAN;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,QAAAC;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main.js3.mjs","sources":["../../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\nconst m4 = new Matrix4();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {\n longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat\n}) {\n const center = 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 m4.compose(pos, quat, scale).toArray();\n}\n"],"names":["quat","Quaternion","euler","Euler","pos","Vector3","scale","m4","Matrix4","coordsToMatrix","longitude","latitude","altitude","fromLngLat","center","scaleUnit"],"mappings":";AAGA,MAAMA,IAAO,IAAIC,KACXC,IAAQ,IAAIC,KACZC,IAAM,IAAIC,KACVC,IAAQ,IAAID,KACZE,IAAK,IAAIC;AAGR,SAASC,EAAe,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,YAAAC,KAE7D;AACD,QAAMC,IAASD,EAAW,CAACH,GAAWC,CAAQ,GAAGC,CAAQ,GACnDG,IAAYD,EAAO;AACzB,SAAAV,EAAI,IAAIU,EAAO,GAAGA,EAAO,GAAGA,EAAO,KAAK,CAAC,GACzCR,EAAM,IAAIS,GAAW,CAACA,GAAWA,CAAS,GACrCf,EAAA,aAAaE,EAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC,GACzCK,EAAG,QAAQH,GAAKJ,GAAMM,CAAK,EAAE;AACtC;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main.js4.mjs","sources":["../../../src/core/use-canvas.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, useEffect, useId, useRef } from \"react\";\nimport { Matrix4Tuple } from \"three\";\nimport { StateRef } from \"./state-ref\";\nimport { useOnAdd } from \"./use-on-add\";\nimport { useRender } from \"./use-render\";\n\nexport interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n frameloop: 'always' | 'demand',\n m4: Matrix4Tuple;\n}\n\nexport const useCanvas = (({\n m4, children, frameloop, ...renderProps\n}: useCanvasProps) => {\n const id = useId();\n\n const stateRef: StateRef = useRef();\n\n const { onAdd, onRemove, mounted } = useOnAdd(stateRef, { frameloop, ...renderProps });\n\n const render = useRender(m4, stateRef, frameloop);\n\n useEffect(() => {\n if (!mounted) return;\n if (!stateRef.current) return;\n stateRef.current.root.render(<>{children}</>);\n }, [stateRef, mounted, children])\n\n return { id, onAdd, onRemove, render }\n})"],"names":["useCanvas","m4","children","frameloop","renderProps","id","useId","stateRef","useRef","onAdd","onRemove","mounted","useOnAdd","render","useRender","useEffect","jsx","Fragment"],"mappings":";;;;AAYO,MAAMA,IAAa,CAAC;AAAA,EACzB,IAAAC;AAAA,EAAI,UAAAC;AAAA,EAAU,WAAAC;AAAA,EAAW,GAAGC;AAC9B,MAAsB;AACpB,QAAMC,IAAKC,KAELC,IAAqBC,KAErB,EAAE,OAAAC,GAAO,UAAAC,GAAU,SAAAC,MAAYC,EAASL,GAAU,EAAE,WAAAJ,GAAW,GAAGC,EAAA,CAAa,GAE/ES,IAASC,EAAUb,GAAIM,GAAUJ,CAAS;AAEhD,SAAAY,EAAU,MAAM;AACd,IAAKJ,KACAJ,EAAS,WACdA,EAAS,QAAQ,KAAK,OAAO,gBAAAS,EAAAC,GAAA,EAAG,UAAAf,EAAS,CAAA,CAAG;AAAA,EAC3C,GAAA,CAACK,GAAUI,GAAST,CAAQ,CAAC,GAEzB,EAAE,IAAAG,GAAI,OAAAI,GAAO,UAAAC,GAAU,QAAAG,EAAO;AACvC;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main.js5.mjs","sources":["../../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, createRoot } from \"@react-three/fiber\";\nimport { useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\nimport { MapInstance } from \"./generic-map\";\n\nexport function useOnAdd(ref: StateRef, { frameloop, ...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 dpr: window.devicePixelRatio,\n events: createEvents(),\n ...renderProps,\n frameloop: 'never',\n gl: {\n context: gl,\n depth: true,\n autoClear: false,\n antialias: true,\n ...renderProps?.gl,\n },\n onCreated: (state) => {\n\n if (frameloop === 'demand') {\n state.set({\n frameloop,\n invalidate: () => {\n map.triggerRepaint();\n }\n })\n }\n\n ref.current = {\n state,\n map,\n root,\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n state.gl.forceContextLoss = () => { };\n\n // we update the camera on create rather than on config\n // because otherwise some components may use it too early\n // and get NaN values they can't recover from (drei HTML)\n state.camera.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('resize', onResize)\n })\n })\n\n return { onAdd, onRemove, mounted };\n}"],"names":["useOnAdd","ref","frameloop","renderProps","mounted","setMounted","useState","onAdd","useFunction","map","gl","canvas","root","createRoot","createEvents","state","onResize","_a","onRemove"],"mappings":";;;;AAOO,SAASA,EAASC,GAAe,EAAE,WAAAC,GAAW,GAAGC,KAA+C;AAErG,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAQC,EAAY,CAACC,GAAkBC,MAA8B;AAEnE,UAAAC,IAASF,EAAI,aACbG,IAAOC,EAAWF,CAAM;AAC9B,IAAAC,EAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQE,EAAa;AAAA,MACrB,GAAGX;AAAA,MACH,WAAW;AAAA,MACX,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;AAEpB,QAAIb,MAAc,YAChBa,EAAM,IAAI;AAAA,UACR,WAAAb;AAAA,UACA,YAAY,MAAM;AAChB,YAAAO,EAAI,eAAe;AAAA,UACrB;AAAA,QAAA,CACD,GAGHR,EAAI,UAAU;AAAA,UACZ,OAAAc;AAAA,UACA,KAAAN;AAAA,UACA,MAAAG;AAAA,QAAA,GAIIG,EAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA,GAKlCA,EAAM,OAAO,mBAAmB;AAAA,MAClC;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,GAEDF,EAAI,UAAU;AAAA,MACZ,KAAAQ;AAAA,MACA,MAAAG;AAAA,IAAA,GAGEH,EAAA,GAAG,UAAUO,CAAQ,GAEd,WAAA,MAAMX,EAAW,EAAI,CAAC;AAAA,EAAA,CAElC,GAEKW,IAAWR,EAAY,MAAM;;AAC7B,QAAA,GAACS,IAAAhB,EAAI,YAAJ,QAAAgB,EAAa;AAAO;AACnB,UAAAF,IAAQd,EAAI,QAAQ,OAEpBU,IADMV,EAAI,QAAQ,IACL;AACnB,IAAAc,EAAM,QAAQJ,EAAO,OAAOA,EAAO,MAAM;AAAA,EAAA,CAC1C,GAEKO,IAAWV,EAAY,CAACC,MAAqB;AACjD,eAAW,MAAM;AACf,MAAKR,EAAI,YACLA,EAAA,QAAQ,KAAK,WACbQ,EAAA,IAAI,UAAUO,CAAQ;AAAA,IAAA,CAC3B;AAAA,EAAA,CACF;AAEM,SAAA,EAAE,OAAAT,GAAO,UAAAW,GAAU,SAAAd;AAC5B;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main.js6.mjs","sources":["../../../src/core/use-render.ts"],"sourcesContent":["import { Matrix4, Matrix4Tuple } from \"three\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\n\nconst mx = new Matrix4();\n\nexport function useRender(\n m4: Matrix4Tuple, stateRef: StateRef, frameloop: 'always' | 'demand'\n) {\n\n const render = useFunction((_gl: WebGL2RenderingContext, matrix: number[]) => {\n if (!stateRef.current?.state) return;\n const camera = stateRef.current.state.camera;\n const gl = stateRef.current.state.gl;\n const advance = stateRef.current.state.advance;\n camera.projectionMatrix.fromArray(matrix).multiply(mx.fromArray(m4));\n camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();\n gl.resetState();\n advance(Date.now() * 0.001, true);\n if (frameloop === 'always') stateRef.current.map.triggerRepaint();\n })\n\n return render;\n\n}"],"names":["mx","Matrix4","useRender","m4","stateRef","frameloop","useFunction","_gl","matrix","_a","camera","gl","advance"],"mappings":";;AAIA,MAAMA,IAAK,IAAIC;AAEC,SAAAC,EACdC,GAAkBC,GAAoBC,GACtC;AAcO,SAZQC,EAAY,CAACC,GAA6BC,MAAqB;;AACxE,QAAA,GAACC,IAAAL,EAAS,YAAT,QAAAK,EAAkB;AAAO;AACxB,UAAAC,IAASN,EAAS,QAAQ,MAAM,QAChCO,IAAKP,EAAS,QAAQ,MAAM,IAC5BQ,IAAUR,EAAS,QAAQ,MAAM;AAChC,IAAAM,EAAA,iBAAiB,UAAUF,CAAM,EAAE,SAASR,EAAG,UAAUG,CAAE,CAAC,GACnEO,EAAO,wBAAwB,KAAKA,EAAO,gBAAgB,EAAE,UAC7DC,EAAG,WAAW,GACdC,EAAQ,KAAK,IAAQ,IAAA,MAAO,EAAI,GAC5BP,MAAc,YAAmBD,EAAA,QAAQ,IAAI;EAAe,CACjE;AAIH;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main.js7.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 / (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.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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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main.js8.mjs","sources":["../../../src/core/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;"}
|