同步

themes/common.js

@@ -239,14 +239,20 @@ function do_something_but_not_too_frequently(min_interval, func) {
         const now = Date.now();
         if (!lastInvocationTime || (now - lastInvocationTime) >= min_interval) {
             lastInvocationTime = now;
-            func.apply(this, args);
+            // 现在就执行
+            setTimeout(() => {
+                func.apply(this, lastArgs);
+            }, 0);   
         } else if (!timeoutID) {
+            // 等一会执行
             timeoutID = setTimeout(() => {
                 timeoutID = null;
                 lastInvocationTime = Date.now();
                 func.apply(this, lastArgs);
             }, min_interval - (now - lastInvocationTime));      
-        } 
+        } else {
+            // 压根不执行
+        }
     }
 }
 
@@ -258,7 +264,7 @@ function chatbotContentChanged(attempt = 1, force = false) {
         }, i === 0 ? 0 : 200);
     }
 
-    const run_mermaid_render = do_something_but_not_too_frequently(500, function () {
+    const run_mermaid_render = do_something_but_not_too_frequently(1000, function () {
         const blocks = document.querySelectorAll(`pre.mermaid, diagram-div`);
         if (blocks.length == 0) { return; }
         uml("mermaid");

themes/mermaid_loader.js

@@ -54,7 +54,7 @@ const uml = async className => {
     function createOrUpdateHyperlink(parentElement, linkText, linkHref) {
         // Search for an existing anchor element within the parentElement
         let existingAnchor = parentElement.querySelector("a");
-    
+
         // Check if an anchor element already exists
         if (existingAnchor) {
             // Update the hyperlink reference if it's different from the current one
@@ -63,7 +63,7 @@ const uml = async className => {
             }
             // Update the target attribute to ensure it opens in a new tab
             existingAnchor.target = '_blank';
-    
+
             // If the text must be dynamic, uncomment and use the following line:
             // existingAnchor.textContent = linkText;
         } else {
@@ -76,6 +76,15 @@ const uml = async className => {
         }
     }
 
+    function removeLastLine(str) {
+        // 将字符串按换行符分割成数组
+        var lines = str.split('\n');
+        lines.pop();
+        // 将数组重新连接成字符串，并按换行符连接
+        var result = lines.join('\n');
+        return result;
+    }
+
     // 给出配置 Provide a default config in case one is not specified
     const defaultConfig = {
         startOnLoad: false,
@@ -93,55 +102,84 @@ const uml = async className => {
             messageFontSize: "16px"
         }
     }
-    // console.log('启动渲染');
+    const Module = await import('./file=themes/mermaid_editor.js');
-    // 加载配置 Load up the config
-    mermaid.mermaidAPI.globalReset() // 全局复位
-    const config = (typeof mermaidConfig === "undefined") ? defaultConfig : mermaidConfig
-    mermaid.initialize(config)
 
-    // 查找需要渲染的元素 Find all of our Mermaid sources and render them.
+    function do_render(block, code, codeContent) {
-    const blocks = document.querySelectorAll(`pre.${className}, diagram-div`);
+        var rendered_content = mermaid.render(`_diagram_${i}`, code);
-    for (let i = 0; i < blocks.length; i++) {
+        ////////////////////////////// 记录有哪些代码已经被渲染了 ///////////////////////////////////
-        var block = blocks[i]
+        let codeFinishRenderElement = block.querySelector("code_finish_render"); // 如果block下已存在code_already_rendered元素，则获取它
-        /////////////////////////////////////////////////////////////////
+        if (codeFinishRenderElement) {                                             // 如果block下已存在code_already_rendered元素
-        var code = getFromCode(block);
+            codeFinishRenderElement.style.display = "none";
-        let code2Element = document.createElement("code2"); // 创建一个新的code2元素
+        } else {
-        let existingCode2Element = block.querySelector("code2"); // 如果block下已存在code2元素，则获取它
+            // 如果不存在code_finish_render元素，则将code元素中的内容添加到新创建的code_finish_render元素中
-        let codeContent = block.querySelector("code").textContent; // 获取code元素中的文本内容
+            let codeFinishRenderElementNew = document.createElement("code_finish_render"); // 创建一个新的code_already_rendered元素
-        if(existingCode2Element){ // 如果block下已存在code2元素
+            codeFinishRenderElementNew.style.display = "none";
-            existingCode2Element.style.display = "none";
+            codeFinishRenderElementNew.textContent = "";
-            if(existingCode2Element.textContent !== codeContent){
+            block.appendChild(codeFinishRenderElementNew); // 将新创建的code_already_rendered元素添加到block中
-                existingCode2Element.textContent = codeContent; // 如果现有的code2元素中的内容与code元素中的内容不同，更新code2元素中的内容
+            codeFinishRenderElement = codeFinishRenderElementNew;
-            }
-            else{
-                continue;
-            }
-        } else { // 如果不存在code2元素，则将code元素中的内容添加到新创建的code2元素中
-            code2Element.style.display = "none";
-            code2Element.textContent = codeContent;
-            block.appendChild(code2Element); // 将新创建的code2元素添加到block中
         }
-        /////////////////////////////////////////////////////////////////
+
-        //尝试获取已存在的<div class='mermaid_render'>
+        ////////////////////////////// 创建一个用于渲染的容器 ///////////////////////////////////
-        let mermaidRender = block.querySelector(".mermaid_render");
+        let mermaidRender = block.querySelector(".mermaid_render"); // 尝试获取已存在的<div class='mermaid_render'>
         if (!mermaidRender) {
             mermaidRender = document.createElement("div");  // 不存在，创建新的<div class='mermaid_render'>
             mermaidRender.classList.add("mermaid_render");
             block.appendChild(mermaidRender);               // 将新创建的元素附加到block
         }
-        let pako_encode = 'pako:eNpVjzFPw0AMhf-K5QmkZmHMgEQT6FIJJLolHUziq6_k7qKLo6hK-t-50A7gyXrve37yjE1oGXM0XZgaoahwKGsPaV6qQqId1NFwhCx7Xnas4ILnywLbh12AQULfW396vPHbFYJi3q8Yg4r139ebVfzm3z0vUFZ76jX0x7_OYQoLvFb2Q9L5_45ETqm3ylBuKGsoQkHxjvBkzMRf4s6iEqPc1SfcoOPoyLbpsXlVa1RhxzXmaW3Z0NhpjbW_JpRGDZ8X32CuceQNjn1LyqWlUySHqbUb-PoDqCFfzA'
+        mermaidRender.innerHTML = rendered_content
-        var x = {
+        codeFinishRenderElement.textContent = code  // 标记已经渲染的部分
+
+        ////////////////////////////// 创建一个“点击这里编辑脑图” ///////////////////////////////
+        let pako_encode = Module.serializeState({
             "code": codeContent,
             "mermaid": "{\n  \"theme\": \"default\"\n}",
             "autoSync": true,
             "updateDiagram": false
-        };
+        });
-        const Module = await import('./file=themes/mermaid_editor.js')
+        createOrUpdateHyperlink(block, "点击这里编辑脑图", "https://mermaid.live/edit#" + pako_encode)
-        pako_encode = Module.serializeState(x)
+    }
-        createOrUpdateHyperlink(block, "点击这里编辑脑图", "https://mermaid.live/edit#"+pako_encode)
-        /////////////////////////////////////////////////////////////////
-        const content = await mermaid.render(`_diagram_${i}`, code)
-        mermaidRender.innerHTML = content
 
+    // 加载配置 Load up the config
+    mermaid.mermaidAPI.globalReset() // 全局复位
+    const config = (typeof mermaidConfig === "undefined") ? defaultConfig : mermaidConfig
+    mermaid.initialize(config)
+    // 查找需要渲染的元素 Find all of our Mermaid sources and render them.
+    const blocks = document.querySelectorAll(`pre.${className}`);
+
+    for (let i = 0; i < blocks.length; i++) {
+        var block = blocks[i]
+        ////////////////////////////// 如果代码没有发生变化，就不渲染了 ///////////////////////////////////
+        var code = getFromCode(block);
+        let codeContent = block.querySelector("code").textContent; // 获取code元素中的文本内容
+        let codePendingRenderElement = block.querySelector("code_pending_render"); // 如果block下已存在code_already_rendered元素，则获取它
+        if (codePendingRenderElement) {                               // 如果block下已存在code_pending_render元素
+            codePendingRenderElement.style.display = "none";
+            if (codePendingRenderElement.textContent !== codeContent) {
+                codePendingRenderElement.textContent = codeContent; // 如果现有的code_pending_render元素中的内容与code元素中的内容不同，更新code_pending_render元素中的内容
+            }
+            else {
+                continue; // 如果相同，就不处理了
+            }
+        } else { // 如果不存在code_pending_render元素，则将code元素中的内容添加到新创建的code_pending_render元素中
+            let codePendingRenderElementNew = document.createElement("code_pending_render"); // 创建一个新的code_already_rendered元素
+            codePendingRenderElementNew.style.display = "none";
+            codePendingRenderElementNew.textContent = codeContent;
+            block.appendChild(codePendingRenderElementNew); // 将新创建的code_pending_render元素添加到block中
+            codePendingRenderElement = codePendingRenderElementNew;
+        }
+
+        ////////////////////////////// 在这里才真正开始渲染 ///////////////////////////////////
+        try {
+            do_render(block, code, codeContent);
+            // console.log("渲染", codeContent);
+        } catch (err) {
+            try {
+                var lines = code.split('\n'); if (lines.length < 2) { continue; }
+                do_render(block, removeLastLine(code), codeContent);
+                // console.log("渲染", codeContent);
+            } catch (err) {
+                console.log("以下代码不能渲染", code, removeLastLine(code), err);
+            }
+        }
     }
 }