chenxiaopei/StructV2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: bug 修复

Browse Source
This commit is contained in:
黎智洲
2022-03-01 01:32:28 +08:00
parent 97749ec35e
commit 2a09ca6be1
9 changed files with 1090 additions and 1140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demoV2/Layouter/BinaryTree.js
+132 -136
View File
@@ -1,149 +1,145 @@
SV.registerLayout('BinaryTree', {
defineOptions() {
return {
element: {
default: {
type: 'binary-tree-node',
size: [60, 30],
label: '[data]',
style: {
fill: '#b83b5e',
stroke: "#333",
cursor: 'pointer'
}
}
},
link: {
child: {
type: 'line',
sourceAnchor: index => index === 0 ? 3 : 1,
targetAnchor: 0,
style: {
stroke: '#333',
lineAppendWidth: 6,
cursor: 'pointer',
endArrow: 'default',
startArrow: {
path: G6.Arrow.circle(2, -1),
fill: '#333'
}
}
}
},
marker: {
external: {
type: 'pointer',
anchor: 0,
offset: 14,
style: {
fill: '#f08a5d'
},
labelOptions: {
style: {
fill: '#000099'
}
}
}
},
layout: {
xInterval: 40,
yInterval: 40
},
behavior: {
// dragNode: false
}
};
},
defineOptions() {
return {
element: {
default: {
type: 'binary-tree-node',
size: [60, 30],
label: '[data]',
style: {
fill: '#b83b5e',
stroke: '#333',
cursor: 'pointer',
},
},
},
link: {
child: {
type: 'line',
sourceAnchor: index => (index === 0 ? 3 : 1),
targetAnchor: 0,
style: {
stroke: '#333',
lineAppendWidth: 6,
cursor: 'pointer',
endArrow: 'default',
startArrow: {
path: G6.Arrow.circle(2, -1),
fill: '#333',
},
},
},
},
marker: {
external: {
type: 'pointer',
anchor: 0,
offset: 14,
style: {
fill: '#f08a5d',
},
labelOptions: {
style: {
fill: '#000099',
},
},
},
},
layout: {
xInterval: 40,
yInterval: 40,
},
behavior: {
// dragNode: false
},
};
},
/**
* 对子树进行递归布局
*/
layoutItem(node, parent, index, layoutOptions) {
// 次双亲不进行布局
if (!node) {
return null;
/**
* 对子树进行递归布局
*/
layoutItem(node, parent, index, layoutOptions) {
// 次双亲不进行布局
if (!node) {
return null;
}
let bound = node.getBound(),
width = bound.width,
height = bound.height,
group = new Group(node),
leftGroup = null,
rightGroup = null;
if (node.visited) {
return null;
}
if (node.child && node.child[0]) {
leftGroup = this.layoutItem(node.child[0], node, 0, layoutOptions);
}
if (node.child && node.child[1]) {
rightGroup = this.layoutItem(node.child[1], node, 1, layoutOptions);
}
// 处理左右子树相交问题
if (leftGroup && rightGroup) {
let intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound()),
move = 0;
if (intersection && intersection.width > 0) {
move = (intersection.width + layoutOptions.xInterval) / 2;
leftGroup.translate(-move, 0);
rightGroup.translate(move, 0);
}
}
if (leftGroup) {
let leftBound = leftGroup.getBound();
node.set('y', leftBound.y - layoutOptions.yInterval - height);
node.set('x', leftBound.x + leftBound.width + layoutOptions.xInterval / 2 - width);
}
let bound = node.getBound(),
width = bound.width,
height = bound.height,
group = new Group(node);
if(rightGroup) {
let rightBound = rightGroup.getBound();
if (node.visited) {
return;
node.set('y', rightBound.y - layoutOptions.yInterval - height);
node.set('x', rightBound.x - layoutOptions.xInterval / 2 - width);
}
node.visited = true;
if (parent) {
node.set('y', parent.get('y') + layoutOptions.yInterval + height);
if (leftGroup) {
group.add(leftGroup);
}
// 左节点
if (index === 0) {
node.set('x', parent.get('x') - layoutOptions.xInterval / 2 - width / 2);
}
if (rightGroup) {
group.add(rightGroup);
}
// 右结点
if (index === 1) {
node.set('x', parent.get('x') + layoutOptions.xInterval / 2 + width / 2);
}
}
return group;
},
node.visited = true;
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 && rightGroup) {
intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound());
move = 0;
if (intersection && intersection.width > 0) {
move = (intersection.width + layoutOptions.xInterval) / 2;
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);
}
/**
* 布局函数
* @param {*} elements
* @param {*} layoutOptions
*/
layout(elements, layoutOptions) {
let root = elements[0];
this.layoutItem(root, null, -1, layoutOptions);
},
});
[{
"id": 6385328,
"data": "",
"external": [
"L"
],
"root": true,
"after": null,
"next": null
}]
[
{
id: 6385328,
data: '',
external: ['L'],
root: true,
after: null,
next: null,
},
];
demoV2/demo2.html
+227 -268
View File
@@ -1,291 +1,250 @@
<!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;
}
<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>
.container {
background-color: #fafafa;
border: 1px solid #ccc;
position: relative;
}
<body>
<div class="container" id="container">
<div id="leak">
<span>泄漏区</span>
</div>
</div>
.down {
display: flex;
margin-top: 20px;
}
<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>
#container {
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
}
<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>
#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>
let cur = SV(document.getElementById('container'), {
view: {
leakAreaHeight: 130,
groupPadding: 40,
},
});
#leak > span {
color: #000;
}
</style>
</head>
let data = [{
"BinaryTree0": {
"data": [{
"external": [
"T"
],
"child": [
"0x616060",
"0x615f40"
],
"id": "0x615f10",
"name": "T",
"data": "F",
"root": true,
"type": "default"
}, {
"child": [
"0x0",
"0x616090"
],
"id": "0x616060",
"name": "T->lchild",
"data": "A",
"type": "default"
}, {
"child": [
"0x6160c0",
"0x0"
],
"id": "0x616090",
"name": "(T->lchild)->rchild",
"data": "E",
"type": "default"
}, {
"child": [
"0x0",
"0x0"
],
"id": "0x6160c0",
"name": "((T->lchild)->rchild)->lchild",
"data": "D",
"type": "default"
}, {
"child": [
"0x615f70",
"0x615fd0"
],
"id": "0x615f40",
"name": "T->rchild",
"data": "U",
"type": "default"
}, {
"child": [
"0x615fa0",
"0x616000"
],
"id": "0x615f70",
"name": "(T->rchild)->lchild",
"data": "S",
"type": "default"
}, {
"child": [
"0x0",
"0x0"
],
"id": "0x615fa0",
"name": "((T->rchild)->lchild)->lchild",
"data": "R",
"type": "default"
}, {
"child": [
"0x0",
"0x0"
],
"id": "0x616000",
"name": "((T->rchild)->lchild)->rchild",
"data": "T",
"type": "default"
}, {
"child": [
"0x0",
"0x616030"
],
"id": "0x615fd0",
"name": "(T->rchild)->rchild",
"data": "V",
"type": "default"
}, {
"child": [
"0x0",
"0x0"
],
"id": "0x616030",
"name": "((T->rchild)->rchild)->rchild",
"data": "X",
"type": "default"
}],
"layouter": "BinaryTree"
},
"isEnterFunction": true
}, {
"BinaryTree0": {
"data": [{
"external": [
"T"
],
"child": [
"0x0",
"0x616090"
],
"id": "0x616060",
"name": "T",
"data": "A",
"root": true,
"type": "default"
}, {
"child": [
"0x6160c0",
"0x0"
],
"id": "0x616090",
"name": "T->rchild",
"data": "E",
"type": "default"
}, {
"child": [
"0x0",
"0x0"
],
"id": "0x6160c0",
"name": "(T->rchild)->lchild",
"data": "D",
"type": "default"
}],
"layouter": "BinaryTree"
},
"isEnterFunction": true
}];
<body>
<div class="container" id="container">
<div id="leak">
<span>泄漏区</span>
</div>
</div>
let dataIndex = 0,
curData = 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>
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 data = [
{
BinaryTree0: {
data: [
{
external: ['T', 'p'],
child: ['0x615f40', '0x0'],
id: '0x615f10',
name: 'T',
data: 'W',
root: true,
type: 'default',
},
{
child: ['0x615f70', '0x615fa0'],
id: '0x615f40',
name: 'T->lchild',
data: 'Q',
type: 'default',
},
{
child: ['0x0', '0x615fd0'],
id: '0x615f70',
name: '(T->lchild)->lchild',
data: 'A',
type: 'default',
},
{
child: ['0x0', '0x0'],
id: '0x615fd0',
name: '((T->lchild)->lchild)->rchild',
data: 'D',
type: 'default',
},
{
child: ['0x616000', '0x616030'],
id: '0x615fa0',
name: '(T->lchild)->rchild',
data: 'U',
type: 'default',
},
{
child: ['0x0', '0x0'],
id: '0x616000',
name: '((T->lchild)->rchild)->lchild',
data: 'S',
type: 'default',
},
{
child: ['0x0', '0x0'],
id: '0x616030',
name: '((T->lchild)->rchild)->rchild',
data: 'V',
type: 'default',
},
],
layouter: 'BinaryTree',
},
isEnterFunction: false,
},
{
BinaryTree0: {
data: [
{
external: ['T', 'p'],
child: ['0x615f40', '0x0'],
id: '0x615f10',
name: 'T',
data: 'W',
root: true,
type: 'default',
},
{
child: ['0x615f70', '0x615fa0'],
id: '0x615f40',
name: 'T->lchild',
data: 'Q',
type: 'default',
},
{
child: ['0x0', '0x615fd0'],
id: '0x615f70',
name: '(T->lchild)->lchild',
data: 'A',
type: 'default',
},
{
child: ['0x0', '0x0'],
id: '0x615fd0',
name: '((T->lchild)->lchild)->rchild',
data: 'D',
type: 'default',
}
],
layouter: 'BinaryTree',
},
isEnterFunction: false,
},
];
cur.render(curData);
let dataIndex = 0,
curData = data[dataIndex];
document.getElementById('btn-next').addEventListener('click', e => {
curData = data[++dataIndex];
cur.render(curData);
});
let enableBrushSelect = false;
document.getElementById('btn-prev').addEventListener('click', e => {
curData = data[--dataIndex];
cur.render(curData);
});
const container = document.getElementById('container'),
pos = document.getElementById('pos');
document.getElementById('resize').addEventListener('click', e => {
container.style.height = 800 + 'px';
cur.resize(container.offsetWidth, container.offsetHeight);
});
const leak = document.getElementById('leak');
document.getElementById('relayout').addEventListener('click', e => {
cur.reLayout();
});
cur.render(curData);
document.getElementById('switch-mode').addEventListener('click', e => {
cur.updateStyle('Array', newArrayOption);
});
document.getElementById('btn-next').addEventListener('click', e => {
curData = data[++dataIndex];
cur.render(curData);
});
document.getElementById('brush-select').addEventListener('click', e => {
enableBrushSelect = !enableBrushSelect;
cur.switchBrushSelect(enableBrushSelect);
});
document.getElementById('btn-prev').addEventListener('click', e => {
curData = data[--dataIndex];
cur.render(curData);
});
cur.on('onLeakAreaUpdate', payload => {
leak.style.opacity = payload.hasLeak ? 1 : 0;
leak.style.top = payload.leakAreaY - 40 + 'px';
});
document.getElementById('resize').addEventListener('click', e => {
container.style.height = 800 + 'px';
cur.resize(container.offsetWidth, container.offsetHeight);
});
// -------------------------------------------------------------------------------------------------------
document.getElementById('relayout').addEventListener('click', e => {
cur.reLayout();
});
container.addEventListener('mousemove', e => {
let x = e.offsetX,
y = e.offsetY;
pos.innerHTML = `${x},${y}`;
});
</script>
</body>
document.getElementById('switch-mode').addEventListener('click', e => {
cur.updateStyle('Array', newArrayOption);
});
</html>
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>