feat: 重构
This commit is contained in:
黎智洲
@@ -19,7 +19,7 @@ const isNeighbor = function (itemA, itemB) {
|
||||
}
|
||||
|
||||
|
||||
SV.registerLayouter('AdjoinMatrixGraph', {
|
||||
SV.registerLayout('AdjoinMatrixGraph', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
let dataLength = sources.length;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
|
||||
|
||||
SV.registerLayouter('AdjoinTableGraph', {
|
||||
SV.registerLayout('AdjoinTableGraph', {
|
||||
|
||||
sourcesPreprocess(sources, options) {
|
||||
let dataLength = sources.length;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
|
||||
|
||||
SV.registerLayouter('Array', {
|
||||
SV.registerLayout('Array', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
const firstElement = sources[0];
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
|
||||
SV.registerLayouter('BinaryTree', {
|
||||
SV.registerLayout('BinaryTree', {
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
/**
|
||||
* 连地址哈希表
|
||||
*/
|
||||
SV.registerLayouter('ChainHashTable', {
|
||||
SV.registerLayout('ChainHashTable', {
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
|
||||
@@ -80,7 +80,7 @@ SV.registerShape('three-cell-node', {
|
||||
|
||||
|
||||
|
||||
SV.registerLayouter('GeneralizedList', {
|
||||
SV.registerLayout('GeneralizedList', {
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
|
||||
|
||||
SV.registerLayouter('HashTable', {
|
||||
SV.registerLayout('HashTable', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
const firstElement = sources[0];
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
|
||||
SV.registerLayouter('LinkList', {
|
||||
SV.registerLayout('LinkList', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
let root = sources[0];
|
||||
@@ -15,7 +15,7 @@ SV.registerLayouter('LinkList', {
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
node: {
|
||||
default: {
|
||||
type: 'link-list-node',
|
||||
label: '[data]',
|
||||
@@ -107,7 +107,6 @@ SV.registerLayouter('LinkList', {
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let root = elements[0];
|
||||
|
||||
this.layoutItem(root, null, layoutOptions);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
|
||||
|
||||
SV.registerLayouter('LinkQueue', {
|
||||
SV.registerLayout('LinkQueue', {
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
/**
|
||||
* 单链表
|
||||
*/
|
||||
SV.registerLayouter('LinkStack', {
|
||||
SV.registerLayout('LinkStack', {
|
||||
sourcesPreprocess(sources) {
|
||||
const headNode = sources[0];
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
|
||||
SV.registerLayouter('Stack', {
|
||||
SV.registerLayout('Stack', {
|
||||
|
||||
sourcesPreprocess(sources, options) {
|
||||
const stackBottomNode = sources[sources.length - 1];
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* 三叉树
|
||||
*/
|
||||
SV.registerLayouter('TriTree', {
|
||||
SV.registerLayout('TriTree', {
|
||||
defineOptions() {
|
||||
return {
|
||||
/**
|
||||
|
||||
+66
-110
@@ -25,38 +25,43 @@
|
||||
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#freed {
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
margin-right: 30px;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#leak {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100px;
|
||||
opacity: 0;
|
||||
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>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container" id="container"></div>
|
||||
<div class="container" id="container">
|
||||
<div id="leak">
|
||||
<span>泄漏区</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="btn-prev">prev</button>
|
||||
<button id="btn-next">next</button>
|
||||
<button id="hide">隐藏</button>
|
||||
<button id="resize">resize</button>
|
||||
<span id="pos"></span>
|
||||
|
||||
<div class="down">
|
||||
<div id="freed" class="container"></div>
|
||||
<div id="leak" class="container"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script src="./../dist/sv.js"></script>
|
||||
<script>
|
||||
|
||||
@@ -82,9 +87,8 @@
|
||||
const curSelectData = { element: null, style: null };
|
||||
|
||||
let cur = SV(document.getElementById('container'), {
|
||||
freedContainer: document.getElementById('freed'),
|
||||
leakContainer: document.getElementById('leak'),
|
||||
view: {
|
||||
leakAreaHeight: 0.25,
|
||||
groupPadding: 40,
|
||||
},
|
||||
});
|
||||
@@ -93,54 +97,42 @@
|
||||
let data = [{
|
||||
"LinkList0": {
|
||||
"data": [
|
||||
{
|
||||
"id": "0x617fb0",
|
||||
"data": "N",
|
||||
"next": "0x617ff0",
|
||||
"rootExternal": [
|
||||
"before"
|
||||
],
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"id": "0x617ff0",
|
||||
"data": "A",
|
||||
"next": "0x618010",
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"id": "0x618010",
|
||||
"data": "A",
|
||||
"next": "0x618030",
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"id": "0x618030",
|
||||
"data": "B",
|
||||
"next": "0x618050",
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"id": "0x618050",
|
||||
"data": "N",
|
||||
"next": null,
|
||||
"type": "default"
|
||||
}
|
||||
{ id: 0, data: 'A', next: 1 },
|
||||
{ id: 1, data: 'B' }
|
||||
],
|
||||
"layouter": "LinkList"
|
||||
},
|
||||
"LinkList1": {
|
||||
}
|
||||
}, {
|
||||
"LinkList0": {
|
||||
"data": [
|
||||
{
|
||||
"freed": true,
|
||||
"id": "0x617fd0",
|
||||
"data": "",
|
||||
"next": "0x605010",
|
||||
"rootExternal": [
|
||||
"tmpNode"
|
||||
],
|
||||
"type": "default"
|
||||
}
|
||||
{ id: 0, data: 'A', next: 1 },
|
||||
{ id: 1, data: 'B', next: 2 },
|
||||
{ id: 2, data: 'C' }
|
||||
],
|
||||
"layouter": "LinkList"
|
||||
}
|
||||
}, {
|
||||
"LinkList0": {
|
||||
"data": [
|
||||
{ id: 0, data: 'A', next: 1 },
|
||||
{ id: 1, data: 'B', next: 2 },
|
||||
{ id: 2, data: 'C', next: 3 },
|
||||
{ id: 3, data: 'D' }
|
||||
],
|
||||
"layouter": "LinkList"
|
||||
}
|
||||
}, {
|
||||
"LinkList0": {
|
||||
"data": [
|
||||
{ id: 0, data: 'A', next: 1 },
|
||||
{ id: 1, data: 'B', next: 2, freed: true }
|
||||
],
|
||||
"layouter": "LinkList"
|
||||
}
|
||||
}, {
|
||||
"LinkList0": {
|
||||
"data": [
|
||||
{ id: 0, data: 'A' }
|
||||
],
|
||||
"layouter": "LinkList"
|
||||
}
|
||||
@@ -153,17 +145,9 @@
|
||||
|
||||
cur.render(curData);
|
||||
|
||||
let f = true;
|
||||
document.getElementById('hide').addEventListener('click', e => {
|
||||
f ? cur.hideGroups(['BinaryTree']) : cur.hideGroups(['LinkList']);
|
||||
f = !f;
|
||||
});
|
||||
|
||||
document.getElementById('btn-next').addEventListener('click', e => {
|
||||
curData = data[++dataIndex];
|
||||
cur.render(curData);
|
||||
// curSelectData.element = null;
|
||||
// curSelectData.style = null;
|
||||
});
|
||||
|
||||
document.getElementById('btn-prev').addEventListener('click', e => {
|
||||
@@ -179,49 +163,21 @@
|
||||
pos.innerHTML = `${x},${y}`;
|
||||
});
|
||||
|
||||
document.getElementById('resize').addEventListener('click', e => {
|
||||
container.style.height = 400 + 'px';
|
||||
cur.resize(container.offsetWidth, container.offsetHeight);
|
||||
});
|
||||
|
||||
document.getElementById('hide').addEventListener('click', () => {
|
||||
cur.selectElement(1000, ele => {
|
||||
ele.set('label', '6666');
|
||||
});
|
||||
const leak = document.getElementById('leak');
|
||||
|
||||
cur.on('onLeakAreaUpdate', payload => {
|
||||
leak.style.opacity = payload.hasLeak ? 1 : 0;
|
||||
leak.style.top = payload.leakAreaY - 40 + 'px';
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 选中一个element
|
||||
*/
|
||||
function selectElement(element) {
|
||||
if (element === curSelectData.element) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (curSelectData.element) {
|
||||
const style = curSelectData.style;
|
||||
curSelectData.element.set("style", style);
|
||||
}
|
||||
|
||||
curSelectData.element = element;
|
||||
curSelectData.style = { ...element.get("style") };
|
||||
this.setSelectElementStyle(element);
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置选中的节点的颜色
|
||||
*/
|
||||
function setSelectElementStyle(element) {
|
||||
element.set("style", {
|
||||
fill: "#e23e57",
|
||||
});
|
||||
}
|
||||
|
||||
cur.on('node:click', ele => {
|
||||
selectElement(ele);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user