@navaramap/three-react 0.0.4 → 0.0.6

package/README.md

@@ -50,28 +50,40 @@ export function Layers() {
     ]);
   }, [view]);
 
+  const baseTilesSource = useMemo(
+    () =>
+      view.addSource({
+        type: "raster-tile",
+        url: "…",
+        minZoom: 2,
+        maxZoom: 18,
+      }),
+    [view],
+  );
+  const demSource = useMemo(
+    () =>
+      view.addSource({
+        type: "raster-dem",
+        url: "…",
+        elevationDecoder: JAPAN_GSI_ELEVATION_DECODER(),
+        minZoom: 6,
+        maxZoom: 15,
+      }),
+    [view],
+  );
+
   const baseTiles = useMemo<LayerDescription>(
-    () => ({
-      type: "tiles",
-      data: { url: "…" },
-      raster_tile: { min_zoom: 2, max_zoom: 18 },
-    }),
-    [],
+    () => ({ type: "raster", source: baseTilesSource }),
+    [baseTilesSource],
   );
 
   const terrain = useMemo<LayerDescription>(
     () => ({
       type: "terrain",
-      data: { url: "…" },
-      raster_terrain: {
-        min_zoom: 6,
-        max_zoom: 15,
-        elevation_decoder: JAPAN_GSI_ELEVATION_DECODER(),
-        cast_shadow: true,
-        receive_shadow: true,
-      },
+      source: demSource,
+      terrain: { castShadow: true, receiveShadow: true },
     }),
-    [],
+    [demSource],
   );
 
   return (

package/dist/index.js

@@ -64,10 +64,7 @@ function p({ config: e, onReady: t }) {
 			t?.(), e.delete(), r.current = null;
 		};
 	}, [n]), i(() => {
-		if (r.current) if ("data" in e) {
-			let { data: t, ...n } = e;
-			r.current.update(n);
-		} else r.current.update(e);
+		r.current && r.current.update(e);
 	}, [e]), null;
 }
 function m(e, t, n, r) {

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("@navaramap/three"),require("react")):typeof define==`function`&&define.amd?define([`exports`,`@navaramap/three`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.NavaraThreeReact={},e._navaramap_three,e.react))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=Object.create,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,s=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty,l=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),u=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var s=o(t),l=0,u=s.length,d;l<u;l++)d=s[l],!c.call(e,d)&&d!==n&&i(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=a(t,d))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:r(s(e)),u(t||!e||!e.__esModule?i(n,`default`,{value:e,enumerable:!0}):n,e)))(t,1);var d=l((e=>{var t=Symbol.for(`react.transitional.element`);function n(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.jsx=n})),f=l(((e,t)=>{t.exports=d()}))(),p=(0,n.createContext)(void 0),m=()=>{let e=(0,n.useContext)(p);if(!e)throw Error(`Navara React Error: You have to invoke this hook inside of ViewProvider.`);return e},h=({canvas:e,children:r,plugins:i,...a})=>{let[o,s]=(0,n.useState)(),[c,l]=(0,n.useState)(!1),u=(0,n.useRef)(void 0);return(0,n.useEffect)(()=>{if(u.current){console.warn(`You need to recreate ThreeView.`);return}let n=new t.default({canvas:e&&`current`in e?e.current:e,...a});if(i)for(let e of i)n.addPlugin(e);return s(n),u.current=n,(async()=>{try{await n.init(),l(!0)}catch(e){console.error(`Navara init failed:`,e)}})(),()=>{}},[e,a,i]),(0,f.jsx)(p.Provider,{value:{view:o},children:c?r:null})};function g({config:e,onReady:t}){let{view:r}=m(),i=(0,n.useRef)(null),a=(0,n.useRef)(e),o=(0,n.useRef)(t);return(0,n.useEffect)(()=>{a.current=e,o.current=t},[e,t]),(0,n.useEffect)(()=>{let e=r.addLayer(a.current);i.current=e;let t=o.current?.(e);return()=>{t?.(),e.delete(),i.current=null}},[r]),(0,n.useEffect)(()=>{if(i.current)if(`data`in e){let{data:t,...n}=e;i.current.update(n)}else i.current.update(e)},[e]),null}function _(e,t,r,i){let a=(0,n.useRef)(null),o=(0,n.useRef)(e),s=(0,n.useRef)(r),c=(0,n.useRef)(i);(0,n.useEffect)(()=>{o.current=e,s.current=r,c.current=i},[e,r,i]),(0,n.useEffect)(()=>{let e=o.current(s.current);a.current=e;let t=c.current?.(e);return()=>{t?.(),e.delete(),a.current=null}},[t]),(0,n.useEffect)(()=>{a.current&&a.current.update(r)},[r])}function v({config:e,onReady:t}){let{view:r}=m();return _((0,n.useCallback)(e=>r.addMesh(e),[r]),r,e,t),null}function y({config:e,onReady:t}){let{view:r}=m();return _((0,n.useCallback)(e=>r.addLight(e),[r]),r,e,t),null}function b({config:e,onReady:t}){let{view:r}=m();return _((0,n.useCallback)(e=>r.addEffect(e),[r]),r,e,t),null}e.EffectDesc=b,e.Layer=g,e.LightDesc=y,e.MeshDesc=v,e.ViewProvider=h,e.useViewContext=m});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("@navaramap/three"),require("react")):typeof define==`function`&&define.amd?define([`exports`,`@navaramap/three`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.NavaraThreeReact={},e._navaramap_three,e.react))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=Object.create,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,s=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty,l=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),u=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var s=o(t),l=0,u=s.length,d;l<u;l++)d=s[l],!c.call(e,d)&&d!==n&&i(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=a(t,d))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:r(s(e)),u(t||!e||!e.__esModule?i(n,`default`,{value:e,enumerable:!0}):n,e)))(t,1);var d=l((e=>{var t=Symbol.for(`react.transitional.element`);function n(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.jsx=n})),f=l(((e,t)=>{t.exports=d()}))(),p=(0,n.createContext)(void 0),m=()=>{let e=(0,n.useContext)(p);if(!e)throw Error(`Navara React Error: You have to invoke this hook inside of ViewProvider.`);return e},h=({canvas:e,children:r,plugins:i,...a})=>{let[o,s]=(0,n.useState)(),[c,l]=(0,n.useState)(!1),u=(0,n.useRef)(void 0);return(0,n.useEffect)(()=>{if(u.current){console.warn(`You need to recreate ThreeView.`);return}let n=new t.default({canvas:e&&`current`in e?e.current:e,...a});if(i)for(let e of i)n.addPlugin(e);return s(n),u.current=n,(async()=>{try{await n.init(),l(!0)}catch(e){console.error(`Navara init failed:`,e)}})(),()=>{}},[e,a,i]),(0,f.jsx)(p.Provider,{value:{view:o},children:c?r:null})};function g({config:e,onReady:t}){let{view:r}=m(),i=(0,n.useRef)(null),a=(0,n.useRef)(e),o=(0,n.useRef)(t);return(0,n.useEffect)(()=>{a.current=e,o.current=t},[e,t]),(0,n.useEffect)(()=>{let e=r.addLayer(a.current);i.current=e;let t=o.current?.(e);return()=>{t?.(),e.delete(),i.current=null}},[r]),(0,n.useEffect)(()=>{i.current&&i.current.update(e)},[e]),null}function _(e,t,r,i){let a=(0,n.useRef)(null),o=(0,n.useRef)(e),s=(0,n.useRef)(r),c=(0,n.useRef)(i);(0,n.useEffect)(()=>{o.current=e,s.current=r,c.current=i},[e,r,i]),(0,n.useEffect)(()=>{let e=o.current(s.current);a.current=e;let t=c.current?.(e);return()=>{t?.(),e.delete(),a.current=null}},[t]),(0,n.useEffect)(()=>{a.current&&a.current.update(r)},[r])}function v({config:e,onReady:t}){let{view:r}=m();return _((0,n.useCallback)(e=>r.addMesh(e),[r]),r,e,t),null}function y({config:e,onReady:t}){let{view:r}=m();return _((0,n.useCallback)(e=>r.addLight(e),[r]),r,e,t),null}function b({config:e,onReady:t}){let{view:r}=m();return _((0,n.useCallback)(e=>r.addEffect(e),[r]),r,e,t),null}e.EffectDesc=b,e.Layer=g,e.LightDesc=y,e.MeshDesc=v,e.ViewProvider=h,e.useViewContext=m});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@navaramap/three-react",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "main": "dist/index.umd.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,14 +21,14 @@
   "peerDependencies": {
     "react": ">=19",
     "three": ">=0.183.0",
-    "@navaramap/three": "0.0.4"
+    "@navaramap/three": "0.0.6"
   },
   "devDependencies": {
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "@types/three": "0.185.1",
     "three": "0.185.1",
-    "@navaramap/three": "0.0.4"
+    "@navaramap/three": "0.0.6"
   },
   "scripts": {
     "type-check": "tsc && tsc -p tsconfig.node.json",

package/src/Layer.tsx

@@ -49,12 +49,7 @@ export function Layer({ config, onReady }: PropsWithChildren<LayerProps>) {
 
   useEffect(() => {
     if (handleRef.current) {
-      if ("data" in config) {
-        const { data: _data, ...withoutData } = config;
-        handleRef.current.update(withoutData);
-      } else {
-        handleRef.current.update(config);
-      }
+      handleRef.current.update(config);
     }
   }, [config]);