Tree View TypedArray Debugging

TypedArray-like tag entries are now rendered correctly in the Tree View! The issue is that my current implementation for the tree view component sections isn't specific enough to each tag type, and the types for each tag's value was being lost because I was iterating over them as plain primitive values, rather than ones of a specific TypedArray type. Ideally I shouldn't be creating new objects just to handle this type information, and the renderer should instead know how to handle it's children properly. This is a temporary fix, I will implement a separate render function for each tag type instead, which will remove the need for making new primitive wrappers just to render the TypedArray values.

I also removed the key number counts for compound tags, moved the NBTTree component modules to the main app source folder, and adjusted some control flow for the drag and drop implementation. I plan on hopefully bringing multiple-editor support like STE has, so you can edit more than one file at once. I think I need to add that before any other feature, as those will rely on the base implementation of how the editor works, and right now it only supports one. So it would be one more migration that I can avoid if I can add multi-editor support beforehand.

#4

src/nbt-tree/NBTBranch.ts → src/NBTBranch.ts

@@ -1,10 +1,9 @@
-import { NBTData, getTagType } from "nbtify";
+import { NBTData, TAG, getTagType, Int8, Int32 } from "nbtify";
 
-import type { Tag, ByteTag, ShortTag, IntTag, LongTag, FloatTag, DoubleTag, ByteArrayTag, StringTag, ListTag, CompoundTag, IntArrayTag, LongArrayTag, TAG } from "nbtify";
+import type { Tag, ByteTag, ShortTag, IntTag, LongTag, FloatTag, DoubleTag, ByteArrayTag, StringTag, ListTag, CompoundTag, IntArrayTag, LongArrayTag } from "nbtify";
 
 export class NBTBranch<T extends Tag = Tag> extends HTMLElement {
   #name: string | null;
-  #type!: TAG;
   #value!: T;
 
   constructor(value: T | NBTData, name: string | null = null) {
@@ -15,34 +14,43 @@ export class NBTBranch<T extends Tag = Tag> extends HTMLElement {
 
   #render(): void {
     // console.log(this.#value);
-    switch (this.#type){
-      case 1:
-      case 2:
-      case 3:
-      case 4:
-      case 5:
-      case 6:
-      case 8: {
+    switch (this.type){
+      case TAG.BYTE:
+      case TAG.SHORT:
+      case TAG.INT:
+      case TAG.LONG:
+      case TAG.FLOAT:
+      case TAG.DOUBLE:
+      case TAG.STRING: {
+        if (this.#name === null){
+          throw new Error(`Tag type '${TAG[this.type]}' must have a name provided in reference to it's parent container.`);
+        }
+        const name = this.#name;
         const value = this.#value as ByteTag | ShortTag | IntTag | LongTag | FloatTag | DoubleTag | StringTag;
-        this.innerHTML = `<label>${this.#name!}: ${value}</label>`;
+        console.log(`${name}:`,value);
+        this.innerHTML = `<label>${name satisfies string}: ${value.valueOf().toString() satisfies string}</label>`;
         break;
       }
-      case 7:
-      case 9:
-      case 10:
-      case 11:
-      case 12: {
+      case TAG.BYTE_ARRAY:
+      case TAG.LIST:
+      case TAG.COMPOUND:
+      case TAG.INT_ARRAY:
+      case TAG.LONG_ARRAY: {
         const value = this.#value as ByteArrayTag | ListTag<Tag> | CompoundTag | IntArrayTag | LongArrayTag;
         const details = document.createElement("details");
         const summary = document.createElement("summary");
         if (this.#name !== null){
-          summary.append(`${this.#name} [${Object.keys(value).length}]`);
+          summary.append(`${this.#name}${this.type !== TAG.COMPOUND ? ` [${Object.keys(value).length}]` : ""}`);
+          if (this.type !== TAG.LIST && this.type !== TAG.COMPOUND) details.open = true;
         } else {
           details.open = true;
         }
         details.append(summary);
-        for (const [name,entry] of Object.entries(value)){
+        for (let [name,entry] of Object.entries(value)){
           if (entry === undefined) continue;
+          // This should be handled without needing to create a new wrapper object for each tag, just to render it.
+          if (this.type === TAG.BYTE_ARRAY) entry = new Int8(entry as number);
+          if (this.type === TAG.INT_ARRAY) entry = new Int32(entry as number);
           details.append(new NBTBranch(entry,name));
         }
         this.append(details);
@@ -51,17 +59,16 @@ export class NBTBranch<T extends Tag = Tag> extends HTMLElement {
   }
 
   get type(): TAG {
-    return this.#type;
+    return getTagType(this.#value);
   }
 
   get value(): T {
     return this.#value;
   }
 
   set value(value: T) {
-    this.#type = getTagType(value)!;
-    this.dataset["type"] = `${this.#type}`;
     this.#value = value;
+    this.dataset["type"] = `${this.type}`;
     this.#render();
   }
 }

src/app.ts

@@ -1,13 +1,13 @@
 import "./compression-polyfill.js";
-import "./nbt-tree/index.js";
+import "./NBTTree.js";
 import { read, write, parse, stringify, NBTData, Int32 } from "nbtify";
 
 import type { Name, Endian, Compression, BedrockLevel, Format } from "nbtify";
 
 const platform: string = navigator.userAgentData?.platform ?? navigator.platform;
 const isiOSDevice: boolean = /^(Mac|iPhone|iPad|iPod)/i.test(platform) && typeof navigator.standalone === "boolean";
 
-let showTreeView: boolean = false;
+let showTreeView: boolean = true;
 
 /**
  * The name of the currently opened file.
@@ -81,11 +81,11 @@ treeViewToggle.addEventListener("change",() => {
   updateTreeView();
 });
 
-// const demo = fetch("./bigtest.nbt")
-//   .then(response => response.blob())
-//   .then(blob => new File([blob],"bigtest.nbt"));
-// demo.then(console.log);
-// demo.then(openFile);
+const demo = fetch("./bigtest.nbt")
+  .then(response => response.blob())
+  .then(blob => new File([blob],"bigtest.nbt"));
+demo.then(console.log);
+demo.then(openFile);
 
 /**
  * Attempts to read an NBT file, then open it in the editor.
@@ -96,8 +96,8 @@ export async function openFile(file: File | FileSystemFileHandle | DataTransferF
   editor.disabled = true;
 
   if (file instanceof DataTransferItem){
-    const handle = await file.getAsFileSystemHandle?.() ?? null;
-    file = handle === null || !(handle instanceof FileSystemFileHandle) ? file.getAsFile() : handle;
+    const handle: FileSystemHandle | null = await file.getAsFileSystemHandle?.() ?? null;
+    file = handle instanceof FileSystemFileHandle ? handle : file.getAsFile();
   }
   if ("getFile" in file){
     fileHandle = file;

src/global.d.ts

@@ -1,4 +1,4 @@
-import type { NBTTree } from "./nbt-tree/index.js";
+import type { NBTTree } from "./NBTTree.js";
 
 declare global {
   interface DataTransferFile extends DataTransferItem {