[rdview2] 性能测试

script/special.js

@@ -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(() => {
+    
+});