chore(web): upgrade cesium and resium versions (#1000)

* upgrade resium to version 1.17.4 * upgrade cesium to version 1.117.0 * upgrade cesium-mvt-imagery-provider to version 1.4.1 --------- Co-authored-by: keiya01 <[email protected]>
reearth · May 30, 2024 · b681fa3 · b681fa3
1 parent e186bed
commit b681fa3
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 82 deletions.
diff --git a/web/netlify.toml b/web/netlify.toml
@@ -7,4 +7,4 @@
   to = "/index.html"
 
 [context.deploy-preview.environment]
-  NODE_VERSION = "18.16.1"
+  NODE_VERSION = "20.11.0"
diff --git a/web/package.json b/web/package.json
@@ -7,7 +7,7 @@
   "browser": "./dist/reearth-cms.umd.js",
   "types": "./dist/reearth-cms.d.ts",
   "engines": {
-    "node": ">=18"
+    "node": ">=20.11.0"
   },
   "scripts": {
     "start": "yarn && vite",
@@ -93,8 +93,8 @@
     "antd": "5.16.2",
     "apollo-upload-client": "18.0.1",
     "aws-amplify": "5.3.18",
-    "cesium": "1.106.1",
-    "cesium-mvt-imagery-provider": "1.4.0",
+    "cesium": "1.117.0",
+    "cesium-mvt-imagery-provider": "1.4.1",
     "dayjs": "1.11.10",
     "formik": "2.4.5",
     "graphiql": "3.2.0",
@@ -117,7 +117,7 @@
     "react-router-dom": "6.22.3",
     "react-svg": "16.1.34",
     "remark-gfm": "4.0.0",
-    "resium": "1.16.1",
+    "resium": "1.17.4",
     "ulid": "2.3.0"
   }
-}
+}
diff --git a/web/src/components/atoms/ResiumViewer/provider.ts b/web/src/components/atoms/ResiumViewer/provider.ts
@@ -33,7 +33,7 @@ const defaultTile = new ProviderViewModel({
   creationFunction: () => {
     return createWorldImageryAsync({
       style: IonWorldImageryStyle.AERIAL,
-    }) as any;
+    });
   },
 });
 
@@ -44,7 +44,7 @@ const labelled = new ProviderViewModel({
   creationFunction: () => {
     return createWorldImageryAsync({
       style: IonWorldImageryStyle.AERIAL_WITH_LABELS,
-    }) as any;
+    });
   },
 });
 
@@ -55,7 +55,7 @@ const roadMap = new ProviderViewModel({
   creationFunction: () => {
     return createWorldImageryAsync({
       style: IonWorldImageryStyle.ROAD,
-    }) as any;
+    });
   },
 });
 
@@ -76,12 +76,14 @@ const esriTopography = new ProviderViewModel({
     "https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/tile/0/0/0",
   tooltip: "",
   creationFunction: () => {
-    return new ArcGisMapServerImageryProvider({
-      url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
-      credit:
-        "Copyright: Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Communit",
-      enablePickFeatures: false,
-    });
+    return ArcGisMapServerImageryProvider.fromUrl(
+      "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
+      {
+        credit:
+          "Copyright: Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Communit",
+        enablePickFeatures: false,
+      },
+    );
   },
 });
 
@@ -90,7 +92,7 @@ const earthAtNight = new ProviderViewModel({
   iconUrl: buildModuleUrl("Widgets/Images/ImageryProviders/earthAtNight.png"),
   tooltip: "",
   creationFunction: () => {
-    return IonImageryProvider.fromAssetId(3812, {}) as any;
+    return IonImageryProvider.fromAssetId(3812, { accessToken });
   },
 });
 
@@ -180,9 +182,9 @@ const arcGis = new ProviderViewModel({
   iconUrl: ArcgisThumbnail,
   tooltip: "",
   creationFunction: () => {
-    return new ArcGISTiledElevationTerrainProvider({
-      url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
-    });
+    return ArcGISTiledElevationTerrainProvider.fromUrl(
+      "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
+    );
   },
 });
 
@@ -198,13 +200,12 @@ const cesiumIonGet = ({
     iconUrl: image || NoImage,
     tooltip: "",
     creationFunction: () => {
-      return new CesiumTerrainProvider({
-        url:
-          url ||
+      return CesiumTerrainProvider.fromUrl(
+        url ||
           IonResource.fromAssetId(parseInt(cesiumIonAssetId, 10), {
             accessToken: cesiumIonAccessToken || accessToken,
           }),
-      });
+      );
     },
   });
 };

diff --git a/web/src/components/molecules/Asset/Asset/AssetBody/Asset.tsx b/web/src/components/molecules/Asset/Asset/AssetBody/Asset.tsx
@@ -80,8 +80,8 @@ const AssetMolecule: React.FC<Props> = ({
   };
 
   const renderPreview = useCallback(() => {
-    switch (true) {
-      case viewerType === "geo":
+    switch (viewerType) {
+      case "geo":
         return (
           <GeoViewer
             url={assetUrl}
@@ -90,7 +90,7 @@ const AssetMolecule: React.FC<Props> = ({
             workspaceSettings={workspaceSettings}
           />
         );
-      case viewerType === "geo_3d_tiles":
+      case "geo_3d_tiles":
         return (
           <Geo3dViewer
             url={assetUrl}
@@ -99,23 +99,23 @@ const AssetMolecule: React.FC<Props> = ({
             workspaceSettings={workspaceSettings}
           />
         );
-      case viewerType === "geo_mvt":
+      case "geo_mvt":
         return (
           <MvtViewer url={assetUrl} onGetViewer={getViewer} workspaceSettings={workspaceSettings} />
         );
-      case viewerType === "image":
+      case "image":
         return <ImageViewer url={assetUrl} />;
-      case viewerType === "image_svg":
+      case "image_svg":
         return <SvgViewer url={assetUrl} svgRender={svgRender} />;
-      case viewerType === "model_3d":
+      case "model_3d":
         return (
           <GltfViewer
             url={assetUrl}
             onGetViewer={getViewer}
             workspaceSettings={workspaceSettings}
           />
         );
-      case viewerType === "unknown":
+      case "unknown":
       default:
         return <ViewerNotSupported />;
     }

diff --git a/web/src/components/molecules/Asset/Viewers/Geo3dViewer/Cesium3dTileSetComponent.tsx b/web/src/components/molecules/Asset/Viewers/Geo3dViewer/Cesium3dTileSetComponent.tsx
@@ -9,12 +9,17 @@ const Cesium3dTileSetComponent: React.FC<Props> = ({ ...props }) => {
 
   const handleReady = useCallback(
     async (tileset: Cesium3DTileset) => {
-      try {
-        await viewer?.zoomTo(tileset.root.tileset);
-        tileset.show = true;
-      } catch (error) {
-        console.error(error);
-      }
+      // Wait one frame to prevent unexpected error from next frame
+      // because of 3D tiles is handled asynchronously.
+      requestAnimationFrame(async () => {
+        if (tileset.isDestroyed()) return;
+        try {
+          await viewer?.zoomTo(tileset);
+          tileset.show = true;
+        } catch (error) {
+          console.error(error);
+        }
+      });
     },
     [viewer],
   );

diff --git a/web/src/components/molecules/Asset/Viewers/MvtViewer/Imagery.tsx b/web/src/components/molecules/Asset/Viewers/MvtViewer/Imagery.tsx
@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { VectorTileFeature } from "@mapbox/vector-tile";
 import { Cartesian3, Math, BoundingSphere, HeadingPitchRange } from "cesium";
-import { MVTImageryProvider } from "cesium-mvt-imagery-provider";
+import { CesiumMVTImageryProvider } from "cesium-mvt-imagery-provider";
 import { md5 } from "js-md5";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useCesium } from "resium";
@@ -91,7 +91,7 @@ export const Imagery: React.FC<Props> = ({ url, handleProperties }) => {
   }, [loadData, url]);
 
   useEffect(() => {
-    const imageryProvider = new MVTImageryProvider({
+    const imageryProvider = new CesiumMVTImageryProvider({
       urlTemplate,
       layerName: currentLayer,
       style,

diff --git a/web/yarn.lock b/web/yarn.lock
@@ -4089,36 +4089,37 @@
   dependencies:
     statuses "^2.0.1"
 
-"@cesium/engine@2.4.1":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@cesium/engine/-/engine-2.4.1.tgz#b9b0395edebff581dbc55b7b9e1929f673dee058"
-  integrity sha512-8f0hBzhPUSimYLZ+cmQ0rSudm+8zYD3sBMvJcPSVt0wDpLT7tvBt9swC2v5qC2gOwGOeyFnJhXKes3ICE6SaDA==
+"@cesium/engine@^9.1.0":
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/@cesium/engine/-/engine-9.1.0.tgz#5571a54cff9dd840d77445b88c00f8b0c3ce5cab"
+  integrity sha512-sDscnq8Tl2tSJCJRoxlrTSj2TfdsZr8zOXyrj6bLJaqBDuf53vgPS5Y5D+WKbwUomZ/hI2EIlMtLD2Ev4MwnAg==
   dependencies:
-    "@tweenjs/tween.js" "^18.6.4"
-    "@zip.js/zip.js" "2.4.x"
+    "@tweenjs/tween.js" "^23.1.1"
+    "@zip.js/zip.js" "^2.7.34"
     autolinker "^4.0.0"
     bitmap-sdf "^1.0.3"
     dompurify "^3.0.2"
+    draco3d "^1.5.1"
     earcut "^2.2.4"
     grapheme-splitter "^1.0.4"
     jsep "^1.3.8"
     kdbush "^4.0.1"
-    ktx-parse "^0.5.0"
+    ktx-parse "^0.7.0"
     lerc "^2.0.0"
     mersenne-twister "^1.1.0"
-    meshoptimizer "^0.19.0"
+    meshoptimizer "^0.20.0"
     pako "^2.0.4"
     protobufjs "^7.1.0"
     rbush "^3.0.1"
     topojson-client "^3.1.0"
     urijs "^1.19.7"
 
-"@cesium/widgets@2.3.1":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@cesium/widgets/-/widgets-2.3.1.tgz#446024fff8d8a271f2a4bcdccf15728be54767d8"
-  integrity sha512-KC/GtcrS2t9Vf710C5a0ArG9ZawVeUhA37ISzFSCqVoAmlNd2YAjv00SZZOMtFqjMFWr7sOcm3BwMjWXnTWjvw==
+"@cesium/widgets@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@cesium/widgets/-/widgets-6.1.0.tgz#b0a02f99300fbc61acb82f741e4750e8194298fb"
+  integrity sha512-wNPEsHFXiDOwosf+6O3+daee83t+lL/1lXxmK2dOKe5tV4h5BBIFAq8A8ttSmdAhDj+WVMS/ZGCvIi5Y87GTpw==
   dependencies:
-    "@cesium/engine" "2.4.1"
+    "@cesium/engine" "^9.1.0"
     nosleep.js "^0.12.0"
 
 "@chenshuai2144/sketch-color@^1.0.7", "@chenshuai2144/sketch-color@^1.0.8":
@@ -7054,10 +7055,10 @@
   dependencies:
     "@turf/helpers" "^6.5.0"
 
-"@tweenjs/tween.js@^18.6.4":
-  version "18.6.4"
-  resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-18.6.4.tgz#40a3d0a93647124872dec8e0fd1bd5926695b6ca"
-  integrity sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==
+"@tweenjs/tween.js@^23.1.1":
+  version "23.1.1"
+  resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-23.1.1.tgz#0ae28ed9c635805557f78c2626464018d5f1b5e2"
+  integrity sha512-ZpboH7pCPPeyBWKf8c7TJswtCEQObFo3bOBYalm99NzZarATALYCo5OhbCa/n4RQyJyHfhkdx+hNrdL5ByFYDw==
 
 "@types/[email protected]":
   version "18.0.0"
@@ -8001,10 +8002,10 @@
     "@types/emscripten" "^1.39.6"
     tslib "^1.13.0"
 
-"@zip.js/zip.js@2.4.x":
-  version "2.4.26"
-  resolved "https://registry.yarnpkg.com/@zip.js/zip.js/-/zip.js-2.4.26.tgz#b79bb2055dc6e185890ee01cdb710caba505d5b2"
-  integrity sha512-I9HBO3BHIxEMQmltmHM3iqUW6IHqi3gsL9wTSXvHTRpOrA6q2OxtR58EDSaOGjHhDVJ+wIOAxZyKq2x00AVmqw==
+"@zip.js/zip.js@^2.7.34":
+  version "2.7.41"
+  resolved "https://registry.yarnpkg.com/@zip.js/zip.js/-/zip.js-2.7.41.tgz#582668dabe997c353b37f27edb95162f688d387a"
+  integrity sha512-EMxPWXlEqqvsK9jxPmNvEShrIXP2LYTdQnEfsBH6OQCnlZRVo/dJIgtzbKvtK9A8PBTDQdxwxulj+QKplmW2Xg==
 
 accepts@~1.3.5, accepts@~1.3.8:
   version "1.3.8"
@@ -9021,21 +9022,21 @@ ccount@^2.0.0:
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
   integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
 
-[email protected].0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/cesium-mvt-imagery-provider/-/cesium-mvt-imagery-provider-1.4.0.tgz#a01765e5fe9632a629ba1aeae7f6fc59bce89e7f"
-  integrity sha512-5xbyyomFAspYw8lHjBNKJw4+QQM1U0cROZyoHbMBSwwljAg7VUm6o3LzkXvZabCdDcVP1NcH9oOHg5Sn4z4MEQ==
+[email protected].1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/cesium-mvt-imagery-provider/-/cesium-mvt-imagery-provider-1.4.1.tgz#0cbf1966e87dc5b214a021797a392d66558b415b"
+  integrity sha512-zcVhID9zfxHpUhQzpXUV0rQxj4csRkx6bmsRV+sU7ah048XVgCCFeRigaNgDsD5nnQRxvptEEW6CgGP66cDezA==
   dependencies:
     "@mapbox/vector-tile" "1.3.1"
     pbf "3.2.1"
 
-cesium@1.106.1:
-  version "1.106.1"
-  resolved "https://registry.yarnpkg.com/cesium/-/cesium-1.106.1.tgz#11bac4c365cd6f2deb51dba92ac2b81fc8198194"
-  integrity sha512-89sgLqWBhj57wtC8Jfn1yKfN3+Vk5IYxeW+5KqOZ280AL6Rr7E+MWTFiEfp5P3MY3xEcrutN3v8GYgP+Q3JfbA==
+cesium@1.117.0:
+  version "1.117.0"
+  resolved "https://registry.yarnpkg.com/cesium/-/cesium-1.117.0.tgz#fa37a2b19721f0be43f04494062c7163cf138416"
+  integrity sha512-gJ4J8oLgDTAYEGL69vK395MTjYDzxdLw4MqBXAXi9G2bhAp0U2DfxwuRqDcyW1SFdJVHj6ekcOBHszTMbmBOOA==
   dependencies:
-    "@cesium/engine" "2.4.1"
-    "@cesium/widgets" "2.3.1"
+    "@cesium/engine" "^9.1.0"
+    "@cesium/widgets" "^6.1.0"
 
 chai@^4.3.10, chai@^4.4.1:
   version "4.4.1"
@@ -10049,6 +10050,11 @@ dotenv@^16.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.1.tgz#8f8f9d94876c35dac989876a5d3a82a267fdce1d"
   integrity sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==
 
+draco3d@^1.5.1:
+  version "1.5.6"
+  resolved "https://registry.yarnpkg.com/draco3d/-/draco3d-1.5.6.tgz#0d570a9792e3a3a9fafbfea065b692940441c626"
+  integrity sha512-+3NaRjWktb5r61ZFoDejlykPEFKT5N/LkbXsaddlw6xNSXBanUYpFc2AXXpbJDilPHazcSreU/DpQIaxfX0NfQ==
+
 dset@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/dset/-/dset-3.1.2.tgz#89c436ca6450398396dc6538ea00abc0c54cd45a"
@@ -13265,10 +13271,10 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
-ktx-parse@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/ktx-parse/-/ktx-parse-0.5.0.tgz#b4025bbc73ac5386ac37e869de455eab915261bc"
-  integrity sha512-5IZrv5s1byUeDTIee1jjJQBiD5LPDB0w9pJJ0oT9BCKKJf16Tuj123vm1Ps0GOHSHmeWPgKM0zuViCVuTRpqaA==
+ktx-parse@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/ktx-parse/-/ktx-parse-0.7.0.tgz#65788a43a1a1c19c795ff26299e9318c16b436b2"
+  integrity sha512-naezun/2iiWrantwoRI9mw6E4iN41ggYzJSR9XAZzf6+rv+2Tb1yYN8VJhGsA0uptBexE0m4GDh+iiQhYpW+Qw==
 
 lazy-universal-dotenv@^4.0.0:
   version "4.0.0"
@@ -13821,10 +13827,10 @@ mersenne-twister@^1.1.0:
   resolved "https://registry.yarnpkg.com/mersenne-twister/-/mersenne-twister-1.1.0.tgz#f916618ee43d7179efcf641bec4531eb9670978a"
   integrity sha512-mUYWsMKNrm4lfygPkL3OfGzOPTR2DBlTkBNHM//F6hGp8cLThY897crAlk3/Jo17LEOOjQUrNAx6DvgO77QJkA==
 
-meshoptimizer@^0.19.0:
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/meshoptimizer/-/meshoptimizer-0.19.0.tgz#1669e6d788ad3ffd238a65184e478355642ca979"
-  integrity sha512-58qz5Qc/6Geu8Ib3bBWERE5R7pM5ErrJVo16fAtu6ryxVaE3VAtM/u2vurDxaq8AGZ3yWxuM/DnylTga5a4XCQ==
+meshoptimizer@^0.20.0:
+  version "0.20.0"
+  resolved "https://registry.yarnpkg.com/meshoptimizer/-/meshoptimizer-0.20.0.tgz#890eaeafa2b5730a0c58770fdf3b1fe77b746bf5"
+  integrity sha512-olcJ1q+YVnjroRJpCL1Dj5aZxr2JMr2hRutMUwhuHZvpAL7SIZgOT6eMlFF4TbBGSR89tawE/gqB79J/LrW/Nw==
 
 methods@~1.1.2:
   version "1.1.2"
@@ -16400,10 +16406,10 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-resium@1.16.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/resium/-/resium-1.16.1.tgz#9ace9a39104c40c1e5717a21f84f54eff2a38d25"
-  integrity sha512-I9vyClyR4+JZzQGUv5wc9DSc+bQWh9S7qMUwy6vYWJ3GkeSQW4vgTa7qiCv87w5zyw6lL+dRXZFjuiKogYnHJA==
+resium@1.17.4:
+  version "1.17.4"
+  resolved "https://registry.yarnpkg.com/resium/-/resium-1.17.4.tgz#9da878bb89418c9a9f8fda84171f755525371f1b"
+  integrity sha512-+LYqwThrKMhFwE8ugwg323OxYHbR6dAjY6t9kfS6U5XEguHLXkIvTVxEfYkF1HSgHM0t2K/cgm7RtobO9+xdgw==
 
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"