kuanpan/rd.rdlevel.cn
1
1
Fork 0
forked from RDCNWebs/rd.rdlevel.cn
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
OLDREDSTONE 2026-01-16 20:07:12 +08:00
parent 455bb82550
commit 70026114d8
5 changed files with 727 additions and 565 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
index.html
View File

@ -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 (
lang.trim().startsWith(
"rdview",
)
) {
return RDViewRender(
lang,
code,
);
}
return originalCodeRenderer
? originalCodeRenderer(
code,
lang,
)
: `<pre data-lang="${lang}"><code>${
escapeHtml(code)
}</code></pre>`;
code: (code, lang) => {
return codeblockRender(code, lang);
},
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>

BIN
rdviewAssets/assets Normal file
View File

Binary file not shown.

1156
script/rdtkview.js
View File

File diff suppressed because it is too large Load Diff

82
script/rdtkview_render.js Normal file
View File

@ -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);
}
});
});
});

10
script/special.js
View File

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