react-three-map 0.3.2 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # react-three-map
 
+## 0.3.3
+
+### Patch Changes
+
+- 7e94458: Generate types declarations.
+
 ## 0.3.2
 
 ### Patch Changes

package/dist/maplibre/types/core/coords-to-matrix.d.ts

@@ -0,0 +1,8 @@
+import { FromLngLat } from "./generic-map";
+/** calculate Matrix4 from coordinates */
+export declare function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {
+    longitude: number;
+    latitude: number;
+    altitude: number;
+    fromLngLat: FromLngLat;
+}): import("three").Matrix4Tuple;

package/dist/maplibre/types/core/create-events.d.ts

@@ -0,0 +1,3 @@
+import { RenderProps } from "@react-three/fiber";
+/** ThreeLayer event manager for MapLibre and Mapbox */
+export declare function createEvents(): RenderProps<HTMLCanvasElement>["events"];

package/dist/maplibre/types/core/generic-map.d.ts

@@ -0,0 +1,47 @@
+/** 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;
+    on<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
+    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/state-ref.ts → dist/maplibre/types/core/state-ref.d.ts}

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

package/dist/maplibre/types/core/use-canvas.d.ts

@@ -0,0 +1,13 @@
+import { RenderProps } from "@react-three/fiber";
+import { PropsWithChildren } from "react";
+import { Matrix4Tuple } from "three";
+export interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
+    frameloop: 'always' | 'demand';
+    m4: Matrix4Tuple;
+}
+export declare const useCanvas: ({ m4, children, frameloop, ...renderProps }: useCanvasProps) => {
+    id: string;
+    onAdd: (map: import("./generic-map").MapInstance, gl: WebGLRenderingContext) => void;
+    onRemove: (map: import("./generic-map").MapInstance) => void;
+    render: (_gl: WebGL2RenderingContext, matrix: number[]) => void;
+};

package/dist/maplibre/types/core/use-function.d.ts

@@ -0,0 +1 @@
+export declare const useFunction: <T extends (...args: any[]) => any>(callback: T) => T;

package/dist/maplibre/types/core/use-on-add.d.ts

@@ -0,0 +1,8 @@
+import { RenderProps } from "@react-three/fiber";
+import { MapInstance } from "./generic-map";
+import { StateRef } from "./state-ref";
+export declare function useOnAdd(ref: StateRef, { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>): {
+    onAdd: (map: MapInstance, gl: WebGLRenderingContext) => void;
+    onRemove: (map: MapInstance) => void;
+    mounted: boolean;
+};

package/dist/maplibre/types/core/use-render.d.ts

@@ -0,0 +1,3 @@
+import { Matrix4Tuple } from "three";
+import { StateRef } from "./state-ref";
+export declare function useRender(m4: Matrix4Tuple, stateRef: StateRef, frameloop: 'always' | 'demand'): (_gl: WebGL2RenderingContext, matrix: number[]) => void;

package/dist/maplibre/types/maplibre/canvas.d.ts

@@ -0,0 +1,10 @@
+import { RenderProps } from "@react-three/fiber";
+import { PropsWithChildren } from "react";
+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 declare const Canvas: import("react").NamedExoticComponent<CanvasProps>;

package/dist/maplibre/types/maplibre.index.d.ts

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

package/dist/types/core/coords-to-matrix.d.ts

@@ -0,0 +1,8 @@
+import { FromLngLat } from "./generic-map";
+/** calculate Matrix4 from coordinates */
+export declare function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {
+    longitude: number;
+    latitude: number;
+    altitude: number;
+    fromLngLat: FromLngLat;
+}): import("three").Matrix4Tuple;

package/dist/types/core/create-events.d.ts

@@ -0,0 +1,3 @@
+import { RenderProps } from "@react-three/fiber";
+/** ThreeLayer event manager for MapLibre and Mapbox */
+export declare function createEvents(): RenderProps<HTMLCanvasElement>["events"];

package/dist/types/core/generic-map.d.ts

@@ -0,0 +1,47 @@
+/** 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;
+    on<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
+    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/dist/types/core/state-ref.d.ts

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

package/dist/types/core/use-canvas.d.ts

@@ -0,0 +1,13 @@
+import { RenderProps } from "@react-three/fiber";
+import { PropsWithChildren } from "react";
+import { Matrix4Tuple } from "three";
+export interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
+    frameloop: 'always' | 'demand';
+    m4: Matrix4Tuple;
+}
+export declare const useCanvas: ({ m4, children, frameloop, ...renderProps }: useCanvasProps) => {
+    id: string;
+    onAdd: (map: import("./generic-map").MapInstance, gl: WebGLRenderingContext) => void;
+    onRemove: (map: import("./generic-map").MapInstance) => void;
+    render: (_gl: WebGL2RenderingContext, matrix: number[]) => void;
+};

package/dist/types/core/use-function.d.ts

@@ -0,0 +1 @@
+export declare const useFunction: <T extends (...args: any[]) => any>(callback: T) => T;

package/dist/types/core/use-on-add.d.ts

@@ -0,0 +1,8 @@
+import { RenderProps } from "@react-three/fiber";
+import { MapInstance } from "./generic-map";
+import { StateRef } from "./state-ref";
+export declare function useOnAdd(ref: StateRef, { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>): {
+    onAdd: (map: MapInstance, gl: WebGLRenderingContext) => void;
+    onRemove: (map: MapInstance) => void;
+    mounted: boolean;
+};

package/dist/types/core/use-render.d.ts

@@ -0,0 +1,3 @@
+import { Matrix4Tuple } from "three";
+import { StateRef } from "./state-ref";
+export declare function useRender(m4: Matrix4Tuple, stateRef: StateRef, frameloop: 'always' | 'demand'): (_gl: WebGL2RenderingContext, matrix: number[]) => void;

package/dist/types/mapbox/canvas.d.ts

@@ -0,0 +1,10 @@
+import { RenderProps } from "@react-three/fiber";
+import { PropsWithChildren } from "react";
+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 declare const Canvas: import("react").NamedExoticComponent<CanvasProps>;

package/dist/types/mapbox.index.d.ts

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

package/maplibre/package.json

@@ -2,6 +2,6 @@
   "internal": true,
   "main": "../dist/maplibre/cjs/main.js",
   "module": "../dist/maplibre/es/main.mjs",
-  "types": "../src/maplibre/index.ts",
+  "types": "../dist/maplibre/types/maplibre.index.d.ts",
   "sideEffects": false
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "react-three-map",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Use react-three-fiber inside MapLibre and Mapbox",
   "main": "dist/cjs/main.js",
   "module": "dist/es/main.mjs",
-  "types": "src/mapbox/index.ts",
+  "types": "dist/types/maplibre.index.d.ts",
   "sideEffects": false,
   "repository": "https://github.com/RodrigoHamuy/react-three-map",
   "homepage": "https://github.com/RodrigoHamuy/react-three-map",
@@ -14,7 +14,7 @@
   "license": "MIT",
   "author": "RodrigoHamuy",
   "scripts": {
-    "prebuild": "tsc",
+    "prebuild": "tsc --project tsconfig.mapbox.json && tsc --project tsconfig.maplibre.json",
     "build": "yarn build:maplibre && yarn build:mapbox",
     "build:maplibre": "cross-env LIB_MODE=1 MAP_MODE=0 vite build",
     "postbuild:maplibre": "cross-env LIB_MODE=2 MAP_MODE=0 vite build",
@@ -24,6 +24,7 @@
     "lint": "eslint src example-maplibre/src example-mapbox/src --ext ts,tsx --fix",
     "preview": "vite preview",
     "ts": "tsc -w",
+    "ts:check": "tsc",
     "stories": "yarn ladle serve",
     "build:stories": "yarn ladle build"
   },

package/example-mapbox/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "example-mapbox",
-  "version": "0.0.0",
-  "license": "MIT",
-  "scripts": {
-    "dev": "yarn ladle serve",
-    "ts": "tsc -w"
-  },
-  "dependencies": {
-    "@ladle/react": "^2.15.0",
-    "@react-three/drei": "^9.77.10",
-    "@react-three/fiber": "^8.13.4",
-    "leva": "^0.9.35",
-    "mapbox-gl": "^2.15.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-map-gl": "^7.1.0",
-    "react-three-map": "^0.2.1",
-    "three": "~0.153.0",
-    "three-stdlib": "^2.23.10"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@types/three": "^0.152.1",
-    "typescript": "^5.1.6",
-    "vite": "^4.3.9"
-  }
-}

package/example-mapbox/sandbox.config.json

@@ -1,3 +0,0 @@
-{
-  "port": 61000
-}

package/example-mapbox/src/canvas.basic.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' }
-
-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>
-  )
-}
-
-export function BasicExample() {
-
-  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>
-)

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

@@ -1,37 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,89 +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]}
-        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

@@ -1,32 +0,0 @@
-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>
-}