react-three-map 0.2.1 → 0.3.1

package/dist/es/main.js.mjs

@@ -1,5 +0,0 @@
-import { Canvas as r } from "./main.js2.mjs";
-export {
-  r as Canvas
-};
-//# sourceMappingURL=main.js.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"main.js.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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.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.js2.mjs

@@ -1,34 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { extend as p } from "@react-three/fiber";
-import { memo as f, useMemo as e } from "react";
-import * as i from "three";
-import { coordsToMatrix as x } from "./main.js3.mjs";
-import { InternalCanvas as c } from "./main.js4.mjs";
-import { m as L } from "./main.js5.mjs";
-p(i);
-const g = f(({
-  longitude: o,
-  latitude: r,
-  altitude: m = 0,
-  frameloop: t = "always",
-  ...a
-}) => {
-  const s = e(() => x({
-    latitude: r,
-    longitude: o,
-    altitude: m,
-    fromLngLat: L.MercatorCoordinate.fromLngLat
-  }), [r, o, m]);
-  return /* @__PURE__ */ n(
-    c,
-    {
-      frameloop: t,
-      m4: s,
-      ...a
-    }
-  );
-});
-export {
-  g as Canvas
-};
-//# sourceMappingURL=main.js2.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"main.js2.mjs","sources":["../../src/canvas/canvas-mapbox.tsx"],"sourcesContent":["import { RenderProps, extend } from \"@react-three/fiber\";\nimport { PropsWithChildren, memo, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { coordsToMatrix } from \"./core/coords-to-matrix\";\nimport { InternalCanvas } from \"./core/internal-canvas\";\nimport { MercatorCoordinate } from \"mapbox-gl\";\n\nextend(THREE);\n\nexport interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  longitude: number,\n  latitude: number,\n  altitude?: number,\n  frameloop?: 'always' | 'demand',\n}\n\n/** react`-three-fiber` canvas inside `Mapbox` */\nexport const Canvas = memo<CanvasProps>(({\n  longitude, latitude, altitude = 0,\n  frameloop = 'always', ...renderProps\n}) => {\n\n  const m4 = useMemo(() => coordsToMatrix({\n    latitude, longitude, altitude, fromLngLat: MercatorCoordinate.fromLngLat,\n  }), [latitude, longitude, altitude])\n\n  return <InternalCanvas\n    frameloop={frameloop}\n    m4={m4}\n    {...renderProps}\n  />\n})"],"names":["extend","THREE","Canvas","memo","longitude","latitude","altitude","frameloop","renderProps","m4","useMemo","coordsToMatrix","MercatorCoordinate","jsx","InternalCanvas"],"mappings":";;;;;;;AAOAA,EAAOC,CAAK;AAUC,MAAAC,IAASC,EAAkB,CAAC;AAAA,EACvC,WAAAC;AAAA,EAAW,UAAAC;AAAA,EAAU,UAAAC,IAAW;AAAA,EAChC,WAAAC,IAAY;AAAA,EAAU,GAAGC;AAC3B,MAAM;AAEE,QAAAC,IAAKC,EAAQ,MAAMC,EAAe;AAAA,IACtC,UAAAN;AAAA,IAAU,WAAAD;AAAA,IAAW,UAAAE;AAAA,IAAU,YAAYM,EAAmB,mBAAA;AAAA,EAC/D,CAAA,GAAG,CAACP,GAAUD,GAAWE,CAAQ,CAAC;AAE5B,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACN,WAAAP;AAAA,MACA,IAAAE;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EAAA;AAER,CAAC;"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"main.js3.mjs","sources":["../../src/canvas/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\nconst m4 = new Matrix4();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {\n  longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat\n}) {\n  const center = fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n  pos.set(center.x, center.y, center.z || 0);\n  scale.set(scaleUnit, -scaleUnit, scaleUnit);\n  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));\n  return m4.compose(pos, quat, scale).toArray();\n}\n"],"names":["quat","Quaternion","euler","Euler","pos","Vector3","scale","m4","Matrix4","coordsToMatrix","longitude","latitude","altitude","fromLngLat","center","scaleUnit"],"mappings":";AAGA,MAAMA,IAAO,IAAIC,KACXC,IAAQ,IAAIC,KACZC,IAAM,IAAIC,KACVC,IAAQ,IAAID,KACZE,IAAK,IAAIC;AAGR,SAASC,EAAe,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,YAAAC,KAE7D;AACD,QAAMC,IAASD,EAAW,CAACH,GAAWC,CAAQ,GAAGC,CAAQ,GACnDG,IAAYD,EAAO;AACzB,SAAAV,EAAI,IAAIU,EAAO,GAAGA,EAAO,GAAGA,EAAO,KAAK,CAAC,GACzCR,EAAM,IAAIS,GAAW,CAACA,GAAWA,CAAS,GACrCf,EAAA,aAAaE,EAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC,GACzCK,EAAG,QAAQH,GAAKJ,GAAMM,CAAK,EAAE;AACtC;"}

package/dist/es/main.js4.mjs

@@ -1,31 +0,0 @@
-import { jsx as o, Fragment as i } from "react/jsx-runtime";
-import { memo as c, useId as p, useRef as R, useEffect as v } from "react";
-import { Layer as y } from "react-map-gl";
-import { useOnAdd as I } from "./main.js8.mjs";
-import { useRender as g } from "./main.js9.mjs";
-const x = c(({
-  m4: m,
-  children: r,
-  frameloop: t,
-  ...s
-}) => {
-  const d = p(), e = R(), { onAdd: u, onRemove: a, mounted: n } = I(e, { frameloop: t, ...s }), f = g(m, e, t);
-  return v(() => {
-    n && e.current && e.current.root.render(/* @__PURE__ */ o(i, { children: r }));
-  }, [e, n, r]), /* @__PURE__ */ o(
-    y,
-    {
-      id: d,
-      type: "custom",
-      renderingMode: "3d",
-      onAdd: u,
-      onRemove: a,
-      render: f
-    }
-  );
-});
-x.displayName = "InternalCanvas";
-export {
-  x as InternalCanvas
-};
-//# sourceMappingURL=main.js4.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"main.js4.mjs","sources":["../../src/canvas/core/internal-canvas.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, memo, useEffect, useId, useRef } from \"react\";\nimport { Layer } from \"react-map-gl\";\nimport { Matrix4Tuple } from \"three\";\nimport { StateRef } from \"./state-ref\";\nimport { useOnAdd } from \"./use-on-add\";\nimport { useRender } from \"./use-render\";\n\nexport interface InternalCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  frameloop: 'always' | 'demand',\n  m4: Matrix4Tuple;\n}\n\nexport const InternalCanvas = memo<InternalCanvasProps>(({\n  m4, children, frameloop, ...renderProps\n}) => {\n  const id = useId();\n\n  const stateRef: StateRef = useRef();\n\n  const { onAdd, onRemove, mounted } = useOnAdd(stateRef, { frameloop, ...renderProps });\n\n  const render = useRender(m4, stateRef, frameloop);\n\n  useEffect(() => {\n    if (!mounted) return;\n    if (!stateRef.current) return;\n    stateRef.current.root.render(<>{children}</>);\n  }, [stateRef, mounted, children])\n\n  return <Layer\n    id={id}\n    type=\"custom\"\n    renderingMode=\"3d\"\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    onAdd={onAdd as any}\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    onRemove={onRemove as any}\n    render={render}\n  />\n})\n\nInternalCanvas.displayName = 'InternalCanvas';"],"names":["InternalCanvas","memo","m4","children","frameloop","renderProps","id","useId","stateRef","useRef","onAdd","onRemove","mounted","useOnAdd","render","useRender","useEffect","jsx","Fragment","Layer"],"mappings":";;;;;AAaa,MAAAA,IAAiBC,EAA0B,CAAC;AAAA,EACvD,IAAAC;AAAA,EAAI,UAAAC;AAAA,EAAU,WAAAC;AAAA,EAAW,GAAGC;AAC9B,MAAM;AACJ,QAAMC,IAAKC,KAELC,IAAqBC,KAErB,EAAE,OAAAC,GAAO,UAAAC,GAAU,SAAAC,MAAYC,EAASL,GAAU,EAAE,WAAAJ,GAAW,GAAGC,EAAA,CAAa,GAE/ES,IAASC,EAAUb,GAAIM,GAAUJ,CAAS;AAEhD,SAAAY,EAAU,MAAM;AACd,IAAKJ,KACAJ,EAAS,WACdA,EAAS,QAAQ,KAAK,OAAO,gBAAAS,EAAAC,GAAA,EAAG,UAAAf,EAAS,CAAA,CAAG;AAAA,EAC3C,GAAA,CAACK,GAAUI,GAAST,CAAQ,CAAC,GAEzB,gBAAAc;AAAA,IAACE;AAAA,IAAA;AAAA,MACN,IAAAb;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MAEd,OAAAI;AAAA,MAEA,UAAAC;AAAA,MACA,QAAAG;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;AAEDd,EAAe,cAAc;"}