From 303ff7fdca1b10c6f94def2603b5688967327028 Mon Sep 17 00:00:00 2001 From: Offroaders123 <65947371+Offroaders123@users.noreply.github.com> Date: Fri, 8 Dec 2023 02:56:51 -0800 Subject: [PATCH] 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 --- public/bigtest.nbt | Bin 507 -> 435 bytes src/{nbt-tree => }/NBTBranch.ts | 51 ++++++++++++++++++-------------- src/{nbt-tree => }/NBTTree.ts | 0 src/app.ts | 18 +++++------ src/global.d.ts | 2 +- src/nbt-tree/index.ts | 2 -- 6 files changed, 39 insertions(+), 34 deletions(-) rename src/{nbt-tree => }/NBTBranch.ts (50%) rename src/{nbt-tree => }/NBTTree.ts (100%) delete mode 100644 src/nbt-tree/index.ts diff --git a/public/bigtest.nbt b/public/bigtest.nbt index 27ccabf5a7b92bbe71fd429713c9144114ab0fc3..ed9601717d8165e968bc1263e0769f4d97d211a6 100644 GIT binary patch literal 435 zcmV;k0ZjfMiwFP!000006Lpe7Z__Xo$N%k`)kzzQV254COpt&|AORO{8`Y?2rHV;S zq+O;-Zu&?IXKt#Dt*|i3wr7 zBPP={F<=~vFs0pB05m~Cup+AMAQ(`rE)isAq7jahJQjbPW!J1|uYtm9ORX=}Uh1u- zHcZ_8w|#ZJrlpt4tGJE5%Ug?pKX_Jw<;Ns+K2K!?lpgk9{yf7C^z-ZK64+p-D6h~u ztf5Q?VLsdab^hV|;{8z-b_TTKSj_Ur$a30oZnGNdy0lmQI^XiP)=$9Jxz;~**jXX| zV=~+NTj-B_g`WP-`i-w=Ee4wsUrcG}<{toeoJfv+dcwOrkjfv;gu~D%7?(b#6#0~Z dvASiO&Z9$ynp7i-+c|)egA2Uq0J?Po004PN*+T#T literal 507 zcmVFFmV&Xw5M#`%wS=YH%|a20v4|EdnhhG* zs4<4PE5m{=yJmN=@zhIuYI4wZzg#H1XOZQ zEDm_fu}zJ5^y6@1J_vgq$EA}P4}wSC?t}tjwW6xWcy?S@%cxZk8_3okYL$kD4Xu7y zdyj+9gHMBR&jS!{TaG@yr8rDv{SfNfbfzOf+-5Fm;kDDdbNY4*DccL+@8~@qI9u-# z2v+spUEd2p;9j@-WVZwWj6qCu#t2nR(;zN=q`=6+5VN}8SPN65?nI7712C~CQ;baU z=@g?=jD_LZpX0OgM1iGzGu_y`$EtM`Unm?1*DldnKd&7dU?ExG`tb$+!Or}hy#T!N zK*{)pLO@3Tp6lullR9XJV7u!wH=`&Dj=S~HX=BPx+v)7)<|{kBCB9@y2|cR2l>Hcf z=+X|_Zxu|jXg(|9o1BE1yo3b_Wmy(Q0RJy2t}pV!vZO8@Aa`0jxs1x^Dc?~+$riQ6 zZJ{cyEX6T@x_Xk1UY%d~5(Oh0(e}4@s?C*hyq@1!T}zj)k{7u|(16JLKEJcvRLci- xZlkt#S(1~f+)+@OYs@v~8vj=#2tv#08`gNj?Ed_E`+a!Rgx}Qir27a4008A%{YC%) diff --git a/src/nbt-tree/NBTBranch.ts b/src/NBTBranch.ts similarity index 50% rename from src/nbt-tree/NBTBranch.ts rename to src/NBTBranch.ts index c51e74f..1095784 100644 --- a/src/nbt-tree/NBTBranch.ts +++ b/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 extends HTMLElement { #name: string | null; - #type!: TAG; #value!: T; constructor(value: T | NBTData, name: string | null = null) { @@ -15,34 +14,43 @@ export class NBTBranch 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 = ``; + console.log(`${name}:`,value); + this.innerHTML = ``; 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 | 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,7 +59,7 @@ export class NBTBranch extends HTMLElement { } get type(): TAG { - return this.#type; + return getTagType(this.#value); } get value(): T { @@ -59,9 +67,8 @@ export class NBTBranch extends HTMLElement { } set value(value: T) { - this.#type = getTagType(value)!; - this.dataset["type"] = `${this.#type}`; this.#value = value; + this.dataset["type"] = `${this.type}`; this.#render(); } } diff --git a/src/nbt-tree/NBTTree.ts b/src/NBTTree.ts similarity index 100% rename from src/nbt-tree/NBTTree.ts rename to src/NBTTree.ts diff --git a/src/app.ts b/src/app.ts index b3ffaba..2b3b6e7 100644 --- a/src/app.ts +++ b/src/app.ts @@ -1,5 +1,5 @@ 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"; @@ -7,7 +7,7 @@ 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; diff --git a/src/global.d.ts b/src/global.d.ts index 30765fe..695e822 100644 --- a/src/global.d.ts +++ b/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 { diff --git a/src/nbt-tree/index.ts b/src/nbt-tree/index.ts deleted file mode 100644 index 5118cc6..0000000 --- a/src/nbt-tree/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./NBTTree.js"; -export * from "./NBTBranch.js"; \ No newline at end of file