react-three-map 0.3.1 → 0.3.3

package/src/stories/maplibre-example.stories.tsx

@@ -1,61 +0,0 @@
-import { useFrame, Vector3 } from "@react-three/fiber";
-import 'maplibre-gl/dist/maplibre-gl.css';
-import { FC, useRef, useState } from "react";
-import Map from 'react-map-gl/maplibre';
-import { Mesh } from "three";
-import { Canvas } from "react-three-map/maplibre";
-
-export default {title: 'Canvas'}
-
-export function AMaplibreExample() {
-  return <div style={{ height: '100vh' }}>
-    <Map
-      antialias
-      initialViewState={{
-        latitude: 51,
-        longitude: 0,
-        zoom: 13,
-        pitch: 60,
-      }}
-      mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
-    >
-      <Canvas latitude={51} longitude={0}>
-        <hemisphereLight
-          args={["#ffffff", "#60666C"]}
-          position={[1, 4.5, 3]}
-        />
-        <object3D scale={500}>
-          <Box position={[-1.2, 1, 0]} />
-          <Box position={[1.2, 1, 0]} />
-        </object3D>
-      </Canvas>
-    </Map>
-  </div>
-}
-
-const Box : FC<{position: Vector3}> = (props) => {
-  // This reference gives us direct access to the THREE.Mesh object
-  const ref = useRef<Mesh>(null)
-  // Hold state for hovered and clicked events
-  const [hovered, hover] = useState(false)
-  const [clicked, click] = useState(false)
-  // Subscribe this component to the render-loop, rotate the mesh every frame
-  useFrame((_state, delta) => {
-    if(!ref.current) return;
-    ref.current.rotation.x += delta;
-    ref.current.rotation.z -= delta;
-  })
-  // Return the view, these are regular Threejs elements expressed in JSX
-  return (
-    <mesh
-      {...props}
-      ref={ref}
-      scale={clicked ? 1.5 : 1}
-      onClick={() => click(!clicked)}
-      onPointerOver={() => hover(true)}
-      onPointerOut={() => hover(false)}>
-      <boxGeometry args={[1, 1, 1]} />
-      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
-    </mesh>
-  )
-}

package/src/stories/my-scene.tsx

@@ -1,88 +0,0 @@
-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]}
-      />
-    </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/src/stories/render-on-demand.stories.tsx

@@ -1,34 +0,0 @@
-import { Box, Stats } from "@react-three/drei";
-import { useRef, useState } from "react";
-import { MathUtils } from "three";
-import { StoryMap } from "./story-map";
-
-export function Default() {
-
-  const [hovered, hover] = useState(false);
-
-  const ref = useRef<HTMLDivElement>(null)
-
-  return <div ref={ref} style={{ height: '100vh', position: 'relative' }}>
-    <style>{`.stats{position:absolute !important}`}</style>
-    <StoryMap
-      latitude={51}
-      longitude={0}
-      zoom={13}
-      pitch={60}
-      canvas={{ 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} />
-    </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/src/stories/story-map.tsx

@@ -1,35 +0,0 @@
-import { useControls } from 'leva';
-import { FC, PropsWithChildren } from "react";
-import { StoryMapbox } from './mapbox/story-mapbox';
-import { StoryMaplibre } from './maplibre/story-maplibre';
-import { CanvasProps } from '../maplibre/canvas';
-
-export enum MapProvider {
-  maplibre = "maplibre",
-  mapbox = "mapbox",
-}
-
-export interface StoryMapProps extends PropsWithChildren {
-  latitude: number,
-  longitude: number,
-  zoom?: number,
-  pitch?: number,
-  canvas?: Partial<CanvasProps>,
-}
-
-/** `<Map>` styled for stories */
-export const StoryMap: FC<StoryMapProps> = (props) => {
-
-  const { mapProvider } = useControls({
-    mapProvider: {
-      value: MapProvider.maplibre,
-      options: MapProvider,
-      label: 'map provider'
-    },
-  });
-
-  return <div style={{ height: '100vh', position: 'relative' }}>
-    {mapProvider === MapProvider.maplibre && <StoryMaplibre {...props} />}
-    {mapProvider === MapProvider.mapbox && <StoryMapbox {...props} />}
-  </div>
-}

package/src/vite-env.d.ts

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

package/tsconfig.json

@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    "paths": {
-      "react-three-map": ["./src/mapbox/index.ts"],
-      "react-three-map/maplibre": ["./src/maplibre/index.ts"],
-    },
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

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