new

2025-06-01 11:35:11 +08:00
commit 318bbf3be2
423 changed files with 13900 additions and 0 deletions
@@ -0,0 +1,207 @@
+let curx = 0;
+let cury = 0;
+let rowx;
+let columny;
+
+let positions = {
+    "c1": { "x": 64, "name": "第一拍" },
+    "c2": { "x": 88, "name": "第单发拍" },
+    "c3": { "x": 112, "name": "第三拍" },
+    "c4": { "x": 136, "name": "第四拍" },
+    "c5": { "x": 160, "name": "第五拍" },
+    "c6": { "x": 184, "name": "第六拍" },
+    "c7": { "x": 249, "name": "第普通拍" },
+    "ccharacter": { "x": 35, "name": "角色" },
+    "ccenter": { "x": 176, "name": "中心" },
+    "cheart": { "x": 317, "name": "心" },
+    "r1": { "y": 162, "name": "四轨时的第一轨" },
+    "r2": { "y": 141, "name": "三轨时的第一轨" },
+    "r3": { "y": 120, "name": "二轨时的第一轨/四轨时的第二轨" },
+    "r4": { "y": 99, "name": "一轨时的第一轨/三轨时的第二轨" },
+    "r5": { "y": 78, "name": "二轨时的第二轨/四轨时的第三轨" },
+    "r6": { "y": 57, "name": "三轨时的第三轨" },
+    "r7": { "y": 36, "name": "四轨时的第四轨" },
+}
+
+function themePosition() {
+    let theme_positions = document.getElementById("theme-positions");
+    if (!theme_positions) return;
+    let perx = theme_positions.querySelector(".per>span.x");
+    let pery = theme_positions.querySelector(".per>span.y");
+    let pxx = theme_positions.querySelector(".px>span.x");
+    let pxy = theme_positions.querySelector(".px>span.y");
+    let infobox = theme_positions.querySelector(".infobox");
+    let selectbox = theme_positions.querySelector(".selectbox");
+    let other = theme_positions.querySelector(".other");
+    perx.innerText = "100%";
+    pery.innerText = "100%";
+    pxx.innerText = "352px";
+    pxy.innerText = "198px";
+    infobox.style.right = "calc(10px)";
+    infobox.style.top = "calc(10px)";
+    selectbox.style.left = "50%";
+    selectbox.style.bottom = "50%";
+    selectbox.style.width = "0";
+    selectbox.style.height = "0";
+    other.innerText = "";
+    theme_positions.addEventListener("mouseenter", function (event) {
+    });
+    theme_positions.addEventListener("mousemove", function (event) {
+        let x = event.clientX - theme_positions.getBoundingClientRect().left;
+        let y = event.clientY - theme_positions.getBoundingClientRect().top;
+        let width = theme_positions.offsetWidth;
+        let height = theme_positions.offsetHeight;
+
+        let x_percent = parseFloat(((x / width) * 100).toFixed(2));
+        let y_percent = parseFloat(((y / height) * 100).toFixed(2));
+
+        x = parseFloat((x_percent * 3.52).toFixed(0));
+        y = parseFloat((y_percent * 1.98).toFixed(0));
+
+        rowx = null;
+        columny = null;
+        for (let key in positions) {
+            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)
+                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")
+        }
+        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")
+        }
+        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)";
+        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 : "";
+    });
+    theme_positions.addEventListener("mouseleave", function (event) {
+        perx.innerText = "100%";
+        pery.innerText = "100%";
+        pxx.innerText = "352px";
+        pxy.innerText = "198px";
+        infobox.style.right = "calc(10px)";
+        infobox.style.top = "calc(10px)";
+        selectbox.style.left = "50%";
+        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")
+        other.innerText = "";
+    });
+
+}
+
+function rdview() {
+    let rdview = document.getElementsByClassName("rdview")[0];
+    if (!rdview) return;
+    let rdcanvas = rdview.querySelector(".canvas");
+    let textarea = rdview.querySelector("textarea.area");
+    let number = rdview.querySelector(".number");
+    const textareaStyles = window.getComputedStyle(textarea);
+    [
+        'fontFamily', 'fontSize', 'fontWeight',
+        'letterSpacing', 'lineHeight', 'padding',
+    ].forEach(property => {
+        number.style[property] = textareaStyles[property];
+    });
+    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('');
+        let lineCount = 0;
+
+        let currentLine = '';
+        for (let i = 0; i < words.length; i++) {
+            const wordWidth = context.measureText(words[i]).width;
+            const lineWidth = context.measureText(currentLine).width;
+            if (lineWidth + wordWidth > width) {
+                lineCount++;
+                currentLine = words[i];
+            } else {
+                currentLine += words[i];
+            }
+        }
+        if (currentLine.trim() !== '') lineCount++;
+        return lineCount;
+    }
+    function calcLines() {
+        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 textareaPaddingLeft = parseNumber(textareaStyles.paddingLeft);
+        const textareaPaddingRight = parseNumber(textareaStyles.paddingRight);
+        const textareaContentWidth = textareaWidth - textareaPaddingLeft - textareaPaddingRight - textareaScrollWidth;
+        const numLines = lines.map(lineString => calcStringLines(lineString, textareaContentWidth));
+        let lineNumbers = [];
+        let i = 1;
+        while (numLines.length > 0) {
+            const numLinesOfSentence = numLines.shift();
+            lineNumbers.push(i);
+            if (numLinesOfSentence > 1) {
+                Array(numLinesOfSentence - 1)
+                    .fill('')
+                    .forEach((_) => lineNumbers.push(''));
+            }
+            i++;
+        }
+        return lineNumbers;
+    }
+    function initLineNumbers() {
+        const lines = calcLines();
+        const lineDoms = Array.from({
+            length: lines.length,
+        }, (_, i) => `<div>${lines[i] || '&nbsp;'}</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)
+    }
+    initCanvas()
+    initLineNumbers()
+    textarea.addEventListener('input', initLineNumbers);
+    textarea.addEventListener('input', initCanvas);
+}
+
+window.$docsify.plugins = [].concat(window.$docsify.plugins, function (hook) {
+    hook.doneEach(function () {
+        themePosition();
+        rdview();
+        document.documentElement.scrollTop = document.body.scrollTop = 0;
+    });
+});