将 rdview 底层全量替换为 rdtkview

script/config.js

@@ -0,0 +1,36 @@
+window.$docsify = {
+    name: "节奏医生编辑器教程",
+    notFoundPage: "/404.md",
+    homepage: "/pages/intro.md",
+    loadSidebar: true,
+    loadNavbar: true,
+    coverpage: false,
+    maxLevel: 5,
+    subMaxLevel: 4,
+    mergeNavbar: true,
+    markdown: {
+        renderer: {
+            image: function (src, title, alt) {
+                return `<div class="image-tip"><img class="medium-zoom-image" src="${src}" alt="${alt}">${
+                    alt ? `<p>${alt}</p>` : ""
+                }</div>`;
+            },
+        },
+    },
+    switchLightDarkMode: {
+        useSwitchMode: true,
+        top: 130,
+        right: 26,
+        svgColor: "#7d7b75",
+    },
+    search: {
+        noData: {
+            "/": "没有找到结果!",
+        },
+        paths: "auto",
+        placeholder: {
+            "/": "搜索",
+        },
+        hideOtherSidebarContent: true,
+    },
+};

script/rdtkview.d.ts

@@ -0,0 +1,27 @@
+export declare class IconStyle {
+    enabled: boolean;
+    active: boolean;
+    hover: boolean;
+    scale: number;
+    showDuration: boolean;
+}
+
+export interface HTMLLayerElement extends HTMLDivElement {
+    onStateChange?: (style: IconStyle) => void;
+    filterData: unknown;
+    updateFilter: () => void;
+}
+
+export interface HTMLEventElement extends HTMLDivElement {
+    onStateChange: (style: IconStyle) => void;
+    eventStyle: IconStyle;
+    eventData: object;
+    moveTo: (x: number, y: number) => void;
+}
+
+export declare function createElementEvent(
+    obj: any,
+    style: IconStyle,
+): HTMLEventElement | null;
+
+export declare function colorOf(tab: string): any;

script/rdview-init.js

@@ -0,0 +1,5 @@
+import "./rdview.js";
+import "./rdtkview_render.js";
+import "./rdview_render.js";
+
+window.loadRDView();

script/rdview_render.js

@@ -0,0 +1,30 @@
+window.$docsify.plugins = [].concat(window.$docsify.plugins, (hook) => {
+    hook.doneEach(() => {
+        if (typeof window.RDViewRender !== "function") {
+            return;
+        }
+        const codeBlocks = document.querySelectorAll("pre[data-lang]");
+        codeBlocks.forEach((codeBlock) => {
+            const lang = codeBlock.getAttribute("data-lang") || "";
+            if (!lang.trim().startsWith("rdview")) {
+                return;
+            }
+            const codeEl = codeBlock.querySelector("code");
+            const code = codeEl ? codeEl.innerText : codeBlock.innerText;
+            let node;
+            try {
+                node = window.RDViewRender(lang, code);
+            } catch (e) {
+                console.error("rdview render failed:", lang, e);
+                return;
+            }
+            if (!node) {
+                return;
+            }
+            const parent = document.createElement("div");
+            parent.className = "rdtk-rdview-wrap";
+            parent.appendChild(node);
+            codeBlock.replaceWith(parent);
+        });
+    });
+});

script/special.js

@@ -228,7 +228,7 @@ function rdview() {
     function initCanvas() {
         const lang = textarea.value.split("\n")[0];
         const code = textarea.value.split("\n").slice(1).join("\n");
-        rdcanvas.innerHTML = RDViewRender(lang, code);
+        rdcanvas.replaceChildren(RDViewRender(lang, code));
     }
     initCanvas();
     initLineNumbers();
@@ -322,55 +322,52 @@ function rdview2() {
         }
         const eventStyle = { "scale": 2.0, "showDuration": false };
         let maxy = 0;
-        const elemPromises = [];
+        const elems = [];
         for (let obj of objs) {
             const style = { ...eventStyle, enabled: obj.active ?? true };
-            const elem = createElementEvent(obj, style).then((elem) => {
-                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.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);
-                });
-                return elem;
+            const elem = createElementEvent(obj, style);
+            if (!elem) continue;
+            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.addEventListener("mousedown", (event) => {
+                const eStyle = elem.eventStyle;
+                eStyle.active = true;
+                elem.onStateChange(eStyle);
             });
-            elemPromises.push(elem);
+            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);
         }
-        Promise.all(elemPromises).then((elems) => {
-            elems.forEach((elem) => {
-                rdcanvas.appendChild(elem);
-            });
+        elems.forEach((elem) => {
+            rdcanvas.appendChild(elem);
         });
         rdcanvas.style.position = "relative";
         rdcanvas.style.height = `${maxy + 4 * 14 * eventStyle.scale}px`;

script/tsconfig.json

@@ -5,8 +5,8 @@
             "es2017",
             "dom"
         ],
-        "module": "es6",
-        "moduleResolution": "node",
+        "module": "esnext",
+        "moduleResolution": "bundler",
         "strict": true,
         "esModuleInterop": true,
         "skipLibCheck": true,