feat: support entity base flyTo on reearth/core (#419)

* feat: support entity base flyTo * fix: flyto * type: fix type error * Update src/core/Crust/Plugins/plugin_types.ts Co-authored-by: rot1024 <aayhrot@gmail.com> * type: some internal types for flyTo --------- Co-authored-by: rot1024 <aayhrot@gmail.com>
reearth · Feb 7, 2023 · 3060cfd · 3060cfd
1 parent c10a671
commit 3060cfd
Show file tree

Hide file tree

Showing 13 changed files with 78 additions and 53 deletions.
diff --git a/src/core/Crust/Plugins/hooks.ts b/src/core/Crust/Plugins/hooks.ts
@@ -82,8 +82,8 @@ export default function ({
   );
 
   const flyTo = useCallback(
-    (dest: FlyToDestination, options?: CameraOptions) => {
-      engineRef?.flyTo(dest, options);
+    (target: string | FlyToDestination, options?: CameraOptions | undefined) => {
+      engineRef?.flyTo(target, options);
     },
     [engineRef],
   );

diff --git a/src/core/Crust/Plugins/plugin_types.ts b/src/core/Crust/Plugins/plugin_types.ts
@@ -121,7 +121,7 @@ export type Camera = {
   readonly zoomIn: (amount: number, options?: CameraOptions) => void;
   readonly zoomOut: (amount: number, options?: CameraOptions) => void;
   /** Moves the camera position to the specified destination. */
-  readonly flyTo: (destination: FlyToDestination, options?: CameraOptions) => void;
+  readonly flyTo: (destination: string | FlyToDestination, options?: CameraOptions) => void;
   /** Moves the camera position to look at the specified destination. */
   readonly lookAt: (destination: LookAtDestination, options?: CameraOptions) => void;
   /** Rotate the camera around the center of earth. */

diff --git a/src/core/Crust/Widgets/Widget/Button/MenuButton.tsx b/src/core/Crust/Widgets/Widget/Button/MenuButton.tsx
@@ -38,7 +38,7 @@ export type Props = {
   };
   align?: "end" | "start" | "centered";
   theme?: Theme;
-  onFlyTo?: (camera: FlyToDestination, options?: { duration?: number }) => void;
+  onFlyTo?: (target: string | FlyToDestination, options?: { duration?: number }) => void;
 };
 
 export default function MenuButton({

diff --git a/src/core/Crust/Widgets/Widget/LegacyMenu/MenuButton.tsx b/src/core/Crust/Widgets/Widget/LegacyMenu/MenuButton.tsx
@@ -40,7 +40,7 @@ export type Props = {
   menuItems?: MenuItem[];
   pos: Position;
   theme?: Theme;
-  onFlyTo?: (camera: FlyToDestination, options?: { duration?: number }) => void;
+  onFlyTo?: (target: string | FlyToDestination, options?: { duration?: number }) => void;
 };
 
 export default function MenuButton({

diff --git a/src/core/Crust/Widgets/Widget/Navigator/hooks.ts b/src/core/Crust/Widgets/Widget/Navigator/hooks.ts
@@ -19,7 +19,7 @@ export default function ({
   onZoomOut?: (amount: number) => void;
   onCameraOrbit?: (orbit: number) => void;
   onCameraRotateRight?: (radian: number) => void;
-  onFlyTo?: (camera: FlyToDestination, options?: { duration?: number }) => void;
+  onFlyTo?: (target: string | FlyToDestination, options?: { duration?: number }) => void;
 }) {
   const [degree, setDegree] = useState(0);
   const [isHelpOpened, setIsHelpOpened] = useState(false);

diff --git a/src/core/Crust/Widgets/Widget/Storytelling/hooks.ts b/src/core/Crust/Widgets/Widget/Storytelling/hooks.ts
@@ -44,7 +44,7 @@ export default function ({
     layerId?: string;
     featureId?: string;
   };
-  onFlyTo?: (camera: FlyToDestination, options?: { duration?: number }) => void;
+  onFlyTo?: (target: string | FlyToDestination, options?: { duration?: number }) => void;
   onLookAt?: (camera: LookAtDestination, options?: { duration?: number }) => void;
   onLayerSelect?: (
     layerId: string | undefined,
@@ -123,7 +123,7 @@ export default function ({
   }, [selectedLayer]);
 
   useEffect(() => {
-    const id = selectedLayerId;
+    const id = selectedLayerId?.layerId;
     const index = id ? stories?.findIndex(l => l.layer === id) : undefined;
     select(
       typeof index === "number" && index >= 0

diff --git a/src/core/Crust/Widgets/Widget/index.tsx b/src/core/Crust/Widgets/Widget/index.tsx
@@ -40,7 +40,7 @@ export type Context = {
     featureId?: string;
   };
   is2d?: boolean;
-  onFlyTo?: (camera: FlyToDestination, options?: { duration?: number }) => void;
+  onFlyTo?: (target: string | FlyToDestination, options?: { duration?: number }) => void;
   onLookAt?: (camera: LookAtDestination, options?: { duration?: number }) => void;
   onLayerSelect?: (
     layerId: string | undefined,

diff --git a/src/core/Crust/context.ts b/src/core/Crust/context.ts
@@ -47,19 +47,16 @@ export function widgetContextFromMapRef({
     selectedLayerId,
     findPhotooverlayLayer: (id: string) => {
       const l = layers()?.findById(id);
-      if (
-        !l ||
-        l.type !== "simple" ||
-        !l.photooverlay?.location ||
-        !("lat" in l.photooverlay.location)
-      ) {
+      if (!l || l.type !== "simple") {
         return undefined;
       }
+      // For compat
+      const location = l.property?.default?.location ?? l.property?.default?.position;
       return {
         title: l.title,
-        lat: l.photooverlay.location.lat,
-        lng: l.photooverlay.location.lng,
-        height: typeof l.photooverlay?.height === "number" ? l.photooverlay.height : 0,
+        lat: location?.lat,
+        lng: location?.lng,
+        height: location?.height ?? 0,
       };
     },
     onCameraOrbit: (...args) => engine()?.orbit(...args),

diff --git a/src/core/Map/types/index.ts b/src/core/Map/types/index.ts
@@ -43,7 +43,7 @@ export type EngineRef = {
   getViewport: () => Rect | undefined;
   getCamera: () => Camera | undefined;
   getLocationFromScreen: (x: number, y: number, withTerrain?: boolean) => LatLngHeight | undefined;
-  flyTo: (destination: FlyToDestination, options?: CameraOptions) => void;
+  flyTo: (target: string | FlyToDestination, options?: CameraOptions) => void;
   lookAt: (destination: LookAtDestination, options?: CameraOptions) => void;
   lookAtLayer: (layerId: string) => void;
   zoomIn: (amount: number, options?: CameraOptions) => void;

diff --git a/src/core/engines/Cesium/Feature/context.ts b/src/core/engines/Cesium/Feature/context.ts
@@ -7,7 +7,7 @@ import type { Camera, FlyToDestination, CameraOptions, LayerSelectionReason } fr
 export type Context = {
   selectionReason?: LayerSelectionReason;
   getCamera?: () => Camera | undefined;
-  flyTo?: (camera: FlyToDestination, options?: CameraOptions) => void;
+  flyTo?: (target: string | FlyToDestination, options?: CameraOptions) => void;
   onLayerEdit?: (e: LayerEditEvent) => void;
 };
 

diff --git a/src/core/engines/Cesium/hooks.ts b/src/core/engines/Cesium/hooks.ts
@@ -23,7 +23,7 @@ import { useCameraLimiter } from "./cameraLimiter";
 import { getCamera, isDraggable, isSelectable, getLocationFromScreen } from "./common";
 import { getTag, type Context as FeatureContext } from "./Feature";
 import useEngineRef from "./useEngineRef";
-import { convertCartesian3ToPosition } from "./utils";
+import { convertCartesian3ToPosition, findEntity } from "./utils";
 
 export default ({
   ref,
@@ -149,7 +149,7 @@ export default ({
     const viewer = cesium.current?.cesiumElement;
     if (!viewer || viewer.isDestroyed()) return;
 
-    const entity = findEntity(viewer, selectedLayerId?.featureId ?? selectedLayerId?.layerId);
+    const entity = findEntity(viewer, selectedLayerId?.layerId, selectedLayerId?.featureId);
     if (viewer.selectedEntity === entity) return;
 
     const tag = getTag(entity);
@@ -374,28 +374,6 @@ function tileProperties(t: Cesium3DTileFeature): { key: string; value: any }[] {
     );
 }
 
-function findEntity(viewer: CesiumViewer, layerId: string | undefined): Entity | undefined {
-  if (!layerId) return;
-
-  let entity = viewer.entities.getById(layerId);
-  if (entity) return entity;
-
-  entity = viewer.entities.values.find(e => getTag(e)?.layerId === layerId);
-  if (entity) return entity;
-
-  for (const ds of [viewer.dataSourceDisplay.dataSources, viewer.dataSources]) {
-    for (let i = 0; i < ds.length; i++) {
-      const entities = ds.get(i).entities.values;
-      const e = entities.find(e => getTag(e)?.layerId === layerId);
-      if (e) {
-        return e;
-      }
-    }
-  }
-
-  return;
-}
-
 function getLayerId(target: RootEventTarget): string | undefined {
   if (target && "id" in target && target.id instanceof Entity) {
     return getTag(target.id)?.layerId;

diff --git a/src/core/engines/Cesium/useEngineRef.ts b/src/core/engines/Cesium/useEngineRef.ts
@@ -27,6 +27,7 @@ import {
   zoom,
   lookAtWithoutAnimation,
 } from "./common";
+import { findEntity } from "./utils";
 
 export default function useEngineRef(
   ref: Ref<EngineRef>,
@@ -68,15 +69,33 @@ export default function useEngineRef(
         if (!viewer || viewer.isDestroyed()) return;
         return getLocationFromScreen(viewer.scene, x, y, withTerrain);
       },
-      flyTo: (camera, options) => {
-        const viewer = cesium.current?.cesiumElement;
-        if (!viewer || viewer.isDestroyed()) return;
-        cancelCameraFlight.current?.();
-        cancelCameraFlight.current = flyTo(
-          viewer.scene?.camera,
-          { ...getCamera(viewer), ...camera },
-          options,
-        );
+      flyTo: (target, options) => {
+        if (target && typeof target === "object") {
+          const viewer = cesium.current?.cesiumElement;
+          if (!viewer || viewer.isDestroyed()) return;
+
+          cancelCameraFlight.current?.();
+          cancelCameraFlight.current = flyTo(
+            viewer.scene?.camera,
+            { ...getCamera(viewer), ...target },
+            options,
+          );
+        }
+        if (target && typeof target === "string") {
+          const viewer = cesium.current?.cesiumElement;
+          if (!viewer || viewer.isDestroyed()) return;
+
+          const layerOrFeatureId = target;
+          const entityFromFeatureId = findEntity(viewer, undefined, layerOrFeatureId);
+          if (entityFromFeatureId) {
+            viewer.flyTo(entityFromFeatureId, options);
+          } else {
+            const entityFromLayerId = findEntity(viewer, layerOrFeatureId);
+            if (entityFromLayerId) {
+              viewer.flyTo(entityFromLayerId, options);
+            }
+          }
+        }
       },
       lookAt: (camera, options) => {
         const viewer = cesium.current?.cesiumElement;

diff --git a/src/core/engines/Cesium/utils.ts b/src/core/engines/Cesium/utils.ts
@@ -4,8 +4,11 @@ import {
   Math as CesiumMath,
   TranslationRotationScale,
   Cartographic,
+  Entity,
 } from "cesium";
 
+import { getTag } from "./Feature";
+
 export const convertCartesian3ToPosition = (
   cesium?: CesiumViewer,
   pos?: Cartesian3,
@@ -35,3 +38,31 @@ export const translationWithClamping = (
     }
   }
 };
+
+export function findEntity(
+  viewer: CesiumViewer,
+  layerId?: string,
+  featureId?: string,
+): Entity | undefined {
+  const id = featureId ?? layerId;
+  const keyName = featureId ? "featureId" : "layerId";
+  if (!id) return;
+
+  let entity = viewer.entities.getById(id);
+  if (entity) return entity;
+
+  entity = viewer.entities.values.find(e => getTag(e)?.[keyName] === id);
+  if (entity) return entity;
+
+  for (const ds of [viewer.dataSourceDisplay.dataSources, viewer.dataSources]) {
+    for (let i = 0; i < ds.length; i++) {
+      const entities = ds.get(i).entities.values;
+      const e = entities.find(e => getTag(e)?.[keyName] === id);
+      if (e) {
+        return e;
+      }
+    }
+  }
+
+  return;
+}