fix: correct some of the previous PR's mistakes

src/civil/RoadElevationNavigator/index.ts

@@ -31,6 +31,56 @@ export class RoadElevationNavigator extends RoadNavigator implements UI {
       this.scene.controls,
       this.view
     );
+
+    this.highlighter.onSelect.add((mesh) => {
+      // Add markers elevation
+
+      this.kpManager.dispose();
+
+      const { alignment } = mesh.curve;
+      const positionsVertical = [];
+
+      for (const align of alignment.vertical) {
+        const pos = align.mesh.geometry.attributes.position.array;
+        positionsVertical.push(pos);
+      }
+
+      const { defSegments, slope } = this.setDefSegments(positionsVertical);
+
+      const scene = this.scene.get();
+
+      for (let i = 0; i < alignment.vertical.length; i++) {
+        const align = alignment.vertical[i];
+
+        this.kpManager.addCivilVerticalMarker(
+          `S: ${slope[i].slope}%`,
+          align.mesh,
+          "Slope",
+          scene
+        );
+
+        this.kpManager.addCivilVerticalMarker(
+          `H: ${defSegments[i].end.y.toFixed(2)}`,
+          align.mesh,
+          "Height",
+          scene
+        );
+      }
+
+      this.kpManager.addCivilVerticalMarker(
+        "KP: 0",
+        alignment.vertical[0].mesh,
+        "InitialKPV",
+        scene
+      );
+
+      this.kpManager.addCivilVerticalMarker(
+        `KP: ${alignment.vertical.length}`,
+        alignment.vertical[alignment.vertical.length - 1].mesh,
+        "FinalKPV",
+        scene
+      );
+    });
   }
 
   get() {

src/civil/RoadNavigator/index.ts

@@ -5,7 +5,6 @@ import { Component, Event } from "../../base-types";
 import { Components, Simple2DMarker, Simple2DScene } from "../../core";
 import { CurveHighlighter } from "./src/curve-highlighter";
 import { KPManager } from "./src/kp-manager";
-import { MarkerManager } from "../../core/Simple2DMarker/src/marker-manager";
 
 export type CivilMarkerType = "hover" | "select";
 
@@ -21,7 +20,6 @@ export abstract class RoadNavigator extends Component<any> {
   // abstract showKPStations(curveMesh: FRAGS.CurveMesh): void;
   // abstract clearKPStations(): void;
 
-  // abstract kpManager: KPManager;
   abstract kpManager: KPManager;
 
   readonly onHighlight = new Event<{
@@ -44,8 +42,6 @@ export abstract class RoadNavigator extends Component<any> {
 
   private _previousAlignment: FRAGS.Alignment | null = null;
 
-  markerManager: MarkerManager;
-
   mouseMarkers: {
     hover: Simple2DMarker;
     select: Simple2DMarker;
@@ -54,17 +50,6 @@ export abstract class RoadNavigator extends Component<any> {
   protected constructor(components: Components) {
     super(components);
     this.scene = new Simple2DScene(this.components, false);
-    // @ts-ignore
-    const renderer = this.components._renderer._renderer;
-    // @ts-ignore
-    const controls = this.components._camera.controls;
-
-    this.markerManager = new MarkerManager(
-      this.components,
-      this.scene.renderer,
-      this.scene.scene,
-      controls
-    );
 
     this.mouseMarkers = {
       select: this.newMouseMarker("#ffffff"),
@@ -217,8 +202,8 @@ export abstract class RoadNavigator extends Component<any> {
   }
 
   setDefSegments(segmentsArray: any[]) {
-    let defSegments: any = [];
-    let slope: any = [];
+    const defSegments: any = [];
+    const slope: any = [];
 
     const calculateSlopeSegment = (point1: number[], point2: number[]) => {
       const deltaY = point2[1] - point1[1];
@@ -228,7 +213,10 @@ export abstract class RoadNavigator extends Component<any> {
 
     for (let i = 0; i < segmentsArray.length; i++) {
       const segment = segmentsArray[i];
-      let startX: number, startY: number, endX: number, endY: number;
+      let startX: number;
+      let startY: number;
+      let endX: number;
+      let endY: number;
 
       // Set start
       for (let j = 0; j < Object.keys(segment).length / 3; j++) {
@@ -259,22 +247,22 @@ export abstract class RoadNavigator extends Component<any> {
       slope.push({ slope: slopeSegment });
     }
 
-    segmentsArray.forEach((segment: any) => {
+    for (const segment of segmentsArray) {
       for (let i = 0; i < segment.length - 3; i += 3) {
-        let startX = segment[i];
-        let startY = segment[i + 1];
-        let startZ = segment[i + 2];
+        const startX = segment[i];
+        const startY = segment[i + 1];
+        const startZ = segment[i + 2];
 
-        let endX = segment[i + 3];
-        let endY = segment[i + 4];
-        let endZ = segment[i + 5];
+        const endX = segment[i + 3];
+        const endY = segment[i + 4];
+        const endZ = segment[i + 5];
 
         defSegments.push({
           start: new THREE.Vector3(startX, startY, startZ),
           end: new THREE.Vector3(endX, endY, endZ),
         });
       }
-    });
+    }
 
     return { defSegments, slope };
   }

src/civil/RoadNavigator/src/curve-highlighter.ts

@@ -3,6 +3,7 @@ import * as FRAGS from "bim-fragment";
 import { Line2 } from "three/examples/jsm/lines/Line2";
 import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
+import { Event } from "../../../base-types";
 
 type CivilHighlightType = "horizontal" | "absolute" | "vertical";
 
@@ -19,6 +20,8 @@ export class CurveHighlighter {
     } as { [curve: string]: number[] },
   };
 
+  readonly onSelect = new Event<FRAGS.CurveMesh>();
+
   type: CivilHighlightType;
 
   selectCurve: Line2;
@@ -82,6 +85,7 @@ export class CurveHighlighter {
 
   select(mesh: FRAGS.CurveMesh) {
     this.highlight(mesh, this.selectCurve, this.selectPoints, true);
+    this.onSelect.trigger(mesh);
   }
 
   unSelect() {

src/civil/RoadNavigator/src/kp-manager.ts

@@ -284,8 +284,4 @@ export class KPManager extends MarkerManager {
   clearKPStations() {
     this.clearMarkers();
   }
-
-  dispose() {
-    this.dispose();
-  }
 }

src/civil/RoadPlanNavigator/index.html

@@ -62,6 +62,7 @@
         components,
         container
       );
+
       components.camera = new OBC.SimpleCamera(components);
       components.raycaster = new OBC.SimpleRaycaster(components);
 
@@ -177,52 +178,7 @@
           true
         );
 
-        // Add markers elevation
-
-        planNavigator.markerManager.dispose();
-
-        const { alignment } = mesh.curve;
-        let positionsVertical = [];
-
-        alignment.vertical.forEach((align) => {
-          const pos = align.mesh.geometry.attributes.position.array;
-          positionsVertical.push(pos);
-        });
-
-        const { defSegments, slope } =
-          planNavigator.setDefSegments(positionsVertical);
-
-        const sceneElevation = planNavigator.elevation;
 
-        alignment.vertical.forEach((align, index) => {
-          planNavigator.markerManager.addCivilVerticalMarker(
-            `S: ${slope[index].slope}%`,
-            align.mesh,
-            "Slope",
-            sceneElevation
-          );
-
-          planNavigator.markerManager.addCivilVerticalMarker(
-            `H: ${defSegments[index].end.y.toFixed(2)}`,
-            align.mesh,
-            "Height",
-            sceneElevation
-          );
-        });
-
-        planNavigator.markerManager.addCivilVerticalMarker(
-          "KP: 0",
-          alignment.vertical[0].mesh,
-          "InitialKPV",
-          sceneElevation
-        );
-
-        planNavigator.markerManager.addCivilVerticalMarker(
-          `KP: ${alignment.vertical.length}`,
-          alignment.vertical[alignment.vertical.length - 1].mesh,
-          "FinalKPV",
-          sceneElevation
-        );
       });
 
       // planNavigator.onMarkerChange.add(({ alignment, percentage, type, curve }) => {

src/core/Simple2DMarker/src/marker-manager.ts

@@ -343,13 +343,13 @@ export class MarkerManager {
     text: string,
     mesh: FRAGS.CurveMesh,
     type: CivilLabels,
-    scene: THREE.Scene
+    root: THREE.Object3D
   ) {
     const span = document.createElement("span");
     span.innerHTML = text;
     span.style.color = this._color;
 
-    const marker = new Simple2DMarker(this.components, span, scene);
+    const marker = new Simple2DMarker(this.components, span, root);
 
     if (type === "Height") {
       const span = document.createElement("span");
@@ -587,15 +587,17 @@ export class MarkerManager {
   }
 
   dispose() {
-    this.markers.forEach((marker) => {
+    for (const marker of this.markers) {
       marker.label.dispose();
-    });
+    }
+
     this.markers.clear();
     this._markerKey = 0;
 
-    this.clusterLabels.forEach((cluster) => {
+    for (const cluster of this.clusterLabels) {
       cluster.label.dispose();
-    });
+    }
+
     this.clusterLabels.clear();
     this._clusterKey = 0;