From fb2e0e124b4cb1cc6d722f63772ecca76d2509f9 Mon Sep 17 00:00:00 2001 From: OLDREDSTONE Date: Wed, 14 Jan 2026 00:55:38 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20json=20=E8=A7=A3=E6=9E=90?= =?UTF-8?q?=E5=BC=82=E5=B8=B8=E6=9C=AA=E6=8D=95=E8=8E=B7=E7=9A=84=E9=94=99?= =?UTF-8?q?=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 +- script/View.js | 1 - script/special.js | 241 +++++++++++++++++++++++++++++----------------- 3 files changed, 154 insertions(+), 92 deletions(-) diff --git a/index.html b/index.html index 95d0522..8dc7901 100644 --- a/index.html +++ b/index.html @@ -136,8 +136,8 @@ - + > --> diff --git a/script/View.js b/script/View.js index ebf2918..57d27c6 100644 --- a/script/View.js +++ b/script/View.js @@ -728,7 +728,6 @@ function layerHoverInit(layer) { }; } function createElementEvent(obj, style) { - console.log(style); style = { ...new IconStyle(), ...style diff --git a/script/special.js b/script/special.js index 5e8373a..aeddffd 100644 --- a/script/special.js +++ b/script/special.js @@ -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) => `
${lines[i] || ' '}
`); - number.innerHTML = lineDoms.join(''); + }, (_, i) => `
${lines[i] || " "}
`); + 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,25 +307,46 @@ function rdview2() { const lines = calcLines(); const lineDoms = Array.from({ length: lines.length, - }, (_, i) => `
${lines[i] || ' '}
`); - number.innerHTML = lineDoms.join(''); + }, (_, i) => `
${lines[i] || " "}
`); + 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}]`); - const eventStyle = {"scale": 2.0, "showDuration": false }; + // try { + // JSON.parse(`[${textarea.value}]`); + // } catch (e) { + // rdcanvas.innerHTML = `
JSON解析错误：${e.message}
`; + // } + let objs = []; + try { + objs = JSON.parse(`[${textarea.value}]`); + } catch (e) { + rdcanvas.innerHTML = + `
JSON解析错误：${e.message}
`; + return; + } + const eventStyle = { "scale": 2.0, "showDuration": false }; let maxy = 0; for (let obj of objs) { - const style = {... eventStyle, enabled: obj.active ?? true }; + const style = { ...eventStyle, enabled: obj.active ?? true }; 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; @@ -308,16 +373,15 @@ function rdview2() { rdcanvas.style.height = `${maxy + 4 * 14 * eventStyle.scale}px`; if (elem) { rdcanvas.appendChild(elem); + } } - } - //rdcanvas.innerHTML = RDView2Render(json); } - initCanvas() - initLineNumbers() - textarea.addEventListener('input', initLineNumbers); - textarea.addEventListener('input', initCanvas); + //rdcanvas.innerHTML = RDView2Render(json); + 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(() => { - -}); \ No newline at end of file +});