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

feat(editor): introduce debug mode for element properties

Browse source 
Wrapped element creation and modification properties sections in a div
with a `hide` class, which can now be toggled via a keyboard shortcut
(Ctrl+Shift+Q). This debug mode allows developers to easily view and
hide debugging information about elements being created or modified in
the editor. This enhancement is aimed at improving the development and
troubleshooting process by providing quick access to relevant debug
information without cluttering the UI for users.

Additionally, a new function `toggleDebugVisibility` was added to manage
the visibility of debug information, and a keyboard event listener was
implemented to handle the specified keyboard shortcut.

This update aims to balance the need for detailed debugging information
during development with a clean, user-friendly interface during regular
use.
This commit is contained in:
Kumi 2024-03-28 11:33:34 +01:00
parent 4c90218490
commit 538ddd76e9
Signed by: kumi
GPG key ID: ECBCC9082395383F
1 changed files with 31 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
assets/js/editor.js
View file

@ -55,15 +55,18 @@ function startCreateElement(event) {
event.detail.intersection.point.z
);
propertiesContent.innerHTML = `<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/>
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>
Parent Element Type: ${event.srcElement.tagName}<br/>
<hr/>
<form id="newElementForm">
<label for="resourcetype" class="form-label">Element Type</label>
<select class="form-control" aria-label="Element Type" id="resourcetype">
@ -198,11 +201,14 @@ function startModifyElement(event) {
element_data_request.then((element_data) => {
var propertiesContent = document.getElementById("propertiesContent");
propertiesContent.innerHTML = `<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/>
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>
<form id="modifyElementForm">
<input type="hidden" id="csrfmiddlewaretoken" value="${getCookie(
@ -325,3 +331,15 @@ document.addEventListener("loadedQuackscapeScene", function (event) {
}
}
});
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();
}
});