npm - react-three-map - Versions diffs - 0.2.1 → 0.3.1 - Mend

react-three-map 0.2.1 → 0.3.1

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.

Files changed (117) hide show

package/CHANGELOG.md +12 -0
package/README.md +18 -15
package/dist/cjs/main.js +1 -0
package/dist/es/main.mjs +5 -0
package/dist/es/main.mjs.map +1 -0
package/dist/es/main2.mjs +38 -0
package/dist/es/main2.mjs.map +1 -0
package/dist/{maplibre/es/main.js3.mjs → es/main3.mjs} +1 -1
package/dist/es/main3.mjs.map +1 -0
package/dist/es/main4.mjs +19 -0
package/dist/es/main4.mjs.map +1 -0
package/dist/{maplibre/es/main.js5.mjs → es/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/{maplibre/es/main.js7.mjs → es/main7.mjs} +1 -1
package/dist/es/main7.mjs.map +1 -0
package/dist/{maplibre/es/main.js8.mjs → es/main8.mjs} +1 -1
package/dist/es/main8.mjs.map +1 -0
package/dist/maplibre/cjs/main.js +1 -0
package/dist/maplibre/es/main.mjs +5 -0
package/dist/maplibre/es/main.mjs.map +1 -0
package/dist/maplibre/es/main2.mjs +38 -0
package/dist/maplibre/es/main2.mjs.map +1 -0
package/dist/{es/main.js3.mjs → maplibre/es/main3.mjs} +1 -1
package/dist/maplibre/es/main3.mjs.map +1 -0
package/dist/maplibre/es/main4.mjs +19 -0
package/dist/maplibre/es/main4.mjs.map +1 -0
package/dist/{es/main.js8.mjs → maplibre/es/main5.mjs} +3 -3
package/dist/maplibre/es/main5.mjs.map +1 -0
package/dist/{es/main.js9.mjs → maplibre/es/main6.mjs} +2 -2
package/dist/maplibre/es/main6.mjs.map +1 -0
package/dist/{es/main.js10.mjs → maplibre/es/main7.mjs} +1 -1
package/dist/maplibre/es/main7.mjs.map +1 -0
package/dist/{es/main.js11.mjs → maplibre/es/main8.mjs} +1 -1
package/dist/maplibre/es/main8.mjs.map +1 -0
package/example-mapbox/package.json +29 -0
package/example-mapbox/sandbox.config.json +3 -0
package/example-mapbox/src/canvas.basic.stories.tsx +84 -0
package/example-mapbox/src/comparison.stories.tsx +37 -0
package/example-mapbox/src/html-on-top.stories.tsx +24 -0
package/example-mapbox/src/my-scene.tsx +89 -0
package/example-mapbox/src/render-on-demand.stories.tsx +32 -0
package/example-mapbox/src/story-map.tsx +61 -0
package/example-mapbox/src/vite-env.d.ts +1 -0
package/example-mapbox/tsconfig.json +27 -0
package/example-mapbox/tsconfig.node.json +10 -0
package/example-mapbox/yarn.lock +4154 -0
package/example-maplibre/package.json +29 -0
package/example-maplibre/sandbox.config.json +3 -0
package/example-maplibre/src/canvas.basic.stories.tsx +61 -0
package/example-maplibre/src/comparison.stories.tsx +35 -0
package/example-maplibre/src/html-on-top.stories.tsx +24 -0
package/example-maplibre/src/my-scene.tsx +89 -0
package/example-maplibre/src/render-on-demand.stories.tsx +32 -0
package/example-maplibre/src/story-map.tsx +38 -0
package/example-maplibre/src/vite-env.d.ts +1 -0
package/example-maplibre/tsconfig.json +25 -0
package/example-maplibre/tsconfig.node.json +10 -0
package/example-maplibre/yarn.lock +4181 -0
package/maplibre/package.json +2 -2
package/package.json +22 -7
package/src/{canvas/core → core}/generic-map.ts +15 -2
package/src/{canvas/core → core}/state-ref.ts +2 -2
package/src/{canvas/core/internal-canvas.tsx → core/use-canvas.tsx} +6 -18
package/src/{canvas/core → core}/use-on-add.ts +3 -3
package/src/{canvas/canvas-mapbox.tsx → mapbox/canvas.tsx} +15 -9
package/src/mapbox/index.ts +1 -0
package/src/{canvas/canvas-maplibre.tsx → maplibre/canvas.tsx} +13 -7
package/src/maplibre/index.ts +1 -0
package/src/stories/comparison.stories.tsx +27 -30
package/src/stories/html-on-top.stories.tsx +11 -16
package/src/stories/mapbox/story-mapbox.tsx +58 -0
package/src/stories/mapbox-example.stories.tsx +84 -0
package/src/stories/maplibre/story-maplibre.tsx +32 -0
package/src/stories/{canvas.basic.stories.tsx → maplibre-example.stories.tsx} +28 -30
package/src/stories/my-scene.tsx +3 -12
package/src/stories/render-on-demand.stories.tsx +23 -37
package/src/stories/story-map.tsx +23 -28
package/tsconfig.json +5 -0
package/dist/cjs/main.js.js +0 -1318
package/dist/es/main.js.mjs +0 -5
package/dist/es/main.js.mjs.map +0 -1
package/dist/es/main.js10.mjs.map +0 -1
package/dist/es/main.js11.mjs.map +0 -1
package/dist/es/main.js2.mjs +0 -34
package/dist/es/main.js2.mjs.map +0 -1
package/dist/es/main.js3.mjs.map +0 -1
package/dist/es/main.js4.mjs +0 -31
package/dist/es/main.js4.mjs.map +0 -1
package/dist/es/main.js5.mjs +0 -23537
package/dist/es/main.js5.mjs.map +0 -1
package/dist/es/main.js6.mjs +0 -5
package/dist/es/main.js6.mjs.map +0 -1
package/dist/es/main.js7.mjs +0 -5
package/dist/es/main.js7.mjs.map +0 -1
package/dist/es/main.js8.mjs.map +0 -1
package/dist/es/main.js9.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 +0 -34
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 +0 -31
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
package/src/main-mapbox.ts +0 -1
package/src/main-maplibre.ts +0 -1
/package/src/{canvas/core → core}/coords-to-matrix.ts +0 -0
/package/src/{canvas/core → core}/create-events.ts +0 -0
/package/src/{canvas/core → core}/generic-map.test.ts +0 -0
/package/src/{canvas/core → core}/use-function.ts +0 -0
/package/src/{canvas/core → core}/use-render.ts +0 -0

package/example-mapbox/src/comparison.stories.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import { MapControls } from "@react-three/drei";
+import { Canvas as FiberCanvas } from "@react-three/fiber";
+import { Canvas } from "react-three-map";
+import { MyScene } from "./my-scene";
+import { StoryMap } from "./story-map";
+import { useControls } from "leva";
+export function WithMap() {
+  const showCamHelper = useShowCamHelper()
+  return <div style={{ height: '100vh' }}>
+    <StoryMap latitude={51.5073218} longitude={-0.1276473} zoom={18}>
+      <Canvas latitude={51.5073218} longitude={-0.1276473} shadows="variance">
+        <MyScene showCamHelper={showCamHelper} />
+      </Canvas>
+    </StoryMap>
+  </div>
+}
+export const WithoutMap = () => {
+  const showCamHelper = useShowCamHelper()
+  return <div style={{ height: '100vh' }}>
+    <FiberCanvas camera={{ position: [100, 100, 100] }} shadows="variance">
+      <MyScene showCamHelper={showCamHelper} />
+      <MapControls makeDefault />
+    </FiberCanvas>
+  </div>
+}
+const useShowCamHelper = () => {
+  const { showCamHelper } = useControls({
+    showCamHelper: {
+      value: false,
+      label: 'show camera helper'
+    }
+  });
+  return showCamHelper
+}

package/example-mapbox/src/html-on-top.stories.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import { Box, Html } from "@react-three/drei";
+import { useState } from "react";
+import { Canvas } from "react-three-map";
+import { MathUtils } from "three";
+import { StoryMap } from "./story-map";
+export function Default() {
+  const [hovered, hover] = useState(false);
+  return <StoryMap latitude={51} longitude={0} zoom={13}>
+    <Canvas latitude={51} longitude={0} frameloop="demand">
+      <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>
+      <Box
+        args={[500, 500, 500]}
+        position={[0, 250, 0]}
+        rotation={[0, 45 * MathUtils.DEG2RAD, 0]}
+        onPointerOver={() => hover(true)}
+        onPointerOut={() => hover(false)}
+        material-color={hovered ? 'purple' : 'orange'}
+      />
+    </Canvas>
+  </StoryMap>
+}

package/example-mapbox/src/my-scene.tsx ADDED Viewed

@@ -0,0 +1,89 @@
+import { Box, Plane, useHelper } from "@react-three/drei";
+import { MeshProps, useFrame, useThree } from '@react-three/fiber';
+import { useCallback, useRef, useState } from 'react';
+import { CameraHelper, MathUtils, Mesh, OrthographicCamera } from "three";
+export function MyScene({ showCamHelper }: { showCamHelper?: boolean }) {
+  return <>
+    <Lights showCamHelper={showCamHelper} />
+    <Floor />
+    <MyBox position={[-8 * 3, 8 * 1.5, 0]} />
+    <MyBox position={[8 * 3, 8 * 1.5, 0]} />
+  </>
+}
+function MyBox(props: MeshProps) {
+  const [hovered, hover] = useState(false);
+  const mesh = useRef<Mesh>(null)
+  const invalidate = useThree(st => st.invalidate);
+  const onOver = useCallback(() => {
+    hover(true);
+  }, [])
+  const onOut = useCallback(() => {
+    hover(false);
+  }, [])
+  useFrame((_st, dt) => {
+    if (!mesh.current) return;
+    mesh.current.rotateY(dt);
+    invalidate();
+  })
+  return (
+    <Box
+      {...props}
+      ref={mesh}
+      args={[16, 16, 16]}
+      receiveShadow
+      castShadow
+      onClick={onOver}
+      onPointerOver={onOver}
+      onPointerOut={onOut}
+    >
+      <meshStandardMaterial
+        color={hovered ? "red" : "orange"}
+        metalness={.75}
+        roughness={.5}
+      />
+    </Box>
+  );
+}
+function Lights({ showCamHelper }: { showCamHelper?: boolean }) {
+  const cam = useRef<OrthographicCamera>(null);
+  const noCam = useRef<OrthographicCamera>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  useHelper((showCamHelper ? cam : noCam) as any, CameraHelper)
+  const camSize = 100;
+  return <>
+    <ambientLight intensity={0.5} />
+    <directionalLight
+      castShadow
+      position={[2.5, 50, 5]}
+      intensity={1.5}
+      shadow-mapSize={1024}
+    >
+      <orthographicCamera
+        ref={cam}
+        attach="shadow-camera"
+        args={[-camSize, camSize, -camSize, camSize, 0.1, 100]}
+        rotation={[0, 90 * MathUtils.DEG2RAD, 0]}
+      />
+    </directionalLight>
+    <pointLight position={[-10, 0, -20]} color="white" intensity={1} />
+    <pointLight position={[0, -10, 0]} intensity={1} />
+  </>
+}
+function Floor() {
+  return <Plane
+    args={[200, 200]}
+    position={[0, 0, 0]}
+    rotation={[-90 * MathUtils.DEG2RAD, 0, 0]}
+    receiveShadow
+  >
+    <shadowMaterial opacity={.5} />
+  </Plane>
+}

package/example-mapbox/src/render-on-demand.stories.tsx ADDED Viewed

@@ -0,0 +1,32 @@
+import { Box, Stats } from "@react-three/drei";
+import { useRef, useState } from "react";
+import { Canvas } from "react-three-map";
+import { MathUtils } from "three";
+import { StoryMap } from "./story-map";
+export function Default() {
+  const [hovered, hover] = useState(false);
+  const ref = useRef<HTMLDivElement>(null)
+  return <div style={{ height: '100vh', position: 'relative' }}>
+    <style>{`.stats{position:absolute !important}`}</style>
+    <StoryMap latitude={51} longitude={0} zoom={13}>
+      <Canvas latitude={51} longitude={0} frameloop="demand">
+        <Box
+          args={[500, 500, 500]}
+          position={[0, 250, 0]}
+          rotation={[0, 45 * MathUtils.DEG2RAD, 0]}
+          onPointerOver={() => hover(true)}
+          onPointerOut={() => hover(false)}
+          material-color={hovered ? 'purple' : 'orange'}
+        />
+        <Stats className="stats" parent={ref} />
+      </Canvas>
+    </StoryMap>
+    <div style={{ position: 'absolute', bottom: 0, right: 0, left: 0, background: '#ffffffc2', padding: '15px 20px 40px' }}>
+      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>
+}

package/example-mapbox/src/story-map.tsx ADDED Viewed

@@ -0,0 +1,61 @@
+import { ThemeState, useLadleContext } from '@ladle/react';
+import { useControls } from 'leva';
+import Mapbox from "mapbox-gl";
+import 'mapbox-gl/dist/mapbox-gl.css';
+import { FC, PropsWithChildren } from "react";
+import Map from 'react-map-gl';
+export interface StoryMapProps extends PropsWithChildren {
+  latitude: number,
+  longitude: number,
+  zoom?: number,
+  pitch?: number,
+}
+/** `<Map>` styled for stories */
+export const StoryMap: FC<StoryMapProps> = ({
+  latitude, longitude, zoom = 18, pitch = 60, children
+}) => {
+  const { mapboxToken } = useControls({
+    mapboxToken: {
+      value: import.meta.env.VITE_MAPBOX_TOKEN || '',
+      label: 'mapbox token',
+    }
+  })
+  const theme = useLadleContext().globalState.theme;
+  const mapStyle = theme === ThemeState.Dark
+    ? "mapbox://styles/mapbox/dark-v11"
+    : "mapbox://styles/mapbox/streets-v12";
+  Mapbox.accessToken = mapboxToken;
+  return <div style={{ height: '100vh', position: 'relative' }}>
+    {!mapboxToken && <Center>Add a mapbox token to load this component</Center>}
+    {mapboxToken && <Map
+      antialias
+      initialViewState={{
+        latitude,
+        longitude,
+        zoom,
+        pitch,
+      }}
+      mapStyle={mapStyle}
+      mapboxAccessToken={mapboxToken}
+    >
+      {children}
+    </Map>}
+  </div>
+}
+const Center = ({ children }: PropsWithChildren) => (
+  <div style={{
+    display: 'flex',
+    height: '100%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }}>{children}</div>
+)

package/example-mapbox/src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="vite/client" />

package/example-mapbox/tsconfig.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "Node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/example-mapbox/tsconfig.node.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}