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

Merge branch 'main' of https://gitlab.com/phenomLi/StructV2 into main

Browse Source
This commit is contained in:
lwj
2021-12-17 15:58:27 +08:00
parent be2a50014e 3626a6eb19
commit 6d27c73136
43 changed files with 15256 additions and 984 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demoV2/Layouter/Array.js
+12 -12
View File
@@ -6,7 +6,7 @@ SV.registerLayout('Array', {
sourcesPreprocess(sources) {
const firstElement = sources[0];
if(firstElement.external) {
if (firstElement.external) {
firstElement.headExternal = firstElement.external;
delete firstElement.external;
}
@@ -16,18 +16,17 @@ SV.registerLayout('Array', {
defineOptions() {
return {
element: {
node: {
default: {
type: 'indexed-node',
type: 'array-node',
label: '[id]',
size: [60, 30],
labelOptions: {
style: { fontSize: 20 }
},
style: {
stroke: '#333',
fill: '#95e1d3'
},
indexOptions: {
index: { position: 'bottom' },
indexTop: { position: 'top' }
}
}
},
@@ -47,8 +46,9 @@ SV.registerLayout('Array', {
}
}
},
behavior: {
dragNode: false
indexLabel: {
index: { position: 'bottom' },
indexRight: { position: 'right' }
}
};
},
@@ -56,13 +56,13 @@ SV.registerLayout('Array', {
layout(elements) {
let arr = elements;
for(let i = 0; i < arr.length; i++) {
for (let i = 0; i < arr.length; i++) {
let width = arr[i].get('size')[0];
if(i > 0) {
if (i > 0) {
arr[i].set('x', arr[i - 1].get('x') + width);
}
}
}
});
});
demoV2/Layouter/BinaryTree.js
+2 -1
View File
@@ -32,8 +32,9 @@ SV.registerLayout('BinaryTree', {
}
}
},
pointer: {
marker: {
external: {
type: 'pointer',
anchor: 0,
offset: 14,
style: {
demoV2/Layouter/PTree.js
+86
View File
@@ -0,0 +1,86 @@
// 解析数据：
// {
// PTree:{
// data:[
// {
// id: '1001',
// data: 'A',
// parent: -1,
// index: 0
// },
// {
// id: '1002',
// data: 'B',
// parent: 0,
// index: 1
// },
// ],
// layouter: 'PTree'
// }
// }
SV.registerLayout('PTree', {
sourcesPreprocess(sources) {
let dataLength = sources.length;
let parentNodes = [];
let i;
for (i = 0; i < dataLength; i++) {
parentNodes.push({
id: `parent-${i}`,
data: sources[i].parent
});
}
sources[0].indexLeft = 'data';
parentNodes[0].indexLeft = 'parent';
sources.push(...parentNodes);
return sources;
},
defineOptions() {
return {
node: {
default: {
type: 'rect',
label: '[data]',
size: [40, 40],
labelOptions: {
style: { fontSize: 16 }
},
style: {
stroke: '#333',
fill: '#95e1d3',
offset: 25
}
},
},
indexLabel: {
index: { position: 'top' },
indexLeft: { position: 'left' }
}
};
},
layout(elements) {
let nodeLength = elements.length,
halfLength = nodeLength / 2,
size = elements[0].get('size')[0],
i;
for (i = 0; i < nodeLength; i++) {
let x = (i % halfLength) * size;
y = Math.floor(i / halfLength) * size;
elements[i].set({ x, y });
}
}
});
demoV2/Layouter/SqQueue.js
+120
View File
@@ -0,0 +1,120 @@
SV.registerLayout('SqQueue', {
defineOptions() {
return {
node: {
head: {
type: 'rect',
anchorPoints: [
[0.5, 0],
[1, 0.5],
[0.5, 1],
[0, 0.5]
],
size: [60, 30],
label: '[data]',
style: {
fill: '#95e1d3',
stroke: "#333",
cursor: 'pointer'
},
},
node: {
type: 'indexed-node',
size: [60, 30],
label: '[data]',
style: {
fill: '#95e1d3',
stroke: "#333",
cursor: 'pointer'
}
}
},
link: {
front: {
type: 'polyline',
sourceAnchor: 1,
targetAnchor: 5,
style: {
stroke: '#333',
endArrow: 'default'
}
},
rear: {
type: 'polyline',
sourceAnchor: 1,
targetAnchor: 5,
style: {
stroke: '#333',
endArrow: 'default'
}
}
},
marker: {
external: {
type: 'pointer',
anchor: 0,
offset: 8,
labelOffset: 2,
style: {
fill: '#f08a5d'
}
},
cursor: {
type: 'cursor',
anchor: 0,
offset: 8,
labelOffset: 2,
style: {
fill: '#f08a5d'
}
}
}
};
},
layout(elements) {
let head = elements.filter(item => item.type === 'head'),
head1 = head[0],
head2 = head[1],
nodes = elements.filter(item => item.type !== 'head'),
headHeight = head1.get('size')[1],
headWidth = head1.get('size')[0],
nodeHeight = 0,
x = 0, y = 0;
if (nodes.length) {
let firstNode = nodes[0];
nodeHeight = firstNode.get('size')[1];
x = -50;
y = firstNode.get('y');
for (let i = 1; i < nodes.length; i++) {
let width = nodes[i].get('size')[0];
nodes[i].set('x', nodes[i - 1].get('x') + width);
if (nodes[i].empty) {
nodes[i].set('style', {
fill: null
});
}
}
}
head1.set({ x, y: y + nodeHeight * 3 });
if (nodes.length) {
head2.set({ x, y: head1.get('y') + headHeight });
}
else {
head2.set({ x: x + headWidth, y });
}
}
});
demoV2/demo2.html
+27 -39
View File
@@ -33,8 +33,8 @@
#leak {
position: absolute;
left: 0;
top: 100px;
opacity: 0;
top: 100px;
width: 100%;
box-sizing: border-box;
padding: 4px;
@@ -60,6 +60,8 @@
<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>
<span id="pos"></span>
<script src="./../dist/sv.js"></script>
@@ -82,64 +84,42 @@
<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>
const curSelectData = { element: null, style: null };
let cur = SV(document.getElementById('container'), {
view: {
leakAreaHeight: 0.25,
leakAreaHeight: 130,
groupPadding: 40,
},
});
let data = [{
"LinkList0": {
"data": [
{ id: 0, data: 'A', next: 1 },
{ id: 1, data: 'B' }
],
"layouter": "LinkList"
Array: {
data: [{ id: 1, data: 1, external: 'list' }, { id: 2, data: 2 }, { id: 3, data: 3 }],
layouter: 'Array'
}
}, {
"LinkList0": {
"data": [
{ id: 0, data: 'A', next: 1 },
{ id: 1, data: 'B', next: 2 },
{ id: 2, data: 'C' }
],
"layouter": "LinkList"
Array: {
data: [{ id: 1, data: 1 }, { id: 2, data: 2 }],
layouter: 'Array'
}
}, {
"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"
Array: {
data: [{ id: 1, data: 1 }, { id: 5, data: 5 }],
layouter: 'Array'
}
}];
let dataIndex = 0,
curData = data[dataIndex];
@@ -164,10 +144,18 @@
});
document.getElementById('resize').addEventListener('click', e => {
container.style.height = 400 + 'px';
container.style.height = 800 + 'px';
cur.resize(container.offsetWidth, container.offsetHeight);
});
document.getElementById('relayout').addEventListener('click', e => {
cur.reLayout();
});
document.getElementById('switch-mode').addEventListener('click', e => {
cur.updateStyle('Array', newArrayOption);
});
const leak = document.getElementById('leak');
cur.on('onLeakAreaUpdate', payload => {