Merge branch 'main' of https://git.obugs.cn/zyx/rd.rdlevel.cn

Signed-off-by: 0x4D2 <1706119930@qq.com>

pages/appendix_events.md

@@ -116,4 +116,4 @@
 | 设置主窗口 | `U` | [窗口相关的动画](../pages/WindowDance.md#设置主窗口) | 设置对话，顶部护士灯光，状态牌等内容在哪个窗口显示 |
 | 设置窗口名称 | `N` | [窗口相关的动画](../pages/WindowDance.md#设置窗口名称) | 修改窗口的标题 |
 | 设置桌面颜色 | `D` | [窗口相关的动画](../pages/WindowDance.md#设置桌面颜色) | 修改模拟移动时桌面的颜色 |
-| 注释 | `M` | [标签](../pages/tag.md#让事件摆放更有条理) | 添加注释内容或插入注释型自定义方法 |
+| 注释 | `M` | [标签](../pages/tag.md#让事件摆放更有条理) | 添加注释内容或插入注释型自定义方法 |

script/special.js

@@ -236,6 +236,91 @@ function rdview() {
     textarea.addEventListener("input", initCanvas);
 }
 
+function rdview2() {
+    let rdview = document.getElementsByClassName("rdview2")[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);
+}
+
 function rdview2() {
     let rdview = document.getElementsByClassName("rdview2")[0];
     if (!rdview) return;

style/base.css

@@ -1313,3 +1313,18 @@ del {
   transition: background-color 0.3s, transform 0.2s;
   z-index: 20;
 }
+
+.controlSpan {
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "d9", sans-serif;
+  font-size: 16px;
+  height: 30px;
+  width: 30px;
+  transition: background-color 0.3s, transform 0.2s;
+  z-index: 20;
+}