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

feat: 重构

Browse Source
This commit is contained in:
黎智洲
2021-12-02 17:19:46 +08:00
parent 8347476980
commit 78c0890dde
51 changed files with 5302 additions and 1792 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demoV2/demo2.html
+66 -110
View File
@@ -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>