react-three-map 0.0.0 → 0.0.2

package/src/canvas/create-events.ts

@@ -0,0 +1,73 @@
+import { Events, RenderProps, RootState, createEvents as createFiberEvents } from "@react-three/fiber";
+import { UseBoundStore } from "zustand";
+
+type DomEvent = PointerEvent | MouseEvent | WheelEvent;
+
+const DOM_EVENTS = {
+  onClick: ["click", false],
+  onContextMenu: ["contextmenu", false],
+  onDoubleClick: ["dblclick", false],
+  onWheel: ["wheel", true],
+  onPointerDown: ["pointerdown", true],
+  onPointerUp: ["pointerup", true],
+  onPointerLeave: ["pointerleave", true],
+  onPointerMove: ["pointermove", true],
+  onPointerCancel: ["pointercancel", true],
+  onLostPointerCapture: ["lostpointercapture", true],
+} as const;
+
+/** ThreeLayer event manager for MapLibre and Mapbox */
+export function createEvents() : RenderProps<HTMLCanvasElement>["events"] {
+  return (store: UseBoundStore<RootState>) => {
+    const { handlePointer } = createFiberEvents(store);
+    return {
+      priority: 1,
+      enabled: true,
+      compute(event: DomEvent, state: RootState) {
+        state.size.width = state.gl.domElement.width;
+        state.size.height = state.gl.domElement.height;
+        state.pointer.x = (event.offsetX / (state.size.width / window.devicePixelRatio)) * 2 - 1;
+        state.pointer.y = 1 - (event.offsetY / (state.size.height / window.devicePixelRatio)) * 2;
+        state.raycaster.camera = state.camera;
+        state.raycaster.ray.origin.setScalar(0).applyMatrix4(state.camera.projectionMatrixInverse);
+        state.raycaster.ray.direction
+          .set(state.pointer.x, state.pointer.y, 1)
+          .applyMatrix4(state.camera.projectionMatrixInverse)
+          .sub(state.raycaster.ray.origin)
+          .normalize();
+      },
+      connected: undefined,
+      handlers: Object.keys(DOM_EVENTS).reduce(
+        (acc, key) => ({ ...acc, [key]: handlePointer(key) }),
+        {}
+      ) as unknown as Events,
+      update: () => {
+        const { events, internal } = store.getState();
+        if (internal.lastEvent?.current && events.handlers) {
+          events.handlers.onPointerMove(internal.lastEvent.current);
+        }
+      },
+      connect: (target: HTMLElement) => {
+        const { set, events } = store.getState();
+        events.disconnect?.();
+        set((state) => ({ events: { ...state.events, connected: target } }));
+        Object.entries(events.handlers ?? []).forEach(([name, event]) => {
+          const [eventName, passive] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];
+          target.addEventListener(eventName, event, { passive });
+        });
+      },
+      disconnect: () => {
+        const { set, events } = store.getState();
+        if (events.connected) {
+          Object.entries(events.handlers ?? []).forEach(([name, event]) => {
+            if (events && events.connected instanceof HTMLElement) {
+              const [eventName] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];
+              events.connected.removeEventListener(eventName, event);
+            }
+          });
+          set((state) => ({ events: { ...state.events, connected: undefined } }));
+        }
+      },
+    };
+  };
+}

package/src/canvas/state-ref.ts

@@ -0,0 +1,9 @@
+import { ReconcilerRoot, RootState } from "@react-three/fiber";
+import { MutableRefObject } from "react";
+import { MapInstance } from "react-map-gl";
+
+export type StateRef = MutableRefObject<{
+  map: MapInstance;
+  root: ReconcilerRoot<HTMLCanvasElement>;
+  state?: RootState;
+} | undefined>

package/src/canvas/use-function.ts

@@ -0,0 +1,10 @@
+import { useCallback, useRef } from 'react';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const useFunction = <T extends (...args: any[]) => any>(callback: T): T => {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  return useCallback((...args: any[]) => {
+    return callbackRef.current(...args);
+  }, []) as T;
+};

package/src/canvas/use-on-add.ts

@@ -0,0 +1,67 @@
+import { RenderProps, createRoot } from "@react-three/fiber";
+import { MapInstance } from "react-map-gl";
+import { createEvents } from "./create-events";
+import { StateRef } from "./state-ref";
+import { useFunction } from "./use-function";
+import { useState } from "react";
+
+export function useOnAdd (ref: StateRef, renderProps: RenderProps<HTMLCanvasElement>) {
+
+  const [mounted, setMounted] = useState(false);
+
+  const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext)=>{
+   
+    const canvas = map.getCanvas();
+    const root = createRoot(canvas);
+    root.configure({
+      frameloop: "never",
+      dpr: window.devicePixelRatio,
+      shadows: true,
+      events: createEvents(),
+      ...renderProps,
+      gl: {
+        context: gl,
+        depth: true,
+        autoClear: false,
+        antialias: true,
+        ...renderProps?.gl,
+      },
+      onCreated: (state) => {
+        ref.current = {
+          state,
+          map,
+          root,
+        }
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        state.gl.forceContextLoss = () => { };
+      },
+      camera: {
+        matrixAutoUpdate: false,
+      },
+      size: {
+        width: canvas.clientWidth,
+        height: canvas.clientHeight,
+        top: 0,
+        left: 0,
+        ...renderProps?.size,
+      },
+    });
+
+    ref.current = {
+      map,
+      root,
+    }
+
+    setTimeout(()=>setMounted(true));
+    
+  })
+
+  const onRemove = useFunction(()=>{
+    setTimeout(()=>{
+      if(!ref.current) return;
+      ref.current.root.unmount();
+    })
+  })
+
+  return {onAdd, onRemove, mounted};
+}

package/src/canvas/use-render.ts

@@ -0,0 +1,27 @@
+import { Matrix4 } from "three";
+import { StateRef } from "./state-ref";
+import { useFunction } from "./use-function";
+import { useMap } from "react-map-gl/maplibre";
+
+export function useRender(
+  m4: Matrix4, ref: StateRef
+  ) {
+
+  const map = useMap()
+
+  const render = useFunction((_gl: WebGL2RenderingContext, matrix: number[])=>{
+    if(!map.current) return;
+    if(!ref.current?.state) return;
+    const camera = ref.current.state.camera;
+    const gl = ref.current.state.gl;
+    const advance = ref.current.state.advance;
+    camera.projectionMatrix.fromArray(matrix).multiply(m4);
+    camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
+    gl.resetState();
+    advance(Date.now() * 0.001, true);
+    map.current.triggerRepaint();
+  })
+
+  return render;
+
+}

package/src/main.ts

@@ -0,0 +1 @@
+export * from './canvas/canvas';

package/src/stories/canvas.stories.tsx

@@ -0,0 +1,28 @@
+import { ThemeState, useLadleContext } from "@ladle/react";
+import 'maplibre-gl/dist/maplibre-gl.css';
+import Map from 'react-map-gl/maplibre';
+import { Canvas } from "../canvas/canvas";
+import { MyScene } from "./my-scene";
+
+export function BasicSetup() {
+  const theme = useLadleContext().globalState.theme;
+  const mapStyle = theme === ThemeState.Dark 
+  ? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+  : "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+  return <div style={{ height: '100vh' }}>
+    <Map
+      antialias
+      initialViewState={{
+        latitude: 51.5073218,
+        longitude: -0.1276473,
+        zoom: 22
+      }}
+      mapStyle={mapStyle}
+    >
+      <Canvas latitude={51.5073218} longitude={-0.1276473}>
+        <MyScene />
+      </Canvas>
+    </Map>
+  </div>
+}
+

package/src/stories/my-scene.tsx

@@ -0,0 +1,83 @@
+import { Box, Plane, useHelper } from "@react-three/drei";
+import { MeshProps, useFrame } from '@react-three/fiber';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { useRef, useState } from 'react';
+import { CameraHelper, MathUtils, Mesh, OrthographicCamera } from "three";
+
+export function MyScene() {
+  return <>
+    <Lights />
+    <Floor />
+    <MyBox position={[-1.2, 1.5, 0]} />
+    <MyBox position={[1.2, 1.5, 0]} />
+    <MyBox position={[1.2, 1.5, 2.4]} />
+  </>
+}
+
+
+function MyBox(props: MeshProps) {
+  const [hovered, hover] = useState(false);
+  const [clicked, click] = useState(false);
+  const mesh = useRef<Mesh>(null)
+
+  useFrame((_st, dt)=>{
+    if(!mesh.current) return;
+    mesh.current.rotateY(dt);
+  })
+
+  return (
+    <Box
+      {...props}
+      ref={mesh}
+      args={[1, 1, 1]}
+      receiveShadow
+      castShadow
+      scale={props.scale || clicked ? props.scale || 1.5 : 1}
+      onClick={() => click(!clicked)}
+      onPointerOver={() => hover(true)}
+      onPointerOut={() => hover(false)}
+    >
+      <meshStandardMaterial
+        color={hovered ? "red" : "orange"}
+        metalness={.75}
+        roughness={.5}
+      />
+    </Box>
+  );
+}
+function Lights() {
+  const cam = useRef<OrthographicCamera>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  useHelper(cam as any, CameraHelper)
+  const camSize = 5;
+  return <>
+    <ambientLight intensity={0.5} />
+    <directionalLight 
+      castShadow
+      position={[2.5, 50, 5]}
+      intensity={1.5}
+      shadow-mapSize={1024}
+      shadow-bias={-0.005}
+    >
+      <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={[50, 50]}
+    position={[0, 0, 0]}
+    rotation={[-90 * MathUtils.DEG2RAD, 0, 0]}
+    receiveShadow
+  >
+    <shadowMaterial opacity={.5} />
+  </Plane>
+}

package/src/stories/no-map.stories.tsx

@@ -0,0 +1,12 @@
+import { MapControls } from "@react-three/drei"
+import { Canvas } from "@react-three/fiber"
+import { MyScene } from "./my-scene"
+
+export const NoMap = () => {
+  return <div style={{ height: '100vh' }}>
+    <Canvas camera={{position: [0,10,0]}} shadows="basic">
+      <MyScene />    
+      <MapControls makeDefault />
+    </Canvas>
+  </div>
+}

package/src/vite-env.d.ts

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

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "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",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

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