npm - @treasuryspatial/map-react - Versions diffs - 0.1.7 → 0.1.9 - Mend

@treasuryspatial/map-react 0.1.7 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/MapModeViewport.d.ts +1 -1
package/dist/MapModeViewport.d.ts.map +1 -1
package/dist/MapModeViewport.js +88 -9
package/package.json +2 -2

package/dist/MapModeViewport.d.ts CHANGED Viewed

@@ -14,7 +14,7 @@ export type MapModeViewportHandle = {
     animateToView: (_viewKey: string) => void;
     capturePngDataUrl: () => string;
 };
-export type ApplyLightingPreset = (scene: THREE.Scene, presetKey: string) => void;
+export type ApplyLightingPreset = (scene: THREE.Scene, renderer: THREE.WebGLRenderer, presetKey: string) => void;
 export type ResolveMeshGroup = (geometry3dm: string) => Promise<THREE.Group | null>;
 export type MapModeViewportProps = {
     active: boolean;

package/dist/MapModeViewport.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MapModeViewport.d.ts","sourceRoot":"","sources":["../src/MapModeViewport.tsx"],"names":[],"mappings":"AAEA,OAAO,~~KAAgF~~,MAAM,OAAO,CAAC;~~AAErG~~,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EASL,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,qBAAqB,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1B,WAAW,EAAE,MAAM,EAAE,EAAE,CAAC;IACxB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iBAAiB,EAAE,MAAM,MAAM,CAAC;CACjC,CAAC;AAIF,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;~~AAClF~~,MAAM,MAAM,gBAAgB,GAAG,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;AAEpF,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC,aAAa,EAAE,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;IACpC,iBAAiB,EAAE,CAAC,SAAS,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAMF,eAAO,MAAM,eAAe,~~oGA8W1B~~,CAAC"}
1	+ {"version":3,"file":"MapModeViewport.d.ts","sourceRoot":"","sources":["../src/MapModeViewport.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAElH,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EASL,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,qBAAqB,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1B,WAAW,EAAE,MAAM,EAAE,EAAE,CAAC;IACxB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iBAAiB,EAAE,MAAM,MAAM,CAAC;CACjC,CAAC;AAIF,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;AACjH,MAAM,MAAM,gBAAgB,GAAG,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;AAEpF,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC,aAAa,EAAE,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;IACpC,iBAAiB,EAAE,CAAC,SAAS,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAMF,eAAO,MAAM,eAAe,oGAma1B,CAAC"}

package/dist/MapModeViewport.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import * as THREE from 'three';
 import { buildGeoJsonPolygon, computeCentroid, computeFootprintStats, createMapThreeLayer, ensureFootprintLayers, getOuterRing, toLocalMeters, toPolygonFeature, } from '@treasuryspatial/map-kit';
@@ -25,6 +25,17 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
     const reverseGeocodeRequestRef = useRef(0);
     const [mapReady, setMapReady] = useState(false);
     const [mapError, setMapError] = useState('');
+    const debug = useMemo(() => {
+        if (typeof window === 'undefined')
+            return false;
+        const params = new URLSearchParams(window.location.search);
+        return params.has('mapDebug') || process.env.NODE_ENV !== 'production';
+    }, []);
+    const log = useCallback((...args) => {
+        if (!debug)
+            return;
+        console.info('[map-react]', ...args);
+    }, [debug]);
     useEffect(() => {
         lightingPresetRef.current = lightingPreset;
     }, [lightingPreset]);
@@ -44,8 +55,8 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
     useImperativeHandle(ref, () => ({
         setLightingPreset: (presetKey) => {
             lightingPresetRef.current = presetKey;
-            if (sceneRef.current) {
-                (applyLightingPreset ?? defaultApplyLightingPreset)(sceneRef.current, presetKey);
+            if (sceneRef.current && rendererRef.current) {
+                (applyLightingPreset ?? defaultApplyLightingPreset)(sceneRef.current, rendererRef.current, presetKey);
             }
         },
         animateToView: () => { },
@@ -71,6 +82,8 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
             return;
         }
         let cancelled = false;
+        let cleanupCanvasEvents = null;
+        let cleanupMapEvents = null;
         const boot = async () => {
             try {
                 const module = await import('mapbox-gl');
@@ -95,6 +108,13 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
                     preserveDrawingBuffer: true,
                     attributionControl: false,
                 });
+                log('map init', {
+                    style: mapStyle,
+                    center: [startCenter.lng, startCenter.lat],
+                    zoom: startZoom,
+                    bearing: startBearing,
+                    pitch: startPitch,
+                });
                 map.addControl(new mapboxgl.NavigationControl({ visualizePitch: true }), 'bottom-right');
                 const geocoder = new MapboxGeocoder({
                     accessToken,
@@ -106,6 +126,30 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
                 });
                 map.addControl(geocoder, 'top-left');
                 mapRef.current = map;
+                const onMapError = (event) => {
+                    const err = event?.error ?? event;
+                    console.error('[map-react] Mapbox error', err);
+                };
+                map.on('error', onMapError);
+                cleanupMapEvents = () => {
+                    map.off('error', onMapError);
+                };
+                const canvas = map.getCanvas();
+                const onContextLost = (event) => {
+                    event.preventDefault();
+                    console.error('[map-react] WebGL context lost');
+                    setMapError('WebGL context lost.');
+                };
+                const onContextRestored = () => {
+                    console.info('[map-react] WebGL context restored');
+                    setMapError('');
+                };
+                canvas.addEventListener('webglcontextlost', onContextLost, { passive: false });
+                canvas.addEventListener('webglcontextrestored', onContextRestored);
+                cleanupCanvasEvents = () => {
+                    canvas.removeEventListener('webglcontextlost', onContextLost);
+                    canvas.removeEventListener('webglcontextrestored', onContextRestored);
+                };
                 map.on('style.load', () => {
                     if (!map.isStyleLoaded())
                         return;
@@ -153,6 +197,8 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
             threeLayerRef.current = null;
             setMapReady(false);
             handlersBoundRef.current = false;
+            cleanupCanvasEvents?.();
+            cleanupMapEvents?.();
         };
     }, [active, accessToken, mapStyle, mapVisibility]);
     useEffect(() => {
@@ -223,12 +269,13 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
             threeLayerRef.current = createMapThreeLayer({
                 id: 'courtyard-mesh',
                 zOffsetMeters: 0.05,
+                debug,
                 onInit: (scene, renderer) => {
                     sceneRef.current = scene;
                     rendererRef.current = renderer;
-                    renderer.toneMapping = THREE.ACESFilmicToneMapping;
-                    renderer.toneMappingExposure = 1.2;
-                    (applyLightingPreset ?? defaultApplyLightingPreset)(scene, lightingPresetRef.current);
+                    renderer.shadowMap.enabled = true;
+                    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+                    (applyLightingPreset ?? defaultApplyLightingPreset)(scene, renderer, lightingPresetRef.current);
                 },
             });
         }
@@ -313,6 +360,31 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
     };
     return (_jsxs("div", { className: "absolute inset-0", children: [_jsx("div", { ref: containerRef, className: "w-full h-full" }), !accessToken && (_jsx("div", { className: "absolute inset-0 z-[2] flex items-center justify-center bg-black/70 text-xs text-white font-nunito", children: "Mapbox access token missing." })), mapError && (_jsx("div", { className: "absolute inset-0 z-[2] flex items-center justify-center bg-black/70 text-xs text-white font-nunito", children: mapError })), !mapReady && !mapError && accessToken && (_jsx("div", { className: "absolute inset-0 z-[2] flex items-center justify-center bg-black/60 text-xs text-white font-nunito", children: "loading map\u2026" }))] }));
 });
+const ensureGeometryUvs = (geometry) => {
+    if (geometry.getAttribute('uv'))
+        return;
+    const pos = geometry.getAttribute('position');
+    if (!pos)
+        return;
+    geometry.computeBoundingBox();
+    const bbox = geometry.boundingBox;
+    if (!bbox)
+        return;
+    const size = new THREE.Vector3();
+    bbox.getSize(size);
+    const uvs = new Float32Array(pos.count * 2);
+    const denomX = size.x || 1;
+    const denomZ = size.z || 1;
+    for (let i = 0; i < pos.count; i += 1) {
+        const x = pos.getX(i);
+        const z = pos.getZ(i);
+        const u = (x - bbox.min.x) / denomX;
+        const v = (z - bbox.min.z) / denomZ;
+        uvs[i * 2] = u;
+        uvs[i * 2 + 1] = v;
+    }
+    geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));
+};
 function applyMaterialOverrides(group, settings) {
     const color = new THREE.Color(settings?.color ?? '#ffffff');
     const textureUrl = settings?.textureUrl;
@@ -337,9 +409,12 @@ function applyMaterialOverrides(group, settings) {
             else
                 material?.dispose?.();
         }
+        if (texture) {
+            ensureGeometryUvs(mesh.geometry);
+        }
         mesh.material = new THREE.MeshStandardMaterial({
             color,
-            roughness: 0.6,
+            roughness: 0.75,
             metalness: 0,
             side: THREE.DoubleSide,
             map: texture ?? null,
@@ -347,10 +422,12 @@ function applyMaterialOverrides(group, settings) {
         mesh.material.polygonOffset = true;
         mesh.material.polygonOffsetFactor = 1.0;
         mesh.material.polygonOffsetUnits = 1.0;
+        mesh.castShadow = false;
+        mesh.receiveShadow = false;
     });
 }
-function defaultApplyLightingPreset(scene, _presetKey) {
-    scene.background = null;
+function defaultApplyLightingPreset(scene, renderer, _presetKey) {
+    scene.background = new THREE.Color('#ffffff');
     const lightsToRemove = scene.children.filter((child) => child instanceof THREE.Light);
     lightsToRemove.forEach((light) => scene.remove(light));
     scene.add(new THREE.AmbientLight('#ffffff', 0.6));
@@ -361,6 +438,8 @@ function defaultApplyLightingPreset(scene, _presetKey) {
     const fill = new THREE.DirectionalLight('#ffffff', 0.4);
     fill.position.set(-6, 8, -6);
     scene.add(fill);
+    renderer.toneMapping = THREE.NeutralToneMapping;
+    renderer.toneMappingExposure = 1.05;
 }
 function applyMapVisibility(map, mode, cacheRef) {
     if (!map?.getStyle?.())

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@treasuryspatial/map-react",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "license": "UNLICENSED",
   "main": "./dist/index.js",
@@ -18,7 +18,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@treasuryspatial/map-kit": "^0.1.1"
+    "@treasuryspatial/map-kit": "^0.1.4"
   },
   "peerDependencies": {
     "react": ">=18",