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

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

View File

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

View File

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