fix: 大量bug修复
This commit is contained in:
黎智洲
@@ -66,3 +66,67 @@ SV.registerLayout('Array', {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
SV.registerLayout('Array', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
const firstElement = sources[0];
|
||||
|
||||
if(firstElement.external) {
|
||||
firstElement.headExternal = firstElement.external;
|
||||
delete firstElement.external;
|
||||
}
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'indexed-node',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#355c7d'
|
||||
},
|
||||
indexOptions: {
|
||||
index: { position: 'bottom' },
|
||||
indexTop: { position: 'top' }
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
headExternal: {
|
||||
type: 'pointer',
|
||||
anchor: 3,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
external: {
|
||||
type: 'pointer',
|
||||
anchor: 0,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
layout(elements) {
|
||||
let arr = elements;
|
||||
|
||||
for(let i = 0; i < arr.length; i++) {
|
||||
let width = arr[i].get('size')[0];
|
||||
|
||||
if(i > 0) {
|
||||
arr[i].set('x', arr[i - 1].get('x') + width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 'colorful');
|
||||
@@ -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 });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
+24
-30
@@ -61,6 +61,7 @@
|
||||
<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>
|
||||
@@ -83,6 +84,7 @@
|
||||
<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>
|
||||
|
||||
const curSelectData = { element: null, style: null };
|
||||
@@ -96,42 +98,31 @@
|
||||
|
||||
|
||||
let data = [{
|
||||
"LinkList0": {
|
||||
"data": [
|
||||
{ id: 0, data: 'A', index: 1 },
|
||||
{ id: 1, data: 'B', index: 2 },
|
||||
{ id: 2, data: 'C' }
|
||||
],
|
||||
"layouter": "Array"
|
||||
},
|
||||
"LinkList1": {
|
||||
"data": [
|
||||
{ id: 10, data: 'A', next: 11 },
|
||||
{ id: 11, data: 'B', next: 12 },
|
||||
{ id: 12, data: 'C', next: 13 },
|
||||
{ id: 13, data: 'D' }
|
||||
],
|
||||
"layouter": "LinkList"
|
||||
Array: {
|
||||
data: [{ id: 1, data: 1 }, { id: 2, data: 2 }, { id: 3, data: 3 }, { id: 4, data: 4 }],
|
||||
layouter: 'Array'
|
||||
}
|
||||
}, {
|
||||
"LinkList0": {
|
||||
"data": [
|
||||
{ id: 10, data: 'A', next: 11, external: 'true' },
|
||||
{ id: 11, next: 12, freed: true }
|
||||
],
|
||||
"layouter": "LinkList"
|
||||
Array: {
|
||||
data: [{ id: 1, data: 1 }, { id: 2, data: 2 }, { id: 3, data: 3 }],
|
||||
layouter: 'Array'
|
||||
}
|
||||
}, {
|
||||
"LinkList0": {
|
||||
"data": [
|
||||
{ id: 0, data: 'A' }
|
||||
],
|
||||
"layouter": "LinkList"
|
||||
Array: {
|
||||
data: [{ id: 1, data: 1 }, { id: 2, data: 2 }],
|
||||
layouter: 'Array'
|
||||
}
|
||||
}, {
|
||||
Array: {
|
||||
data: [{ id: 1, data: 1 }, { id: 5, data: 5 }],
|
||||
layouter: 'Array'
|
||||
}
|
||||
}];
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let dataIndex = 0,
|
||||
curData = data[dataIndex];
|
||||
|
||||
@@ -156,19 +147,22 @@
|
||||
});
|
||||
|
||||
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 => {
|
||||
console.log();
|
||||
cur.reLayout();
|
||||
});
|
||||
|
||||
document.getElementById('switch-mode').addEventListener('click', e => {
|
||||
cur.switchMode('Array', 'colorful');
|
||||
});
|
||||
|
||||
const leak = document.getElementById('leak');
|
||||
|
||||
cur.on('onLeakAreaUpdate', payload => {
|
||||
leak.style.opacity = payload.hasLeak? 1: 0;
|
||||
leak.style.opacity = payload.hasLeak ? 1 : 0;
|
||||
leak.style.top = payload.leakAreaY - 40 + 'px';
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user