Update public/ar_main.js, public/style.css

public/ar_main.js

@@ -345,6 +345,8 @@ function updateScale(percentValue, minScale, maxScale) {
     }
 }
 
+let moveDelta = 0.1; // Standardwert für die Verschiebungsgröße, kann mit dem Slider geändert werden
+
 function openMoveMenu() {
     if (!selectedPlacedModel) {
         console.log("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bewegen.");
@@ -353,22 +355,29 @@ function openMoveMenu() {
 
     const dynamicMenu = document.getElementById("dynamic-menu");
     dynamicMenu.style.display = "flex";
-
     dynamicMenu.innerHTML = `
-        <div id="move-menu">
-            <h3>Modell bewegen</h3>
-            <div id="button-controls">
-                <button id="up" onclick="moveModelDynamic('z', -0.1)">↑</button>
-                <div class="middle-row">
-                    <button id="left" onclick="moveModelDynamic('x', -0.1)">←</button>
-                    <div class="spacer"></div>
-                    <button id="right" onclick="moveModelDynamic('x', 0.1)">→</button>
-                </div>
-                <button id="down" onclick="moveModelDynamic('z', 0.1)">↓</button>
+        <h3>Position anpassen</h3>
+        <label>Verschiebungsgröße: <span id="move-delta-display">${moveDelta.toFixed(2)}</span>
+        <input type="range" min="0.01" max="1.0" step="0.01" value="${moveDelta}" onchange="updateMoveDelta(this.value)"></label>
+        <div id="button-controls">
+            <button class="control-button" id="up" onclick="moveModelDynamic('z', -moveDelta)">↑</button>
+            <div class="middle-row">
+                <button class="control-button" id="left" onclick="moveModelDynamic('x', -moveDelta)">←</button>
+                <div class="spacer"></div>
+                <button class="control-button" id="right" onclick="moveModelDynamic('x', moveDelta)">→</button>
             </div>
-            <button onclick="closeDynamicMenu()">Zurück</button>
+            <button class="control-button" id="down" onclick="moveModelDynamic('z', moveDelta)">↓</button>
         </div>
-        `;
+        <button onclick="closeDynamicMenu()">Zurück</button>
+      `;
+}
+
+function updateMoveDelta(value) {
+    moveDelta = parseFloat(value);
+    const moveDeltaDisplay = document.getElementById("move-delta-display");
+    if (moveDeltaDisplay) {
+        moveDeltaDisplay.textContent = moveDelta.toFixed(2);
+    }
 }
 
 function moveModelDynamic(axis, value) {

public/style.css

@@ -240,34 +240,26 @@ button:active {
 
 
 /* Style für Move Menu */
-#move-menu {
+#button-controls {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: 2px;
 }
 
-#move-menu #button-controls {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-#move-menu .middle-row {
+#button-controls .middle-row {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: 2px;
 }
 
-#move-menu button {
-  width: 50px;
-  height: 50px;
+#button-controls .control-button {
+  width: 40px;
+  height: 40px;
   border: none;
-  border-radius: 8px;
+  border-radius: 5px;
   background-color: #007BFF;
   color: white;
   font-size: 18px;
@@ -275,11 +267,11 @@ button:active {
   transition: background-color 0.3s, transform 0.2s;
 }
 
-#move-menu button:active {
+#button-controls .control-button:active {
   background-color: #0056b3;
   transform: scale(0.95);
 }
 
-#move-menu .spacer {
-  width: 50px; /* Platzhalter für die Lücke zwischen den Buttons */
-}
\ No newline at end of file
+#button-controls .spacer {
+  width: 40px;
+}