NodePanel add AutoComplete

render-process/Editor/NodePanel.tsx

@@ -10,6 +10,7 @@ const { Item } = Form;
 interface NodePanelProps {
   model: BehaviorNodeModel;
   settings: Settings;
+  updateNode: (id: string) => void;
 }
 
 interface NodePanelState {
@@ -23,30 +24,36 @@ export default class NodePanel extends React.Component<NodePanelProps> {
     const { model, settings } = this.props;
     this.formRef.current.setFieldsValue({
       name: model.name,
+      desc: model.desc,
     });
   }
 
   onFinish = (values: any) => {
     console.log('Success:', values);
+    const { updateNode, model } = this.props;
+    model.desc = values.desc;
+    updateNode(model.id.toString());
   };
 
   onFinishFailed = (errorInfo: any) => {
     console.log('Failed:', errorInfo);
   };
 
+  handleSubmit = () => {
+    console.log("handleSubmit");
+    this.formRef.current.submit();
+  }
+
   render() {
     const { model, settings } = this.props;
     const conf = settings.getNodeConf(model.name);
-    console.log("model", model, conf);
     const title = conf.desc;
 
-    const names: string[] = [];
+    const options: any = [];
     settings.nodeConfig.map((e) => {
-      names.push(e.name);
+      options.push({ label: `${e.name}(${e.desc})`, value: e.name });
     })
 
-    const name = model.name;
-
     const layout = {
       labelCol: { span: 4 },
       wrapperCol: { span: 20 },
@@ -57,6 +64,10 @@ export default class NodePanel extends React.Component<NodePanelProps> {
           {...layout}
           name="basic"
           onFinish={this.onFinish}
+          initialValues={{
+            name: model.name,
+            desc: model.desc,
+          }}
           ref={this.formRef}
         >
           <Item
@@ -69,14 +80,19 @@ export default class NodePanel extends React.Component<NodePanelProps> {
             name="name"
           >
             <AutoComplete
-              dataSource={names}
+              options={options}
-              filterOption={(inputValue, option: any) =>
+              onBlur={this.handleSubmit}
-                option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+              filterOption={(inputValue: string, option: any) => {
-              }
+                return option.label.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
-              onChange={this.onFinish}
+              }}
-              defaultValue={name}
             />
           </Item>
+          <Item
+            label="节点说明"
+            name="desc"
+          >
+            <Input onBlur={this.handleSubmit} />
+          </Item>
         </Form>
       </Card>
     )

render-process/Editor/index.tsx

@@ -279,6 +279,11 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
 
   }
 
+  updateNode(id: string) {
+    this.graph.changeData();
+    this.graph.layout();
+  }
+
   render() {
     console.log("render editor")
     const { curNodeId, treeModel, settings } = this.state;
@@ -295,7 +300,21 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
             ref={this.ref}
           />
           <Col span={6} className="editorSidebar">
-            {curNode ? <NodePanel model={curNode} settings={settings} /> : <TreePanel model={treeModel} />}
+            {
+              curNode ?
+                <NodePanel
+                  model={curNode}
+                  settings={settings}
+                  updateNode={id => {
+                    const item = this.graph.findById(id);
+                    item.draw();
+                  }}
+                />
+                :
+                <TreePanel
+                  model={treeModel}
+                />
+            }
           </Col>
         </Row>
       </div>