修复 json 解析异常未捕获的错误

This commit is contained in:
OLDREDSTONE 2026-01-14 00:55:38 +08:00
parent 006a5fe4f5
commit fb2e0e124b
3 changed files with 154 additions and 92 deletions

View File

@ -136,8 +136,8 @@
<script src="/script/switchLightDarkMode.js"></script> <script src="/script/switchLightDarkMode.js"></script>
<script src="/script/otto.js"></script> <script src="/script/otto.js"></script>
<script src="/script/custommethod-search.js"></script> <script src="/script/custommethod-search.js"></script>
<script <!-- <script
src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-yaml.js" src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-yaml.js"
></script> ></script> -->
</body> </body>
</html> </html>

View File

@ -728,7 +728,6 @@ function layerHoverInit(layer) {
}; };
} }
function createElementEvent(obj, style) { function createElementEvent(obj, style) {
console.log(style);
style = { style = {
...new IconStyle(), ...new IconStyle(),
...style ...style

View File

@ -23,7 +23,7 @@ let positions = {
"r5": { "y": 78, "name": "二轨时的第二轨/四轨时的第二轨" }, "r5": { "y": 78, "name": "二轨时的第二轨/四轨时的第二轨" },
"r6": { "y": 57, "name": "三轨时的第一轨" }, "r6": { "y": 57, "name": "三轨时的第一轨" },
"r7": { "y": 36, "name": "四轨时的第一轨" }, "r7": { "y": 36, "name": "四轨时的第一轨" },
} };
function themePosition() { function themePosition() {
let theme_positions = document.getElementById("theme-positions"); let theme_positions = document.getElementById("theme-positions");
@ -63,45 +63,74 @@ function themePosition() {
rowx = null; rowx = null;
columny = null; columny = null;
for (let key in positions) { for (let key in positions) {
if (positions[key].x !== null && Math.abs(x - positions[key].x) < 5) if (
positions[key].x !== null && Math.abs(x - positions[key].x) < 5
) {
rowx = positions[key].x; rowx = positions[key].x;
if (positions[key].y !== null && Math.abs(y - positions[key].y) < 5) }
if (
positions[key].y !== null && Math.abs(y - positions[key].y) < 5
) {
columny = positions[key].y; columny = positions[key].y;
}
} }
if (rowx) { if (rowx) {
perx.innerText = (rowx / 3.52).toFixed(2) + "%" perx.innerText = (rowx / 3.52).toFixed(2) + "%";
perx.classList.add("c") perx.classList.add("c");
pxx.innerText = rowx + "px" pxx.innerText = rowx + "px";
pxx.classList.add("c") pxx.classList.add("c");
} } else {
else { perx.innerText = x_percent.toFixed(2) + "%";
perx.innerText = x_percent.toFixed(2) + "%" perx.classList.remove("c");
perx.classList.remove("c") pxx.innerText = x + "px";
pxx.innerText = x + "px" pxx.classList.remove("c");
pxx.classList.remove("c")
} }
if (columny) { if (columny) {
pery.innerText = (100 - columny / 1.98).toFixed(2) + "%" pery.innerText = (100 - columny / 1.98).toFixed(2) + "%";
pery.classList.add("c") pery.classList.add("c");
pxy.innerText = 198 - columny + "px" pxy.innerText = 198 - columny + "px";
pxy.classList.add("c") pxy.classList.add("c");
} } else {
else { pery.innerText = (100 - y_percent).toFixed(2) + "%";
pery.innerText = (100 - y_percent).toFixed(2) + "%" pery.classList.remove("c");
pery.classList.remove("c") pxy.innerText = 198 - y + "px";
pxy.innerText = 198 - y + "px" pxy.classList.remove("c");
pxy.classList.remove("c")
} }
infobox.style.right = "calc(" + (100 - x_percent) + "% + 10px)"; infobox.style.right = "calc(" + (100 - x_percent) + "% + 10px)";
infobox.style.top = "calc(" + (y_percent) + "% + 10px)"; infobox.style.top = "calc(" + y_percent + "% + 10px)";
selectbox.style.left = rowx ? (rowx / 3.52 - 3.41) + "%" : columny ? "0" : "calc(" + x_percent + "% - 3px"; selectbox.style.left = rowx
selectbox.style.bottom = columny ? (100 - columny / 1.98 - 5.305) + "%" : rowx ? "0" : "calc(" + (100 - y_percent) + "% - 3px)"; ? (rowx / 3.52 - 3.41) + "%"
: columny
? "0"
: "calc(" + x_percent + "% - 3px";
selectbox.style.bottom = columny
? (100 - columny / 1.98 - 5.305) + "%"
: rowx
? "0"
: "calc(" + (100 - y_percent) + "% - 3px)";
selectbox.style.width = rowx ? "6.82%" : columny ? "100%" : "6px"; selectbox.style.width = rowx ? "6.82%" : columny ? "100%" : "6px";
selectbox.style.height = columny ? "10.61%" : rowx ? "100%" : "6px"; selectbox.style.height = columny ? "10.61%" : rowx ? "100%" : "6px";
let rowname = rowx ? positions[Object.keys(positions).find(key => positions[key].x === rowx)].name : ""; let rowname = rowx
let columnname = columny ? positions[Object.keys(positions).find(key => positions[key].y === columny)].name : ""; ? positions[
theme_positions.querySelector(".other").innerText = rowname && columnname ? columnname + "上的" + rowname : rowname ? rowname : columnname ? columnname : ""; Object.keys(positions).find((key) => positions[key].x === rowx)
].name
: "";
let columnname = columny
? positions[
Object.keys(positions).find((key) =>
positions[key].y === columny
)
].name
: "";
theme_positions.querySelector(".other").innerText =
rowname && columnname
? columnname + "上的" + rowname
: rowname
? rowname
: columnname
? columnname
: "";
}); });
theme_positions.addEventListener("mouseleave", function (event) { theme_positions.addEventListener("mouseleave", function (event) {
perx.innerText = "100%"; perx.innerText = "100%";
@ -114,13 +143,12 @@ function themePosition() {
selectbox.style.bottom = "50%"; selectbox.style.bottom = "50%";
selectbox.style.width = "0"; selectbox.style.width = "0";
selectbox.style.height = "0"; selectbox.style.height = "0";
perx.classList.remove("c") perx.classList.remove("c");
pery.classList.remove("c") pery.classList.remove("c");
pxx.classList.remove("c") pxx.classList.remove("c");
pxy.classList.remove("c") pxy.classList.remove("c");
other.innerText = ""; other.innerText = "";
}); });
} }
function rdview() { function rdview() {
@ -131,21 +159,25 @@ function rdview() {
let number = rdview.querySelector(".number"); let number = rdview.querySelector(".number");
const textareaStyles = window.getComputedStyle(textarea); const textareaStyles = window.getComputedStyle(textarea);
[ [
'fontFamily', 'fontSize', 'fontWeight', "fontFamily",
'letterSpacing', 'lineHeight', 'padding', "fontSize",
].forEach(property => { "fontWeight",
"letterSpacing",
"lineHeight",
"padding",
].forEach((property) => {
number.style[property] = textareaStyles[property]; number.style[property] = textareaStyles[property];
}); });
const canvas = document.createElement('canvas'); const canvas = document.createElement("canvas");
const context = canvas.getContext('2d'); const context = canvas.getContext("2d");
const font = `${textareaStyles.fontSize} ${textareaStyles.fontFamily}`; const font = `${textareaStyles.fontSize} ${textareaStyles.fontFamily}`;
context.font = font; context.font = font;
function calcStringLines(sentence, width) { function calcStringLines(sentence, width) {
if (!width) return 0; if (!width) return 0;
const words = sentence.split(''); const words = sentence.split("");
let lineCount = 0; let lineCount = 0;
let currentLine = ''; let currentLine = "";
for (let i = 0; i < words.length; i++) { for (let i = 0; i < words.length; i++) {
const wordWidth = context.measureText(words[i]).width; const wordWidth = context.measureText(words[i]).width;
const lineWidth = context.measureText(currentLine).width; const lineWidth = context.measureText(currentLine).width;
@ -156,18 +188,22 @@ function rdview() {
currentLine += words[i]; currentLine += words[i];
} }
} }
if (currentLine.trim() !== '') lineCount++; if (currentLine.trim() !== "") lineCount++;
return lineCount; return lineCount;
} }
function calcLines() { function calcLines() {
const lines = textarea.value.split('\n'); const lines = textarea.value.split("\n");
const textareaWidth = textarea.getBoundingClientRect().width; const textareaWidth = textarea.getBoundingClientRect().width;
const textareaScrollWidth = textareaWidth - textarea.clientWidth; const textareaScrollWidth = textareaWidth - textarea.clientWidth;
const parseNumber = (v) => v.endsWith('px') ? parseInt(v.slice(0, -2), 10) : 0; const parseNumber = (v) =>
v.endsWith("px") ? parseInt(v.slice(0, -2), 10) : 0;
const textareaPaddingLeft = parseNumber(textareaStyles.paddingLeft); const textareaPaddingLeft = parseNumber(textareaStyles.paddingLeft);
const textareaPaddingRight = parseNumber(textareaStyles.paddingRight); const textareaPaddingRight = parseNumber(textareaStyles.paddingRight);
const textareaContentWidth = textareaWidth - textareaPaddingLeft - textareaPaddingRight - textareaScrollWidth; const textareaContentWidth = textareaWidth - textareaPaddingLeft -
const numLines = lines.map(lineString => calcStringLines(lineString, textareaContentWidth)); textareaPaddingRight - textareaScrollWidth;
const numLines = lines.map((lineString) =>
calcStringLines(lineString, textareaContentWidth)
);
let lineNumbers = []; let lineNumbers = [];
let i = 1; let i = 1;
while (numLines.length > 0) { while (numLines.length > 0) {
@ -175,8 +211,8 @@ function rdview() {
lineNumbers.push(i); lineNumbers.push(i);
if (numLinesOfSentence > 1) { if (numLinesOfSentence > 1) {
Array(numLinesOfSentence - 1) Array(numLinesOfSentence - 1)
.fill('') .fill("")
.forEach((_) => lineNumbers.push('')); .forEach((_) => lineNumbers.push(""));
} }
i++; i++;
} }
@ -186,18 +222,18 @@ function rdview() {
const lines = calcLines(); const lines = calcLines();
const lineDoms = Array.from({ const lineDoms = Array.from({
length: lines.length, length: lines.length,
}, (_, i) => `<div>${lines[i] || '&nbsp;'}</div>`); }, (_, i) => `<div>${lines[i] || "&nbsp;"}</div>`);
number.innerHTML = lineDoms.join(''); number.innerHTML = lineDoms.join("");
} }
function initCanvas() { function initCanvas() {
const lang = textarea.value.split('\n')[0] const lang = textarea.value.split("\n")[0];
const code = textarea.value.split('\n').slice(1).join('\n') const code = textarea.value.split("\n").slice(1).join("\n");
rdcanvas.innerHTML = RDViewRender(lang, code) rdcanvas.innerHTML = RDViewRender(lang, code);
} }
initCanvas() initCanvas();
initLineNumbers() initLineNumbers();
textarea.addEventListener('input', initLineNumbers); textarea.addEventListener("input", initLineNumbers);
textarea.addEventListener('input', initCanvas); textarea.addEventListener("input", initCanvas);
} }
function rdview2() { function rdview2() {
@ -208,21 +244,25 @@ function rdview2() {
let number = rdview.querySelector(".number"); let number = rdview.querySelector(".number");
const textareaStyles = window.getComputedStyle(textarea); const textareaStyles = window.getComputedStyle(textarea);
[ [
'fontFamily', 'fontSize', 'fontWeight', "fontFamily",
'letterSpacing', 'lineHeight', 'padding', "fontSize",
].forEach(property => { "fontWeight",
"letterSpacing",
"lineHeight",
"padding",
].forEach((property) => {
number.style[property] = textareaStyles[property]; number.style[property] = textareaStyles[property];
}); });
const canvas = document.createElement('canvas'); const canvas = document.createElement("canvas");
const context = canvas.getContext('2d'); const context = canvas.getContext("2d");
const font = `${textareaStyles.fontSize} ${textareaStyles.fontFamily}`; const font = `${textareaStyles.fontSize} ${textareaStyles.fontFamily}`;
context.font = font; context.font = font;
function calcStringLines(sentence, width) { function calcStringLines(sentence, width) {
if (!width) return 0; if (!width) return 0;
const words = sentence.split(''); const words = sentence.split("");
let lineCount = 0; let lineCount = 0;
let currentLine = ''; let currentLine = "";
for (let i = 0; i < words.length; i++) { for (let i = 0; i < words.length; i++) {
const wordWidth = context.measureText(words[i]).width; const wordWidth = context.measureText(words[i]).width;
const lineWidth = context.measureText(currentLine).width; const lineWidth = context.measureText(currentLine).width;
@ -233,18 +273,22 @@ function rdview2() {
currentLine += words[i]; currentLine += words[i];
} }
} }
if (currentLine.trim() !== '') lineCount++; if (currentLine.trim() !== "") lineCount++;
return lineCount; return lineCount;
} }
function calcLines() { function calcLines() {
const lines = textarea.value.split('\n'); const lines = textarea.value.split("\n");
const textareaWidth = textarea.getBoundingClientRect().width; const textareaWidth = textarea.getBoundingClientRect().width;
const textareaScrollWidth = textareaWidth - textarea.clientWidth; const textareaScrollWidth = textareaWidth - textarea.clientWidth;
const parseNumber = (v) => v.endsWith('px') ? parseInt(v.slice(0, -2), 10) : 0; const parseNumber = (v) =>
v.endsWith("px") ? parseInt(v.slice(0, -2), 10) : 0;
const textareaPaddingLeft = parseNumber(textareaStyles.paddingLeft); const textareaPaddingLeft = parseNumber(textareaStyles.paddingLeft);
const textareaPaddingRight = parseNumber(textareaStyles.paddingRight); const textareaPaddingRight = parseNumber(textareaStyles.paddingRight);
const textareaContentWidth = textareaWidth - textareaPaddingLeft - textareaPaddingRight - textareaScrollWidth; const textareaContentWidth = textareaWidth - textareaPaddingLeft -
const numLines = lines.map(lineString => calcStringLines(lineString, textareaContentWidth)); textareaPaddingRight - textareaScrollWidth;
const numLines = lines.map((lineString) =>
calcStringLines(lineString, textareaContentWidth)
);
let lineNumbers = []; let lineNumbers = [];
let i = 1; let i = 1;
while (numLines.length > 0) { while (numLines.length > 0) {
@ -252,8 +296,8 @@ function rdview2() {
lineNumbers.push(i); lineNumbers.push(i);
if (numLinesOfSentence > 1) { if (numLinesOfSentence > 1) {
Array(numLinesOfSentence - 1) Array(numLinesOfSentence - 1)
.fill('') .fill("")
.forEach((_) => lineNumbers.push('')); .forEach((_) => lineNumbers.push(""));
} }
i++; i++;
} }
@ -263,25 +307,46 @@ function rdview2() {
const lines = calcLines(); const lines = calcLines();
const lineDoms = Array.from({ const lineDoms = Array.from({
length: lines.length, length: lines.length,
}, (_, i) => `<div>${lines[i] || '&nbsp;'}</div>`); }, (_, i) => `<div>${lines[i] || "&nbsp;"}</div>`);
number.innerHTML = lineDoms.join(''); number.innerHTML = lineDoms.join("");
} }
function initCanvas() { function initCanvas() {
// const lang = textarea.value.split('\n')[0] // const lang = textarea.value.split('\n')[0]
// const code = textarea.value.split('\n').slice(1).join('\n') // const code = textarea.value.split('\n').slice(1).join('\n')
// rdcanvas.innerHTML = RDViewRender(lang, code) // rdcanvas.innerHTML = RDViewRender(lang, code)
const objs = JSON.parse(`[${textarea.value}]`); // try {
const eventStyle = {"scale": 2.0, "showDuration": false }; // JSON.parse(`[${textarea.value}]`);
// } catch (e) {
// rdcanvas.innerHTML = `<div style="color: red; font-weight: bold;">JSON解析错误${e.message}</div>`;
// }
let objs = [];
try {
objs = JSON.parse(`[${textarea.value}]`);
} catch (e) {
rdcanvas.innerHTML =
`<div style="color: red; font-weight: bold;">JSON解析错误${e.message}</div>`;
return;
}
const eventStyle = { "scale": 2.0, "showDuration": false };
let maxy = 0; let maxy = 0;
for (let obj of objs) { for (let obj of objs) {
const style = {... eventStyle, enabled: obj.active ?? true }; const style = { ...eventStyle, enabled: obj.active ?? true };
const elem = createElementEvent(obj, style); const elem = createElementEvent(obj, style);
elem.eventStyle = style; elem.eventStyle = style;
elem.style.position = "absolute"; elem.style.position = "absolute";
elem.style.left = `${((((obj.bar ?? 1) - 1) * 8) + (obj.beat ?? 1) - 1) * 14 * eventStyle.scale}px`; elem.style.left = `${
elem.style.top = `${(obj.y ?? obj.row ?? 0) * 14 * eventStyle.scale}px`; ((((obj.bar ?? 1) - 1) * 8) + (obj.beat ?? 1) - 1) * 14 *
if (((obj.y ?? obj.row ?? 0) * 14 * eventStyle.scale) + elem.offsetHeight > maxy) { eventStyle.scale
maxy = ((obj.y ?? obj.row ?? 0) * 14 * eventStyle.scale) + elem.offsetHeight; }px`;
elem.style.top = `${
(obj.y ?? obj.row ?? 0) * 14 * eventStyle.scale
}px`;
if (
((obj.y ?? obj.row ?? 0) * 14 * eventStyle.scale) +
elem.offsetHeight > maxy
) {
maxy = ((obj.y ?? obj.row ?? 0) * 14 * eventStyle.scale) +
elem.offsetHeight;
} }
elem.addEventListener("mousedown", (event) => { elem.addEventListener("mousedown", (event) => {
const eStyle = elem.eventStyle; const eStyle = elem.eventStyle;
@ -308,16 +373,15 @@ function rdview2() {
rdcanvas.style.height = `${maxy + 4 * 14 * eventStyle.scale}px`; rdcanvas.style.height = `${maxy + 4 * 14 * eventStyle.scale}px`;
if (elem) { if (elem) {
rdcanvas.appendChild(elem); rdcanvas.appendChild(elem);
}
} }
}
//rdcanvas.innerHTML = RDView2Render(json);
} }
initCanvas() //rdcanvas.innerHTML = RDView2Render(json);
initLineNumbers() initCanvas();
textarea.addEventListener('input', initLineNumbers); initLineNumbers();
textarea.addEventListener('input', initCanvas); textarea.addEventListener("input", initLineNumbers);
textarea.addEventListener("input", initCanvas);
} }
window.$docsify.plugins = [].concat(window.$docsify.plugins, function (hook) { window.$docsify.plugins = [].concat(window.$docsify.plugins, function (hook) {
hook.doneEach(function () { hook.doneEach(function () {
themePosition(); themePosition();
@ -328,5 +392,4 @@ window.$docsify.plugins = [].concat(window.$docsify.plugins, function (hook) {
}); });
import("./docsify.min.js").then(() => { import("./docsify.min.js").then(() => {
});
});