0.1.0 思维导图卡顿修复

This commit is contained in:
liaibo
2026-01-05 18:34:04 +08:00
parent 7480f58c6e
commit d19884d139
4 changed files with 22 additions and 52 deletions
+2 -1
View File
@@ -43,4 +43,5 @@ next-env.d.ts
#test #test
**/test/ **/test/
pw-tests/** pw-tests/**
pw-tests/ pw-tests/
wolai-frontend\public\documents
@@ -331,22 +331,6 @@ const MindmapBlockView = ({
}, 500); }, 500);
const initialSyncDone = useRef(false); const initialSyncDone = useRef(false);
// 若渲染结束后激活列表被清空,定期兜底恢复根节点为选中,避免后续指令找不到父节点
useEffect(() => {
if (!mindmap) return;
const timer = window.setInterval(() => {
const renderer = mindmap.renderer;
if (!renderer) return;
if (!renderer.activeNodeList || renderer.activeNodeList.length === 0) {
const root = getRootNode(mindmap);
if (root && renderer.addNodeToActiveList) {
renderer.addNodeToActiveList(root, true);
renderer.emitNodeActiveEvent?.(root);
}
}
}, 200);
return () => window.clearInterval(timer);
}, [getRootNode, mindmap]);
useEffect(() => { useEffect(() => {
if (!docId || !mindmap || initialSyncDone.current) return; if (!docId || !mindmap || initialSyncDone.current) return;
initialSyncDone.current = true; initialSyncDone.current = true;
@@ -757,17 +741,6 @@ const MindmapBlockView = ({
window.setTimeout(() => runWhenReady(fn, retry + 1), 50); window.setTimeout(() => runWhenReady(fn, retry + 1), 50);
} }
}; };
const recenterIfNeeded = (mm?: MindMapInstance | null) => {
try {
const instance = mm ?? getInstanceCandidate();
const renderer = instance?.renderer;
const view = instance?.view;
renderer?.setRootNodeCenter && renderer.setRootNodeCenter();
view?.fit && view.fit();
} catch {
/* 空 */
}
};
const execWithReflow = (runner: (mm: MindMapInstance) => void) => { const execWithReflow = (runner: (mm: MindMapInstance) => void) => {
const attempt = (retry = 0) => { const attempt = (retry = 0) => {
const instance = getInstanceCandidate(); const instance = getInstanceCandidate();
@@ -777,14 +750,6 @@ const MindmapBlockView = ({
} }
const mm = ensureActiveBefore(instance); const mm = ensureActiveBefore(instance);
if (!mm) return; if (!mm) return;
try {
const renderer = mm.renderer as any;
if (renderer?.refresh) renderer.refresh();
if (renderer?.reRender) renderer.reRender();
recenterIfNeeded(mm);
} catch {
/* 空 */
}
runner(mm); runner(mm);
}; };
attempt(); attempt();
@@ -13,28 +13,34 @@ export const MindmapCount = ({ mindmap }: CountProps) => {
const calculateCounts = (data: any) => { const calculateCounts = (data: any) => {
let nodes = 0; let nodes = 0;
let textStr = ""; let words = 0;
const stripHtmlLen = (html: string) => {
// 简易去标签统计长度:避免每次 data_change 都创建 DOM 容器造成卡顿
const plain = html
.replace(/<[^>]*>/g, "")
.replace(/&nbsp;/g, " ")
.replace(/\s+/g, " ")
.trim();
return plain.length;
};
const walk = (nodeData: any) => { const walk = (nodeData: any) => {
if (!nodeData) return; if (!nodeData) return;
nodes++; nodes++;
// simple-mind-map node data structure: { data: { text: ... }, children: [...] } // simple-mind-map 节点数据结构:{ data: { text: ... }, children: [...] }
const text = String(nodeData.data?.text || ""); const text = String(nodeData.data?.text || "");
textStr += text; words += stripHtmlLen(text);
if (nodeData.children && Array.isArray(nodeData.children)) { if (nodeData.children && Array.isArray(nodeData.children)) {
nodeData.children.forEach(walk); nodeData.children.forEach(walk);
} }
}; };
walk(data); const root = data?.root ?? data;
walk(root);
// Remove HTML tags for word count setCounts((prev) => (prev.words === words && prev.nodes === nodes ? prev : { words, nodes }));
const tempDiv = document.createElement("div");
tempDiv.innerHTML = textStr;
const words = tempDiv.textContent?.length || 0;
setCounts({ words, nodes });
}; };
const onDataChange = (data: any) => { const onDataChange = (data: any) => {
@@ -42,14 +48,13 @@ export const MindmapCount = ({ mindmap }: CountProps) => {
}; };
mindmap.on("data_change", onDataChange); mindmap.on("data_change", onDataChange);
// Initial calculation if data is available // 初次渲染时尝试计算一次(mindmap.getData() 可能返回完整数据对象)
// mindmap.getData() might return full data object
try { try {
const initialData = mindmap.getData(); const initialData = mindmap.getData();
if (initialData) calculateCounts(initialData); if (initialData) calculateCounts(initialData);
} catch (e) { } catch (e) {
console.warn("Failed to get initial mindmap data for count", e); console.warn("获取思维导图初始数据用于统计失败", e);
} }
return () => { return () => {
@@ -9,7 +9,6 @@ import {
} from "./mindmapToolbarConfig"; } from "./mindmapToolbarConfig";
const stopEditorEvent = (e: React.SyntheticEvent) => { const stopEditorEvent = (e: React.SyntheticEvent) => {
e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}; };