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

fix: 修改ptree和pctree的布局

Browse Source
This commit is contained in:
zhenggengtong 2022-04-21 15:35:36 +08:00
parent 402bb804fc
commit 23f0418da3
2 changed files with 102 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
demo/Layouter/PCTree.js
View File

@ -13,11 +13,25 @@ SV.registerLayout('PCTree', {
data: headNodes[i].preData,
indexLeft: headNodes[i].index,
root: headNodes[i].root
}
};
let externalNode = {
type: 'structureExteral',
id: headNodes[0].id + '_1',
};
if(dataNode.root){
dataNode.indexTop = 'data';
headNodes[i].indexTop = ' parent firstChild'
headNodes[i].indexTop = ' parent firstChild';
if(headNodes[i].cursor){
externalNode.cursor = headNodes[i].cursor;
delete headNodes[i].cursor;
}else{
externalNode.external = headNodes[i].external;
delete headNodes[i].external;
}
sources.push(externalNode)
}
sources.push(dataNode)
}
@ -58,6 +72,10 @@ SV.registerLayout('PCTree', {
stroke: '#333',
fill: '#00AF92'
}
},
structureExteral: {
type: 'rect',
size: [0, 0]
}
},
indexLabel: {
@ -94,6 +112,20 @@ SV.registerLayout('PCTree', {
fill: '#333'
}
}
},
loopNext: {
type: 'quadratic',
curveOffset: -100,
sourceAnchor: 2,
targetAnchor: 7,
style: {
stroke: '#333',
endArrow: 'default',
startArrow: {
path: G6.Arrow.circle(2, -1),
fill: '#333'
}
}
}
},
marker: {
@ -104,6 +136,13 @@ SV.registerLayout('PCTree', {
style: {
fill: '#f08a5d'
}
},
cursor: {
type: 'cursor',
anchor: 0,
style: {
fill: '#f08a5d'
}
}
},
layout: {
@ -127,7 +166,7 @@ SV.registerLayout('PCTree', {
* @param node
* @param parent
*/
layoutItem(node, prev, layoutOptions, allNodeId) {
layoutItem(node, prev, layoutOptions, allNodeId, isRootNode) {
if(!node) {
return null;
}
@ -141,10 +180,14 @@ SV.registerLayout('PCTree', {
node.set('x', prev.get('x') + layoutOptions.xInterval + width);
}
allNodeId.value += idValue;
//如果是有root标识的和其后续节点，则不用记录id
//方便重更新布局
if(!isRootNode){
allNodeId.value += idValue;
}
if(node.next) {
this.layoutItem(node.next, node, layoutOptions, allNodeId);
this.layoutItem(node.next, node, layoutOptions, allNodeId, isRootNode);
}
}
},
@ -152,6 +195,7 @@ SV.registerLayout('PCTree', {
layout(elements, layoutOptions) {
let headNode = elements.filter(item => item.type === 'PCTreeHead'),
preHeadNode = elements.filter(item => item.type === 'PCTreePreHead'),
externalNode = elements.filter(item => item.type === 'structureExteral'),
roots = elements.filter(item => item.type === 'PCTreeNode' && item.root),
height = headNode[0].get('size')[1],
width = headNode[0].get('size')[0],
@ -177,10 +221,17 @@ SV.registerLayout('PCTree', {
x = width + layoutOptions.xInterval * 2;
node.headNext.set({ x, y });
this.layoutItem(node.headNext, null, layoutOptions, allNodeId);
this.layoutItem(node.headNext, null, layoutOptions, allNodeId, false);
}
}
if(externalNode.length > 0){
externalNode[0].set({
x: -25,
y: i / 2 * height
});
}
for(i = 0; i < roots.length; i++) {
let nodeWidth = roots[0].get('size')[0],
nodeInternalSum = i * (nodeWidth + layoutOptions.xInterval);
@ -189,6 +240,8 @@ SV.registerLayout('PCTree', {
x: headNode[0].get('x') + width + layoutOptions.xInterval * 2 + nodeInternalSum,
y: headNode[0].get('y') - layoutOptions.yInterval
})
this.layoutItem(roots[i], null, layoutOptions, allNodeId, true);
}
}
});

59
demo/Layouter/PTree.js
View File

@ -26,24 +26,27 @@ SV.registerLayout('PTree', {
sourcesPreprocess(sources) {
let dataLength = sources.length;
let parentNodes = [];
let i;
for (i = 0; i < dataLength; i++) {
parentNodes.push({
let parentNode = {
id: `parent-${i}`,
data: sources[i].parent
});
}
if(sources[0]){
sources[0].indexLeft = 'data';
}
if(parentNodes[0]){
parentNodes[0].indexLeft = 'parent';
}
};
sources.push(...parentNodes);
if(sources[i].index === 0){
sources[i].indexLeft = 'data';
parentNode.indexLeft = 'parent';
sources.push({
type: 'nameNode',
id: sources[i].id + '_0',
data: sources[i].name
});
}
sources.push(parentNode);
}
return sources;
},
@ -51,6 +54,14 @@ SV.registerLayout('PTree', {
defineOptions() {
return {
node: {
nameNode: {
type: 'rect',
size: [0, 0],
label: '[data]',
labelOptions: {
style: { fontSize: 16 }
},
},
default: {
type: 'rect',
label: '[data]',
@ -68,26 +79,40 @@ SV.registerLayout('PTree', {
indexLabel: {
index: { position: 'top' },
indexLeft: { position: 'left' }
}
},
layout: {
xInterval: 20
},
};
},
layout(elements) {
let nodeLength = elements.length;
layout(elements, layoutOptions) {
let nodes = elements.filter(item => item.type === 'default'),
nodeLength = nodes.length,
nameNode = elements.filter(item => item.type === 'nameNode')[0];
if(nodeLength == 0) return;
let halfLength = nodeLength / 2,
size = elements[0].get('size')[0],
size = nodes[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 });
nodes[i].set({ x, y });
}
//数据结构名
if(nameNode){
let labelBound = nameNode.shadowG6Item.getContainer().getChildren()[1].getBBox();
nameNode.set({
x: -size / 2 - layoutOptions.xInterval - labelBound.width / 2,
y: -size / 2 - layoutOptions.xInterval
})
}
}
});