feat: selecting imagery features (#450)

* feat: support select feature * feat: support selecting mvt feature
reearth · Feb 10, 2023 · f24ef53 · f24ef53
1 parent 4061743
commit f24ef53
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 4 deletions.
diff --git a/src/core/Map/Layers/hooks.ts b/src/core/Map/Layers/hooks.ts
@@ -405,7 +405,7 @@ export default function useHooks({
 
   const walk = useCallback(
     <T>(fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => T | void): T | undefined => {
-      return walkLayers(layersRef() ?? [], (l, i, p) => {
+      return walkLayers([...(layersRef() ?? []), ...tempLayersRef.current], (l, i, p) => {
         const ll = findById(l.id);
         if (!ll) return;
         return fn(

diff --git a/src/core/Map/index.tsx b/src/core/Map/index.tsx
@@ -63,6 +63,7 @@ function Map(
       selectedLayerId={{ layerId: selectedLayer.layerId, featureId: selectedLayer.featureId }}
       layerSelectionReason={selectedLayer.reason}
       onLayerSelect={handleEngineLayerSelect}
+      layersRef={layersRef}
       {...props}>
       <Layers
         ref={layersRef}

diff --git a/src/core/Map/types/index.ts b/src/core/Map/types/index.ts
@@ -8,7 +8,12 @@ import type {
 } from "react";
 
 import type { LatLngHeight, Camera, Rect, LatLng, DataType } from "../../mantle";
-import type { FeatureComponentType, ClusterComponentType, LayerSelectionReason } from "../Layers";
+import type {
+  FeatureComponentType,
+  ClusterComponentType,
+  LayerSelectionReason,
+  Ref as LayersRef,
+} from "../Layers";
 
 export type {
   FeatureComponentProps,
@@ -97,6 +102,7 @@ export type EngineProps = {
   isLayerDragging?: boolean;
   shouldRender?: boolean;
   meta?: Record<string, unknown>;
+  layersRef?: RefObject<LayersRef>;
   onLayerSelect?: (
     layerId: string | undefined,
     featureId?: string,

diff --git a/src/core/engines/Cesium/hooks.ts b/src/core/engines/Cesium/hooks.ts
@@ -2,11 +2,13 @@ import { Color, Entity, Cesium3DTileFeature, Cartesian3, Ion, Cesium3DTileset }
 import type { Viewer as CesiumViewer } from "cesium";
 import CesiumDnD, { Context } from "cesium-dnd";
 import { isEqual } from "lodash-es";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { RefObject, useCallback, useEffect, useMemo, useRef } from "react";
 import type { CesiumComponentRef, CesiumMovementEvent, RootEventTarget } from "resium";
 import { useCustomCompareCallback } from "use-custom-compare";
 
 import { e2eAccessToken, setE2ECesiumViewer } from "@reearth/config";
+import { ComputedFeature, DataType } from "@reearth/core/mantle";
+import { LayersRef } from "@reearth/core/Map";
 
 import type {
   Camera,
@@ -33,6 +35,7 @@ export default ({
   selectionReason,
   isLayerDraggable,
   meta,
+  layersRef,
   onLayerSelect,
   onCameraChange,
   onLayerDrag,
@@ -46,6 +49,7 @@ export default ({
     layerId?: string;
     featureId?: string;
   };
+  layersRef?: RefObject<LayersRef>;
   selectionReason?: LayerSelectionReason;
   isLayerDraggable?: boolean;
   meta?: Record<string, unknown>;
@@ -155,6 +159,33 @@ export default ({
     if (!viewer || viewer.isDestroyed()) return;
 
     const entity = findEntity(viewer, selectedLayerId?.layerId, selectedLayerId?.featureId);
+    if (!entity) {
+      // Find ImageryLayerFeature
+      const ImageryLayerDataTypes: DataType[] = ["mvt"];
+      const layers = layersRef?.current?.findAll(
+        layer =>
+          layer.type === "simple" &&
+          !!layer.data?.type &&
+          ImageryLayerDataTypes.includes(layer.data?.type),
+      );
+
+      if (layers?.length) {
+        // TODO: Get ImageryLayerFeature from `viewer.imageryLayers`.(But currently didn't find the way)
+        const [feature, layerId] =
+          ((): [ComputedFeature, string] | void => {
+            for (const layer of layers) {
+              const f = layer.computed?.features.find(
+                feature => feature.id !== selectedLayerId?.featureId,
+              );
+              if (f) {
+                return [f, layer.id];
+              }
+            }
+          })() || [];
+        onLayerSelect?.(layerId, feature?.id);
+      }
+    }
+
     if (prevSelectedEntity.current === entity) return;
     prevSelectedEntity.current = entity;
 
@@ -182,7 +213,7 @@ export default ({
     if (!entity || entity instanceof Entity) {
       viewer.selectedEntity = entity;
     }
-  }, [cesium, selectedLayerId, onLayerSelect]);
+  }, [cesium, selectedLayerId, onLayerSelect, layersRef]);
 
   const handleMouseEvent = useCallback(
     (type: keyof MouseEvents, e: CesiumMovementEvent, target: RootEventTarget) => {

diff --git a/src/core/engines/Cesium/index.tsx b/src/core/engines/Cesium/index.tsx
@@ -41,6 +41,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     shouldRender,
     layerSelectionReason,
     meta,
+    layersRef,
     onLayerSelect,
     onCameraChange,
     onLayerDrag,
@@ -73,6 +74,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     selectionReason: layerSelectionReason,
     isLayerDraggable,
     meta,
+    layersRef,
     onLayerSelect,
     onCameraChange,
     onLayerDrag,