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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.65",
+  "version": "0.0.7-alpha.67",
   "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/Feature/Tileset/hooks.ts

@@ -23,7 +23,15 @@ import {
   createGooglePhotorealistic3DTileset,
 } from "cesium";
 import { pick } from "lodash-es";
-import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { CesiumComponentRef, useCesium } from "resium";
 
 import type {
@@ -490,12 +498,53 @@ export const useHooks = ({
 
   const [style, setStyle] = useState<Cesium3DTileStyle>();
   const { url, type, idProperty, googleMapApiKey, provider } = useData(layer);
+  const cesiumIonAccessToken =
+    typeof meta?.cesiumIonAccessToken === "string" ? meta.cesiumIonAccessToken : undefined;
   const shouldUseFeatureIndex = !disableIndexingFeature && !!idProperty;
 
   const [isTilesetReady, setIsTilesetReady] = useState(false);
   const [isTilesetCompReady, setIsTilesetCompReady] = useState(false);
   const [isTilesetRefReady, setIsTilesetRefReady] = useState(false);
 
+  const reearthGooglePhotorealisticUrl = useMemo(
+    () =>
+      customProvider?.layers?.providers?.find(
+        p => p.id === "reearth_google_photorealistic_3d_tiles",
+      )?.url,
+    [customProvider],
+  );
+
+  const tilesetKey = useMemo(
+    () =>
+      generateIDWithMD5(
+        JSON.stringify({
+          type,
+          url,
+          tileset,
+          provider,
+          googleMapApiKey,
+          reearthGooglePhotorealisticUrl,
+          cesiumIonAccessToken:
+            type === "osm-buildings" ||
+            (type === "google-photorealistic" && (provider === "cesium-ion" || !googleMapApiKey))
+              ? cesiumIonAccessToken
+              : undefined,
+        }),
+      ),
+    [
+      type,
+      url,
+      tileset,
+      provider,
+      googleMapApiKey,
+      reearthGooglePhotorealisticUrl,
+      cesiumIonAccessToken,
+    ],
+  );
+  const currentTilesetKeyRef = useRef(tilesetKey);
+  currentTilesetKeyRef.current = tilesetKey;
+  const tilesetRefKeyRef = useRef<string | undefined>(undefined);
+
   const prevPlanes = useRef(_planes);
   const planes = useMemo(() => {
     if (
@@ -563,20 +612,25 @@ export const useHooks = ({
 
   const ref = useCallback(
     (tileset: CesiumComponentRef<Cesium3DTilesetType> | null) => {
-      if (tileset?.cesiumElement) {
-        attachTag(tileset.cesiumElement, {
+      const cesiumElement = tileset?.cesiumElement;
+      if (tilesetKey !== currentTilesetKeyRef.current) {
+        return;
+      }
+      if (cesiumElement) {
+        attachTag(cesiumElement, {
           layerId: layer?.id || id,
           featureIndex: shouldUseFeatureIndex ? featureIndex : undefined,
           appearanceType: "3dtiles",
         });
       }
-      if (layer?.id && tileset?.cesiumElement) {
-        (tileset?.cesiumElement as any)[layerIdField] = layer.id;
+      if (layer?.id && cesiumElement) {
+        (cesiumElement as any)[layerIdField] = layer.id;
       }
-      tilesetRef.current = tileset?.cesiumElement;
-      setIsTilesetRefReady(!!tileset?.cesiumElement);
+      tilesetRef.current = cesiumElement;
+      tilesetRefKeyRef.current = cesiumElement ? tilesetKey : undefined;
+      setIsTilesetRefReady(!!cesiumElement);
     },
-    [id, layer?.id, featureIndex, shouldUseFeatureIndex],
+    [id, layer?.id, featureIndex, shouldUseFeatureIndex, tilesetKey],
   );
 
   const selectedFeatureIdsRef = useRef<string[]>([]);
@@ -584,6 +638,20 @@ export const useHooks = ({
   selectedFeatureColorRef.current = selectedFeatureColor;
   const [selectedFeatureColorMap] = useState(() => new Map<string, Color>());
 
+  // The Cesium3DTileset child remounts when tilesetKey changes, while this hook stays mounted.
+  useLayoutEffect(() => {
+    setIsTilesetCompReady(false);
+    setIsTilesetReady(false);
+    if (tilesetRefKeyRef.current !== tilesetKey) {
+      tilesetRef.current = undefined;
+      tilesetRefKeyRef.current = undefined;
+      setIsTilesetRefReady(false);
+    }
+    featureIndex.records.clear();
+    selectedFeatureIdsRef.current = [];
+    selectedFeatureColorMap.clear();
+  }, [tilesetKey, featureIndex, selectedFeatureColorMap]);
+
   useEffect(() => {
     if (!tilesetRef.current || !shouldUseFeatureIndex || !isTilesetReady) return;
     Object.assign(tilesetRef.current, {
@@ -759,12 +827,7 @@ export const useHooks = ({
 
     // For Re:Earth provider, use the custom URL from customProvider or layer data
     if (provider === "reearth") {
-      // Try to get URL from customProvider first, then fall back to layer URL
-      const customUrl = customProvider?.layers?.providers?.find(
-        p => p.id === "reearth_google_photorealistic_3d_tiles",
-      )?.url;
-
-      return customUrl || url || null;
+      return reearthGooglePhotorealisticUrl || url || null;
     }
 
     // Otherwise load via Google API key or Cesium Ion.
@@ -772,11 +835,13 @@ export const useHooks = ({
       try {
         if (provider === "cesium-ion" || !googleMapApiKey) {
           const resource = await IonResource.fromAssetId(2275207, {
-            accessToken: meta?.cesiumIonAccessToken as string | undefined,
+            accessToken: cesiumIonAccessToken,
           });
           return resource;
         }
-        const tileset = await createGooglePhotorealistic3DTileset({ key: googleMapApiKey });
+        const tileset = await createGooglePhotorealistic3DTileset({
+          key: googleMapApiKey,
+        });
         return tileset.resource;
       } catch (error) {
         console.error(`Error loading Photorealistic 3D Tiles tileset: ${error}`);
@@ -785,7 +850,15 @@ export const useHooks = ({
     };
 
     return loadTileset();
-  }, [type, isVisible, googleMapApiKey, meta?.cesiumIonAccessToken, provider, customProvider, url]);
+  }, [
+    type,
+    isVisible,
+    googleMapApiKey,
+    cesiumIonAccessToken,
+    provider,
+    reearthGooglePhotorealisticUrl,
+    url,
+  ]);
 
   const tilesetUrl = useMemo((): string | Resource | Promise<Resource> | null => {
     if (!isVisible) return null;
@@ -803,7 +876,7 @@ export const useHooks = ({
     // OSM Buildings — only available via Cesium Ion.
     if (type === "osm-buildings") {
       return IonResource.fromAssetId(96188, {
-        accessToken: meta?.cesiumIonAccessToken as string | undefined,
+        accessToken: cesiumIonAccessToken,
       }); // https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Scene/createOsmBuildings.js#L53
     }
 
@@ -813,7 +886,7 @@ export const useHooks = ({
     }
 
     return null;
-  }, [type, isVisible, googleMapPhotorealisticResource, url, tileset, meta?.cesiumIonAccessToken]);
+  }, [type, isVisible, googleMapPhotorealisticResource, url, tileset, cesiumIonAccessToken]);
 
   const imageBasedLighting = useMemo(() => {
     if (
@@ -854,11 +927,29 @@ export const useHooks = ({
 
   const handleReady = useCallback(
     (tileset: Cesium3DTileset) => {
+      if (tilesetKey !== currentTilesetKeyRef.current) {
+        return;
+      }
       setIsTilesetCompReady(true);
       onLayerFetch?.({ properties: tileset.properties });
       onLayerLoad?.({ layerId: layerIdRef.current });
     },
-    [onLayerFetch, onLayerLoad],
+    [onLayerFetch, onLayerLoad, tilesetKey],
+  );
+
+  const handleError = useCallback(
+    (error: unknown) => {
+      if (tilesetKey !== currentTilesetKeyRef.current) {
+        return;
+      }
+      tilesetRef.current = undefined;
+      tilesetRefKeyRef.current = undefined;
+      setIsTilesetCompReady(false);
+      setIsTilesetRefReady(false);
+      setIsTilesetReady(false);
+      console.error("Error loading Cesium 3D Tileset:", error);
+    },
+    [tilesetKey],
   );
 
   useEffect(() => {
@@ -874,6 +965,7 @@ export const useHooks = ({
   }, [type, updateCredits]);
 
   return {
+    tilesetKey,
     tilesetUrl,
     ref,
     style,
@@ -883,5 +975,6 @@ export const useHooks = ({
     builtinBoxProps,
     imageBasedLighting,
     handleReady,
+    handleError,
   };
 };

package/src/engines/Cesium/Feature/Tileset/index.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo, type JSX } from "react";
+import { useMemo, type JSX } from "react";
 import { Cesium3DTileset } from "resium";
 
 import type { Cesium3DTilesAppearance, ComputedLayer } from "../../..";
@@ -37,6 +37,7 @@ function Tileset({
     property ?? {};
   const boxId = `${layer?.id}_box`;
   const {
+    tilesetKey,
     tilesetUrl,
     ref,
     style,
@@ -46,6 +47,7 @@ function Tileset({
     builtinBoxProps,
     imageBasedLighting,
     handleReady,
+    handleError,
   } = useHooks({
     id,
     boxId,
@@ -72,6 +74,7 @@ function Tileset({
   return !isVisible || !tilesetUrl ? null : (
     <>
       <Cesium3DTileset
+        key={tilesetKey}
         ref={ref}
         url={tilesetUrl}
         customShader={
@@ -88,6 +91,7 @@ function Tileset({
         colorBlendMode={colorBlendModeFor3DTile(colorBlendMode)}
         imageBasedLighting={imageBasedLighting}
         onReady={handleReady}
+        onError={handleError}
         debugWireframe={showWireframe}
         debugShowBoundingVolume={showBoundingVolume}
         showCreditsOnScreen
@@ -111,19 +115,7 @@ function Tileset({
   );
 }
 
-export default memo(
-  Tileset,
-  (prev, next) =>
-    prev.id === next.id &&
-    prev.isVisible === next.isVisible &&
-    prev.property === next.property &&
-    prev.layer?.layer === next.layer?.layer &&
-    prev.viewerProperty === next.viewerProperty &&
-    prev.meta === next.meta &&
-    prev.evalFeature === next.evalFeature &&
-    prev.onComputedFeatureFetch === next.onComputedFeatureFetch &&
-    prev.onFeatureDelete === next.onFeatureDelete,
-);
+export default Tileset;
 
 export const config: FeatureComponentConfig = {
   noFeature: true,

package/src/engines/Cesium/Feature/index.tsx

@@ -112,7 +112,19 @@ export default function Feature({
     displayType.every(k => components[k][1].noFeature && !components[k][1].noLayer);
   const useTransition = !!layer?.transition?.useTransition;
   const cacheable = !data?.updateInterval && !useTransition;
-  const urlMD5 = useMemo(() => (data?.url ? generateIDWithMD5(data.url) : ""), [data?.url]);
+  const dataSourceKey = useMemo(
+    () =>
+      generateIDWithMD5(
+        JSON.stringify({
+          type: data?.type,
+          url: data?.url,
+          layers: data?.layers,
+          provider: data?.provider,
+          googleMapApiKey: data?.serviceTokens?.googleMapApiKey,
+        }),
+      ),
+    [data?.type, data?.url, data?.layers, data?.provider, data?.serviceTokens?.googleMapApiKey],
+  );
 
   const { requestRender } = useContext();
   // TODO: Find a way to wait updating the entity
@@ -139,7 +151,7 @@ export default function Feature({
       !(sketchEditingFeature?.layerId === layer.id && sketchEditingFeature?.feature?.id === f?.id);
 
     const componentId =
-      urlMD5 +
+      dataSourceKey +
       generateIDWithMD5(
         `${layer.id}_${
           f?.id ?? ""
@@ -221,9 +233,9 @@ export default function Feature({
             layer?.layer?.type === "simple" && !!layer?.layer?.["3dtiles"]?.specularEnvironmentMaps;
 
           // "noFeature" component should be recreated when the following value is changed.
-          // data.url, isVisible
+          // data source, Cesium Ion token, isVisible
           const key =
-            urlMD5 +
+            dataSourceKey +
             generateIDWithMD5(
               `${
                 layer?.id || ""
@@ -243,7 +255,7 @@ export default function Feature({
         })}
       </>
     );
-  }, [areAllDisplayTypeNoFeature, displayType, layer, isHidden, urlMD5, props]);
+  }, [areAllDisplayTypeNoFeature, displayType, layer, isHidden, dataSourceKey, props]);
 
   return (
     <>

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

@@ -1,10 +1,44 @@
 import { renderHook } from "@testing-library/react";
 import { UrlTemplateImageryProvider } from "cesium";
-import { expect, test, vi } from "vitest";
+import { expect, test, vi, beforeEach } from "vitest";
 
 import type { CustomProviderConfig } from "../../../Map/types/customProvider";
 
-import { type Tile, useImageryProviders } from "./Imagery";
+import ImageryLayers, { type Tile, useImageryProviders } from "./Imagery";
+
+// Mock Cesium scene and imageryLayerCollection for ImageryLayers component tests
+const mockAdd = vi.fn();
+const mockRemove = vi.fn();
+const mockContains = vi.fn(() => true);
+const mockIndexOf = vi.fn(() => 0);
+const mockRequestRender = vi.fn();
+
+const mockImageryLayerCollection = {
+  add: mockAdd,
+  remove: mockRemove,
+  contains: mockContains,
+  indexOf: mockIndexOf,
+};
+
+const mockScene = {
+  requestRender: mockRequestRender,
+  isDestroyed: () => false,
+};
+
+vi.mock("resium", () => ({
+  useCesium: () => ({
+    imageryLayerCollection: mockImageryLayerCollection,
+    scene: mockScene,
+  }),
+}));
+
+beforeEach(() => {
+  mockAdd.mockClear();
+  mockRemove.mockClear();
+  mockContains.mockClear();
+  mockIndexOf.mockClear();
+  mockRequestRender.mockClear();
+});
 
 test("useImageryProviders", () => {
   const provider = vi.fn(({ url }: { url?: string } = {}): any => ({ hoge: url }));
@@ -153,3 +187,58 @@ test("useImageryProviders", () => {
   typedRerender({ tiles: [] });
   expect(result.current.providers).toEqual({});
 });
+
+test("ImageryLayers should not re-render when tiles array reference changes but content is the same", async () => {
+  const tiles: Tile[] = [{ id: "1", type: "open_street_map", opacity: 0.8 }];
+
+  const { rerender } = renderHook(
+    ({ tiles }: { tiles: Tile[] }) => {
+      return ImageryLayers({
+        tiles,
+        cesiumIonAccessToken: undefined,
+        customProvider: undefined,
+        onTilesChange: undefined,
+      });
+    },
+    {
+      initialProps: { tiles },
+    },
+  );
+
+  // Wait for initial render to complete
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  // Clear mock calls from initial render
+  mockAdd.mockClear();
+  mockRemove.mockClear();
+
+  // Re-render with a NEW tiles array reference but SAME content
+  const newTilesArraySameContent: Tile[] = [{ id: "1", type: "open_street_map", opacity: 0.8 }];
+
+  rerender({ tiles: newTilesArraySameContent });
+
+  // Wait for any effects to run
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  // Effect should NOT have run again - no layers should be removed or added
+  expect(mockRemove).not.toHaveBeenCalled();
+  expect(mockAdd).not.toHaveBeenCalled();
+
+  // Clear mocks
+  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
+  ];
+
+  rerender({ tiles: differentTiles });
+
+  // Wait for effects to run
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  // Effect SHOULD run - old layers removed and new ones added
+  expect(mockRemove).toHaveBeenCalled();
+  expect(mockAdd).toHaveBeenCalled();
+});

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

@@ -53,8 +53,23 @@ export default function ImageryLayers({
 }: Props) {
   const { imageryLayerCollection, scene } = useCesium();
 
+  // Create a stable tiles reference that only changes when the content actually changes
+  // Normalize `undefined` to a stable empty array so `useImageryProviders` doesn't allocate a new default `[]` each render.
+  const emptyTiles = useMemo<Tile[]>(() => [], []);
+  const tilesValue = tiles ?? emptyTiles;
+
+  const prevTilesRef = useRef<Tile[]>(tilesValue);
+  const stableTiles = useMemo(() => {
+    if (!isEqual(prevTilesRef.current, tilesValue)) {
+      prevTilesRef.current = tilesValue;
+    }
+    return prevTilesRef.current;
+  }, [tilesValue]);
+
+  // Pass stableTiles to useImageryProviders to prevent providers from being recreated
+  // when tiles reference changes but content is the same
   const { providers } = useImageryProviders({
-    tiles,
+    tiles: stableTiles,
     cesiumIonAccessToken,
     customProvider,
     presets: tilePresets,
@@ -66,7 +81,9 @@ export default function ImageryLayers({
     let cancelled = false;
     const addedLayers: CesiumImageryLayer[] = [];
     // Track layers by their intended index to maintain order with async loading
-    const layersByIndex: (CesiumImageryLayer | null)[] = new Array(tiles?.length || 0).fill(null);
+    const layersByIndex: (CesiumImageryLayer | null)[] = new Array(stableTiles?.length || 0).fill(
+      null,
+    );
 
     const reorderLayers = () => {
       if (cancelled || scene.isDestroyed()) return;
@@ -91,7 +108,7 @@ export default function ImageryLayers({
       scene.requestRender();
     };
 
-    tiles?.forEach(({ id, zoomLevel, opacity, heatmap }, i) => {
+    stableTiles?.forEach(({ id, zoomLevel, opacity, heatmap }, i) => {
       const providerOrPromise = providers[id]?.[3];
       if (!providerOrPromise) return;
 
@@ -117,7 +134,9 @@ export default function ImageryLayers({
       };
 
       if (providerOrPromise instanceof Promise) {
-        providerOrPromise.then(doAdd).catch(err => console.error("Failed to load imagery provider:", err));
+        providerOrPromise
+          .then(doAdd)
+          .catch(err => console.error("Failed to load imagery provider:", err));
       } else {
         doAdd(providerOrPromise);
       }
@@ -134,7 +153,9 @@ export default function ImageryLayers({
         }
       }
     };
-  }, [providers, tiles, imageryLayerCollection, scene, onTilesChange]);
+    // 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]);
 
   return null;
 }