fix: correct marker bug for working with multiple worlds

packages/front/src/civil/CivilElevationNavigator/example.html

@@ -20,8 +20,9 @@
 
       .full-screen {
           width: 100vw;
-          height: 100vh;
-          position: relative;
+          height: calc(100vh - 18rem);
+          bottom: 0;
+          position: absolute;
       }
 
       .top-scene-left {

packages/front/src/civil/CivilElevationNavigator/example.ts

@@ -92,21 +92,39 @@ const elevationNavigator = new OBCF.CivilElevationNavigator(components);
 elevationNavigator.world = world2DRight.world;
 elevationNavigator.draw(model);
 
-planNavigator.onHighlight.add(({ mesh }) => {
+planNavigator.onMarkerChange.add(({ alignment, percentage }) => {
+  elevationNavigator.setMarker(alignment, percentage, "hover");
+  navigator.setMarker(alignment, percentage, "hover");
+});
+
+planNavigator.onHighlight.add(({ mesh, point }) => {
   /*
   **🖌️ Configuring Navigator Highlighting**
       ___
       Finally, the following lines are added to the highlighter tool defined
       previously for the Plan Navigator. These lines provide visual objects
       specific to the Elevation Navigator, improving user experience.
   */
-  elevationNavigator.clear();
-  elevationNavigator.draw(model, [mesh.curve.alignment]);
-  elevationNavigator.highlighter.select(mesh);
 
-  navigator.highlighter.select(mesh);
+  const { index, alignment } = mesh.curve;
+
+  const percentage = alignment.getPercentageAt(point, "horizontal");
+  if (percentage === null) return;
+  const { curve } = alignment.getCurveAt(percentage, "vertical");
+  elevationNavigator.highlighter.select(curve.mesh);
 
-  const index = mesh.curve.index;
+  elevationNavigator.setMarker(curve.alignment, percentage, "select");
+
+  if (world2DRight.world) {
+    if (!curve.mesh.geometry.boundingSphere) {
+      curve.mesh.geometry.computeBoundingSphere();
+    }
+    const vertSphere = curve.mesh.geometry.boundingSphere!.clone();
+    vertSphere.radius *= 1.5;
+    world2DRight.world.camera.controls.fitToSphere(vertSphere, true);
+  }
+
+  navigator.highlighter.select(mesh);
   const curve3d = mesh.curve.alignment.absolute[index];
   curve3d.mesh.geometry.computeBoundingSphere();
   const sphere = curve3d.mesh.geometry.boundingSphere;

packages/front/src/civil/CivilElevationNavigator/index.ts

@@ -30,9 +30,9 @@ export class CivilElevationNavigator extends CivilNavigator {
 
       // Add markers elevation
 
-      const marker = this.components.get(CivilMarker);
+      const civilMarker = this.components.get(CivilMarker);
 
-      marker.deleteByType(["Slope", "Height", "InitialKPV", "FinalKPV"]);
+      civilMarker.deleteByType(["Slope", "Height", "InitialKPV", "FinalKPV"]);
 
       const { alignment } = mesh.curve;
       const positionsVertical = [];
@@ -49,15 +49,15 @@ export class CivilElevationNavigator extends CivilNavigator {
       for (let i = 0; i < alignment.vertical.length; i++) {
         const align = alignment.vertical[i];
 
-        marker.addVerticalMarker(
+        civilMarker.addVerticalMarker(
           this.world,
           `S: ${slope[i].slope}%`,
           align.mesh,
           "Slope",
           scene,
         );
 
-        marker.addVerticalMarker(
+        civilMarker.addVerticalMarker(
           this.world,
           `H: ${defSegments[i].end.y.toFixed(2)}`,
           align.mesh,
@@ -66,15 +66,15 @@ export class CivilElevationNavigator extends CivilNavigator {
         );
       }
 
-      marker.addVerticalMarker(
+      civilMarker.addVerticalMarker(
         this.world,
         "KP: 0",
         alignment.vertical[0].mesh,
         "InitialKPV",
         scene,
       );
 
-      marker.addVerticalMarker(
+      civilMarker.addVerticalMarker(
         this.world,
         `KP: ${alignment.vertical.length}`,
         alignment.vertical[alignment.vertical.length - 1].mesh,

packages/front/src/civil/CivilMarker/index.ts

@@ -27,7 +27,7 @@ export class CivilMarker extends OBC.Component {
 
   world: OBC.World | null = null;
 
-  list = new Map<CivilLabel, Set<string>>();
+  private _list = new Map<CivilLabel, Set<string>>();
 
   // TODO: Replace with UUID for the marker key
   protected _markerKey = 0;
@@ -100,7 +100,10 @@ export class CivilMarker extends OBC.Component {
 
     const key = this._markerKey.toString();
 
-    marker.list.set(key, {
+    marker.setupEvents(world, true);
+    const markers = marker.getWorldMarkerList(world);
+
+    markers.set(key, {
       label: mark,
       key,
       merged: false,
@@ -176,7 +179,10 @@ export class CivilMarker extends OBC.Component {
 
     const key = this._markerKey.toString();
 
-    marker.list.set(key, {
+    marker.setupEvents(world, true);
+    const markers = marker.getWorldMarkerList(world);
+
+    markers.set(key, {
       label: mark,
       key,
       type,
@@ -245,7 +251,10 @@ export class CivilMarker extends OBC.Component {
 
     const key = this._markerKey.toString();
 
-    marker.list.set(key, {
+    marker.setupEvents(world, true);
+    const markers = marker.getWorldMarkerList(world);
+
+    markers.set(key, {
       label: mark,
       key,
       type,
@@ -346,12 +355,12 @@ export class CivilMarker extends OBC.Component {
   deleteByType(types: Iterable<CivilLabel> = CivilLabelArray) {
     const marker = this.components.get(Marker);
     for (const type of types) {
-      const found = this.list.get(type);
+      const found = this._list.get(type);
       if (!found) continue;
       for (const id of found) {
         marker.delete(id);
       }
-      this.list.delete(type);
+      this._list.delete(type);
     }
   }
 
@@ -555,10 +564,10 @@ export class CivilMarker extends OBC.Component {
   }
 
   private save(id: string, type: CivilLabel) {
-    if (!this.list.has(type)) {
-      this.list.set(type, new Set());
+    if (!this._list.has(type)) {
+      this._list.set(type, new Set());
     }
-    const list = this.list.get(type) as Set<string>;
+    const list = this._list.get(type) as Set<string>;
     list.add(id);
   }
 }

packages/front/src/civil/CivilNavigator/index.ts

@@ -389,14 +389,11 @@ export abstract class CivilNavigator extends OBC.Component {
       if (this._previousAlignment !== mesh.curve.alignment) {
         const marker = this.components.get(CivilMarker);
 
-        marker.deleteByType();
         marker.showKPStations(mesh);
         this._previousAlignment = mesh.curve.alignment;
       }
     }
 
-    // this.highlighter.unSelect();
-    // this.clearKPStations();
   };
 
   private onControlsUpdated = () => {

packages/front/src/civil/CivilPlanNavigator/index.ts

@@ -1,5 +1,3 @@
-import * as THREE from "three";
-import * as FRAGS from "@thatopen/fragments";
 import * as OBC from "@thatopen/components";
 import { CivilNavigator } from "../CivilNavigator";
 import { PlanHighlighter } from "./src/plan-highlighter";
@@ -35,30 +33,7 @@ export class CivilPlanNavigator extends CivilNavigator {
         return;
       }
       this.planHighlighter.showCurveInfo(mesh);
-      this.fitCameraToAlignment(mesh);
+      // this.fitCameraToAlignment(mesh);
     });
   }
-
-  private async fitCameraToAlignment(curveMesh: FRAGS.CurveMesh) {
-    const bbox = this.components.get(OBC.BoundingBoxer);
-    const alignment = curveMesh.curve.alignment;
-    for (const curve of alignment.horizontal) {
-      bbox.addMesh(curve.mesh);
-    }
-    const box = bbox.get();
-    const center = new THREE.Vector3();
-    const { min, max } = box;
-    const offset = 1.2;
-    const size = new THREE.Vector3(
-      (max.x - min.x) * offset,
-      (max.y - min.y) * offset,
-      (max.z - min.z) * offset,
-    );
-    box.getCenter(center);
-    box.setFromCenterAndSize(center, size);
-    bbox.reset();
-    if (this.world && this.world.camera.hasCameraControls()) {
-      await this.world.camera.controls.fitToBox(box, true);
-    }
-  }
 }