fix: 3d tile not updating until source type is selected (#318)

fix asset modal and 3d tile not updating
reearth · Sep 15, 2022 · 49a07b2 · 49a07b2
1 parent 235440f
commit 49a07b2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx b/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx
@@ -73,6 +73,7 @@ const AssetContainer: React.FC<Props> = ({
   onSelect,
   onSortChange,
   onSearch,
+  onURLShow,
 }) => {
   const t = useT();
   const {
@@ -106,6 +107,10 @@ const AssetContainer: React.FC<Props> = ({
     if (wrapperRef.current && !isLoading && hasMoreAssets) autoFillPage(wrapperRef, onGetMore);
   }, [hasMoreAssets, isLoading, onGetMore]);
 
+  useEffect(() => {
+    onURLShow?.(assets);
+  }, [onURLShow, assets]);
+
   return (
     <Wrapper>
       <Flex justify={onRemove ? "flex-end" : "center"}>

diff --git a/src/components/molecules/Common/AssetModal/index.tsx b/src/components/molecules/Common/AssetModal/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState, ComponentType } from "react";
+import React, { useCallback, useState, ComponentType, useEffect } from "react";
 
 import Button from "@reearth/components/atoms/Button";
 import Flex from "@reearth/components/atoms/Flex";
@@ -55,11 +55,13 @@ const AssetModal: React.FC<Props> = ({
 
   const handleShowURL = useCallback(
     (assets?: AssetType[]) => {
-      setShowURL(
-        videoOnly || !!(selectedAssetUrl && !assets?.some(e => e.url === selectedAssetUrl)),
-      );
+      if (!assets) return;
+      const show =
+        videoOnly || !!(selectedAssetUrl && !assets.some(e => e.url === selectedAssetUrl));
+      setShowURL(show);
+      setTextUrl(show && initialAssetUrl ? initialAssetUrl : undefined);
     },
-    [videoOnly, selectedAssetUrl],
+    [videoOnly, initialAssetUrl, selectedAssetUrl],
   );
 
   const handleTextUrlChange = useCallback((text?: string) => {
@@ -74,7 +76,7 @@ const AssetModal: React.FC<Props> = ({
 
   const resetValues = useCallback(() => {
     setTextUrl(showURL && initialAssetUrl ? initialAssetUrl : undefined);
-    selectTab("assets");
+    selectTab(showURL ? "url" : "assets");
     selectAssetUrl(initialAssetUrl ?? undefined);
   }, [showURL, initialAssetUrl]);
 
@@ -83,6 +85,10 @@ const AssetModal: React.FC<Props> = ({
     toggleAssetModal?.(false);
   }, [toggleAssetModal, resetValues]);
 
+  useEffect(() => {
+    selectTab(showURL ? "url" : "assets");
+  }, [showURL]);
+
   return videoOnly ? (
     <Modal
       size="sm"

diff --git a/src/components/molecules/Visualizer/Engine/Cesium/Tileset/index.tsx b/src/components/molecules/Visualizer/Engine/Cesium/Tileset/index.tsx
@@ -46,13 +46,12 @@ export default function Tileset({ layer }: PrimitiveProps<Property>): JSX.Elemen
 
   const tilesetUrl = useMemo(() => {
     return sourceType === "osm" && isVisible
-      ?
-        IonResource.fromAssetId(96188) //https://github.com/CesiumGS/cesium/blob/1.69/Source/Scene/createOsmBuildings.js#L50
-      : sourceType === "url" && isVisible && tileset
+      ? IonResource.fromAssetId(96188) //https://github.com/CesiumGS/cesium/blob/1.69/Source/Scene/createOsmBuildings.js#L50
+      : isVisible && tileset
       ? tileset
       : null;
   }, [isVisible, sourceType, tileset]);
-  
+
   return !isVisible || (!tileset && !sourceType) || !tilesetUrl ? null : (
     <Cesium3DTileset
       ref={ref}