From 4c902184903dfb4e4514ee3d491cf9521d4322e2 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Thu, 28 Mar 2024 11:26:24 +0100
Subject: [PATCH] feat(editor): enhance element property forms

Refined the `createElementPropertiesForm` in the editor to include
position and rotation inputs, improving user interaction for specifying
these attributes. Simplified the function's parameters by removing
unnecessary event and thetaStart arguments, streamlining the codebase.
Also corrected the naming of `destination_x`, `destination_y`, and
`destination_z` input names for consistency. Marked handling of unknown
element types with a TODO to prompt future development. This enhancement
allows for more precise control over element positioning and
orientation, directly impacting user experience positively.
---
 assets/js/editor.js | 47 ++++++++++++++++++++++++++++++++++-----------
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/assets/js/editor.js b/assets/js/editor.js
index 900dcee..328ad3d 100644
--- a/assets/js/editor.js
+++ b/assets/js/editor.js
@@ -90,7 +90,7 @@ function startCreateElement(event) {
     });
 }
 
-function createElementPropertiesForm(elementType, event, thetaStart) {
+function createElementPropertiesForm(elementType) {
   const elementProperties = document.getElementById("elementProperties");
   let inputFields = "";
 
@@ -102,7 +102,36 @@ function createElementPropertiesForm(elementType, event, thetaStart) {
         <div class="mb-2">
           <label for="title" class="form-label">Title</label>
           <input type="text" class="form-control" id="title" placeholder="Title">
-        </div>`;
+        </div>
+        <div class="mb-2">
+          <label for="position_x" class="form-label">Position</label>
+          <div class="row g-2">
+            <div class="col">
+              <input type="number" class="form-control" id="position_x" name="position_x" min="0" max="360" placeholder="X">
+            </div>
+            <div class="col">
+              <input type="number" class="form-control" id="position_y" name="position_y" min="0" max="360" placeholder="Y">
+            </div>
+            <div class="col">
+              <input type="number" class="form-control" id="position_z" name="position_z" min="0" max="360" placeholder="Z">
+            </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 += `
           <div class="mb-2">
@@ -125,13 +154,13 @@ function createElementPropertiesForm(elementType, event, thetaStart) {
           <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="input1" min="0" max="360" placeholder="X">
+                <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="input2" min="0" max="360" placeholder="Y">
+                <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="input3" min="0" max="360" placeholder="Z">
+                <input type="number" class="form-control" id="destination_z" name="destination_z" min="0" max="360" placeholder="Z">
               </div>
             </div>
           </div>
@@ -140,7 +169,7 @@ function createElementPropertiesForm(elementType, event, thetaStart) {
       }
       break;
     default:
-    // Handle unknown element type
+    // TODO: Handle unknown element type
   }
 
   elementProperties.innerHTML = inputFields;
@@ -184,11 +213,7 @@ function startModifyElement(event) {
     </form>
     `;
 
-    createElementPropertiesForm(
-      element_data.obj.resourcetype,
-      event,
-      element_data.obj.thetaStart
-    );
+    createElementPropertiesForm(element_data.obj.resourcetype);
 
     var scene_data_request = getScene(scene.getAttribute("id"));
     scene_data_request.then((scene_data) => {