@reearth/core 0.0.7-alpha.5 → 0.0.7-alpha.50

package/src/engines/Cesium/hooks/useEngineRef.ts

@@ -32,8 +32,10 @@ import {
   cartesianToLatLngHeight,
   getExtrudedHeight,
   getOverriddenScreenSpaceCameraOptions,
+  getCredits,
 } from "../common";
 import { attachTag, getTag } from "../Feature";
+import { getGeometryFromEntity } from "../helpers/getGeometryFromEntity";
 import { PickedFeature, pickManyFromViewportAsFeature } from "../pickMany";
 import { createGeometry } from "../Sketch/createGeometry";
 import { CursorType } from "../types";
@@ -48,9 +50,9 @@ import {
 
 export default function useEngineRef(
   ref: Ref<EngineRef>,
-  cesium: RefObject<CesiumComponentRef<Cesium.Viewer>>,
+  cesium: RefObject<CesiumComponentRef<Cesium.Viewer> | null>,
 ): EngineRef {
-  const cancelCameraFlight = useRef<() => void>();
+  const cancelCameraFlight = useRef<() => void>(undefined);
   const mouseEventCallbacks = useRef<MouseEventCallbacks>({
     click: [],
     doubleClick: [],
@@ -259,15 +261,31 @@ export default function useEngineRef(
         }
         return;
       },
-      getExtrudedHeight: (position, windowPosition) => {
+      getExtrudedHeight: (position, windowPosition, allowNegative) => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return;
         return getExtrudedHeight(
           viewer.scene,
           new Cesium.Cartesian3(position[0], position[1], position[2]),
           new Cesium.Cartesian2(windowPosition[0], windowPosition[1]),
+          allowNegative,
         );
       },
+      getExtrudedPoint: (position, extrudedHeight) => {
+        if (!position || !extrudedHeight) return;
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        const point = new Cesium.Cartesian3(position[0], position[1], position[2]);
+        const cartesianScratch = new Cesium.Cartesian3();
+        const normal = viewer.scene?.globe.ellipsoid.geodeticSurfaceNormal(point, cartesianScratch);
+        if (!normal) return;
+        const extrudedPoint = Cesium.Cartesian3.add(
+          point,
+          Cesium.Cartesian3.multiplyByScalar(normal, extrudedHeight, cartesianScratch),
+          cartesianScratch,
+        );
+        return [extrudedPoint.x, extrudedPoint.y, extrudedPoint.z];
+      },
       getSurfaceDistance: (point1, point2) => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return;
@@ -831,6 +849,7 @@ export default function useEngineRef(
             tag.computedFeature ?? {
               type: "computedFeature",
               id: tag.featureId,
+              geometry: getGeometryFromEntity(viewer.clock.currentTime, entity),
               properties: convertEntityProperties(viewer.clock.currentTime, entity),
               metaData: {
                 description: convertEntityDescription(viewer.clock.currentTime, entity),
@@ -938,6 +957,32 @@ export default function useEngineRef(
         tickEventCallback.current = tickEventCallback.current.filter(c => c !== cb) || [];
       },
       tickEventCallback,
+      calcRectangleControlPoint: (p1: Position3d, p2: Position3d, p3: Position3d) => {
+        const pp1 = new Cesium.Cartesian3(...p1);
+        const pp2 = new Cesium.Cartesian3(...p2);
+        const pp3 = new Cesium.Cartesian3(...p3);
+        const cartesianScratch1 = new Cesium.Cartesian3();
+        const cartesianScratch2 = new Cesium.Cartesian3();
+        const projection = Cesium.Cartesian3.projectVector(
+          Cesium.Cartesian3.subtract(pp3, pp1, cartesianScratch1),
+          Cesium.Cartesian3.subtract(pp2, pp1, cartesianScratch2),
+          cartesianScratch1,
+        );
+        const offset = Cesium.Cartesian3.subtract(
+          pp3,
+          Cesium.Cartesian3.add(pp1, projection, cartesianScratch1),
+          cartesianScratch2,
+        );
+        const pp4 = Cesium.Cartesian3.midpoint(pp1, pp2, cartesianScratch1);
+        const pp5 = Cesium.Cartesian3.add(pp4, offset, cartesianScratch2);
+        const p5 = [pp5.x, pp5.y, pp5.z] as Position3d;
+        return [p1, p2, p5];
+      },
+      getCredits: () => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        return getCredits(viewer);
+      },
     };
   }, [cesium]);
 

package/src/engines/Cesium/hooks/useExplicitRender.ts

@@ -12,7 +12,7 @@ export default ({
   shouldRender,
   property,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
   isLayerDragging?: boolean;
   shouldRender?: boolean;
@@ -28,7 +28,7 @@ export default ({
     }
   }, [cesium, requestingRenderMode]);
 
-  const explicitRenderRef = useRef<() => void>();
+  const explicitRenderRef = useRef<() => void>(undefined);
 
   useEffect(() => {
     explicitRenderRef.current = explicitRender;

package/src/engines/Cesium/hooks/useInstance.ts

@@ -70,7 +70,7 @@ export function useInstance<T, Keys extends unknown[], Owner>(
   descriptor: InstanceDescriptor<T, () => DisallowPromise<T>, Keys, Owner>,
 ): T {
   const [state, setState] = useState<T>();
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
   if (ref.current == null) {
     ref.current = descriptor.create();
   }

package/src/engines/Cesium/hooks/useLayerDragDrop.ts

@@ -14,7 +14,7 @@ export default ({
   onLayerDrag,
   onLayerDrop,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   isLayerDraggable?: boolean;
   onLayerDrag?: (layerId: string, featureId: string | undefined, position: LatLng) => void;
   onLayerDrop?: (
@@ -54,7 +54,7 @@ export default ({
     [cesium, onLayerDrop],
   );
 
-  const cesiumDnD = useRef<CesiumDnD>();
+  const cesiumDnD = useRef<CesiumDnD>(undefined);
   useEffect(() => {
     const viewer = cesium.current?.cesiumElement;
     if (!viewer || viewer.isDestroyed()) return;

package/src/engines/Cesium/hooks/useLayerSelectWithRect.ts

@@ -20,7 +20,7 @@ export const useLayerSelectWithRect = ({
   onLayerSelectWithRectMove,
   onLayerSelectWithRectEnd,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   engineAPI: EngineRef;
   featureFlags: number;
   onLayerSelectWithRectStart?: (e: LayerSelectWithRectStart) => void;

package/src/engines/Cesium/hooks/useOverrideGlobeShader/useOverrideGlobeShader.ts

@@ -63,6 +63,12 @@ function makeGlobeShadersDirty(globe: Globe): void {
   // reset surface shader source to the initial state (assuming that we never
   // use custom material on globe).
   // ref: https://github.com/CesiumGS/cesium/blob/1.106/packages/engine/Source/Scene/Globe.js#L562-L572
+
+  // Safety check: ensure globe's internal properties exist before manipulation
+  if (!globe || globe.isDestroyed() || !(globe as any)._surface) {
+    return;
+  }
+
   const material = globe.material;
   if (material == null) {
     globe.material = Material.fromType("Color");
@@ -73,6 +79,18 @@ function makeGlobeShadersDirty(globe: Globe): void {
   }
 }
 
+function withUniforms(globe: PrivateCesiumGlobe, add?: Record<string, () => any>) {
+  if (!globe._surface?._tileProvider) return;
+  const mm = (globe._surface._tileProvider as any)?.materialUniformMap ?? {};
+  (globe._surface._tileProvider as any).materialUniformMap = { ...mm, ...(add ?? {}) };
+}
+
+function removeUniforms(globe: PrivateCesiumGlobe, keys: string[]) {
+  const tp = globe._surface?._tileProvider as any;
+  if (!tp?.materialUniformMap) return;
+  for (const k of keys) delete tp.materialUniformMap[k];
+}
+
 const useIBL = ({
   sphericalHarmonicCoefficients,
   globeImageBasedLighting,
@@ -124,7 +142,7 @@ const useTerrainHeatmap = ({
   cesium,
   terrain,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   terrain: TerrainProperty | undefined;
 }) => {
   const {
@@ -143,7 +161,7 @@ const useTerrainHeatmap = ({
         [
           "#ifdef APPLY_COLOR_TO_ALPHA",
           "vec3 colorDiff = abs(color.rgb - colorToAlpha.rgb);",
-          "colorDiff.r = max(max(colorDiff.r, colorDiff.g), colorDiff.b);",
+          "colorDiff.r = czm_maximumComponent(colorDiff);",
           "alpha = czm_branchFreeTernary(colorDiff.r < colorToAlpha.a, 0.0, alpha);",
           "#endif",
         ],
@@ -184,6 +202,18 @@ const useTerrainHeatmap = ({
   return { isCustomHeatmapEnabled, shaderForTerrainHeatmap };
 };
 
+async function waitTerrainReady(scene: any) {
+  const t = scene.terrain;
+  if (t?.ready) return;
+  await new Promise<void>(resolve => {
+    if (!t) return resolve();
+    const off = t.readyEvent.addEventListener(() => {
+      off();
+      resolve();
+    });
+  });
+}
+
 export const useOverrideGlobeShader = ({
   cesium,
   sphericalHarmonicCoefficients,
@@ -193,7 +223,7 @@ export const useOverrideGlobeShader = ({
   enableLighting,
   terrain,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   sphericalHarmonicCoefficients?: Cartesian3[];
   globeShadowDarkness?: number;
   globeImageBasedLighting?: boolean;
@@ -201,6 +231,8 @@ export const useOverrideGlobeShader = ({
   enableLighting?: boolean;
   terrain: TerrainProperty | undefined;
 }) => {
+  const applyingRef = useRef(false);
+
   const { uniformMapForIBL, isIBLEnabled, shaderForIBL } = useIBL({
     sphericalHarmonicCoefficients,
     globeImageBasedLighting,
@@ -223,75 +255,85 @@ export const useOverrideGlobeShader = ({
 
   const needUpdateGlobeRef = useRef(false);
 
-  const handleGlobeShader = useCallback(() => {
+  const handleGlobeShader = useCallback(async () => {
     // NOTE: Support the spherical harmonic coefficient only when the terrain normal is enabled.
     // Because it's difficult to control the shader for the entire globe.
     // ref: https://github.com/CesiumGS/cesium/blob/af4e2bebbef25259f049b05822adf2958fce11ff/packages/engine/Source/Shaders/GlobeFS.glsl#L408
     if (!cesium.current?.cesiumElement || !needUpdateGlobeRef.current) return;
 
-    const globe = cesium.current.cesiumElement.scene.globe as PrivateCesiumGlobe;
+    if (applyingRef.current) return;
+    applyingRef.current = true;
 
-    const surfaceShaderSet = globe._surfaceShaderSet;
-    if (!surfaceShaderSet) {
-      if (import.meta.env.DEV) {
-        throw new Error("`globe._surfaceShaderSet` could not found");
-      }
-      return;
-    }
+    try {
+      const { scene } = cesium.current.cesiumElement;
+      await waitTerrainReady(scene);
 
-    const baseFragmentShaderSource = surfaceShaderSet.baseFragmentShaderSource;
+      const globe = cesium.current.cesiumElement.scene.globe as PrivateCesiumGlobe;
 
-    const GlobeFS = baseFragmentShaderSource?.sources[baseFragmentShaderSource.sources.length - 1];
+      // Reset shaders first so we patch the freshest base
+      makeGlobeShadersDirty(globe);
 
-    if (!GlobeFS || !baseFragmentShaderSource) {
-      if (import.meta.env.DEV) {
-        throw new Error("GlobeFS could not find.");
+      const surfaceShaderSet = globe._surfaceShaderSet;
+      if (!surfaceShaderSet) {
+        if (import.meta.env.DEV) {
+          throw new Error("`globe._surfaceShaderSet` could not found");
+        }
+        return;
       }
-      return;
-    }
 
-    const matchers: StringMatcher[] = [];
-    const shaders: string[] = [];
-    if (isIBLEnabled && globe.enableLighting && globe.terrainProvider.hasVertexNormals) {
-      matchers.push(shaderForIBL);
-      shaders.push(IBLFS);
-    }
+      const baseFragmentShaderSource = surfaceShaderSet.baseFragmentShaderSource;
+      const GlobeFS =
+        baseFragmentShaderSource?.sources[baseFragmentShaderSource.sources.length - 1];
 
-    if (isCustomHeatmapEnabled) {
-      // This will log the variables needed in the shader below.
-      // we need the minHeight, maxHeight and logarithmic
-      matchers.push(shaderForTerrainHeatmap);
-      shaders.push(HeatmapForTerrainFS);
-    }
+      if (!GlobeFS || !baseFragmentShaderSource) {
+        if (import.meta.env.DEV) {
+          throw new Error("GlobeFS could not find.");
+        }
+        return;
+      }
 
-    // This means there is no overridden shader.
-    if (!matchers.length) return;
+      const matchers: StringMatcher[] = [];
+      const shaders: string[] = [];
+      const terrainHasNormals = !!(globe.terrainProvider as any)?.hasVertexNormals;
 
-    needUpdateGlobeRef.current = false;
+      if (isIBLEnabled && globe.enableLighting && terrainHasNormals) {
+        matchers.push(shaderForIBL);
+        shaders.push(IBLFS);
+      }
 
-    if (!globe?._surface?._tileProvider) {
-      if (import.meta.env.DEV) {
-        throw new Error("`globe._surface._tileProvider.materialUniformMap` could not found");
+      if (isCustomHeatmapEnabled && terrainHasNormals) {
+        // This will log the variables needed in the shader below.
+        // we need the minHeight, maxHeight and logarithmic
+        matchers.push(shaderForTerrainHeatmap);
+        shaders.push(HeatmapForTerrainFS);
       }
-      return;
-    }
 
-    makeGlobeShadersDirty(globe);
+      // This means there is no overridden shader.
+      if (!matchers.length) return;
 
-    const replacedGlobeFS = defaultMatcher.concat(...matchers).execute(GlobeFS);
+      needUpdateGlobeRef.current = false;
 
-    globe._surface._tileProvider.materialUniformMap = {
-      ...(globe._surface._tileProvider.materialUniformMap ?? {}),
-      ...uniformMapForIBL,
-    };
+      if (!globe?._surface?._tileProvider) {
+        if (import.meta.env.DEV) {
+          throw new Error("`globe._surface._tileProvider.materialUniformMap` could not found");
+        }
+        return;
+      }
 
-    surfaceShaderSet.baseFragmentShaderSource = new ShaderSource({
-      sources: [
-        ...baseFragmentShaderSource.sources.slice(0, -1),
-        GlobeFSDefinitions + replacedGlobeFS + shaders.join(""),
-      ],
-      defines: baseFragmentShaderSource.defines,
-    });
+      const replacedGlobeFS = defaultMatcher.concat(...matchers).execute(GlobeFS);
+
+      withUniforms(globe, isIBLEnabled ? uniformMapForIBL : undefined);
+
+      surfaceShaderSet.baseFragmentShaderSource = new ShaderSource({
+        sources: [
+          ...baseFragmentShaderSource.sources.slice(0, -1),
+          GlobeFSDefinitions + replacedGlobeFS + shaders.join(""),
+        ],
+        defines: baseFragmentShaderSource.defines,
+      });
+    } finally {
+      applyingRef.current = false;
+    }
   }, [
     cesium,
     isCustomHeatmapEnabled,
@@ -317,6 +359,10 @@ export const useOverrideGlobeShader = ({
 
     return () => {
       if (!globe.isDestroyed()) {
+        removeUniforms(globe, [
+          "u_reearth_sphericalHarmonicCoefficients",
+          "u_reearth_globeImageBasedLighting",
+        ]);
         // Reset customized shader to default
         makeGlobeShadersDirty(globe);
       }

package/src/engines/Cesium/hooks/useViewerProperty.ts

@@ -9,7 +9,7 @@ export default ({
   cesium,
   property,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   property?: ViewerProperty;
 }) => {
   const sceneLight = useMemo(() => {

package/src/engines/Cesium/hooks.ts

@@ -27,6 +27,7 @@ import type {
 import { e2eAccessToken, setE2ECesiumViewer } from "../../e2eConfig";
 import { ComputedFeature, DataType, SelectedFeatureInfo, LatLng, Camera } from "../../mantle";
 import {
+  Credits,
   LayerLoadEvent,
   LayerSelectWithRectEnd,
   LayerSelectWithRectMove,
@@ -37,7 +38,7 @@ import {
 import { TimelineManagerRef } from "../../Map/useTimelineManager";
 import { FEATURE_FLAGS } from "../../Visualizer/featureFlags";
 
-import { isSelectable } from "./common";
+import { getCredits, isSelectable } from "./common";
 import { getTag, type Context as FeatureContext } from "./Feature";
 import { arrayToCartecian3 } from "./helpers/sphericalHaromic";
 import useCamera from "./hooks/useCamera";
@@ -89,6 +90,7 @@ export default ({
   onLayerLoad,
   onCameraChange,
   onMount,
+  onCreditsUpdate,
 }: {
   ref: React.ForwardedRef<EngineRef>;
   property?: ViewerProperty;
@@ -97,7 +99,7 @@ export default ({
     layerId?: string;
     featureId?: string;
   };
-  layersRef?: RefObject<LayersRef>;
+  layersRef?: RefObject<LayersRef | null>;
   selectionReason?: LayerSelectionReason;
   meta?: Record<string, unknown>;
   featureFlags: number;
@@ -128,6 +130,7 @@ export default ({
   onLayerLoad?: (e: LayerLoadEvent) => void;
   onCameraChange?: (camera: Camera) => void;
   onMount?: () => void;
+  onCreditsUpdate?: (credits: Credits) => void;
 }) => {
   const cesium = useRef<CesiumComponentRef<CesiumViewer>>(null);
 
@@ -237,8 +240,8 @@ export default ({
     | Primitive
     | GroundPrimitive
     | ImageryLayer
-  >();
-  const prevSelectedImageryFeatureId = useRef<string | undefined>();
+  >(undefined);
+  const prevSelectedImageryFeatureId = useRef<string | undefined>(undefined);
 
   // manage layer selection
   useEffect(() => {
@@ -557,8 +560,11 @@ export default ({
         if (pickRay) {
           const l = await scene.imageryLayers.pickImageryLayerFeatures(pickRay, scene);
 
-          // NOTE: For now we only send the first selected feature to onLayerSelect instead of sending all of them: @pyshx
-          const f = l?.[0];
+          // Find the topmost overlaid feature.
+          const f = l?.findLast(f => {
+            const appearanceType = f?.data?.appearanceType;
+            return appearanceType && f?.data?.feature?.[appearanceType]?.show !== false;
+          });
 
           const appearanceType = f?.data?.appearanceType;
 
@@ -648,6 +654,22 @@ export default ({
     viewer.scene.requestRender();
   }, []);
 
+  const onCreditsUpdateRef = useRef(onCreditsUpdate);
+  onCreditsUpdateRef.current = onCreditsUpdate;
+  const updateCredits = useCallback(() => {
+    if (!onCreditsUpdateRef.current) return;
+    // currently we don't have a proper way to get the credits update event
+    // wait for 3 seconds to get latest credits
+    // some internal property is been used here.
+    setTimeout(() => {
+      if (!onCreditsUpdateRef.current) return;
+      const viewer = cesium.current?.cesiumElement;
+      if (!viewer || viewer.isDestroyed()) return;
+      const credits = getCredits(viewer);
+      onCreditsUpdateRef.current(credits);
+    }, 3000);
+  }, []);
+
   const context = useMemo<FeatureContext>(
     () => ({
       selectionReason,
@@ -662,8 +684,17 @@ export default ({
       toXYZ: engineAPI.toXYZ,
       toWindowPosition: engineAPI.toWindowPosition,
       isPositionVisible: engineAPI.isPositionVisible,
+      updateCredits,
     }),
-    [selectionReason, engineAPI, onLayerEdit, onLayerVisibility, onLayerLoad, timelineManagerRef],
+    [
+      selectionReason,
+      engineAPI,
+      onLayerEdit,
+      onLayerVisibility,
+      onLayerLoad,
+      timelineManagerRef,
+      updateCredits,
+    ],
   );
 
   useEffect(() => {
@@ -728,6 +759,14 @@ export default ({
     unmountCamera?.();
   }, [unmountCamera]);
 
+  const handleTilesChange = useCallback(() => {
+    updateCredits();
+  }, [updateCredits]);
+
+  const handleTerrainProviderChange = useCallback(() => {
+    updateCredits();
+  }, [updateCredits]);
+
   return {
     cesium,
     cesiumIonAccessToken,
@@ -747,6 +786,8 @@ export default ({
     handleClick,
     handleMount,
     handleUnmount,
+    handleTilesChange,
+    handleTerrainProviderChange,
   };
 };
 
@@ -755,9 +796,10 @@ function tileProperties(
 ): { key: string; value: any }[] {
   return t
     .getPropertyIds()
-    .reduce<
-      { key: string; value: any }[]
-    >((a, b) => [...a, { key: b, value: t.getProperty(b) }], []);
+    .reduce<{ key: string; value: any }[]>(
+      (a, b) => [...a, { key: b, value: t.getProperty(b) }],
+      [],
+    );
 }
 
 function getLayerId(target: RootEventTarget): string | undefined {

package/src/engines/Cesium/index.tsx

@@ -47,6 +47,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     shouldRender,
     layerSelectionReason,
     meta,
+    displayCredits,
     layersRef,
     featureFlags,
     requestingRenderMode,
@@ -63,6 +64,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     onMount,
     onLayerVisibility,
     onLayerLoad,
+    onCreditsUpdate,
   },
   ref,
 ) => {
@@ -85,6 +87,8 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     handleClick,
     handleMount,
     handleUnmount,
+    handleTilesChange,
+    handleTerrainProviderChange,
   } = useHooks({
     ref,
     property,
@@ -112,6 +116,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     onLayerLoad,
     onCameraChange,
     onMount,
+    onCreditsUpdate,
   });
 
   return (
@@ -133,7 +138,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
       navigationHelpButton={false}
       projectionPicker={false}
       sceneModePicker={false}
-      creditContainer={creditContainer}
+      creditContainer={displayCredits ? undefined : creditContainer}
       style={{
         width: small ? "300px" : "auto",
         height: small ? "300px" : "100%",
@@ -158,7 +163,11 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
       onWheel={mouseEventHandles.wheel}>
       <Event onMount={handleMount} onUnmount={handleUnmount} />
       <Clock timelineManagerRef={timelineManagerRef} />
-      <ImageryLayers tiles={property?.tiles} cesiumIonAccessToken={cesiumIonAccessToken} />
+      <ImageryLayers
+        tiles={property?.tiles}
+        cesiumIonAccessToken={cesiumIonAccessToken}
+        onTilesChange={handleTilesChange}
+      />
       <LabelImageryLayers tileLabels={property?.tileLabels} />
       <Indicator property={property} timelineManagerRef={timelineManagerRef} />
       <ScreenSpaceEventHandler useDefault>
@@ -252,7 +261,11 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
         saturationShift={property?.sky?.skyAtmosphere?.saturationShift}
         brightnessShift={property?.sky?.skyAtmosphere?.brightnessShift}
       />
-      <Globe property={property} cesiumIonAccessToken={cesiumIonAccessToken} />
+      <Globe
+        property={property}
+        cesiumIonAccessToken={cesiumIonAccessToken}
+        onTerrainProviderChange={handleTerrainProviderChange}
+      />
       <featureContext.Provider value={context}>{ready ? children : null}</featureContext.Provider>
       <AmbientOcclusion
         {...AMBIENT_OCCLUSION_QUALITY[property?.render?.ambientOcclusion?.quality || "low"]}

package/src/engines/Cesium/types.ts

@@ -21,4 +21,4 @@ export type PrivateCesiumGlobe = Globe & {
   };
 };
 
-export type CursorType = "default" | "auto" | "help" | "pointer" | "grab" | "crosshair";
+export type CursorType = "default" | "auto" | "help" | "pointer" | "grab" | "crosshair" | "wait";

package/src/mantle/atoms/compute.ts

@@ -51,8 +51,9 @@ export function computeAtom(cache?: typeof globalDataFeaturesCache) {
   );
 
   const computedResult = atom<EvalResult | undefined>(undefined);
-  const finalFeatures = atom(get =>
-    get(computedResult)?.features?.map((f): ComputedFeature => merge({ ...f }, get(overrides))),
+  const finalFeatures = atom(
+    get =>
+      get(computedResult)?.features?.map((f): ComputedFeature => merge({ ...f }, get(overrides))),
   );
   const layerStatus = atom<ComputedLayerStatus>("fetching");
   const dataAtoms = dataAtom(cache);
@@ -109,7 +110,11 @@ export function computeAtom(cache?: typeof globalDataFeaturesCache) {
         return true;
       }
 
-      const curFeatures = processGeoJSON(currentLayer.data.value);
+      const curFeatures = processGeoJSON(
+        currentLayer.data.value,
+        undefined,
+        currentLayer.data.idProperty,
+      );
       if (curFeatures.length === prevFeatures?.length) {
         return !curFeatures.every((cur, i) => {
           const prev = prevFeatures[i];