chore(web): support create initial camera with Edit panel (#1356)

reearth · Jan 23, 2025 · 1141a0c · 1141a0c
1 parent 3290d0d
commit 1141a0c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git a/web/src/beta/features/Editor/Visualizer/hooks.ts b/web/src/beta/features/Editor/Visualizer/hooks.ts
@@ -125,12 +125,14 @@ export default ({
       setInitialCamera(initialCamera);
     }
 
-    if (initialCamera?.fov && initialCamera.fov !== prevFOV.current) {
-      prevFOV.current = initialCamera.fov;
-      setCurrentCamera((c) =>
-        !c ? undefined : { ...c, fov: initialCamera.fov }
-      );
-    }
+    setTimeout(() => {
+      if (initialCamera?.fov && initialCamera.fov !== prevFOV.current) {
+        prevFOV.current = initialCamera.fov;
+        setCurrentCamera((c) =>
+          !c ? undefined : { ...c, fov: initialCamera.fov }
+        );
+      }
+    }, 0);
 
     const viewerProperty = sceneProperty
       ? (convertData(

diff --git a/web/src/beta/ui/fields/CameraField/EditorPanel.tsx b/web/src/beta/ui/fields/CameraField/EditorPanel.tsx
@@ -58,7 +58,7 @@ const EditPanel: FC<PanelProps> = ({ camera, onSave, onFlyTo, onClose }) => {
     >
       <GroupWrapper>
         <TwinInputField
-          values={[newCamera?.lat ?? 0, newCamera?.lng ?? 0]}
+          values={[newCamera?.lat, newCamera?.lng]}
           content={[t("Latitude"), t("Longitude")]}
           title={t("Location")}
           placeholders={[t("value"), t("value")]}
@@ -69,18 +69,14 @@ const EditPanel: FC<PanelProps> = ({ camera, onSave, onFlyTo, onClose }) => {
           <Typography size="body">{t("Height")}</Typography>
           <NumberInput
             unit={"km"}
-            value={newCamera?.height ?? 0}
+            value={newCamera?.height}
             onChange={(value) => handleFieldChange("height", value)}
             onBlur={(value) => handleFieldBlur("height", value)}
           />
         </InputWrapper>
         <TripletInputField
           title={t("Rotation")}
-          values={[
-            newCamera?.heading ?? 0,
-            newCamera?.pitch ?? 0,
-            newCamera?.roll ?? 0
-          ]}
+          values={[newCamera?.heading, newCamera?.pitch, newCamera?.roll]}
           content={[t("Heading"), t("Pitch"), t("Roll")]}
           placeholders={[t("value"), t("value"), t("value")]}
           onChange={handleTrippleFieldChange}

diff --git a/web/src/beta/ui/fields/CameraField/hooks.ts b/web/src/beta/ui/fields/CameraField/hooks.ts
@@ -27,6 +27,16 @@ export const handleCameraDegreeToRadian = (camera: Camera) => ({
   fov: camera?.fov
 });
 
+const defaultCamera: Camera = {
+  lat: 0,
+  lng: 0,
+  height: 0,
+  heading: 0,
+  pitch: 0,
+  roll: 0,
+  fov: 1
+};
+
 export default ({
   camera,
   onFlyTo,
@@ -38,8 +48,8 @@ export default ({
   onSave: (value?: Camera) => void;
   onClose?: () => void;
 }) => {
-  const [newCamera, setNewCamera] = useState<Camera | undefined>(
-    camera ? handleCameraeRadianToDegree(camera) : undefined
+  const [newCamera, setNewCamera] = useState<Camera>(
+    camera ? handleCameraeRadianToDegree(camera) : defaultCamera
   );
 
   useEffect(() => {
@@ -61,15 +71,19 @@ export default ({
   );
 
   const handleFieldChange = useCallback((key: keyof Camera, value?: number) => {
-    setNewCamera((prev) => (prev ? { ...prev, [key]: value } : undefined));
+    setNewCamera((prev) => (prev ? { ...prev, [key]: value } : defaultCamera));
   }, []);
 
+
   const handleSave = useCallback(() => {
     if (!newCamera) return;
     const data = handleCameraDegreeToRadian(newCamera);
+     if (JSON.stringify(newCamera) === JSON.stringify(defaultCamera)) {
+       onFlyTo?.(data);
+     }
     onSave?.(data);
     onClose?.();
-  }, [newCamera, onClose, onSave]);
+  }, [newCamera, onClose, onFlyTo, onSave]);
 
   const handleTwinFieldChange = (values: [number, number]) => {
     handleFieldChange("lat", values[0]);