Tree View Demo

Demoing out how I want to display NBT data using a tree view, like how NBTExplorer and other apps commonly show NBT to users for editing.

#4

index.html

@@ -27,7 +27,7 @@
   <button id="formatOpener" disabled>Format Options...</button>
 </header>
 
-<textarea id="editor" disabled placeholder="NBT data will show here..." wrap="off" spellcheck="false" autocomplete="off" autocapitalize="none" autocorrect="off"></textarea>
+<nbt-tree id="editor" disabled placeholder="NBT data will show here..."></nbt-tree>
 
 <dialog id="formatDialog">
   <form id="formatForm" method="dialog">

src/app.ts

@@ -44,8 +44,7 @@ document.addEventListener("drop",async event => {
 });
 
 saver.addEventListener("click",async () => {
-  const snbt = editor.value;
-  const nbt = parse(snbt);
+  const nbt = editor.value;
   const options = saveOptions();
   const nbtData = new NBTData(nbt,options);
   const file = await writeFile(nbtData);
@@ -70,13 +69,42 @@ formatOpener.addEventListener("click",() => {
   formatDialog.showModal();
 });
 
+const demo = fetch("./bigtest.nbt")
+  .then(response => response.blob())
+  .then(blob => new File([blob],"bigtest.nbt"));
+demo.then(console.log);
+demo.then(openFile);
+
+export class NBTTree extends HTMLElement {
+  #value: NBTData | null = null;
+
+  get value(): NBTData | null {
+    return this.#value;
+  }
+
+  set value(value: NBTData | null) {
+    console.log(value);
+    this.#value = value;
+    if (value !== null){
+      this.textContent = stringify(value);
+    }
+  }
+}
+
+window.customElements.define("nbt-tree",NBTTree);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "nbt-tree": NBTTree;
+  }
+}
+
 /**
  * Attempts to read an NBT file, then open it in the editor.
 */
 export async function openFile(file: File | FileSystemFileHandle | DataTransferFile): Promise<void> {
   saver.disabled = true;
   formatOpener.disabled = true;
-  editor.disabled = true;
 
   if (file instanceof DataTransferItem){
     const handle = await file.getAsFileSystemHandle?.() ?? null;
@@ -92,16 +120,14 @@ export async function openFile(file: File | FileSystemFileHandle | DataTransferF
   const nbt = await readFile(file);
   if (nbt === null) return;
 
-  const snbt = stringify(nbt,{ space: 2 });
   openOptions(nbt);
   name = file.name;
 
   document.title = `Dovetail - ${name}`;
 
   saver.disabled = false;
   formatOpener.disabled = false;
-  editor.value = snbt;
-  editor.disabled = false;
+  editor.value = nbt;
 }
 
 /**

src/global.d.ts

@@ -1,3 +1,5 @@
+import type { NBTTree } from "./app.js";
+
 declare global {
   interface DataTransferFile extends DataTransferItem {
     readonly kind: "file";
@@ -15,7 +17,7 @@ declare global {
   var saver: HTMLButtonElement;
   var fileOpener: HTMLInputElement;
   var formatOpener: HTMLButtonElement;
-  var editor: HTMLTextAreaElement;
+  var editor: NBTTree;
   var formatDialog: HTMLDialogElement;
   var formatForm: HTMLFormElement & {
     readonly elements: FormatOptionsCollection;

styles.css

@@ -56,8 +56,7 @@ input[type="file"] {
   display: none;
 }
 
-textarea {
-  margin: 0;
+nbt-tree {
   padding: 8px;
   flex-grow: 1;
   font-size: 13px;
@@ -71,11 +70,9 @@ textarea {
   border-top: 1px solid #80808080;
   border-bottom-width: env(safe-area-inset-bottom);
   border-radius: 0;
-  outline: none;
-  resize: none;
 }
 
-textarea[disabled] {
+nbt-tree[disabled] {
   opacity: unset;
 }