StructV2/src/RegisteredShape/triTreeNode.ts
2021-12-01 13:44:36 +00:00

100 lines
2.8 KiB
TypeScript

import G6 from '@antv/g6';
export default G6.registerNode('tri-tree-node', {
draw(cfg, group) {
cfg.size = cfg.size;
const width = cfg.size[0],
height = cfg.size[1];
const wrapperRect = group.addShape('rect', {
attrs: {
x: width / 2,
y: height / 2,
width: width,
height: height,
stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor,
fill: '#eee'
},
name: 'wrapper'
});
group.addShape('rect', {
attrs: {
x: width / 4 + width / 2,
y: height / 2,
width: width / 2,
height: height / 4,
fill: '#eee',
stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor
},
name: 'top',
draggable: true
});
group.addShape('rect', {
attrs: {
x: width / 4 + width / 2,
y: height / 2 + height / 4,
width: width / 2,
height: height / 4 * 3,
fill: cfg.color || cfg.style.fill,
stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor
},
name: 'bottom',
draggable: true
});
if (cfg.label) {
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
group.addShape('text', {
attrs: {
x: width, // 居中
y: height + height / 8,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label,
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor
},
name: 'text',
draggable: true
});
}
if (cfg.root) {
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
group.addShape('text', {
attrs: {
x: width, // 居中
y: height / 4 * 3,
textAlign: 'center',
textBaseline: 'middle',
text: "^",
fill: style.fill || '#000',
fontSize: style.fontSize || 14,
cursor: cfg.style.cursor
},
name: 'parent',
draggable: true
});
}
return wrapperRect;
},
getAnchorPoints() {
return [
[0.125, 0.5],
[0.875, 0.5],
[0.5, 1],
[0.5, 0],
[0.5, 0.125]
];
},
});