chore: update dependency cesium to v1.116.0 (#625)

* chore: update dependency cesium to v1.116.0

* fix

* fix

* test

* fix

* fix imagery layer order

* fix test

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: keiya01 <keiya.s.0210@gmail.com>

package.json

@@ -40,7 +40,8 @@
   },
   "peerDependencies": {
     "cesium": "1.x",
-    "react": ">=18.2.0"
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "8.0.5",
@@ -56,7 +57,7 @@
     "@types/react": "18.2.73",
     "@vitejs/plugin-react": "4.2.1",
     "c8": "9.1.0",
-    "cesium": "1.107.2",
+    "cesium": "1.116.0",
     "eslint": "8.57.0",
     "eslint-config-reearth": "0.3.0",
     "globby": "14.0.1",
@@ -75,4 +76,4 @@
     "vitest": "1.4.0",
     "web-streams-polyfill": "4.0.0"
   }
-}
+}

src/Billboard/Billboard.ts

@@ -16,7 +16,7 @@ Only inside [BillboardCollection](/components/BillboardCollection) components.
 A billboard object will be attached to the parent BillboardCollection.
 */
 
-export type BillboardCesiumProps = PickCesiumProps<CesiumBillboard, typeof cesiumProps>;
+export type BillboardCesiumProps = PickCesiumProps<CesiumBillboard, typeof cesiumProps, "position">;
 
 export type BillboardOtherProps = EventProps<{
   collection: BillboardCollection;

src/Cesium3DTileset/Cesium3DTileset.stories.tsx

@@ -1,7 +1,7 @@
 import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj } from "@storybook/react";
 import { Viewer as CesiumViewer, Cesium3DTileStyle, IonResource } from "cesium";
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
 
 import { CesiumComponentRef } from "../core";
 import { events } from "../core/storybook";
@@ -44,18 +44,11 @@ export const Resource: Story = {
   render: args => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const ref = useRef<CesiumComponentRef<CesiumViewer>>(null);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const url = useMemo(() => IonResource.fromAssetId(96188), []);
     return (
       <Viewer full ref={ref}>
-        <Cesium3DTileset
-          {...args}
-          url={IonResource.fromAssetId(96188)}
-          onAllTilesLoad={action("onAllTilesLoad")}
-          onInitialTilesLoad={action("onInitialTilesLoad")}
-          onTileFailed={action("onTileFailed")}
-          onTileLoad={action("onTileLoad")}
-          onTileUnload={action("onTileUnload")}
-          {...events}
-        />
+        <Cesium3DTileset {...args} url={url} />
       </Viewer>
     );
   },

src/Cesium3DTileset/Cesium3DTileset.ts

@@ -11,6 +11,7 @@ import {
   PickCesiumProps,
   ConstructorOptions,
   Merge,
+  isPromise,
 } from "../core";
 
 /*
@@ -58,7 +59,6 @@ const cesiumProps = [
   "modelMatrix",
   "shadows",
   "maximumScreenSpaceError",
-  "maximumMemoryUsage",
   "cullRequestsWhileMoving",
   "cullRequestsWhileMovingMultiplier",
   "preloadWhenHidden",
@@ -110,6 +110,7 @@ const cesiumProps = [
   "outlineColor",
   "cacheBytes",
   "maximumCacheOverflowBytes",
+  "enableCollision",
 ] as const;
 
 const cesiumReadonlyProps = [
@@ -121,6 +122,7 @@ const cesiumReadonlyProps = [
   "modelForwardAxis",
   "projectTo2D",
   "enableShowOutline",
+  "enablePick",
 ] as const;
 
 export const cesiumEventProps = {
@@ -143,11 +145,7 @@ const Cesium3DTileset = createCesiumComponent<CesiumCesium3DTileset, Cesium3DTil
     const maybePromiseURL = props.url;
 
     let resultURL: Exclude<Cesium3DTilesetProps["url"], Promise<Resource>>;
-    if (
-      maybePromiseURL &&
-      typeof maybePromiseURL === "object" &&
-      typeof (maybePromiseURL as Promise<unknown>).then === "function"
-    ) {
+    if (isPromise(maybePromiseURL)) {
       resultURL = await maybePromiseURL;
     } else {
       resultURL = maybePromiseURL as typeof resultURL;

src/Entity/Entity.test.tsx

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import { Entity as CesiumEntity } from "cesium";
 import { createRef } from "react";
 import { expectType, TypeEqual } from "ts-expect";
@@ -52,5 +52,7 @@ it("should unmount", () => {
     </Provider>,
   ).unmount();
 
-  expect(ctx.entityCollection?.remove).toBeCalledWith(expect.any(CesiumEntity));
+  waitFor(() => {
+    expect(ctx.entityCollection?.remove).toBeCalledWith(expect.any(CesiumEntity));
+  });
 });

src/Entity/Entity.ts

@@ -1,7 +1,14 @@
 import { Entity as CesiumEntity } from "cesium";
 import { ReactNode } from "react";
 
-import { createCesiumComponent, EventProps, PickCesiumProps, Merge, EventTarget } from "../core";
+import {
+  createCesiumComponent,
+  EventProps,
+  PickCesiumProps,
+  Merge,
+  EventTarget,
+  RootComponentInternalProps,
+} from "../core";
 
 export type { EventTarget } from "../core";
 
@@ -75,13 +82,14 @@ export type EntityCesiumEvents = {
   onDefinitionChange?: () => void;
 };
 
-export type EntityOtherProps = EventProps<EventTarget> & {
-  children?: ReactNode;
-  /** If true, the entity will be selected. It works only inside Viewer not CesiumWidget. */
-  selected?: boolean;
-  /** If true, the entity will be tracked by the camera. It works only inside Viewer not CesiumWidget. */
-  tracked?: boolean;
-};
+export type EntityOtherProps = RootComponentInternalProps &
+  EventProps<EventTarget> & {
+    children?: ReactNode;
+    /** If true, the entity will be selected. It works only inside Viewer not CesiumWidget. */
+    selected?: boolean;
+    /** If true, the entity will be tracked by the camera. It works only inside Viewer not CesiumWidget. */
+    tracked?: boolean;
+  };
 
 export type EntityProps = EntityCesiumProps &
   EntityCesiumReadonlyProps &
@@ -164,9 +172,12 @@ const Entity = createCesiumComponent<CesiumEntity, EntityProps>({
       }
     }
   },
-  provide(element) {
+  provide(element, _ctx, props) {
     return {
       entity: element,
+      __$internal: {
+        onUpdate: props?.onUpdate,
+      },
     };
   },
   cesiumProps,

src/Globe/Globe.ts

@@ -1,6 +1,6 @@
 import { Globe as CesiumGlobe, TerrainProvider } from "cesium";
 
-import { createCesiumComponent, PickCesiumProps } from "../core";
+import { createCesiumComponent, isPromise, PickCesiumProps } from "../core";
 
 /*
 @summary
@@ -93,8 +93,6 @@ const cesiumProps = [
   "translucency",
   "undergroundColor",
   "undergroundColorAlphaByDistance",
-  "terrainExaggeration",
-  "terrainExaggerationRelativeHeight",
   "lambertDiffuseMultiplier",
   "atmosphereLightIntensity",
   "atmosphereRayleighCoefficient",
@@ -113,11 +111,7 @@ const Globe = createCesiumComponent<CesiumGlobe, GlobeProps>({
   update: async (elm, props) => {
     const maybePromiseTerrainProvider = props.terrainProvider;
     let resultTerrainProvider: TerrainProvider;
-    if (
-      maybePromiseTerrainProvider &&
-      typeof maybePromiseTerrainProvider === "object" &&
-      typeof (maybePromiseTerrainProvider as Promise<unknown>).then === "function"
-    ) {
+    if (isPromise(maybePromiseTerrainProvider)) {
       resultTerrainProvider = await maybePromiseTerrainProvider;
     } else {
       resultTerrainProvider = maybePromiseTerrainProvider as TerrainProvider;

src/GroundPrimitiveCollection/GroundPrimitiveCollection.ts

@@ -29,7 +29,7 @@ export type GroundPrimitiveCollectionOtherProps = {
 export type GroundPrimitiveCollectionProps = GroundPrimitiveCollectionCesiumProps &
   GroundPrimitiveCollectionOtherProps;
 
-const cesiumProps = ["show", "destroyPrimitives"] as const;
+const cesiumProps = ["show", "destroyPrimitives", "primitiveAdded", "primitiveRemoved"] as const;
 
 const GroundPrimitiveCollection = createCesiumComponent<
   PrimitiveCollection,

src/ImageryLayer/ImageryLayer.ts

@@ -1,6 +1,12 @@
 import { ImageryLayer as CesiumImageryLayer, ImageryProvider } from "cesium";
 
-import { createCesiumComponent, PickCesiumProps, Merge, ConstructorOptions2 } from "../core";
+import {
+  createCesiumComponent,
+  PickCesiumProps,
+  Merge,
+  ConstructorOptions2,
+  isPromise,
+} from "../core";
 
 /*
 @summary
@@ -86,19 +92,30 @@ const ImageryLayer = createCesiumComponent<CesiumImageryLayer, ImageryLayerProps
   async create(context, props) {
     if (!context.imageryLayerCollection) return;
 
-    const maybePromise = props.imageryProvider;
-
-    let result: ImageryProvider;
-    if (
-      maybePromise &&
-      typeof maybePromise === "object" &&
-      typeof (maybePromise as Promise<unknown>).then === "function"
-    ) {
-      result = await maybePromise;
-    } else {
-      result = maybePromise as ImageryProvider;
+    const imageryProvider = isPromise(props.imageryProvider)
+      ? props.imageryProvider
+      : new Promise<ImageryProvider>(r => queueMicrotask(() => r(props.imageryProvider)));
+
+    const imageryLayerWaitingList = context.__$internal?.imageryLayerWaitingList?.slice();
+    context.__$internal?.imageryLayerWaitingList
+      ? context.__$internal.imageryLayerWaitingList.push(imageryProvider)
+      : undefined;
+
+    // Make sure keeping the order of imagery layer to specify the index correctly.
+    if (imageryLayerWaitingList) {
+      await Promise.all(imageryLayerWaitingList.filter(v => isPromise(v)));
+    }
+
+    const result: ImageryProvider = await imageryProvider;
+
+    // Remove the awaited result from the waiting list.
+    if (context.__$internal?.imageryLayerWaitingList) {
+      context.__$internal.imageryLayerWaitingList =
+        context.__$internal.imageryLayerWaitingList.filter(i => i !== imageryProvider);
     }
 
+    if (!result) return;
+
     const element = new CesiumImageryLayer(result, props);
     context.imageryLayerCollection.add(element, props.index);
     return element;

src/Label/Label.ts

@@ -16,7 +16,7 @@ Only inside [LabelCollection](/components/LabelCollection) component.
 A label object will be attached to the parent LabelCollection.
 */
 
-export type LabelCesiumProps = PickCesiumProps<CesiumLabel, typeof cesiumProps>;
+export type LabelCesiumProps = PickCesiumProps<CesiumLabel, typeof cesiumProps, "position">;
 
 export type LabelOtherProps = EventProps<{
   collection: LabelCollection;

src/Model/Model.ts

@@ -1,6 +1,6 @@
 import { Model as CesiumModel, Primitive, ModelNode, ColorBlendMode, Resource } from "cesium";
 
-import { createCesiumComponent, EventProps, PickCesiumProps, Merge } from "../core";
+import { createCesiumComponent, EventProps, PickCesiumProps, Merge, isPromise } from "../core";
 
 export type Target = Merge<CesiumModel, Parameters<(typeof CesiumModel)["fromGltfAsync"]>[0]>;
 
@@ -77,6 +77,7 @@ const cesiumReadonlyProps = [
   "readyEvent",
   "texturesReadyEvent",
   "gltfCallback",
+  "enablePick",
 ] as const;
 
 export const otherProps = ["onReady", "onError", "url"] as const;
@@ -88,11 +89,7 @@ const Model = createCesiumComponent<CesiumModel, ModelProps>({
     const maybePromiseURL = url;
 
     let resultURL: Exclude<ModelProps["url"], Promise<Resource>>;
-    if (
-      maybePromiseURL &&
-      typeof maybePromiseURL === "object" &&
-      typeof (maybePromiseURL as Promise<unknown>).then === "function"
-    ) {
+    if (isPromise(maybePromiseURL)) {
       resultURL = await maybePromiseURL;
     } else {
       resultURL = maybePromiseURL as typeof resultURL;

src/Scene/Scene.ts

@@ -108,6 +108,9 @@ const cesiumProps = [
   "msaaSamples",
   "splitPosition",
   "debugCommandFilter",
+  "verticalExaggeration",
+  "verticalExaggerationRelativeHeight",
+  "atmosphere",
 ] as const;
 
 export const cesiumEventProps = {

src/Viewer/Viewer.ts

@@ -9,6 +9,7 @@ import {
   PickCesiumProps,
   Merge,
   RootComponentInternalProps,
+  isPromise,
 } from "../core";
 
 /*
@@ -139,11 +140,7 @@ const Viewer = createCesiumComponent<CesiumViewer, ViewerProps, EventManager>({
     if (!wrapper) return;
 
     let resultTerrainProvider: TerrainProvider;
-    if (
-      terrainProvider &&
-      typeof terrainProvider === "object" &&
-      typeof (terrainProvider as Promise<unknown>).then === "function"
-    ) {
+    if (isPromise(terrainProvider)) {
       resultTerrainProvider = await terrainProvider;
     } else {
       resultTerrainProvider = terrainProvider as TerrainProvider;
@@ -196,6 +193,7 @@ const Viewer = createCesiumComponent<CesiumViewer, ViewerProps, EventManager>({
       globe: element.scene.globe,
       __$internal: {
         onUpdate: props?.onUpdate,
+        imageryLayerWaitingList: [],
       },
       [eventManagerContextKey]: state,
     };