From c43ddfef2a4fe7a4a2a3df0679ad77b1a5b5476b Mon Sep 17 00:00:00 2001 From: Kumi Date: Thu, 28 Mar 2024 12:27:10 +0100 Subject: [PATCH] fix(editor): correct TeleportElement option and improve dropdown Correctly set the value for the Teleport option in the element creation form, ensuring that elements are correctly classified. Enhanced dynamic data fetching for scenes and categories to populate the destination dropdown based on the scene's category, improving user experience in specifying teleport destinations. Resolved an issue with event propagation by explicitly setting the button type for dropdown items, preventing form submission on selection. This change streamlines the process of creating teleport elements and selecting destinations within the editor, making it more intuitive and error-free. - Removed outdated TODO comment related to element drags handling. - Removed unused rotation input fields for a cleaner UI. - Added conversion function `thetaToCartesian` for future functionalities. --- assets/js/editor.js | 94 +++++++++++++++++++++--------------- assets/js/editor/teleport.js | 2 + 2 files changed, 58 insertions(+), 38 deletions(-) diff --git a/assets/js/editor.js b/assets/js/editor.js index 66e0676..0d1ea9f 100644 --- a/assets/js/editor.js +++ b/assets/js/editor.js @@ -30,7 +30,6 @@ function addEventListeners(element) { element.addEventListener("mouseup", function (event) { if (event.timeStamp - clickTimestamp > 200) { // Ignoring this, we only handle regular short clicks. - // TODO: Find a way to handle drags of elements return; } else { handleClick(event); @@ -73,7 +72,7 @@ function startCreateElement(event) { - + `; + var scene = findParentScene(event.target); + var scene_data_request = getScene(scene.getAttribute("id")); + document.getElementById("resetButton").classList.remove("hide"); document.getElementById("buttons").classList.remove("hide"); @@ -90,6 +92,14 @@ function startCreateElement(event) { .addEventListener("change", function () { var selectedType = document.getElementById("resourcetype").value; createElementPropertiesForm(selectedType, event, thetaStart); + + scene_data_request.then((scene_data) => { + var category_data_request = getCategory(scene_data.obj.category); + + category_data_request.then((category_data) => { + populateDestinationDropdown(null, category_data); + }); + }); }); } @@ -120,20 +130,6 @@ function createElementPropertiesForm(elementType) { -
- -
-
- -
-
- -
-
- -
-
-
`; if (elementType !== "MarkerElement") { inputFields += ` @@ -144,30 +140,30 @@ function createElementPropertiesForm(elementType) { } if (elementType === "TeleportElement") { inputFields += ` -
- - - - -
- -
-
- -
-
- -
-
- +
+ +
+
+ +
+
+ +
+
+ +
-
`; } break; @@ -288,6 +284,28 @@ function cartesianToTheta(x, z) { return thetaStart; } +function thetaToCartesian(thetaStart, radius = 1) { + // Convert thetaStart back to the angle in degrees as used in standard Cartesian coordinates. + let angleDegrees = 90 - thetaStart; + + // Normalize the angle to be within the range of 0 to 360 degrees + angleDegrees = angleDegrees % 360; + if (angleDegrees < 0) { + angleDegrees += 360; + } + + // Convert the angle back to radians + let angleRadians = angleDegrees * (Math.PI / 180); + + // Calculate the Cartesian coordinates using the angle and radius + // x = r * cos(θ) + let x = radius * Math.cos(angleRadians); + // z = r * sin(θ) + let z = radius * Math.sin(angleRadians); + + return { x, z }; +} + function latLonToXYZ(lat, lon, radius = 5) { // Convert lat/lon to X/Y/Z coordinates on the sphere const phi = (90 - lat) * (Math.PI / 180); @@ -337,9 +355,9 @@ function toggleDebugVisibility() { debugElement.classList.toggle("hide"); } -document.addEventListener('keydown', function(event) { - if (event.ctrlKey && event.shiftKey && event.key === 'Q') { +document.addEventListener("keydown", function (event) { + if (event.ctrlKey && event.shiftKey && event.key === "Q") { toggleDebugVisibility(); event.preventDefault(); } -}); \ No newline at end of file +}); diff --git a/assets/js/editor/teleport.js b/assets/js/editor/teleport.js index e8872a6..cc3bf92 100644 --- a/assets/js/editor/teleport.js +++ b/assets/js/editor/teleport.js @@ -42,6 +42,7 @@ function populateDestinationDropdown(initial, category_data) { item.img = resolutions[0].file; const element = document.createElement("button"); + element.setAttribute("type", "button"); element.classList.add("dropdown-item"); element.innerHTML = `${item.title}${item.title}`; element.onclick = function () { @@ -62,6 +63,7 @@ function populateDestinationDropdown(initial, category_data) { // Repopulate dropdown with filtered items filteredItems.forEach((item) => { const element = document.createElement("button"); + element.setAttribute("type", "button"); element.classList.add("dropdown-item"); element.innerHTML = `${item.title} ${item.title}`; element.onclick = function () {