【实验】添加对 rdview2 的支持

script/rdview2.js

@@ -0,0 +1,84 @@
+import { Extensions, IconStyle } from "/script/Extensions.js";
+function rend() {
+    const codeBlocks = document.querySelectorAll("canvas.rdview2-canvas");
+    codeBlocks.forEach((block) => {
+        const width = block.getAttribute("data-width") || 8;
+        const height = block.getAttribute("data-height") || 4;
+        const scale = block.getAttribute("data-scale") || 2;
+        const data = block.getAttribute("data");
+        const ctx = block.getContext("2d");
+        block.width = width * scale * 14;
+        block.height = height * scale * 14;
+        if (!data) {
+            return;
+        }
+        const jsonData = JSON.parse(`[${JSON.parse(data)}]`);
+        
+        let lastX = -1, lastY = -1, lastActive = false;
+        let frameId = null;
+        
+        const style = new IconStyle();
+        
+        block.render = (x, y, active) => {
+            if (x === lastX && y === lastY && active === lastActive) {
+                return;
+            }
+            lastX = x;
+            lastY = y;
+            lastActive = active;
+            
+            ctx.clearRect(0, 0, block.width, block.height);
+            for (const evt of jsonData) {
+                style.Scale = scale;
+                style.Hover = evt.area?.contains({x, y}) ?? false;
+                style.Active = evt.area?.contains({x, y}) ? active : false;
+                evt.area = Extensions.DrawEventIcon(ctx, evt, {
+                    x: ((evt.beat ?? 1) - 1) * scale * 14,
+                    y: (evt.y ?? 0) * scale * 14,
+                }, style);
+            }
+        }
+        
+        const throttledRender = (x, y, active) => {
+            if (frameId !== null) {
+                cancelAnimationFrame(frameId);
+            }
+            frameId = requestAnimationFrame(() => {
+                block.render(x, y, active);
+                frameId = null;
+            });
+        }
+        
+        block.addEventListener("mousemove", (e) => {
+            const rect = block.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            throttledRender(x, y, false);
+        });
+        block.addEventListener("mousedown", (e) => {
+            const rect = block.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            block.render(x, y, true);
+        });
+        block.addEventListener("mouseup", (e) => {
+            const rect = block.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            block.render(x, y, false);
+        });
+        block.addEventListener("mouseleave", (e) => {
+            if (frameId !== null) {
+                cancelAnimationFrame(frameId);
+            }
+            block.render(0, 0, false);
+        });
+        block.render(0, 0, false);
+    });
+}
+
+window.$docsify.plugins = [].concat(window.$docsify.plugins, function (hook) {
+    hook.doneEach(function () {
+        rend();
+    });
+});