mac/behavior3editor
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: format codes

Browse Source
This commit is contained in:
duanhongbo committed 2020-11-12 17:24:08 +08:00
1 parent c3ea18e307
commit 00e79d641e
14 files changed
+408 -442
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

common/BehaviorTreeModel.ts
+5 -5
View File
@@ -1,9 +1,9 @@
import { TreeGraphData } from "@antv/g6/lib/types";
export interface ArgsDefType {
name: string,
type: string,
desc: string,
name: string;
type: string;
desc: string;
}
export interface BehaviorNodeTypeModel {
name: string;
@@ -19,7 +19,7 @@ export interface BehaviorNodeModel {
id: number;
name: string;
desc?: string;
args?: {[key: string]: any};
args?: { [key: string]: any };
input?: string[];
output?: string[];
children?: BehaviorNodeModel[];
@@ -34,7 +34,7 @@ export interface BehaviorTreeModel {
export interface GraphNodeModel extends TreeGraphData {
name: string;
desc?: string;
args?: {[key: string]: any};
args?: { [key: string]: any };
input?: string[];
output?: string[];
children?: GraphNodeModel[];
common/MainEventType.ts
+8 -8
View File
@@ -2,11 +2,11 @@ export default {
OPEN_FILE: "OPEN_FILE",
OPEN_DIR: "OPEN_DIR",
OPEN_WORKSPACE: "OPEN_WORKSPACE",
CREATE_TREE: 'CREATE_TREE',
CREATE_NODE: 'CREATE_NODE',
DELETE_NODE: 'DELETE_NODE',
COPY_NODE: 'COPY_NODE',
PASTE_NODE: 'PASTE_NODE',
SAVE: 'SAVE',
SAVE_ALL: 'SAVE_ALL',
}
CREATE_TREE: "CREATE_TREE",
CREATE_NODE: "CREATE_NODE",
DELETE_NODE: "DELETE_NODE",
COPY_NODE: "COPY_NODE",
PASTE_NODE: "PASTE_NODE",
SAVE: "SAVE",
SAVE_ALL: "SAVE_ALL",
};
common/Utils.ts
+26 -27
View File
@@ -1,17 +1,17 @@
import { TreeGraphData } from "@antv/g6/lib/types"
import { TreeGraphData } from "@antv/g6/lib/types";
import { BehaviorNodeModel, BehaviorTreeModel, GraphNodeModel } from "./BehaviorTreeModel";
import Settings from "../main-process/Settings";
import { remote } from "electron";
import * as path from 'path';
import * as path from "path";
export const cloneNodeData = (nodeData: GraphNodeModel) => {
const newData: GraphNodeModel = {
id: nodeData.id + "new",
name: nodeData.name,
conf: nodeData.conf,
}
};
return newData;
}
};
export const refreshNodeId = (nodeData: GraphNodeModel, id?: number) => {
if (!id) {
@@ -19,12 +19,12 @@ export const refreshNodeId = (nodeData: GraphNodeModel, id?: number) => {
}
nodeData.id = (id++).toString();
if (nodeData.children) {
nodeData.children.forEach(child => {
nodeData.children.forEach((child) => {
id = refreshNodeId(child, id);
})
});
}
return id;
}
};
export const calcTreeNodeSize = (treeNode: GraphNodeModel) => {
var height = 40;
@@ -32,12 +32,12 @@ export const calcTreeNodeSize = (treeNode: GraphNodeModel) => {
if (Array.isArray(obj) || (obj && Object.keys(obj).length > 0)) {
height += 25;
}
}
};
updateHeight(treeNode.conf.args);
updateHeight(treeNode.conf.input);
updateHeight(treeNode.conf.output);
return [200, height];
}
};
export const createTreeData = (bNode: BehaviorNodeModel, settings: Settings) => {
const treeData: GraphNodeModel = {
@@ -48,17 +48,17 @@ export const createTreeData = (bNode: BehaviorNodeModel, settings: Settings) =>
input: bNode.input,
output: bNode.output,
conf: settings.getNodeConf(bNode.name),
}
};
treeData.size = calcTreeNodeSize(treeData);
if (bNode.children) {
treeData.children = [];
bNode.children.forEach(child => {
bNode.children.forEach((child) => {
treeData.children.push(createTreeData(child, settings));
})
});
}
calcTreeNodeSize(treeData);
return treeData;
}
};
export const createFileData = (gNode: GraphNodeModel) => {
const nodeData: BehaviorNodeModel = {
@@ -68,15 +68,15 @@ export const createFileData = (gNode: GraphNodeModel) => {
args: gNode.args || undefined,
input: gNode.input || undefined,
output: gNode.output || undefined,
}
};
if (gNode.children) {
nodeData.children = [];
gNode.children.forEach(child => {
gNode.children.forEach((child) => {
nodeData.children.push(createFileData(child));
})
});
}
return nodeData;
}
};
export const findParent = (node: TreeGraphData, id: string): TreeGraphData | null => {
if (node.children) {
@@ -89,11 +89,10 @@ export const findParent = (node: TreeGraphData, id: string): TreeGraphData | nul
return parent;
}
}
}
}
return null;
}
};
export const findFromAllChildren = (node: TreeGraphData, id: string): TreeGraphData | null => {
if (node.id == id) {
@@ -108,24 +107,24 @@ export const findFromAllChildren = (node: TreeGraphData, id: string): TreeGraphD
}
}
return null;
}
};
export const getRemoteSettings = () => {
return remote.getGlobal("settings") as Settings;
}
};
export const fileName2treeName = (filename: string) => {
return path.basename(filename).slice(0, -5);
}
};
export const createNewTree = (filename: string) => {
const tree: BehaviorTreeModel = {
name: fileName2treeName(filename),
root: {
id: 1,
name: 'Sequence',
desc: '新建行为树'
}
}
name: "Sequence",
desc: "新建行为树",
},
};
return tree;
}
};
main-process/AppMenu.ts
+6 -6
View File
@@ -121,13 +121,13 @@ export default class AppMenu {
});
if (res.filePath) {
const curWorkspace = this.settings.curWorkspace;
curWorkspace.writeAllTrees(res.filePath,(err)=>{
const msg = err?err:"导出成功";
curWorkspace.writeAllTrees(res.filePath, (err) => {
const msg = err ? err : "导出成功";
dialog.showMessageBox({
type:"info",
buttons:["ok"],
message:msg
})
type: "info",
buttons: ["ok"],
message: msg,
});
});
}
})();
main-process/MainProcess.tsx
+21 -23
View File
@@ -1,13 +1,13 @@
import { app, BrowserWindow, Menu, MenuItem, dialog, nativeTheme } from 'electron';
import AppMenu from './AppMenu'
import Settings from './Settings';
import MainEventType from '../common/MainEventType';
import { app, BrowserWindow, Menu, MenuItem, dialog, nativeTheme } from "electron";
import AppMenu from "./AppMenu";
import Settings from "./Settings";
import MainEventType from "../common/MainEventType";
const electronLocalshortcut = require('electron-localshortcut');
const electronLocalshortcut = require("electron-localshortcut");
// 一些暴露给render-process的全局变量
export interface Global {
settings: Settings
settings: Settings;
}
declare var global: Global;
@@ -16,24 +16,24 @@ export class MainProcess {
appMenu: AppMenu;
settings: Settings;
constructor() {
nativeTheme.themeSource = 'dark';
app.on('ready', () => {
nativeTheme.themeSource = "dark";
app.on("ready", () => {
this.createWindow();
electronLocalshortcut.register(this.mainWindow, 'Ctrl+C', () => {
electronLocalshortcut.register(this.mainWindow, "Ctrl+C", () => {
this.mainWindow.webContents.send(MainEventType.COPY_NODE);
});
electronLocalshortcut.register(this.mainWindow, 'Ctrl+V', () => {
electronLocalshortcut.register(this.mainWindow, "Ctrl+V", () => {
this.mainWindow.webContents.send(MainEventType.PASTE_NODE);
});
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
})
app.on('activate', () => {
});
app.on("activate", () => {
if (this.mainWindow === null) {
this.createWindow()
this.createWindow();
}
});
}
@@ -48,15 +48,15 @@ export class MainProcess {
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
}
},
// fullscreenable:false,
// maximizable:false
});
this.mainWindow.maximize();
// mainWindow.webContents.openDevTools();
this.mainWindow.loadFile('index.html');
this.mainWindow.on('closed', function () {
this.mainWindow = null
this.mainWindow.loadFile("index.html");
this.mainWindow.on("closed", function () {
this.mainWindow = null;
});
this.appMenu = new AppMenu(this);
this.rebuildMenu();
@@ -67,6 +67,4 @@ export class MainProcess {
}
}
export default new MainProcess();
main-process/Settings.ts
+8 -9
View File
@@ -1,6 +1,6 @@
import * as fs from 'fs';
import { BehaviorNodeTypeModel } from '../common/BehaviorTreeModel';
import Workspace from './Workspace';
import * as fs from "fs";
import { BehaviorNodeTypeModel } from "../common/BehaviorTreeModel";
import Workspace from "./Workspace";
export interface BehaviorNodeClassify {
classify: string;
@@ -13,14 +13,13 @@ export interface SettingsModel {
nodeClassify?: BehaviorNodeClassify[];
}
const settingPath = 'settings.json';
const settingPath = "settings.json";
const sampleNodeClassify: BehaviorNodeClassify[] = [
{ classify: "Composite", desc: "复合节点" },
{ classify: "Decorator", desc: "修饰节点" },
{ classify: "Condition", desc: "条件节点" },
{ classify: "Action", desc: "行为节点" },
]
];
export default class Settings {
private settings: SettingsModel;
@@ -49,18 +48,18 @@ export default class Settings {
set(config: SettingsModel) {
this.settings = {
...this.settings,
...config
...config,
};
this.save();
}
load() {
if (fs.existsSync(settingPath)) {
const str = fs.readFileSync(settingPath, 'utf8');
const str = fs.readFileSync(settingPath, "utf8");
this.settings = JSON.parse(str);
} else {
this.settings = {
recentWorkspaces: ['sample/workspace.json'],
recentWorkspaces: ["sample/workspace.json"],
recentFiles: [],
nodeClassify: sampleNodeClassify,
};
main-process/Workspace.ts
+8 -6
View File
@@ -32,12 +32,12 @@ export default class Workspace {
return;
}
try {
const str = fs.readFileSync(this.filepath, 'utf8');
const str = fs.readFileSync(this.filepath, "utf8");
const model = JSON.parse(str) as WorkspaceModel;
if (model.isRelative) {
const root = path.dirname(this.filepath);
this.nodeConfPath = root + '/' + model.nodeConfPath;
this.workdir = root + '/' + model.workdir;
this.nodeConfPath = root + "/" + model.nodeConfPath;
this.workdir = root + "/" + model.workdir;
} else {
this.nodeConfPath = model.nodeConfPath;
this.workdir = model.workdir;
@@ -54,11 +54,13 @@ export default class Workspace {
return;
}
const types: BehaviorNodeTypeModel[] = JSON.parse(fs.readFileSync(this.nodeConfPath, 'utf8'));
const types: BehaviorNodeTypeModel[] = JSON.parse(
fs.readFileSync(this.nodeConfPath, "utf8")
);
this.name2conf = {};
types.forEach(t => {
types.forEach((t) => {
this.name2conf[t.name] = t;
})
});
this.types = types;
}
render-process/Editor/NodePanel.tsx
+88 -94
View File
@@ -1,22 +1,35 @@
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;
updateNode: (id: string, forceUpdate: boolean) => void;
}
interface NodePanelState {
}
interface NodePanelState {}
export default class NodePanel extends React.Component<NodePanelProps> {
formRef = React.createRef<FormInstance>();
@@ -32,7 +45,7 @@ export default class NodePanel extends React.Component<NodePanelProps> {
name: model.name,
desc: model.desc,
debug: model.debug,
customArgs: model.args ? JSON.stringify(model.args, null, " ") : '',
customArgs: model.args ? JSON.stringify(model.args, null, " ") : "",
};
if (model.args) {
for (let k in model.args) {
@@ -42,20 +55,20 @@ export default class NodePanel extends React.Component<NodePanelProps> {
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);
console.log("Success:", values);
const { updateNode, model, settings } = this.props;
const conf = settings.getNodeConf(values.name)
const conf = settings.getNodeConf(values.name);
if (!conf) {
notification.warn({ message: `节点${values.name}未定义` });
return;
@@ -78,24 +91,26 @@ export default class NodePanel extends React.Component<NodePanelProps> {
}
if (conf.args) {
conf.args.forEach(e => {
const k = 'args.' + e.name;
if (e.type.indexOf('number') > 0) {
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, " ") : '' });
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] || '');
})
model.input.push(values["input." + i] || "");
});
} else {
model.input = null;
}
@@ -103,8 +118,8 @@ export default class NodePanel extends React.Component<NodePanelProps> {
if (conf.output) {
model.output = [];
conf.output.forEach((e, i) => {
model.output.push(values['output.' + i] || '');
})
model.output.push(values["output." + i] || "");
});
} else {
model.output = null;
}
@@ -116,13 +131,13 @@ export default class NodePanel extends React.Component<NodePanelProps> {
};
onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
console.log("Failed:", errorInfo);
};
handleSubmit = () => {
console.log("handleSubmit");
this.formRef.current.submit();
}
};
render() {
const { model, settings } = this.props;
@@ -132,14 +147,14 @@ export default class NodePanel extends React.Component<NodePanelProps> {
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' }}>
<Card title={title} style={{ height: window.screen.height - 100, overflow: "auto" }}>
<Form
{...layout}
name="basic"
@@ -147,34 +162,25 @@ export default class NodePanel extends React.Component<NodePanelProps> {
initialValues={this.getInitialValues()}
ref={this.formRef}
>
<Item
label="节点id"
>
<Item label="节点id">
<Input value={model.id} disabled={true} />
</Item>
<Item
label="节点名称"
name="name"
>
<Item label="节点名称" name="name">
<AutoComplete
options={options}
onBlur={this.handleSubmit}
filterOption={(inputValue: string, option: any) => {
return option.label.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
return (
option.label.toUpperCase().indexOf(inputValue.toUpperCase()) !==
-1
);
}}
/>
</Item>
<Item
label="节点说明"
name="desc"
>
<Item label="节点说明" name="desc">
<Input onBlur={this.handleSubmit} />
</Item>
<Item
label="调试开关"
name="debug"
valuePropName='checked'
>
<Item label="调试开关" name="debug" valuePropName="checked">
<Switch onChange={this.handleSubmit} />
</Item>
<Markdown source={conf.doc} />
@@ -182,8 +188,8 @@ export default class NodePanel extends React.Component<NodePanelProps> {
{this.renderArgs(conf)}
{this.renderOutputs(conf)}
</Form>
</Card >
)
</Card>
);
}
renderArgs(conf: BehaviorNodeTypeModel) {
@@ -197,53 +203,51 @@ export default class NodePanel extends React.Component<NodePanelProps> {
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} />;
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={'公式'} />;
}
return <Input onBlur={this.handleSubmit} placeholder={"公式"} />;
}
};
// 自定义参数
const customArgs = () => {
return (
<Item
name='customArgs'
label='自定义'
key='customArgs'
>
<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) => {
<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})为必填字段` }
]}
valuePropName={
e.type.indexOf("boolean") >= 0 ? "checked" : undefined
}
rules={[{ required, message: `${e.desc}(${e.name})为必填字段` }]}
>
{normalArgs(e)}
</Item>
)
);
})}
{customArgs()}
</div >
</div>
);
}
renderInputs(conf: BehaviorNodeTypeModel) {
if (!conf.input || !conf.input || conf.input.length == 0) {
return null;
@@ -251,22 +255,18 @@ export default class NodePanel extends React.Component<NodePanelProps> {
return (
<div>
<Divider orientation="left"><h3>输入变量</h3></Divider>
{
conf.input.map((e, i) => {
<Divider orientation="left">
<h3>输入变量</h3>
</Divider>
{conf.input.map((e, i) => {
return (
<Item
label={e}
name={`input.${i}`}
key={`input.${i}`}
>
<Item label={e} name={`input.${i}`} key={`input.${i}`}>
<Input onBlur={this.handleSubmit} />
</Item>
)
})
}
);
})}
</div>
)
);
}
renderOutputs(conf: BehaviorNodeTypeModel) {
@@ -275,23 +275,17 @@ export default class NodePanel extends React.Component<NodePanelProps> {
}
return (
<div>
<Divider orientation="left"><h3>输出变量</h3></Divider>
{
conf.output.map((e, i) => {
<Divider orientation="left">
<h3>输出变量</h3>
</Divider>
{conf.output.map((e, i) => {
return (
<Item
label={e}
name={`output.${i}`}
key={`output.${i}`}
>
<Item label={e} name={`output.${i}`} key={`output.${i}`}>
<Input onBlur={this.handleSubmit} />
</Item>
)
})
}
);
})}
</div>
)
);
}
}
render-process/Editor/TreePanel.tsx
+9 -14
View File
@@ -1,33 +1,28 @@
import React from 'react';
import { Card } from 'antd';
import { INode } from '@antv/g6/lib/interface/item';
import { BehaviorTreeModel } from '../../common/BehaviorTreeModel';
import React from "react";
import { Card } from "antd";
import { INode } from "@antv/g6/lib/interface/item";
import { BehaviorTreeModel } from "../../common/BehaviorTreeModel";
interface TreePanelProps {
model?: BehaviorTreeModel;
}
interface TreePanelState {
}
interface TreePanelState {}
export default class TreePanel extends React.Component<TreePanelProps, TreePanelState> {
state: TreePanelState = {};
componentDidMount() {
}
componentDidMount() {}
render() {
const { model } = this.props;
if(!model) {
return (<div/>)
if (!model) {
return <div />;
}
return (
<Card title="概况" style={{ height: "100%" }}>
行为树:{model.name}
</Card>
)
);
}
}
render-process/Editor/index.tsx
+101 -99
View File
@@ -1,17 +1,21 @@
import * as React from 'react';
import * as fs from 'fs';
import * as path from 'path';
import { Row, Col, message } from 'antd';
import NodePanel from './NodePanel';
import G6, { TreeGraph } from '@antv/g6';
import { G6GraphEvent } from '@antv/g6/lib/interface/behavior';
import * as Utils from '../../common/Utils';
import { BehaviorTreeModel, GraphNodeModel, BehaviorNodeModel } from '../../common/BehaviorTreeModel';
import TreePanel from './TreePanel';
import Settings from '../../main-process/Settings';
import * as React from "react";
import * as fs from "fs";
import * as path from "path";
import { Row, Col, message } from "antd";
import NodePanel from "./NodePanel";
import G6, { TreeGraph } from "@antv/g6";
import { G6GraphEvent } from "@antv/g6/lib/interface/behavior";
import * as Utils from "../../common/Utils";
import {
BehaviorTreeModel,
GraphNodeModel,
BehaviorNodeModel,
} from "../../common/BehaviorTreeModel";
import TreePanel from "./TreePanel";
import Settings from "../../main-process/Settings";
import './Editor.css';
import { clipboard } from 'electron';
import "./Editor.css";
import { clipboard } from "electron";
export interface EditorProps {
filepath: string;
@@ -46,38 +50,40 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
// fitCenter: true,
modes: {
default: [
'drag-canvas',
'zoom-canvas',
'click-select',
'hover',
"drag-canvas",
"zoom-canvas",
"click-select",
"hover",
{
type: 'collapse-expand',
trigger: 'dblclick',
type: "collapse-expand",
trigger: "dblclick",
onChange: (item, collapsed) => {
this.onSelectNode(item.getID());
const data = item.getModel();
data.collapsed = collapsed;
graph.setItemState(item, 'collapsed', data.collapsed as boolean);
graph.setItemState(item, "collapsed", data.collapsed as boolean);
const icon = data.collapsed ? G6.Marker.expand : G6.Marker.collapse;
const marker = item.get('group').find((ele: any) => ele.get('name') === 'collapse-icon');
marker.attr('symbol', icon);
const marker = item
.get("group")
.find((ele: any) => ele.get("name") === "collapse-icon");
marker.attr("symbol", icon);
return true;
},
},
]
],
},
defaultEdge: {
type: 'cubic-horizontal',
type: "cubic-horizontal",
style: {
stroke: '#A3B1BF'
}
stroke: "#A3B1BF",
},
},
defaultNode: {
type: "TreeNode",
},
layout: {
type: 'compactBox',
direction: 'LR',
type: "compactBox",
direction: "LR",
getHGap: () => 50,
getWidth: (d: GraphNodeModel) => {
return 150;
@@ -88,27 +94,27 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
} else {
return 50;
}
}
}
},
},
});
graph.on('node:mouseenter', (e: G6GraphEvent) => {
graph.on("node:mouseenter", (e: G6GraphEvent) => {
const { item } = e;
if (item.hasState('selected')) {
if (item.hasState("selected")) {
return;
}
graph.setItemState(item, 'hover', true);
graph.setItemState(item, "hover", true);
});
graph.on('node:mouseleave', (e: G6GraphEvent) => {
graph.on("node:mouseleave", (e: G6GraphEvent) => {
const { item } = e;
if (item.hasState('selected')) {
if (item.hasState("selected")) {
return;
}
graph.setItemState(item, 'hover', false);
graph.setItemState(item, "hover", false);
});
graph.on('nodeselectchange', (e: G6GraphEvent) => {
graph.on("nodeselectchange", (e: G6GraphEvent) => {
if (e.target) {
this.onSelectNode(e.target.getID());
} else {
@@ -118,69 +124,69 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
const clearDragDstState = () => {
if (this.dragDstId) {
graph.setItemState(this.dragDstId, 'dragRight', false);
graph.setItemState(this.dragDstId, 'dragDown', false);
graph.setItemState(this.dragDstId, 'dragUp', false);
graph.setItemState(this.dragDstId, "dragRight", false);
graph.setItemState(this.dragDstId, "dragDown", false);
graph.setItemState(this.dragDstId, "dragUp", false);
this.dragDstId = null;
}
}
};
const clearDragSrcState = () => {
if (this.dragSrcId) {
graph.setItemState(this.dragSrcId, 'dragSrc', false);
graph.setItemState(this.dragSrcId, "dragSrc", false);
this.dragSrcId = null;
}
}
};
graph.on('node:dragstart', (e: G6GraphEvent) => {
graph.on("node:dragstart", (e: G6GraphEvent) => {
this.dragSrcId = e.item.getID();
graph.setItemState(this.dragSrcId, 'dragSrc', true);
graph.setItemState(this.dragSrcId, "dragSrc", true);
});
graph.on('node:dragend', (e: G6GraphEvent) => {
graph.on("node:dragend", (e: G6GraphEvent) => {
if (this.dragSrcId) {
graph.setItemState(this.dragSrcId, 'dragSrc', false);
graph.setItemState(this.dragSrcId, "dragSrc", false);
this.dragSrcId = null;
}
});
graph.on('node:dragover', (e: G6GraphEvent) => {
graph.on("node:dragover", (e: G6GraphEvent) => {
const dstNodeId = e.item.getID();
if (dstNodeId == this.dragSrcId) {
return;
}
if (this.dragDstId) {
graph.setItemState(this.dragDstId, 'dragRight', false);
graph.setItemState(this.dragDstId, 'dragDown', false);
graph.setItemState(this.dragDstId, 'dragUp', false);
graph.setItemState(this.dragDstId, "dragRight", false);
graph.setItemState(this.dragDstId, "dragDown", false);
graph.setItemState(this.dragDstId, "dragUp", false);
}
const box = e.item.getBBox();
if (e.x > box.minX + box.width * 0.6) {
graph.setItemState(dstNodeId, 'dragRight', true);
graph.setItemState(dstNodeId, "dragRight", true);
} else if (e.y > box.minY + box.height * 0.5) {
graph.setItemState(dstNodeId, 'dragDown', true);
graph.setItemState(dstNodeId, "dragDown", true);
} else {
graph.setItemState(dstNodeId, 'dragUp', true);
graph.setItemState(dstNodeId, "dragUp", true);
}
this.dragDstId = dstNodeId;
});
graph.on('node:dragleave', (e: G6GraphEvent) => {
graph.on("node:dragleave", (e: G6GraphEvent) => {
clearDragDstState();
})
});
graph.on('node:drop', (e: G6GraphEvent) => {
graph.on("node:drop", (e: G6GraphEvent) => {
const srcNodeId = this.dragSrcId;
const dstNode = e.item;
var dragDir;
if (dstNode.hasState('dragRight')) {
dragDir = 'dragRight';
} else if (dstNode.hasState('dragDown')) {
dragDir = 'dragDown';
} else if (dstNode.hasState('dragUp')) {
dragDir = 'dragUp';
if (dstNode.hasState("dragRight")) {
dragDir = "dragRight";
} else if (dstNode.hasState("dragDown")) {
dragDir = "dragDown";
} else if (dstNode.hasState("dragUp")) {
dragDir = "dragUp";
}
clearDragSrcState();
@@ -196,7 +202,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
return;
}
const rootData = graph.findDataById('1');
const rootData = graph.findDataById("1");
const srcData = graph.findDataById(srcNodeId);
const srcParent = Utils.findParent(rootData, srcNodeId);
const dstData = graph.findDataById(dstNode.getID());
@@ -213,28 +219,28 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
}
const removeSrc = () => {
srcParent.children = srcParent.children.filter(e => e.id != srcData.id);
}
srcParent.children = srcParent.children.filter((e) => e.id != srcData.id);
};
console.log("dstNode", dstNode);
if (dragDir == 'dragRight') {
if (dragDir == "dragRight") {
removeSrc();
if (!dstData.children) {
dstData.children = [];
}
dstData.children.push(srcData);
} else if (dragDir == 'dragUp') {
} else if (dragDir == "dragUp") {
if (!dstParent) {
return;
}
removeSrc();
const idx = dstParent.children.findIndex(e => e.id == dstData.id);
const idx = dstParent.children.findIndex((e) => e.id == dstData.id);
dstParent.children.splice(idx, 0, srcData);
} else if (dragDir == 'dragDown') {
} else if (dragDir == "dragDown") {
if (!dstParent) {
return;
}
removeSrc();
const idx = dstParent.children.findIndex(e => e.id == dstData.id);
const idx = dstParent.children.findIndex((e) => e.id == dstData.id);
dstParent.children.splice(idx + 1, 0, srcData);
} else {
return;
@@ -246,14 +252,14 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
const settings = Utils.getRemoteSettings();
const str = fs.readFileSync(this.props.filepath, 'utf8');
const str = fs.readFileSync(this.props.filepath, "utf8");
let tree: BehaviorTreeModel = JSON.parse(str);
const data = Utils.createTreeData(tree.root, settings);
this.autoId = Utils.refreshNodeId(data);
graph.data(data);
graph.render();
graph.fitCenter();
graph.set('animate', true);
graph.set("animate", true);
this.graph = graph;
@@ -264,12 +270,12 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
const graph = this.graph;
if (this.state.curNodeId) {
graph.setItemState(this.state.curNodeId, 'selected', false);
graph.setItemState(this.state.curNodeId, "selected", false);
}
this.setState({ curNodeId });
if (this.state.curNodeId) {
graph.setItemState(this.state.curNodeId, 'selected', true);
graph.setItemState(this.state.curNodeId, "selected", true);
}
}
@@ -284,7 +290,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
const newNodeData: BehaviorNodeModel = {
id: this.autoId++,
name: name,
}
};
if (!curNodeData.children) {
curNodeData.children = [];
}
@@ -299,15 +305,15 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
return;
}
if(curNodeId == '1') {
if (curNodeId == "1") {
message.warn("根节点不能删除!");
return;
}
this.onSelectNode(null);
const rootData = this.graph.findDataById('1');
const rootData = this.graph.findDataById("1");
const parentData = Utils.findParent(rootData, curNodeId);
parentData.children = parentData.children.filter(e => e.id != curNodeId);
parentData.children = parentData.children.filter((e) => e.id != curNodeId);
this.changeWithoutAnim();
}
@@ -317,20 +323,23 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
}
changeWithoutAnim() {
this.graph.set('animate', false);
this.graph.set("animate", false);
this.graph.changeData();
this.graph.layout();
this.graph.set('animate', true);
this.graph.set("animate", true);
}
save() {
const { filepath } = this.props;
const root = Utils.createFileData(this.graph.findDataById('1') as GraphNodeModel);
fs.writeFileSync(filepath, JSON.stringify({
const root = Utils.createFileData(this.graph.findDataById("1") as GraphNodeModel);
fs.writeFileSync(
filepath,
JSON.stringify({
name: path.basename(filepath).slice(0, -5),
root,
desc: root.desc,
}));
})
);
}
copyNode() {
@@ -352,15 +361,15 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
const curNodeData = this.graph.findDataById(curNodeId);
try {
const str = clipboard.readText();
if(!str || str == '') {
if (!str || str == "") {
return;
}
const data = JSON.parse(str);
if(!curNodeData.children) {
if (!curNodeData.children) {
curNodeData.children = [];
}
curNodeData.children.push(data);
this.autoId = Utils.refreshNodeId(this.graph.findDataById('1') as GraphNodeModel);
this.autoId = Utils.refreshNodeId(this.graph.findDataById("1") as GraphNodeModel);
this.changeWithoutAnim();
} catch (error) {
message.error("粘贴数据有误");
@@ -377,14 +386,9 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
return (
<div className="editor">
<Row className="editorBd">
<Col
span={18}
className="editorContent"
ref={this.ref}
/>
<Col span={18} className="editorContent" ref={this.ref} />
<Col span={6} className="editorSidebar">
{
curNode ?
{curNode ? (
<NodePanel
model={curNode}
settings={settings}
@@ -399,11 +403,9 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
item.draw();
}}
/>
:
<TreePanel
model={treeModel}
/>
}
) : (
<TreePanel model={treeModel} />
)}
</Col>
</Row>
</div>
render-process/Properties.tsx
+15 -25
View File
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import { Menu, Input } from "antd";
import * as fs from 'fs';
import * as path from 'path';
import * as fs from "fs";
import * as path from "path";
import { ipcRenderer } from "electron";
import MainEventType from "../common/MainEventType";
@@ -18,15 +18,15 @@ export interface PropertiesProps {
}
interface PropertiesState {
treeList: TreeFile[]
treeList: TreeFile[];
}
export default class Properties extends Component<PropertiesProps> {
state: PropertiesState = {
treeList: []
treeList: [],
};
curWorkdir: string = '';
curWorkdir: string = "";
shouldComponentUpdate(nextProps: PropertiesProps) {
const shouldUpdate = this.curWorkdir != nextProps.workdir;
@@ -42,14 +42,14 @@ export default class Properties extends Component<PropertiesProps> {
});
var workdir = this.props.workdir;
if (workdir == '') {
if (workdir == "") {
return;
}
this.setState({ treeList: this.getTreeList(workdir) });
}
getTreeList(workdir: string) {
if (workdir == '' || !fs.existsSync(workdir)) {
if (workdir == "" || !fs.existsSync(workdir)) {
console.log("workdir not exist", workdir);
return [];
}
@@ -57,15 +57,15 @@ export default class Properties extends Component<PropertiesProps> {
const files = fs.readdirSync(workdir);
const list: TreeFile[] = [];
files.forEach((filename) => {
const stat = fs.statSync(path.join(workdir, filename))
const stat = fs.statSync(path.join(workdir, filename));
if (stat.isFile()) {
var name = filename.slice(0, -5)
var name = filename.slice(0, -5);
list.push({
name,
path: workdir + '/' + name + '.json'
path: workdir + "/" + name + ".json",
});
}
})
});
return list;
}
@@ -75,25 +75,15 @@ export default class Properties extends Component<PropertiesProps> {
const treeList = this.getTreeList(workdir);
return (
<div>
<Search
placeholder="Search"
onChange={() => {
}}
/>
<Menu
mode="inline"
>
<Search placeholder="Search" onChange={() => {}} />
<Menu mode="inline">
{treeList.map((tree) => (
<Menu.Item
key={tree.name}
onClick={() => onOpenTree(tree.path)}
>
<Menu.Item key={tree.name} onClick={() => onOpenTree(tree.path)}>
{tree.name}
</Menu.Item>
))}
</Menu>
</div>
)
);
}
}
render-process/RegisterNode.ts
+80 -82
View File
@@ -1,78 +1,77 @@
import G6 from '@antv/g6';
import Settings from '../main-process/Settings';
import G6 from "@antv/g6";
import Settings from "../main-process/Settings";
const NODE_COLORS: any = {
['Composite']: 'rgb(91,237,32)',
['Decorator']: 'rgb(218,167,16)',
['Condition']: 'rgb(228,20,139)',
['Action']: 'rgb(91,143,249)',
['Other']: 'rgb(112,112,112)',
}
["Composite"]: "rgb(91,237,32)",
["Decorator"]: "rgb(218,167,16)",
["Condition"]: "rgb(228,20,139)",
["Action"]: "rgb(91,143,249)",
["Other"]: "rgb(112,112,112)",
};
export default function (settings: Settings) {
const collapseStyle: any = {
'collapse-icon': {
"collapse-icon": {
// symbol: G6.Marker.expand,
fill: 'blue',
}
fill: "blue",
},
};
G6.registerNode(
'TreeNode',
"TreeNode",
{
options: {
type: 'rect',
type: "rect",
labelCfg: {
style: {
fill: 'blue',
fontSize: 10
}
fill: "blue",
fontSize: 10,
},
},
style: {
fill: "white",
},
stateStyles: {
selected: {
'main-box': {
stroke: 'yellow',
"main-box": {
stroke: "yellow",
lineWidth: 5,
},
},
hover: {
stroke: 'white',
stroke: "white",
lineWidth: 3,
},
dragSrc: {
fill: 'gray',
fill: "gray",
},
dragRight: {
'drag-right': {
"drag-right": {
fillOpacity: 0.6,
}
},
},
dragUp: {
'drag-up': {
"drag-up": {
fillOpacity: 0.6,
}
},
},
dragDown: {
'drag-down': {
"drag-down": {
fillOpacity: 0.6,
}
}
},
},
},
},
draw(cfg, group) {
const nodeConf = settings.getNodeConf(cfg.name as string);
const classify = nodeConf.type || 'Other';
const color = NODE_COLORS[classify] || 'Other';
var size = cfg.size ? cfg.size as number[] : [150, 40];
const classify = nodeConf.type || "Other";
const color = NODE_COLORS[classify] || "Other";
var size = cfg.size ? (cfg.size as number[]) : [150, 40];
const w = size[0];
const h = size[1];
const x0 = -w / 2;
const y0 = -h / 2;
const r = 2;
const shape = group.addShape('rect', {
const shape = group.addShape("rect", {
attrs: {
x: x0,
y: y0,
@@ -80,15 +79,15 @@ export default function (settings: Settings) {
height: h,
stroke: color,
lineWidth: 2,
fill: 'white',
fill: "white",
radius: r,
},
name: 'main-box',
name: "main-box",
draggable: true,
});
// name bg
group.addShape('rect', {
group.addShape("rect", {
attrs: {
x: x0 + 1.5,
y: y0 + 1.5,
@@ -97,30 +96,30 @@ export default function (settings: Settings) {
fill: color,
// radius: r,
},
name: 'name-bg',
name: "name-bg",
draggable: true,
});
// id text
group.addShape('text', {
group.addShape("text", {
attrs: {
textBaseline: 'top',
textBaseline: "top",
x: x0 - 3,
y: -8,
fontSize: 20,
lineHeight: 20,
text: cfg.id,
textAlign: 'right',
fill: 'white',
stroke: 'black',
textAlign: "right",
fill: "white",
stroke: "black",
lineWidth: 2,
},
name: 'id-text',
name: "id-text",
});
// icon
var img = `./static/icons/${classify}.svg`;
group.addShape('image', {
group.addShape("image", {
attrs: {
x: x0 + 3,
y: y0 + 2,
@@ -128,21 +127,21 @@ export default function (settings: Settings) {
width: 14,
img,
},
name: 'node-icon',
name: "node-icon",
});
// name text
group.addShape('text', {
group.addShape("text", {
attrs: {
textBaseline: 'top',
textBaseline: "top",
x: x0 + 18,
y: y0 + 4,
fontWeight: 800,
lineHeight: 20,
text: cfg.name,
fill: 'black',
fill: "black",
},
name: 'name-text',
name: "name-text",
});
var x = x0 + 2;
@@ -150,128 +149,127 @@ export default function (settings: Settings) {
// desc text
const desc = cfg.desc || nodeConf.desc;
if (desc) {
group.addShape('text', {
group.addShape("text", {
attrs: {
textBaseline: 'top',
textBaseline: "top",
x,
y,
lineHeight: 20,
fontWeight: 800,
text: `备注:${desc}`,
fill: 'black',
fill: "black",
},
name: 'desc-text',
name: "desc-text",
});
}
const args: any = cfg.args;
if (nodeConf.args && args && Object.keys(args).length > 0) {
y += 20;
group.addShape('text', {
group.addShape("text", {
attrs: {
textBaseline: 'top',
textBaseline: "top",
x,
y,
lineHeight: 20,
text: `参数:${JSON.stringify(args)}`,
fill: 'black',
fill: "black",
},
name: 'args-text',
name: "args-text",
});
}
const input: [] = cfg.input ? cfg.input as [] : [];
const input: [] = cfg.input ? (cfg.input as []) : [];
if (nodeConf.input && input.length > 0) {
y += 20;
group.addShape('text', {
group.addShape("text", {
attrs: {
textBaseline: 'top',
textBaseline: "top",
x,
y,
lineHeight: 20,
text: `输入:${JSON.stringify(input)}`,
fill: 'black',
fill: "black",
},
name: 'input-text',
name: "input-text",
});
}
const output: [] = cfg.output ? cfg.output as [] : [];
const output: [] = cfg.output ? (cfg.output as []) : [];
if (nodeConf.output && output.length > 0) {
y += 20;
group.addShape('text', {
group.addShape("text", {
attrs: {
textBaseline: 'top',
textBaseline: "top",
x,
y,
lineHeight: 20,
text: `输出:${JSON.stringify(output)}`,
fill: 'black',
fill: "black",
},
name: 'output-text',
name: "output-text",
});
}
if (Array.isArray(cfg.children) && cfg.children.length > 0) {
group.addShape('marker', {
group.addShape("marker", {
attrs: {
x: w / 2,
y: 0,
r: 6,
symbol: G6.Marker.collapse,
stroke: '#666',
stroke: "#666",
lineWidth: 1,
fill: '#fff',
fill: "#fff",
},
name: 'collapse-icon',
name: "collapse-icon",
});
}
group.addShape('rect', {
name: 'drag-up',
group.addShape("rect", {
name: "drag-up",
attrs: {
x: -w / 2,
y: -h / 2,
width: w,
height: h / 2,
fill: 'blue',
fill: "blue",
fillOpacity: 0,
},
draggable: true,
// visible: false,
});
group.addShape('rect', {
name: 'drag-down',
group.addShape("rect", {
name: "drag-down",
attrs: {
x: -w / 2,
y: 0,
width: w,
height: h / 2,
fill: 'blue',
fill: "blue",
fillOpacity: 0,
},
draggable: true,
// visible: false,
});
group.addShape('rect', {
name: 'drag-right',
group.addShape("rect", {
name: "drag-right",
attrs: {
x: w * 0.1,
y: -h / 2,
width: w * 0.4,
height: h,
fill: 'blue',
fill: "blue",
fillOpacity: 0,
},
draggable: true,
// visible: false,
});
return shape;
}
},
'single-node',
},
"single-node"
);
}
render-process/TreeTabs.tsx
+18 -24
View File
@@ -1,16 +1,15 @@
import Editor from "./Editor";
import React, { Component } from "react";
import { Layout, Tabs, message } from 'antd';
import { ipcRenderer, remote } from 'electron';
import * as path from 'path';
import { Layout, Tabs, message } from "antd";
import { ipcRenderer, remote } from "electron";
import * as path from "path";
import 'antd/dist/antd.dark.css';
import "antd/dist/antd.dark.css";
import MainEventType from "../common/MainEventType";
const { TabPane } = Tabs;
interface TreeTabsProps {
}
interface TreeTabsProps {}
interface TreeTabsState {
filepaths: string[];
@@ -20,12 +19,11 @@ interface TreeTabsState {
export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
state: TreeTabsState = {
filepaths: [],
}
};
editors: { [path: string]: Editor } = {}
editors: { [path: string]: Editor } = {};
componentWillMount() {
}
componentWillMount() {}
componentDidMount() {
ipcRenderer.on(MainEventType.CREATE_NODE, (event: any, name: any) => {
@@ -90,7 +88,7 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
console.log("render tabs");
const { filepaths, curPath } = this.state;
if (!curPath) {
return (<div />);
return <div />;
}
return (
<Tabs
@@ -99,11 +97,11 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
type="editable-card"
defaultActiveKey={curPath}
activeKey={curPath}
onChange={activeKey => {
this.setState({ curPath: activeKey })
onChange={(activeKey) => {
this.setState({ curPath: activeKey });
}}
onEdit={(targetKey, action) => {
if (action == 'remove') {
if (action == "remove") {
const idx = filepaths.indexOf(targetKey as string);
if (idx < 0) {
return;
@@ -114,23 +112,19 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
}
}}
>
{
filepaths.map(filepath => {
{filepaths.map((filepath) => {
return (
<TabPane tab={path.basename(filepath)} key={filepath}>
<Editor
filepath={filepath}
ref={
ref => {
ref={(ref) => {
this.editors[filepath] = ref;
}
}
}}
/>
</TabPane>
);
})
}
})}
</Tabs>
)
);
}
};
}
render-process/index.tsx
+15 -20
View File
@@ -1,19 +1,18 @@
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 * as Utils from '../common/Utils';
import { Layout, Tabs } from "antd";
import { ipcRenderer, remote } from "electron";
import * as path from "path";
import * as fs from "fs";
import * as Utils from "../common/Utils";
import MainEventType from "../common/MainEventType";
import Properties from "./Properties";
import Settings from "../main-process/Settings";
import G6 from '@antv/g6';
import G6 from "@antv/g6";
import 'antd/dist/antd.dark.css';
import './index.css';
import "antd/dist/antd.dark.css";
import "./index.css";
import { ModelConfig, Item } from "@antv/g6/lib/types";
import RegisterNode from "./RegisterNode";
import TreeTabs from "./TreeTabs";
@@ -21,7 +20,6 @@ import TreeTabs from "./TreeTabs";
const { Header, Sider, Content, Footer } = Layout;
const { TabPane } = Tabs;
interface MainState {
workdir: string;
workspace: string;
@@ -29,9 +27,9 @@ interface MainState {
export default class Main extends Component {
state: MainState = {
workdir: '',
workspace: '',
}
workdir: "",
workspace: "",
};
settings: Settings;
tabs: TreeTabs;
@@ -79,17 +77,14 @@ export default class Main extends Component {
</Sider>
<Content className="content">
<TreeTabs
ref={ref => {
ref={(ref) => {
this.tabs = ref;
}}
/>
</Content>
</Layout>
)
);
}
};
}
ReactDOM.render(
<Main />,
document.getElementById('root') as HTMLElement
);
ReactDOM.render(<Main />, document.getElementById("root") as HTMLElement);