添加三叉树
This commit is contained in:
parent
80e761a57e
commit
7980dc7b50
169
demoV2/Layouter/TriTree.js
Normal file
169
demoV2/Layouter/TriTree.js
Normal file
@ -0,0 +1,169 @@
|
||||
/**
|
||||
* 三叉树
|
||||
*/
|
||||
SV.registerLayouter('TriTree', {
|
||||
defineOptions() {
|
||||
return {
|
||||
/**
|
||||
* 结点
|
||||
*/
|
||||
element: {
|
||||
default: {
|
||||
type: 'tri-tree-node',
|
||||
size: [60, 30],
|
||||
label: '[data]',
|
||||
style: {
|
||||
fill: '#ff2e63',
|
||||
stroke: "#333",
|
||||
cursor: 'pointer'
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 箭头
|
||||
*/
|
||||
link: {
|
||||
child: {
|
||||
type: 'line',
|
||||
sourceAnchor: index => index,
|
||||
targetAnchor: 3,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
//边的响应范围
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
//参数：半径、偏移量
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
parent: {
|
||||
type: 'line',
|
||||
sourceAnchor: 4,
|
||||
targetAnchor: 2,
|
||||
style: {
|
||||
stroke: '#A9A9A9',
|
||||
//边的响应范围
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
//参数：半径、偏移量
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 指针
|
||||
*/
|
||||
marker: {
|
||||
external: {
|
||||
type: "pointer",
|
||||
anchor: 3,
|
||||
offset: 14,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
},
|
||||
labelOptions: {
|
||||
style: {
|
||||
// stroke:
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 布局
|
||||
*/
|
||||
layout: {
|
||||
xInterval: 40,
|
||||
yInterval: 40,
|
||||
},
|
||||
/**
|
||||
* 动画
|
||||
*/
|
||||
//animation: {
|
||||
// enable: true,
|
||||
// duration: 750,
|
||||
// timingFunction: 'easePolyOut'
|
||||
//}
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
*/
|
||||
layoutItem(node, parent, index, layoutOptions) {
|
||||
// 次双亲不进行布局
|
||||
if(!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let bound = node.getBound(), //获取包围盒
|
||||
width = bound.width,
|
||||
height = bound.height,
|
||||
group = new Group(node); //创建分组
|
||||
|
||||
//有双亲，设置结点的位置
|
||||
if(parent) {
|
||||
// 纵坐标
|
||||
node.set('y', parent.get('y') + layoutOptions.yInterval + height);
|
||||
// 左节点横坐标
|
||||
if(index === 0) {
|
||||
node.set('x', parent.get('x') - layoutOptions.xInterval / 2 - width / 2);
|
||||
}
|
||||
// 右结点横坐标
|
||||
if(index === 1) {
|
||||
node.set('x', parent.get('x') + layoutOptions.xInterval / 2 + width / 2);
|
||||
}
|
||||
}
|
||||
//有孩子
|
||||
if(node.child && (node.child[0] || node.child[1])) {
|
||||
let leftChild = node.child[0],
|
||||
rightChild = node.child[1],
|
||||
leftGroup = this.layoutItem(leftChild, node, 0, layoutOptions),
|
||||
rightGroup = this.layoutItem(rightChild, node, 1, layoutOptions),
|
||||
intersection = null,
|
||||
move = 0;
|
||||
|
||||
// 处理左子树中子树相交问题
|
||||
if(leftGroup && rightChild) {
|
||||
//求出包围盒相交部分
|
||||
intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound());
|
||||
move = 0;
|
||||
//处理
|
||||
if(intersection && intersection.width > 0) {
|
||||
move = (intersection.width + layoutOptions.xInterval) / 2;
|
||||
// console.log(move,intersection.width,layoutOptions.xInterval);
|
||||
leftGroup.translate(-move, 0);
|
||||
rightGroup.translate(move, 0);
|
||||
}
|
||||
}
|
||||
|
||||
//加入分组
|
||||
if(leftGroup) {
|
||||
group.add(leftGroup);
|
||||
}
|
||||
if(rightGroup) {
|
||||
group.add(rightGroup)
|
||||
}
|
||||
|
||||
}
|
||||
//返回分组
|
||||
return group;
|
||||
},
|
||||
|
||||
/**
|
||||
* 布局函数
|
||||
* @param {*} elements
|
||||
* @param {*} layoutOptions
|
||||
*/
|
||||
layout(elements, layoutOptions) {
|
||||
let root = elements[0];
|
||||
this.layoutItem(root, null, -1, layoutOptions);
|
||||
}
|
||||
});
|
||||
100
src/RegisteredShape/triTreeNode.ts
Normal file
100
src/RegisteredShape/triTreeNode.ts
Normal file
@ -0,0 +1,100 @@
|
||||
import * as G6 from "./../Lib/g6.js";
|
||||
|
||||
|
||||
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]
|
||||
];
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user