chore(web): Add hideIndicator On Selecting (#866)

reearth · Jan 18, 2024 · 9a1e322 · 9a1e322
1 parent ace1727
commit 9a1e322
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 16 deletions.
diff --git a/web/src/beta/lib/core/engines/Cesium/Feature/Marker/index.tsx b/web/src/beta/lib/core/engines/Cesium/Feature/Marker/index.tsx
@@ -79,6 +79,7 @@ export default function Marker({ property, id, isVisible, geometry, layer, featu
     eyeOffset,
     pixelOffset,
     heightReference: hr,
+    hideIndicator,
   } = property ?? {};
 
   const { useTransition, translate } = layer?.transition ?? {};
@@ -186,7 +187,8 @@ export default function Marker({ property, id, isVisible, geometry, layer, featu
           featureId={feature?.id}
           unselectable
           properties={feature?.properties}
-          availability={availability}>
+          availability={availability}
+          hideIndicator={hideIndicator}>
           <PolylineGraphics
             positions={extrudePoints}
             material={extrudePointsLineColor}
@@ -206,7 +208,8 @@ export default function Marker({ property, id, isVisible, geometry, layer, featu
         featureId={feature?.id}
         draggable
         properties={feature?.properties}
-        availability={availability}>
+        availability={availability}
+        hideIndicator={hideIndicator}>
         {style === "point" ? (
           <PointGraphics
             pixelSize={pointSize}

diff --git a/web/src/beta/lib/core/engines/Cesium/Feature/Polygon/index.tsx b/web/src/beta/lib/core/engines/Cesium/Feature/Polygon/index.tsx
@@ -18,7 +18,9 @@ import {
   type FeatureProps,
 } from "../utils";
 
-export type Props = FeatureProps<Property> & { disableWorkaround?: boolean };
+export type Props = FeatureProps<Property> & {
+  disableWorkaround?: boolean;
+};
 
 export type Property = PolygonAppearance & {
   polygon?: PolygonValue;
@@ -56,6 +58,7 @@ export default function Polygon({
     shadows,
     extrudedHeight,
     classificationType: ct,
+    hideIndicator,
   } = property ?? {};
 
   const hierarchy = useCustomCompareMemo(
@@ -121,7 +124,8 @@ export default function Polygon({
         layerId={layer?.id}
         featureId={feature?.id}
         availability={availability}
-        properties={feature?.properties}>
+        properties={feature?.properties}
+        hideIndicator={hideIndicator}>
         <PolygonGraphics
           hierarchy={hierarchy}
           fill={fill}

diff --git a/web/src/beta/lib/core/engines/Cesium/Feature/Polyline/index.tsx b/web/src/beta/lib/core/engines/Cesium/Feature/Polyline/index.tsx
@@ -18,7 +18,6 @@ import {
 } from "../utils";
 
 export type Props = FeatureProps<Property>;
-
 export type Property = PolylineAppearance & {
   coordinates?: Coordinates;
 };
@@ -43,6 +42,7 @@ export default function Polyline({ id, isVisible, property, geometry, layer, fea
     strokeWidth = 1,
     shadows,
     classificationType: ct,
+    hideIndicator,
   } = property ?? {};
 
   const positions = useCustomCompareMemo(
@@ -67,7 +67,8 @@ export default function Polyline({ id, isVisible, property, geometry, layer, fea
       layerId={layer?.id}
       featureId={feature?.id}
       availability={availability}
-      properties={feature?.properties}>
+      properties={feature?.properties}
+      hideIndicator={hideIndicator}>
       <PolylineGraphics
         positions={positions}
         width={strokeWidth}

diff --git a/web/src/beta/lib/core/engines/Cesium/Feature/utils.tsx b/web/src/beta/lib/core/engines/Cesium/Feature/utils.tsx
@@ -66,6 +66,7 @@ export type Tag = {
   originalProperties?: any;
   computedFeature?: ComputedFeature;
   isFeatureSelected?: boolean;
+  hideIndicator?: boolean;
 };
 
 export const EntityExt = forwardRef(EntityExtComponent);
@@ -77,6 +78,7 @@ function EntityExtComponent(
     draggable,
     unselectable,
     legacyLocationPropertyKey,
+    hideIndicator,
     ...props
   }: ComponentProps<typeof Entity> & Tag,
   ref: ForwardedRef<CesiumComponentRef<CesiumEntity>>,
@@ -90,8 +92,17 @@ function EntityExtComponent(
       draggable,
       unselectable,
       legacyLocationPropertyKey,
+      hideIndicator,
     });
-  }, [draggable, featureId, layerId, legacyLocationPropertyKey, props.id, unselectable]);
+  }, [
+    draggable,
+    featureId,
+    layerId,
+    legacyLocationPropertyKey,
+    props.id,
+    unselectable,
+    hideIndicator,
+  ]);
 
   return <Entity ref={composeRefs(ref, r)} {...props} />;
 }
@@ -201,6 +212,7 @@ const tagObj: { [k in keyof Tag]: 1 } = {
   originalProperties: 1,
   computedFeature: 1,
   isFeatureSelected: 1,
+  hideIndicator: 1,
 };
 
 const tagKeys = Object.keys(tagObj) as (keyof Tag)[];

diff --git a/web/src/beta/lib/core/engines/Cesium/hooks.ts b/web/src/beta/lib/core/engines/Cesium/hooks.ts
@@ -355,9 +355,13 @@ export default ({
 
     if (prevSelectedEntity.current === entity) return;
 
-    if (!entity || entity instanceof Entity) {
+    const tag = getTag(entity);
+    if (!entity || (entity instanceof Entity && !tag?.hideIndicator)) {
       viewer.selectedEntity = entity;
+    } else {
+      viewer.selectedEntity = undefined;
     }
+
     prevSelectedEntity.current = entity;
 
     // TODO: Support layers.selectFeature API for MVT
@@ -388,7 +392,6 @@ export default ({
       }
     }
 
-    const tag = getTag(entity);
     if (tag?.unselectable) return;
 
     if (entity && entity instanceof Cesium3DTileFeature) {
@@ -529,7 +532,14 @@ export default ({
       const viewer = cesium.current?.cesiumElement;
       if (!viewer || viewer.isDestroyed()) return;
 
-      viewer.selectedEntity = undefined;
+      const entity =
+        findEntity(viewer, undefined, selectedLayerId?.featureId) ||
+        findEntity(viewer, selectedLayerId?.layerId);
+
+      const tag = getTag(entity);
+      if (!entity || (entity instanceof Entity && !tag?.hideIndicator)) {
+        viewer.selectedEntity = undefined;
+      }
 
       if (target && "id" in target && target.id instanceof Entity && isSelectable(target.id)) {
         const tag = getTag(target.id);
@@ -554,7 +564,11 @@ export default ({
             : undefined,
         );
         prevSelectedEntity.current = target.id;
-        viewer.selectedEntity = target.id;
+        if (target.id instanceof Entity && !tag?.hideIndicator) {
+          viewer.selectedEntity = target.id;
+        } else {
+          viewer.selectedEntity = undefined;
+        }
         return;
       }
 
@@ -638,9 +652,11 @@ export default ({
                 // ref: https://github.com/CesiumGS/cesium/blob/9295450e64c3077d96ad579012068ea05f97842c/packages/widgets/Source/Viewer/Viewer.js#L1843-L1876
                 // issue: https://github.com/CesiumGS/cesium/issues/7965
                 requestAnimationFrame(() => {
-                  viewer.selectedEntity = new Entity({
-                    position: Cartographic.toCartesian(pos),
-                  });
+                  if (!tag?.hideIndicator) {
+                    viewer.selectedEntity = new Entity({
+                      position: Cartographic.toCartesian(pos),
+                    });
+                  }
                 });
               }
 
@@ -675,10 +691,19 @@ export default ({
         }
       }
 
-      viewer.selectedEntity = undefined;
+      if (!entity || (entity instanceof Entity && !tag?.hideIndicator)) {
+        viewer.selectedEntity = undefined;
+      }
       onLayerSelect?.();
     },
-    [onLayerSelect, mouseEventHandles, layersRef, featureFlags],
+    [
+      onLayerSelect,
+      mouseEventHandles,
+      layersRef,
+      featureFlags,
+      selectedLayerId?.featureId,
+      selectedLayerId?.layerId,
+    ],
   );
 
   // E2E test

diff --git a/web/src/beta/lib/core/mantle/types/appearance.ts b/web/src/beta/lib/core/mantle/types/appearance.ts
@@ -78,6 +78,7 @@ export type MarkerAppearance = {
   far?: number;
   pixelOffset?: [number, number];
   eyeOffset?: [number, number, number];
+  hideIndicator?: boolean;
 };
 
 export type PolylineAppearance = {
@@ -89,6 +90,7 @@ export type PolylineAppearance = {
   near?: number;
   far?: number;
   classificationType?: ClassificationType;
+  hideIndicator?: boolean;
 };
 
 export type PolygonAppearance = {
@@ -105,6 +107,7 @@ export type PolygonAppearance = {
   far?: number;
   extrudedHeight?: number;
   classificationType?: ClassificationType;
+  hideIndicator?: boolean;
 };
 
 export type HeatMapAppearance = {