fix(tree): Changing selected node's linestyle doesn't work. close #18214

src/chart/tree/TreeView.ts

@@ -514,6 +514,15 @@ function updateNode(
                 }
             }
         };
+
+         // triggle edge's linestyle when select change
+         (symbolEl as ECElement).onElSelectedChange = function (state) {
+            const parentEl = node.parentNode
+                && data.getItemGraphicEl(node.parentNode.dataIndex);
+            if (parentEl) {
+                (symbolEl.__edge as ECElement).selected = state;
+            }
+        };
     }
 }
 
@@ -792,4 +801,4 @@ function getEdgeShape(
     };
 }
 
-export default TreeView;
+export default TreeView;

src/data/Tree.ts

@@ -67,6 +67,8 @@ export class TreeNode {
 
     isExpand: boolean = false;
 
+    isSelected: boolean = false;
+
     readonly hostTree: Tree<Model>;
 
     constructor(name: string, hostTree: Tree<Model>) {
@@ -485,4 +487,4 @@ function addChild(child: TreeNode, node: TreeNode) {
     child.parentNode = node;
 }
 
-export default Tree;
+export default Tree;

src/util/states.ts

@@ -167,9 +167,11 @@ function singleLeaveBlur(el: ECElement) {
 
 function singleEnterSelect(el: ECElement) {
     el.selected = true;
+    el.onElSelectedChange && el.onElSelectedChange(true);
 }
 function singleLeaveSelect(el: ECElement) {
     el.selected = false;
+    el.onElSelectedChange && el.onElSelectedChange(false);
 }
 
 function updateElementState<T>(

src/util/types.ts

@@ -107,6 +107,7 @@ export interface ComponentTypeInfo {
 export interface ECElement extends Element {
     highDownSilentOnTouch?: boolean;
     onHoverStateChange?: (toState: DisplayState) => void;
+    onElSelectedChange?: (toState: boolean) => void;
 
     // 0: normal
     // 1: blur