Add reordering panels

Author: The-Noah

src/app.ts

@@ -1,5 +1,6 @@
 import * as bzw from "./bzw/mod.ts";
 import * as dom from "./dom/mod.ts";
+import "./editor/mod.ts";
 
 import {saveFile, colorThemeChanged, capitalize} from "./utils.ts";
 import {Renderer} from "./renderer/mod.ts";

src/dom/mod.ts

@@ -2,13 +2,13 @@ export const canvas = document.querySelector("canvas") as HTMLCanvasElement;
 export const bzwFile = document.querySelector("#bzw-file") as HTMLInputElement;
 
 export const panels = {
-  objects: document.querySelector(".objects > .panel__content") as HTMLDivElement,
-  properties: document.querySelector(".properties > .panel__content") as HTMLDivElement,
+  objects: document.querySelector("#objects > .panel__content") as HTMLDivElement,
+  properties: document.querySelector("#properties > .panel__content") as HTMLDivElement,
 };
 
 export const statusBar = {
-  objects: document.querySelector("#objects") as HTMLElement,
-  vertices: document.querySelector("#vertices") as HTMLElement,
+  objects: document.querySelector("#status--objects") as HTMLElement,
+  vertices: document.querySelector("#status--vertices") as HTMLElement,
 };
 
 export const settings = {

src/editor/mod.ts

@@ -0,0 +1 @@
+import "./panels.ts";

src/editor/panels.ts

@@ -0,0 +1,70 @@
+const panels = JSON.parse(localStorage.getItem("panels") ?? "{}");
+
+for(const panel of document.querySelectorAll<HTMLElement>(".panel")){
+  const header = panel.querySelector<HTMLElement>(".panel__header");
+  if(!header){
+    continue;
+  }
+
+  header.draggable = true;
+
+  header.addEventListener("dragstart", (e: DragEvent) => {
+    e.dataTransfer?.setData("text/plain", panel.id);
+  }, false);
+
+  panel.addEventListener("dragenter", (e: DragEvent) => {
+    e.preventDefault();
+    panel.style.borderColor = "#FFF";
+  }, false);
+
+  panel.addEventListener("dragover", (e: DragEvent) => {
+    e.preventDefault();
+    panel.style.borderColor = "#FFF";
+  }, false);
+
+  panel.addEventListener("dragleave", (e: DragEvent) => {
+    e.preventDefault();
+    panel.style.borderColor = "";
+  }, false);
+
+  panel.addEventListener("drop", (e: DragEvent) => {
+    e.stopPropagation();
+    panel.style.borderColor = "";
+
+    const id = e.dataTransfer?.getData("text/plain");
+
+    // ignore self
+    if(!id || id === panel.id){
+      return;
+    }
+
+    const otherPanel = document.querySelector<HTMLElement>(`#${id}`);
+    if(!otherPanel){
+      return;
+    }
+
+    const panelGridArea = window.getComputedStyle(panel).gridArea;
+    const otherPanelGridArea = window.getComputedStyle(otherPanel).gridArea;
+
+    panel.style.gridArea = otherPanelGridArea;
+    otherPanel.style.gridArea = panelGridArea;
+
+    // resize canvas if needed
+    if(panel.id === "preview" || otherPanel.id === "preview"){
+      const canvas = document.querySelector("canvas");
+
+      if(canvas){
+        canvas.width = 0;
+        canvas.height = 0;
+      }
+    }
+
+    panels[panel.id] = panel.style.gridArea;
+    panels[otherPanel.id] = otherPanel.style.gridArea;
+    localStorage.setItem("panels", JSON.stringify(panels));
+  }, false);
+
+  if(panels[panel.id]){
+    panel.style.gridArea = panels[panel.id];
+  }
+}

src/index.ejs

@@ -60,21 +60,21 @@
     <input type="file" id="bzw-file" accept=".bzw">
   </header>
   <main>
-    <div class="panel objects">
+    <div class="panel" id="objects">
       <div class="panel__header">
         Objects
         <svg onclick="alert('not implemented yet')" width="10" height="8" viewBox="0 0 10 8" xmlns="http://www.w3.org/2000/svg"><line y1="1" x2="10" y2="1"/><line y1="4" x2="10" y2="4"/><line y1="7" x2="10" y2="7"/></svg>
       </div>
       <div class="panel__content"></div>
     </div>
-    <div class="panel properties">
+    <div class="panel" id="properties">
       <div class="panel__header">
         Properties
         <svg onclick="alert('not implemented yet')" width="10" height="8" viewBox="0 0 10 8" xmlns="http://www.w3.org/2000/svg"><line y1="1" x2="10" y2="1"/><line y1="4" x2="10" y2="4"/><line y1="7" x2="10" y2="7"/></svg>
       </div>
       <div class="panel__content"></div>
     </div>
-    <div class="panel preview">
+    <div class="panel" id="preview">
       <div class="panel__header">
         Preview
         <svg onclick="alert('not implemented yet')" width="10" height="8" viewBox="0 0 10 8" xmlns="http://www.w3.org/2000/svg"><line y1="1" x2="10" y2="1"/><line y1="4" x2="10" y2="4"/><line y1="7" x2="10" y2="7"/></svg>
@@ -85,8 +85,8 @@
     </div>
   </main>
   <footer>
-    <span id="objects"></span>
-    <span id="vertices"></span>
+    <span id="status--objects"></span>
+    <span id="status--vertices"></span>
     <span style="flex:1"></span>
     <span><a href="https://github.com/BZFlagCommunity/webbzw" target="_blank" rel="noopener noreferrer">GitHub</a></span>
     <span>Copyright &copy; 2021 <a href="https://thenoah.dev" target="_blank" rel="noopener noreferrer">The Noah</a></span>

src/style.css

@@ -300,12 +300,12 @@ textarea.show{
   font-weight: 500;
   display: flex;
   align-items: center;
+  cursor: grab;
 }
 
 .panel__header > svg{
   margin-left: .75rem;
   stroke: var(--text-color);
-  cursor: grab;
 }
 
 .panel__content{
@@ -330,52 +330,53 @@ textarea.show{
   background-color: var(--border-color);
 }
 
-.objects{
+#objects{
   grid-column: 1;
   grid-row: 1;
 }
 
-.objects > .panel__content{
+#objects > .panel__content{
   font-size: .8rem;
   font-family: "Source Code Pro", monospace;
   line-height: 1em;
   user-select: none;
 }
 
-.objects > .panel__content > div{
+#objects > .panel__content > div{
   padding: .1rem;
   color: var(--text-light-color);
   cursor: pointer;
 }
 
-.objects > .panel__content > div.selected, .objects > .panel__content > div:hover{
+#objects > .panel__content > div.selected,
+#objects > .panel__content > div:hover{
   color: var(--text-color);
 }
 
-.properties{
+#properties{
   grid-column: 1;
   grid-row: 2;
 }
 
-.properties > .panel__content > div{
+#properties > .panel__content > div{
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 
-.properties > .panel__content > div:not(:last-child){
+#properties > .panel__content > div:not(:last-child){
   margin-bottom: .5rem;
 }
 
-.properties > .panel__content > div > *:not(input[type=checkbox]){
+#properties > .panel__content > div > *:not(input[type=checkbox]){
   flex: 1;
 }
 
-.properties > .panel__content > div > *:not(:last-child){
+#properties > .panel__content > div > *:not(:last-child){
   margin-right: .2rem;
 }
 
-.properties > .panel__content input{
+#properties > .panel__content input{
   padding: .2rem .5rem;
   background: none;
   font-family: "Source Code Pro", monospace;
@@ -385,15 +386,16 @@ textarea.show{
   outline: none;
 }
 
-.properties > .panel__content input:not([type=checkbox]){
+#properties > .panel__content input:not([type=checkbox]){
   width: 100%;
 }
 
-.preview{
+#preview{
   grid-column: 2;
   grid-row: 1 / 3;
 }
 
-.preview canvas{
+#preview canvas{
+  min-height: 100px;
   flex: 1;
 }