Update public/index.html

public/index.html

@@ -43,7 +43,7 @@
 
     #add-menu {
       overflow-y: auto;
- 
+
     }
 
     #menu-bar,
@@ -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;
     }
@@ -232,7 +232,7 @@
       flex-direction: column;
       align-items: flex-start;
   ">
-      <div id="debug-console" style="
+    <div id="debug-console" style="
           width: 100%;
           max-height: 200px;
           overflow-y: auto;
@@ -241,7 +241,7 @@
           padding: 5px;
           display: none;
       "></div>
-      <button id="debug-toggle-btn" style="
+    <button id="debug-toggle-btn" style="
           background: rgba(0, 0, 0, 0.7);
           color: #00ff00;
           font-size: 14px;
@@ -326,10 +326,12 @@
     </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;">
-        <img src="previewImages/back-icon.png" alt="Zurück" style="width: 30px; height: 30px;" />
+    <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
       }
     };
 
@@ -570,72 +586,79 @@
     }
 
     function calculateBoundingBox(object) {
-  const box = new THREE.Box3().setFromObject(object);
-  const size = new THREE.Vector3();
-  box.getSize(size);
-  return size;
-}
-
-
-function calculateMaxScale(object) {
-  const boundingBox = calculateBoundingBox(object);
-  const viewportWidth = window.innerWidth;
-  const viewportHeight = window.innerHeight;
-
-  // Berechne die maximal mögliche Skalierung, um im Viewport zu bleiben
-  const scaleWidth = viewportWidth / boundingBox.x;
-  const scaleHeight = viewportHeight / boundingBox.y;
-
-  // Wähle den kleineren Wert und reduziere ihn leicht, um sicherzugehen, dass das Objekt nicht über den Rand hinausgeht
-  const safeScaleFactor = 0.95; // Puffer, um sicherzustellen, dass es nicht zu groß wird
-
-  return Math.min(scaleWidth, scaleHeight) * safeScaleFactor;
-}
-
+      const box = new THREE.Box3().setFromObject(object);
+      const size = new THREE.Vector3();
+      box.getSize(size);
+      return size;
+    }
 
 
-function openScaleMenu() {
-  if (!selectedPlacedModel) {
-    showInfoDialog("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bearbeiten.");
-    return;
-  }
+    function calculateMaxScale(object) {
+      const boundingBox = calculateBoundingBox(object);
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
 
-  // Berechne die maximale Skalierung für das spezifische Objekt
-  const maxScale = calculateMaxScale(selectedPlacedModel);
+      // Berechne die maximal mögliche Skalierung, um im Viewport zu bleiben
+      const scaleWidth = viewportWidth / boundingBox.x;
+      const scaleHeight = viewportHeight / boundingBox.y;
 
-  // Aktuelle Skalierung des Modells bestimmen
-  const currentScale = selectedPlacedModel.scale.x;
+      // Wähle den kleineren Wert und reduziere ihn leicht, um sicherzugehen, dass das Objekt nicht über den Rand hinausgeht
+      const safeScaleFactor = 0.95; // Puffer, um sicherzustellen, dass es nicht zu groß wird
 
-  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="${maxScale.toFixed(2)}" step="0.0001" value="${currentScale}" onchange="updateScale(this.value)"></label>
-    <button onclick="closeDynamicMenu()">Zurück</button>
-  `;
-}
+      return Math.min(scaleWidth, scaleHeight) * safeScaleFactor;
+    }
 
 
- 
-/**
- * 
+    /**
+        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 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="${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) {