From 6e4615a236b36eabd46a7f962b0416f3a43684af Mon Sep 17 00:00:00 2001 From: Kirigaya <1193466151@qq.com> Date: Sat, 28 Dec 2024 21:57:52 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 4 +- src/components/setting/index.vue | 24 ++++++++-- src/hook/jsdoc.js | 2 +- src/hook/render/index.js | 16 +++++-- src/hook/render/instantiation.js | 8 ++-- src/hook/render/layout.js | 80 ++++++++++++++++++++++---------- 6 files changed, 94 insertions(+), 40 deletions(-) diff --git a/public/index.html b/public/index.html index 12a18cc..5cb9e37 100644 --- a/public/index.html +++ b/public/index.html @@ -15,7 +15,7 @@ diff --git a/src/components/setting/index.vue b/src/components/setting/index.vue index 1a1de52..e71305e 100644 --- a/src/components/setting/index.vue +++ b/src/components/setting/index.vue @@ -4,9 +4,11 @@

{{ t('general-setting') }}

- -   - {{ t('language-setting') }} + + +   + {{ t('language-setting') }} +
data.name); // 设置文本内容 - + if (globalSetting.renderAnimation) { instances.transition() .duration(1000) diff --git a/src/hook/render/layout.js b/src/hook/render/layout.js index 203aa7b..d613128 100644 --- a/src/hook/render/layout.js +++ b/src/hook/render/layout.js @@ -3,7 +3,7 @@ */ import { globalLookup } from "../global"; -import { Cell, ModuleView } from "./yosys"; +import { Cell, dotConnect, ModuleView } from "./yosys"; export const LINE_WIDTH = 2; @@ -13,8 +13,11 @@ export const LAYOUT_CONSTANT = { PORT_HEIGHT: 20, // 例化模块（这只是最小，height 会根据端口数量进行调整） - INSTANTIATION_WIDTH: 50, - INSTANTIATION_HEIGHT: 50, + INSTANTIATION_WIDTH: 80, + INSTANTIATION_HEIGHT: 80, + + // port 顶部的空余，一般用来放置标签的 + PORT_TOP_MARGIN: 30, // 常数 CONSTANT_WIDTH: 50, @@ -64,7 +67,18 @@ export class Module { for (const name of this.view.nameToPort.keys()) { const port = this.view.nameToPort.get(name); + if (port.direction === 'input') { + // 为 port 设置连接点 + const portConnection = { + id: dotConnect(port.id, '0'), + renderType: 'portConnection', + width: 1, + height: 1, + x: LAYOUT_CONSTANT.PORT_WIDTH, + y: LAYOUT_CONSTANT.PORT_HEIGHT / 2 + }; + const node = { id: port.id, name: port.name, @@ -73,13 +87,25 @@ export class Module { type: port.direction, width: LAYOUT_CONSTANT.PORT_WIDTH, height: LAYOUT_CONSTANT.PORT_HEIGHT, + ports: [portConnection], layoutOptions: { - 'partitioning.partition': 1 + 'partitioning.partition': 1, + 'org.eclipse.elk.portConstraints': 'FIXED_POS' } }; nodes.push(node); } else { + // 为 port 设置连接点 + const portConnection = { + id: dotConnect(port.id, '0'), + renderType: 'portConnection', + width: 1, + height: 1, + x: 0, + y: LAYOUT_CONSTANT.PORT_HEIGHT / 2 + }; + const node = { id: port.id, name: port.name, @@ -88,8 +114,10 @@ export class Module { type: port.direction, width: LAYOUT_CONSTANT.PORT_WIDTH, height: LAYOUT_CONSTANT.PORT_HEIGHT, + ports: [portConnection], layoutOptions: { - 'partitioning.partition': 999 + 'partitioning.partition': 999, + 'org.eclipse.elk.portConstraints': 'FIXED_POS' } }; @@ -191,9 +219,8 @@ export class Module { // 例化模块 // 创建器件节点的 port, port 和 connection 一一对应 - const ports = []; - - for (const connectionName of cell.nameToConnection.keys()) { + const ports = []; + for (const connectionName of cell.nameToConnection.keys()) { const connection = cell.nameToConnection.get(connectionName); const portSide = connection.direction === 'input' ? ELK_DIRECTION.LEFT: ELK_DIRECTION.RIGHT; ports.push({ @@ -202,9 +229,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 + } }) } @@ -213,8 +240,8 @@ export class Module { name: cell.name, renderName: cell.type, renderType: 'cell', - width, - height, + width: LAYOUT_CONSTANT.INSTANTIATION_WIDTH, + height: LAYOUT_CONSTANT.INSTANTIATION_HEIGHT, ports, layoutOptions: { // 强制固定 port 的方向 @@ -289,23 +316,22 @@ export class Module { if (port.direction === 'input') { const edge = { // id 遵循 sourcePort-targetPort - id: makeEdgeId(port.id, cell.id), + id: makeEdgeId(port.id, connection.id), source: port.id, - sourcePort: port.id, + sourcePort: dotConnect(port.id, '0'), target: cell.id, targetPort: connection.id }; - + edges.push(edge); } else { const edge = { - id: makeEdgeId(cell.id, port.id), + id: makeEdgeId(connection.id, port.id), source: cell.id, sourcePort: connection.id, target: port.id, - targetPort: port.id - }; - + targetPort: dotConnect(port.id, '0') + }; edges.push(edge); } } else if (tree.wireIdToConnection.has(wireId)) { @@ -313,10 +339,15 @@ export class Module { // 当前的器件的这个端口和另一个器件的一个端口连接 const conn = tree.wireIdToConnection.get(wireId); + // 防止查询到自己 + if (conn.id === connection.id && conn.cell.id === cell.id) { + continue; + } + if (conn.direction === 'input') { const edge = { // id 遵循 sourcePort-targetPort - id: makeEdgeId(conn.id, cell.id), + id: makeEdgeId(conn.id, connection.id), source: conn.cell.id, sourcePort: conn.id, target: cell.id, @@ -326,13 +357,12 @@ export class Module { edges.push(edge); } else { const edge = { - id: makeEdgeId(cell.id, conn.id), + id: makeEdgeId(connection.id, conn.id), source: cell.id, sourcePort: connection.id, - target: conn.id, - targetPort: conn.cell.id + target: conn.cell.id, + targetPort: conn.id }; - edges.push(edge); } }