From a891fc7122ede303fbe7f0eeacea98e5da2fa79b Mon Sep 17 00:00:00 2001
From: zhandouxiaojiji <zhandouxiaojiji@gmail.com>
Date: Mon, 2 Nov 2020 19:55:49 +0800
Subject: [PATCH] NodePanel render args

---
 common/BehaviorTreeModel.ts         |   7 +-
 render-process/Editor/Editor.css    |  10 +--
 render-process/Editor/NodePanel.tsx | 109 ++++++++++++++++++++++++----
 render-process/Editor/index.tsx     |   3 +-
 render-process/index.css            |   7 +-
 5 files changed, 114 insertions(+), 22 deletions(-)

diff --git a/common/BehaviorTreeModel.ts b/common/BehaviorTreeModel.ts
index 59a17c3..89e0e31 100644
--- a/common/BehaviorTreeModel.ts
+++ b/common/BehaviorTreeModel.ts
@@ -1,10 +1,15 @@
 import { TreeGraphData } from "@antv/g6/lib/types";
 
+export interface ArgsDefType {
+  name: string,
+  type: string,
+  desc: string,
+}
 export interface BehaviorNodeTypeModel {
   name: string;
   type?: string;
   desc?: string;
-  args?: string[][3];
+  args?: ArgsDefType[];
   input?: string[];
   output?: string;
   doc?: string;
diff --git a/render-process/Editor/Editor.css b/render-process/Editor/Editor.css
index 6ecd243..53434a6 100644
--- a/render-process/Editor/Editor.css
+++ b/render-process/Editor/Editor.css
@@ -5,7 +5,7 @@
 }
 
 .editorBd {
-  width: 100%;
+  width  : 100%;
   height : 100%;
   display: flex;
 
@@ -13,16 +13,16 @@
 
 .editorContent {
   /* min-width: 500px; */
-  height   : 100%;
+  height          : 100%;
 }
 
 .editorSidebar {
   /* min-width: 500px; */
-  height   : 100%;
+  height    : 100%;
   overflow-y: auto;
 }
 
 .mind {
-  width           : 100%;
-  height          : 800px;
+  width : 100%;
+  height: 800px;
 }
\ No newline at end of file
diff --git a/render-process/Editor/NodePanel.tsx b/render-process/Editor/NodePanel.tsx
index fa57e92..202bd70 100644
--- a/render-process/Editor/NodePanel.tsx
+++ b/render-process/Editor/NodePanel.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Card, Divider, Form, Input, AutoComplete, Select, Switch } from 'antd';
+import { Card, Divider, Form, Input, AutoComplete, Select, Switch, InputNumber } from 'antd';
 import { INode } from '@antv/g6/lib/interface/item';
-import { BehaviorNodeModel } from '../../common/BehaviorTreeModel';
+import { BehaviorNodeModel, BehaviorNodeTypeModel, ArgsDefType } from '../../common/BehaviorTreeModel';
 import Settings from '../../main-process/Settings';
 import { FormInstance } from 'antd/lib/form';
 import Markdown from 'react-markdown';
@@ -23,11 +23,23 @@ export default class NodePanel extends React.Component<NodePanelProps> {
 
   componentDidUpdate() {
     const { model, settings } = this.props;
-    this.formRef.current.setFieldsValue({
+    this.formRef.current.setFieldsValue(this.getInitialValues());
+  }
+
+  getInitialValues() {
+    const { model } = this.props;
+    const initialValues: any = {
       name: model.name,
       desc: model.desc,
       debug: model.debug,
-    });
+      customArgs: model.args ? JSON.stringify(model.args, null, " ") : '',
+    };
+    if (model.args) {
+      for (let k in model.args) {
+        initialValues[`args.${k}`] = model.args[k]
+      }
+    }
+    return initialValues;
   }
 
   onFinish = (values: any) => {
@@ -47,6 +59,7 @@ export default class NodePanel extends React.Component<NodePanelProps> {
   }
 
   render() {
+    console.log("render nodePanel");
     const { model, settings } = this.props;
     const conf = settings.getNodeConf(model.name);
     const title = conf.desc;
@@ -57,20 +70,16 @@ export default class NodePanel extends React.Component<NodePanelProps> {
     })
 
     const layout = {
-      labelCol: { span: 4 },
-      wrapperCol: { span: 20 },
+      labelCol: { span: 6 },
+      wrapperCol: { span: 18 },
     };
     return (
-      <Card title={title} style={{ height: "100%" }}>
+      <Card title={title} style={{ height: window.screen.height - 100, overflow: 'auto' }}>
         <Form
           {...layout}
           name="basic"
           onFinish={this.onFinish}
-          initialValues={{
-            name: model.name,
-            desc: model.desc,
-            debug: model.debug,
-          }}
+          initialValues={this.getInitialValues()}
           ref={this.formRef}
         >
           <Item
@@ -99,12 +108,86 @@ export default class NodePanel extends React.Component<NodePanelProps> {
           <Item
             label="调试开关"
             name="debug"
+            valuePropName='checked'
           >
             <Switch onChange={this.handleSubmit} />
           </Item>
           <Markdown source={conf.doc} />
+          {this.renderInputs(model, conf)}
+          {this.renderArgs(model, conf)}
+          {this.renderOutputs(model, conf)}
         </Form>
-      </Card>
+      </Card >
+    )
+  }
+
+  renderArgs(model: BehaviorNodeModel, conf: BehaviorNodeTypeModel) {
+    if (!conf || !conf.args || conf.args.length == 0) {
+      return null;
+    }
+
+    // 普通参数
+    const normalArgs = (e: ArgsDefType) => {
+      const required = e.type.indexOf("?") == -1;
+      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} />;
+      } 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={'公式'} />;
+      }
+    }
+
+    // 自定义参数
+    const customArgs = () => {
+      return (
+        <Item
+          name='customArgs'
+          label='自定义'
+          key='customArgs'
+        >
+          <Input.TextArea onBlur={this.handleSubmit} style={{ minHeight: 100 }} />
+        </Item>
+      )
+
+    }
+
+    return (
+      <div>
+        <Divider orientation="left"><h3>常量参数</h3></Divider>
+        {conf && conf.args && conf.args.map((e, i: number) => {
+          return (
+            <Item
+              name={`args.${e.name}`}
+              label={e.desc}
+              key={i}
+              valuePropName={e.type.indexOf("boolean") >= 0 ? 'checked' : undefined}
+            >
+              {normalArgs(e)}
+            </Item>
+          )
+        })}
+        {customArgs()}
+      </div >
+    );
+  }
+
+
+  renderInputs(model: BehaviorNodeModel, conf: BehaviorNodeTypeModel) {
+    return (
+      <div>
+        <Divider orientation="left"><h3>输入变量</h3></Divider>
+      </div>
+    )
+  }
+
+  renderOutputs(model: BehaviorNodeModel, conf: BehaviorNodeTypeModel) {
+    return (
+      <div>
+        <Divider orientation="left"><h3>输出变量</h3></Divider>
+      </div>
     )
   }
 
diff --git a/render-process/Editor/index.tsx b/render-process/Editor/index.tsx
index 0d3570d..45ac5fd 100644
--- a/render-process/Editor/index.tsx
+++ b/render-process/Editor/index.tsx
@@ -285,12 +285,13 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
   }
 
   render() {
-    console.log("render editor")
     const { curNodeId, treeModel, settings } = this.state;
     var curNode: any;
     if (curNodeId) {
       curNode = this.graph.findDataById(curNodeId);
     }
+    console.log("render editor", curNodeId);
+
     return (
       <div className="editor">
         <Row className="editorBd">
diff --git a/render-process/index.css b/render-process/index.css
index 81aa405..08a6a0a 100644
--- a/render-process/index.css
+++ b/render-process/index.css
@@ -1,5 +1,6 @@
 body {
-  background-color: #242424;
+  /* background-color: #242424; */
+  background-color: rgb(20, 20, 20);
   padding         : 0px;
 }
 
@@ -22,7 +23,9 @@ body {
   width  : 100%;
   height : 100%;
   display: flex;
-  background-color: #242424;
+  /* background-color: #242424; */
+  background-color: rgb(20, 20, 20);
+
 }
 
 .tabs {