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

@@ -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) {
       <option selected>Select Element Type</option>
       <option value="MarkerElement">Marker</option>
       <option value="ImageElement">Image</option>
-      <option value="ImageElement">Teleport</option>
+      <option value="TeleportElement">Teleport</option>
     </select>
     <input type="hidden" id="csrfmiddlewaretoken" value="${getCookie(
       "csrftoken"
@@ -82,6 +81,9 @@ function startCreateElement(event) {
   </form>
   `;
 
+  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) {
             </div>
           </div>
         </div>
-        <div class="mb-2">
-          <label for="rotation_x" class="form-label">Rotation</label>
-          <div class="row g-2">
-            <div class="col">
-              <input type="number" class="form-control" id="rotation_x" name="rotation_x" min="0" max="360" placeholder="X">
-            </div>
-            <div class="col">
-              <input type="number" class="form-control" id="rotation_y" name="rotation_y" min="0" max="360" placeholder="Y">
-            </div>
-            <div class="col">
-              <input type="number" class="form-control" id="rotation_z" name="rotation_z" min="0" max="360" placeholder="Z">
-            </div>
-          </div>
-        </div>
         `;
       if (elementType !== "MarkerElement") {
         inputFields += `
@@ -144,30 +140,30 @@ function createElementPropertiesForm(elementType) {
       }
       if (elementType === "TeleportElement") {
         inputFields += `
-        <div class="dropdown mb-2">
-          <label for="destinationDropdownSearch" class="form-label">Teleport Destination</label>
-          <input class="form-control" autocomplete="off" id="destinationDropdownSearch" type="text" placeholder="Search...">
-          <input type="hidden" id="destination">
-          <div class="dropdown-menu" id="destinationDropdownMenu">
-            <!-- Dropdown items will be populated here by JavaScript -->
+          <div class="dropdown mb-2">
+            <label for="destinationDropdownSearch" class="form-label">Teleport Destination</label>
+            <input class="form-control" autocomplete="off" id="destinationDropdownSearch" type="text" placeholder="Search...">
+            <input type="hidden" id="destination">
+            <div class="dropdown-menu" id="destinationDropdownMenu">
+              <!-- Dropdown items will be populated here by JavaScript -->
+            </div>
           </div>
-        </div>
 
-        <div class="mb-2">
-          <label for="destination_x" class="form-label">Destination X/Y/Z Rotation</label>
-            <div class="row g-2">
-              <div class="col">
-                <input type="number" class="form-control" id="destination_x" name="destination_x" min="0" max="360" placeholder="X">
-              </div>
-              <div class="col">
-                <input type="number" class="form-control" id="destination_y" name="destination_y" min="0" max="360" placeholder="Y">
-              </div>
-              <div class="col">
-                <input type="number" class="form-control" id="destination_z" name="destination_z" min="0" max="360" placeholder="Z">
+          <div class="mb-2">
+            <label for="destination_x" class="form-label">Destination X/Y/Z Rotation</label>
+              <div class="row g-2">
+                <div class="col">
+                  <input type="number" class="form-control" id="destination_x" name="destination_x" min="0" max="360" placeholder="X">
+                </div>
+                <div class="col">
+                  <input type="number" class="form-control" id="destination_y" name="destination_y" min="0" max="360" placeholder="Y">
+                </div>
+                <div class="col">
+                  <input type="number" class="form-control" id="destination_z" name="destination_z" min="0" max="360" placeholder="Z">
+                </div>
               </div>
             </div>
           </div>
-        </div>
         `;
       }
       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();
   }
-});
+});

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 = `<img src="${item.img}" alt="${item.title}"><span class="dropdown-item-text">${item.title}</span>`;
     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 = `<img src="${item.img}" alt="${item.title}"> ${item.title}`;
         element.onclick = function () {