feat: improve 2d civil view navigation (#325)

* Implemented cameracontrols to simple2Dscene & added bounding box calculation to RoadNavigator

* FitToBox functionality activated for RoadNavigator tool

---------

Co-authored-by: Antonio González Viegas <antoniogviegas@hotmail.com>

src/civil/RoadNavigator/index.ts

@@ -30,7 +30,7 @@ export abstract class RoadNavigator extends Component<any> {
     return null as any;
   }
 
-  draw(model: FragmentsGroup, ids?: Iterable<number>) {
+  async draw(model: FragmentsGroup, ids?: Iterable<number>) {
     if (!model.civilData) {
       throw new Error("The provided model doesn't have civil data!");
     }
@@ -39,14 +39,17 @@ export abstract class RoadNavigator extends Component<any> {
 
     const scene = this.scene.get();
 
+    const totalBBox: THREE.Box3 = new THREE.Box3();
+    totalBBox.makeEmpty();
+    totalBBox.min.set(Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE);
+    totalBBox.max.set(-Number.MAX_VALUE, -Number.MAX_VALUE, -Number.MAX_VALUE);
+
     for (const id of allIDs) {
       const alignment = alignments.get(id);
       if (!alignment) {
         throw new Error("Alignment not found!");
       }
 
-      let firstCurve = true;
-
       for (const curve of alignment[this.view]) {
         this._curves.add(curve);
         scene.add(curve.mesh);

src/core/Simple2DScene/index.ts

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import CameraControls from "camera-controls";
 import {
   Component,
   Updateable,
@@ -49,7 +49,7 @@ export class Simple2DScene
   }>();
 
   /** The camera controls that move around in the scene. */
-  controls: OrbitControls;
+  readonly controls: CameraControls;
 
   /** The camera that renders the scene. */
   readonly camera: THREE.OrthographicCamera;
@@ -111,7 +111,18 @@ export class Simple2DScene
     const { width, height } = this._size;
 
     // Creates the camera (point of view of the user)
-    this.camera = new THREE.OrthographicCamera(75, width / height);
+    const aspect = width / height;
+    const halfSize = this._frustumSize * 0.5;
+
+    this.camera = new THREE.OrthographicCamera(
+      -halfSize * aspect,
+      halfSize * aspect,
+      halfSize,
+      -halfSize,
+      -1000,
+      1000
+    );
+
     this.scene.add(this.camera);
     this.camera.position.z = 10;
 
@@ -135,11 +146,11 @@ export class Simple2DScene
     this.renderer.overrideScene = this.scene;
     this.renderer.overrideCamera = this.camera;
 
-    this.controls = new OrbitControls(this.camera, renderer.domElement);
-    this.controls.target.set(0, 0, 0);
-    this.controls.enableRotate = false;
-    this.controls.enableZoom = true;
-    this.controls.addEventListener("change", () => this.grid.regenerate());
+    this.controls = new CameraControls(this.camera, renderer.domElement);
+    this.controls.smoothTime = 0.6;
+    this.controls.setTarget(0, 0, 0);
+    this.controls.addEventListener("update", () => this.grid.regenerate());
+    this.controls.mouseButtons.left = CameraControls.ACTION.TRUCK;
   }
 
   /**
@@ -168,7 +179,7 @@ export class Simple2DScene
   /** {@link Updateable.update} */
   async update() {
     await this.onBeforeUpdate.trigger();
-    this.controls.update();
+    this.controls.update(1 / 60);
     await this.renderer.update();
     await this.onAfterUpdate.trigger();
   }