diff --git a/public/index.html b/public/index.html index 2e93c54b2706731eb5bfe590f95972f370786831..1859db7708b49e9060c8c06ce977df5a35629f4c 100644 --- a/public/index.html +++ b/public/index.html @@ -308,6 +308,7 @@ function highlightSelectedModel() { if (selectedPlacedModel) { + removeHighlightFromAllModels(); selectedPlacedModel.traverse((child) => { if (child.isMesh) { child.material.emissive.setHex(0xff0000); // Rote Hervorhebung @@ -324,6 +325,14 @@ } } + function removeHighlightFromAllModels() { + scene.traverse((child) => { + if (child.isMesh && child.material && child.material.emissive) { + child.material.emissive.setHex(0x000000); // Markierung entfernen + } + }); + } + function deleteModel() { if (!selectedPlacedModel) { console.log("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es löschen."); @@ -427,6 +436,7 @@ 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."); @@ -441,19 +451,16 @@ <div id="position-info"> <p>Aktuelle Position: X=${selectedPlacedModel.position.x.toFixed(2)}, Z=${selectedPlacedModel.position.z.toFixed(2)}</p> </div> - <div> - <p>Verschiebungsgröße: <span id="move-delta-display">${moveDelta.toFixed(2)}</span></p> - <input type="range" min="0.01" max="1.0" step="0.01" value="${moveDelta}" - onchange="updateMoveDelta(this.value)"> - </div> - <div style="display: flex; flex-direction: column; align-items: center; gap: 10px;"> + <label>Verschiebungsgröße: <span id="move-delta-display">${moveDelta.toFixed(2)}</span></label> + <input type="range" min="0.01" max="1.0" step="0.01" value="${moveDelta}" onchange="updateMoveDelta(this.value)"> + <div style="display: flex; flex-direction: column; align-items: center;"> <div> - <button onclick="moveModel('x', -moveDelta)">↠X</button> - <button onclick="moveModel('x', moveDelta)">→ X</button> + <button onclick="moveModelDynamic('x', -1)">↠X</button> + <button onclick="moveModelDynamic('x', 1)">→ X</button> </div> <div> - <button onclick="moveModel('z', -moveDelta)">- Z</button> - <button onclick="moveModel('z', moveDelta)">+ Z</button> + <button onclick="moveModelDynamic('z', -1)">- Z</button> + <button onclick="moveModelDynamic('z', 1)">+ Z</button> </div> </div> <button onclick="closeDynamicMenu()">Zurück</button> @@ -468,11 +475,12 @@ } } - function moveModel(axis, delta) { + function moveModelDynamic(axis, direction) { if (selectedPlacedModel) { - selectedPlacedModel.position[axis] += delta; // Bewegung durchführen + const delta = direction * moveDelta; // Dynamischer Wert basierend auf Slider + selectedPlacedModel.position[axis] += delta; - // Positionsanzeige im Dynamic-Menü aktualisieren + // Position im Menü aktualisieren const positionInfo = document.getElementById("position-info"); if (positionInfo) { positionInfo.innerHTML = ` diff --git a/public/style.css b/public/style.css index 44aa09cd4cbce176b622fb1badae558ffdf43874..866ee0e740e7199ee3df8403eb41bdcd4dd7b925 100644 --- a/public/style.css +++ b/public/style.css @@ -170,17 +170,17 @@ body { #dynamic-menu { position: absolute; - bottom: 80px; + bottom: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; - gap: 20px; + gap: 10px; background: #1e1e1e; box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.8); color: white; width: 100vw; - height: 200px; + height: 250px; z-index: 20; overflow-y: auto; border-radius: 8px;