feat(mindmap): 引入官方工具栏/侧栏并修复节点选择

2025-12-28 22:05:37 +08:00
parent bddef15242
commit af58c12d81
24 changed files with 2548 additions and 211 deletions
@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useEffect, useState } from "react";
+
+type CountProps = {
+  mindmap: any;
+};
+
+export const MindmapCount = ({ mindmap }: CountProps) => {
+  const [counts, setCounts] = useState({ words: 0, nodes: 0 });
+
+  useEffect(() => {
+    if (!mindmap) return;
+
+    const calculateCounts = (data: any) => {
+      let nodes = 0;
+      let textStr = "";
+
+      const walk = (nodeData: any) => {
+        if (!nodeData) return;
+        nodes++;
+        // simple-mind-map node data structure: { data: { text: ... }, children: [...] }
+        const text = String(nodeData.data?.text || "");
+        textStr += text;
+        
+        if (nodeData.children && Array.isArray(nodeData.children)) {
+          nodeData.children.forEach(walk);
+        }
+      };
+
+      walk(data);
+
+      // Remove HTML tags for word count
+      const tempDiv = document.createElement("div");
+      tempDiv.innerHTML = textStr;
+      const words = tempDiv.textContent?.length || 0;
+
+      setCounts({ words, nodes });
+    };
+
+    const onDataChange = (data: any) => {
+      calculateCounts(data);
+    };
+
+    mindmap.on("data_change", onDataChange);
+    
+    // Initial calculation if data is available
+    // mindmap.getData() might return full data object
+    try {
+        const initialData = mindmap.getData();
+        if (initialData) calculateCounts(initialData);
+    } catch (e) {
+        console.warn("Failed to get initial mindmap data for count", e);
+    }
+
+    return () => {
+      mindmap.off("data_change", onDataChange);
+    };
+  }, [mindmap]);
+
+  return (
+    <div className="absolute bottom-4 left-4 flex items-center gap-4 rounded-md border border-gray-200 bg-white/90 px-3 py-1 text-xs text-gray-600 shadow-sm backdrop-blur-sm select-none z-10">
+      <div className="flex items-center gap-1">
+        <span>字数</span>
+        <span className="font-medium text-gray-900">{counts.words}</span>
+      </div>
+      <div className="flex items-center gap-1">
+        <span>节点</span>
+        <span className="font-medium text-gray-900">{counts.nodes}</span>
+      </div>
+    </div>
+  );
+};