react-three-map 0.3.2 → 0.3.4

package/src/core/coords-to-matrix.ts

@@ -1,20 +0,0 @@
-import { Euler, Matrix4, Quaternion, Vector3 } from "three";
-import { FromLngLat } from "./generic-map";
-
-const quat = new Quaternion();
-const euler = new Euler();
-const pos = new Vector3();
-const scale = new Vector3();
-const m4 = new Matrix4();
-
-/** calculate Matrix4 from coordinates */
-export function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {
-  longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat
-}) {
-  const center = fromLngLat([longitude, latitude], altitude);
-  const scaleUnit = center.meterInMercatorCoordinateUnits();
-  pos.set(center.x, center.y, center.z || 0);
-  scale.set(scaleUnit, -scaleUnit, scaleUnit);
-  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));
-  return m4.compose(pos, quat, scale).toArray();
-}

package/src/core/create-events.ts

@@ -1,73 +0,0 @@
-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 / window.devicePixelRatio;
-        state.size.height = state.gl.domElement.height / window.devicePixelRatio;
-        state.pointer.x = (event.offsetX / state.size.width) * 2 - 1;
-        state.pointer.y = 1 - (event.offsetY / state.size.height) * 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.parentNode } }));
-        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/core/generic-map.test.ts

@@ -1,2 +0,0 @@
-// add type tests to make sure our generic functions
-// can be satisfied by Mapbox and Maplibre

package/src/core/generic-map.ts

@@ -1,57 +0,0 @@
-// mock of functions used by `react-three-map` from `Maplibre` or `Mapbox`
-
-/** Generic interface of Mapbox/Maplibre `LayerProps` */
-export interface LayerProps {
-	id: string;
-	type: 'custom';
-	renderingMode: '3d';
-	onRemove?(map: MapInstance, gl: WebGLRenderingContext): void;
-	onAdd?(map: MapInstance, gl: WebGLRenderingContext): void;
-	prerender?(gl: WebGLRenderingContext, matrix: number[]): void;
-	render(gl: WebGLRenderingContext, matrix: number[]): void;
-}
-
-/** Generic interface of Mapbox/Maplibre `LngLatLike` */
-export type LngLatLike = {
-	lng: number;
-	lat: number;
-} | {
-	lon: number;
-	lat: number;
-} | [
-	number,
-	number
-];
-
-/** Generic interface of Mapbox/Maplibre `static MercatorCoordinate.fromLngLat` */
-export type FromLngLat = (lngLatLike: LngLatLike, altitude?: number) => MercatorCoordinate;
-
-/** Generic interface of Mapbox/Maplibre typeof `MercatorCoordinate` */
-export interface MercatorCoordinate {
-	x: number;
-	y: number;
-	z?: number;
-	meterInMercatorCoordinateUnits(): number;
-}
-
-/** Generic interface of Mapbox/Maplibre `Map` */
-export interface MapInstance {
-	getCanvas(): HTMLCanvasElement;
-	triggerRepaint(): void;
-	// eslint-disable-next-line @typescript-eslint/ban-types
-	on<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
-	// eslint-disable-next-line @typescript-eslint/ban-types
-	off<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
-}
-
-/** Generic interface of Mapbox/Maplibre `MapEventType` */
-export type MapEventType = {
-	resize: MapEvent;
-};
-
-/** Generic interface of `MapLibreEvent` or `MapBoxEvent` */
-export interface MapEvent<TOrig = unknown> {
-	type: string;
-	target: MapInstance;
-	originalEvent: TOrig;
-}

package/src/core/use-canvas.tsx

@@ -1,31 +0,0 @@
-import { RenderProps } from "@react-three/fiber";
-import { PropsWithChildren, useEffect, useId, useRef } from "react";
-import { Matrix4Tuple } from "three";
-import { StateRef } from "./state-ref";
-import { useOnAdd } from "./use-on-add";
-import { useRender } from "./use-render";
-
-export interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
-  frameloop: 'always' | 'demand',
-  m4: Matrix4Tuple;
-}
-
-export const useCanvas = (({
-  m4, children, frameloop, ...renderProps
-}: useCanvasProps) => {
-  const id = useId();
-
-  const stateRef: StateRef = useRef();
-
-  const { onAdd, onRemove, mounted } = useOnAdd(stateRef, { frameloop, ...renderProps });
-
-  const render = useRender(m4, stateRef, frameloop);
-
-  useEffect(() => {
-    if (!mounted) return;
-    if (!stateRef.current) return;
-    stateRef.current.root.render(<>{children}</>);
-  }, [stateRef, mounted, children])
-
-  return { id, onAdd, onRemove, render }
-})

package/src/core/use-function.ts

@@ -1,10 +0,0 @@
-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/core/use-on-add.ts

@@ -1,90 +0,0 @@
-import { RenderProps, createRoot } from "@react-three/fiber";
-import { useState } from "react";
-import { createEvents } from "./create-events";
-import { MapInstance } from "./generic-map";
-import { StateRef } from "./state-ref";
-import { useFunction } from "./use-function";
-
-export function useOnAdd(ref: StateRef, { frameloop, ...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({
-      dpr: window.devicePixelRatio,
-      events: createEvents(),
-      ...renderProps,
-      frameloop: 'never',
-      gl: {
-        context: gl,
-        depth: true,
-        autoClear: false,
-        antialias: true,
-        ...renderProps?.gl,
-      },
-      onCreated: (state) => {
-
-        if (frameloop === 'demand') {
-          state.set({
-            frameloop,
-            invalidate: () => {
-              map.triggerRepaint();
-            }
-          })
-        }
-
-        ref.current = {
-          state,
-          map,
-          root,
-        }
-
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        state.gl.forceContextLoss = () => { };
-
-        // we update the camera on create rather than on config
-        // because otherwise some components may use it too early
-        // and get NaN values they can't recover from (drei HTML)
-        state.camera.matrixAutoUpdate = false;
-      },
-      size: {
-        width: canvas.clientWidth,
-        height: canvas.clientHeight,
-        top: 0,
-        left: 0,
-        ...renderProps?.size,
-      },
-    });
-
-    ref.current = {
-      map,
-      root,
-    }
-
-    map.on('resize', onResize)
-
-    setTimeout(() => setMounted(true));
-
-  })
-
-  const onResize = useFunction(() => {
-    if (!ref.current?.state) return;
-    const state = ref.current.state;
-    const map = ref.current.map;
-    const canvas = map.getCanvas();
-    state.setSize(canvas.width, canvas.height);
-  })
-
-  const onRemove = useFunction((map: MapInstance) => {
-    setTimeout(() => {
-      if (!ref.current) return;
-      ref.current.root.unmount();
-      map.off('resize', onResize)
-    })
-  })
-
-  return { onAdd, onRemove, mounted };
-}

package/src/core/use-render.ts

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

package/src/mapbox/canvas.tsx

@@ -1,38 +0,0 @@
-import { RenderProps, extend } from "@react-three/fiber";
-import { MercatorCoordinate } from "mapbox-gl";
-import { PropsWithChildren, memo, useMemo } from "react";
-import { Layer } from "react-map-gl";
-import * as THREE from "three";
-import { coordsToMatrix } from "../core/coords-to-matrix";
-import { useCanvas } from "../core/use-canvas";
-
-extend(THREE);
-
-export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
-  longitude: number,
-  latitude: number,
-  altitude?: number,
-  frameloop?: 'always' | 'demand',
-}
-
-/** react`-three-fiber` canvas inside `MapLibre` */
-export const Canvas = memo<CanvasProps>(({
-  longitude, latitude, altitude = 0,
-  frameloop = 'always', ...renderProps
-}) => {
-
-  const m4 = useMemo(() => coordsToMatrix({
-    latitude, longitude, altitude, fromLngLat: MercatorCoordinate.fromLngLat,
-  }), [latitude, longitude, altitude]);
-
-  const { id, onAdd, onRemove, render } = useCanvas({ m4, frameloop, ...renderProps });
-
-  return <Layer
-    id={id}
-    type="custom"
-    renderingMode="3d"
-    onAdd={onAdd}
-    onRemove={onRemove}
-    render={render}
-  />
-})

package/src/mapbox/index.ts

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

package/src/maplibre/canvas.tsx

@@ -1,38 +0,0 @@
-import { RenderProps, extend } from "@react-three/fiber";
-import { MercatorCoordinate } from "maplibre-gl";
-import { PropsWithChildren, memo, useMemo } from "react";
-import { Layer } from "react-map-gl/maplibre";
-import * as THREE from "three";
-import { coordsToMatrix } from "../core/coords-to-matrix";
-import { useCanvas } from "../core/use-canvas";
-
-extend(THREE);
-
-export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
-  longitude: number,
-  latitude: number,
-  altitude?: number,
-  frameloop?: 'always' | 'demand',
-}
-
-/** react`-three-fiber` canvas inside `MapLibre` */
-export const Canvas = memo<CanvasProps>(({
-  longitude, latitude, altitude = 0,
-  frameloop = 'always', ...renderProps
-}) => {
-
-  const m4 = useMemo(() => coordsToMatrix({
-    latitude, longitude, altitude, fromLngLat: MercatorCoordinate.fromLngLat,
-  }), [latitude, longitude, altitude]);
-
-  const { id, onAdd, onRemove, render } = useCanvas({ m4, frameloop, ...renderProps });
-
-  return <Layer
-    id={id}
-    type="custom"
-    renderingMode="3d"
-    onAdd={onAdd}
-    onRemove={onRemove}
-    render={render}
-  />
-})

package/src/maplibre/index.ts

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

package/src/stories/comparison.stories.tsx

@@ -1,38 +0,0 @@
-import { MapControls } from "@react-three/drei";
-import { Canvas as FiberCanvas } from "@react-three/fiber";
-import { useControls } from "leva";
-import { MyScene } from "./my-scene";
-import { StoryMap } from "./story-map";
-
-export function WithMap() {
-  const showCamHelper = useShowCamHelper()
-  return <StoryMap
-    latitude={51.5073218}
-    longitude={-0.1276473}
-    zoom={18}
-    pitch={60}
-    canvas={{ shadows: 'variance' }}
-  >
-    <MyScene showCamHelper={showCamHelper} />
-  </StoryMap>
-}
-
-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/src/stories/html-on-top.stories.tsx

@@ -1,21 +0,0 @@
-import { Box, Html } from "@react-three/drei";
-import { useState } from "react";
-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} pitch={60}>
-    <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'}
-    />
-  </StoryMap>
-}

package/src/stories/mapbox/story-mapbox.tsx

@@ -1,58 +0,0 @@
-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';
-import { Canvas } from 'react-three-map';
-import { StoryMapProps } from '../story-map';
-
-/** `<Map>` styled for stories */
-export const StoryMapbox: FC<StoryMapProps> = ({
-  latitude, longitude, zoom = 18, pitch = 60, canvas, 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}
-    >
-      <Canvas latitude={latitude} longitude={longitude} {...canvas}>
-        {children}
-      </Canvas>
-    </Map>}
-  </div>
-}
-
-const Center = ({ children }: PropsWithChildren) => (
-  <div style={{
-    display: 'flex',
-    height: '100%',
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-  }}>{children}</div>
-)

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

@@ -1,84 +0,0 @@
-import { useFrame, Vector3 } from "@react-three/fiber";
-import { useControls } from "leva";
-import Mapbox from "mapbox-gl";
-import 'mapbox-gl/dist/mapbox-gl.css';
-import { FC, PropsWithChildren, useRef, useState } from "react";
-import Map from 'react-map-gl';
-import { Canvas } from "react-three-map";
-import { Mesh } from "three";
-
-export default { title: 'Canvas' }
-
-export function MapboxExample() {
-
-  const { mapboxToken } = useControls({
-    mapboxToken: {
-      value: import.meta.env.VITE_MAPBOX_TOKEN || '',
-      label: 'mapbox token',
-    }
-  })
-
-  Mapbox.accessToken = mapboxToken;
-
-  return <div style={{ height: '100vh' }}>
-    {!mapboxToken && <Center>Add a mapbox token to load this component</Center>}
-    {!!mapboxToken && <Map
-      antialias
-      initialViewState={{
-        latitude: 51,
-        longitude: 0,
-        zoom: 13,
-        pitch: 60,
-      }}
-      mapStyle="mapbox://styles/mapbox/streets-v12"
-    >
-      <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 Center = ({ children }: PropsWithChildren) => (
-  <div style={{
-    display: 'flex',
-    height: '100%',
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-  }}>{children}</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/maplibre/story-maplibre.tsx

@@ -1,32 +0,0 @@
-import { ThemeState, useLadleContext } from '@ladle/react';
-import MapLibre from "maplibre-gl";
-import 'maplibre-gl/dist/maplibre-gl.css';
-import { FC } from "react";
-import Map from 'react-map-gl/maplibre';
-import { StoryMapProps } from '../story-map';
-import { Canvas } from 'react-three-map/maplibre';
-
-/** Maplibre `<Map>` styled for stories */
-export const StoryMaplibre: FC<StoryMapProps> = ({
-  latitude, longitude, zoom, pitch, canvas, children
-}) => {
-
-  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', position: 'relative' }}>
-    <Map
-      mapLib={MapLibre}
-      antialias
-      initialViewState={{ latitude, longitude, zoom, pitch, }}
-      mapStyle={mapStyle}
-    >
-      <Canvas latitude={latitude} longitude={longitude} {...canvas}>
-        {children}
-      </Canvas>
-      </Map>
-  </div>
-}