forked from RDCNWebs/rd.rdlevel.cn
80 lines
3.0 KiB
JavaScript
80 lines
3.0 KiB
JavaScript
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);
|
|
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(() => {
|
|
const pres = document.querySelectorAll("pre");
|
|
pres.forEach((codeBlock) => {
|
|
const lang = codeBlock.getAttribute("data-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);
|
|
}
|
|
});
|
|
});
|
|
});
|