chore(web): revert cesium and resium (#641)

reearth · Aug 25, 2023 · 6f7baba · 6f7baba
1 parent ace22da
commit 6f7baba
Show file tree

Hide file tree

Showing 22 changed files with 562 additions and 508 deletions.
diff --git a/web/package.json b/web/package.json
@@ -120,7 +120,7 @@
         "array-move": "4.0.0",
         "aws-amplify": "5.2.2",
         "axios": "1.4.0",
-        "cesium": "1.107.2",
+        "cesium": "1.105.2",
         "cesium-dnd": "1.1.0",
         "cesium-mvt-imagery-provider": "1.3.0",
         "core-js": "3.30.2",
@@ -175,7 +175,7 @@
         "react-spinners": "0.13.8",
         "react-use": "17.4.0",
         "remark-gfm": "3.0.1",
-        "resium": "1.17.1",
+        "resium": "1.16.1",
         "tinycolor2": "1.6.0",
         "ts-easing": "0.2.0",
         "use-callback-ref": "1.3.0",

diff --git a/web/src/beta/lib/core/engines/Cesium/Feature/Tileset/hooks.ts b/web/src/beta/lib/core/engines/Cesium/Feature/Tileset/hooks.ts
@@ -141,13 +141,13 @@ const convertStyle = (val: any, convert: StyleProperty["convert"]) => {
 const useFeature = ({
   id,
   tileset,
-  tilesetReady,
+
   layer,
   evalFeature,
 }: {
   id?: string;
   tileset: MutableRefObject<Cesium3DTileset | undefined>;
-  tilesetReady: boolean;
+
   layer?: ComputedLayer;
   evalFeature: EvalFeature;
 }) => {
@@ -229,7 +229,7 @@ const useFeature = ({
         await attachComputedFeature(feature);
       });
     });
-  }, [tileset, tilesetReady, cachedFeaturesRef, attachComputedFeature, layerId]);
+  }, [tileset, cachedFeaturesRef, attachComputedFeature, layerId]);
 
   useEffect(() => {
     cachedCalculatedLayerRef.current = layer;
@@ -380,7 +380,6 @@ export const useHooks = ({
       }),
   );
   const tilesetRef = useRef<Cesium3DTilesetType>();
-  const [tilesetReady, setTilesReady] = useState(false);
 
   const ref = useCallback(
     (tileset: CesiumComponentRef<Cesium3DTilesetType> | null) => {
@@ -391,17 +390,13 @@ export const useHooks = ({
         (tileset?.cesiumElement as any)[layerIdField] = layer.id;
       }
       tilesetRef.current = tileset?.cesiumElement;
-      if (tilesetRef.current) {
-        setTilesReady(true);
-      }
     },
     [id, layer?.id, feature?.id],
   );
 
   useFeature({
     id,
     tileset: tilesetRef,
-    tilesetReady,
     layer,
     evalFeature,
   });
@@ -438,6 +433,13 @@ export const useHooks = ({
         return;
       }
 
+      try {
+        await tilesetRef.current?.readyPromise;
+      } catch (e) {
+        console.error("Could not load 3D tiles: ", e);
+        return;
+      }
+
       // Use internal original matrix for clipping planes.
       const clippingPlanesOriginMatrix = (
         tilesetRef.current as any

diff --git a/web/src/beta/lib/core/engines/Cesium/core/Globe.tsx b/web/src/beta/lib/core/engines/Cesium/core/Globe.tsx
@@ -27,7 +27,7 @@ export default function Globe({ property, cesiumIonAccessToken }: Props): JSX.El
     [property?.terrain, property?.default],
   );
 
-  const terrainProvider = useMemo((): Promise<TerrainProvider> | TerrainProvider | undefined => {
+  const terrainProvider = useMemo((): TerrainProvider | undefined => {
     const opts = {
       terrain: terrainProperty?.terrain,
       terrainType: terrainProperty?.terrainType,
@@ -89,37 +89,35 @@ const terrainProviders: {
           | "terrainCesiumIonUrl"
           | "terrainNormal"
         >,
-      ) => Promise<TerrainProvider> | null);
+      ) => TerrainProvider | null);
 } = {
   cesium: ({ terrainCesiumIonAccessToken, terrainNormal }) =>
-    CesiumTerrainProvider.fromUrl(
-      IonResource.fromAssetId(1, {
+    new CesiumTerrainProvider({
+      url: IonResource.fromAssetId(1, {
         accessToken: terrainCesiumIonAccessToken,
       }),
-      {
-        requestVertexNormals: terrainNormal,
-        requestWaterMask: false,
-      },
-    ),
-  arcgis: () =>
-    ArcGISTiledElevationTerrainProvider.fromUrl(
-      "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
-    ),
+      requestVertexNormals: terrainNormal,
+      requestWaterMask: false,
+    }),
+  arcgis: ({ terrainNormal }) =>
+    new ArcGISTiledElevationTerrainProvider({
+      url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
+      requestVertexNormals: terrainNormal,
+    }),
   cesiumion: ({
     terrainCesiumIonAccessToken,
     terrainCesiumIonAsset,
     terrainCesiumIonUrl,
     terrainNormal,
   }) =>
     terrainCesiumIonAsset
-      ? CesiumTerrainProvider.fromUrl(
-          terrainCesiumIonUrl ||
+      ? new CesiumTerrainProvider({
+          url:
+            terrainCesiumIonUrl ||
             IonResource.fromAssetId(parseInt(terrainCesiumIonAsset, 10), {
               accessToken: terrainCesiumIonAccessToken,
             }),
-          {
-            requestVertexNormals: terrainNormal,
-          },
-        )
+          requestVertexNormals: terrainNormal,
+        })
       : null,
 };
diff --git a/web/src/beta/lib/core/engines/Cesium/core/Imagery.test.ts b/web/src/beta/lib/core/engines/Cesium/core/Imagery.test.ts
@@ -1,117 +1,102 @@
-import { renderHook, act } from "@testing-library/react";
+import { renderHook } from "@testing-library/react";
 import { expect, test, vi } from "vitest";
 
 import { type Tile, useImageryProviders } from "./Imagery";
 
-test("useImageryProviders", async () => {
+test("useImageryProviders", () => {
   const provider = vi.fn(({ url }: { url?: string } = {}): any => ({ hoge: url }));
   const provider2 = vi.fn(({ url }: { url?: string } = {}): any => ({ hoge2: url }));
   const presets = { default: provider, foobar: provider2 };
-  let result: any;
-  let rerender: any;
-
-  await act(async () => {
-    const renderResult = renderHook(
-      ({ tiles, cesiumIonAccessToken }: { tiles: Tile[]; cesiumIonAccessToken?: string }) =>
-        useImageryProviders({
-          tiles,
-          presets,
-          cesiumIonAccessToken,
-        }),
-      { initialProps: { tiles: [{ id: "1", tile_type: "default" }] } },
-    );
-    result = renderResult.result;
-    rerender = renderResult.rerender;
-  });
+  const { result, rerender } = renderHook(
+    ({ tiles, cesiumIonAccessToken }: { tiles: Tile[]; cesiumIonAccessToken?: string }) =>
+      useImageryProviders({
+        tiles,
+        presets,
+        cesiumIonAccessToken,
+      }),
+    { initialProps: { tiles: [{ id: "1", tile_type: "default" }] } },
+  );
 
   expect(result.current.providers).toEqual({ "1": ["default", undefined, { hoge: undefined }] });
+  expect(result.current.updated).toBe(true);
   expect(provider).toBeCalledTimes(1);
   const prevImageryProvider = result.current.providers["1"][2];
 
   // re-render with same tiles
-  await act(async () => {
-    rerender({ tiles: [{ id: "1", tile_type: "default" }] });
-  });
+  rerender({ tiles: [{ id: "1", tile_type: "default" }] });
 
   expect(result.current.providers).toEqual({ "1": ["default", undefined, { hoge: undefined }] });
   expect(result.current.providers["1"][2]).toBe(prevImageryProvider); // 1's provider should be reused
   expect(provider).toBeCalledTimes(1);
 
   // update a tile URL
-  await act(async () => {
-    rerender({ tiles: [{ id: "1", tile_type: "default", tile_url: "a" }] });
-  });
+  rerender({ tiles: [{ id: "1", tile_type: "default", tile_url: "a" }] });
 
   expect(result.current.providers).toEqual({ "1": ["default", "a", { hoge: "a" }] });
   expect(result.current.providers["1"][2]).not.toBe(prevImageryProvider);
+  expect(result.current.updated).toBe(true);
   expect(provider).toBeCalledTimes(2);
   expect(provider).toBeCalledWith({ url: "a" });
   const prevImageryProvider2 = result.current.providers["1"][2];
 
   // add a tile with URL
-  await act(async () => {
-    rerender({
-      tiles: [
-        { id: "2", tile_type: "default" },
-        { id: "1", tile_type: "default", tile_url: "a" },
-      ],
-    });
+  rerender({
+    tiles: [
+      { id: "2", tile_type: "default" },
+      { id: "1", tile_type: "default", tile_url: "a" },
+    ],
   });
 
   expect(result.current.providers).toEqual({
     "2": ["default", undefined, { hoge: undefined }],
     "1": ["default", "a", { hoge: "a" }],
   });
+  expect(result.current.updated).toBe(true);
   expect(result.current.providers["1"][2]).toBe(prevImageryProvider2); // 1's provider should be reused
-  expect(provider).toBeCalledTimes(2);
+  expect(provider).toBeCalledTimes(3);
 
   // sort tiles
-  await act(async () => {
-    rerender({
-      tiles: [
-        { id: "1", tile_type: "default", tile_url: "a" },
-        { id: "2", tile_type: "default" },
-      ],
-    });
+  rerender({
+    tiles: [
+      { id: "1", tile_type: "default", tile_url: "a" },
+      { id: "2", tile_type: "default" },
+    ],
   });
 
   expect(result.current.providers).toEqual({
     "1": ["default", "a", { hoge: "a" }],
     "2": ["default", undefined, { hoge: undefined }],
   });
+  expect(result.current.updated).toBe(true);
   expect(result.current.providers["1"][2]).toBe(prevImageryProvider2); // 1's provider should be reused
-  expect(provider).toBeCalledTimes(2);
+  expect(provider).toBeCalledTimes(3);
 
   // delete a tile
-  await act(async () => {
-    rerender({
-      tiles: [{ id: "1", tile_type: "default", tile_url: "a" }],
-      cesiumIonAccessToken: "a",
-    });
+  rerender({
+    tiles: [{ id: "1", tile_type: "default", tile_url: "a" }],
+    cesiumIonAccessToken: "a",
   });
 
   expect(result.current.providers).toEqual({
     "1": ["default", "a", { hoge: "a" }],
   });
+  expect(result.current.updated).toBe(true);
   expect(result.current.providers["1"][2]).not.toBe(prevImageryProvider2);
-  expect(provider).toBeCalledTimes(3);
+  expect(provider).toBeCalledTimes(4);
 
   // update a tile type
-  await act(async () => {
-    rerender({
-      tiles: [{ id: "1", tile_type: "foobar", tile_url: "u" }],
-      cesiumIonAccessToken: "a",
-    });
+  rerender({
+    tiles: [{ id: "1", tile_type: "foobar", tile_url: "u" }],
+    cesiumIonAccessToken: "a",
   });
 
   expect(result.current.providers).toEqual({
     "1": ["foobar", "u", { hoge2: "u" }],
   });
-  expect(provider).toBeCalledTimes(3);
+  expect(result.current.updated).toBe(true);
+  expect(provider).toBeCalledTimes(4);
   expect(provider2).toBeCalledTimes(1);
 
-  await act(async () => {
-    rerender({ tiles: [] });
-  });
+  rerender({ tiles: [] });
   expect(result.current.providers).toEqual({});
 });