fix: zoom to layer functionality (#332)

* fix-zoom * pr-fix Co-authored-by: nina992 <nouralali992@gmail.com>
reearth · Oct 24, 2022 · 79b0ddc · 79b0ddc
1 parent 27cd7a7
commit 79b0ddc
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/src/components/molecules/Visualizer/hooks.ts b/src/components/molecules/Visualizer/hooks.ts
@@ -47,6 +47,7 @@ export default ({
   onCameraChange,
   onTick,
   onLayerDrop,
+  onZoomToLayer,
 }: {
   engineType?: string;
   rootLayerId?: string;
@@ -74,6 +75,7 @@ export default ({
   onCameraChange?: (c: Camera) => void;
   onTick?: (c: Clock) => void;
   onLayerDrop?: (layer: Layer, key: string, latlng: LatLng) => void;
+  onZoomToLayer?: (layerId: string | undefined) => void;
 }) => {
   const engineRef = useRef<EngineRef>(null);
   const [overriddenSceneProperty, overrideSceneProperty] = useOverriddenProperty(sceneProperty);
@@ -227,8 +229,9 @@ export default ({
   useEffect(() => {
     if (zoomedLayerId) {
       engineRef.current?.lookAtLayer(zoomedLayerId);
+      onZoomToLayer?.(undefined);
     }
-  }, [zoomedLayerId]);
+  }, [zoomedLayerId, onZoomToLayer]);
 
   const [shownPluginModalInfo, onPluginModalShow] = useState<PluginModalInfo>();
   const pluginModalContainerRef = useRef<HTMLDivElement>();

diff --git a/src/components/molecules/Visualizer/index.tsx b/src/components/molecules/Visualizer/index.tsx
@@ -70,6 +70,7 @@ export type Props = {
   renderInfoboxInsertionPopUp?: InfoboxProps["renderInsertionPopUp"];
   onLayerSelect?: (id?: string) => void;
   onLayerDrop?: (layer: Layer, key: string, latlng: LatLng) => void;
+  onZoomToLayer?: (layerId: string | undefined) => void;
 } & Omit<EngineProps, "children" | "property" | "onLayerSelect" | "onLayerDrop"> &
   Pick<
     InfoboxProps,
@@ -102,6 +103,7 @@ export default function Visualizer({
   onBlockInsert,
   onBlockSelect,
   onLayerDrop,
+  onZoomToLayer,
   ...props
 }: Props): JSX.Element {
   const {
@@ -155,6 +157,7 @@ export default function Visualizer({
     onCameraChange: props.onCameraChange,
     onTick: props.onTick,
     onLayerDrop,
+    onZoomToLayer,
   });
 
   return (

diff --git a/src/components/organisms/EarthEditor/CanvasArea/hooks.ts b/src/components/organisms/EarthEditor/CanvasArea/hooks.ts
@@ -53,7 +53,7 @@ export default (isBuilt?: boolean) => {
   const [selected, select] = useSelected();
   const [selectedBlock, selectBlock] = useSelectedBlock();
   const [widgetAlignEditorActivated] = useWidgetAlignEditorActivated();
-  const [zoomedLayerId] = useZoomedLayerId();
+  const [zoomedLayerId, zoomToLayer] = useZoomedLayerId();
 
   const [moveInfoboxField] = useMoveInfoboxFieldMutation();
   const [removeInfoboxField] = useRemoveInfoboxFieldMutation();
@@ -306,5 +306,6 @@ export default (isBuilt?: boolean) => {
     onTick,
     onFovChange,
     handleDropLayer,
+    zoomToLayer,
   };
 };
diff --git a/src/components/organisms/EarthEditor/CanvasArea/index.tsx b/src/components/organisms/EarthEditor/CanvasArea/index.tsx
@@ -44,6 +44,7 @@ const CanvasArea: React.FC<Props> = ({ className, isBuilt }) => {
     onTick,
     onFovChange,
     handleDropLayer,
+    zoomToLayer,
   } = useHooks(isBuilt);
   const renderInfoboxInsertionPopUp = useCallback<
     NonNullable<VisualizerProps["renderInfoboxInsertionPopUp"]>
@@ -86,7 +87,8 @@ const CanvasArea: React.FC<Props> = ({ className, isBuilt }) => {
       onBlockInsert={onBlockInsert}
       renderInfoboxInsertionPopUp={renderInfoboxInsertionPopUp}
       onLayerDrop={handleDropLayer}
-      pluginBaseUrl={window.REEARTH_CONFIG?.plugins}>
+      pluginBaseUrl={window.REEARTH_CONFIG?.plugins}
+      onZoomToLayer={zoomToLayer}>
       <FovSlider
         visible={isCapturing && sceneMode && sceneMode !== "2d"}
         onIsCapturingChange={onIsCapturingChange}