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
+275
-277
@@ -1,277 +1,275 @@
|
||||
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) {
|
||||
const collapseStyle: any = {
|
||||
'collapse-icon': {
|
||||
// symbol: G6.Marker.expand,
|
||||
fill: 'blue',
|
||||
}
|
||||
};
|
||||
G6.registerNode(
|
||||
'TreeNode',
|
||||
{
|
||||
options: {
|
||||
type: 'rect',
|
||||
labelCfg: {
|
||||
style: {
|
||||
fill: 'blue',
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
style: {
|
||||
fill: "white",
|
||||
},
|
||||
stateStyles: {
|
||||
selected: {
|
||||
'main-box': {
|
||||
stroke: 'yellow',
|
||||
lineWidth: 5,
|
||||
},
|
||||
},
|
||||
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 (nodeConf.args && 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 (nodeConf.input && 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 (nodeConf.output && 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 (Array.isArray(cfg.children) && cfg.children.length > 0) {
|
||||
group.addShape('marker', {
|
||||
attrs: {
|
||||
x: w / 2,
|
||||
y: 0,
|
||||
r: 6,
|
||||
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',
|
||||
);
|
||||
}
|
||||
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) {
|
||||
const collapseStyle: any = {
|
||||
"collapse-icon": {
|
||||
// symbol: G6.Marker.expand,
|
||||
fill: "blue",
|
||||
},
|
||||
};
|
||||
G6.registerNode(
|
||||
"TreeNode",
|
||||
{
|
||||
options: {
|
||||
type: "rect",
|
||||
labelCfg: {
|
||||
style: {
|
||||
fill: "blue",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
style: {
|
||||
fill: "white",
|
||||
},
|
||||
stateStyles: {
|
||||
selected: {
|
||||
"main-box": {
|
||||
stroke: "yellow",
|
||||
lineWidth: 5,
|
||||
},
|
||||
},
|
||||
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 (nodeConf.args && 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 (nodeConf.input && 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 (nodeConf.output && 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 (Array.isArray(cfg.children) && cfg.children.length > 0) {
|
||||
group.addShape("marker", {
|
||||
attrs: {
|
||||
x: w / 2,
|
||||
y: 0,
|
||||
r: 6,
|
||||
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"
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user