quackscape/assets/js/editor.js

369 lines
12 KiB
JavaScript
Raw Normal View History

import { getScene, getSceneElement, getCategory, getCookie } from "./api";
import { populateDestinationDropdown } from "./editor/teleport";
2024-03-11 14:56:03 +00:00
import registerClickDrag from "@kumitterer/aframe-click-drag-component";
registerClickDrag(window.aframe);
import "../css/editor.css";
2024-03-11 14:56:03 +00:00
let clickTimestamp = 0;
// Find parent quackscape-scene for ID
function findParentScene(element) {
var parent = element.parentElement;
while (parent.tagName != "QUACKSCAPE-SCENE") {
parent = parent.parentElement;
}
return parent;
}
// Distinguishing clicks from drags based on duration.
// TODO: Find a better way to distinguish these.
function addEventListeners(element) {
element.addEventListener("mousedown", function (event) {
clickTimestamp = event.timeStamp;
});
element.addEventListener("mouseup", function (event) {
if (event.timeStamp - clickTimestamp > 200) {
// Ignoring this, we only handle regular short clicks.
return;
} else {
handleClick(event);
}
// Right-clicks are definitely intentional.
element.addEventListener("contextmenu", function (event) {
handleClick(event);
});
});
}
// Open a modal for creating a new Element
function startCreateElement(event) {
var propertiesTitle = document.getElementById("propertiesTitle");
propertiesTitle.textContent = "Create Element";
2024-03-11 14:56:03 +00:00
var propertiesContent = document.getElementById("propertiesContent");
2024-03-11 14:56:03 +00:00
var thetaStart = cartesianToTheta(
event.detail.intersection.point.x,
event.detail.intersection.point.z
);
propertiesContent.innerHTML = `
<div class="hide" id="propertiesDebug">
<b>Creating element at:</b><br/>
X: ${event.detail.intersection.point.x}<br/>
Y: ${event.detail.intersection.point.y}<br/>
Z: ${event.detail.intersection.point.z}<br/>
Calculated Theta: ${thetaStart}<br/>
Parent Element Type: ${event.srcElement.tagName}<br/>
<hr/>
</div>
2024-03-11 14:56:03 +00:00
<form id="newElementForm">
<label for="resourcetype" class="form-label">Element Type</label>
<select class="form-control" aria-label="Element Type" id="resourcetype">
<option selected>Select Element Type</option>
<option value="MarkerElement">Marker</option>
<option value="ImageElement">Image</option>
<option value="TeleportElement">Teleport</option>
</select>
<input type="hidden" id="csrfmiddlewaretoken" value="${getCookie(
"csrftoken"
)}">
<div id="elementProperties"></div>
2024-03-11 14:56:03 +00:00
</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");
document
.getElementById("resourcetype")
.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);
});
});
});
2024-03-11 14:56:03 +00:00
}
function createElementPropertiesForm(elementType) {
const elementProperties = document.getElementById("elementProperties");
let inputFields = "";
switch (elementType) {
case "MarkerElement":
case "ImageElement":
case "TeleportElement":
inputFields = `
<div class="mb-2">
<label for="title" class="form-label">Title</label>
<input type="text" class="form-control" id="title" placeholder="Title">
</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>
`;
if (elementType !== "MarkerElement") {
inputFields += `
<div class="mb-2">
<label for="elementUpload" class="form-label">Image</label>
<input id="elementUpload" type="file" class="form-control">
</div>`;
}
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>
</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>
</div>
</div>
</div>
`;
}
break;
default:
// TODO: Handle unknown element type
}
elementProperties.innerHTML = inputFields;
}
function startModifyElement(event) {
// Make the element draggable for positioning
event.target.setAttribute("click-drag", "enabled: true;");
// Listen for "dragend" event to update the element's position
event.target.addEventListener("dragend", function (event) {
updateElementLocation(event);
});
var propertiesTitle = document.getElementById("propertiesTitle");
propertiesTitle.textContent = "Modify Element";
2024-03-11 14:56:03 +00:00
// Get element from API
var scene = findParentScene(event.target);
var element_data_request = getSceneElement(
scene.getAttribute("id"),
event.target.getAttribute("id")
);
element_data_request.then((element_data) => {
var propertiesContent = document.getElementById("propertiesContent");
2024-03-11 14:56:03 +00:00
propertiesContent.innerHTML = `
<div class="hide" id="propertiesDebug">
<b>Modifying element:</b><br/>
Element Type: ${event.srcElement.tagName}<br/>
Element ID: ${event.target.getAttribute("id")}<br/>
Element data: ${JSON.stringify(element_data.obj)}<br/>
<hr/>
</div>
2024-03-11 14:56:03 +00:00
<form id="modifyElementForm">
<input type="hidden" id="csrfmiddlewaretoken" value="${getCookie(
"csrftoken"
)}">
<input type="hidden" id="id" value="${event.target.getAttribute("id")}">
<div id="elementProperties"></div>
2024-03-11 14:56:03 +00:00
</form>
`;
createElementPropertiesForm(element_data.obj.resourcetype);
var scene_data_request = getScene(scene.getAttribute("id"));
scene_data_request.then((scene_data) => {
var category_data_request = getCategory(scene_data.obj.category);
category_data_request.then((category_data) => {
populateDestinationDropdown(
element_data.obj.destination,
category_data
);
});
});
document
.getElementById("elementUpload")
.addEventListener("change", function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
// Set the image to the file contents
if (event.target.getAttribute("data-original-src") == undefined) {
event.target.setAttribute(
"data-original-src",
event.target.getAttribute("src")
);
}
event.target.setAttribute("src", e.target.result);
};
reader.readAsDataURL(this.files[0]);
}
});
if (element_data.obj.destination_x != -1) {
document.getElementById("destination_x").value =
element_data.obj.destination_x;
}
if (element_data.obj.destination_y != -1) {
document.getElementById("destination_y").value =
element_data.obj.destination_y;
}
if (element_data.obj.destination_z != -1) {
document.getElementById("destination_z").value =
element_data.obj.destination_z;
}
document.getElementById("resetButton").classList.remove("hide");
document.getElementById("buttons").classList.remove("hide");
2024-03-11 14:56:03 +00:00
});
}
function cartesianToTheta(x, z) {
// Calculate the angle in radians
let angleRadians = Math.atan2(z, x);
// Convert to degrees
let angleDegrees = angleRadians * (180 / Math.PI);
// A-Frame's thetaStart is measured from the positive X-axis ("right" direction)
// and goes counter-clockwise, so this should directly give us the thetaStart value.
let thetaStart = 90 - angleDegrees;
// Since atan2 returns values from -180 to 180, let's normalize this to 0 - 360
thetaStart = thetaStart < 0 ? thetaStart + 360 : thetaStart;
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 };
}
2024-03-11 14:56:03 +00:00
function latLonToXYZ(lat, lon, radius = 5) {
// Convert lat/lon to X/Y/Z coordinates on the sphere
const phi = (90 - lat) * (Math.PI / 180);
const theta = (lon + 180) * (Math.PI / 180);
const x = -(radius * Math.sin(phi) * Math.cos(theta));
const y = radius * Math.cos(phi);
const z = radius * Math.sin(phi) * Math.sin(theta);
return { x, y, z };
}
function handleClick(event) {
// If clicked on the sky, start creating a new element
2024-03-11 14:56:03 +00:00
if (event.target.tagName == "A-SKY") {
startCreateElement(event);
2024-03-11 14:56:03 +00:00
} else {
// Else we are modifying an existing element
startModifyElement(event);
2024-03-11 14:56:03 +00:00
}
}
document.addEventListener("loadedQuackscapeScene", function (event) {
// Get the scene
var scene = document.querySelector("a-scene");
// Get all children
var children = scene.children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.tagName.startsWith("A-")) {
// Remove original onclick events
if (child.hasAttribute("onclick")) {
child.removeAttribute("onclick");
}
// Add new event listeners
addEventListeners(child);
}
}
});
function updateElementLocation(event) {
const theta = cartesianToTheta(event.detail.offset.x, event.detail.offset.z);
event.target.setAttribute("theta-start", theta);
}
function toggleDebugVisibility() {
const debugElement = document.getElementById("propertiesDebug");
debugElement.classList.toggle("hide");
}
document.addEventListener("keydown", function (event) {
if (event.ctrlKey && event.shiftKey && event.key === "Q") {
toggleDebugVisibility();
event.preventDefault();
}
});