From 538ddd76e99d3a3e68367119b86ebf018f86cc15 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Thu, 28 Mar 2024 11:33:34 +0100
Subject: [PATCH] feat(editor): introduce debug mode for element properties

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.
---
 assets/js/editor.js | 44 +++++++++++++++++++++++++++++++-------------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/assets/js/editor.js b/assets/js/editor.js
index 328ad3d..66e0676 100644
--- a/assets/js/editor.js
+++ b/assets/js/editor.js
@@ -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();
+  }
+});
\ No newline at end of file