PrivateCoffee/quackscape
PrivateCoffee/quackscape
4
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat(editor): enhance element property forms

Browse source 
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.
This commit is contained in:
Kumi 2024-03-28 11:26:24 +01:00
parent ae3d7ffc98
commit 4c90218490
Signed by: kumi
GPG key ID: ECBCC9082395383F
1 changed files with 36 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
assets/js/editor.js
View file

@ -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) => {