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/Properties.tsx

@@ -1,88 +0,0 @@
-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 { remote } from 'electron';
-import { MainProcess } from "../../main-process/MainProcess";
-import Settings from "../../main-process/Settings";
-
-const { Search } = Input;
-
-interface TreeFile {
-  name: string;
-  path: string;
-}
-
-export interface PropertiesProps {
-  workspace: string;
-  onOpenTree: (path: string) => void;
-}
-
-interface PropertiesState {
-  treeList: TreeFile[]
-}
-
-export default class Properties extends Component<PropertiesProps> {
-  state: PropertiesState = {
-    treeList: []
-  };
-
-  componentDidMount() {
-    var workspace = this.props.workspace;
-    if (workspace == '') {
-      workspace = this.getLastWorkspace();
-    }
-    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;
-    }
-
-    const files = fs.readdirSync(workspace);
-    const list: TreeFile[] = [];
-    files.forEach((filename) => {
-      const stat = fs.statSync(path.join(workspace, filename))
-      if (stat.isFile()) {
-        list.push({
-          name: filename.slice(0, -5),
-          path: workspace + '/' + name + '.json'
-        });
-      }
-    })
-    return list;
-  }
-
-  render() {
-    const { treeList } = this.state;
-    return (
-      <div>
-        <Search
-          placeholder="Search"
-          onChange={() => {
-
-          }}
-        />
-        <Menu
-          mode="inline"
-        >
-          {treeList.map((tree) => (
-            <Menu.Item
-              key={tree.name}
-            >
-              {tree.name}
-            </Menu.Item>
-          ))}
-        </Menu>
-      </div>
-    )
-  }
-}

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('!');
+}