change collapse-icon

render-process/Editor/index.tsx

@@ -54,9 +54,13 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
             type: 'collapse-expand',
             trigger: 'dblclick',
             onChange: (item, collapsed) => {
+              this.onSelectNode(item.getID());
               const data = item.getModel();
               data.collapsed = collapsed;
-              this.onSelectNode(item.getID());
+              graph.setItemState(item, 'collapsed', data.collapsed as boolean);
+              const icon = data.collapsed ? G6.Marker.expand : G6.Marker.collapse;
+              const marker = item.get('group').find((ele: any) => ele.get('name') === 'collapse-icon');
+              marker.attr('symbol', icon);
               return true;
             },
           },
@@ -113,14 +117,6 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
       }
     });
 
-    graph.on('node:click', (e: G6GraphEvent) => {
-      if (e.target.get('name') === 'collapse-icon') {
-        e.item.getModel().collapsed = !e.item.getModel().collapsed;
-        graph.setItemState(e.item, 'collapsed', e.item.getModel().collapsed as boolean);
-        graph.layout();
-      }
-    });
-
     const clearDragDstState = () => {
       if (this.dragDstId) {
         graph.setItemState(this.dragDstId, 'dragRight', false);
@@ -261,7 +257,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
 
     this.graph = graph;
 
-    this.setState({treeModel: tree});
+    this.setState({ treeModel: tree });
   }
 
   onSelectNode(curNodeId: string | null) {
@@ -298,7 +294,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
             ref={this.ref}
           />
           <Col span={6} className="editorSidebar">
-            {curNode ? <NodePanel /> : <TreePanel model={treeModel}/>}
+            {curNode ? <NodePanel /> : <TreePanel model={treeModel} />}
           </Col>
         </Row>
       </div>

render-process/RegisterNode.ts

@@ -11,6 +11,12 @@ const NODE_COLORS: any = {
 
 
 export default function (settings: Settings) {
+  const collapseStyle: any = {
+    'collapse-icon': {
+      // symbol: G6.Marker.expand,
+      fill: 'blue',
+    }
+  };
   G6.registerNode(
     'TreeNode',
     {
@@ -206,13 +212,12 @@ export default function (settings: Settings) {
           });
         }
 
-        if (cfg.children) {
+        if (Array.isArray(cfg.children) && cfg.children.length > 0) {
           group.addShape('marker', {
             attrs: {
               x: w / 2,
               y: 0,
               r: 6,
-              cursor: 'pointer',
               symbol: G6.Marker.collapse,
               stroke: '#666',
               lineWidth: 1,