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