hmn
/
formats.exposed
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

PNG: refactor explorer to avoid a class (no user impact)

This commit is contained in:
Evan Hahn 2023-08-02 13:52:02 -05:00
parent 6e047609ce
commit 4ea0edcbae
1 changed files with 56 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
public/png/explorer.js
View File

@ -1,6 +1,6 @@
// @ts-check
import crel from "../common/crel.js";
import crel, { fragment } from "../common/crel.js";
import formatBytes from "../common/formatBytes.js";
/** @typedef {import("./nodePath.js").NodePath} NodePath */
/** @typedef {import("../../types/png.d.ts").PngNode} PngNode */
@ -11,73 +11,63 @@ import formatBytes from "../common/formatBytes.js";
* @returns {NodeUi}
*/
class Explorer {
#bytesEl = crel("div", { class: "bytes" });
#treeEl = crel("div", { class: "tree" });
/**
* @param {PngNode} rootNode
* @param {NodeUiFn} getNodeUi
*/
constructor(rootNode, getNodeUi) {
/**
* @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 });
const isRoot = path.length === 0;
const { title, description } = getNodeUi(node);
const nodeTreeEl = crel(
"details",
{ "data-path": path, ...(isRoot ? { open: "open" } : {}) },
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),
);
if (index > 0) nodeBytesEl.append(" ");
nodeBytesEl.append(childBytesEl);
treeChildrenEl.append(childTreeEl);
});
nodeTreeEl.append(treeChildrenEl);
} else {
nodeBytesEl.innerHTML = formatBytes(node.bytes, 256);
}
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);
}
}
/**
* @param {PngNode} rootNode
* @param {NodeUiFn} getNodeUi
* @returns {DocumentFragment}
*/
export default (rootNode, getNodeUi) => new Explorer(rootNode, getNodeUi).el;
export default (rootNode, getNodeUi) => {
const [bytesRootEl, treeRootEl] = traverse(rootNode, [], getNodeUi);
const outerBytesEl = crel("div", { class: "bytes" }, bytesRootEl);
const outerTreeEl = crel("div", { class: "tree" }, treeRootEl);
return fragment(outerBytesEl, outerTreeEl);
};
/**
* @param {PngNode} node
* @param {NodePath} path
* @param {NodeUiFn} getNodeUi
* @returns [HTMLElement, HTMLElement] Each node's bytes and tree elements.
*/
const traverse = (node, path, getNodeUi) => {
const nodeBytesEl = crel("span", { "data-path": path });
const isRoot = path.length === 0;
const { title, description } = getNodeUi(node);
const nodeTreeEl = crel(
"details",
{ "data-path": path, ...(isRoot ? { open: "open" } : {}) },
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),
getNodeUi,
);
if (index > 0) nodeBytesEl.append(" ");
nodeBytesEl.append(childBytesEl);
treeChildrenEl.append(childTreeEl);
});
nodeTreeEl.append(treeChildrenEl);
} else {
nodeBytesEl.innerHTML = formatBytes(node.bytes, 256);
}
return [nodeBytesEl, nodeTreeEl];
};