From bd808725d70101fe1d25516aaeb9a58ded85ca9d Mon Sep 17 00:00:00 2001 From: zhandouxiaojiji Date: Thu, 15 Oct 2020 20:29:43 +0800 Subject: [PATCH] add Tabs --- render-process/Editor/Editor.css | 31 +++-- render-process/Editor/index.tsx | 125 +++++-------------- render-process/{Editor => }/Properties.tsx | 24 ++-- render-process/index.css | 42 +++++-- render-process/index.tsx | 135 ++++++++++++++++++++- 5 files changed, 223 insertions(+), 134 deletions(-) rename render-process/{Editor => }/Properties.tsx (74%) diff --git a/render-process/Editor/Editor.css b/render-process/Editor/Editor.css index fd8dd6c..f0d63a7 100644 --- a/render-process/Editor/Editor.css +++ b/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; +} \ No newline at end of file diff --git a/render-process/Editor/index.tsx b/render-process/Editor/index.tsx index 0d7eb74..f3e3dbf 100644 --- a/render-process/Editor/index.tsx +++ b/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 (
{str}
) - } - } - +export default class Editor extends React.Component { render() { - const { trees } = this.state; return ( - - - { - console.log("open tree", path); - }} - /> - - -
- 当前目录:{this.state.workspace} -
-
- 当前文件:{this.state.filepaths.join("\n")} -
- {this.renderJson()} - - - ) + + + + hello + {/* */} + + + {/* + */} + + + {/* + + + + { }} /> */} + + ); } -}; \ No newline at end of file +} + +function getExclamationMarks(numChars: number) { + return Array(numChars + 1).join('!'); +} \ No newline at end of file diff --git a/render-process/Editor/Properties.tsx b/render-process/Properties.tsx similarity index 74% rename from render-process/Editor/Properties.tsx rename to render-process/Properties.tsx index 4df6ae1..62c03ee 100644 --- a/render-process/Editor/Properties.tsx +++ b/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 { 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 { 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 { } render() { - const { treeList } = this.state; + const { onOpenTree, workspace } = this.props; + const treeList = this.getTreeList(workspace); return (
{ {treeList.map((tree) => ( onOpenTree(tree.path)} > {tree.name} diff --git a/render-process/index.css b/render-process/index.css index 6fec35b..81aa405 100644 --- a/render-process/index.css +++ b/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; } \ No newline at end of file diff --git a/render-process/index.tsx b/render-process/index.tsx index fc1dd13..5ef534d 100644 --- a/render-process/index.tsx +++ b/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 (
{str}
) + } + } + + render() { + const { workspace, filepaths } = this.state; + document.title = `行为树编辑器 - ${workspace}`; + return ( + + + { + this.openFile(path); + }} + /> + + + + { + filepaths.map(filepath => { + return ( + + + + ); + }) + } + + + + ) + } +}; + ReactDOM.render( - , +
, document.getElementById('root') as HTMLElement ); \ No newline at end of file