feat: zoom to layer (#301)

Co-authored-by: nina992 <nouralali992@gmail.com>
reearth · Oct 14, 2022 · 1f5296d · 1f5296d
1 parent 7c304f0
commit 1f5296d
Show file tree

Hide file tree

Showing 19 changed files with 105 additions and 24 deletions.
diff --git a/src/components/atoms/Icon/Icons/zoomToLayer.svg b/src/components/atoms/Icon/Icons/zoomToLayer.svg
diff --git a/src/components/atoms/Icon/icons.ts b/src/components/atoms/Icon/icons.ts
@@ -105,6 +105,7 @@ import Install from "./Icons/install.svg";
 import CopyCode from "./Icons/copyCode.svg";
 import FieldClear from "./Icons/fieldClear.svg";
 import FieldLinked from "./Icons/fieldLinked.svg";
+import ZoomToLayer from "./Icons/zoomToLayer.svg";
 
 // Misc
 import Logo from "./Icons/reearthLogo.svg";
@@ -276,4 +277,5 @@ export default {
   compass: Compass,
   compassFocus: CompassFocus,
   house: House,
+  zoomToLayer: ZoomToLayer,
 };
diff --git a/src/components/molecules/EarthEditor/LayerTreeViewItem/Layer/index.tsx b/src/components/molecules/EarthEditor/LayerTreeViewItem/Layer/index.tsx
@@ -61,6 +61,7 @@ export type Props = {
   onAdd?: (id?: string) => void;
   onGroupCreate?: () => void;
   onImport?: (file: File, format: Format) => void;
+  onZoomToLayer?: (selectedLayerId: string) => void;
 };
 
 const Layer: React.ForwardRefRenderFunction<HTMLDivElement, Props> = (
@@ -101,6 +102,7 @@ const Layer: React.ForwardRefRenderFunction<HTMLDivElement, Props> = (
     onAdd,
     onGroupCreate,
     onImport,
+    onZoomToLayer,
   },
   ref,
 ) => {
@@ -245,6 +247,7 @@ const Layer: React.ForwardRefRenderFunction<HTMLDivElement, Props> = (
                   onLayerImport={onImport}
                   onLayerRemove={onRemove}
                   onLayerGroupCreate={onGroupCreate}
+                  onZoomToLayer={onZoomToLayer}
                 />
               )}
             </LayerActionsWrapper>

diff --git a/src/components/molecules/EarthEditor/LayerTreeViewItem/LayerActions/index.tsx b/src/components/molecules/EarthEditor/LayerTreeViewItem/LayerActions/index.tsx
@@ -14,6 +14,7 @@ export type Props = {
   onLayerRemove?: (id: string) => void;
   onLayerGroupCreate?: () => void;
   onLayerImport?: (file: File, format: Format) => void;
+  onZoomToLayer?: (layerId: string) => void;
 };
 
 const LayerActions: React.FC<Props> = ({
@@ -22,6 +23,7 @@ const LayerActions: React.FC<Props> = ({
   onLayerRemove,
   onLayerImport,
   onLayerGroupCreate,
+  onZoomToLayer,
 }) => {
   const t = useT();
   const importLayer = useFileInput(
@@ -56,20 +58,31 @@ const LayerActions: React.FC<Props> = ({
             onLayerRemove?.(selectedLayerId);
           }
         }}>
-        <HelpButton descriptionTitle={t("Delete selected layer.")} balloonDirection="bottom">
+        <HelpButton descriptionTitle={t("Delete Selected Layer")} balloonDirection="bottom">
           <StyledIcon icon="bin" size={16} disabled={!selectedLayerId} />
         </HelpButton>
       </Action>
       <Action disabled={!rootLayerId} onClick={onLayerGroupCreate}>
-        <HelpButton descriptionTitle={t("Create new folder.")} balloonDirection="bottom">
+        <HelpButton descriptionTitle={t("Create New Folder")} balloonDirection="bottom">
           <StyledIcon icon="folderAdd" size={16} />
         </HelpButton>
       </Action>
       <Action disabled={!rootLayerId} onClick={importLayer}>
-        <HelpButton descriptionTitle={t("Add Layer.")} balloonDirection="bottom">
+        <HelpButton descriptionTitle={t("Add Layer")} balloonDirection="bottom">
           <StyledIcon icon="layerAdd" size={16} />
         </HelpButton>
       </Action>
+      <Action
+        disabled={!selectedLayerId}
+        onClick={() => {
+          if (selectedLayerId) {
+            onZoomToLayer?.(selectedLayerId);
+          }
+        }}>
+        <HelpButton descriptionTitle={t("Zoom To Layer")} balloonDirection="bottom">
+          <StyledIcon icon="zoomToLayer" size={16} disabled={!selectedLayerId} />
+        </HelpButton>
+      </Action>
     </ActionWrapper>
   );
 };

diff --git a/src/components/molecules/EarthEditor/LayerTreeViewItem/index.tsx b/src/components/molecules/EarthEditor/LayerTreeViewItem/index.tsx
@@ -21,6 +21,7 @@ export type Props<T = unknown> = ItemProps<Layer<T>> & {
   onAdd?: (id?: string) => void;
   onGroupCreate?: () => void;
   onImport?: (file: File, format: Format) => void;
+  onZoomToLayer?: (layerId: string) => void;
 };
 
 function LayerTreeViewItem<T = unknown>(
@@ -49,6 +50,7 @@ function LayerTreeViewItem<T = unknown>(
     onRemove,
     onGroupCreate,
     onImport,
+    onZoomToLayer,
   }: Props<T>,
   ref: Ref<HTMLDivElement>,
 ) {
@@ -94,6 +96,7 @@ function LayerTreeViewItem<T = unknown>(
         onGroupCreate={onGroupCreate}
         onImport={onImport}
         childSelected={childSelected}
+        onZoomToLayer={onZoomToLayer}
       />
       {children && (
         <Children expanded={expanded} dropType={canDrop ? dropType : undefined}>
@@ -137,6 +140,7 @@ export function useLayerTreeViewItem<T>({
   onRemove,
   onGroupCreate,
   onImport,
+  onZoomToLayer,
 }: {
   rootLayerId?: string;
   selectedLayerId?: string;
@@ -150,6 +154,7 @@ export function useLayerTreeViewItem<T>({
   onRemove?: (selectedLayerId: string) => void;
   onGroupCreate?: () => void;
   onImport?: (file: File, format: Format) => void;
+  onZoomToLayer?: (layerId: string) => void;
 } = {}) {
   return useMemo(() => {
     function InnerLayerTreeViewItem(props: Props<T>, ref: Ref<HTMLDivElement>) {
@@ -179,6 +184,7 @@ export function useLayerTreeViewItem<T>({
           onAdd,
           onGroupCreate,
           onImport,
+          onZoomToLayer,
           ...events,
         },
         ref,
@@ -195,6 +201,7 @@ export function useLayerTreeViewItem<T>({
     onAdd,
     onGroupCreate,
     onImport,
+    onZoomToLayer,
     onVisibilityChange,
     onActivationChange,
     onRename,

diff --git a/src/components/molecules/EarthEditor/OutlinePane/hooks.tsx b/src/components/molecules/EarthEditor/OutlinePane/hooks.tsx
@@ -89,6 +89,7 @@ export default ({
   onLayerGroupCreate,
   onLayerImport,
   handleShowWarning,
+  onZoomToLayer,
 }: {
   rootLayerId?: string;
   layers?: Layer[];
@@ -125,6 +126,7 @@ export default ({
   onDrop?: (layer: string, index: number, childrenCount: number) => any;
   onLayerGroupCreate?: () => void;
   handleShowWarning?: (show: boolean) => void;
+  onZoomToLayer?: (layerId: string) => void;
 }) => {
   const t = useT();
   const [selected, setSelected] = useState<string[]>([]);
@@ -384,6 +386,7 @@ export default ({
     visibilityShown: true,
     selectedLayerId,
     rootLayerId,
+    onZoomToLayer,
   });
 
   const clusterTreeViewItemOnRename = useCallback(

diff --git a/src/components/molecules/EarthEditor/OutlinePane/index.tsx b/src/components/molecules/EarthEditor/OutlinePane/index.tsx
@@ -52,6 +52,7 @@ export type Props = {
   onLayerGroupCreate?: () => void;
   onLayerImport?: (file: File, format: Format) => void;
   onDrop?: (layer: string, index: number, childrenCount: number) => any;
+  onZoomToLayer?: (layerId: string) => void;
 };
 
 const OutlinePane: React.FC<Props> = ({
@@ -84,6 +85,7 @@ const OutlinePane: React.FC<Props> = ({
   onLayerImport,
   onLayerGroupCreate,
   onDrop,
+  onZoomToLayer,
   loading,
 }) => {
   const t = useT();
@@ -131,6 +133,7 @@ const OutlinePane: React.FC<Props> = ({
     onDrop,
     onLayerGroupCreate,
     handleShowWarning,
+    onZoomToLayer,
   });
 
   return (

diff --git a/src/components/molecules/Visualizer/Engine/Cesium/useEngineRef.ts b/src/components/molecules/Visualizer/Engine/Cesium/useEngineRef.ts
@@ -1,7 +1,7 @@
 import * as Cesium from "cesium";
 import { Math as CesiumMath } from "cesium";
 import { useImperativeHandle, Ref, RefObject, useMemo, useRef } from "react";
-import type { CesiumComponentRef } from "resium";
+import { CesiumComponentRef } from "resium";
 
 import type { Ref as EngineRef } from "..";
 import type { MouseEvents, MouseEvent } from "../ref";
@@ -87,6 +87,19 @@ export default function useEngineRef(
           options,
         );
       },
+      lookAtLayer: layerId => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        const e = viewer.entities.getById(layerId);
+        if (!e) return;
+        const camera = getCamera(viewer);
+        const offset = new Cesium.HeadingPitchRange(
+          camera?.heading ?? 0,
+          camera?.pitch ?? -90,
+          50000,
+        );
+        viewer.zoomTo(e, offset);
+      },
       getViewport: () => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return;

diff --git a/src/components/molecules/Visualizer/Engine/ref.ts b/src/components/molecules/Visualizer/Engine/ref.ts
@@ -59,6 +59,7 @@ export type EngineRef = {
   getLocationFromScreenXY: (x: number, y: number) => LatLngHeight | undefined;
   flyTo: (destination: FlyToDestination, options?: CameraOptions) => void;
   lookAt: (destination: LookAtDestination, options?: CameraOptions) => void;
+  lookAtLayer: (layerId: string) => void;
   zoomIn: (amount: number, options?: CameraOptions) => void;
   zoomOut: (amount: number, options?: CameraOptions) => void;
   orbit: (radian: number) => void;

diff --git a/src/components/molecules/Visualizer/hooks.ts b/src/components/molecules/Visualizer/hooks.ts
@@ -34,6 +34,7 @@ export default ({
   rootLayer,
   selectedLayerId: outerSelectedLayerId,
   selectedBlockId: outerSelectedBlockId,
+  zoomedLayerId,
   camera,
   clock,
   sceneProperty,
@@ -53,6 +54,7 @@ export default ({
   rootLayer?: Layer;
   selectedLayerId?: string;
   selectedBlockId?: string;
+  zoomedLayerId?: string;
   camera?: Camera;
   clock?: Clock;
   sceneProperty?: SceneProperty;
@@ -220,6 +222,12 @@ export default ({
     selectLayer(undefined);
   }, [selectLayer]);
 
+  useEffect(() => {
+    if (zoomedLayerId) {
+      engineRef.current?.lookAtLayer(zoomedLayerId);
+    }
+  }, [zoomedLayerId]);
+
   return {
     engineRef,
     wrapperRef,

diff --git a/src/components/molecules/Visualizer/index.tsx b/src/components/molecules/Visualizer/index.tsx
@@ -58,6 +58,7 @@ export type Props = {
   pluginProperty?: { [key: string]: any };
   clusterProperty?: ClusterProperty[];
   selectedLayerId?: string;
+  zoomedLayerId?: string;
   selectedBlockId?: string;
   pluginBaseUrl?: string;
   isPublished?: boolean;
@@ -87,6 +88,7 @@ export default function Visualizer({
   isPublished,
   selectedLayerId: outerSelectedLayerId,
   selectedBlockId: outerSelectedBlockId,
+  zoomedLayerId,
   widgetAlignEditorActivated,
   onLayerSelect,
   onWidgetUpdate,
@@ -134,6 +136,7 @@ export default function Visualizer({
     rootLayer,
     selectedLayerId: outerSelectedLayerId,
     selectedBlockId: outerSelectedBlockId,
+    zoomedLayerId,
     camera: props.camera,
     clock: props.clock,
     sceneProperty,

diff --git a/src/components/organisms/EarthEditor/CanvasArea/hooks.ts b/src/components/organisms/EarthEditor/CanvasArea/hooks.ts
@@ -30,6 +30,7 @@ import {
   useSelected,
   useSelectedBlock,
   useWidgetAlignEditorActivated,
+  useZoomedLayerId,
   useClock,
 } from "@reearth/state";
 import { valueTypeToGQL, ValueTypes, valueToGQL, LatLng } from "@reearth/util/value";
@@ -52,6 +53,7 @@ export default (isBuilt?: boolean) => {
   const [selected, select] = useSelected();
   const [selectedBlock, selectBlock] = useSelectedBlock();
   const [widgetAlignEditorActivated] = useWidgetAlignEditorActivated();
+  const [zoomedLayerId] = useZoomedLayerId();
 
   const [moveInfoboxField] = useMoveInfoboxFieldMutation();
   const [removeInfoboxField] = useRemoveInfoboxFieldMutation();
@@ -277,6 +279,7 @@ export default (isBuilt?: boolean) => {
     sceneId,
     rootLayerId,
     selectedLayerId,
+    zoomedLayerId,
     selectedBlockId: selectedBlock,
     sceneProperty,
     pluginProperty,

diff --git a/src/components/organisms/EarthEditor/CanvasArea/index.tsx b/src/components/organisms/EarthEditor/CanvasArea/index.tsx
@@ -17,6 +17,7 @@ const CanvasArea: React.FC<Props> = ({ className, isBuilt }) => {
   const {
     rootLayerId,
     selectedBlockId,
+    zoomedLayerId,
     sceneProperty,
     pluginProperty,
     clusterProperty,
@@ -63,6 +64,7 @@ const CanvasArea: React.FC<Props> = ({ className, isBuilt }) => {
       widgets={widgets}
       selectedLayerId={selectedLayerId}
       selectedBlockId={selectedBlockId}
+      zoomedLayerId={zoomedLayerId}
       rootLayerId={rootLayerId}
       sceneProperty={sceneProperty}
       tags={tags}

diff --git a/src/components/organisms/EarthEditor/OutlinePane/hooks.tsx b/src/components/organisms/EarthEditor/OutlinePane/hooks.tsx
@@ -34,6 +34,7 @@ import {
   useSelectedBlock,
   useRootLayerId,
   useWidgetAlignEditorActivated,
+  useZoomedLayerId,
 } from "@reearth/state";
 import deepFind from "@reearth/util/deepFind";
 import deepGet from "@reearth/util/deepGet";
@@ -53,6 +54,7 @@ export default () => {
   const locale = useLang();
   const [sceneId] = useSceneId();
   const [selected, select] = useSelected();
+  const [, zoomToLayer] = useZoomedLayerId();
   const [, selectBlock] = useSelectedBlock();
   const [rootLayerId] = useRootLayerId();
   const [, toggleWidgetAlignEditor] = useWidgetAlignEditorActivated();
@@ -455,6 +457,7 @@ export default () => {
     selectCluster,
     addCluster,
     removeCluster,
+    zoomToLayer,
   };
 };
 

diff --git a/src/components/organisms/EarthEditor/OutlinePane/index.tsx b/src/components/organisms/EarthEditor/OutlinePane/index.tsx
@@ -39,6 +39,7 @@ const OutlinePane: React.FC<Props> = ({ className }) => {
     addCluster,
     renameCluster,
     removeCluster,
+    zoomToLayer,
   } = useHooks();
 
   return (
@@ -73,6 +74,7 @@ const OutlinePane: React.FC<Props> = ({ className }) => {
       onClusterRemove={removeCluster}
       onWidgetActivation={activateWidget}
       onDrop={handleDrop}
+      onZoomToLayer={zoomToLayer}
     />
   );
 };

diff --git a/src/components/pages/EarthEditor/hooks.ts b/src/components/pages/EarthEditor/hooks.ts
@@ -2,14 +2,15 @@ import { useEffect } from "react";
 
 import { useAuth } from "@reearth/auth";
 import { useGetSceneQuery } from "@reearth/gql";
-import { useSceneId, useRootLayerId } from "@reearth/state";
+import { useSceneId, useRootLayerId, useZoomedLayerId } from "@reearth/state";
 
 export type Mode = "layer" | "widget";
 
 export default (sceneId?: string) => {
   const isAuthenticated = useAuth();
   const [, setRootLayerId] = useRootLayerId();
   const [, setSceneId] = useSceneId();
+  const [, zoomToLayer] = useZoomedLayerId();
 
   const { loading, data } = useGetSceneQuery({
     variables: { sceneId: sceneId || "" },
@@ -18,7 +19,8 @@ export default (sceneId?: string) => {
 
   useEffect(() => {
     setSceneId(sceneId);
-  }, [sceneId, setSceneId]);
+    zoomToLayer(undefined);
+  }, [sceneId, setSceneId, zoomToLayer]);
 
   useEffect(() => {
     setRootLayerId(