逐步修复 bug——修复线的连接问题

public/js/knowledge-mindmap-graph.js

@@ -22,6 +22,7 @@ class KnowledgeMindmapGraph {
         this.parentMap = {};
         this.clickTimer = null;
         this.clickDelay = 220;
+        this.focusListener = null;
 
         this.setMasteryData(options.masteryData || {});
     }
@@ -304,6 +305,7 @@ class KnowledgeMindmapGraph {
         // 暴露实例便于调试
         window.KnowledgeMindmapGraphInstance = this;
         window.KnowledgeMindmapG6Graph = this.graph;
+        window.focusMindmapNode = (id) => this.focusNodeById(id);
 
         // 边提示
         this.bindEdgeTooltip();
@@ -317,6 +319,8 @@ class KnowledgeMindmapGraph {
         this.graph.on('afterlayout', () => {
             this.redrawRelationEdges();
         });
+
+        this.setupFocusListener();
     }
 
     setCollapsedState(nodeData, depth = 0) {
@@ -725,6 +729,7 @@ class KnowledgeMindmapGraph {
         this.startEdgeFlows();
         this.focusOnLowestMastery();
         this.graph.paint();
+        this.setupFocusListener();
     }
 
     bindEdgeTooltip() {
@@ -802,6 +807,48 @@ class KnowledgeMindmapGraph {
         }, this.clickDelay);
     }
 
+    focusNodeById(nodeId) {
+        if (!this.graph || !nodeId) return;
+        // 展开到目标节点
+        this.expandAncestors(nodeId);
+        this.graph.layout?.();
+        this.redrawRelationEdges();
+
+        const target = this.graph.findById(nodeId);
+        if (!target) return;
+
+        this.graph.getNodes().forEach((node) => {
+            this.graph.clearItemStates(node);
+        });
+        this.graph.setItemState(target, 'selected', true);
+        this.flashNode(target);
+        this.graph.focusItem(target, true, { duration: 400, easing: 'easeCubic' });
+        this.graph.paint();
+    }
+
+    expandAncestors(nodeId) {
+        let cur = nodeId;
+        while (cur) {
+            const parentId = this.parentMap[cur];
+            if (parentId && this.graph.findById(parentId)) {
+                this.graph.updateItem(this.graph.findById(parentId), { collapsed: false });
+            }
+            cur = parentId;
+        }
+    }
+
+    setupFocusListener() {
+        if (this.focusListener) {
+            window.removeEventListener('mindmap-focus-node', this.focusListener);
+        }
+        this.focusListener = (evt) => {
+            const targetId = evt.detail?.id || evt.detail || null;
+            if (!targetId) return;
+            this.focusNodeById(targetId);
+        };
+        window.addEventListener('mindmap-focus-node', this.focusListener);
+    }
+
     forceCollapse() {
         if (!this.graph) {
             setTimeout(() => this.forceCollapse(), 200);

resources/js/knowledge-mindmap-graph.js

@@ -22,6 +22,7 @@ class KnowledgeMindmapGraph {
         this.parentMap = {};
         this.clickTimer = null;
         this.clickDelay = 220;
+        this.focusListener = null;
 
         this.setMasteryData(options.masteryData || {});
     }
@@ -304,6 +305,7 @@ class KnowledgeMindmapGraph {
         // 暴露实例便于调试
         window.KnowledgeMindmapGraphInstance = this;
         window.KnowledgeMindmapG6Graph = this.graph;
+        window.focusMindmapNode = (id) => this.focusNodeById(id);
 
         // 边提示
         this.bindEdgeTooltip();
@@ -317,6 +319,8 @@ class KnowledgeMindmapGraph {
         this.graph.on('afterlayout', () => {
             this.redrawRelationEdges();
         });
+
+        this.setupFocusListener();
     }
 
     setCollapsedState(nodeData, depth = 0) {
@@ -725,6 +729,7 @@ class KnowledgeMindmapGraph {
         this.startEdgeFlows();
         this.focusOnLowestMastery();
         this.graph.paint();
+        this.setupFocusListener();
     }
 
     bindEdgeTooltip() {
@@ -802,6 +807,48 @@ class KnowledgeMindmapGraph {
         }, this.clickDelay);
     }
 
+    focusNodeById(nodeId) {
+        if (!this.graph || !nodeId) return;
+        // 展开到目标节点
+        this.expandAncestors(nodeId);
+        this.graph.layout?.();
+        this.redrawRelationEdges();
+
+        const target = this.graph.findById(nodeId);
+        if (!target) return;
+
+        this.graph.getNodes().forEach((node) => {
+            this.graph.clearItemStates(node);
+        });
+        this.graph.setItemState(target, 'selected', true);
+        this.flashNode(target);
+        this.graph.focusItem(target, true, { duration: 400, easing: 'easeCubic' });
+        this.graph.paint();
+    }
+
+    expandAncestors(nodeId) {
+        let cur = nodeId;
+        while (cur) {
+            const parentId = this.parentMap[cur];
+            if (parentId && this.graph.findById(parentId)) {
+                this.graph.updateItem(this.graph.findById(parentId), { collapsed: false });
+            }
+            cur = parentId;
+        }
+    }
+
+    setupFocusListener() {
+        if (this.focusListener) {
+            window.removeEventListener('mindmap-focus-node', this.focusListener);
+        }
+        this.focusListener = (evt) => {
+            const targetId = evt.detail?.id || evt.detail || null;
+            if (!targetId) return;
+            this.focusNodeById(targetId);
+        };
+        window.addEventListener('mindmap-focus-node', this.focusListener);
+    }
+
     forceCollapse() {
         if (!this.graph) {
             setTimeout(() => this.forceCollapse(), 200);