style: format codes
This commit is contained in:
duanhongbo committed
1 parent
c3ea18e307
commit
00e79d641e
14 files changed
+2152
-2186
No files matched your search
+267
-273
@@ -1,297 +1,291 @@
|
||||
import React from 'react';
|
||||
import { Card, Divider, Form, Input, AutoComplete, Select, Switch, InputNumber, notification, message } from 'antd';
|
||||
import { INode } from '@antv/g6/lib/interface/item';
|
||||
import { BehaviorNodeModel, BehaviorNodeTypeModel, ArgsDefType } from '../../common/BehaviorTreeModel';
|
||||
import Settings from '../../main-process/Settings';
|
||||
import { FormInstance } from 'antd/lib/form';
|
||||
import Markdown from 'react-markdown';
|
||||
import React from "react";
|
||||
import {
|
||||
Card,
|
||||
Divider,
|
||||
Form,
|
||||
Input,
|
||||
AutoComplete,
|
||||
Select,
|
||||
Switch,
|
||||
InputNumber,
|
||||
notification,
|
||||
message,
|
||||
} from "antd";
|
||||
import { INode } from "@antv/g6/lib/interface/item";
|
||||
import {
|
||||
BehaviorNodeModel,
|
||||
BehaviorNodeTypeModel,
|
||||
ArgsDefType,
|
||||
} from "../../common/BehaviorTreeModel";
|
||||
import Settings from "../../main-process/Settings";
|
||||
import { FormInstance } from "antd/lib/form";
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
const { Item } = Form;
|
||||
|
||||
interface NodePanelProps {
|
||||
model: BehaviorNodeModel;
|
||||
settings: Settings;
|
||||
updateNode: (id: string, forceUpdate:boolean) => void;
|
||||
model: BehaviorNodeModel;
|
||||
settings: Settings;
|
||||
updateNode: (id: string, forceUpdate: boolean) => void;
|
||||
}
|
||||
|
||||
interface NodePanelState {
|
||||
|
||||
}
|
||||
interface NodePanelState {}
|
||||
|
||||
export default class NodePanel extends React.Component<NodePanelProps> {
|
||||
formRef = React.createRef<FormInstance>();
|
||||
formRef = React.createRef<FormInstance>();
|
||||
|
||||
componentDidUpdate() {
|
||||
this.formRef.current.resetFields();
|
||||
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];
|
||||
}
|
||||
}
|
||||
if (model.input) {
|
||||
model.input.forEach((v, i) => {
|
||||
initialValues[`input.${i}`] = v;
|
||||
})
|
||||
}
|
||||
if (model.output) {
|
||||
model.output.forEach((v, i) => {
|
||||
initialValues[`output.${i}`] = v;
|
||||
})
|
||||
}
|
||||
return initialValues;
|
||||
}
|
||||
|
||||
onFinish = (values: any) => {
|
||||
console.log('Success:', values);
|
||||
const { updateNode, model, settings } = this.props;
|
||||
const conf = settings.getNodeConf(values.name)
|
||||
if (!conf) {
|
||||
notification.warn({ message: `节点${values.name}未定义` });
|
||||
return;
|
||||
}
|
||||
var forceUpdate = false;
|
||||
if (model.name != values.name) {
|
||||
model.name = values.name;
|
||||
forceUpdate = true;
|
||||
}
|
||||
model.desc = values.desc;
|
||||
|
||||
var args: any = {};
|
||||
if (values.customArgs) {
|
||||
try {
|
||||
args = JSON.parse(values.customArgs);
|
||||
} catch (e) {
|
||||
message.warn(`您输入的自定义参数不符合json格式${values.customArgs}`);
|
||||
return;
|
||||
}
|
||||
componentDidUpdate() {
|
||||
this.formRef.current.resetFields();
|
||||
this.formRef.current.setFieldsValue(this.getInitialValues());
|
||||
}
|
||||
|
||||
if (conf.args) {
|
||||
conf.args.forEach(e => {
|
||||
const k = 'args.' + e.name;
|
||||
if (e.type.indexOf('number') > 0) {
|
||||
args[e.name] = Number(values[k]);
|
||||
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];
|
||||
}
|
||||
}
|
||||
if (model.input) {
|
||||
model.input.forEach((v, i) => {
|
||||
initialValues[`input.${i}`] = v;
|
||||
});
|
||||
}
|
||||
if (model.output) {
|
||||
model.output.forEach((v, i) => {
|
||||
initialValues[`output.${i}`] = v;
|
||||
});
|
||||
}
|
||||
return initialValues;
|
||||
}
|
||||
|
||||
onFinish = (values: any) => {
|
||||
console.log("Success:", values);
|
||||
const { updateNode, model, settings } = this.props;
|
||||
const conf = settings.getNodeConf(values.name);
|
||||
if (!conf) {
|
||||
notification.warn({ message: `节点${values.name}未定义` });
|
||||
return;
|
||||
}
|
||||
var forceUpdate = false;
|
||||
if (model.name != values.name) {
|
||||
model.name = values.name;
|
||||
forceUpdate = true;
|
||||
}
|
||||
model.desc = values.desc;
|
||||
|
||||
var args: any = {};
|
||||
if (values.customArgs) {
|
||||
try {
|
||||
args = JSON.parse(values.customArgs);
|
||||
} catch (e) {
|
||||
message.warn(`您输入的自定义参数不符合json格式${values.customArgs}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (conf.args) {
|
||||
conf.args.forEach((e) => {
|
||||
const k = "args." + e.name;
|
||||
if (e.type.indexOf("number") > 0) {
|
||||
args[e.name] = Number(values[k]);
|
||||
} else {
|
||||
args[e.name] = values[k];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
model.args = args;
|
||||
this.formRef.current.setFieldsValue({
|
||||
customArgs: model.args ? JSON.stringify(model.args, null, " ") : "",
|
||||
});
|
||||
|
||||
if (conf.input) {
|
||||
model.input = [];
|
||||
conf.input.forEach((e, i) => {
|
||||
model.input.push(values["input." + i] || "");
|
||||
});
|
||||
} else {
|
||||
args[e.name] = values[k];
|
||||
model.input = null;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
model.args = args;
|
||||
this.formRef.current.setFieldsValue({ customArgs: model.args ? JSON.stringify(model.args, null, " ") : '' });
|
||||
if (conf.output) {
|
||||
model.output = [];
|
||||
conf.output.forEach((e, i) => {
|
||||
model.output.push(values["output." + i] || "");
|
||||
});
|
||||
} else {
|
||||
model.output = null;
|
||||
}
|
||||
|
||||
if (conf.input) {
|
||||
model.input = [];
|
||||
conf.input.forEach((e, i) => {
|
||||
model.input.push(values['input.' + i] || '');
|
||||
})
|
||||
} else {
|
||||
model.input = null;
|
||||
}
|
||||
|
||||
if (conf.output) {
|
||||
model.output = [];
|
||||
conf.output.forEach((e, i) => {
|
||||
model.output.push(values['output.' + i] || '');
|
||||
})
|
||||
} else {
|
||||
model.output = null;
|
||||
}
|
||||
|
||||
if (forceUpdate) {
|
||||
this.forceUpdate();
|
||||
}
|
||||
updateNode(model.id.toString(), forceUpdate);
|
||||
};
|
||||
|
||||
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);
|
||||
const title = conf.desc;
|
||||
|
||||
const options: any = [];
|
||||
settings.nodeConfig.map((e) => {
|
||||
options.push({ label: `${e.name}(${e.desc})`, value: e.name });
|
||||
})
|
||||
|
||||
const layout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 18 },
|
||||
if (forceUpdate) {
|
||||
this.forceUpdate();
|
||||
}
|
||||
updateNode(model.id.toString(), forceUpdate);
|
||||
};
|
||||
return (
|
||||
<Card title={title} style={{ height: window.screen.height - 100, overflow: 'auto' }}>
|
||||
<Form
|
||||
{...layout}
|
||||
name="basic"
|
||||
onFinish={this.onFinish}
|
||||
initialValues={this.getInitialValues()}
|
||||
ref={this.formRef}
|
||||
>
|
||||
<Item
|
||||
label="节点id"
|
||||
>
|
||||
<Input value={model.id} disabled={true} />
|
||||
</Item>
|
||||
<Item
|
||||
label="节点名称"
|
||||
name="name"
|
||||
>
|
||||
<AutoComplete
|
||||
options={options}
|
||||
onBlur={this.handleSubmit}
|
||||
filterOption={(inputValue: string, option: any) => {
|
||||
return option.label.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
|
||||
}}
|
||||
/>
|
||||
</Item>
|
||||
<Item
|
||||
label="节点说明"
|
||||
name="desc"
|
||||
>
|
||||
<Input onBlur={this.handleSubmit} />
|
||||
</Item>
|
||||
<Item
|
||||
label="调试开关"
|
||||
name="debug"
|
||||
valuePropName='checked'
|
||||
>
|
||||
<Switch onChange={this.handleSubmit} />
|
||||
</Item>
|
||||
<Markdown source={conf.doc} />
|
||||
{this.renderInputs(conf)}
|
||||
{this.renderArgs(conf)}
|
||||
{this.renderOutputs(conf)}
|
||||
</Form>
|
||||
</Card >
|
||||
)
|
||||
}
|
||||
|
||||
renderArgs(conf: BehaviorNodeTypeModel) {
|
||||
if (!conf || !conf.args || conf.args.length == 0) {
|
||||
return null;
|
||||
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);
|
||||
const title = conf.desc;
|
||||
|
||||
const options: any = [];
|
||||
settings.nodeConfig.map((e) => {
|
||||
options.push({ label: `${e.name}(${e.desc})`, value: e.name });
|
||||
});
|
||||
|
||||
const layout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 18 },
|
||||
};
|
||||
return (
|
||||
<Card title={title} style={{ height: window.screen.height - 100, overflow: "auto" }}>
|
||||
<Form
|
||||
{...layout}
|
||||
name="basic"
|
||||
onFinish={this.onFinish}
|
||||
initialValues={this.getInitialValues()}
|
||||
ref={this.formRef}
|
||||
>
|
||||
<Item label="节点id">
|
||||
<Input value={model.id} disabled={true} />
|
||||
</Item>
|
||||
<Item label="节点名称" name="name">
|
||||
<AutoComplete
|
||||
options={options}
|
||||
onBlur={this.handleSubmit}
|
||||
filterOption={(inputValue: string, option: any) => {
|
||||
return (
|
||||
option.label.toUpperCase().indexOf(inputValue.toUpperCase()) !==
|
||||
-1
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Item>
|
||||
<Item label="节点说明" name="desc">
|
||||
<Input onBlur={this.handleSubmit} />
|
||||
</Item>
|
||||
<Item label="调试开关" name="debug" valuePropName="checked">
|
||||
<Switch onChange={this.handleSubmit} />
|
||||
</Item>
|
||||
<Markdown source={conf.doc} />
|
||||
{this.renderInputs(conf)}
|
||||
{this.renderArgs(conf)}
|
||||
{this.renderOutputs(conf)}
|
||||
</Form>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 普通参数
|
||||
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) => {
|
||||
const required = e.type.indexOf("?") == -1;
|
||||
return (
|
||||
<Item
|
||||
name={`args.${e.name}`}
|
||||
label={e.desc}
|
||||
key={`args.${e.name}`}
|
||||
valuePropName={e.type.indexOf("boolean") >= 0 ? 'checked' : undefined}
|
||||
rules={[
|
||||
{ required, message: `${e.desc}(${e.name})为必填字段` }
|
||||
]}
|
||||
>
|
||||
{normalArgs(e)}
|
||||
</Item>
|
||||
)
|
||||
})}
|
||||
{customArgs()}
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
renderInputs(conf: BehaviorNodeTypeModel) {
|
||||
if (!conf.input || !conf.input || conf.input.length == 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Divider orientation="left"><h3>输入变量</h3></Divider>
|
||||
{
|
||||
conf.input.map((e, i) => {
|
||||
return (
|
||||
<Item
|
||||
label={e}
|
||||
name={`input.${i}`}
|
||||
key={`input.${i}`}
|
||||
>
|
||||
<Input onBlur={this.handleSubmit} />
|
||||
</Item>
|
||||
)
|
||||
})
|
||||
renderArgs(conf: BehaviorNodeTypeModel) {
|
||||
if (!conf || !conf.args || conf.args.length == 0) {
|
||||
return null;
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderOutputs(conf: BehaviorNodeTypeModel) {
|
||||
if (!conf.output || !conf.output || conf.output.length == 0) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Divider orientation="left"><h3>输出变量</h3></Divider>
|
||||
{
|
||||
conf.output.map((e, i) => {
|
||||
// 普通参数
|
||||
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
|
||||
label={e}
|
||||
name={`output.${i}`}
|
||||
key={`output.${i}`}
|
||||
>
|
||||
<Input onBlur={this.handleSubmit} />
|
||||
</Item>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<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) => {
|
||||
const required = e.type.indexOf("?") == -1;
|
||||
return (
|
||||
<Item
|
||||
name={`args.${e.name}`}
|
||||
label={e.desc}
|
||||
key={`args.${e.name}`}
|
||||
valuePropName={
|
||||
e.type.indexOf("boolean") >= 0 ? "checked" : undefined
|
||||
}
|
||||
rules={[{ required, message: `${e.desc}(${e.name})为必填字段` }]}
|
||||
>
|
||||
{normalArgs(e)}
|
||||
</Item>
|
||||
);
|
||||
})}
|
||||
{customArgs()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderInputs(conf: BehaviorNodeTypeModel) {
|
||||
if (!conf.input || !conf.input || conf.input.length == 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Divider orientation="left">
|
||||
<h3>输入变量</h3>
|
||||
</Divider>
|
||||
{conf.input.map((e, i) => {
|
||||
return (
|
||||
<Item label={e} name={`input.${i}`} key={`input.${i}`}>
|
||||
<Input onBlur={this.handleSubmit} />
|
||||
</Item>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderOutputs(conf: BehaviorNodeTypeModel) {
|
||||
if (!conf.output || !conf.output || conf.output.length == 0) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Divider orientation="left">
|
||||
<h3>输出变量</h3>
|
||||
</Divider>
|
||||
{conf.output.map((e, i) => {
|
||||
return (
|
||||
<Item label={e} name={`output.${i}`} key={`output.${i}`}>
|
||||
<Input onBlur={this.handleSubmit} />
|
||||
</Item>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user