[RDView] 现已可用，在 pages/classicbeat 可查看第一个用例

script/rdtkview_render.js

@@ -0,0 +1,82 @@
+import { createElementEvent } from "./rdtkview.js";
+export function render(data, width, height, scale = 2.0) {
+    const canvas = document.createElement("div");
+    let objs = [];
+    try {
+        objs = JSON.parse(`[${data}]`);
+        canvas.innerHTML = "";
+    } catch (e) {
+        canvas.innerHTML =
+            `<div style="color: red; font-weight: bold;">JSON解析错误：${e.message}</div>`;
+        return canvas;
+    }
+    const eventStyle = { "scale": scale, "showDuration": false };
+    const elems = [];
+    for (let obj of objs) {
+        const style = { ...eventStyle, enabled: obj.active ?? true };
+        const elem = createElementEvent(obj, style);
+        console.log(obj, elem);
+        if (!elem) continue;
+        elem.eventStyle = style;
+        elem.style.position = "absolute";
+        elem.style.left = `${
+            ((((obj.bar ?? 1) - 1) * 8) + (obj.beat ?? 1) - 1) * 14 *
+            scale
+        }px`;
+        elem.style.top = `${(obj.y ?? obj.row ?? 0) * 14 * scale}px`;
+        elem.addEventListener("mousedown", (event) => {
+            const eStyle = elem.eventStyle;
+            eStyle.active = true;
+            elem.onStateChange(eStyle);
+        });
+        elem.addEventListener("mouseover", (event) => {
+            const eStyle = elem.eventStyle;
+            eStyle.hover = true;
+            elem.onStateChange(eStyle);
+        });
+        elem.addEventListener("mouseout", (event) => {
+            const eStyle = elem.eventStyle;
+            eStyle.hover = false;
+            eStyle.active = false;
+            elem.onStateChange(eStyle);
+        });
+        elem.addEventListener("mouseup", (event) => {
+            const eStyle = elem.eventStyle;
+            eStyle.active = false;
+            elem.onStateChange(eStyle);
+        });
+        elems.push(elem);
+    }
+    canvas.style.position = "relative";
+    canvas.style.width = `${width * 14 * scale}px`;
+    canvas.style.height = `${height * 14 * scale}px`;
+    elems.forEach((elem) => {
+        canvas.appendChild(elem);
+    });
+    return canvas;
+}
+
+window.$docsify.plugins = [].concat(window.$docsify.plugins, (hook) => {
+    hook.doneEach(() => {
+        console.log("hello");
+        const pres = document.querySelectorAll("pre");
+        pres.forEach((codeBlock) => {
+            const lang = codeBlock.getAttribute("data-lang") || "";
+            console.log(codeBlock, lang);
+            if (lang.startsWith("rdtkview")) {
+            const code = codeBlock.querySelector("code").innerText || "";
+                const args = lang.slice(8).trim().split(" ");
+                const width = parseInt(args[0]) || 8;
+                const height = parseInt(args[1]) || 4;
+                const scale = parseFloat(args[2]) || 2.0;
+                const result = render(code, width, height, scale);
+                const parent = document.createElement("div");
+                parent.style.width = 100 + "%";
+                parent.style.display = "flex";
+                parent.style.justifyContent = "center";
+                parent.appendChild(result);
+                codeBlock.replaceWith(parent);
+            }
+        });
+    });
+});

script/special.js

@@ -366,12 +366,12 @@ function rdview2() {
                 return elem;
             });
             elemPromises.push(elem);
-            Promise.all(elemPromises).then((elems) => {
-                elems.forEach((elem) => {
-                    rdcanvas.appendChild(elem);
-                });
-            });
         }
+        Promise.all(elemPromises).then((elems) => {
+            elems.forEach((elem) => {
+                rdcanvas.appendChild(elem);
+            });
+        });
         rdcanvas.style.position = "relative";
         rdcanvas.style.height = `${maxy + 4 * 14 * eventStyle.scale}px`;
     }