From 5ea742eca1b7b11d3e1a01e95925a7ded76ae311 Mon Sep 17 00:00:00 2001 From: The Noah Date: Sat, 10 Apr 2021 00:50:03 -0500 Subject: [PATCH] Add reordering panels --- src/app.ts | 1 + src/dom/mod.ts | 8 ++--- src/editor/mod.ts | 1 + src/editor/panels.ts | 70 ++++++++++++++++++++++++++++++++++++++++++++ src/index.ejs | 10 +++---- src/style.css | 30 ++++++++++--------- 6 files changed, 97 insertions(+), 23 deletions(-) create mode 100644 src/editor/mod.ts create mode 100644 src/editor/panels.ts diff --git a/src/app.ts b/src/app.ts index 005cdd9..e8a8566 100644 --- a/src/app.ts +++ b/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"; diff --git a/src/dom/mod.ts b/src/dom/mod.ts index 88e1a2b..005dd8b 100644 --- a/src/dom/mod.ts +++ b/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 = { diff --git a/src/editor/mod.ts b/src/editor/mod.ts new file mode 100644 index 0000000..1856c3e --- /dev/null +++ b/src/editor/mod.ts @@ -0,0 +1 @@ +import "./panels.ts"; diff --git a/src/editor/panels.ts b/src/editor/panels.ts new file mode 100644 index 0000000..e8536d1 --- /dev/null +++ b/src/editor/panels.ts @@ -0,0 +1,70 @@ +const panels = JSON.parse(localStorage.getItem("panels") ?? "{}"); + +for(const panel of document.querySelectorAll(".panel")){ + const header = panel.querySelector(".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(`#${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]; + } +} diff --git a/src/index.ejs b/src/index.ejs index 6a8bafd..1c3568a 100644 --- a/src/index.ejs +++ b/src/index.ejs @@ -60,21 +60,21 @@
-
+
Objects
-
+
Properties
-
+
Preview @@ -85,8 +85,8 @@