From e652631261aa56280370a0a44b843c3bb9ded097 Mon Sep 17 00:00:00 2001
From: Kirigaya <1193466151@qq.com>
Date: Tue, 31 Dec 2024 15:04:50 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=20connection=20=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E6=AD=A3=E7=A1=AE=E6=B8=B2=E6=9F=93=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hook/render/connection.js | 12 ++----------
 src/hook/render/layout.js     | 31 +++++++++++++++++++------------
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/hook/render/connection.js b/src/hook/render/connection.js
index 9e3d0cc..b40b976 100644
--- a/src/hook/render/connection.js
+++ b/src/hook/render/connection.js
@@ -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);
             });
 
diff --git a/src/hook/render/layout.js b/src/hook/render/layout.js
index e032269..5ea5761 100644
--- a/src/hook/render/layout.js
+++ b/src/hook/render/layout.js
@@ -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;