react-three-map 0.2.0 → 0.3.0

package/src/stories/story-map.tsx

@@ -1,40 +1,42 @@
-import 'maplibre-gl/dist/maplibre-gl.css';
-import { FC, PropsWithChildren } from "react"
-import MapLibre from "maplibre-gl";
-import Map from 'react-map-gl';
-import { useLadleContext, ThemeState } from '@ladle/react';
+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,
+  latitude: number,
+  longitude: number,
   zoom?: number,
   pitch?: number,
+  canvas?: Partial<CanvasProps>,
 }
 
 /** `<Map>` styled for stories */
 export const StoryMap: FC<StoryMapProps> = ({
-  children
+  latitude, longitude, zoom = 13, pitch = 60, children
 }) => {
 
-  const theme = useLadleContext().globalState.theme;
+  const { mapProvider } = useControls({
+    mapProvider: {
+      value: MapProvider.maplibre,
+      options: MapProvider,
+    },
+  });
 
-  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";
+  const props : StoryMapProps = { latitude, longitude, zoom, pitch, children};
 
   return <div style={{ height: '100vh', position: 'relative' }}>
-    <Map
-      mapLib={MapLibre}
-      antialias
-      initialViewState={{
-        latitude: 51,
-        longitude: 0,
-        zoom: 13,
-        pitch: 60,
-      }}
-      mapStyle={mapStyle}
-    >
+    {mapProvider === MapProvider.maplibre && <StoryMaplibre {...props}>
+      {children}
+    </StoryMaplibre>}
+    {mapProvider === MapProvider.mapbox && <StoryMapbox {...props}>
       {children}
-      </Map>
+    </StoryMapbox>}
   </div>
 }

package/tsconfig.json

@@ -14,6 +14,11 @@
     "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,

package/dist/es/main.js10.mjs

@@ -1,56 +0,0 @@
-import { createEvents as p } from "@react-three/fiber";
-const c = {
-  onClick: ["click", !1],
-  onContextMenu: ["contextmenu", !1],
-  onDoubleClick: ["dblclick", !1],
-  onWheel: ["wheel", !0],
-  onPointerDown: ["pointerdown", !0],
-  onPointerUp: ["pointerup", !0],
-  onPointerLeave: ["pointerleave", !0],
-  onPointerMove: ["pointermove", !0],
-  onPointerCancel: ["pointercancel", !0],
-  onLostPointerCapture: ["lostpointercapture", !0]
-};
-function u() {
-  return (o) => {
-    const { handlePointer: a } = p(o);
-    return {
-      priority: 1,
-      enabled: !0,
-      compute(n, e) {
-        e.size.width = e.gl.domElement.width, e.size.height = e.gl.domElement.height, e.pointer.x = n.offsetX / (e.size.width / window.devicePixelRatio) * 2 - 1, e.pointer.y = 1 - n.offsetY / (e.size.height / window.devicePixelRatio) * 2, e.raycaster.camera = e.camera, e.raycaster.ray.origin.setScalar(0).applyMatrix4(e.camera.projectionMatrixInverse), e.raycaster.ray.direction.set(e.pointer.x, e.pointer.y, 1).applyMatrix4(e.camera.projectionMatrixInverse).sub(e.raycaster.ray.origin).normalize();
-      },
-      connected: void 0,
-      handlers: Object.keys(c).reduce(
-        (n, e) => ({ ...n, [e]: a(e) }),
-        {}
-      ),
-      update: () => {
-        var t;
-        const { events: n, internal: e } = o.getState();
-        (t = e.lastEvent) != null && t.current && n.handlers && n.handlers.onPointerMove(e.lastEvent.current);
-      },
-      connect: (n) => {
-        var i;
-        const { set: e, events: t } = o.getState();
-        (i = t.disconnect) == null || i.call(t), e((r) => ({ events: { ...r.events, connected: n.parentNode } })), Object.entries(t.handlers ?? []).forEach(([r, l]) => {
-          const [s, d] = c[r];
-          n.addEventListener(s, l, { passive: d });
-        });
-      },
-      disconnect: () => {
-        const { set: n, events: e } = o.getState();
-        e.connected && (Object.entries(e.handlers ?? []).forEach(([t, i]) => {
-          if (e && e.connected instanceof HTMLElement) {
-            const [r] = c[t];
-            e.connected.removeEventListener(r, i);
-          }
-        }), n((t) => ({ events: { ...t.events, connected: void 0 } })));
-      }
-    };
-  };
-}
-export {
-  u as createEvents
-};
-//# sourceMappingURL=main.js10.mjs.map

package/dist/es/main.js10.mjs.map

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

package/dist/es/main.js11.mjs

@@ -1,9 +0,0 @@
-import { useRef as n, useCallback as u } from "react";
-const o = (r) => {
-  const e = n(r);
-  return e.current = r, u((...t) => e.current(...t), []);
-};
-export {
-  o as useFunction
-};
-//# sourceMappingURL=main.js11.mjs.map

package/dist/es/main.js11.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.js11.mjs","sources":["../../src/canvas/core/use-function.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const useFunction = <T extends (...args: any[]) => any>(callback: T): T => {\n  const callbackRef = useRef(callback);\n  callbackRef.current = callback;\n  return useCallback((...args: any[]) => {\n    return callbackRef.current(...args);\n  }, []) as T;\n};\n"],"names":["useFunction","callback","callbackRef","useRef","useCallback","args"],"mappings":";AAGa,MAAAA,IAAc,CAAoCC,MAAmB;AAC1E,QAAAC,IAAcC,EAAOF,CAAQ;AACnC,SAAAC,EAAY,UAAUD,GACfG,EAAY,IAAIC,MACdH,EAAY,QAAQ,GAAGG,CAAI,GACjC,CAAE,CAAA;AACP;"}

package/dist/es/main.js9.mjs

@@ -1,16 +0,0 @@
-import { Matrix4 as u } from "three";
-import { useFunction as m } from "./main.js11.mjs";
-const p = new u();
-function g(n, r, o) {
-  return m((l, a) => {
-    var e;
-    if (!((e = r.current) != null && e.state))
-      return;
-    const t = r.current.state.camera, c = r.current.state.gl, i = r.current.state.advance;
-    t.projectionMatrix.fromArray(a).multiply(p.fromArray(n)), t.projectionMatrixInverse.copy(t.projectionMatrix).invert(), c.resetState(), i(Date.now() * 1e-3, !0), o === "always" && r.current.map.triggerRepaint();
-  });
-}
-export {
-  g as useRender
-};
-//# sourceMappingURL=main.js9.mjs.map

package/dist/es/main.js9.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.js9.mjs","sources":["../../src/canvas/core/use-render.ts"],"sourcesContent":["import { Matrix4, Matrix4Tuple } from \"three\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\n\nconst mx = new Matrix4();\n\nexport function useRender(\n  m4: Matrix4Tuple, stateRef: StateRef, frameloop: 'always' | 'demand'\n) {\n\n  const render = useFunction((_gl: WebGL2RenderingContext, matrix: number[]) => {\n    if (!stateRef.current?.state) return;\n    const camera = stateRef.current.state.camera;\n    const gl = stateRef.current.state.gl;\n    const advance = stateRef.current.state.advance;\n    camera.projectionMatrix.fromArray(matrix).multiply(mx.fromArray(m4));\n    camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    if (frameloop === 'always') stateRef.current.map.triggerRepaint();\n  })\n\n  return render;\n\n}"],"names":["mx","Matrix4","useRender","m4","stateRef","frameloop","useFunction","_gl","matrix","_a","camera","gl","advance"],"mappings":";;AAIA,MAAMA,IAAK,IAAIC;AAEC,SAAAC,EACdC,GAAkBC,GAAoBC,GACtC;AAcO,SAZQC,EAAY,CAACC,GAA6BC,MAAqB;;AACxE,QAAA,GAACC,IAAAL,EAAS,YAAT,QAAAK,EAAkB;AAAO;AACxB,UAAAC,IAASN,EAAS,QAAQ,MAAM,QAChCO,IAAKP,EAAS,QAAQ,MAAM,IAC5BQ,IAAUR,EAAS,QAAQ,MAAM;AAChC,IAAAM,EAAA,iBAAiB,UAAUF,CAAM,EAAE,SAASR,EAAG,UAAUG,CAAE,CAAC,GACnEO,EAAO,wBAAwB,KAAKA,EAAO,gBAAgB,EAAE,UAC7DC,EAAG,WAAW,GACdC,EAAQ,KAAK,IAAQ,IAAA,MAAO,EAAI,GAC5BP,MAAc,YAAmBD,EAAA,QAAQ,IAAI;EAAe,CACjE;AAIH;"}

package/src/main-mapbox.ts

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

package/src/main-maplibre.ts

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