@reearth/core 0.0.7-alpha.67 → 0.0.7-alpha.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.67",
+  "version": "0.0.7-alpha.69",
   "author": "Re:Earth contributors <community@reearth.io>",
   "license": "Apache-2.0",
   "description": "A library that abstracts a map engine as one common API.",

package/src/engines/Cesium/core/Imagery.test.ts

@@ -228,17 +228,132 @@ test("ImageryLayers should not re-render when tiles array reference changes but
   mockAdd.mockClear();
   mockRemove.mockClear();
 
-  // Re-render with DIFFERENT content (changed opacity)
-  const differentTiles: Tile[] = [
-    { id: "1", type: "open_street_map", opacity: 0.5 }, // opacity changed
+  // Re-render with ONLY opacity changed
+  const opacityChangedTiles: Tile[] = [
+    { id: "1", type: "open_street_map", opacity: 0.5 }, // only opacity changed
   ];
 
-  rerender({ tiles: differentTiles });
+  rerender({ tiles: opacityChangedTiles });
 
   // Wait for effects to run
   await new Promise(resolve => setTimeout(resolve, 0));
 
-  // Effect SHOULD run - old layers removed and new ones added
+  // With our optimization, when ONLY opacity changes, the layer is NOT recreated
+  // The layer.alpha property is updated directly without removing/adding the layer
+  expect(mockRemove).not.toHaveBeenCalled();
+  expect(mockAdd).not.toHaveBeenCalled();
+
+  // Clear mocks
+  mockAdd.mockClear();
+  mockRemove.mockClear();
+
+  // Re-render with DIFFERENT tile type (requires layer recreation)
+  const differentTypeTiles: Tile[] = [
+    { id: "1", type: "stamen_watercolor", opacity: 0.5 }, // type changed
+  ];
+
+  rerender({ tiles: differentTypeTiles });
+
+  // Wait for effects to run
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  // When provider changes (type, url, etc.), layer IS recreated
+  expect(mockRemove).toHaveBeenCalled();
+  expect(mockAdd).toHaveBeenCalled();
+});
+
+test("ImageryLayers should optimize opacity changes without recreating layers", async () => {
+  const tiles: Tile[] = [{ id: "1", type: "open_street_map", opacity: 1.0 }];
+
+  const { rerender } = renderHook(
+    ({ tiles }: { tiles: Tile[] }) => {
+      return ImageryLayers({
+        tiles,
+        cesiumIonAccessToken: undefined,
+        customProvider: undefined,
+        onTilesChange: undefined,
+      });
+    },
+    {
+      initialProps: { tiles },
+    },
+  );
+
+  // Wait for initial render
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  // Clear initial render calls
+  mockAdd.mockClear();
+  mockRemove.mockClear();
+
+  // Change opacity multiple times
+  for (const opacity of [0.8, 0.6, 0.4, 0.2]) {
+    rerender({ tiles: [{ id: "1", type: "open_street_map", opacity }] });
+    await new Promise(resolve => setTimeout(resolve, 0));
+  }
+
+  // After multiple opacity changes, layers should NEVER be removed/added
+  // The optimization updates layer.alpha directly
+  expect(mockRemove).not.toHaveBeenCalled();
+  expect(mockAdd).not.toHaveBeenCalled();
+});
+
+test("ImageryLayers should recreate layer when customProvider changes even if tile properties are same", async () => {
+  // Use a custom provider that we can change
+  const tiles: Tile[] = [{ id: "1", type: "my_custom", opacity: 0.8 }];
+
+  const customProvider1: CustomProviderConfig = {
+    imagery: {
+      providers: [
+        {
+          id: "my_custom",
+          url: "https://tiles1.example.com/{z}/{x}/{y}.png",
+          credit: "© Example 1",
+        },
+      ],
+    },
+  };
+
+  const customProvider2: CustomProviderConfig = {
+    imagery: {
+      providers: [
+        {
+          id: "my_custom",
+          url: "https://tiles2.example.com/{z}/{x}/{y}.png", // Different URL
+          credit: "© Example 2",
+        },
+      ],
+    },
+  };
+
+  const { rerender } = renderHook(
+    ({ tiles, customProvider }: { tiles: Tile[]; customProvider?: CustomProviderConfig }) => {
+      return ImageryLayers({
+        tiles,
+        cesiumIonAccessToken: undefined,
+        customProvider,
+        onTilesChange: undefined,
+      });
+    },
+    {
+      initialProps: { tiles, customProvider: customProvider1 },
+    },
+  );
+
+  // Wait for initial render
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  // Clear initial render calls
+  mockAdd.mockClear();
+  mockRemove.mockClear();
+
+  // Change the customProvider (this creates a new provider with different URL)
+  // Tile properties stay the same
+  rerender({ tiles, customProvider: customProvider2 });
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  // Layer SHOULD be recreated because the provider changed
+  // (even though tile properties didn't change)
   expect(mockRemove).toHaveBeenCalled();
   expect(mockAdd).toHaveBeenCalled();
 });

package/src/engines/Cesium/core/Imagery.tsx

@@ -75,11 +75,34 @@ export default function ImageryLayers({
     presets: tilePresets,
   });
 
+  // Store layers keyed by tile ID to allow incremental updates
+  const layersRef = useRef<
+    Map<
+      string,
+      {
+        layer: CesiumImageryLayer;
+        tile: Tile;
+        provider: Promise<ImageryProvider> | ImageryProvider;
+      }
+    >
+  >(new Map());
+
   useEffect(() => {
     if (!imageryLayerCollection || !scene) return;
 
     let cancelled = false;
-    const addedLayers: CesiumImageryLayer[] = [];
+    const currentTileIds = new Set(stableTiles?.map(t => t.id) || []);
+
+    // Remove layers for tiles that no longer exist
+    layersRef.current.forEach(({ layer }, id) => {
+      if (!currentTileIds.has(id)) {
+        if (imageryLayerCollection.contains(layer)) {
+          imageryLayerCollection.remove(layer);
+        }
+        layersRef.current.delete(id);
+      }
+    });
+
     // Track layers by their intended index to maintain order with async loading
     const layersByIndex: (CesiumImageryLayer | null)[] = new Array(stableTiles?.length || 0).fill(
       null,
@@ -108,10 +131,50 @@ export default function ImageryLayers({
       scene.requestRender();
     };
 
-    stableTiles?.forEach(({ id, zoomLevel, opacity, heatmap }, i) => {
+    stableTiles?.forEach((tile, i) => {
+      const { id, zoomLevel, opacity, heatmap } = tile;
+      const existing = layersRef.current.get(id);
       const providerOrPromise = providers[id]?.[3];
+
       if (!providerOrPromise) return;
 
+      // Check if we can reuse the existing layer with just an opacity update
+      if (existing) {
+        const prevTile = existing.tile;
+        const prevProvider = existing.provider;
+        // Must check provider reference - if provider changed (e.g. cesiumIonAccessToken updated),
+        // the layer needs to be recreated even if tile properties are the same
+        const canReuseLayer =
+          prevProvider === providerOrPromise &&
+          prevTile.type === tile.type &&
+          prevTile.url === tile.url &&
+          prevTile.cesiumIonAssetId === tile.cesiumIonAssetId &&
+          prevTile.zoomLevel?.[0] === zoomLevel?.[0] &&
+          prevTile.zoomLevel?.[1] === zoomLevel?.[1] &&
+          prevTile.heatmap === heatmap;
+
+        if (canReuseLayer) {
+          // Only opacity might have changed - update it directly if needed
+          const nextAlpha = opacity ?? 1;
+          if (existing.layer.alpha !== nextAlpha) {
+            existing.layer.alpha = nextAlpha;
+            scene.requestRender();
+          }
+          // Update stored tile and provider for next comparison
+          existing.tile = tile;
+          existing.provider = providerOrPromise;
+          layersByIndex[i] = existing.layer;
+          reorderLayers();
+          return;
+        }
+
+        // Need to recreate the layer - remove the old one
+        if (imageryLayerCollection.contains(existing.layer)) {
+          imageryLayerCollection.remove(existing.layer);
+        }
+        layersRef.current.delete(id);
+      }
+
       const doAdd = (provider: ImageryProvider) => {
         if (!provider || cancelled || scene.isDestroyed()) return;
         const layer = new CesiumImageryLayer(provider, {
@@ -127,7 +190,8 @@ export default function ImageryLayers({
         // Always append to avoid index out of bounds
         imageryLayerCollection.add(layer);
         layersByIndex[i] = layer;
-        addedLayers.push(layer);
+        // Store the provider reference to detect when provider changes (e.g. token update)
+        layersRef.current.set(id, { layer, tile, provider: providerOrPromise });
 
         // Reorder all layers after each addition
         reorderLayers();
@@ -147,15 +211,24 @@ export default function ImageryLayers({
 
     return () => {
       cancelled = true;
-      for (const layer of addedLayers) {
-        if (!scene.isDestroyed() && imageryLayerCollection.contains(layer)) {
+      // Don't remove layers on cleanup - they'll be managed by the next render
+      // This prevents flickering when tiles change
+    };
+  }, [providers, stableTiles, imageryLayerCollection, scene, onTilesChange]);
+
+  // Cleanup all layers on unmount
+  useEffect(() => {
+    const layers = layersRef.current;
+    return () => {
+      if (!imageryLayerCollection || !scene || scene.isDestroyed()) return;
+      layers.forEach(({ layer }) => {
+        if (imageryLayerCollection.contains(layer)) {
           imageryLayerCollection.remove(layer);
         }
-      }
+      });
+      layers.clear();
     };
-    // Note: Using `stableTiles` to prevent re-renders when tiles reference changes but content is identical.
-    // This also stabilizes `providers` since it depends on tiles in useImageryProviders.
-  }, [providers, stableTiles, imageryLayerCollection, scene, onTilesChange]);
+  }, [imageryLayerCollection, scene]);
 
   return null;
 }

package/src/engines/Cesium/index.tsx

@@ -253,7 +253,9 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
         useWebVR={!!property?.scene?.vr || undefined} // NOTE: useWebVR={false} will crash Cesium
         debugShowFramesPerSecond={!!property?.debug?.showFramesPerSecond}
         verticalExaggerationRelativeHeight={property?.scene?.verticalExaggerationRelativeHeight}
-        verticalExaggeration={property?.scene?.verticalExaggeration}
+        verticalExaggeration={
+          property?.terrain?.enabled ? property?.scene?.verticalExaggeration : 1
+        }
       />
       <SkyBox show={property?.sky?.skyBox?.show ?? true} />
       <Fog enabled={property?.sky?.fog?.enabled ?? true} density={property?.sky?.fog?.density} />