Remove the closure from the Stepper class in web/debugger.js
This commit is contained in:
Jonas Jenwald
parent
b49fe5baac
commit
22cd0c6ff8
314
web/debugger.js
314
web/debugger.js
@ -225,9 +225,9 @@ const StepperManager = (function StepperManagerClosure() {
|
|||||||
})();
|
})();
|
||||||
|
|
||||||
// The stepper for each page's operatorList.
|
// The stepper for each page's operatorList.
|
||||||
const Stepper = (function StepperClosure() {
|
class Stepper {
|
||||||
// Shorter way to create element and optionally set textContent.
|
// Shorter way to create element and optionally set textContent.
|
||||||
function c(tag, textContent) {
|
#c(tag, textContent) {
|
||||||
const d = document.createElement(tag);
|
const d = document.createElement(tag);
|
||||||
if (textContent) {
|
if (textContent) {
|
||||||
d.textContent = textContent;
|
d.textContent = textContent;
|
||||||
@ -235,7 +235,7 @@ const Stepper = (function StepperClosure() {
|
|||||||
return d;
|
return d;
|
||||||
}
|
}
|
||||||
|
|
||||||
function simplifyArgs(args) {
|
#simplifyArgs(args) {
|
||||||
if (typeof args === "string") {
|
if (typeof args === "string") {
|
||||||
const MAX_STRING_LENGTH = 75;
|
const MAX_STRING_LENGTH = 75;
|
||||||
return args.length <= MAX_STRING_LENGTH
|
return args.length <= MAX_STRING_LENGTH
|
||||||
@ -251,7 +251,7 @@ const Stepper = (function StepperClosure() {
|
|||||||
simpleArgs = [];
|
simpleArgs = [];
|
||||||
let i, ii;
|
let i, ii;
|
||||||
for (i = 0, ii = Math.min(MAX_ITEMS, args.length); i < ii; i++) {
|
for (i = 0, ii = Math.min(MAX_ITEMS, args.length); i < ii; i++) {
|
||||||
simpleArgs.push(simplifyArgs(args[i]));
|
simpleArgs.push(this.#simplifyArgs(args[i]));
|
||||||
}
|
}
|
||||||
if (i < args.length) {
|
if (i < args.length) {
|
||||||
simpleArgs.push("...");
|
simpleArgs.push("...");
|
||||||
@ -260,183 +260,179 @@ const Stepper = (function StepperClosure() {
|
|||||||
}
|
}
|
||||||
const simpleObj = {};
|
const simpleObj = {};
|
||||||
for (const key in args) {
|
for (const key in args) {
|
||||||
simpleObj[key] = simplifyArgs(args[key]);
|
simpleObj[key] = this.#simplifyArgs(args[key]);
|
||||||
}
|
}
|
||||||
return simpleObj;
|
return simpleObj;
|
||||||
}
|
}
|
||||||
|
|
||||||
// eslint-disable-next-line no-shadow
|
constructor(panel, pageIndex, initialBreakPoints) {
|
||||||
class Stepper {
|
this.panel = panel;
|
||||||
constructor(panel, pageIndex, initialBreakPoints) {
|
this.breakPoint = 0;
|
||||||
this.panel = panel;
|
this.nextBreakPoint = null;
|
||||||
this.breakPoint = 0;
|
this.pageIndex = pageIndex;
|
||||||
this.nextBreakPoint = null;
|
this.breakPoints = initialBreakPoints;
|
||||||
this.pageIndex = pageIndex;
|
this.currentIdx = -1;
|
||||||
this.breakPoints = initialBreakPoints;
|
this.operatorListIdx = 0;
|
||||||
this.currentIdx = -1;
|
this.indentLevel = 0;
|
||||||
this.operatorListIdx = 0;
|
}
|
||||||
this.indentLevel = 0;
|
|
||||||
|
init(operatorList) {
|
||||||
|
const panel = this.panel;
|
||||||
|
const content = this.#c("div", "c=continue, s=step");
|
||||||
|
const table = this.#c("table");
|
||||||
|
content.append(table);
|
||||||
|
table.cellSpacing = 0;
|
||||||
|
const headerRow = this.#c("tr");
|
||||||
|
table.append(headerRow);
|
||||||
|
headerRow.append(
|
||||||
|
this.#c("th", "Break"),
|
||||||
|
this.#c("th", "Idx"),
|
||||||
|
this.#c("th", "fn"),
|
||||||
|
this.#c("th", "args")
|
||||||
|
);
|
||||||
|
panel.append(content);
|
||||||
|
this.table = table;
|
||||||
|
this.updateOperatorList(operatorList);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateOperatorList(operatorList) {
|
||||||
|
const self = this;
|
||||||
|
|
||||||
|
function cboxOnClick() {
|
||||||
|
const x = +this.dataset.idx;
|
||||||
|
if (this.checked) {
|
||||||
|
self.breakPoints.push(x);
|
||||||
|
} else {
|
||||||
|
self.breakPoints.splice(self.breakPoints.indexOf(x), 1);
|
||||||
|
}
|
||||||
|
StepperManager.saveBreakPoints(self.pageIndex, self.breakPoints);
|
||||||
}
|
}
|
||||||
|
|
||||||
init(operatorList) {
|
const MAX_OPERATORS_COUNT = 15000;
|
||||||
const panel = this.panel;
|
if (this.operatorListIdx > MAX_OPERATORS_COUNT) {
|
||||||
const content = c("div", "c=continue, s=step");
|
return;
|
||||||
const table = c("table");
|
|
||||||
content.append(table);
|
|
||||||
table.cellSpacing = 0;
|
|
||||||
const headerRow = c("tr");
|
|
||||||
table.append(headerRow);
|
|
||||||
headerRow.append(
|
|
||||||
c("th", "Break"),
|
|
||||||
c("th", "Idx"),
|
|
||||||
c("th", "fn"),
|
|
||||||
c("th", "args")
|
|
||||||
);
|
|
||||||
panel.append(content);
|
|
||||||
this.table = table;
|
|
||||||
this.updateOperatorList(operatorList);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
updateOperatorList(operatorList) {
|
const chunk = document.createDocumentFragment();
|
||||||
const self = this;
|
const operatorsToDisplay = Math.min(
|
||||||
|
MAX_OPERATORS_COUNT,
|
||||||
|
operatorList.fnArray.length
|
||||||
|
);
|
||||||
|
for (let i = this.operatorListIdx; i < operatorsToDisplay; i++) {
|
||||||
|
const line = this.#c("tr");
|
||||||
|
line.className = "line";
|
||||||
|
line.dataset.idx = i;
|
||||||
|
chunk.append(line);
|
||||||
|
const checked = this.breakPoints.includes(i);
|
||||||
|
const args = operatorList.argsArray[i] || [];
|
||||||
|
|
||||||
function cboxOnClick() {
|
const breakCell = this.#c("td");
|
||||||
const x = +this.dataset.idx;
|
const cbox = this.#c("input");
|
||||||
if (this.checked) {
|
cbox.type = "checkbox";
|
||||||
self.breakPoints.push(x);
|
cbox.className = "points";
|
||||||
} else {
|
cbox.checked = checked;
|
||||||
self.breakPoints.splice(self.breakPoints.indexOf(x), 1);
|
cbox.dataset.idx = i;
|
||||||
}
|
cbox.onclick = cboxOnClick;
|
||||||
StepperManager.saveBreakPoints(self.pageIndex, self.breakPoints);
|
|
||||||
}
|
|
||||||
|
|
||||||
const MAX_OPERATORS_COUNT = 15000;
|
breakCell.append(cbox);
|
||||||
if (this.operatorListIdx > MAX_OPERATORS_COUNT) {
|
line.append(breakCell, this.#c("td", i.toString()));
|
||||||
return;
|
const fn = opMap[operatorList.fnArray[i]];
|
||||||
}
|
let decArgs = args;
|
||||||
|
if (fn === "showText") {
|
||||||
const chunk = document.createDocumentFragment();
|
const glyphs = args[0];
|
||||||
const operatorsToDisplay = Math.min(
|
const charCodeRow = this.#c("tr");
|
||||||
MAX_OPERATORS_COUNT,
|
const fontCharRow = this.#c("tr");
|
||||||
operatorList.fnArray.length
|
const unicodeRow = this.#c("tr");
|
||||||
);
|
for (const glyph of glyphs) {
|
||||||
for (let i = this.operatorListIdx; i < operatorsToDisplay; i++) {
|
if (typeof glyph === "object" && glyph !== null) {
|
||||||
const line = c("tr");
|
charCodeRow.append(this.#c("td", glyph.originalCharCode));
|
||||||
line.className = "line";
|
fontCharRow.append(this.#c("td", glyph.fontChar));
|
||||||
line.dataset.idx = i;
|
unicodeRow.append(this.#c("td", glyph.unicode));
|
||||||
chunk.append(line);
|
} else {
|
||||||
const checked = this.breakPoints.includes(i);
|
// null or number
|
||||||
const args = operatorList.argsArray[i] || [];
|
const advanceEl = this.#c("td", glyph);
|
||||||
|
advanceEl.classList.add("advance");
|
||||||
const breakCell = c("td");
|
charCodeRow.append(advanceEl);
|
||||||
const cbox = c("input");
|
fontCharRow.append(this.#c("td"));
|
||||||
cbox.type = "checkbox";
|
unicodeRow.append(this.#c("td"));
|
||||||
cbox.className = "points";
|
|
||||||
cbox.checked = checked;
|
|
||||||
cbox.dataset.idx = i;
|
|
||||||
cbox.onclick = cboxOnClick;
|
|
||||||
|
|
||||||
breakCell.append(cbox);
|
|
||||||
line.append(breakCell, c("td", i.toString()));
|
|
||||||
const fn = opMap[operatorList.fnArray[i]];
|
|
||||||
let decArgs = args;
|
|
||||||
if (fn === "showText") {
|
|
||||||
const glyphs = args[0];
|
|
||||||
const charCodeRow = c("tr");
|
|
||||||
const fontCharRow = c("tr");
|
|
||||||
const unicodeRow = c("tr");
|
|
||||||
for (const glyph of glyphs) {
|
|
||||||
if (typeof glyph === "object" && glyph !== null) {
|
|
||||||
charCodeRow.append(c("td", glyph.originalCharCode));
|
|
||||||
fontCharRow.append(c("td", glyph.fontChar));
|
|
||||||
unicodeRow.append(c("td", glyph.unicode));
|
|
||||||
} else {
|
|
||||||
// null or number
|
|
||||||
const advanceEl = c("td", glyph);
|
|
||||||
advanceEl.classList.add("advance");
|
|
||||||
charCodeRow.append(advanceEl);
|
|
||||||
fontCharRow.append(c("td"));
|
|
||||||
unicodeRow.append(c("td"));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
decArgs = c("td");
|
|
||||||
const table = c("table");
|
|
||||||
table.classList.add("showText");
|
|
||||||
decArgs.append(table);
|
|
||||||
table.append(charCodeRow, fontCharRow, unicodeRow);
|
|
||||||
} else if (fn === "restore" && this.indentLevel > 0) {
|
|
||||||
this.indentLevel--;
|
|
||||||
}
|
|
||||||
line.append(c("td", " ".repeat(this.indentLevel * 2) + fn));
|
|
||||||
if (fn === "save") {
|
|
||||||
this.indentLevel++;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (decArgs instanceof HTMLElement) {
|
|
||||||
line.append(decArgs);
|
|
||||||
} else {
|
|
||||||
line.append(c("td", JSON.stringify(simplifyArgs(decArgs))));
|
|
||||||
}
|
}
|
||||||
|
decArgs = this.#c("td");
|
||||||
|
const table = this.#c("table");
|
||||||
|
table.classList.add("showText");
|
||||||
|
decArgs.append(table);
|
||||||
|
table.append(charCodeRow, fontCharRow, unicodeRow);
|
||||||
|
} else if (fn === "restore" && this.indentLevel > 0) {
|
||||||
|
this.indentLevel--;
|
||||||
}
|
}
|
||||||
if (operatorsToDisplay < operatorList.fnArray.length) {
|
line.append(this.#c("td", " ".repeat(this.indentLevel * 2) + fn));
|
||||||
const lastCell = c("td", "...");
|
if (fn === "save") {
|
||||||
lastCell.colspan = 4;
|
this.indentLevel++;
|
||||||
chunk.append(lastCell);
|
|
||||||
}
|
}
|
||||||
this.operatorListIdx = operatorList.fnArray.length;
|
|
||||||
this.table.append(chunk);
|
|
||||||
}
|
|
||||||
|
|
||||||
getNextBreakPoint() {
|
if (decArgs instanceof HTMLElement) {
|
||||||
this.breakPoints.sort(function (a, b) {
|
line.append(decArgs);
|
||||||
return a - b;
|
} else {
|
||||||
});
|
line.append(this.#c("td", JSON.stringify(this.#simplifyArgs(decArgs))));
|
||||||
for (const breakPoint of this.breakPoints) {
|
|
||||||
if (breakPoint > this.currentIdx) {
|
|
||||||
return breakPoint;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
return null;
|
|
||||||
}
|
}
|
||||||
|
if (operatorsToDisplay < operatorList.fnArray.length) {
|
||||||
breakIt(idx, callback) {
|
const lastCell = this.#c("td", "...");
|
||||||
StepperManager.selectStepper(this.pageIndex, true);
|
lastCell.colspan = 4;
|
||||||
this.currentIdx = idx;
|
chunk.append(lastCell);
|
||||||
|
|
||||||
const listener = evt => {
|
|
||||||
switch (evt.keyCode) {
|
|
||||||
case 83: // step
|
|
||||||
document.removeEventListener("keydown", listener);
|
|
||||||
this.nextBreakPoint = this.currentIdx + 1;
|
|
||||||
this.goTo(-1);
|
|
||||||
callback();
|
|
||||||
break;
|
|
||||||
case 67: // continue
|
|
||||||
document.removeEventListener("keydown", listener);
|
|
||||||
this.nextBreakPoint = this.getNextBreakPoint();
|
|
||||||
this.goTo(-1);
|
|
||||||
callback();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
document.addEventListener("keydown", listener);
|
|
||||||
this.goTo(idx);
|
|
||||||
}
|
}
|
||||||
|
this.operatorListIdx = operatorList.fnArray.length;
|
||||||
|
this.table.append(chunk);
|
||||||
|
}
|
||||||
|
|
||||||
goTo(idx) {
|
getNextBreakPoint() {
|
||||||
const allRows = this.panel.getElementsByClassName("line");
|
this.breakPoints.sort(function (a, b) {
|
||||||
for (const row of allRows) {
|
return a - b;
|
||||||
if ((row.dataset.idx | 0) === idx) {
|
});
|
||||||
row.style.backgroundColor = "rgb(251,250,207)";
|
for (const breakPoint of this.breakPoints) {
|
||||||
row.scrollIntoView();
|
if (breakPoint > this.currentIdx) {
|
||||||
} else {
|
return breakPoint;
|
||||||
row.style.backgroundColor = null;
|
}
|
||||||
}
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
breakIt(idx, callback) {
|
||||||
|
StepperManager.selectStepper(this.pageIndex, true);
|
||||||
|
this.currentIdx = idx;
|
||||||
|
|
||||||
|
const listener = evt => {
|
||||||
|
switch (evt.keyCode) {
|
||||||
|
case 83: // step
|
||||||
|
document.removeEventListener("keydown", listener);
|
||||||
|
this.nextBreakPoint = this.currentIdx + 1;
|
||||||
|
this.goTo(-1);
|
||||||
|
callback();
|
||||||
|
break;
|
||||||
|
case 67: // continue
|
||||||
|
document.removeEventListener("keydown", listener);
|
||||||
|
this.nextBreakPoint = this.getNextBreakPoint();
|
||||||
|
this.goTo(-1);
|
||||||
|
callback();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener("keydown", listener);
|
||||||
|
this.goTo(idx);
|
||||||
|
}
|
||||||
|
|
||||||
|
goTo(idx) {
|
||||||
|
const allRows = this.panel.getElementsByClassName("line");
|
||||||
|
for (const row of allRows) {
|
||||||
|
if ((row.dataset.idx | 0) === idx) {
|
||||||
|
row.style.backgroundColor = "rgb(251,250,207)";
|
||||||
|
row.scrollIntoView();
|
||||||
|
} else {
|
||||||
|
row.style.backgroundColor = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return Stepper;
|
}
|
||||||
})();
|
|
||||||
|
|
||||||
const Stats = (function Stats() {
|
const Stats = (function Stats() {
|
||||||
let stats = [];
|
let stats = [];
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user