add RegisterNode
This commit is contained in:
zhandouxiaojiji committed
1 parent
167750bb99
commit
b7cddd7b6f
2 files changed
+274
-266
No files matched your search
@@ -0,0 +1,272 @@
|
|||||||
|
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)',
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default function (settings: Settings) {
|
||||||
|
G6.registerNode(
|
||||||
|
'TreeNode',
|
||||||
|
{
|
||||||
|
options: {
|
||||||
|
type: 'rect',
|
||||||
|
labelCfg: {
|
||||||
|
style: {
|
||||||
|
fill: 'blue',
|
||||||
|
fontSize: 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "white",
|
||||||
|
},
|
||||||
|
stateStyles: {
|
||||||
|
selected: {
|
||||||
|
'main-box': {
|
||||||
|
stroke: 'black',
|
||||||
|
lineWidth: 3,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
stroke: 'white',
|
||||||
|
lineWidth: 3,
|
||||||
|
},
|
||||||
|
dragSrc: {
|
||||||
|
fill: 'gray',
|
||||||
|
},
|
||||||
|
dragRight: {
|
||||||
|
'drag-right': {
|
||||||
|
fillOpacity: 0.6,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dragUp: {
|
||||||
|
'drag-up': {
|
||||||
|
fillOpacity: 0.6,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dragDown: {
|
||||||
|
'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 w = size[0];
|
||||||
|
const h = size[1];
|
||||||
|
const x0 = -w / 2;
|
||||||
|
const y0 = -h / 2;
|
||||||
|
const r = 2;
|
||||||
|
const shape = group.addShape('rect', {
|
||||||
|
attrs: {
|
||||||
|
x: x0,
|
||||||
|
y: y0,
|
||||||
|
width: w,
|
||||||
|
height: h,
|
||||||
|
stroke: color,
|
||||||
|
lineWidth: 2,
|
||||||
|
fill: 'white',
|
||||||
|
radius: r,
|
||||||
|
},
|
||||||
|
name: 'main-box',
|
||||||
|
draggable: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// name bg
|
||||||
|
group.addShape('rect', {
|
||||||
|
attrs: {
|
||||||
|
x: x0 + 1.5,
|
||||||
|
y: y0 + 1.5,
|
||||||
|
width: w - 3,
|
||||||
|
height: 16,
|
||||||
|
fill: color,
|
||||||
|
// radius: r,
|
||||||
|
},
|
||||||
|
name: 'name-bg',
|
||||||
|
draggable: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// id text
|
||||||
|
group.addShape('text', {
|
||||||
|
attrs: {
|
||||||
|
textBaseline: 'top',
|
||||||
|
x: x0 - 3,
|
||||||
|
y: -8,
|
||||||
|
fontSize: 20,
|
||||||
|
lineHeight: 20,
|
||||||
|
text: cfg.id,
|
||||||
|
textAlign: 'right',
|
||||||
|
fill: 'white',
|
||||||
|
stroke: 'black',
|
||||||
|
lineWidth: 2,
|
||||||
|
},
|
||||||
|
name: 'id-text',
|
||||||
|
});
|
||||||
|
|
||||||
|
// icon
|
||||||
|
var img = `./static/icons/${classify}.svg`;
|
||||||
|
group.addShape('image', {
|
||||||
|
attrs: {
|
||||||
|
x: x0 + 3,
|
||||||
|
y: y0 + 2,
|
||||||
|
height: 14,
|
||||||
|
width: 14,
|
||||||
|
img,
|
||||||
|
},
|
||||||
|
name: 'node-icon',
|
||||||
|
});
|
||||||
|
|
||||||
|
// name text
|
||||||
|
group.addShape('text', {
|
||||||
|
attrs: {
|
||||||
|
textBaseline: 'top',
|
||||||
|
x: x0 + 18,
|
||||||
|
y: y0 + 4,
|
||||||
|
fontWeight: 800,
|
||||||
|
lineHeight: 20,
|
||||||
|
text: cfg.name,
|
||||||
|
fill: 'black',
|
||||||
|
},
|
||||||
|
name: 'name-text',
|
||||||
|
});
|
||||||
|
|
||||||
|
var x = x0 + 2;
|
||||||
|
var y = y0 + 23;
|
||||||
|
// desc text
|
||||||
|
const desc = cfg.desc || nodeConf.desc;
|
||||||
|
if (desc) {
|
||||||
|
group.addShape('text', {
|
||||||
|
attrs: {
|
||||||
|
textBaseline: 'top',
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
lineHeight: 20,
|
||||||
|
fontWeight: 800,
|
||||||
|
text: `备注:${desc}`,
|
||||||
|
fill: 'black',
|
||||||
|
},
|
||||||
|
name: 'desc-text',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const args: any = cfg.args;
|
||||||
|
if (args && Object.keys(args).length > 0) {
|
||||||
|
y += 20;
|
||||||
|
group.addShape('text', {
|
||||||
|
attrs: {
|
||||||
|
textBaseline: 'top',
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
lineHeight: 20,
|
||||||
|
text: `参数:${JSON.stringify(args)}`,
|
||||||
|
fill: 'black',
|
||||||
|
},
|
||||||
|
name: 'args-text',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const input: [] = cfg.input ? cfg.input as [] : [];
|
||||||
|
if (input.length > 0) {
|
||||||
|
y += 20;
|
||||||
|
group.addShape('text', {
|
||||||
|
attrs: {
|
||||||
|
textBaseline: 'top',
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
lineHeight: 20,
|
||||||
|
text: `输入:${JSON.stringify(input)}`,
|
||||||
|
fill: 'black',
|
||||||
|
},
|
||||||
|
name: 'input-text',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const output: [] = cfg.output ? cfg.output as [] : [];
|
||||||
|
if (output.length > 0) {
|
||||||
|
y += 20;
|
||||||
|
group.addShape('text', {
|
||||||
|
attrs: {
|
||||||
|
textBaseline: 'top',
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
lineHeight: 20,
|
||||||
|
text: `输出:${JSON.stringify(output)}`,
|
||||||
|
fill: 'black',
|
||||||
|
},
|
||||||
|
name: 'output-text',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cfg.children) {
|
||||||
|
group.addShape('marker', {
|
||||||
|
attrs: {
|
||||||
|
x: w / 2,
|
||||||
|
y: 0,
|
||||||
|
r: 6,
|
||||||
|
cursor: 'pointer',
|
||||||
|
symbol: G6.Marker.collapse,
|
||||||
|
stroke: '#666',
|
||||||
|
lineWidth: 1,
|
||||||
|
fill: '#fff',
|
||||||
|
},
|
||||||
|
name: 'collapse-icon',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
group.addShape('rect', {
|
||||||
|
name: 'drag-up',
|
||||||
|
attrs: {
|
||||||
|
x: -w / 2,
|
||||||
|
y: -h / 2,
|
||||||
|
width: w,
|
||||||
|
height: h / 2,
|
||||||
|
fill: 'blue',
|
||||||
|
fillOpacity: 0,
|
||||||
|
},
|
||||||
|
draggable: true,
|
||||||
|
// visible: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
group.addShape('rect', {
|
||||||
|
name: 'drag-down',
|
||||||
|
attrs: {
|
||||||
|
x: -w / 2,
|
||||||
|
y: 0,
|
||||||
|
width: w,
|
||||||
|
height: h / 2,
|
||||||
|
fill: 'blue',
|
||||||
|
fillOpacity: 0,
|
||||||
|
},
|
||||||
|
draggable: true,
|
||||||
|
// visible: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
group.addShape('rect', {
|
||||||
|
name: 'drag-right',
|
||||||
|
attrs: {
|
||||||
|
x: w * 0.1,
|
||||||
|
y: -h / 2,
|
||||||
|
width: w * 0.4,
|
||||||
|
height: h,
|
||||||
|
fill: 'blue',
|
||||||
|
fillOpacity: 0,
|
||||||
|
},
|
||||||
|
draggable: true,
|
||||||
|
// visible: false,
|
||||||
|
});
|
||||||
|
return shape;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'single-node',
|
||||||
|
);
|
||||||
|
}
|
||||||
+2
-266
@@ -15,17 +15,11 @@ import G6 from '@antv/g6';
|
|||||||
import 'antd/dist/antd.dark.css';
|
import 'antd/dist/antd.dark.css';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
import { ModelConfig, Item } from "@antv/g6/lib/types";
|
import { ModelConfig, Item } from "@antv/g6/lib/types";
|
||||||
|
import RegisterNode from "./RegisterNode";
|
||||||
|
|
||||||
const { Header, Sider, Content, Footer } = Layout;
|
const { Header, Sider, Content, Footer } = Layout;
|
||||||
const { TabPane } = Tabs;
|
const { TabPane } = Tabs;
|
||||||
|
|
||||||
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)',
|
|
||||||
}
|
|
||||||
|
|
||||||
interface MainState {
|
interface MainState {
|
||||||
workspace: string;
|
workspace: string;
|
||||||
@@ -43,265 +37,7 @@ export default class Main extends Component {
|
|||||||
|
|
||||||
componentWillMount() {
|
componentWillMount() {
|
||||||
this.updateSettings();
|
this.updateSettings();
|
||||||
const settings = this.settings;
|
RegisterNode(this.settings);
|
||||||
G6.registerNode(
|
|
||||||
'TreeNode',
|
|
||||||
{
|
|
||||||
options: {
|
|
||||||
type: 'rect',
|
|
||||||
labelCfg: {
|
|
||||||
style: {
|
|
||||||
fill: 'blue',
|
|
||||||
fontSize: 10
|
|
||||||
}
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
fill: "white",
|
|
||||||
},
|
|
||||||
stateStyles: {
|
|
||||||
selected: {
|
|
||||||
'main-box': {
|
|
||||||
stroke: 'black',
|
|
||||||
lineWidth: 3,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
hover: {
|
|
||||||
stroke: 'white',
|
|
||||||
lineWidth: 3,
|
|
||||||
},
|
|
||||||
dragSrc: {
|
|
||||||
fill: 'gray',
|
|
||||||
},
|
|
||||||
dragRight: {
|
|
||||||
'drag-right': {
|
|
||||||
fillOpacity: 0.6,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dragUp: {
|
|
||||||
'drag-up': {
|
|
||||||
fillOpacity: 0.6,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dragDown: {
|
|
||||||
'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 w = size[0];
|
|
||||||
const h = size[1];
|
|
||||||
const x0 = -w / 2;
|
|
||||||
const y0 = -h / 2;
|
|
||||||
const r = 2;
|
|
||||||
const shape = group.addShape('rect', {
|
|
||||||
attrs: {
|
|
||||||
x: x0,
|
|
||||||
y: y0,
|
|
||||||
width: w,
|
|
||||||
height: h,
|
|
||||||
stroke: color,
|
|
||||||
lineWidth: 2,
|
|
||||||
fill: 'white',
|
|
||||||
radius: r,
|
|
||||||
},
|
|
||||||
name: 'main-box',
|
|
||||||
draggable: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
// name bg
|
|
||||||
group.addShape('rect', {
|
|
||||||
attrs: {
|
|
||||||
x: x0 + 1.5,
|
|
||||||
y: y0 + 1.5,
|
|
||||||
width: w - 3,
|
|
||||||
height: 16,
|
|
||||||
fill: color,
|
|
||||||
// radius: r,
|
|
||||||
},
|
|
||||||
name: 'name-bg',
|
|
||||||
draggable: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
// id text
|
|
||||||
group.addShape('text', {
|
|
||||||
attrs: {
|
|
||||||
textBaseline: 'top',
|
|
||||||
x: x0 - 3,
|
|
||||||
y: -8,
|
|
||||||
fontSize: 20,
|
|
||||||
lineHeight: 20,
|
|
||||||
text: cfg.id,
|
|
||||||
textAlign: 'right',
|
|
||||||
fill: 'white',
|
|
||||||
stroke: 'black',
|
|
||||||
lineWidth: 2,
|
|
||||||
},
|
|
||||||
name: 'id-text',
|
|
||||||
});
|
|
||||||
|
|
||||||
// icon
|
|
||||||
var img = `./static/icons/${classify}.svg`;
|
|
||||||
group.addShape('image', {
|
|
||||||
attrs: {
|
|
||||||
x: x0 + 3,
|
|
||||||
y: y0 + 2,
|
|
||||||
height: 14,
|
|
||||||
width: 14,
|
|
||||||
img,
|
|
||||||
},
|
|
||||||
name: 'node-icon',
|
|
||||||
});
|
|
||||||
|
|
||||||
// name text
|
|
||||||
group.addShape('text', {
|
|
||||||
attrs: {
|
|
||||||
textBaseline: 'top',
|
|
||||||
x: x0 + 18,
|
|
||||||
y: y0 + 4,
|
|
||||||
fontWeight: 800,
|
|
||||||
lineHeight: 20,
|
|
||||||
text: cfg.name,
|
|
||||||
fill: 'black',
|
|
||||||
},
|
|
||||||
name: 'name-text',
|
|
||||||
});
|
|
||||||
|
|
||||||
var x = x0 + 2;
|
|
||||||
var y = y0 + 23;
|
|
||||||
// desc text
|
|
||||||
const desc = cfg.desc || nodeConf.desc;
|
|
||||||
if (desc) {
|
|
||||||
group.addShape('text', {
|
|
||||||
attrs: {
|
|
||||||
textBaseline: 'top',
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
lineHeight: 20,
|
|
||||||
fontWeight: 800,
|
|
||||||
text: `备注:${desc}`,
|
|
||||||
fill: 'black',
|
|
||||||
},
|
|
||||||
name: 'desc-text',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const args: any = cfg.args;
|
|
||||||
if (args && Object.keys(args).length > 0) {
|
|
||||||
y += 20;
|
|
||||||
group.addShape('text', {
|
|
||||||
attrs: {
|
|
||||||
textBaseline: 'top',
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
lineHeight: 20,
|
|
||||||
text: `参数:${JSON.stringify(args)}`,
|
|
||||||
fill: 'black',
|
|
||||||
},
|
|
||||||
name: 'args-text',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const input: [] = cfg.input ? cfg.input as [] : [];
|
|
||||||
if (input.length > 0) {
|
|
||||||
y += 20;
|
|
||||||
group.addShape('text', {
|
|
||||||
attrs: {
|
|
||||||
textBaseline: 'top',
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
lineHeight: 20,
|
|
||||||
text: `输入:${JSON.stringify(input)}`,
|
|
||||||
fill: 'black',
|
|
||||||
},
|
|
||||||
name: 'input-text',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const output: [] = cfg.output ? cfg.output as [] : [];
|
|
||||||
if (output.length > 0) {
|
|
||||||
y += 20;
|
|
||||||
group.addShape('text', {
|
|
||||||
attrs: {
|
|
||||||
textBaseline: 'top',
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
lineHeight: 20,
|
|
||||||
text: `输出:${JSON.stringify(output)}`,
|
|
||||||
fill: 'black',
|
|
||||||
},
|
|
||||||
name: 'output-text',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (cfg.children) {
|
|
||||||
group.addShape('marker', {
|
|
||||||
attrs: {
|
|
||||||
x: w / 2,
|
|
||||||
y: 0,
|
|
||||||
r: 6,
|
|
||||||
cursor: 'pointer',
|
|
||||||
symbol: G6.Marker.collapse,
|
|
||||||
stroke: '#666',
|
|
||||||
lineWidth: 1,
|
|
||||||
fill: '#fff',
|
|
||||||
},
|
|
||||||
name: 'collapse-icon',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
group.addShape('rect', {
|
|
||||||
name: 'drag-up',
|
|
||||||
attrs: {
|
|
||||||
x: -w / 2,
|
|
||||||
y: -h / 2,
|
|
||||||
width: w,
|
|
||||||
height: h / 2,
|
|
||||||
fill: 'blue',
|
|
||||||
fillOpacity: 0,
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
// visible: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
group.addShape('rect', {
|
|
||||||
name: 'drag-down',
|
|
||||||
attrs: {
|
|
||||||
x: -w / 2,
|
|
||||||
y: 0,
|
|
||||||
width: w,
|
|
||||||
height: h / 2,
|
|
||||||
fill: 'blue',
|
|
||||||
fillOpacity: 0,
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
// visible: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
group.addShape('rect', {
|
|
||||||
name: 'drag-right',
|
|
||||||
attrs: {
|
|
||||||
x: w * 0.1,
|
|
||||||
y: -h / 2,
|
|
||||||
width: w * 0.4,
|
|
||||||
height: h,
|
|
||||||
fill: 'blue',
|
|
||||||
fillOpacity: 0,
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
// visible: false,
|
|
||||||
});
|
|
||||||
return shape;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'single-node',
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
|||||||
Reference in new issue
Block a user