将 rdview 底层全量替换为 rdtkview
This commit is contained in:
+43
-46
@@ -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`;
|
||||
|
||||
Reference in New Issue
Block a user