新建&删除节点

common/MainEventType.ts

@@ -4,6 +4,7 @@ export default {
   OPEN_WORKSPACE: "OPEN_WORKSPACE",
   CREATE_TREE: 'CREATE_TREE',
   CREATE_NODE: 'CREATE_NODE',
+  DELETE_NODE: 'DELETE_NODE',
   SAVE: 'SAVE',
   SAVE_ALL: 'SAVE_ALL',
 }

main-process/AppMenu.ts

@@ -102,6 +102,21 @@ export default class AppMenu {
             this.webContents.send(MainEventType.SAVE_ALL);
           },
         },
+        { type: 'separator' },
+        {
+          label: '新建节点',
+          accelerator: 'insert',
+          click: () => {
+            this.webContents.send(MainEventType.CREATE_NODE, 'unknow');
+          }
+        },
+        {
+          label: '删除节点',
+          accelerator: 'delete',
+          click: () => {
+            this.webContents.send(MainEventType.DELETE_NODE);
+          }
+        },
       ]
     });
   }
@@ -300,14 +315,6 @@ export default class AppMenu {
       classifyItems.push(other);
     }
 
-    const unknonwItem: MenuItemConstructorOptions = {
-      label: '空白节点',
-      click: () => {
-        this.webContents.send(MainEventType.CREATE_NODE, 'unknow');
-      }
-    }
-    classifyItems.push(unknonwItem);
-
     return new MenuItem({
       label: "新建节点",
       submenu: classifyItems

render-process/Editor/index.tsx

@@ -291,6 +291,25 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     this.changeWithoutAnim();
   }
 
+  deleteNode() {
+    console.log("editor delete node");
+    const { curNodeId } = this.state;
+    if (!curNodeId) {
+      return;
+    }
+
+    if(curNodeId == '1') {
+      message.warn("根节点不能删除!");
+      return;
+    }
+
+    this.onSelectNode(null);
+    const rootData = this.graph.findDataById('1');
+    const parentData = Utils.findParent(rootData, curNodeId);
+    parentData.children = parentData.children.filter(e => e.id != curNodeId);
+    this.changeWithoutAnim();
+  }
+
   updateNode(id: string) {
     this.graph.changeData();
     this.graph.layout();

render-process/TreeTabs.tsx

@@ -1,5 +1,3 @@
-
-import * as ReactDOM from "react-dom";
 import Editor from "./Editor";
 import React, { Component } from "react";
 import { Layout, Tabs, message } from 'antd';
@@ -9,7 +7,6 @@ import * as path from 'path';
 import 'antd/dist/antd.dark.css';
 import MainEventType from "../common/MainEventType";
 
-const { Header, Sider, Content, Footer } = Layout;
 const { TabPane } = Tabs;
 
 interface TreeTabsProps {
@@ -32,17 +29,18 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
 
   componentDidMount() {
     ipcRenderer.on(MainEventType.CREATE_NODE, (event: any, name: any) => {
-      const {curPath} = this.state;
+      const editor = this.getCurEditor();
-      if(!curPath) {
+      editor?.createNode(name);
-        return;
-      }
-      const editor = this.editors[curPath];
-      editor.createNode(name);
     });
 
+    ipcRenderer.on(MainEventType.DELETE_NODE, () => {
+      const editor = this.getCurEditor();
+      editor?.deleteNode();
+    })
+
     ipcRenderer.on(MainEventType.SAVE, (event: any) => {
-      const {curPath} = this.state;
+      const { curPath } = this.state;
-      if(!curPath) {
+      if (!curPath) {
         return;
       }
       const editor = this.editors[curPath];
@@ -51,7 +49,7 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
     });
 
     ipcRenderer.on(MainEventType.SAVE_ALL, (event: any) => {
-      for(let k in this.editors){
+      for (let k in this.editors) {
         let editor = this.editors[k];
         editor.save();
       }
@@ -59,6 +57,14 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
     });
   }
 
+  getCurEditor() {
+    const { curPath } = this.state;
+    if (!curPath) {
+      return;
+    }
+    return this.editors[curPath];
+  }
+
   openFile(path: string) {
     console.log("on open file", path);
     if (this.state.filepaths.indexOf(path) < 0) {