kirigaya/digital-netlist-render
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现固定布局

Browse Source
This commit is contained in:
锦恢 2024-12-24 18:25:55 +08:00
parent b9b05f08fc
commit 2d27298b29
2 changed files with 37 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/hook/render/index.js
View File

@ -19,7 +19,6 @@ export class NetlistRender {
this.elkGraph = { this.elkGraph = {
id: 'root', id: 'root',
layoutOptions: { layoutOptions: {
'elk.algorithm': 'layered',
'elk.progressBar': true, 'elk.progressBar': true,
'layered.nodePlacement.strategy': 'SIDE_BASED' 'layered.nodePlacement.strategy': 'SIDE_BASED'
}, },
@ -71,7 +70,13 @@ export class NetlistRender {
async createLayout() { async createLayout() {
const elk = new ELK(); const elk = new ELK();
const graph = this.elkGraph; 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); console.log(layoutGraph);
return layoutGraph; return layoutGraph;

58
src/hook/render/layout.js
View File

@ -142,25 +142,19 @@ export class Module {
const extraOffset = LINE_WIDTH * leftSideConnections.length; const extraOffset = LINE_WIDTH * leftSideConnections.length;
const anchorY = layoutY - targetY; 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({ ports.push({
id: connection.id, id: connection.id,
renderName: connection.name, renderName: connection.name,
renderType: 'cellPort', renderType: 'cellPort',
width: 0, width: 1,
height: 0, height: 1,
properties: { x: 0,
'port.side': ELK_DIRECTION.LEFT, y: yOffset
'port.anchor': `0, ${gap}`
}
}); });
console.log(ports.at(-1).properties["port.anchor"]);
} }
@ -176,20 +170,20 @@ export class Module {
const extraOffset = LINE_WIDTH * rightSideConnections.length / 2; const extraOffset = LINE_WIDTH * rightSideConnections.length / 2;
const anchorY = targetY - layoutY + extraOffset; const anchorY = targetY - layoutY + extraOffset;
console.log(yOffset);
ports.push({ ports.push({
id: connection.id, id: connection.id,
renderName: connection.name, renderName: connection.name,
renderType: 'cellPort', renderType: 'cellPort',
width: 0, width: 1,
height: 0, height: 1,
properties: { x: width,
'port.side': ELK_DIRECTION.RIGHT, y: yOffset
'port.anchor': `0, ${anchorY}`
}
}); });
} }
const node = { const node = {
id: cell.id, id: cell.id,
renderName: cell.type, renderName: cell.type,
@ -198,7 +192,7 @@ export class Module {
height, height,
ports, ports,
layoutOptions: { layoutOptions: {
'org.eclipse.elk.portConstraints': 'FIXED_SIDE', 'org.eclipse.elk.portConstraints': 'FIXED_POS'
} }
}; };
nodes.push(node); nodes.push(node);
@ -217,9 +211,9 @@ export class Module {
renderType: 'cellPort', renderType: 'cellPort',
width: LAYOUT_CONSTANT.CELL_PORT_WIDTH, width: LAYOUT_CONSTANT.CELL_PORT_WIDTH,
height: LAYOUT_CONSTANT.CELL_PORT_HEIGHT, height: LAYOUT_CONSTANT.CELL_PORT_HEIGHT,
properties: { // properties: {
'port.side': portSide // 'port.side': portSide
} // }
}) })
} }
@ -230,10 +224,10 @@ export class Module {
width, width,
height, height,
ports, ports,
layoutOptions: { // layoutOptions: {
// 强制固定 port 的方向 // // 强制固定 port 的方向
'org.eclipse.elk.portConstraints': 'FIXED_SIDE' // 'org.eclipse.elk.portConstraints': 'FIXED_SIDE'
} // }
}; };
nodes.push(node); nodes.push(node);
@ -299,16 +293,20 @@ export class Module {
if (port.direction === 'input') { if (port.direction === 'input') {
const edge = { const edge = {
id: makeEdgeId(cellId, port.id), id: makeEdgeId(cellId, port.id),
sources: [port.id], source: port.id,
targets: [connection.id] sourcePort: port.id,
target: cell.id,
targetPort: connection.id
}; };
edges.push(edge); edges.push(edge);
} else { } else {
const edge = { const edge = {
id: makeEdgeId(cellId, port.id), id: makeEdgeId(cellId, port.id),
sources: [connection.id], source: cell.id,
targets: [port.id] sourcePort: connection.id,
target: port.id,
targetPort: port.id
}; };
edges.push(edge); edges.push(edge);