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

index.html

@@ -35,7 +35,8 @@
             };
         </script>
         <script type="module">
-            import "/script/rdview.js";
+            import "./script/rdview.js";
+            import {render} from "./script/rdtkview_render.js";
 
             function escapeHtml(unsafe) {
                 return unsafe
@@ -48,29 +49,32 @@
             loadRDView();
             const originalCodeRenderer = $docsify.markdown
                 ?.renderer?.code;
+            function codeblockRender(code, lang) {
+                if (lang.trim().startsWith("rdview")) {
+                    return RDViewRender(lang, code);
+                }
+                // else if (lang.trim().startsWith("rdtkview")) {
+                //     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);
+                //     result.toString = () => result;
+                //     return result;
+                // }
+                return originalCodeRenderer
+                    ? originalCodeRenderer(code, lang)
+                    : `<pre data-lang="${lang}"><code>${
+                        escapeHtml(code)
+                    }</code></pre>`;
+            }
             $docsify = {
                 ...$docsify,
                 ...{
                     markdown: {
                         renderer: {
-                            code: function (code, lang) {if (
+                            code: (code, lang) => {
-                                    lang.trim().startsWith(
+                                return codeblockRender(code, lang);
-                                        "rdview",
-                                    )
-                                ) {
-                                    return RDViewRender(
-                                        lang,
-                                        code,
-                                    );
-                                }
-                                return originalCodeRenderer
-                                    ? originalCodeRenderer(
-                                        code,
-                                        lang,
-                                    )
-                                    : `<pre data-lang="${lang}"><code>${
-                                        escapeHtml(code)
-                                    }</code></pre>`;
                             },
                             image: function (src, title, alt) {
                                 return `<div class="image-tip"><img class="medium-zoom-image" src="${src}" alt="${alt}">${
@@ -103,7 +107,7 @@
         <script src="/script/zoom-image.min.js"></script>
         <script src="/script/search.min.js"></script>
         <script src="/script/emoji.min.js"></script>
-        <script src="/script/docsify-copy-code.min.js"></script>
+        <!-- <script src="/script/docsify-copy-code.min.js"></script> -->
         <script src="/script/switchLightDarkMode.js"></script>
         <script src="/script/otto.js"></script>
         <script src="/script/custommethod-search.js"></script>

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`;
     }