实现固定布局
This commit is contained in:
parent
b9b05f08fc
commit
2d27298b29
@ -19,7 +19,6 @@ export class NetlistRender {
|
||||
this.elkGraph = {
|
||||
id: 'root',
|
||||
layoutOptions: {
|
||||
'elk.algorithm': 'layered',
|
||||
'elk.progressBar': true,
|
||||
'layered.nodePlacement.strategy': 'SIDE_BASED'
|
||||
},
|
||||
@ -71,7 +70,13 @@ export class NetlistRender {
|
||||
async createLayout() {
|
||||
const elk = new ELK();
|
||||
const graph = this.elkGraph;
|
||||
const layoutGraph = await elk.layout(graph);
|
||||
const layoutGraph = await elk.layout(graph, {
|
||||
layoutOptions: {
|
||||
'org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers': 35,
|
||||
'org.eclipse.elk.spacing.nodeNode': 35,
|
||||
'org.eclipse.elk.layered.layering.strategy': 'LONGEST_PATH'
|
||||
}
|
||||
});
|
||||
console.log(layoutGraph);
|
||||
|
||||
return layoutGraph;
|
||||
|
@ -142,26 +142,20 @@ export class Module {
|
||||
const extraOffset = LINE_WIDTH * leftSideConnections.length;
|
||||
const anchorY = layoutY - targetY;
|
||||
|
||||
console.log(targetY, layoutY, targetY - layoutY);
|
||||
console.log(yOffset);
|
||||
|
||||
|
||||
let gap = (targetY - layoutY).toFixed(2);
|
||||
console.log('gap', gap);
|
||||
|
||||
|
||||
ports.push({
|
||||
id: connection.id,
|
||||
renderName: connection.name,
|
||||
renderType: 'cellPort',
|
||||
width: 0,
|
||||
height: 0,
|
||||
properties: {
|
||||
'port.side': ELK_DIRECTION.LEFT,
|
||||
'port.anchor': `0, ${gap}`
|
||||
}
|
||||
width: 1,
|
||||
height: 1,
|
||||
x: 0,
|
||||
y: yOffset
|
||||
});
|
||||
|
||||
console.log(ports.at(-1).properties["port.anchor"]);
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 计算右侧的
|
||||
@ -176,20 +170,20 @@ export class Module {
|
||||
const extraOffset = LINE_WIDTH * rightSideConnections.length / 2;
|
||||
const anchorY = targetY - layoutY + extraOffset;
|
||||
|
||||
console.log(yOffset);
|
||||
|
||||
|
||||
ports.push({
|
||||
id: connection.id,
|
||||
renderName: connection.name,
|
||||
renderType: 'cellPort',
|
||||
width: 0,
|
||||
height: 0,
|
||||
properties: {
|
||||
'port.side': ELK_DIRECTION.RIGHT,
|
||||
'port.anchor': `0, ${anchorY}`
|
||||
}
|
||||
width: 1,
|
||||
height: 1,
|
||||
x: width,
|
||||
y: yOffset
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const node = {
|
||||
id: cell.id,
|
||||
renderName: cell.type,
|
||||
@ -198,7 +192,7 @@ export class Module {
|
||||
height,
|
||||
ports,
|
||||
layoutOptions: {
|
||||
'org.eclipse.elk.portConstraints': 'FIXED_SIDE',
|
||||
'org.eclipse.elk.portConstraints': 'FIXED_POS'
|
||||
}
|
||||
};
|
||||
nodes.push(node);
|
||||
@ -217,9 +211,9 @@ export class Module {
|
||||
renderType: 'cellPort',
|
||||
width: LAYOUT_CONSTANT.CELL_PORT_WIDTH,
|
||||
height: LAYOUT_CONSTANT.CELL_PORT_HEIGHT,
|
||||
properties: {
|
||||
'port.side': portSide
|
||||
}
|
||||
// properties: {
|
||||
// 'port.side': portSide
|
||||
// }
|
||||
})
|
||||
}
|
||||
|
||||
@ -230,10 +224,10 @@ export class Module {
|
||||
width,
|
||||
height,
|
||||
ports,
|
||||
layoutOptions: {
|
||||
// 强制固定 port 的方向
|
||||
'org.eclipse.elk.portConstraints': 'FIXED_SIDE'
|
||||
}
|
||||
// layoutOptions: {
|
||||
// // 强制固定 port 的方向
|
||||
// 'org.eclipse.elk.portConstraints': 'FIXED_SIDE'
|
||||
// }
|
||||
};
|
||||
|
||||
nodes.push(node);
|
||||
@ -299,16 +293,20 @@ export class Module {
|
||||
if (port.direction === 'input') {
|
||||
const edge = {
|
||||
id: makeEdgeId(cellId, port.id),
|
||||
sources: [port.id],
|
||||
targets: [connection.id]
|
||||
source: port.id,
|
||||
sourcePort: port.id,
|
||||
target: cell.id,
|
||||
targetPort: connection.id
|
||||
};
|
||||
|
||||
edges.push(edge);
|
||||
} else {
|
||||
const edge = {
|
||||
id: makeEdgeId(cellId, port.id),
|
||||
sources: [connection.id],
|
||||
targets: [port.id]
|
||||
source: cell.id,
|
||||
sourcePort: connection.id,
|
||||
target: port.id,
|
||||
targetPort: port.id
|
||||
};
|
||||
|
||||
edges.push(edge);
|
||||
|
Loading…
x
Reference in New Issue
Block a user