style: format codes

common/BehaviorTreeModel.ts

@@ -1,9 +1,9 @@
 import { TreeGraphData } from "@antv/g6/lib/types";
 
 export interface ArgsDefType {
-  name: string,
+    name: string;
-  type: string,
+    type: string;
-  desc: string,
+    desc: string;
 }
 export interface BehaviorNodeTypeModel {
     name: string;

common/MainEventType.ts

@@ -2,11 +2,11 @@ export default {
     OPEN_FILE: "OPEN_FILE",
     OPEN_DIR: "OPEN_DIR",
     OPEN_WORKSPACE: "OPEN_WORKSPACE",
-  CREATE_TREE: 'CREATE_TREE',
+    CREATE_TREE: "CREATE_TREE",
-  CREATE_NODE: 'CREATE_NODE',
+    CREATE_NODE: "CREATE_NODE",
-  DELETE_NODE: 'DELETE_NODE',
+    DELETE_NODE: "DELETE_NODE",
-  COPY_NODE: 'COPY_NODE',
+    COPY_NODE: "COPY_NODE",
-  PASTE_NODE: 'PASTE_NODE',
+    PASTE_NODE: "PASTE_NODE",
-  SAVE: 'SAVE',
+    SAVE: "SAVE",
-  SAVE_ALL: 'SAVE_ALL',
+    SAVE_ALL: "SAVE_ALL",
-}
+};

common/Utils.ts

@@ -1,17 +1,17 @@
-import { TreeGraphData } from "@antv/g6/lib/types"
+import { TreeGraphData } from "@antv/g6/lib/types";
 import { BehaviorNodeModel, BehaviorTreeModel, GraphNodeModel } from "./BehaviorTreeModel";
 import Settings from "../main-process/Settings";
 import { remote } from "electron";
-import * as path from 'path';
+import * as path from "path";
 
 export const cloneNodeData = (nodeData: GraphNodeModel) => {
     const newData: GraphNodeModel = {
         id: nodeData.id + "new",
         name: nodeData.name,
         conf: nodeData.conf,
-  }
+    };
     return newData;
-}
+};
 
 export const refreshNodeId = (nodeData: GraphNodeModel, id?: number) => {
     if (!id) {
@@ -19,12 +19,12 @@ export const refreshNodeId = (nodeData: GraphNodeModel, id?: number) => {
     }
     nodeData.id = (id++).toString();
     if (nodeData.children) {
-    nodeData.children.forEach(child => {
+        nodeData.children.forEach((child) => {
             id = refreshNodeId(child, id);
-    })
+        });
     }
     return id;
-}
+};
 
 export const calcTreeNodeSize = (treeNode: GraphNodeModel) => {
     var height = 40;
@@ -32,12 +32,12 @@ export const calcTreeNodeSize = (treeNode: GraphNodeModel) => {
         if (Array.isArray(obj) || (obj && Object.keys(obj).length > 0)) {
             height += 25;
         }
-  }
+    };
     updateHeight(treeNode.conf.args);
     updateHeight(treeNode.conf.input);
     updateHeight(treeNode.conf.output);
     return [200, height];
-}
+};
 
 export const createTreeData = (bNode: BehaviorNodeModel, settings: Settings) => {
     const treeData: GraphNodeModel = {
@@ -48,17 +48,17 @@ export const createTreeData = (bNode: BehaviorNodeModel, settings: Settings) =>
         input: bNode.input,
         output: bNode.output,
         conf: settings.getNodeConf(bNode.name),
-  }
+    };
     treeData.size = calcTreeNodeSize(treeData);
     if (bNode.children) {
         treeData.children = [];
-    bNode.children.forEach(child => {
+        bNode.children.forEach((child) => {
             treeData.children.push(createTreeData(child, settings));
-    })
+        });
     }
     calcTreeNodeSize(treeData);
     return treeData;
-}
+};
 
 export const createFileData = (gNode: GraphNodeModel) => {
     const nodeData: BehaviorNodeModel = {
@@ -68,15 +68,15 @@ export const createFileData = (gNode: GraphNodeModel) => {
         args: gNode.args || undefined,
         input: gNode.input || undefined,
         output: gNode.output || undefined,
-  }
+    };
     if (gNode.children) {
         nodeData.children = [];
-    gNode.children.forEach(child => {
+        gNode.children.forEach((child) => {
             nodeData.children.push(createFileData(child));
-    })
+        });
     }
     return nodeData;
-}
+};
 
 export const findParent = (node: TreeGraphData, id: string): TreeGraphData | null => {
     if (node.children) {
@@ -89,11 +89,10 @@ export const findParent = (node: TreeGraphData, id: string): TreeGraphData | nul
                     return parent;
                 }
             }
-
         }
     }
     return null;
-}
+};
 
 export const findFromAllChildren = (node: TreeGraphData, id: string): TreeGraphData | null => {
     if (node.id == id) {
@@ -108,24 +107,24 @@ export const findFromAllChildren = (node: TreeGraphData, id: string): TreeGraphD
         }
     }
     return null;
-}
+};
 
 export const getRemoteSettings = () => {
     return remote.getGlobal("settings") as Settings;
-}
+};
 
 export const fileName2treeName = (filename: string) => {
     return path.basename(filename).slice(0, -5);
-}
+};
 
 export const createNewTree = (filename: string) => {
     const tree: BehaviorTreeModel = {
         name: fileName2treeName(filename),
         root: {
             id: 1,
-      name: 'Sequence',
+            name: "Sequence",
-      desc: '新建行为树'
+            desc: "新建行为树",
-    }
+        },
-  }
+    };
     return tree;
-}
+};

main-process/AppMenu.ts

@@ -126,8 +126,8 @@ export default class AppMenu {
                                     dialog.showMessageBox({
                                         type: "info",
                                         buttons: ["ok"],
-                                        message:msg
+                                        message: msg,
-                                    })
+                                    });
                                 });
                             }
                         })();

main-process/MainProcess.tsx

@@ -1,13 +1,13 @@
-import { app, BrowserWindow, Menu, MenuItem, dialog, nativeTheme } from 'electron';
+import { app, BrowserWindow, Menu, MenuItem, dialog, nativeTheme } from "electron";
-import AppMenu from './AppMenu'
+import AppMenu from "./AppMenu";
-import Settings from './Settings';
+import Settings from "./Settings";
-import MainEventType from '../common/MainEventType';
+import MainEventType from "../common/MainEventType";
 
-const electronLocalshortcut = require('electron-localshortcut');
+const electronLocalshortcut = require("electron-localshortcut");
 
 // 一些暴露给render-process的全局变量
 export interface Global {
-  settings: Settings
+    settings: Settings;
 }
 declare var global: Global;
 
@@ -16,24 +16,24 @@ export class MainProcess {
     appMenu: AppMenu;
     settings: Settings;
     constructor() {
-    nativeTheme.themeSource = 'dark';
+        nativeTheme.themeSource = "dark";
-    app.on('ready', () => {
+        app.on("ready", () => {
             this.createWindow();
-      electronLocalshortcut.register(this.mainWindow, 'Ctrl+C', () => {
+            electronLocalshortcut.register(this.mainWindow, "Ctrl+C", () => {
                 this.mainWindow.webContents.send(MainEventType.COPY_NODE);
             });
-      electronLocalshortcut.register(this.mainWindow, 'Ctrl+V', () => {
+            electronLocalshortcut.register(this.mainWindow, "Ctrl+V", () => {
                 this.mainWindow.webContents.send(MainEventType.PASTE_NODE);
             });
-    })
+        });
-    app.on('window-all-closed', () => {
+        app.on("window-all-closed", () => {
-      if (process.platform !== 'darwin') {
+            if (process.platform !== "darwin") {
-        app.quit()
+                app.quit();
             }
-    })
+        });
-    app.on('activate', () => {
+        app.on("activate", () => {
             if (this.mainWindow === null) {
-        this.createWindow()
+                this.createWindow();
             }
         });
     }
@@ -48,15 +48,15 @@ export class MainProcess {
             webPreferences: {
                 nodeIntegration: true,
                 enableRemoteModule: true,
-      }
+            },
             // fullscreenable:false,
             // maximizable:false
         });
         this.mainWindow.maximize();
         // mainWindow.webContents.openDevTools();
-    this.mainWindow.loadFile('index.html');
+        this.mainWindow.loadFile("index.html");
-    this.mainWindow.on('closed', function () {
+        this.mainWindow.on("closed", function () {
-      this.mainWindow = null
+            this.mainWindow = null;
         });
         this.appMenu = new AppMenu(this);
         this.rebuildMenu();
@@ -67,6 +67,4 @@ export class MainProcess {
     }
 }
 
-
 export default new MainProcess();
-

main-process/Settings.ts

@@ -1,6 +1,6 @@
-import * as fs from 'fs';
+import * as fs from "fs";
-import { BehaviorNodeTypeModel } from '../common/BehaviorTreeModel';
+import { BehaviorNodeTypeModel } from "../common/BehaviorTreeModel";
-import Workspace from './Workspace';
+import Workspace from "./Workspace";
 
 export interface BehaviorNodeClassify {
     classify: string;
@@ -13,14 +13,13 @@ export interface SettingsModel {
     nodeClassify?: BehaviorNodeClassify[];
 }
 
-const settingPath = 'settings.json';
+const settingPath = "settings.json";
 const sampleNodeClassify: BehaviorNodeClassify[] = [
     { classify: "Composite", desc: "复合节点" },
     { classify: "Decorator", desc: "修饰节点" },
     { classify: "Condition", desc: "条件节点" },
     { classify: "Action", desc: "行为节点" },
-]
+];
-
 
 export default class Settings {
     private settings: SettingsModel;
@@ -49,18 +48,18 @@ export default class Settings {
     set(config: SettingsModel) {
         this.settings = {
             ...this.settings,
-      ...config
+            ...config,
         };
         this.save();
     }
 
     load() {
         if (fs.existsSync(settingPath)) {
-      const str = fs.readFileSync(settingPath, 'utf8');
+            const str = fs.readFileSync(settingPath, "utf8");
             this.settings = JSON.parse(str);
         } else {
             this.settings = {
-        recentWorkspaces: ['sample/workspace.json'],
+                recentWorkspaces: ["sample/workspace.json"],
                 recentFiles: [],
                 nodeClassify: sampleNodeClassify,
             };

main-process/Workspace.ts

@@ -32,12 +32,12 @@ export default class Workspace {
             return;
         }
         try {
-            const str = fs.readFileSync(this.filepath, 'utf8');
+            const str = fs.readFileSync(this.filepath, "utf8");
             const model = JSON.parse(str) as WorkspaceModel;
             if (model.isRelative) {
                 const root = path.dirname(this.filepath);
-              this.nodeConfPath = root + '/' + model.nodeConfPath;
+                this.nodeConfPath = root + "/" + model.nodeConfPath;
-              this.workdir = root + '/' + model.workdir;
+                this.workdir = root + "/" + model.workdir;
             } else {
                 this.nodeConfPath = model.nodeConfPath;
                 this.workdir = model.workdir;
@@ -54,11 +54,13 @@ export default class Workspace {
             return;
         }
 
-          const types: BehaviorNodeTypeModel[] = JSON.parse(fs.readFileSync(this.nodeConfPath, 'utf8'));
+        const types: BehaviorNodeTypeModel[] = JSON.parse(
+            fs.readFileSync(this.nodeConfPath, "utf8")
+        );
         this.name2conf = {};
-          types.forEach(t => {
+        types.forEach((t) => {
             this.name2conf[t.name] = t;
-          })
+        });
         this.types = types;
     }
 

render-process/Editor/NodePanel.tsx

@@ -1,10 +1,25 @@
-import React from 'react';
+import React from "react";
-import { Card, Divider, Form, Input, AutoComplete, Select, Switch, InputNumber, notification, message } from 'antd';
+import {
-import { INode } from '@antv/g6/lib/interface/item';
+    Card,
-import { BehaviorNodeModel, BehaviorNodeTypeModel, ArgsDefType } from '../../common/BehaviorTreeModel';
+    Divider,
-import Settings from '../../main-process/Settings';
+    Form,
-import { FormInstance } from 'antd/lib/form';
+    Input,
-import Markdown from 'react-markdown';
+    AutoComplete,
+    Select,
+    Switch,
+    InputNumber,
+    notification,
+    message,
+} from "antd";
+import { INode } from "@antv/g6/lib/interface/item";
+import {
+    BehaviorNodeModel,
+    BehaviorNodeTypeModel,
+    ArgsDefType,
+} from "../../common/BehaviorTreeModel";
+import Settings from "../../main-process/Settings";
+import { FormInstance } from "antd/lib/form";
+import Markdown from "react-markdown";
 
 const { Item } = Form;
 
@@ -14,9 +29,7 @@ interface NodePanelProps {
     updateNode: (id: string, forceUpdate: boolean) => void;
 }
 
-interface NodePanelState {
+interface NodePanelState {}
-
-}
 
 export default class NodePanel extends React.Component<NodePanelProps> {
     formRef = React.createRef<FormInstance>();
@@ -32,7 +45,7 @@ export default class NodePanel extends React.Component<NodePanelProps> {
             name: model.name,
             desc: model.desc,
             debug: model.debug,
-      customArgs: model.args ? JSON.stringify(model.args, null, " ") : '',
+            customArgs: model.args ? JSON.stringify(model.args, null, " ") : "",
         };
         if (model.args) {
             for (let k in model.args) {
@@ -42,20 +55,20 @@ export default class NodePanel extends React.Component<NodePanelProps> {
         if (model.input) {
             model.input.forEach((v, i) => {
                 initialValues[`input.${i}`] = v;
-      })
+            });
         }
         if (model.output) {
             model.output.forEach((v, i) => {
                 initialValues[`output.${i}`] = v;
-      })
+            });
         }
         return initialValues;
     }
 
     onFinish = (values: any) => {
-    console.log('Success:', values);
+        console.log("Success:", values);
         const { updateNode, model, settings } = this.props;
-    const conf = settings.getNodeConf(values.name)
+        const conf = settings.getNodeConf(values.name);
         if (!conf) {
             notification.warn({ message: `节点${values.name}未定义` });
             return;
@@ -78,24 +91,26 @@ export default class NodePanel extends React.Component<NodePanelProps> {
         }
 
         if (conf.args) {
-      conf.args.forEach(e => {
+            conf.args.forEach((e) => {
-        const k = 'args.' + e.name;
+                const k = "args." + e.name;
-        if (e.type.indexOf('number') > 0) {
+                if (e.type.indexOf("number") > 0) {
                     args[e.name] = Number(values[k]);
                 } else {
                     args[e.name] = values[k];
                 }
-      })
+            });
         }
 
         model.args = args;
-    this.formRef.current.setFieldsValue({ customArgs: model.args ? JSON.stringify(model.args, null, " ") : '' });
+        this.formRef.current.setFieldsValue({
+            customArgs: model.args ? JSON.stringify(model.args, null, " ") : "",
+        });
 
         if (conf.input) {
             model.input = [];
             conf.input.forEach((e, i) => {
-        model.input.push(values['input.' + i] || '');
+                model.input.push(values["input." + i] || "");
-      })
+            });
         } else {
             model.input = null;
         }
@@ -103,8 +118,8 @@ export default class NodePanel extends React.Component<NodePanelProps> {
         if (conf.output) {
             model.output = [];
             conf.output.forEach((e, i) => {
-        model.output.push(values['output.' + i] || '');
+                model.output.push(values["output." + i] || "");
-      })
+            });
         } else {
             model.output = null;
         }
@@ -116,13 +131,13 @@ export default class NodePanel extends React.Component<NodePanelProps> {
     };
 
     onFinishFailed = (errorInfo: any) => {
-    console.log('Failed:', errorInfo);
+        console.log("Failed:", errorInfo);
     };
 
     handleSubmit = () => {
         console.log("handleSubmit");
         this.formRef.current.submit();
-  }
+    };
 
     render() {
         const { model, settings } = this.props;
@@ -132,14 +147,14 @@ export default class NodePanel extends React.Component<NodePanelProps> {
         const options: any = [];
         settings.nodeConfig.map((e) => {
             options.push({ label: `${e.name}(${e.desc})`, value: e.name });
-    })
+        });
 
         const layout = {
             labelCol: { span: 6 },
             wrapperCol: { span: 18 },
         };
         return (
-      <Card title={title} style={{ height: window.screen.height - 100, overflow: 'auto' }}>
+            <Card title={title} style={{ height: window.screen.height - 100, overflow: "auto" }}>
                 <Form
                     {...layout}
                     name="basic"
@@ -147,34 +162,25 @@ export default class NodePanel extends React.Component<NodePanelProps> {
                     initialValues={this.getInitialValues()}
                     ref={this.formRef}
                 >
-          <Item
+                    <Item label="节点id">
-            label="节点id"
-          >
                         <Input value={model.id} disabled={true} />
                     </Item>
-          <Item
+                    <Item label="节点名称" name="name">
-            label="节点名称"
-            name="name"
-          >
                         <AutoComplete
                             options={options}
                             onBlur={this.handleSubmit}
                             filterOption={(inputValue: string, option: any) => {
-                return option.label.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+                                return (
+                                    option.label.toUpperCase().indexOf(inputValue.toUpperCase()) !==
+                                    -1
+                                );
                             }}
                         />
                     </Item>
-          <Item
+                    <Item label="节点说明" name="desc">
-            label="节点说明"
-            name="desc"
-          >
                         <Input onBlur={this.handleSubmit} />
                     </Item>
-          <Item
+                    <Item label="调试开关" name="debug" valuePropName="checked">
-            label="调试开关"
-            name="debug"
-            valuePropName='checked'
-          >
                         <Switch onChange={this.handleSubmit} />
                     </Item>
                     <Markdown source={conf.doc} />
@@ -183,7 +189,7 @@ export default class NodePanel extends React.Component<NodePanelProps> {
                     {this.renderOutputs(conf)}
                 </Form>
             </Card>
-    )
+        );
     }
 
     renderArgs(conf: BehaviorNodeTypeModel) {
@@ -197,53 +203,51 @@ export default class NodePanel extends React.Component<NodePanelProps> {
             if (e.type.indexOf("string") >= 0) {
                 return <Input onBlur={this.handleSubmit} />;
             } else if (e.type.indexOf("int") >= 0) {
-        return <InputNumber style={{ width: '100%' }} onBlur={this.handleSubmit} />;
+                return <InputNumber style={{ width: "100%" }} onBlur={this.handleSubmit} />;
             } else if (e.type.indexOf("boolean") >= 0) {
                 return <Switch onChange={this.handleSubmit} />;
             } else if (e.type.indexOf("lua") >= 0) {
-        return <Input onBlur={this.handleSubmit} placeholder={'公式'} />;
+                return <Input onBlur={this.handleSubmit} placeholder={"公式"} />;
-      }
             }
+        };
 
         // 自定义参数
         const customArgs = () => {
             return (
-        <Item
+                <Item name="customArgs" label="自定义" key="customArgs">
-          name='customArgs'
-          label='自定义'
-          key='customArgs'
-        >
                     <Input.TextArea onBlur={this.handleSubmit} style={{ minHeight: 100 }} />
                 </Item>
-      )
+            );
-
+        };
-    }
 
         return (
             <div>
-        <Divider orientation="left"><h3>常量参数</h3></Divider>
+                <Divider orientation="left">
-        {conf && conf.args && conf.args.map((e, i: number) => {
+                    <h3>常量参数</h3>
+                </Divider>
+                {conf &&
+                    conf.args &&
+                    conf.args.map((e, i: number) => {
                         const required = e.type.indexOf("?") == -1;
                         return (
                             <Item
                                 name={`args.${e.name}`}
                                 label={e.desc}
                                 key={`args.${e.name}`}
-              valuePropName={e.type.indexOf("boolean") >= 0 ? 'checked' : undefined}
+                                valuePropName={
-              rules={[
+                                    e.type.indexOf("boolean") >= 0 ? "checked" : undefined
-                { required, message: `${e.desc}(${e.name})为必填字段` }
+                                }
-              ]}
+                                rules={[{ required, message: `${e.desc}(${e.name})为必填字段` }]}
                             >
                                 {normalArgs(e)}
                             </Item>
-          )
+                        );
                     })}
                 {customArgs()}
             </div>
         );
     }
 
-
     renderInputs(conf: BehaviorNodeTypeModel) {
         if (!conf.input || !conf.input || conf.input.length == 0) {
             return null;
@@ -251,22 +255,18 @@ export default class NodePanel extends React.Component<NodePanelProps> {
 
         return (
             <div>
-        <Divider orientation="left"><h3>输入变量</h3></Divider>
+                <Divider orientation="left">
-        {
+                    <h3>输入变量</h3>
-          conf.input.map((e, i) => {
+                </Divider>
+                {conf.input.map((e, i) => {
                     return (
-              <Item
+                        <Item label={e} name={`input.${i}`} key={`input.${i}`}>
-                label={e}
-                name={`input.${i}`}
-                key={`input.${i}`}
-              >
                             <Input onBlur={this.handleSubmit} />
                         </Item>
-            )
+                    );
-          })
+                })}
-        }
             </div>
-    )
+        );
     }
 
     renderOutputs(conf: BehaviorNodeTypeModel) {
@@ -275,23 +275,17 @@ export default class NodePanel extends React.Component<NodePanelProps> {
         }
         return (
             <div>
-        <Divider orientation="left"><h3>输出变量</h3></Divider>
+                <Divider orientation="left">
-        {
+                    <h3>输出变量</h3>
-          conf.output.map((e, i) => {
+                </Divider>
+                {conf.output.map((e, i) => {
                     return (
-              <Item
+                        <Item label={e} name={`output.${i}`} key={`output.${i}`}>
-                label={e}
-                name={`output.${i}`}
-                key={`output.${i}`}
-              >
                             <Input onBlur={this.handleSubmit} />
                         </Item>
-            )
+                    );
-          })
+                })}
-        }
             </div>
-    )
+        );
     }
-
 }
-

render-process/Editor/TreePanel.tsx

@@ -1,33 +1,28 @@
-import React from 'react';
+import React from "react";
-import { Card } from 'antd';
+import { Card } from "antd";
-import { INode } from '@antv/g6/lib/interface/item';
+import { INode } from "@antv/g6/lib/interface/item";
-import { BehaviorTreeModel } from '../../common/BehaviorTreeModel';
+import { BehaviorTreeModel } from "../../common/BehaviorTreeModel";
 
 interface TreePanelProps {
     model?: BehaviorTreeModel;
 }
 
-interface TreePanelState {
+interface TreePanelState {}
-}
 
 export default class TreePanel extends React.Component<TreePanelProps, TreePanelState> {
     state: TreePanelState = {};
 
-  componentDidMount() {
+    componentDidMount() {}
-  }
 
     render() {
         const { model } = this.props;
         if (!model) {
-      return (<div/>)
+            return <div />;
         }
         return (
             <Card title="概况" style={{ height: "100%" }}>
                 行为树:{model.name}
-
             </Card>
-    )
+        );
     }
-
 }
-

render-process/Editor/index.tsx

@@ -1,17 +1,21 @@
-import * as React from 'react';
+import * as React from "react";
-import * as fs from 'fs';
+import * as fs from "fs";
-import * as path from 'path';
+import * as path from "path";
-import { Row, Col, message } from 'antd';
+import { Row, Col, message } from "antd";
-import NodePanel from './NodePanel';
+import NodePanel from "./NodePanel";
-import G6, { TreeGraph } from '@antv/g6';
+import G6, { TreeGraph } from "@antv/g6";
-import { G6GraphEvent } from '@antv/g6/lib/interface/behavior';
+import { G6GraphEvent } from "@antv/g6/lib/interface/behavior";
-import * as Utils from '../../common/Utils';
+import * as Utils from "../../common/Utils";
-import { BehaviorTreeModel, GraphNodeModel, BehaviorNodeModel } from '../../common/BehaviorTreeModel';
+import {
-import TreePanel from './TreePanel';
+    BehaviorTreeModel,
-import Settings from '../../main-process/Settings';
+    GraphNodeModel,
+    BehaviorNodeModel,
+} from "../../common/BehaviorTreeModel";
+import TreePanel from "./TreePanel";
+import Settings from "../../main-process/Settings";
 
-import './Editor.css';
+import "./Editor.css";
-import { clipboard } from 'electron';
+import { clipboard } from "electron";
 
 export interface EditorProps {
     filepath: string;
@@ -46,38 +50,40 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
             // fitCenter: true,
             modes: {
                 default: [
-          'drag-canvas',
+                    "drag-canvas",
-          'zoom-canvas',
+                    "zoom-canvas",
-          'click-select',
+                    "click-select",
-          'hover',
+                    "hover",
                     {
-            type: 'collapse-expand',
+                        type: "collapse-expand",
-            trigger: 'dblclick',
+                        trigger: "dblclick",
                         onChange: (item, collapsed) => {
                             this.onSelectNode(item.getID());
                             const data = item.getModel();
                             data.collapsed = collapsed;
-              graph.setItemState(item, 'collapsed', data.collapsed as boolean);
+                            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');
+                            const marker = item
-              marker.attr('symbol', icon);
+                                .get("group")
+                                .find((ele: any) => ele.get("name") === "collapse-icon");
+                            marker.attr("symbol", icon);
                             return true;
                         },
                     },
-        ]
+                ],
             },
             defaultEdge: {
-        type: 'cubic-horizontal',
+                type: "cubic-horizontal",
                 style: {
-          stroke: '#A3B1BF'
+                    stroke: "#A3B1BF",
-        }
+                },
             },
             defaultNode: {
                 type: "TreeNode",
             },
             layout: {
-        type: 'compactBox',
+                type: "compactBox",
-        direction: 'LR',
+                direction: "LR",
                 getHGap: () => 50,
                 getWidth: (d: GraphNodeModel) => {
                     return 150;
@@ -88,27 +94,27 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
                     } else {
                         return 50;
                     }
-        }
+                },
-      }
+            },
         });
 
-    graph.on('node:mouseenter', (e: G6GraphEvent) => {
+        graph.on("node:mouseenter", (e: G6GraphEvent) => {
             const { item } = e;
-      if (item.hasState('selected')) {
+            if (item.hasState("selected")) {
                 return;
             }
-      graph.setItemState(item, 'hover', true);
+            graph.setItemState(item, "hover", true);
         });
 
-    graph.on('node:mouseleave', (e: G6GraphEvent) => {
+        graph.on("node:mouseleave", (e: G6GraphEvent) => {
             const { item } = e;
-      if (item.hasState('selected')) {
+            if (item.hasState("selected")) {
                 return;
             }
-      graph.setItemState(item, 'hover', false);
+            graph.setItemState(item, "hover", false);
         });
 
-    graph.on('nodeselectchange', (e: G6GraphEvent) => {
+        graph.on("nodeselectchange", (e: G6GraphEvent) => {
             if (e.target) {
                 this.onSelectNode(e.target.getID());
             } else {
@@ -118,69 +124,69 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
 
         const clearDragDstState = () => {
             if (this.dragDstId) {
-        graph.setItemState(this.dragDstId, 'dragRight', false);
+                graph.setItemState(this.dragDstId, "dragRight", false);
-        graph.setItemState(this.dragDstId, 'dragDown', false);
+                graph.setItemState(this.dragDstId, "dragDown", false);
-        graph.setItemState(this.dragDstId, 'dragUp', false);
+                graph.setItemState(this.dragDstId, "dragUp", false);
                 this.dragDstId = null;
             }
-    }
+        };
 
         const clearDragSrcState = () => {
             if (this.dragSrcId) {
-        graph.setItemState(this.dragSrcId, 'dragSrc', false);
+                graph.setItemState(this.dragSrcId, "dragSrc", false);
                 this.dragSrcId = null;
             }
-    }
+        };
 
-    graph.on('node:dragstart', (e: G6GraphEvent) => {
+        graph.on("node:dragstart", (e: G6GraphEvent) => {
             this.dragSrcId = e.item.getID();
-      graph.setItemState(this.dragSrcId, 'dragSrc', true);
+            graph.setItemState(this.dragSrcId, "dragSrc", true);
         });
-    graph.on('node:dragend', (e: G6GraphEvent) => {
+        graph.on("node:dragend", (e: G6GraphEvent) => {
             if (this.dragSrcId) {
-        graph.setItemState(this.dragSrcId, 'dragSrc', false);
+                graph.setItemState(this.dragSrcId, "dragSrc", false);
                 this.dragSrcId = null;
             }
         });
 
-    graph.on('node:dragover', (e: G6GraphEvent) => {
+        graph.on("node:dragover", (e: G6GraphEvent) => {
             const dstNodeId = e.item.getID();
             if (dstNodeId == this.dragSrcId) {
                 return;
             }
 
             if (this.dragDstId) {
-        graph.setItemState(this.dragDstId, 'dragRight', false);
+                graph.setItemState(this.dragDstId, "dragRight", false);
-        graph.setItemState(this.dragDstId, 'dragDown', false);
+                graph.setItemState(this.dragDstId, "dragDown", false);
-        graph.setItemState(this.dragDstId, 'dragUp', false);
+                graph.setItemState(this.dragDstId, "dragUp", false);
             }
 
             const box = e.item.getBBox();
             if (e.x > box.minX + box.width * 0.6) {
-        graph.setItemState(dstNodeId, 'dragRight', true);
+                graph.setItemState(dstNodeId, "dragRight", true);
             } else if (e.y > box.minY + box.height * 0.5) {
-        graph.setItemState(dstNodeId, 'dragDown', true);
+                graph.setItemState(dstNodeId, "dragDown", true);
             } else {
-        graph.setItemState(dstNodeId, 'dragUp', true);
+                graph.setItemState(dstNodeId, "dragUp", true);
             }
             this.dragDstId = dstNodeId;
         });
 
-    graph.on('node:dragleave', (e: G6GraphEvent) => {
+        graph.on("node:dragleave", (e: G6GraphEvent) => {
             clearDragDstState();
-    })
+        });
 
-    graph.on('node:drop', (e: G6GraphEvent) => {
+        graph.on("node:drop", (e: G6GraphEvent) => {
             const srcNodeId = this.dragSrcId;
             const dstNode = e.item;
 
             var dragDir;
-      if (dstNode.hasState('dragRight')) {
+            if (dstNode.hasState("dragRight")) {
-        dragDir = 'dragRight';
+                dragDir = "dragRight";
-      } else if (dstNode.hasState('dragDown')) {
+            } else if (dstNode.hasState("dragDown")) {
-        dragDir = 'dragDown';
+                dragDir = "dragDown";
-      } else if (dstNode.hasState('dragUp')) {
+            } else if (dstNode.hasState("dragUp")) {
-        dragDir = 'dragUp';
+                dragDir = "dragUp";
             }
 
             clearDragSrcState();
@@ -196,7 +202,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
                 return;
             }
 
-      const rootData = graph.findDataById('1');
+            const rootData = graph.findDataById("1");
             const srcData = graph.findDataById(srcNodeId);
             const srcParent = Utils.findParent(rootData, srcNodeId);
             const dstData = graph.findDataById(dstNode.getID());
@@ -213,28 +219,28 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
             }
 
             const removeSrc = () => {
-        srcParent.children = srcParent.children.filter(e => e.id != srcData.id);
+                srcParent.children = srcParent.children.filter((e) => e.id != srcData.id);
-      }
+            };
             console.log("dstNode", dstNode);
-      if (dragDir == 'dragRight') {
+            if (dragDir == "dragRight") {
                 removeSrc();
                 if (!dstData.children) {
                     dstData.children = [];
                 }
                 dstData.children.push(srcData);
-      } else if (dragDir == 'dragUp') {
+            } else if (dragDir == "dragUp") {
                 if (!dstParent) {
                     return;
                 }
                 removeSrc();
-        const idx = dstParent.children.findIndex(e => e.id == dstData.id);
+                const idx = dstParent.children.findIndex((e) => e.id == dstData.id);
                 dstParent.children.splice(idx, 0, srcData);
-      } else if (dragDir == 'dragDown') {
+            } else if (dragDir == "dragDown") {
                 if (!dstParent) {
                     return;
                 }
                 removeSrc();
-        const idx = dstParent.children.findIndex(e => e.id == dstData.id);
+                const idx = dstParent.children.findIndex((e) => e.id == dstData.id);
                 dstParent.children.splice(idx + 1, 0, srcData);
             } else {
                 return;
@@ -246,14 +252,14 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
 
         const settings = Utils.getRemoteSettings();
 
-    const str = fs.readFileSync(this.props.filepath, 'utf8');
+        const str = fs.readFileSync(this.props.filepath, "utf8");
         let tree: BehaviorTreeModel = JSON.parse(str);
         const data = Utils.createTreeData(tree.root, settings);
         this.autoId = Utils.refreshNodeId(data);
         graph.data(data);
         graph.render();
         graph.fitCenter();
-    graph.set('animate', true);
+        graph.set("animate", true);
 
         this.graph = graph;
 
@@ -264,12 +270,12 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
         const graph = this.graph;
 
         if (this.state.curNodeId) {
-      graph.setItemState(this.state.curNodeId, 'selected', false);
+            graph.setItemState(this.state.curNodeId, "selected", false);
         }
 
         this.setState({ curNodeId });
         if (this.state.curNodeId) {
-      graph.setItemState(this.state.curNodeId, 'selected', true);
+            graph.setItemState(this.state.curNodeId, "selected", true);
         }
     }
 
@@ -284,7 +290,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
         const newNodeData: BehaviorNodeModel = {
             id: this.autoId++,
             name: name,
-    }
+        };
         if (!curNodeData.children) {
             curNodeData.children = [];
         }
@@ -299,15 +305,15 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
             return;
         }
 
-    if(curNodeId == '1') {
+        if (curNodeId == "1") {
             message.warn("根节点不能删除!");
             return;
         }
 
         this.onSelectNode(null);
-    const rootData = this.graph.findDataById('1');
+        const rootData = this.graph.findDataById("1");
         const parentData = Utils.findParent(rootData, curNodeId);
-    parentData.children = parentData.children.filter(e => e.id != curNodeId);
+        parentData.children = parentData.children.filter((e) => e.id != curNodeId);
         this.changeWithoutAnim();
     }
 
@@ -317,20 +323,23 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     }
 
     changeWithoutAnim() {
-    this.graph.set('animate', false);
+        this.graph.set("animate", false);
         this.graph.changeData();
         this.graph.layout();
-    this.graph.set('animate', true);
+        this.graph.set("animate", true);
     }
 
     save() {
         const { filepath } = this.props;
-    const root = Utils.createFileData(this.graph.findDataById('1') as GraphNodeModel);
+        const root = Utils.createFileData(this.graph.findDataById("1") as GraphNodeModel);
-    fs.writeFileSync(filepath, JSON.stringify({
+        fs.writeFileSync(
+            filepath,
+            JSON.stringify({
                 name: path.basename(filepath).slice(0, -5),
                 root,
                 desc: root.desc,
-    }));
+            })
+        );
     }
 
     copyNode() {
@@ -352,7 +361,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
         const curNodeData = this.graph.findDataById(curNodeId);
         try {
             const str = clipboard.readText();
-      if(!str || str == '') {
+            if (!str || str == "") {
                 return;
             }
             const data = JSON.parse(str);
@@ -360,7 +369,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
                 curNodeData.children = [];
             }
             curNodeData.children.push(data);
-      this.autoId = Utils.refreshNodeId(this.graph.findDataById('1') as GraphNodeModel);
+            this.autoId = Utils.refreshNodeId(this.graph.findDataById("1") as GraphNodeModel);
             this.changeWithoutAnim();
         } catch (error) {
             message.error("粘贴数据有误");
@@ -377,14 +386,9 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
         return (
             <div className="editor">
                 <Row className="editorBd">
-          <Col
+                    <Col span={18} className="editorContent" ref={this.ref} />
-            span={18}
-            className="editorContent"
-            ref={this.ref}
-          />
                     <Col span={6} className="editorSidebar">
-            {
+                        {curNode ? (
-              curNode ?
                             <NodePanel
                                 model={curNode}
                                 settings={settings}
@@ -399,11 +403,9 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
                                     item.draw();
                                 }}
                             />
-                :
+                        ) : (
-                <TreePanel
+                            <TreePanel model={treeModel} />
-                  model={treeModel}
+                        )}
-                />
-            }
                     </Col>
                 </Row>
             </div>

render-process/Properties.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { Menu, Input } from "antd";
-import * as fs from 'fs';
+import * as fs from "fs";
-import * as path from 'path';
+import * as path from "path";
 import { ipcRenderer } from "electron";
 import MainEventType from "../common/MainEventType";
 
@@ -18,15 +18,15 @@ export interface PropertiesProps {
 }
 
 interface PropertiesState {
-  treeList: TreeFile[]
+    treeList: TreeFile[];
 }
 
 export default class Properties extends Component<PropertiesProps> {
     state: PropertiesState = {
-    treeList: []
+        treeList: [],
     };
 
-  curWorkdir: string = '';
+    curWorkdir: string = "";
 
     shouldComponentUpdate(nextProps: PropertiesProps) {
         const shouldUpdate = this.curWorkdir != nextProps.workdir;
@@ -42,14 +42,14 @@ export default class Properties extends Component<PropertiesProps> {
         });
 
         var workdir = this.props.workdir;
-    if (workdir == '') {
+        if (workdir == "") {
             return;
         }
         this.setState({ treeList: this.getTreeList(workdir) });
     }
 
     getTreeList(workdir: string) {
-    if (workdir == '' || !fs.existsSync(workdir)) {
+        if (workdir == "" || !fs.existsSync(workdir)) {
             console.log("workdir not exist", workdir);
             return [];
         }
@@ -57,15 +57,15 @@ export default class Properties extends Component<PropertiesProps> {
         const files = fs.readdirSync(workdir);
         const list: TreeFile[] = [];
         files.forEach((filename) => {
-      const stat = fs.statSync(path.join(workdir, filename))
+            const stat = fs.statSync(path.join(workdir, filename));
             if (stat.isFile()) {
-        var name = filename.slice(0, -5)
+                var name = filename.slice(0, -5);
                 list.push({
                     name,
-          path: workdir + '/' + name + '.json'
+                    path: workdir + "/" + name + ".json",
                 });
             }
-    })
+        });
         return list;
     }
 
@@ -75,25 +75,15 @@ export default class Properties extends Component<PropertiesProps> {
         const treeList = this.getTreeList(workdir);
         return (
             <div>
-        <Search
+                <Search placeholder="Search" onChange={() => {}} />
-          placeholder="Search"
+                <Menu mode="inline">
-          onChange={() => {
-
-          }}
-        />
-        <Menu
-          mode="inline"
-        >
                     {treeList.map((tree) => (
-            <Menu.Item
+                        <Menu.Item key={tree.name} onClick={() => onOpenTree(tree.path)}>
-              key={tree.name}
-              onClick={() => onOpenTree(tree.path)}
-            >
                             {tree.name}
                         </Menu.Item>
                     ))}
                 </Menu>
             </div>
-    )
+        );
     }
 }

render-process/RegisterNode.ts

@@ -1,78 +1,77 @@
-import G6 from '@antv/g6';
+import G6 from "@antv/g6";
-import Settings from '../main-process/Settings';
+import Settings from "../main-process/Settings";
 
 const NODE_COLORS: any = {
-  ['Composite']: 'rgb(91,237,32)',
+    ["Composite"]: "rgb(91,237,32)",
-  ['Decorator']: 'rgb(218,167,16)',
+    ["Decorator"]: "rgb(218,167,16)",
-  ['Condition']: 'rgb(228,20,139)',
+    ["Condition"]: "rgb(228,20,139)",
-  ['Action']: 'rgb(91,143,249)',
+    ["Action"]: "rgb(91,143,249)",
-  ['Other']: 'rgb(112,112,112)',
+    ["Other"]: "rgb(112,112,112)",
-}
+};
-
 
 export default function (settings: Settings) {
     const collapseStyle: any = {
-    'collapse-icon': {
+        "collapse-icon": {
             // symbol: G6.Marker.expand,
-      fill: 'blue',
+            fill: "blue",
-    }
+        },
     };
     G6.registerNode(
-    'TreeNode',
+        "TreeNode",
         {
             options: {
-        type: 'rect',
+                type: "rect",
                 labelCfg: {
                     style: {
-            fill: 'blue',
+                        fill: "blue",
-            fontSize: 10
+                        fontSize: 10,
-          }
+                    },
                 },
                 style: {
                     fill: "white",
                 },
                 stateStyles: {
                     selected: {
-            'main-box': {
+                        "main-box": {
-              stroke: 'yellow',
+                            stroke: "yellow",
                             lineWidth: 5,
                         },
                     },
                     hover: {
-            stroke: 'white',
+                        stroke: "white",
                         lineWidth: 3,
                     },
                     dragSrc: {
-            fill: 'gray',
+                        fill: "gray",
                     },
                     dragRight: {
-            'drag-right': {
+                        "drag-right": {
                             fillOpacity: 0.6,
-            }
+                        },
                     },
                     dragUp: {
-            'drag-up': {
+                        "drag-up": {
                             fillOpacity: 0.6,
-            }
+                        },
                     },
                     dragDown: {
-            'drag-down': {
+                        "drag-down": {
                             fillOpacity: 0.6,
-            }
+                        },
-          }
+                    },
                 },
             },
             draw(cfg, group) {
                 const nodeConf = settings.getNodeConf(cfg.name as string);
-        const classify = nodeConf.type || 'Other';
+                const classify = nodeConf.type || "Other";
-        const color = NODE_COLORS[classify] || 'Other';
+                const color = NODE_COLORS[classify] || "Other";
-        var size = cfg.size ? cfg.size as number[] : [150, 40];
+                var size = cfg.size ? (cfg.size as number[]) : [150, 40];
                 const w = size[0];
                 const h = size[1];
                 const x0 = -w / 2;
                 const y0 = -h / 2;
                 const r = 2;
-        const shape = group.addShape('rect', {
+                const shape = group.addShape("rect", {
                     attrs: {
                         x: x0,
                         y: y0,
@@ -80,15 +79,15 @@ export default function (settings: Settings) {
                         height: h,
                         stroke: color,
                         lineWidth: 2,
-            fill: 'white',
+                        fill: "white",
                         radius: r,
                     },
-          name: 'main-box',
+                    name: "main-box",
                     draggable: true,
                 });
 
                 // name bg
-        group.addShape('rect', {
+                group.addShape("rect", {
                     attrs: {
                         x: x0 + 1.5,
                         y: y0 + 1.5,
@@ -97,30 +96,30 @@ export default function (settings: Settings) {
                         fill: color,
                         // radius: r,
                     },
-          name: 'name-bg',
+                    name: "name-bg",
                     draggable: true,
                 });
 
                 // id text
-        group.addShape('text', {
+                group.addShape("text", {
                     attrs: {
-            textBaseline: 'top',
+                        textBaseline: "top",
                         x: x0 - 3,
                         y: -8,
                         fontSize: 20,
                         lineHeight: 20,
                         text: cfg.id,
-            textAlign: 'right',
+                        textAlign: "right",
-            fill: 'white',
+                        fill: "white",
-            stroke: 'black',
+                        stroke: "black",
                         lineWidth: 2,
                     },
-          name: 'id-text',
+                    name: "id-text",
                 });
 
                 // icon
                 var img = `./static/icons/${classify}.svg`;
-        group.addShape('image', {
+                group.addShape("image", {
                     attrs: {
                         x: x0 + 3,
                         y: y0 + 2,
@@ -128,21 +127,21 @@ export default function (settings: Settings) {
                         width: 14,
                         img,
                     },
-          name: 'node-icon',
+                    name: "node-icon",
                 });
 
                 // name text
-        group.addShape('text', {
+                group.addShape("text", {
                     attrs: {
-            textBaseline: 'top',
+                        textBaseline: "top",
                         x: x0 + 18,
                         y: y0 + 4,
                         fontWeight: 800,
                         lineHeight: 20,
                         text: cfg.name,
-            fill: 'black',
+                        fill: "black",
                     },
-          name: 'name-text',
+                    name: "name-text",
                 });
 
                 var x = x0 + 2;
@@ -150,128 +149,127 @@ export default function (settings: Settings) {
                 // desc text
                 const desc = cfg.desc || nodeConf.desc;
                 if (desc) {
-          group.addShape('text', {
+                    group.addShape("text", {
                         attrs: {
-              textBaseline: 'top',
+                            textBaseline: "top",
                             x,
                             y,
                             lineHeight: 20,
                             fontWeight: 800,
                             text: `备注:${desc}`,
-              fill: 'black',
+                            fill: "black",
                         },
-            name: 'desc-text',
+                        name: "desc-text",
                     });
                 }
 
                 const args: any = cfg.args;
                 if (nodeConf.args && args && Object.keys(args).length > 0) {
                     y += 20;
-          group.addShape('text', {
+                    group.addShape("text", {
                         attrs: {
-              textBaseline: 'top',
+                            textBaseline: "top",
                             x,
                             y,
                             lineHeight: 20,
                             text: `参数:${JSON.stringify(args)}`,
-              fill: 'black',
+                            fill: "black",
                         },
-            name: 'args-text',
+                        name: "args-text",
                     });
                 }
 
-        const input: [] = cfg.input ? cfg.input as [] : [];
+                const input: [] = cfg.input ? (cfg.input as []) : [];
                 if (nodeConf.input && input.length > 0) {
                     y += 20;
-          group.addShape('text', {
+                    group.addShape("text", {
                         attrs: {
-              textBaseline: 'top',
+                            textBaseline: "top",
                             x,
                             y,
                             lineHeight: 20,
                             text: `输入:${JSON.stringify(input)}`,
-              fill: 'black',
+                            fill: "black",
                         },
-            name: 'input-text',
+                        name: "input-text",
                     });
                 }
 
-        const output: [] = cfg.output ? cfg.output as [] : [];
+                const output: [] = cfg.output ? (cfg.output as []) : [];
                 if (nodeConf.output && output.length > 0) {
                     y += 20;
-          group.addShape('text', {
+                    group.addShape("text", {
                         attrs: {
-              textBaseline: 'top',
+                            textBaseline: "top",
                             x,
                             y,
                             lineHeight: 20,
                             text: `输出:${JSON.stringify(output)}`,
-              fill: 'black',
+                            fill: "black",
                         },
-            name: 'output-text',
+                        name: "output-text",
                     });
                 }
 
                 if (Array.isArray(cfg.children) && cfg.children.length > 0) {
-          group.addShape('marker', {
+                    group.addShape("marker", {
                         attrs: {
                             x: w / 2,
                             y: 0,
                             r: 6,
                             symbol: G6.Marker.collapse,
-              stroke: '#666',
+                            stroke: "#666",
                             lineWidth: 1,
-              fill: '#fff',
+                            fill: "#fff",
                         },
-            name: 'collapse-icon',
+                        name: "collapse-icon",
                     });
                 }
 
-
+                group.addShape("rect", {
-        group.addShape('rect', {
+                    name: "drag-up",
-          name: 'drag-up',
                     attrs: {
                         x: -w / 2,
                         y: -h / 2,
                         width: w,
                         height: h / 2,
-            fill: 'blue',
+                        fill: "blue",
                         fillOpacity: 0,
                     },
                     draggable: true,
                     // visible: false,
                 });
 
-        group.addShape('rect', {
+                group.addShape("rect", {
-          name: 'drag-down',
+                    name: "drag-down",
                     attrs: {
                         x: -w / 2,
                         y: 0,
                         width: w,
                         height: h / 2,
-            fill: 'blue',
+                        fill: "blue",
                         fillOpacity: 0,
                     },
                     draggable: true,
                     // visible: false,
                 });
 
-        group.addShape('rect', {
+                group.addShape("rect", {
-          name: 'drag-right',
+                    name: "drag-right",
                     attrs: {
                         x: w * 0.1,
                         y: -h / 2,
                         width: w * 0.4,
                         height: h,
-            fill: 'blue',
+                        fill: "blue",
                         fillOpacity: 0,
                     },
                     draggable: true,
                     // visible: false,
                 });
                 return shape;
-      }
             },
-    'single-node',
+        },
+        "single-node"
     );
 }

render-process/TreeTabs.tsx

@@ -1,16 +1,15 @@
 import Editor from "./Editor";
 import React, { Component } from "react";
-import { Layout, Tabs, message } from 'antd';
+import { Layout, Tabs, message } from "antd";
-import { ipcRenderer, remote } from 'electron';
+import { ipcRenderer, remote } from "electron";
-import * as path from 'path';
+import * as path from "path";
 
-import 'antd/dist/antd.dark.css';
+import "antd/dist/antd.dark.css";
 import MainEventType from "../common/MainEventType";
 
 const { TabPane } = Tabs;
 
-interface TreeTabsProps {
+interface TreeTabsProps {}
-}
 
 interface TreeTabsState {
     filepaths: string[];
@@ -20,12 +19,11 @@ interface TreeTabsState {
 export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
     state: TreeTabsState = {
         filepaths: [],
-  }
+    };
 
-  editors: { [path: string]: Editor } = {}
+    editors: { [path: string]: Editor } = {};
 
-  componentWillMount() {
+    componentWillMount() {}
-  }
 
     componentDidMount() {
         ipcRenderer.on(MainEventType.CREATE_NODE, (event: any, name: any) => {
@@ -90,7 +88,7 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
         console.log("render tabs");
         const { filepaths, curPath } = this.state;
         if (!curPath) {
-      return (<div />);
+            return <div />;
         }
         return (
             <Tabs
@@ -99,11 +97,11 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
                 type="editable-card"
                 defaultActiveKey={curPath}
                 activeKey={curPath}
-        onChange={activeKey => {
+                onChange={(activeKey) => {
-          this.setState({ curPath: activeKey })
+                    this.setState({ curPath: activeKey });
                 }}
                 onEdit={(targetKey, action) => {
-          if (action == 'remove') {
+                    if (action == "remove") {
                         const idx = filepaths.indexOf(targetKey as string);
                         if (idx < 0) {
                             return;
@@ -114,23 +112,19 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
                     }
                 }}
             >
-        {
+                {filepaths.map((filepath) => {
-          filepaths.map(filepath => {
                     return (
                         <TabPane tab={path.basename(filepath)} key={filepath}>
                             <Editor
                                 filepath={filepath}
-                  ref={
+                                ref={(ref) => {
-                    ref => {
                                     this.editors[filepath] = ref;
-                    }
+                                }}
-                  }
                             />
                         </TabPane>
                     );
-          })
+                })}
-        }
             </Tabs>
-    )
+        );
+    }
 }
-};

render-process/index.tsx

@@ -1,19 +1,18 @@
-
 import * as ReactDOM from "react-dom";
 import Editor from "./Editor";
 import React, { Component } from "react";
-import { Layout, Tabs } from 'antd';
+import { Layout, Tabs } from "antd";
-import { ipcRenderer, remote } from 'electron';
+import { ipcRenderer, remote } from "electron";
-import * as path from 'path';
+import * as path from "path";
-import * as fs from 'fs';
+import * as fs from "fs";
-import * as Utils from '../common/Utils';
+import * as Utils from "../common/Utils";
 import MainEventType from "../common/MainEventType";
 import Properties from "./Properties";
 import Settings from "../main-process/Settings";
-import G6 from '@antv/g6';
+import G6 from "@antv/g6";
 
-import 'antd/dist/antd.dark.css';
+import "antd/dist/antd.dark.css";
-import './index.css';
+import "./index.css";
 import { ModelConfig, Item } from "@antv/g6/lib/types";
 import RegisterNode from "./RegisterNode";
 import TreeTabs from "./TreeTabs";
@@ -21,7 +20,6 @@ import TreeTabs from "./TreeTabs";
 const { Header, Sider, Content, Footer } = Layout;
 const { TabPane } = Tabs;
 
-
 interface MainState {
     workdir: string;
     workspace: string;
@@ -29,9 +27,9 @@ interface MainState {
 
 export default class Main extends Component {
     state: MainState = {
-    workdir: '',
+        workdir: "",
-    workspace: '',
+        workspace: "",
-  }
+    };
 
     settings: Settings;
     tabs: TreeTabs;
@@ -79,17 +77,14 @@ export default class Main extends Component {
                 </Sider>
                 <Content className="content">
                     <TreeTabs
-            ref={ref => {
+                        ref={(ref) => {
                             this.tabs = ref;
                         }}
                     />
                 </Content>
             </Layout>
-    )
-  }
-};
-
-ReactDOM.render(
-  <Main />,
-  document.getElementById('root') as HTMLElement
         );
+    }
+}
+
+ReactDOM.render(<Main />, document.getElementById("root") as HTMLElement);