Convert PDFBug
, in web/debugger.js
, to a class with static methods
This gets rid of one more closure from the code-base.
This commit is contained in:
parent
c9cd934f8a
commit
2d79be941e
202
web/debugger.js
202
web/debugger.js
@ -491,114 +491,118 @@ const Stats = (function Stats() {
|
|||||||
})();
|
})();
|
||||||
|
|
||||||
// Manages all the debugging tools.
|
// Manages all the debugging tools.
|
||||||
const PDFBug = (function PDFBugClosure() {
|
class PDFBug {
|
||||||
const buttons = [];
|
static #buttons = [];
|
||||||
let activePanel = null;
|
|
||||||
|
|
||||||
return {
|
static #activePanel = null;
|
||||||
tools: [FontInspector, StepperManager, Stats],
|
|
||||||
enable(ids) {
|
|
||||||
const all = ids.length === 1 && ids[0] === "all";
|
|
||||||
const tools = this.tools;
|
|
||||||
for (const tool of tools) {
|
|
||||||
if (all || ids.includes(tool.id)) {
|
|
||||||
tool.enabled = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!all) {
|
|
||||||
// Sort the tools by the order they are enabled.
|
|
||||||
tools.sort(function (a, b) {
|
|
||||||
let indexA = ids.indexOf(a.id);
|
|
||||||
indexA = indexA < 0 ? tools.length : indexA;
|
|
||||||
let indexB = ids.indexOf(b.id);
|
|
||||||
indexB = indexB < 0 ? tools.length : indexB;
|
|
||||||
return indexA - indexB;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
init(container, ids) {
|
|
||||||
this.loadCSS();
|
|
||||||
this.enable(ids);
|
|
||||||
/*
|
|
||||||
* Basic Layout:
|
|
||||||
* PDFBug
|
|
||||||
* Controls
|
|
||||||
* Panels
|
|
||||||
* Panel
|
|
||||||
* Panel
|
|
||||||
* ...
|
|
||||||
*/
|
|
||||||
const ui = document.createElement("div");
|
|
||||||
ui.id = "PDFBug";
|
|
||||||
|
|
||||||
const controls = document.createElement("div");
|
static tools = [FontInspector, StepperManager, Stats];
|
||||||
controls.setAttribute("class", "controls");
|
|
||||||
ui.append(controls);
|
|
||||||
|
|
||||||
const panels = document.createElement("div");
|
static enable(ids) {
|
||||||
panels.setAttribute("class", "panels");
|
const all = ids.length === 1 && ids[0] === "all";
|
||||||
ui.append(panels);
|
const tools = this.tools;
|
||||||
|
for (const tool of tools) {
|
||||||
|
if (all || ids.includes(tool.id)) {
|
||||||
|
tool.enabled = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!all) {
|
||||||
|
// Sort the tools by the order they are enabled.
|
||||||
|
tools.sort(function (a, b) {
|
||||||
|
let indexA = ids.indexOf(a.id);
|
||||||
|
indexA = indexA < 0 ? tools.length : indexA;
|
||||||
|
let indexB = ids.indexOf(b.id);
|
||||||
|
indexB = indexB < 0 ? tools.length : indexB;
|
||||||
|
return indexA - indexB;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
container.append(ui);
|
static init(container, ids) {
|
||||||
container.style.right = "var(--panel-width)";
|
this.loadCSS();
|
||||||
|
this.enable(ids);
|
||||||
|
/*
|
||||||
|
* Basic Layout:
|
||||||
|
* PDFBug
|
||||||
|
* Controls
|
||||||
|
* Panels
|
||||||
|
* Panel
|
||||||
|
* Panel
|
||||||
|
* ...
|
||||||
|
*/
|
||||||
|
const ui = document.createElement("div");
|
||||||
|
ui.id = "PDFBug";
|
||||||
|
|
||||||
// Initialize all the debugging tools.
|
const controls = document.createElement("div");
|
||||||
for (const tool of this.tools) {
|
controls.setAttribute("class", "controls");
|
||||||
const panel = document.createElement("div");
|
ui.append(controls);
|
||||||
const panelButton = document.createElement("button");
|
|
||||||
panelButton.textContent = tool.name;
|
|
||||||
panelButton.addEventListener("click", event => {
|
|
||||||
event.preventDefault();
|
|
||||||
this.selectPanel(tool);
|
|
||||||
});
|
|
||||||
controls.append(panelButton);
|
|
||||||
panels.append(panel);
|
|
||||||
tool.panel = panel;
|
|
||||||
tool.manager = this;
|
|
||||||
if (tool.enabled) {
|
|
||||||
tool.init();
|
|
||||||
} else {
|
|
||||||
panel.textContent =
|
|
||||||
`${tool.name} is disabled. To enable add "${tool.id}" to ` +
|
|
||||||
"the pdfBug parameter and refresh (separate multiple by commas).";
|
|
||||||
}
|
|
||||||
buttons.push(panelButton);
|
|
||||||
}
|
|
||||||
this.selectPanel(0);
|
|
||||||
},
|
|
||||||
loadCSS() {
|
|
||||||
const { url } = import.meta;
|
|
||||||
|
|
||||||
const link = document.createElement("link");
|
const panels = document.createElement("div");
|
||||||
link.rel = "stylesheet";
|
panels.setAttribute("class", "panels");
|
||||||
link.href = url.replace(/.js$/, ".css");
|
ui.append(panels);
|
||||||
|
|
||||||
document.head.append(link);
|
container.append(ui);
|
||||||
},
|
container.style.right = "var(--panel-width)";
|
||||||
cleanup() {
|
|
||||||
for (const tool of this.tools) {
|
// Initialize all the debugging tools.
|
||||||
if (tool.enabled) {
|
for (const tool of this.tools) {
|
||||||
tool.cleanup();
|
const panel = document.createElement("div");
|
||||||
}
|
const panelButton = document.createElement("button");
|
||||||
|
panelButton.textContent = tool.name;
|
||||||
|
panelButton.addEventListener("click", event => {
|
||||||
|
event.preventDefault();
|
||||||
|
this.selectPanel(tool);
|
||||||
|
});
|
||||||
|
controls.append(panelButton);
|
||||||
|
panels.append(panel);
|
||||||
|
tool.panel = panel;
|
||||||
|
tool.manager = this;
|
||||||
|
if (tool.enabled) {
|
||||||
|
tool.init();
|
||||||
|
} else {
|
||||||
|
panel.textContent =
|
||||||
|
`${tool.name} is disabled. To enable add "${tool.id}" to ` +
|
||||||
|
"the pdfBug parameter and refresh (separate multiple by commas).";
|
||||||
}
|
}
|
||||||
},
|
this.#buttons.push(panelButton);
|
||||||
selectPanel(index) {
|
}
|
||||||
if (typeof index !== "number") {
|
this.selectPanel(0);
|
||||||
index = this.tools.indexOf(index);
|
}
|
||||||
|
|
||||||
|
static loadCSS() {
|
||||||
|
const { url } = import.meta;
|
||||||
|
|
||||||
|
const link = document.createElement("link");
|
||||||
|
link.rel = "stylesheet";
|
||||||
|
link.href = url.replace(/.js$/, ".css");
|
||||||
|
|
||||||
|
document.head.append(link);
|
||||||
|
}
|
||||||
|
|
||||||
|
static cleanup() {
|
||||||
|
for (const tool of this.tools) {
|
||||||
|
if (tool.enabled) {
|
||||||
|
tool.cleanup();
|
||||||
}
|
}
|
||||||
if (index === activePanel) {
|
}
|
||||||
return;
|
}
|
||||||
}
|
|
||||||
activePanel = index;
|
static selectPanel(index) {
|
||||||
for (const [j, tool] of this.tools.entries()) {
|
if (typeof index !== "number") {
|
||||||
const isActive = j === index;
|
index = this.tools.indexOf(index);
|
||||||
buttons[j].classList.toggle("active", isActive);
|
}
|
||||||
tool.active = isActive;
|
if (index === this.#activePanel) {
|
||||||
tool.panel.hidden = !isActive;
|
return;
|
||||||
}
|
}
|
||||||
},
|
this.#activePanel = index;
|
||||||
};
|
for (const [j, tool] of this.tools.entries()) {
|
||||||
})();
|
const isActive = j === index;
|
||||||
|
this.#buttons[j].classList.toggle("active", isActive);
|
||||||
|
tool.active = isActive;
|
||||||
|
tool.panel.hidden = !isActive;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
globalThis.FontInspector = FontInspector;
|
globalThis.FontInspector = FontInspector;
|
||||||
globalThis.StepperManager = StepperManager;
|
globalThis.StepperManager = StepperManager;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user