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

[rdview2] 性能测试

Browse Source
This commit is contained in:
OLDREDSTONE 2026-01-14 00:43:51 +08:00
parent 55c53278ea
commit 1e4e94cce7
7 changed files with 1179 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -19,8 +19,8 @@
<link rel="stylesheet" href="/style/special.css">
</head>
<body>
<div id="app">加载中...</div>
<body style="background-color: #1f1f1f;">
<div id="app" style="color: white;">加载中...</div>
<script>
$docsify = {
name: "节奏医生编辑器教程",
@ -126,7 +126,9 @@
},
};
</script>
<script src="/script/docsify.min.js"></script>
<script type="module" src="./script/special.js"></script>
<script type="module" src="./script/rdview2.js"></script>
<!-- <script src="/script/docsify.min.js"></script> -->
<script src="/script/zoom-image.min.js"></script>
<script src="/script/search.min.js"></script>
<script src="/script/emoji.min.js"></script>
@ -137,7 +139,5 @@
<script
src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-yaml.js"
></script>
<script type="module" src="/script/special.js"></script>
<script type="module" src="/script/rdview2.js"></script>
</body>
</html>

21
pages/appendix_tools.md
View File

@ -20,4 +20,25 @@ g 1 1 5 4 #0ff{
};
</textarea></div></div>
---
<div class="rdview2"><div class="canvas"></div><div class="editor"><div class="number"></div><textarea class="area" spellcheck="false" placeholder="Enter code here">
{ "bar": 1, "beat": 1, "y": 1, "type": "SetTheme", "rooms": [0], "preset": "OrientalTechno", "skipPaintEffects": false },
{ "bar": 1, "y": 0, "type": "PlaySong", "song": {"filename": "sndOrientalTechno"}, "bpm": 100, "loop": false },
{ "bar": 1, "beat": 2, "y": 3, "type": "Comment", "tab": "Actions", "text": "", "color": "F2E644", "show": false },
{ "bar": 1, "beat": 3, "y": 0, "type": "AddOneshotBeat", "active": false, "row": 0, "pulseType": "Triangle", "freezeBurnMode": "Burnshot", "interval": 2, "tick": 1.5, "loops": 3, "subdivisions": 3, "subdivSound": true },
{ "bar": 1, "beat": 3, "y": 2, "type": "Comment", "tab": "Actions", "text": "", "color": "FF002F", "show": false },
{ "bar": 1, "beat": 3.75, "y": 1, "type": "ReorderWindows", "order": [1, 3, 2, 0] },
{ "bar": 1, "beat": 4, "y": 3, "type": "Comment", "tab": "Actions", "text": "", "color": "pal14", "show": false },
{ "bar": 1, "beat": 5, "y": 2, "type": "ReorderRooms", "order": [3, 0, 2, 1] },
{ "bar": 1, "beat": 7, "y": 1, "type": "AddClassicBeat", "row": 1, "tick": 1, "swing": 0, "hold": 0 },
{ "bar": 2, "beat": 5.5, "y": 2, "type": "AddFreeTimeBeat", "row": 1, "pulse": 4, "hold": 2 },
{ "bar": 2, "beat": 6.5, "y": 2, "type": "PulseFreeTimeBeat", "row": 1, "action": "Increment", "hold": 0 },
{ "bar": 2, "beat": 7.5, "y": 2, "type": "PulseFreeTimeBeat", "row": 1, "action": "Increment", "hold": 0 },
{ "bar": 2, "beat": 8.5, "y": 2, "type": "PulseFreeTimeBeat", "row": 1, "action": "Custom", "hold": 1, "customPulse": 0 },
{ "bar": 3, "beat": 1.5, "y": 2, "type": "PulseFreeTimeBeat", "row": 1, "action": "Decrement", "hold": 0 },
{ "bar": 3, "beat": 2.5, "y": 2, "type": "PulseFreeTimeBeat", "row": 1, "action": "Increment", "hold": 0 },
{ "bar": 3, "beat": 3.5, "y": 2, "type": "PulseFreeTimeBeat", "row": 1, "action": "Increment", "hold": 0 }
</textarea></div></div>
---

1027
script/View.js Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
script/assets.bin Normal file
View File

Binary file not shown.

BIN
script/assets.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

125
script/special.js
View File

@ -1,3 +1,5 @@
import { createElementEvent } from "./View.js";
let curx = 0;
let cury = 0;
let rowx;
@ -198,10 +200,133 @@ function rdview() {
textarea.addEventListener('input', initCanvas);
}
function rdview2() {
let rdview = document.getElementsByClassName("rdview2")[0];
if (!rdview) return;
let rdcanvas = rdview.querySelector(".canvas");
let textarea = rdview.querySelector("textarea.area");
let number = rdview.querySelector(".number");
const textareaStyles = window.getComputedStyle(textarea);
[
'fontFamily', 'fontSize', 'fontWeight',
'letterSpacing', 'lineHeight', 'padding',
].forEach(property => {
number.style[property] = textareaStyles[property];
});
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const font = `${textareaStyles.fontSize} ${textareaStyles.fontFamily}`;
context.font = font;
function calcStringLines(sentence, width) {
if (!width) return 0;
const words = sentence.split('');
let lineCount = 0;
let currentLine = '';
for (let i = 0; i < words.length; i++) {
const wordWidth = context.measureText(words[i]).width;
const lineWidth = context.measureText(currentLine).width;
if (lineWidth + wordWidth > width) {
lineCount++;
currentLine = words[i];
} else {
currentLine += words[i];
}
}
if (currentLine.trim() !== '') lineCount++;
return lineCount;
}
function calcLines() {
const lines = textarea.value.split('\n');
const textareaWidth = textarea.getBoundingClientRect().width;
const textareaScrollWidth = textareaWidth - textarea.clientWidth;
const parseNumber = (v) => v.endsWith('px') ? parseInt(v.slice(0, -2), 10) : 0;
const textareaPaddingLeft = parseNumber(textareaStyles.paddingLeft);
const textareaPaddingRight = parseNumber(textareaStyles.paddingRight);
const textareaContentWidth = textareaWidth - textareaPaddingLeft - textareaPaddingRight - textareaScrollWidth;
const numLines = lines.map(lineString => calcStringLines(lineString, textareaContentWidth));
let lineNumbers = [];
let i = 1;
while (numLines.length > 0) {
const numLinesOfSentence = numLines.shift();
lineNumbers.push(i);
if (numLinesOfSentence > 1) {
Array(numLinesOfSentence - 1)
.fill('')
.forEach((_) => lineNumbers.push(''));
}
i++;
}
return lineNumbers;
}
function initLineNumbers() {
const lines = calcLines();
const lineDoms = Array.from({
length: lines.length,
}, (_, i) => `<div>${lines[i] || '&nbsp;'}</div>`);
number.innerHTML = lineDoms.join('');
}
function initCanvas() {
// const lang = textarea.value.split('\n')[0]
// const code = textarea.value.split('\n').slice(1).join('\n')
// rdcanvas.innerHTML = RDViewRender(lang, code)
const objs = JSON.parse(`[${textarea.value}]`);
const eventStyle = {"scale": 2.0, "showDuration": false };
let maxy = 0;
for (let obj of objs) {
const style = {... eventStyle, enabled: obj.active ?? true };
const elem = createElementEvent(obj, style);
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);
});
rdcanvas.style.position = "relative";
rdcanvas.style.height = `${maxy + 4 * 14 * eventStyle.scale}px`;
if (elem) {
rdcanvas.appendChild(elem);
}
}
//rdcanvas.innerHTML = RDView2Render(json);
}
initCanvas()
initLineNumbers()
textarea.addEventListener('input', initLineNumbers);
textarea.addEventListener('input', initCanvas);
}
window.$docsify.plugins = [].concat(window.$docsify.plugins, function (hook) {
hook.doneEach(function () {
themePosition();
rdview();
rdview2();
document.documentElement.scrollTop = document.body.scrollTop = 0;
});
});
import("./docsify.min.js").then(() => {
});

2
style/special.css
View File

@ -162,7 +162,7 @@ div.theme-positions>.infobox {
.markdown-section:has(div.rdview) {}
div.rdview {
div.rdview, div.rdview2 {
& div.canvas {
width: 100%;
}