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

解决 connection 无法正确渲染的问题

Browse Source
This commit is contained in:
锦恢 2024-12-31 15:04:50 +08:00
parent a21b302922
commit e652631261
2 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/hook/render/connection.js
View File

@ -47,21 +47,13 @@ export class ConnectionRender {
const _this = this; const _this = this;
let connectionSelections = this.parentSelection.selectAll('circle') let connectionSelections = this.parentSelection.selectAll('circle')
.data(data) .data(data, d => d.id)
.enter() .enter()
.append('circle') .append('circle')
.attr('cx', data => data.x) .attr('cx', data => data.x)
.attr('cy', data => data.y) .attr('cy', data => data.y)
.attr('width', data => data.width) .attr('width', data => data.width)
.attr('height', data => data.height) .attr('height', data => data.height)
if (globalSetting.renderAnimation) {
connectionSelections = connectionSelections
.transition()
.duration(1000);
}
connectionSelections
.attr('fill', d => d.fill) .attr('fill', d => d.fill)
.attr('r', d => d.r) .attr('r', d => d.r)
.each(function (data) { .each(function (data) {

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

@ -33,6 +33,8 @@ export const LAYOUT_CONSTANT = {
// 例化模块上部分的空缺区域 // 例化模块上部分的空缺区域
INSTANCE_TITLE_HEIGHT: 10, INSTANCE_TITLE_HEIGHT: 10,
INSTANCE_TOP_PADDING: 20, INSTANCE_TOP_PADDING: 20,
INSTANCE_LEFT_MARGIN: 10,
INSTANCE_RIGHT_MARGIN: 10,
// 常数 // 常数
CONSTANT_WIDTH: 50, CONSTANT_WIDTH: 50,
@ -40,7 +42,9 @@ export const LAYOUT_CONSTANT = {
// 器件的端口 // 器件的端口
CELL_PORT_HEIGHT: 1, CELL_PORT_HEIGHT: 1,
CELL_PORT_WIDTH: 1 CELL_PORT_WIDTH: 1,
CELL_LEFT_MARGIN: 10,
CELL_RIGHT_MARGIN: 10
}; };
export const ELK_DIRECTION = { export const ELK_DIRECTION = {
@ -270,20 +274,20 @@ export class Module {
const edge = { const edge = {
// id 遵循 sourcePort-targetPort // id 遵循 sourcePort-targetPort
id: makeEdgeId(conn.id, connection.id), id: makeEdgeId(conn.id, connection.id),
source: conn.cell.id, source: cell.id,
sourcePort: conn.id, sourcePort: connection.id,
target: cell.id, target: conn.cell.id,
targetPort: connection.id targetPort: conn.id
}; };
edges.push(edge); edges.push(edge);
} else { } else {
const edge = { const edge = {
id: makeEdgeId(connection.id, conn.id), id: makeEdgeId(connection.id, conn.id),
source: cell.id, source: conn.cell.id,
sourcePort: connection.id, sourcePort: conn.id,
target: conn.cell.id, target: cell.id,
targetPort: conn.id targetPort: connection.id
}; };
edges.push(edge); edges.push(edge);
} }
@ -398,8 +402,11 @@ export class Module {
// 每一个 connection 占据的空间为：【上方空余区域（用来防止文本的）】 + 【本身的高度】 // 每一个 connection 占据的空间为：【上方空余区域（用来防止文本的）】 + 【本身的高度】
(LAYOUT_CONSTANT.PORT_TOP_MARGIN + LAYOUT_CONSTANT.CELL_PORT_HEIGHT) * (maxPortNum + 1) (LAYOUT_CONSTANT.PORT_TOP_MARGIN + LAYOUT_CONSTANT.CELL_PORT_HEIGHT) * (maxPortNum + 1)
); );
// 宽度等于预设宽度+两倍的padding // 宽度等于预设宽度 + 两倍的 inner padding + left margin + right margin
const instanceWidth = LAYOUT_CONSTANT.INSTANTIATION_WIDTH + 2 * LAYOUT_CONSTANT.PORT_INNER_PADDING; const instanceWidth = LAYOUT_CONSTANT.INSTANTIATION_WIDTH +
2 * LAYOUT_CONSTANT.PORT_INNER_PADDING +
LAYOUT_CONSTANT.INSTANCE_LEFT_MARGIN +
LAYOUT_CONSTANT.INSTANCE_RIGHT_MARGIN;
// 创建器件节点的 port, port 和 connection 一一对应 // 创建器件节点的 port, port 和 connection 一一对应
const ports = []; const ports = [];