129 lines
3.1 KiB
JavaScript
129 lines
3.1 KiB
JavaScript
|
|
|
|
/**
|
|
* 单链表
|
|
*/
|
|
class LinkStack extends Engine {
|
|
defineOptions() {
|
|
return {
|
|
element: {
|
|
default: {
|
|
type: 'link-list-node',
|
|
label: '[id]',
|
|
size: [60, 30],
|
|
style: {
|
|
stroke: '#333',
|
|
fill: '#b83b5e'
|
|
}
|
|
}
|
|
},
|
|
link: {
|
|
next: {
|
|
type: 'line',
|
|
sourceAnchor: 1,
|
|
targetAnchor: 2,
|
|
style: {
|
|
stroke: '#333',
|
|
endArrow: {
|
|
path: G6.Arrow.triangle(8, 6, 0),
|
|
fill: '#333'
|
|
},
|
|
startArrow: {
|
|
path: G6.Arrow.circle(2, -1),
|
|
fill: '#333'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
pointer: {
|
|
external: {
|
|
offset: 8,
|
|
style: {
|
|
fill: '#f08a5d'
|
|
}
|
|
}
|
|
},
|
|
layout: {
|
|
xInterval: 50,
|
|
yInterval: 30
|
|
}
|
|
};
|
|
}
|
|
|
|
|
|
/**
|
|
* 对子树进行递归布局
|
|
* @param node
|
|
* @param parent
|
|
*/
|
|
layoutItem(node, prev, layoutOptions) {
|
|
if(!node) {
|
|
return null;
|
|
}
|
|
|
|
let height = node.get('size')[1];
|
|
|
|
if(prev) {
|
|
node.set('x', prev.get('x'));
|
|
node.set('y', prev.get('y') + layoutOptions.yInterval + height);
|
|
}
|
|
|
|
if(node.next) {
|
|
this.layoutItem(node.next, node, layoutOptions);
|
|
}
|
|
}
|
|
|
|
|
|
layout(elements, layoutOptions) {
|
|
let nodes = elements.default,
|
|
rootNodes = [],
|
|
node,
|
|
i;
|
|
|
|
for(i = 0; i < nodes.length; i++) {
|
|
node = nodes[i];
|
|
|
|
if(node.root) {
|
|
rootNodes.push(node);
|
|
}
|
|
}
|
|
|
|
for(i = 0; i < rootNodes.length; i++) {
|
|
let root = rootNodes[i],
|
|
width = root.get('size')[0];
|
|
|
|
root.set('x', root.get('x') + i * (layoutOptions.xInterval + width));
|
|
this.layoutItem(root, null, layoutOptions);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
const LStack = function(container) {
|
|
return{
|
|
engine: new LinkStack(container),
|
|
data: [[
|
|
{ id: 1, root: true, next: 2 },
|
|
{ id: 2, next: 3 },
|
|
{ id: 3, next: 4 },
|
|
{ id: 4, next: 5 },
|
|
{ id: 5 },
|
|
{ id: 6, root: true, next: 7 },
|
|
{ id: 7, next: 8 },
|
|
{ id: 8, next: 4 },
|
|
{ id: 9, root: true, next: 10 },
|
|
{ id: 10 }
|
|
],
|
|
[
|
|
{ id: 1, root: true, next: 2 },
|
|
{ id: 2, next: 3 },
|
|
{ id: 3, next: 6 },
|
|
{ id: 6, next: 7 },
|
|
{ id: 7, next: 8 },
|
|
{ id: 8 }
|
|
]]
|
|
}
|
|
};
|
|
|
|
|