Feature/improve bboxselector performance (#1)

* feat: enhance BboxSelector component with marker support for improved positioning; refactor scaling and dragging logic

* feat: integrate MlGeoJsonLayer into App component; enhance BboxSelector marker visibility and positioning logic

* feat: update BboxSelector to use topLeft instead of center for positioning; adjust related calculations and effects

* feat: add TerraBboxSelector and NewBboxSelector components; integrate terra-draw for enhanced bbox selection functionality

* feat: enhance NewBboxSelector with edit mode support; integrate MlGeoJsonLayer for improved bbox visualization

* feat: update BboxSelector to adjust element styling and position logic; ensure bbox updates correctly on size changes

* fiix bbox selector scaling

* remove unnecessary code from bboxselector

* refactor: update BboxSelector options to make topLeft optional and improve element initialization logic

* feat: enhance BboxSelector with edit mode support and integrate MlGeoJsonLayer for improved bbox visualization

* feat: enhance BboxSelector with isMounted ref and improve target dimension updates with retry mechanism

* feat: enhance BboxSelector with viewport state management and improve target dimension updates

* fix: correct modeRef initialization and improve viewport state handling in BboxSelector

* feat: implement BboxSelectorEditMode component for enhanced bbox editing functionality

* fix: remove unused NewBboxSelector component and clean up BboxSelectorEditMode and BboxSelector styles

* feat: add bbox update method to BboxSelector and adjust map zoom on city selection

* fix: add outDir to TypeScript plugin configuration in rollup config

Author: cioddi

package-lock.json

@@ -19,6 +19,8 @@
     "react": "^19.0.0",
     "react-admin": "^5.6.4",
     "react-dom": "^19.0.0",
+    "terra-draw": "^1.4.3",
+    "terra-draw-maplibre-gl-adapter": "^1.0.3",
     "three": "^0.174.0",
     "three-csg-ts": "^3.2.0",
     "zustand": "^5.0.3"

packages/stlmaps-app/package.json

@@ -39,4 +39,4 @@
 
 .read-the-docs {
   color: #888;
-}
+}

packages/stlmaps-app/src/App.css

@@ -19,6 +19,9 @@ import MobileMenu from "./components/MobileMenu";
 import MapSection from "./components/MapSection";
 import ModelSection from "./components/ModelSection";
 import { Feature } from "geojson";
+import { MlGeoJsonLayer } from "@mapcomponents/react-maplibre";
+import TerraBboxSelector from "./components/TerraBboxSelector";
+import NewBboxSelector from "./components/NewBboxSelector";
 
 const mapCenter: [number, number] = [-74.00599999999997, 40.71279999999999];
 const SIDEBAR_WIDTH = 440;
@@ -45,12 +48,13 @@ const App: React.FC = () => {
   const {
     terrainSettings,
     buildingSettings,
-    setBbox
+    setBbox,bbox
   } = useLayerStore();
 
   // Handle city selection to update both center and bbox
   const handleCitySelect = (city: any) => {
     if (city) {
+      _map.setZoom(14);
       setBboxCenter(city.coordinates);
 
       // Add a small delay to ensure state is updated before triggering bbox update
@@ -156,15 +160,14 @@ const App: React.FC = () => {
       open={openTodoList}
       onClose={() => setOpenTodoList(false)}
     />
-    <GenerateMeshButton />      <BboxSelector
+    <GenerateMeshButton />
+    <BboxSelector
       ref={bboxSelectorRef}
       options={{
-        center: bboxCenter,
         scale: [1, 1],
         rotate: 0,
-        orientation: "portrait",
-        width: 800,
-        height: 800,
+        width: 200,
+        height: 200,
       }}
       onChange={(geojson) => {
         console.log("BboxSelector onChange triggered with:", geojson);