修正demo目录
This commit is contained in:
黎智洲
@@ -0,0 +1,64 @@
|
||||
|
||||
|
||||
|
||||
SV.registerLayouter('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: '[data]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
headExternal: {
|
||||
type: 'pointer',
|
||||
anchor: 3,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
external: {
|
||||
type: 'pointer',
|
||||
anchor: 0,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
behavior: {
|
||||
dragNode: false
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -0,0 +1,146 @@
|
||||
|
||||
|
||||
SV.registerLayouter('BinaryTree', {
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'binary-tree-node',
|
||||
size: [60, 30],
|
||||
label: '[id]',
|
||||
style: {
|
||||
fill: '#b83b5e',
|
||||
stroke: "#333",
|
||||
cursor: 'pointer'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
child: {
|
||||
type: 'line',
|
||||
sourceAnchor: index => index === 0? 3: 1,
|
||||
targetAnchor: 0,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
external: {
|
||||
anchor: 0,
|
||||
offset: 14,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
},
|
||||
labelOptions: {
|
||||
style: {
|
||||
fill: '#000099'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 40,
|
||||
yInterval: 40
|
||||
},
|
||||
behavior: {
|
||||
// dragNode: false
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
*/
|
||||
layoutItem(node, parent, index, layoutOptions) {
|
||||
// 次双亲不进行布局
|
||||
if(!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let bound = node.getBound(),
|
||||
width = bound.width,
|
||||
height = bound.height,
|
||||
group = new Group(node);
|
||||
|
||||
if(parent) {
|
||||
node.set('y', parent.get('y') + layoutOptions.yInterval + height);
|
||||
|
||||
// 左节点
|
||||
if(index === 0) {
|
||||
node.set('x', parent.get('x') - layoutOptions.xInterval / 2 - width / 2);
|
||||
}
|
||||
|
||||
// 右结点
|
||||
if(index === 1) {
|
||||
node.set('x', parent.get('x') + layoutOptions.xInterval / 2 + width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
if(node.child && (node.child[0] || node.child[1])) {
|
||||
let leftChild = node.child[0],
|
||||
rightChild = node.child[1],
|
||||
leftGroup = this.layoutItem(leftChild, node, 0, layoutOptions),
|
||||
rightGroup = this.layoutItem(rightChild, node, 1, layoutOptions),
|
||||
intersection = null,
|
||||
move = 0;
|
||||
|
||||
// 处理左右子树相交问题
|
||||
if(leftGroup && rightGroup) {
|
||||
intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound());
|
||||
move = 0;
|
||||
|
||||
if(intersection && intersection.width > 0) {
|
||||
move = (intersection.width + layoutOptions.xInterval) / 2;
|
||||
leftGroup.translate(-move, 0);
|
||||
rightGroup.translate(move, 0);
|
||||
}
|
||||
}
|
||||
|
||||
if(leftGroup) {
|
||||
group.add(leftGroup);
|
||||
}
|
||||
|
||||
if(rightGroup) {
|
||||
group.add(rightGroup)
|
||||
}
|
||||
}
|
||||
|
||||
return group;
|
||||
},
|
||||
|
||||
/**
|
||||
* 布局函数
|
||||
* @param {*} elements
|
||||
* @param {*} layoutOptions
|
||||
*/
|
||||
layout(elements, layoutOptions) {
|
||||
let root = elements[0];
|
||||
this.layoutItem(root, null, -1, layoutOptions);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[
|
||||
{
|
||||
"id": 6385328,
|
||||
"data": "",
|
||||
"external": [
|
||||
"L"
|
||||
],
|
||||
"root": true,
|
||||
"after": null,
|
||||
"next": null
|
||||
}
|
||||
]
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 连地址哈希表
|
||||
*/
|
||||
SV.registerLayouter('ChainHashTable', {
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
head: {
|
||||
type: 'two-cell-node',
|
||||
label: '[id]',
|
||||
size: [70, 40],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
},
|
||||
node: {
|
||||
type: 'link-list-node',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
start: {
|
||||
type: 'line',
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 5,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
next: {
|
||||
type: 'line',
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
external: {
|
||||
anchor: 3,
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 50,
|
||||
yInterval: 50
|
||||
},
|
||||
interaction: {
|
||||
dragNode: ['node']
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
* @param node
|
||||
* @param parent
|
||||
*/
|
||||
layoutItem(node, prev, layoutOptions) {
|
||||
if(!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let width = node.get('size')[0];
|
||||
|
||||
if(prev) {
|
||||
node.set('y', prev.get('y'));
|
||||
node.set('x', prev.get('x') + layoutOptions.xInterval + width);
|
||||
}
|
||||
|
||||
if(node.next) {
|
||||
this.layoutItem(node.next, node, layoutOptions);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let headNode = elements.filter(item => item.type === 'head');
|
||||
|
||||
for(let i = 0; i < headNode.length; i++) {
|
||||
let node = headNode[i],
|
||||
height = node.get('size')[1];
|
||||
|
||||
node.set('y', node.get('y') + i * height);
|
||||
|
||||
if(node.start) {
|
||||
let y = node.get('y') + height - node.start.get('size')[1],
|
||||
x = layoutOptions.xInterval * 2.5;
|
||||
|
||||
node.start.set({ x, y });
|
||||
this.layoutItem(node.start, null, layoutOptions);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,191 @@
|
||||
|
||||
|
||||
SV.registerShape('three-cell-node', {
|
||||
draw(cfg, group) {
|
||||
cfg.size = cfg.size || [30, 10];
|
||||
|
||||
const width = cfg.size[0],
|
||||
height = cfg.size[1];
|
||||
|
||||
const wrapperRect = group.addShape('rect', {
|
||||
attrs: {
|
||||
x: width / 2,
|
||||
y: height / 2,
|
||||
width: width,
|
||||
height: height,
|
||||
stroke: cfg.style.stroke,
|
||||
fill: '#eee'
|
||||
},
|
||||
name: 'wrapper',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
group.addShape('rect', {
|
||||
attrs: {
|
||||
x: width / 2,
|
||||
y: height / 2,
|
||||
width: width / 3,
|
||||
height: height,
|
||||
fill: cfg.style.fill,
|
||||
stroke: cfg.style.stroke
|
||||
},
|
||||
name: 'left-rect',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
group.addShape('rect', {
|
||||
attrs: {
|
||||
x: width * (5 / 6),
|
||||
y: height / 2,
|
||||
width: width / 3,
|
||||
height: height,
|
||||
fill: '#eee',
|
||||
stroke: cfg.style.stroke
|
||||
},
|
||||
name: 'mid-rect',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
if (cfg.label) {
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (2 / 3),
|
||||
y: height,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: cfg.label,
|
||||
fill: style.fill || '#000',
|
||||
fontSize: style.fontSize || 16
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true
|
||||
});
|
||||
}
|
||||
|
||||
return wrapperRect;
|
||||
},
|
||||
|
||||
getAnchorPoints() {
|
||||
return [
|
||||
[1 / 6, 0],
|
||||
[0.5, 0],
|
||||
[0.5, 0.5],
|
||||
[5 / 6, 0.5],
|
||||
[0.5, 1],
|
||||
[0, 0.5]
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
SV.registerLayouter('GeneralizedList', {
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
table: {
|
||||
type: 'three-cell-node',
|
||||
label: '[id]',
|
||||
size: [90, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
},
|
||||
atom: {
|
||||
type: 'two-cell-node',
|
||||
label: ['[id]', 'dcd'],
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
sub: {
|
||||
type: 'line',
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 0,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
next: {
|
||||
type: 'line',
|
||||
sourceAnchor: 3,
|
||||
targetAnchor: 5,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 40,
|
||||
yInterval: 20,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
* @param node
|
||||
* @param parent
|
||||
*/
|
||||
layoutItem(node, prev, layoutOptions) {
|
||||
if(!node) {
|
||||
return;
|
||||
}
|
||||
|
||||
let [width, height] = node.get('size');
|
||||
|
||||
if(prev) {
|
||||
node.set('y', prev.get('y'));
|
||||
node.set('x', prev.get('x') + layoutOptions.xInterval + width)
|
||||
}
|
||||
|
||||
if(node.next) {
|
||||
this.layoutItem(node.next, node, layoutOptions);
|
||||
}
|
||||
|
||||
// 存在子节点
|
||||
if(node.sub) {
|
||||
node.sub.set('y', node.get('y') + layoutOptions.yInterval + height);
|
||||
|
||||
// 子结点还是广义表
|
||||
if(node.sub.tag === 1) {
|
||||
node.sub.set('x', node.get('x') + width / 3);
|
||||
this.layoutItem(node.sub, null, layoutOptions);
|
||||
}
|
||||
else {
|
||||
let subWidth = node.sub.get('size')[0];
|
||||
node.sub.set('x', node.get('x') + width - subWidth);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let tableNodes = elements.filter(item => item.type === 'table'),
|
||||
tableRootNode = tableNodes.filter(item => item.root)[0];
|
||||
|
||||
this.layoutItem(tableRootNode, null, layoutOptions);
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,95 @@
|
||||
|
||||
|
||||
|
||||
SV.registerLayouter('HashTable', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
const firstElement = sources[0];
|
||||
|
||||
if(firstElement.external) {
|
||||
firstElement.headExternal = firstElement.external;
|
||||
delete firstElement.external;
|
||||
}
|
||||
|
||||
if(firstElement.cursor) {
|
||||
firstElement.headCursor = firstElement.cursor;
|
||||
delete firstElement.cursor;
|
||||
}
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'indexed-node',
|
||||
label: '[data]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
headExternal: {
|
||||
type: 'pointer',
|
||||
anchor: 3,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
external: {
|
||||
type: 'pointer',
|
||||
anchor: 0,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
headCursor: {
|
||||
type: 'cursor',
|
||||
anchor: 3,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
cursor: {
|
||||
type: 'cursor',
|
||||
anchor: 0,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
behavior: {
|
||||
dragNode: false
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
if(arr[i].empty) {
|
||||
arr[i].set('style', {
|
||||
fill: null
|
||||
});
|
||||
}
|
||||
|
||||
if(arr[i].disable) {
|
||||
arr[i].set('style', {
|
||||
fill: '#ccc'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
|
||||
|
||||
SV.registerLayouter('LinkList', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
let root = sources[0];
|
||||
|
||||
if(root.external) {
|
||||
root.rootExternal = root.external;
|
||||
delete root.external;
|
||||
}
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'link-list-node',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#eaffd0',
|
||||
cursor: 'pointer'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
next: {
|
||||
type: 'line',
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
loopNext: {
|
||||
type: 'arc',
|
||||
curveOffset: 50,
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 4,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
rootExternal: {
|
||||
type: 'cursor',
|
||||
anchor: 6,
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
external: {
|
||||
type: 'cursor',
|
||||
anchor: 0,
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 50,
|
||||
yInterval: 50
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
* @param node
|
||||
* @param parent
|
||||
*/
|
||||
layoutItem(node, prev, layoutOptions) {
|
||||
if(!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let width = node.get('size')[0];
|
||||
|
||||
if(prev) {
|
||||
node.set('y', prev.get('y'));
|
||||
node.set('x', prev.get('x') + layoutOptions.xInterval + width);
|
||||
}
|
||||
|
||||
if(node.next) {
|
||||
this.layoutItem(node.next, node, layoutOptions);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let root = elements[0];
|
||||
|
||||
this.layoutItem(root, null, layoutOptions);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
|
||||
|
||||
|
||||
|
||||
SV.registerLayouter('LinkQueue', {
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
head: {
|
||||
type: 'rect',
|
||||
label: '[label]',
|
||||
size: [60, 40],
|
||||
anchorPoints: [
|
||||
[0.5, 0],
|
||||
[1, 0.5],
|
||||
[0.5, 1],
|
||||
[0, 0.5]
|
||||
],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: null
|
||||
}
|
||||
},
|
||||
node: {
|
||||
type: 'link-list-node',
|
||||
label: '[data]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
front: {
|
||||
type: 'polyline',
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 5,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
rear: {
|
||||
type: 'polyline',
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 5,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
next: {
|
||||
type: 'line',
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
external: {
|
||||
type: 'pointer',
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 50,
|
||||
yInterval: 50
|
||||
},
|
||||
behavior: {
|
||||
dragNode: ['node']
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
* @param node
|
||||
* @param parent
|
||||
*/
|
||||
layoutItem(node, prev, layoutOptions) {
|
||||
if(!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let width = node.get('size')[0];
|
||||
|
||||
if(prev) {
|
||||
node.set('y', prev.get('y'));
|
||||
node.set('x', prev.get('x') + layoutOptions.xInterval + width);
|
||||
}
|
||||
|
||||
if(node.next) {
|
||||
this.layoutItem(node.next, node, layoutOptions);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let head = elements.filter(item => item.type === 'head'),
|
||||
head1 = head[0],
|
||||
head2 = head[1],
|
||||
nodes = elements.filter(item => item.type !== 'head'),
|
||||
mainRoot = nodes.findIndex(item => item.root && head1.front === item),
|
||||
roots = nodes.filter(item => item.root),
|
||||
headHeight = head1.get('size')[1],
|
||||
nodeHeight = 0,
|
||||
x = 0, y = 0;
|
||||
|
||||
if(nodes.length) {
|
||||
mainRoot = roots.splice(mainRoot, 1)[0];
|
||||
roots.unshift(mainRoot);
|
||||
|
||||
x = -50;
|
||||
y = mainRoot.get('y');
|
||||
nodeHeight = mainRoot.get('size')[1];
|
||||
|
||||
roots.forEach((item, index) => {
|
||||
item.set('y', -index * (nodeHeight + layoutOptions.yInterval));
|
||||
this.layoutItem(item, null, layoutOptions);
|
||||
});
|
||||
}
|
||||
|
||||
head1.set({ x, y: y + nodeHeight * 3 });
|
||||
head2.set({ x, y: head1.get('y') + headHeight });
|
||||
}
|
||||
});
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
|
||||
|
||||
/**
|
||||
* 单链表
|
||||
*/
|
||||
SV.registerLayouter('LinkStack', {
|
||||
sourcesPreprocess(sources) {
|
||||
const headNode = sources[0];
|
||||
|
||||
if(headNode.external) {
|
||||
headNode.headExternal = headNode.external;
|
||||
delete headNode.external;
|
||||
}
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'link-list-node',
|
||||
label: '[data]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
next: {
|
||||
type: 'line',
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 4,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
headExternal: {
|
||||
anchor: 5,
|
||||
type: 'pointer',
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
external: {
|
||||
anchor: 3,
|
||||
type: 'pointer',
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
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) {
|
||||
this.layoutItem(elements[0], null, layoutOptions);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
|
||||
|
||||
SV.registerLayouter('Stack', {
|
||||
|
||||
sourcesPreprocess(sources, options) {
|
||||
const stackBottomNode = sources[sources.length - 1];
|
||||
|
||||
if(stackBottomNode.external) {
|
||||
stackBottomNode.bottomExternal = stackBottomNode.external;
|
||||
delete stackBottomNode.external;
|
||||
}
|
||||
|
||||
if(options.layout.indexPosition) {
|
||||
sources.forEach(item => {
|
||||
item.indexPosition = options.layout.indexPosition;
|
||||
});
|
||||
}
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'indexed-node',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
external: {
|
||||
anchor: 1,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
bottomExternal: {
|
||||
anchor: 2,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
indexPosition: 'left'
|
||||
},
|
||||
behavior: {
|
||||
dragNode: false
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let blocks = elements;
|
||||
|
||||
for(let i = 1; i < blocks.length; i++) {
|
||||
let item = blocks[i],
|
||||
prev = blocks[i - 1],
|
||||
height = item.get('size')[1];
|
||||
|
||||
item.set('y', prev.get('y') + height);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user