Enhance stop point selection logic and marker management on the map. …

…A bug persists where markers occasionally fail to update correctly on hover. TBD
bioretics · Nov 18, 2024 · 021458e · 021458e
1 parent 853b2ad
commit 021458e
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 10 deletions.
diff --git a/lib/Models/Terria.ts b/lib/Models/Terria.ts
@@ -2246,15 +2246,23 @@ export default class Terria {
   @observable selectedStopSummaryRowIndex: {
     fromTable: number | null;
     fromChart: number | null;
-  } = { fromTable: null, fromChart: null };
+    fromMap: number | null;
+  } = { fromTable: null, fromChart: null, fromMap: null };
 
   @action
   setSelectedStopSummaryRowIndex(
-    source: "fromTable" | "fromChart",
+    source: "fromTable" | "fromChart" | "fromMap",
     index: number | null
   ) {
     this.selectedStopSummaryRowIndex[source] = index;
   }
+
+  @action
+  removeSelectedStopSummaryRowIndex() {
+    this.setSelectedStopSummaryRowIndex("fromChart", null);
+    this.setSelectedStopSummaryRowIndex("fromTable", null);
+    this.setSelectedStopSummaryRowIndex("fromMap", null);
+  }
 }
 
 function generateInitializationUrl(

diff --git a/lib/ReactViews/Custom/Chart/BottomDockChart.jsx b/lib/ReactViews/Custom/Chart/BottomDockChart.jsx
@@ -262,7 +262,9 @@ class Chart extends React.Component {
 
   componentDidMount() {
     this.disposeReaction = reaction(
-      () => this.props.terria.selectedStopSummaryRowIndex.fromTable,
+      () =>
+        this.props.terria.selectedStopSummaryRowIndex.fromTable ||
+        this.props.terria.selectedStopSummaryRowIndex.fromMap,
       (idx) => {
         if (idx !== null && this.props.chartItems) {
           const sumDistances =

diff --git a/lib/ReactViews/Custom/Chart/MeasurableGeometryChartPanel.tsx b/lib/ReactViews/Custom/Chart/MeasurableGeometryChartPanel.tsx
@@ -116,10 +116,10 @@ const MeasurableGeometryChartPanel = observer((props: Props) => {
     } else if (billboardCollection.current) {
       if (
         newPoint === undefined ||
-        terria.selectedStopSummaryRowIndex.fromTable !== null
+        terria.selectedStopSummaryRowIndex.fromTable !== null ||
+        terria.selectedStopSummaryRowIndex.fromMap !== null
       ) {
-        terria.setSelectedStopSummaryRowIndex("fromChart", null);
-        terria.setSelectedStopSummaryRowIndex("fromTable", null);
+        terria.removeSelectedStopSummaryRowIndex();
         billboardCollection.current.removeAll();
       }
     }

diff --git a/lib/ReactViews/MeasurableGeometry/MeasurablePanel.tsx b/lib/ReactViews/MeasurableGeometry/MeasurablePanel.tsx
@@ -420,8 +420,80 @@ const MeasurablePanel = observer((props: Props) => {
   };
 
   useEffect(() => {
-    setHighlightedRow(terria.selectedStopSummaryRowIndex.fromChart);
-  }, [terria.selectedStopSummaryRowIndex.fromChart]);
+    console.log(
+      "aiudo terria.selectedStopSummaryRowIndex.fromMap",
+      terria.selectedStopSummaryRowIndex.fromMap
+    );
+    console.log(
+      "aiudo terria.selectedStopSummaryRowIndex.fromChart",
+      terria.selectedStopSummaryRowIndex.fromChart
+    );
+
+    if (terria.selectedStopSummaryRowIndex.fromChart !== null)
+      setHighlightedRow(terria.selectedStopSummaryRowIndex.fromChart);
+    if (terria.selectedStopSummaryRowIndex.fromMap !== null)
+      setHighlightedRow(terria.selectedStopSummaryRowIndex.fromMap);
+    if (
+      terria.selectedStopSummaryRowIndex.fromChart === null &&
+      terria.selectedStopSummaryRowIndex.fromMap === null
+    )
+      setHighlightedRow(null);
+  }, [
+    terria.selectedStopSummaryRowIndex.fromChart,
+    terria.selectedStopSummaryRowIndex.fromMap
+  ]);
+
+  useEffect(() => {
+    const rangeThreshold = 0.001; // ~ 100 meters of range
+
+    const checkProximityToStopPoints = () => {
+      const mouseCoords = terria.currentViewer.mouseCoords.cartographic;
+      if (!mouseCoords || !terria.measurableGeom?.stopPoints) return;
+
+      const nearbyStopPoint = terria.measurableGeom.stopPoints.find((point) => {
+        const latDiff = Math.abs(mouseCoords.latitude - point.latitude);
+        const lonDiff = Math.abs(mouseCoords.longitude - point.longitude);
+        return latDiff <= rangeThreshold && lonDiff <= rangeThreshold;
+      });
+
+      if (terria.cesium) {
+        if (nearbyStopPoint) {
+          if (!billboardCollection.current) {
+            billboardCollection.current = new BillboardCollection({
+              scene: terria.cesium.scene
+            });
+            terria.cesium.scene.primitives.add(billboardCollection.current);
+          }
+
+          billboardCollection.current.removeAll();
+
+          billboardCollection.current.add({
+            position: Cartographic.toCartesian(nearbyStopPoint),
+            image: markerIcon,
+            eyeOffset: new Cartesian3(0.0, 0.0, -50.0),
+            heightReference: HeightReference.CLAMP_TO_GROUND,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+            id: "chartPointPlaceholder"
+          });
+          const idx = terria.measurableGeom.stopPoints.indexOf(nearbyStopPoint);
+          console.log("idx: ", idx);
+          terria.setSelectedStopSummaryRowIndex("fromMap", idx);
+          terria.currentViewer.notifyRepaintRequired();
+        } else if (billboardCollection.current) {
+          billboardCollection.current.removeAll();
+          terria.removeSelectedStopSummaryRowIndex();
+          terria.currentViewer.notifyRepaintRequired();
+        }
+      }
+    };
+
+    const disposer =
+      terria.currentViewer.mouseCoords.updateEvent.addEventListener(
+        checkProximityToStopPoints
+      );
+
+    return () => disposer();
+  }, [terria.cesium, terria.currentViewer, terria.measurableGeom]);
 
   const renderStepDetails = () => {
     const updateChartPoint = (idx: number) => {
@@ -450,8 +522,7 @@ const MeasurablePanel = observer((props: Props) => {
 
     const handleMouseLeave = () => {
       setHighlightedRow(null);
-      terria.setSelectedStopSummaryRowIndex("fromChart", null);
-      terria.setSelectedStopSummaryRowIndex("fromTable", null);
+      terria.removeSelectedStopSummaryRowIndex();
       if (billboardCollection.current) {
         billboardCollection.current.removeAll();
         terria.currentViewer.notifyRepaintRequired();