Update public/index.html

public/index.html

@@ -192,13 +192,13 @@
       height: 200px;
       z-index: 20;
       overflow-y: auto;
-      padding: 20px;
+      padding: 20px 0;
       border-radius: 8px;
     }
 
     #dynamic-menu input[type="range"] {
-      width: calc(100% - 20px);
-      margin: 10px 0;
+      width: 90%;
+      margin: 10px auto;
       background: #3a3a3a;
       border-radius: 5px;
     }
@@ -326,9 +326,11 @@
     </div>
   </div>
 
-  <div id="map-window" class="menu-placeholder" style="display: none; flex-direction: column; width: 100vw; height: 100vh;">
+  <div id="map-window" class="menu-placeholder"
+    style="display: none; flex-direction: column; width: 100vw; height: 100vh;">
     <div id="map-container" style="z-index: 1500; flex: 15; width: 100%; height: 100%;"></div>
-    <div class="menu-item" onclick="showMenu('menu-bar')" style="cursor: pointer; flex: 1; align-items: center; justify-content: center;">
+    <div class="menu-item" onclick="showMenu('menu-bar')"
+      style="cursor: pointer; flex: 1; align-items: center; justify-content: center;">
       <img src="previewImages/back-icon.png" alt="Zurück" style="width: 30px; height: 30px;" />
     </div>
   </div>
@@ -356,43 +358,57 @@
         name: "Bench",
         image: "previewImages/bench.PNG",
         file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/bench_model/scene.gltf",
-        scale: { x: 0.1, y: 0.1, z: 0.1 }
+        scale: { x: 0.1, y: 0.1, z: 0.1 },
+        minScale: 0.05, // 50% der aktuellen Größe
+        maxScale: 0.5   // 500% der aktuellen Größe
       },
       trashbin: {
         name: "Trash bin",
         image: "previewImages/trash_can.PNG",
         file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/trash_model/scene.gltf",
-        scale: { x: 0.04, y: 0.04, z: 0.04 }
+        scale: { x: 0.04, y: 0.04, z: 0.04 },
+        minScale: 0.02, // 50% der aktuellen Größe
+        maxScale: 0.2   // 500% der aktuellen Größe
       },
       telephone_box: {
         name: "Telephone Box",
         image: "previewImages/telephone_box.PNG",
         file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/telephone_box_model/scene.gltf",
-        scale: { x: 0.04, y: 0.04, z: 0.04 }
+        scale: { x: 0.04, y: 0.04, z: 0.04 },
+        minScale: 0.02,
+        maxScale: 0.2
       },
       fire_hydrant_model: {
         name: "Fire Hydrant",
         image: "previewImages/hydrant.PNG",
         file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/fire_hydrant_model/scene.gltf",
-        scale: { x: 0.04, y: 0.04, z: 0.04 }
+        scale: { x: 0.04, y: 0.04, z: 0.04 },
+        minScale: 0.02,
+        maxScale: 0.2
       },
       statue: {
         name: "Statue",
         image: "previewImages/statue.PNG",
         file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/statue_model/scene.gltf",
-        scale: { x: 0.04, y: 0.04, z: 0.04 }
+        scale: { x: 0.04, y: 0.04, z: 0.04 },
+        minScale: 0.02,
+        maxScale: 0.2
       },
       fountain: {
         name: "Fountain",
         image: "previewImages/fountain.PNG",
         file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/fountain_model/scene.gltf",
-        scale: { x: 0.001, y: 0.001, z: 0.001 }
+        scale: { x: 0.001, y: 0.001, z: 0.001 },
+        minScale: 0.0005, // 50% der aktuellen Größe
+        maxScale: 0.005   // 500% der aktuellen Größe
       },
       lantern: {
         name: "Lantern",
         image: "previewImages/lantern.jpg",
         file: "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/refs/heads/main/Models/Lantern/glTF/Lantern.gltf",
-        scale: { x: 0.1, y: 0.1, z: 0.1 }
+        scale: { x: 0.1, y: 0.1, z: 0.1 },
+        minScale: 0.05,
+        maxScale: 0.5
       }
     };
 
@@ -574,10 +590,10 @@
       const size = new THREE.Vector3();
       box.getSize(size);
       return size;
-}
+    }
 
 
-function calculateMaxScale(object) {
+    function calculateMaxScale(object) {
       const boundingBox = calculateBoundingBox(object);
       const viewportWidth = window.innerWidth;
       const viewportHeight = window.innerHeight;
@@ -590,11 +606,11 @@ function calculateMaxScale(object) {
       const safeScaleFactor = 0.95; // Puffer, um sicherzustellen, dass es nicht zu groß wird
 
       return Math.min(scaleWidth, scaleHeight) * safeScaleFactor;
-}
-
+    }
 
 
-function openScaleMenu() {
+    /**
+        function openScaleMenu() {
           if (!selectedPlacedModel) {
             showInfoDialog("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bearbeiten.");
             return;
@@ -613,29 +629,36 @@ function openScaleMenu() {
         <label>Größe: <span id="scale-value">${currentScale.toFixed(2)}</span><input type="range" min="0.01" max="${maxScale.toFixed(2)}" step="0.0001" value="${currentScale}" onchange="updateScale(this.value)"></label>
         <button onclick="closeDynamicMenu()">Zurück</button>
       `;
-}
+        }
+    
     
     
         
-/**
- * 
+         * */
     function openScaleMenu() {
       if (!selectedPlacedModel) {
         showInfoDialog("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bearbeiten.");
         return;
       }
 
+      // Berechne die maximale Skalierung für das spezifische Objekt
+      // const maxScale = calculateMaxScale(selectedPlacedModel);
+
       // Aktuelle Skalierung des Modells bestimmen
       const currentScale = selectedPlacedModel.scale.x;
+      const minScale = selectedPlacedModel.minScale;
+      const maxScale = selectedPlacedModel.maxScale;
+      const step = (maxScale - minScale) / 100; // Dynamische Schrittgröße basierend auf Grenzen
 
       const dynamicMenu = document.getElementById("dynamic-menu");
       dynamicMenu.style.display = "flex";
       dynamicMenu.innerHTML = `
         <h3>Skalierung anpassen</h3>
-        <label>Größe: <span id="scale-value">${currentScale.toFixed(2)}</span><input type="range" min="0.01" max="3" step="0.001" value="${currentScale}" onchange="updateScale(this.value)"></label>
+        <label>Größe: <span id="scale-value">${currentScale.toFixed(2)}</span>
+        <input type="range" min="${minScale}" max="${maxScale}" step="${step}" value="${currentScale}" onchange="updateScale(this.value)"></label>
         <button onclick="closeDynamicMenu()">Zurück</button>
       `;
-    }*/
+    }
 
     function updateScale(value) {
       if (selectedPlacedModel) {