修改外部指针id，增加自定义的三叉树
This commit is contained in:
parent
7e3378bb82
commit
62c7e91b97
@ -1,96 +1,100 @@
|
||||
/**
|
||||
* 三叉树
|
||||
*/
|
||||
SV.registerLayout('TriTree', {
|
||||
SV.registerLayout('TriTree', {
|
||||
defineOptions() {
|
||||
return {
|
||||
/**
|
||||
* 结点
|
||||
*/
|
||||
element: {
|
||||
node: {
|
||||
default: {
|
||||
type: 'tri-tree-node',
|
||||
size: [60, 30],
|
||||
label: '[data]',
|
||||
style: {
|
||||
fill: '#ff2e63',
|
||||
stroke: "#333",
|
||||
cursor: 'pointer'
|
||||
fill: '#95e1d3',
|
||||
stroke: '#333',
|
||||
cursor: 'pointer',
|
||||
backgroundFill: '#eee'
|
||||
},
|
||||
labelOptions: {
|
||||
style: { fontSize: 16 }
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 箭头
|
||||
*/
|
||||
link: {
|
||||
child: {
|
||||
type: 'line',
|
||||
child: {
|
||||
sourceAnchor: index => index,
|
||||
targetAnchor: 3,
|
||||
type: 'line',
|
||||
style: {
|
||||
stroke: '#333',
|
||||
//边的响应范围
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
//参数：半径、偏移量
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
parent: {
|
||||
type: 'line',
|
||||
r_parent: {
|
||||
type: 'quadratic',
|
||||
sourceAnchor: 4,
|
||||
targetAnchor: 2,
|
||||
targetAnchor: 5,
|
||||
curveOffset: -20,
|
||||
style: {
|
||||
stroke: '#A9A9A9',
|
||||
//边的响应范围
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
stroke: '#999',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
//参数：半径、偏移量
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
l_parent: {
|
||||
type: 'quadratic',
|
||||
sourceAnchor: 4,
|
||||
targetAnchor: 2,
|
||||
curveOffset: 20,
|
||||
style: {
|
||||
stroke: '#999',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 指针
|
||||
*/
|
||||
marker: {
|
||||
external: {
|
||||
type: "pointer",
|
||||
type: 'pointer',
|
||||
anchor: 3,
|
||||
offset: 14,
|
||||
labelOffset: 2,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
},
|
||||
labelOptions: {
|
||||
style: {
|
||||
// stroke:
|
||||
fontSize: 15,
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 布局
|
||||
*/
|
||||
addressLabel: {
|
||||
style: {
|
||||
fill: '#999'
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 40,
|
||||
yInterval: 40,
|
||||
},
|
||||
/**
|
||||
* 动画
|
||||
*/
|
||||
//animation: {
|
||||
// enable: true,
|
||||
// duration: 750,
|
||||
// timingFunction: 'easePolyOut'
|
||||
//}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
@ -99,44 +103,44 @@
|
||||
*/
|
||||
layoutItem(node, parent, index, layoutOptions) {
|
||||
// 次双亲不进行布局
|
||||
if(!node) {
|
||||
if (!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
let bound = node.getBound(), //获取包围盒
|
||||
width = bound.width,
|
||||
height = bound.height,
|
||||
group = new Group(node); //创建分组
|
||||
|
||||
|
||||
//有双亲，设置结点的位置
|
||||
if(parent) {
|
||||
if (parent) {
|
||||
// 纵坐标
|
||||
node.set('y', parent.get('y') + layoutOptions.yInterval + height);
|
||||
// 左节点横坐标
|
||||
if(index === 0) {
|
||||
if (index === 0) {
|
||||
node.set('x', parent.get('x') - layoutOptions.xInterval / 2 - width / 2);
|
||||
}
|
||||
// 右结点横坐标
|
||||
if(index === 1) {
|
||||
if (index === 1) {
|
||||
node.set('x', parent.get('x') + layoutOptions.xInterval / 2 + width / 2);
|
||||
}
|
||||
}
|
||||
//有孩子
|
||||
if(node.child && (node.child[0] || node.child[1])) {
|
||||
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) {
|
||||
if (leftGroup && rightChild) {
|
||||
//求出包围盒相交部分
|
||||
intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound());
|
||||
move = 0;
|
||||
//处理
|
||||
if(intersection && intersection.width > 0) {
|
||||
if (intersection && intersection.width > 0) {
|
||||
move = (intersection.width + layoutOptions.xInterval) / 2;
|
||||
// console.log(move,intersection.width,layoutOptions.xInterval);
|
||||
leftGroup.translate(-move, 0);
|
||||
@ -145,17 +149,17 @@
|
||||
}
|
||||
|
||||
//加入分组
|
||||
if(leftGroup) {
|
||||
if (leftGroup) {
|
||||
group.add(leftGroup);
|
||||
}
|
||||
if(rightGroup) {
|
||||
if (rightGroup) {
|
||||
group.add(rightGroup)
|
||||
}
|
||||
|
||||
}
|
||||
//返回分组
|
||||
return group;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 布局函数
|
||||
|
||||
149
demo/data.js
149
demo/data.js
@ -1,16 +1,19 @@
|
||||
const SOURCES_DATA = [{
|
||||
"BinaryTree0": {
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T1"
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0x617ee0",
|
||||
"0x617f10"
|
||||
"0xb07ee0",
|
||||
"0xb07f10"
|
||||
],
|
||||
"id": "0x617eb0",
|
||||
"name": "T1",
|
||||
"data": "Z",
|
||||
"id": "0xb07eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
@ -19,19 +22,57 @@ const SOURCES_DATA = [{
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617ee0",
|
||||
"name": "T1->lchild",
|
||||
"data": "D",
|
||||
"type": "default"
|
||||
"id": "0xb07ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0x0"
|
||||
],
|
||||
"external": [
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x617f70",
|
||||
"0x617f40"
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617f10",
|
||||
"name": "T1->rchild",
|
||||
"id": "0xb07f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0x0"
|
||||
],
|
||||
"external": [
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": false,
|
||||
"isFirstDebug": false
|
||||
}
|
||||
}, {
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0xb07ee0",
|
||||
"0xb07f10"
|
||||
],
|
||||
"id": "0xb07eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
@ -39,39 +80,93 @@ const SOURCES_DATA = [{
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617f70",
|
||||
"name": "(T1->rchild)->lchild",
|
||||
"id": "0xb07ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0xb07eb0"
|
||||
],
|
||||
"external": [
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xb07f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0x0"
|
||||
],
|
||||
"external": [
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": false,
|
||||
"isFirstDebug": false
|
||||
}
|
||||
}, {
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0xb07ee0",
|
||||
"0xb07f10"
|
||||
],
|
||||
"id": "0xb07eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x617fa0"
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617f40",
|
||||
"name": "(T1->rchild)->rchild",
|
||||
"id": "0xb07ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0xb07eb0"
|
||||
],
|
||||
"external": [
|
||||
"t"
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x617f40"
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617fa0",
|
||||
"name": "((T1->rchild)->rchild)->rchild",
|
||||
"data": "E",
|
||||
"id": "0xb07f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0xb07eb0"
|
||||
],
|
||||
"external": [
|
||||
"r"
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "BinaryTree"
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": false,
|
||||
|
||||
261
demo/demo.html
261
demo/demo.html
@ -1,151 +1,154 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DEMO</title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
}
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DEMO</title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.down {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#leak {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
top: 100px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
border-top: 1px dashed #000;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.75s ease-in-out;
|
||||
}
|
||||
|
||||
#leak>span {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
.down {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
<body>
|
||||
<div class="container" id="container">
|
||||
<div id="leak">
|
||||
<span>泄漏区</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
<button id="btn-prev">prev</button>
|
||||
<button id="btn-next">next</button>
|
||||
<button id="resize">resize</button>
|
||||
<button id="relayout">relayout</button>
|
||||
<button id="switch-mode">switch mode</button>
|
||||
<button id="brush-select">brush-select</button>
|
||||
<span id="pos"></span>
|
||||
|
||||
#leak {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
top: 100px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
border-top: 1px dashed #000;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.75s ease-in-out;
|
||||
}
|
||||
<script src="./../dist/sv.js"></script>
|
||||
<script>
|
||||
const Group = SV.Group,
|
||||
Bound = SV.Bound,
|
||||
G6 = SV.G6,
|
||||
Vector = SV.Vector;
|
||||
</script>
|
||||
<script src="./Layouter/LinkList.js"></script>
|
||||
<script src="./Layouter/BinaryTree.js"></script>
|
||||
<script src="./Layouter/TriTree.js"></script>
|
||||
<script src="./Layouter/Stack.js"></script>
|
||||
<script src="./Layouter/LinkQueue.js"></script>
|
||||
<script src="./Layouter/GeneralizedList.js"></script>
|
||||
<script src="./Layouter/ChainHashTable.js"></script>
|
||||
<script src="./Layouter/Array.js"></script>
|
||||
<script src="./Layouter/HashTable.js"></script>
|
||||
<script src="./Layouter/LinkStack.js"></script>
|
||||
<script src="./Layouter/AdjoinMatrixGraph.js"></script>
|
||||
<script src="./Layouter/AdjoinTableGraph.js"></script>
|
||||
<script src="./Layouter/SqQueue.js"></script>
|
||||
<script src="./Layouter/PTree.js"></script>
|
||||
<script src="./Layouter/PCTree.js"></script>
|
||||
<script src="./data.js"></script>
|
||||
|
||||
#leak > span {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<script>
|
||||
let cur = SV(document.getElementById('container'), {
|
||||
view: {
|
||||
leakAreaHeight: 130,
|
||||
groupPadding: 40,
|
||||
},
|
||||
});
|
||||
|
||||
<body>
|
||||
<div class="container" id="container">
|
||||
<div id="leak">
|
||||
<span>泄漏区</span>
|
||||
</div>
|
||||
</div>
|
||||
let dataIndex = 0,
|
||||
curData = SOURCES_DATA[dataIndex];
|
||||
|
||||
<button id="btn-prev">prev</button>
|
||||
<button id="btn-next">next</button>
|
||||
<button id="resize">resize</button>
|
||||
<button id="relayout">relayout</button>
|
||||
<button id="switch-mode">switch mode</button>
|
||||
<button id="brush-select">brush-select</button>
|
||||
<span id="pos"></span>
|
||||
let enableBrushSelect = false;
|
||||
|
||||
<script src="./../dist/sv.js"></script>
|
||||
<script>
|
||||
const Group = SV.Group,
|
||||
Bound = SV.Bound,
|
||||
G6 = SV.G6,
|
||||
Vector = SV.Vector;
|
||||
</script>
|
||||
<script src="./Layouter/LinkList.js"></script>
|
||||
<script src="./Layouter/BinaryTree.js"></script>
|
||||
<script src="./Layouter/Stack.js"></script>
|
||||
<script src="./Layouter/LinkQueue.js"></script>
|
||||
<script src="./Layouter/GeneralizedList.js"></script>
|
||||
<script src="./Layouter/ChainHashTable.js"></script>
|
||||
<script src="./Layouter/Array.js"></script>
|
||||
<script src="./Layouter/HashTable.js"></script>
|
||||
<script src="./Layouter/LinkStack.js"></script>
|
||||
<script src="./Layouter/AdjoinMatrixGraph.js"></script>
|
||||
<script src="./Layouter/AdjoinTableGraph.js"></script>
|
||||
<script src="./Layouter/SqQueue.js"></script>
|
||||
<script src="./Layouter/PTree.js"></script>
|
||||
<script src="./Layouter/PCTree.js"></script>
|
||||
<script src="./data.js"></script>
|
||||
const container = document.getElementById('container'),
|
||||
pos = document.getElementById('pos');
|
||||
|
||||
<script>
|
||||
let cur = SV(document.getElementById('container'), {
|
||||
view: {
|
||||
leakAreaHeight: 130,
|
||||
groupPadding: 40,
|
||||
},
|
||||
});
|
||||
const leak = document.getElementById('leak');
|
||||
|
||||
let dataIndex = 0,
|
||||
curData = SOURCES_DATA[dataIndex];
|
||||
cur.render(curData);
|
||||
|
||||
let enableBrushSelect = false;
|
||||
document.getElementById('btn-next').addEventListener('click', e => {
|
||||
curData = SOURCES_DATA[++dataIndex];
|
||||
cur.render(curData);
|
||||
});
|
||||
|
||||
const container = document.getElementById('container'),
|
||||
pos = document.getElementById('pos');
|
||||
document.getElementById('btn-prev').addEventListener('click', e => {
|
||||
curData = SOURCES_DATA[--dataIndex];
|
||||
cur.render(curData);
|
||||
});
|
||||
|
||||
const leak = document.getElementById('leak');
|
||||
document.getElementById('resize').addEventListener('click', e => {
|
||||
container.style.height = 800 + 'px';
|
||||
cur.resize(container.offsetWidth, container.offsetHeight);
|
||||
});
|
||||
|
||||
cur.render(curData);
|
||||
document.getElementById('relayout').addEventListener('click', e => {
|
||||
cur.reLayout();
|
||||
});
|
||||
|
||||
document.getElementById('btn-next').addEventListener('click', e => {
|
||||
curData = SOURCES_DATA[++dataIndex];
|
||||
cur.render(curData);
|
||||
});
|
||||
document.getElementById('switch-mode').addEventListener('click', e => {
|
||||
cur.updateStyle('Array', newArrayOption);
|
||||
});
|
||||
|
||||
document.getElementById('btn-prev').addEventListener('click', e => {
|
||||
curData = SOURCES_DATA[--dataIndex];
|
||||
cur.render(curData);
|
||||
});
|
||||
document.getElementById('brush-select').addEventListener('click', e => {
|
||||
enableBrushSelect = !enableBrushSelect;
|
||||
cur.switchBrushSelect(enableBrushSelect);
|
||||
});
|
||||
|
||||
document.getElementById('resize').addEventListener('click', e => {
|
||||
container.style.height = 800 + 'px';
|
||||
cur.resize(container.offsetWidth, container.offsetHeight);
|
||||
});
|
||||
cur.on('onLeakAreaUpdate', payload => {
|
||||
leak.style.opacity = payload.hasLeak ? 1 : 0;
|
||||
leak.style.top = payload.leakAreaY - 40 + 'px';
|
||||
});
|
||||
|
||||
document.getElementById('relayout').addEventListener('click', e => {
|
||||
cur.reLayout();
|
||||
});
|
||||
// -------------------------------------------------------------------------------------------------------
|
||||
|
||||
document.getElementById('switch-mode').addEventListener('click', e => {
|
||||
cur.updateStyle('Array', newArrayOption);
|
||||
});
|
||||
container.addEventListener('mousemove', e => {
|
||||
let x = e.offsetX,
|
||||
y = e.offsetY;
|
||||
pos.innerHTML = `${x},${y}`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
document.getElementById('brush-select').addEventListener('click', e => {
|
||||
enableBrushSelect = !enableBrushSelect;
|
||||
cur.switchBrushSelect(enableBrushSelect);
|
||||
});
|
||||
|
||||
cur.on('onLeakAreaUpdate', payload => {
|
||||
leak.style.opacity = payload.hasLeak ? 1 : 0;
|
||||
leak.style.top = payload.leakAreaY - 40 + 'px';
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------------------------------------
|
||||
|
||||
container.addEventListener('mousemove', e => {
|
||||
let x = e.offsetX,
|
||||
y = e.offsetY;
|
||||
pos.innerHTML = `${x},${y}`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@ -48,6 +48,7 @@ export class ModelConstructor {
|
||||
public construct(sources: Sources): LayoutGroupTable {
|
||||
const layoutGroupTable = new Map<string, LayoutGroup>(),
|
||||
layoutMap: { [key: string]: LayoutCreator } = SV.registeredLayout;
|
||||
|
||||
|
||||
Object.keys(sources).forEach(group => {
|
||||
let sourceGroup = sources[group],
|
||||
@ -301,7 +302,8 @@ export class ModelConstructor {
|
||||
// 若没有指针字段的结点则跳过
|
||||
if (!markerData) continue;
|
||||
|
||||
let id = `${group}[${name}(${Array.isArray(markerData) ? markerData.join('-') : markerData})]`,
|
||||
let id = `[${name}(${Array.isArray(markerData) ? markerData.join('-') : markerData})]`,
|
||||
|
||||
marker = new SVMarker(id, name, group, layout, markerData, node, markerOptions[name]);
|
||||
|
||||
markerList.push(marker);
|
||||
@ -349,6 +351,7 @@ export class ModelConstructor {
|
||||
): SVNode {
|
||||
let label: string | string[] = this.resolveNodeLabel(options.label, sourceNode),
|
||||
id = `${sourceNodeType}(${sourceNode.id.toString()})`,
|
||||
|
||||
node = new SVNode(id, sourceNodeType, group, layout, sourceNode, label, options);
|
||||
|
||||
if (node.freed) {
|
||||
|
||||
146
src/RegisteredShape/triTreeNode.ts
Normal file
146
src/RegisteredShape/triTreeNode.ts
Normal file
@ -0,0 +1,146 @@
|
||||
import { Util } from '../Common/util';
|
||||
|
||||
export default Util.registerShape(
|
||||
'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
|
||||
});
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
if (cfg.label) {
|
||||
|
||||
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
|
||||
});
|
||||
}
|
||||
const isLeftEmpty =
|
||||
!cfg.child || cfg.child[0] === undefined || cfg.child[0] === undefined || cfg.child[0] == '0x0',
|
||||
isRightEmpty =
|
||||
!cfg.child || cfg.child[1] === undefined || cfg.child[1] === undefined || cfg.child[1] == '0x0',
|
||||
isparentEmpty = cfg.parent == "0x0" || cfg.l_parent == "0x0" || cfg.r_parent == "0x0";
|
||||
|
||||
|
||||
if (isparentEmpty) {
|
||||
{
|
||||
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
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//节点没有左孩子节点时
|
||||
if (isLeftEmpty) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (5 / 8),
|
||||
y: height * (8 / 7),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: style.fill || '#000',
|
||||
fontSize: 16,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
//节点没有右孩子节点时
|
||||
if (isRightEmpty) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (11 / 8),
|
||||
y: height * (8 / 7),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: style.fill || '#000',
|
||||
fontSize: 16,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
return wrapperRect;
|
||||
},
|
||||
|
||||
getAnchorPoints() {
|
||||
return [
|
||||
[0.125, 0.5],
|
||||
[0.875, 0.5],
|
||||
[0.4, 1],
|
||||
[0.5, 0],
|
||||
[0.5, 0.125],
|
||||
[0.6, 1],
|
||||
];
|
||||
},
|
||||
}
|
||||
);
|
||||
@ -13,6 +13,7 @@ import G6 from '@antv/g6';
|
||||
import Pointer from "./RegisteredShape/pointer";
|
||||
import LinkListNode from "./RegisteredShape/linkListNode";
|
||||
import BinaryTreeNode from "./RegisteredShape/binaryTreeNode";
|
||||
import TriTreeNode from "./RegisteredShape/triTreeNode";
|
||||
import CLenQueuePointer from "./RegisteredShape/clenQueuePointer";
|
||||
import TwoCellNode from "./RegisteredShape/twoCellNode";
|
||||
import ThreeCellNode from "./RegisteredShape/threeCellNode";
|
||||
@ -65,6 +66,7 @@ SV.registeredShape = [
|
||||
Pointer,
|
||||
LinkListNode,
|
||||
BinaryTreeNode,
|
||||
TriTreeNode,
|
||||
TwoCellNode,
|
||||
ThreeCellNode,
|
||||
Cursor,
|
||||
@ -92,5 +94,6 @@ SV.registerLayout = function(name: string, layoutCreator: LayoutCreator) {
|
||||
}
|
||||
|
||||
SV.registeredLayout[name] = layoutCreator;
|
||||
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user