refactor: add event listener when tileset ready

reearth · Aug 8, 2023 · 4976ad0 · 4976ad0
1 parent 14645d1
commit 4976ad0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
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,11 +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;
 }) => {
@@ -227,7 +229,7 @@ const useFeature = ({
         await attachComputedFeature(feature);
       });
     });
-  }, [tileset, cachedFeaturesRef, attachComputedFeature, layerId]);
+  }, [tileset, tilesetReady, cachedFeaturesRef, attachComputedFeature, layerId]);
 
   useEffect(() => {
     cachedCalculatedLayerRef.current = layer;
@@ -378,6 +380,7 @@ export const useHooks = ({
       }),
   );
   const tilesetRef = useRef<Cesium3DTilesetType>();
+  const [tilesetReady, setTilesReady] = useState(false);
 
   const ref = useCallback(
     (tileset: CesiumComponentRef<Cesium3DTilesetType> | null) => {
@@ -388,13 +391,17 @@ 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,
   });

diff --git a/web/src/classic/core/engines/Cesium/Feature/Tileset/hooks.ts b/web/src/classic/core/engines/Cesium/Feature/Tileset/hooks.ts
@@ -138,11 +138,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;
 }) => {
@@ -223,7 +225,7 @@ const useFeature = ({
         await attachComputedFeature(feature);
       });
     });
-  }, [tileset, cachedFeaturesRef, attachComputedFeature, layerId]);
+  }, [tileset, tilesetReady, cachedFeaturesRef, attachComputedFeature, layerId]);
 
   useEffect(() => {
     cachedCalculatedLayerRef.current = layer;
@@ -370,6 +372,7 @@ export const useHooks = ({
       }),
   );
   const tilesetRef = useRef<Cesium3DTilesetType>();
+  const [tilesetReady, setTilesReady] = useState(false);
 
   const ref = useCallback(
     (tileset: CesiumComponentRef<Cesium3DTilesetType> | null) => {
@@ -380,13 +383,17 @@ 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,
   });