forked from RDCNWebs/rd.rdlevel.cn
修复 json 解析异常未捕获的错误
This commit is contained in:
parent
006a5fe4f5
commit
fb2e0e124b
@ -136,8 +136,8 @@
|
||||
<script src="/script/switchLightDarkMode.js"></script>
|
||||
<script src="/script/otto.js"></script>
|
||||
<script src="/script/custommethod-search.js"></script>
|
||||
<script
|
||||
<!-- <script
|
||||
src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-yaml.js"
|
||||
></script>
|
||||
></script> -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -728,7 +728,6 @@ function layerHoverInit(layer) {
|
||||
};
|
||||
}
|
||||
function createElementEvent(obj, style) {
|
||||
console.log(style);
|
||||
style = {
|
||||
...new IconStyle(),
|
||||
...style
|
||||
|
||||
@ -23,7 +23,7 @@ let positions = {
|
||||
"r5": { "y": 78, "name": "二轨时的第二轨/四轨时的第二轨" },
|
||||
"r6": { "y": 57, "name": "三轨时的第一轨" },
|
||||
"r7": { "y": 36, "name": "四轨时的第一轨" },
|
||||
}
|
||||
};
|
||||
|
||||
function themePosition() {
|
||||
let theme_positions = document.getElementById("theme-positions");
|
||||
@ -63,45 +63,74 @@ function themePosition() {
|
||||
rowx = null;
|
||||
columny = null;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
if (rowx) {
|
||||
perx.innerText = (rowx / 3.52).toFixed(2) + "%"
|
||||
perx.classList.add("c")
|
||||
pxx.innerText = rowx + "px"
|
||||
pxx.classList.add("c")
|
||||
}
|
||||
else {
|
||||
perx.innerText = x_percent.toFixed(2) + "%"
|
||||
perx.classList.remove("c")
|
||||
pxx.innerText = x + "px"
|
||||
pxx.classList.remove("c")
|
||||
perx.innerText = (rowx / 3.52).toFixed(2) + "%";
|
||||
perx.classList.add("c");
|
||||
pxx.innerText = rowx + "px";
|
||||
pxx.classList.add("c");
|
||||
} else {
|
||||
perx.innerText = x_percent.toFixed(2) + "%";
|
||||
perx.classList.remove("c");
|
||||
pxx.innerText = x + "px";
|
||||
pxx.classList.remove("c");
|
||||
}
|
||||
if (columny) {
|
||||
pery.innerText = (100 - columny / 1.98).toFixed(2) + "%"
|
||||
pery.classList.add("c")
|
||||
pxy.innerText = 198 - columny + "px"
|
||||
pxy.classList.add("c")
|
||||
}
|
||||
else {
|
||||
pery.innerText = (100 - y_percent).toFixed(2) + "%"
|
||||
pery.classList.remove("c")
|
||||
pxy.innerText = 198 - y + "px"
|
||||
pxy.classList.remove("c")
|
||||
pery.innerText = (100 - columny / 1.98).toFixed(2) + "%";
|
||||
pery.classList.add("c");
|
||||
pxy.innerText = 198 - columny + "px";
|
||||
pxy.classList.add("c");
|
||||
} else {
|
||||
pery.innerText = (100 - y_percent).toFixed(2) + "%";
|
||||
pery.classList.remove("c");
|
||||
pxy.innerText = 198 - y + "px";
|
||||
pxy.classList.remove("c");
|
||||
}
|
||||
infobox.style.right = "calc(" + (100 - x_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.bottom = columny ? (100 - columny / 1.98 - 5.305) + "%" : rowx ? "0" : "calc(" + (100 - y_percent) + "% - 3px)";
|
||||
infobox.style.top = "calc(" + y_percent + "% + 10px)";
|
||||
selectbox.style.left = rowx
|
||||
? (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.height = columny ? "10.61%" : rowx ? "100%" : "6px";
|
||||
let rowname = rowx ? positions[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 : "";
|
||||
let rowname = rowx
|
||||
? positions[
|
||||
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) {
|
||||
perx.innerText = "100%";
|
||||
@ -114,13 +143,12 @@ function themePosition() {
|
||||
selectbox.style.bottom = "50%";
|
||||
selectbox.style.width = "0";
|
||||
selectbox.style.height = "0";
|
||||
perx.classList.remove("c")
|
||||
pery.classList.remove("c")
|
||||
pxx.classList.remove("c")
|
||||
pxy.classList.remove("c")
|
||||
perx.classList.remove("c");
|
||||
pery.classList.remove("c");
|
||||
pxx.classList.remove("c");
|
||||
pxy.classList.remove("c");
|
||||
other.innerText = "";
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function rdview() {
|
||||
@ -131,21 +159,25 @@ function rdview() {
|
||||
let number = rdview.querySelector(".number");
|
||||
const textareaStyles = window.getComputedStyle(textarea);
|
||||
[
|
||||
'fontFamily', 'fontSize', 'fontWeight',
|
||||
'letterSpacing', 'lineHeight', 'padding',
|
||||
].forEach(property => {
|
||||
"fontFamily",
|
||||
"fontSize",
|
||||
"fontWeight",
|
||||
"letterSpacing",
|
||||
"lineHeight",
|
||||
"padding",
|
||||
].forEach((property) => {
|
||||
number.style[property] = textareaStyles[property];
|
||||
});
|
||||
const canvas = document.createElement('canvas');
|
||||
const context = canvas.getContext('2d');
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
const font = `${textareaStyles.fontSize} ${textareaStyles.fontFamily}`;
|
||||
context.font = font;
|
||||
function calcStringLines(sentence, width) {
|
||||
if (!width) return 0;
|
||||
const words = sentence.split('');
|
||||
const words = sentence.split("");
|
||||
let lineCount = 0;
|
||||
|
||||
let currentLine = '';
|
||||
let currentLine = "";
|
||||
for (let i = 0; i < words.length; i++) {
|
||||
const wordWidth = context.measureText(words[i]).width;
|
||||
const lineWidth = context.measureText(currentLine).width;
|
||||
@ -156,18 +188,22 @@ function rdview() {
|
||||
currentLine += words[i];
|
||||
}
|
||||
}
|
||||
if (currentLine.trim() !== '') lineCount++;
|
||||
if (currentLine.trim() !== "") lineCount++;
|
||||
return lineCount;
|
||||
}
|
||||
function calcLines() {
|
||||
const lines = textarea.value.split('\n');
|
||||
const lines = textarea.value.split("\n");
|
||||
const textareaWidth = textarea.getBoundingClientRect().width;
|
||||
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 textareaPaddingRight = parseNumber(textareaStyles.paddingRight);
|
||||
const textareaContentWidth = textareaWidth - textareaPaddingLeft - textareaPaddingRight - textareaScrollWidth;
|
||||
const numLines = lines.map(lineString => calcStringLines(lineString, textareaContentWidth));
|
||||
const textareaContentWidth = textareaWidth - textareaPaddingLeft -
|
||||
textareaPaddingRight - textareaScrollWidth;
|
||||
const numLines = lines.map((lineString) =>
|
||||
calcStringLines(lineString, textareaContentWidth)
|
||||
);
|
||||
let lineNumbers = [];
|
||||
let i = 1;
|
||||
while (numLines.length > 0) {
|
||||
@ -175,8 +211,8 @@ function rdview() {
|
||||
lineNumbers.push(i);
|
||||
if (numLinesOfSentence > 1) {
|
||||
Array(numLinesOfSentence - 1)
|
||||
.fill('')
|
||||
.forEach((_) => lineNumbers.push(''));
|
||||
.fill("")
|
||||
.forEach((_) => lineNumbers.push(""));
|
||||
}
|
||||
i++;
|
||||
}
|
||||
@ -186,18 +222,18 @@ function rdview() {
|
||||
const lines = calcLines();
|
||||
const lineDoms = Array.from({
|
||||
length: lines.length,
|
||||
}, (_, i) => `<div>${lines[i] || ' '}</div>`);
|
||||
number.innerHTML = lineDoms.join('');
|
||||
}, (_, i) => `<div>${lines[i] || " "}</div>`);
|
||||
number.innerHTML = lineDoms.join("");
|
||||
}
|
||||
function initCanvas() {
|
||||
const lang = textarea.value.split('\n')[0]
|
||||
const code = textarea.value.split('\n').slice(1).join('\n')
|
||||
rdcanvas.innerHTML = RDViewRender(lang, code)
|
||||
const lang = textarea.value.split("\n")[0];
|
||||
const code = textarea.value.split("\n").slice(1).join("\n");
|
||||
rdcanvas.innerHTML = RDViewRender(lang, code);
|
||||
}
|
||||
initCanvas()
|
||||
initLineNumbers()
|
||||
textarea.addEventListener('input', initLineNumbers);
|
||||
textarea.addEventListener('input', initCanvas);
|
||||
initCanvas();
|
||||
initLineNumbers();
|
||||
textarea.addEventListener("input", initLineNumbers);
|
||||
textarea.addEventListener("input", initCanvas);
|
||||
}
|
||||
|
||||
function rdview2() {
|
||||
@ -208,21 +244,25 @@ function rdview2() {
|
||||
let number = rdview.querySelector(".number");
|
||||
const textareaStyles = window.getComputedStyle(textarea);
|
||||
[
|
||||
'fontFamily', 'fontSize', 'fontWeight',
|
||||
'letterSpacing', 'lineHeight', 'padding',
|
||||
].forEach(property => {
|
||||
"fontFamily",
|
||||
"fontSize",
|
||||
"fontWeight",
|
||||
"letterSpacing",
|
||||
"lineHeight",
|
||||
"padding",
|
||||
].forEach((property) => {
|
||||
number.style[property] = textareaStyles[property];
|
||||
});
|
||||
const canvas = document.createElement('canvas');
|
||||
const context = canvas.getContext('2d');
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
const font = `${textareaStyles.fontSize} ${textareaStyles.fontFamily}`;
|
||||
context.font = font;
|
||||
function calcStringLines(sentence, width) {
|
||||
if (!width) return 0;
|
||||
const words = sentence.split('');
|
||||
const words = sentence.split("");
|
||||
let lineCount = 0;
|
||||
|
||||
let currentLine = '';
|
||||
let currentLine = "";
|
||||
for (let i = 0; i < words.length; i++) {
|
||||
const wordWidth = context.measureText(words[i]).width;
|
||||
const lineWidth = context.measureText(currentLine).width;
|
||||
@ -233,18 +273,22 @@ function rdview2() {
|
||||
currentLine += words[i];
|
||||
}
|
||||
}
|
||||
if (currentLine.trim() !== '') lineCount++;
|
||||
if (currentLine.trim() !== "") lineCount++;
|
||||
return lineCount;
|
||||
}
|
||||
function calcLines() {
|
||||
const lines = textarea.value.split('\n');
|
||||
const lines = textarea.value.split("\n");
|
||||
const textareaWidth = textarea.getBoundingClientRect().width;
|
||||
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 textareaPaddingRight = parseNumber(textareaStyles.paddingRight);
|
||||
const textareaContentWidth = textareaWidth - textareaPaddingLeft - textareaPaddingRight - textareaScrollWidth;
|
||||
const numLines = lines.map(lineString => calcStringLines(lineString, textareaContentWidth));
|
||||
const textareaContentWidth = textareaWidth - textareaPaddingLeft -
|
||||
textareaPaddingRight - textareaScrollWidth;
|
||||
const numLines = lines.map((lineString) =>
|
||||
calcStringLines(lineString, textareaContentWidth)
|
||||
);
|
||||
let lineNumbers = [];
|
||||
let i = 1;
|
||||
while (numLines.length > 0) {
|
||||
@ -252,8 +296,8 @@ function rdview2() {
|
||||
lineNumbers.push(i);
|
||||
if (numLinesOfSentence > 1) {
|
||||
Array(numLinesOfSentence - 1)
|
||||
.fill('')
|
||||
.forEach((_) => lineNumbers.push(''));
|
||||
.fill("")
|
||||
.forEach((_) => lineNumbers.push(""));
|
||||
}
|
||||
i++;
|
||||
}
|
||||
@ -263,14 +307,26 @@ function rdview2() {
|
||||
const lines = calcLines();
|
||||
const lineDoms = Array.from({
|
||||
length: lines.length,
|
||||
}, (_, i) => `<div>${lines[i] || ' '}</div>`);
|
||||
number.innerHTML = lineDoms.join('');
|
||||
}, (_, i) => `<div>${lines[i] || " "}</div>`);
|
||||
number.innerHTML = lineDoms.join("");
|
||||
}
|
||||
function initCanvas() {
|
||||
// const lang = textarea.value.split('\n')[0]
|
||||
// const code = textarea.value.split('\n').slice(1).join('\n')
|
||||
// rdcanvas.innerHTML = RDViewRender(lang, code)
|
||||
const objs = JSON.parse(`[${textarea.value}]`);
|
||||
// try {
|
||||
// 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;
|
||||
for (let obj of objs) {
|
||||
@ -278,10 +334,19 @@ function rdview2() {
|
||||
const elem = createElementEvent(obj, style);
|
||||
elem.eventStyle = style;
|
||||
elem.style.position = "absolute";
|
||||
elem.style.left = `${((((obj.bar ?? 1) - 1) * 8) + (obj.beat ?? 1) - 1) * 14 * eventStyle.scale}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.style.left = `${
|
||||
((((obj.bar ?? 1) - 1) * 8) + (obj.beat ?? 1) - 1) * 14 *
|
||||
eventStyle.scale
|
||||
}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) => {
|
||||
const eStyle = elem.eventStyle;
|
||||
@ -310,14 +375,13 @@ function rdview2() {
|
||||
rdcanvas.appendChild(elem);
|
||||
}
|
||||
}
|
||||
}
|
||||
//rdcanvas.innerHTML = RDView2Render(json);
|
||||
initCanvas();
|
||||
initLineNumbers();
|
||||
textarea.addEventListener("input", initLineNumbers);
|
||||
textarea.addEventListener("input", initCanvas);
|
||||
}
|
||||
initCanvas()
|
||||
initLineNumbers()
|
||||
textarea.addEventListener('input', initLineNumbers);
|
||||
textarea.addEventListener('input', initCanvas);
|
||||
}
|
||||
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins, function (hook) {
|
||||
hook.doneEach(function () {
|
||||
themePosition();
|
||||
@ -328,5 +392,4 @@ window.$docsify.plugins = [].concat(window.$docsify.plugins, function (hook) {
|
||||
});
|
||||
|
||||
import("./docsify.min.js").then(() => {
|
||||
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user