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

给指向freed结点的边增加freed标志

Browse Source
This commit is contained in:
cjc
2022-03-02 15:04:29 +08:00
parent 2a09ca6be1
commit 5bee1cda0a
2 changed files with 216 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demoV2/demo2.html
+214 -227
View File
@@ -1,250 +1,237 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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 { <head>
background-color: #fafafa; <meta charset="UTF-8" />
border: 1px solid #ccc; <meta name="viewport" content="width=device-width, initial-scale=1.0" />
position: relative; <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 { <body>
display: flex; <div class="container" id="container">
margin-top: 20px; <div id="leak">
} <span>泄漏区</span>
</div>
</div>
#container { <button id="btn-prev">prev</button>
width: 100%; <button id="btn-next">next</button>
height: 500px; <button id="resize">resize</button>
position: relative; <button id="relayout">relayout</button>
overflow: hidden; <button id="switch-mode">switch mode</button>
} <button id="brush-select">brush-select</button>
<span id="pos"></span>
#leak { <script src="./../dist/sv.js"></script>
position: absolute; <script>
left: 0; const Group = SV.Group,
opacity: 0; Bound = SV.Bound,
top: 100px; G6 = SV.G6,
width: 100%; Vector = SV.Vector;
box-sizing: border-box; </script>
padding: 4px; <script src="./Layouter/LinkList.js"></script>
border-top: 1px dashed #000; <script src="./Layouter/BinaryTree.js"></script>
pointer-events: none; <script src="./Layouter/Stack.js"></script>
transition: opacity 0.75s ease-in-out; <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 > span { <script>
color: #000; let cur = SV(document.getElementById('container'), {
} view: {
</style> leakAreaHeight: 130,
</head> groupPadding: 40,
},
});
<body> let data = [{
<div class="container" id="container"> "BinaryTree0": {
<div id="leak"> "data": [{
<span>泄漏区</span> "external": [
</div> "T1",
</div> "r"
],
"child": [
"0x617ee0",
"0x617f10"
],
"id": "0x617eb0",
"name": "T1",
"data": "Z",
"root": true,
"type": "default"
}, {
"child": [
"0x0",
"0x0"
],
"id": "0x617ee0",
"name": "T1->lchild",
"data": "A",
"type": "default"
}, {
"child": [
"0x0",
"0x617f40"
],
"id": "0x617f10",
"name": "T1->rchild",
"data": "B",
"type": "default",
"external": [
"t"
]
}, ],
"layouter": "BinaryTree"
},
"isEnterFunction": false
}, {
"BinaryTree1": {
"data": [{
"external": [
"T1",
"r"
],
"child": [
"0x617ee0",
"0x617f10"
],
"id": "0x617eb0",
"name": "T1",
"data": "Z",
"root": true,
"type": "default"
}, {
"child": [
"0x0",
"0x0"
],
"id": "0x617ee0",
"name": "T1->lchild",
"data": "A",
freed: 'freed',
"type": "default"
}, {
"child": [
"0x0",
"0x617f40"
],
"id": "0x617f10",
"name": "T1->rchild",
"data": "B",
"type": "default",
"external": [
"t"
]
}, ],
"layouter": "BinaryTree"
},
"isEnterFunction": false
}, ];
<button id="btn-prev">prev</button> let dataIndex = 0,
<button id="btn-next">next</button> curData = data[dataIndex];
<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>
<script src="./../dist/sv.js"></script> let enableBrushSelect = false;
<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> const container = document.getElementById('container'),
let cur = SV(document.getElementById('container'), { pos = document.getElementById('pos');
view: {
leakAreaHeight: 130,
groupPadding: 40,
},
});
let data = [ const leak = document.getElementById('leak');
{
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,
},
];
let dataIndex = 0, cur.render(curData);
curData = data[dataIndex];
let enableBrushSelect = false; document.getElementById('btn-next').addEventListener('click', e => {
curData = data[++dataIndex];
cur.render(curData);
});
const container = document.getElementById('container'), document.getElementById('btn-prev').addEventListener('click', e => {
pos = document.getElementById('pos'); curData = 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 => { document.getElementById('switch-mode').addEventListener('click', e => {
curData = data[++dataIndex]; cur.updateStyle('Array', newArrayOption);
cur.render(curData); });
});
document.getElementById('btn-prev').addEventListener('click', e => { document.getElementById('brush-select').addEventListener('click', e => {
curData = data[--dataIndex]; enableBrushSelect = !enableBrushSelect;
cur.render(curData); cur.switchBrushSelect(enableBrushSelect);
}); });
document.getElementById('resize').addEventListener('click', e => { cur.on('onLeakAreaUpdate', payload => {
container.style.height = 800 + 'px'; leak.style.opacity = payload.hasLeak ? 1 : 0;
cur.resize(container.offsetWidth, container.offsetHeight); leak.style.top = payload.leakAreaY - 40 + 'px';
}); });
document.getElementById('relayout').addEventListener('click', e => { // -------------------------------------------------------------------------------------------------------
cur.reLayout();
});
document.getElementById('switch-mode').addEventListener('click', e => { container.addEventListener('mousemove', e => {
cur.updateStyle('Array', newArrayOption); let x = e.offsetX,
}); y = e.offsetY;
pos.innerHTML = `${x},${y}`;
});
</script>
</body>
document.getElementById('brush-select').addEventListener('click', e => { </html>
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>
src/Model/SVLink.ts
+2 -2
View File
@@ -43,9 +43,9 @@ export class SVLink extends SVModel {
target: this.target.id, target: this.target.id,
sourceAnchor, sourceAnchor,
targetAnchor, targetAnchor,
label: options.label, label: this.target.sourceNode.freed ? 'freed' : options.label,
style: Util.objectClone<Style>(options.style), style: Util.objectClone<Style>(options.style),
labelCfg: Util.objectClone<LinkLabelOption>(options.labelOptions), labelCfg: this.target.sourceNode.freed ? {position: 'start', autoRotate: true, refY:5 ,style: { fontSize: 10, opacity: 0.7}} : Util.objectClone<LinkLabelOption>(options.labelOptions),
curveOffset: options.curveOffset curveOffset: options.curveOffset
}; };
} }