add BehaviorTree

main-process/MainProcess.tsx

@@ -44,6 +44,7 @@ export class MainProcess {
       // fullscreenable:false,
       // maximizable:false
     });
+    this.mainWindow.maximize();
     // mainWindow.webContents.openDevTools();
     this.mainWindow.loadFile('index.html');
     this.mainWindow.on('closed', function () {

render-process/Editor/BehaviorTree.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import GGEditor, { Mind, RegisterNode } from 'gg-editor';
+import { MindData } from 'gg-editor/lib/common/interfaces';
+const data: MindData = {
+  id: "1",
+  label: 'Central Topic111',
+  children: [
+    {
+      id: "2",
+      label: 'Main Topic 1',
+    },
+    {
+      id: "3",
+      label: 'Main Topic 2',
+    },
+    {
+      id: "4",
+      label: 'Main Topic 3',
+    },
+  ],
+};
+
+export default class BehaviorTree extends React.Component {
+  render() {
+    return (
+      <Mind
+        style={{ width: "70vw", height: "100vh" }}
+        graphConfig= {{fitView: true, maxZoom:2, fitViewPadding:[20, 20, 20, 20]}}
+        data={data}
+      />
+    );
+  }
+}

render-process/Editor/Editor.css

@@ -5,19 +5,20 @@
 }
 
 .editorBd {
+  width: 100%;
   height : 100%;
   display: flex;
-  background: #fafafa;
+
 }
 
-.editorSidebar,
 .editorContent {
-  min-width: 500px;
+  /* min-width: 500px; */
   height   : 100%;
 }
 
 .editorSidebar {
-  background: #fafafa;
+  /* min-width: 500px; */
+  height   : 100%;
   overflow-y: auto;
 }
 

render-process/Editor/NodePanel.tsx

@@ -13,16 +13,38 @@ interface NodePanelState {
 
 }
 
-class NodePanel extends React.Component<NodePanelProps, NodePanelState> {
+class Panel extends React.Component<NodePanelProps, NodePanelState> {
   render() {
     const { nodes } = this.props;
+    console.log("NodePanel render", nodes);
     const node = nodes[0];
-    return (
-      <Card>
-        {node ? node.getModel().label : ''}
-      </Card>
-    )
+    if (node) {
+      return (
+        <Card title="节点信息">
+          {node ? node.getModel().label : ''}
+        </Card>
+      )
+    } else {
+      return (
+        <Card title="节点信息">
+          未选中
+        </Card>
+      )
+    }
+
   }
 }
 
-export default DetailPanel.create<NodePanelProps>('node')(withEditorContext(NodePanel));
+export default class NodePanel extends React.Component {
+  render() {
+    console.log("NodePanel render");
+    return (
+      <Card title="节点信息" style = {{height:"100%"}}>
+        未选中fefqwefqwefwewef
+      </Card>
+    )
+  }
+
+}
+
+// export default DetailPanel.create<NodePanelProps>('node')(withEditorContext(Panel));

render-process/Editor/index.tsx

@@ -4,6 +4,7 @@ import { MindData } from 'gg-editor/lib/common/interfaces';
 import { Row, Col } from 'antd';
 import './Editor.css';
 import NodePanel from './NodePanel';
+import BehaviorTree from './BehaviorTree';
 
 export interface EditorProps {
 
@@ -15,8 +16,7 @@ export default class Editor extends React.Component<EditorProps> {
       <GGEditor className="editor">
         <Row className="editorBd">
           <Col span={18} className="editorContent">
-            hello
-            {/* <BehaviorTree /> */}
+            <BehaviorTree />
           </Col>
           <Col span={6} className="editorSidebar">
             <NodePanel />

render-process/components/Hello.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import GGEditor, { Mind, RegisterNode } from 'gg-editor';
-import { MindData } from 'gg-editor/lib/common/interfaces';
-const data: MindData = {
-  id: "1",
-  label: 'Central Topic111',
-  children: [
-    {
-      id: "2",
-      label: 'Main Topic 1',
-    },
-    {
-      id: "3",
-      label: 'Main Topic 2',
-    },
-    {
-      id: "4",
-      label: 'Main Topic 3',
-    },
-  ],
-};
-
-export default class Hello extends React.Component {
-  render() {
-    return (
-      <GGEditor style={{ background: "#242424" }}>
-        <Mind
-          style={{ width: 500, height: 500 }}
-          data={data}
-          graphConfig={{ defaultNode: { type: 'customNode' } }}
-        />
-        <RegisterNode
-          name="customNode"
-          config={{
-            getCustomConfig(model: any) {
-              return {
-                wrapperStyle: {
-                  fill: '#000000',
-                },
-              };
-            },
-          }}
-          extend="bizFlowNode"
-        />
-      </GGEditor>
-    );
-  }
-}
-
-function getExclamationMarks(numChars: number) {
-  return Array(numChars + 1).join('!');
-}

render-process/index.tsx

@@ -114,7 +114,7 @@ export default class Main extends Component {
           />
         </Sider>
         <Content className="content">
-          <Tabs
+          {/* <Tabs
             hideAdd
             className="tabs"
             type="editable-card"
@@ -128,7 +128,8 @@ export default class Main extends Component {
                 );
               })
             }
-          </Tabs>
+          </Tabs> */}
+          <Editor />
         </Content>
       </Layout>
     )