2023-08-01 14:20:57 +00:00
|
|
|
// @ts-check
|
|
|
|
|
2023-08-02 17:25:42 +00:00
|
|
|
import crel from "../common/crel.js";
|
2023-08-02 16:43:02 +00:00
|
|
|
import parsePng from "./parsePng.js";
|
2023-08-01 14:20:57 +00:00
|
|
|
import parseHash from "./parseHash.js";
|
2023-08-02 17:25:42 +00:00
|
|
|
/** @typedef {import("./nodePath.js").NodePath} NodePath */
|
|
|
|
/** @typedef {import("../../types/png.d.ts").PngNode} PngNode */
|
2023-08-01 14:20:57 +00:00
|
|
|
|
|
|
|
const errorEl = document.getElementById("error");
|
|
|
|
const explorerEl = document.getElementById("explorer");
|
|
|
|
if (!errorEl || !explorerEl) throw new Error("HTML is not set up correctly");
|
|
|
|
|
2023-08-02 17:25:42 +00:00
|
|
|
class Explorer {
|
|
|
|
#bytesEl = crel("div", { class: "bytes" });
|
|
|
|
#treeEl = crel("div", { class: "tree" });
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @param {PngNode} rootNode
|
|
|
|
*/
|
|
|
|
constructor(rootNode) {
|
|
|
|
/**
|
|
|
|
* @param {PngNode} node
|
|
|
|
* @param {NodePath} path
|
|
|
|
* @returns [HTMLElement, HTMLElement] Each node's bytes and tree elements.
|
|
|
|
*/
|
|
|
|
const traverse = (node, path) => {
|
|
|
|
const nodeBytesEl = crel("span", { "data-path": path });
|
|
|
|
|
|
|
|
// TODO: Show a user-friendly title.
|
|
|
|
const isRoot = path.length === 0;
|
|
|
|
const title = node.type;
|
|
|
|
const description = "TODO: Description";
|
|
|
|
const nodeTreeEl = crel(
|
|
|
|
"details",
|
2023-08-02 17:35:48 +00:00
|
|
|
{ "data-path": path, ...(isRoot ? { open: "open" } : {}) },
|
2023-08-02 17:25:42 +00:00
|
|
|
crel(
|
|
|
|
"summary",
|
|
|
|
{},
|
|
|
|
crel("span", { "class": "title" }, title),
|
|
|
|
crel(
|
|
|
|
"span",
|
|
|
|
{ "class": "bytecount" },
|
|
|
|
"TODO: X bytes",
|
|
|
|
),
|
|
|
|
),
|
|
|
|
description,
|
|
|
|
);
|
|
|
|
|
|
|
|
if (node.children) {
|
|
|
|
const treeChildrenEl = crel("div", { class: "children" });
|
|
|
|
node.children.forEach((child, index) => {
|
|
|
|
const [childBytesEl, childTreeEl] = traverse(
|
|
|
|
child,
|
|
|
|
path.concat(index),
|
|
|
|
);
|
2023-08-02 17:35:48 +00:00
|
|
|
if (index > 0) nodeBytesEl.append(" ");
|
2023-08-02 17:25:42 +00:00
|
|
|
nodeBytesEl.append(childBytesEl);
|
|
|
|
treeChildrenEl.append(childTreeEl);
|
|
|
|
});
|
|
|
|
nodeTreeEl.append(treeChildrenEl);
|
|
|
|
} else {
|
|
|
|
// TODO: Update this formatting
|
|
|
|
nodeBytesEl.innerHTML = [...node.bytes].map((b) =>
|
|
|
|
b.toString(16).padStart(2, "0")
|
2023-08-02 17:35:48 +00:00
|
|
|
).join(" ");
|
2023-08-02 17:25:42 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return [nodeBytesEl, nodeTreeEl];
|
|
|
|
};
|
|
|
|
|
|
|
|
// TODO: better variable names
|
|
|
|
const [a, b] = traverse(rootNode, []);
|
|
|
|
this.#bytesEl.append(a);
|
|
|
|
this.#treeEl.append(b);
|
|
|
|
|
|
|
|
this.el = document.createDocumentFragment();
|
|
|
|
this.el.append(this.#bytesEl, this.#treeEl);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-08-01 14:20:57 +00:00
|
|
|
const main = () => {
|
|
|
|
// TODO: We may want a better UI here.
|
2023-08-02 16:58:06 +00:00
|
|
|
// TODO: Handle hash changes.
|
2023-08-01 14:20:57 +00:00
|
|
|
const parsedHash = parseHash(location.hash);
|
|
|
|
if (!parsedHash) {
|
|
|
|
location.href = "..";
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2023-08-02 16:43:02 +00:00
|
|
|
const { bytes } = parsedHash;
|
|
|
|
|
|
|
|
const rootNode = parsePng(bytes);
|
|
|
|
if (!rootNode) {
|
|
|
|
// TODO: Is there better UI than this?
|
|
|
|
errorEl.removeAttribute("hidden");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2023-08-02 17:25:42 +00:00
|
|
|
const explorer = new Explorer(rootNode);
|
|
|
|
|
|
|
|
explorerEl.innerHTML = "";
|
|
|
|
explorerEl.append(explorer.el);
|
|
|
|
explorerEl.removeAttribute("hidden");
|
2023-08-01 14:20:57 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
main();
|