This commit is contained in:
binary-husky 2024-01-16 00:29:46 +08:00
parent 74bced2d35
commit 0e43b08837
2 changed files with 87 additions and 43 deletions

View File

@ -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");

View File

@ -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('启动渲染');
// 加载配置 Load up the config
mermaid.mermaidAPI.globalReset() // 全局复位
const config = (typeof mermaidConfig === "undefined") ? defaultConfig : mermaidConfig
mermaid.initialize(config)
const Module = await import('./file=themes/mermaid_editor.js');
// 查找需要渲染的元素 Find all of our Mermaid sources and render them.
const blocks = document.querySelectorAll(`pre.${className}, diagram-div`);
for (let i = 0; i < blocks.length; i++) {
var block = blocks[i]
/////////////////////////////////////////////////////////////////
var code = getFromCode(block);
let code2Element = document.createElement("code2"); // 创建一个新的code2元素
let existingCode2Element = block.querySelector("code2"); // 如果block下已存在code2元素则获取它
let codeContent = block.querySelector("code").textContent; // 获取code元素中的文本内容
if(existingCode2Element){ // 如果block下已存在code2元素
existingCode2Element.style.display = "none";
if(existingCode2Element.textContent !== codeContent){
existingCode2Element.textContent = codeContent; // 如果现有的code2元素中的内容与code元素中的内容不同更新code2元素中的内容
}
else{
continue;
}
} else { // 如果不存在code2元素则将code元素中的内容添加到新创建的code2元素中
code2Element.style.display = "none";
code2Element.textContent = codeContent;
block.appendChild(code2Element); // 将新创建的code2元素添加到block中
function do_render(block, code, codeContent) {
var rendered_content = mermaid.render(`_diagram_${i}`, code);
////////////////////////////// 记录有哪些代码已经被渲染了 ///////////////////////////////////
let codeFinishRenderElement = block.querySelector("code_finish_render"); // 如果block下已存在code_already_rendered元素则获取它
if (codeFinishRenderElement) { // 如果block下已存在code_already_rendered元素
codeFinishRenderElement.style.display = "none";
} else {
// 如果不存在code_finish_render元素则将code元素中的内容添加到新创建的code_finish_render元素中
let codeFinishRenderElementNew = document.createElement("code_finish_render"); // 创建一个新的code_already_rendered元素
codeFinishRenderElementNew.style.display = "none";
codeFinishRenderElementNew.textContent = "";
block.appendChild(codeFinishRenderElementNew); // 将新创建的code_already_rendered元素添加到block中
codeFinishRenderElement = codeFinishRenderElementNew;
}
/////////////////////////////////////////////////////////////////
//尝试获取已存在的<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'
var x = {
mermaidRender.innerHTML = rendered_content
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')
pako_encode = Module.serializeState(x)
createOrUpdateHyperlink(block, "点击这里编辑脑图", "https://mermaid.live/edit#"+pako_encode)
/////////////////////////////////////////////////////////////////
const content = await mermaid.render(`_diagram_${i}`, code)
mermaidRender.innerHTML = content
});
createOrUpdateHyperlink(block, "点击这里编辑脑图", "https://mermaid.live/edit#" + pako_encode)
}
// 加载配置 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);
}
}
}
}