add Tabs

render-process/Editor/Editor.css

@@ -1,20 +1,27 @@
-.body {
+.editor {
   width   : 100%;
-  height  : 100%;
-  position: fixed;
-}
-
-.sider {
   height  : 100%;
   overflow: hidden;
 }
 
-.sider:hover {
-  overflow-y   : auto;
-}
-
-.content {
-  width  : 100%;
+.editorBd {
   height : 100%;
   display: flex;
+  background: #fafafa;
 }
+
+.editorSidebar,
+.editorContent {
+  min-width: 500px;
+  height   : 100%;
+}
+
+.editorSidebar {
+  background: #fafafa;
+  overflow-y: auto;
+}
+
+.mind {
+  width           : 100%;
+  height          : 800px;
+}

render-process/Editor/index.tsx

@@ -1,104 +1,37 @@
-import React, { Component } from "react";
-import { Layout } from 'antd';
-import { ipcRenderer } from 'electron';
-import * as path from 'path';
-import * as fs from 'fs';
-import MainEventType from "../../common/MainEventType";
-import Properties from "./Properties";
+import * as React from 'react';
+import GGEditor, { Mind, RegisterNode } from 'gg-editor';
+import { MindData } from 'gg-editor/lib/common/interfaces';
+import { Row, Col } from 'antd';
 import './Editor.css';
-import { BehaviorTreeModel } from "../../common/BehaviorTreeModel";
 
-const { Header, Sider, Content, Footer } = Layout;
+export interface EditorProps {
 
-interface EditorState {
-  workspace: string;
-  filepaths: string[];
-  trees: BehaviorTreeModel[];
 }
 
-export default class Editor extends Component {
-  state: EditorState = {
-    workspace: '',
-    filepaths: [],
-    trees: [],
-  }
-
-  componentDidMount() {
-    ipcRenderer.on(MainEventType.OPEN_FILE, (event: any, path: any) => {
-      console.log("on open file", path);
-      const filepaths = this.state.filepaths;
-      filepaths.push(path);
-      this.setState({ filepaths });
-    });
-
-    ipcRenderer.on(MainEventType.OPEN_WORKSPACE, (event: any, workspace: any) => {
-      console.log("on open workspace", workspace);
-      this.setState({ workspace });
-    });
-
-  }
-
-  loadAllTrees() {
-    const workspace = this.state.workspace
-    if(workspace == '' || !fs.existsSync(workspace)) {
-      console.log("workspace not exist", workspace);
-      return;
-    }
-
-    const files = fs.readdirSync(workspace);
-    const list = []
-    files.forEach((filename) => {
-      console.log("load path", filename);
-      const stat = fs.statSync(path.join(workspace, filename))
-      if (stat.isFile()) {
-        let tree = this.loadTree(filename.slice(0, -5));
-        list.push(tree);
-        console.log("loaded", filename);
-      }
-    })
-  }
-
-  loadTree(name: string) {
-    const filename = this.state.workspace + '/' + name + '.json';
-    if (!fs.existsSync(filename)) {
-      return;
-    }
-    const str = fs.readFileSync(filename, 'utf8');
-    let tree: BehaviorTreeModel = JSON.parse(str);
-    tree.name = name;
-    return tree;
-  }
-
-  renderJson() {
-    if (this.state.filepaths.length > 0) {
-      const path = this.state.filepaths[0];
-      const str = fs.readFileSync(path, 'utf8');
-      return (<div>{str}</div>)
-    }
-  }
-
+export default class Editor extends React.Component<EditorProps> {
   render() {
-    const { trees } = this.state;
     return (
-      <Layout className="body">
-        <Sider className="sider" width={250}>
-          <Properties
-            workspace={this.state.workspace}
-            onOpenTree={(path) => {
-              console.log("open tree", path);
-            }}
-          />
-        </Sider>
-        <Content className="content">
-          <div>
-            当前目录:{this.state.workspace}
-          </div>
-          <div>
-            当前文件:{this.state.filepaths.join("\n")}
-          </div>
-          {this.renderJson()}
-        </Content>
-      </Layout>
-    )
+      <GGEditor className="editor">
+        <Row className="editorBd">
+          <Col span={18} className="editorContent">
+            hello
+            {/* <BehaviorTree /> */}
+          </Col>
+          <Col span={6} className="editorSidebar">
+            {/* <MindDetailPanel />
+            <EditorMinimap /> */}
+          </Col>
+        </Row>
+        {/* <MindContextMenu />
+        <MindCopy />
+        <MindPaste />
+        <MindSave />
+        <RegisterBehaviour name="dblclickItemEditLabel" behaviour={() => { }} /> */}
+      </GGEditor>
+    );
   }
-};
+}
+
+function getExclamationMarks(numChars: number) {
+  return Array(numChars + 1).join('!');
+}

render-process/Properties.tsx

@@ -2,14 +2,14 @@ import React, { Component } from "react";
 import { Menu, Input } from "antd";
 import * as fs from 'fs';
 import * as path from 'path';
-import { BehaviorTreeModel } from "../../common/BehaviorTreeModel";
+import { BehaviorTreeModel } from "../common/BehaviorTreeModel";
 import { remote } from 'electron';
-import { MainProcess } from "../../main-process/MainProcess";
-import Settings from "../../main-process/Settings";
+import { MainProcess } from "../main-process/MainProcess";
+import Settings from "../main-process/Settings";
 
 const { Search } = Input;
 
-interface TreeFile {
+export interface TreeFile {
   name: string;
   path: string;
 }
@@ -31,20 +31,15 @@ export default class Properties extends Component<PropertiesProps> {
   componentDidMount() {
     var workspace = this.props.workspace;
     if (workspace == '') {
-      workspace = this.getLastWorkspace();
+      return;
     }
     this.setState({ treeList: this.getTreeList(workspace) });
   }
 
-  getLastWorkspace() {
-    const settings: Settings = remote.getGlobal("settings");
-    return settings.recentWorkspaces[0];
-  }
-
   getTreeList(workspace: string) {
     if (workspace == '' || !fs.existsSync(workspace)) {
       console.log("workspace not exist", workspace);
-      return;
+      return [];
     }
 
     const files = fs.readdirSync(workspace);
@@ -52,8 +47,9 @@ export default class Properties extends Component<PropertiesProps> {
     files.forEach((filename) => {
       const stat = fs.statSync(path.join(workspace, filename))
       if (stat.isFile()) {
+        var name = filename.slice(0, -5)
         list.push({
-          name: filename.slice(0, -5),
+          name,
           path: workspace + '/' + name + '.json'
         });
       }
@@ -62,7 +58,8 @@ export default class Properties extends Component<PropertiesProps> {
   }
 
   render() {
-    const { treeList } = this.state;
+    const { onOpenTree, workspace } = this.props;
+    const treeList = this.getTreeList(workspace);
     return (
       <div>
         <Search
@@ -77,6 +74,7 @@ export default class Properties extends Component<PropertiesProps> {
           {treeList.map((tree) => (
             <Menu.Item
               key={tree.name}
+              onClick={() => onOpenTree(tree.path)}
             >
               {tree.name}
             </Menu.Item>

render-process/index.css

@@ -1,20 +1,40 @@
 body {
   background-color: #242424;
-  padding: 0px;
+  padding         : 0px;
 }
 
-::-webkit-scrollbar
-{
-    background-color: #a0a0a0;
+.body {
+  width   : 100%;
+  height  : 100%;
+  position: fixed;
 }
 
-::-webkit-scrollbar-track
-{
-    background-color:#1d1d1d;
+.sider {
+  height  : 100%;
+  overflow: hidden;
 }
 
-::-webkit-scrollbar-thumb
-{
-    height:50px;
-    background-color:#818181;
+.sider:hover {
+  overflow-y   : auto;
+}
+
+.content {
+  width  : 100%;
+  height : 100%;
+  display: flex;
+  background-color: #242424;
+}
+
+.tabs {
+  width: 100%;
+  padding: 0;
+}
+
+::-webkit-scrollbar {
+  background-color: rgb(20, 20, 20);
+}
+
+::-webkit-scrollbar-thumb {
+  height          : 50px;
+  background-color: #818181;
 }

render-process/index.tsx

@@ -1,10 +1,141 @@
-import * as React from "react";
+
 import * as ReactDOM from "react-dom";
 import Editor from "./Editor";
+
+
+import React, { Component } from "react";
+import { Layout, Tabs } from 'antd';
+import { ipcRenderer, remote } from 'electron';
+import * as path from 'path';
+import * as fs from 'fs';
+import MainEventType from "../common/MainEventType";
+import Properties from "./Properties";
+import { BehaviorTreeModel } from "../common/BehaviorTreeModel";
+import Settings from "../main-process/Settings";
+
 import 'antd/dist/antd.dark.css';
 import './index.css';
 
+const { Header, Sider, Content, Footer } = Layout;
+const { TabPane } = Tabs;
+
+interface MainState {
+  workspace: string;
+  filepaths: string[];
+  curPath?: string;
+}
+
+export default class Main extends Component {
+  state: MainState = {
+    workspace: '',
+    filepaths: [],
+  }
+
+  componentDidMount() {
+    ipcRenderer.on(MainEventType.OPEN_FILE, (event: any, path: any) => {
+      this.openFile(path);
+    });
+
+    ipcRenderer.on(MainEventType.OPEN_WORKSPACE, (event: any, workspace: any) => {
+      console.log("on open workspace", workspace);
+      document.title = workspace;
+      this.setState({ workspace });
+    });
+
+    this.setState({ workspace: this.getLastWorkspace() });
+  }
+
+  getLastWorkspace() {
+    const settings: Settings = remote.getGlobal("settings");
+    return settings.recentWorkspaces[0];
+  }
+
+  openFile(path: string) {
+    console.log("on open file", path);
+    if (this.state.filepaths.indexOf(path) < 0) {
+      const filepaths = this.state.filepaths;
+      filepaths.push(path);
+      this.setState({ filepaths, curPath: path });
+    } else {
+      this.setState({ curPath: path });
+    }
+  }
+
+  loadAllTrees() {
+    const workspace = this.state.workspace
+    if (workspace == '' || !fs.existsSync(workspace)) {
+      console.log("workspace not exist", workspace);
+      return;
+    }
+
+    const files = fs.readdirSync(workspace);
+    const list = []
+    files.forEach((filename) => {
+      console.log("load path", filename);
+      const stat = fs.statSync(path.join(workspace, filename))
+      if (stat.isFile()) {
+        let tree = this.loadTree(filename.slice(0, -5));
+        list.push(tree);
+        console.log("loaded", filename);
+      }
+    })
+  }
+
+  loadTree(name: string) {
+    const filename = this.state.workspace + '/' + name + '.json';
+    if (!fs.existsSync(filename)) {
+      return;
+    }
+    const str = fs.readFileSync(filename, 'utf8');
+    let tree: BehaviorTreeModel = JSON.parse(str);
+    tree.name = name;
+    return tree;
+  }
+
+  renderJson() {
+    const path = this.state.curPath;
+    if (path) {
+      const str = fs.readFileSync(path, 'utf8');
+      return (<div>{str}</div>)
+    }
+  }
+
+  render() {
+    const { workspace, filepaths } = this.state;
+    document.title = `行为树编辑器 - ${workspace}`;
+    return (
+      <Layout className="body">
+        <Sider className="sider" width={250}>
+          <Properties
+            workspace={this.state.workspace}
+            onOpenTree={(path) => {
+              this.openFile(path);
+            }}
+          />
+        </Sider>
+        <Content className="content">
+          <Tabs
+            hideAdd
+            className="tabs"
+            type="editable-card"
+          >
+            {
+              filepaths.map(filepath => {
+                return (
+                  <TabPane tab={path.basename(filepath)} key={filepath}>
+                    <Editor/>
+                  </TabPane>
+                );
+              })
+            }
+          </Tabs>
+        </Content>
+      </Layout>
+    )
+  }
+};
+
 ReactDOM.render(
-  <Editor />,
+  <Main />,
   document.getElementById('root') as HTMLElement
 );