From 2f1d16c303a540ade93cd6060b597f77cd655994 Mon Sep 17 00:00:00 2001
From: Kirigaya <1193466151@qq.com>
Date: Wed, 25 Dec 2024 19:39:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=A4=9A=E4=B8=AA=E5=99=A8?=
 =?UTF-8?q?=E4=BB=B6=E6=A1=A5=E6=8E=A5=E7=B1=BB=E5=9E=8B=E7=9A=84=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                        |   1 -
 public/test.json                 | 244 ++++++++++++++++---------------
 src/App.vue                      |  19 ++-
 src/components/setting/index.vue |   5 +-
 src/hook/global.js               |  14 --
 src/hook/render/cell.js          |  38 +++--
 src/hook/render/index.js         | 144 ++++++++++++------
 src/hook/render/layout.js        |  56 ++++---
 src/hook/render/port.js          |  10 +-
 src/hook/render/yosys.js         |  26 ----
 src/hook/wheel-event.js          |  28 +---
 11 files changed, 308 insertions(+), 277 deletions(-)

diff --git a/README.md b/README.md
index 033c155..b7c12c3 100644
--- a/README.md
+++ b/README.md
@@ -23,4 +23,3 @@ resources
 ```
 
 
----
diff --git a/public/test.json b/public/test.json
index d036af4..9f760a2 100644
--- a/public/test.json
+++ b/public/test.json
@@ -1,125 +1,137 @@
 {
     "creator": "Yosys 0.48+5 (git sha1 7a362f1f7, clang++ 18.1.2-wasi-sdk -Oz)",
     "modules": {
-        "half_adder": {
+      "half_adder": {
+        "attributes": {
+          "top": "00000000000000000000000000000001",
+          "src": "/root/half_adder.v:1.1-9.10"
+        },
+        "ports": {
+          "a": {
+            "direction": "input",
+            "bits": [ 2 ]
+          },
+          "b": {
+            "direction": "input",
+            "bits": [ 3 ]
+          },
+          "c": {
+            "direction": "input",
+            "bits": [ 4 ]
+          },
+          "sum": {
+            "direction": "output",
+            "bits": [ 5 ]
+          },
+          "carry": {
+            "direction": "output",
+            "bits": [ 6 ]
+          }
+        },
+        "cells": {
+          "$auto$simplemap.cc:75:simplemap_bitop$81": {
+            "hide_name": 1,
+            "type": "$_AND_",
+            "parameters": {
+            },
             "attributes": {
-                "top": "00000000000000000000000000000001",
-                "src": "/root/half_adder.v:1.1-8.10"
+              "src": "/root/half_adder.v:7.18-7.23"
             },
-            "ports": {
-                "a": {
-                    "direction": "input",
-                    "bits": [
-                        2
-                    ]
-                },
-                "b": {
-                    "direction": "input",
-                    "bits": [
-                        3
-                    ]
-                },
-                "sum": {
-                    "direction": "output",
-                    "bits": [
-                        4
-                    ]
-                },
-                "carry": {
-                    "direction": "output",
-                    "bits": [
-                        5
-                    ]
-                }
+            "port_directions": {
+              "A": "input",
+              "B": "input",
+              "Y": "output"
             },
-            "cells": {
-                "$auto$simplemap.cc:75:simplemap_bitop$80": {
-                    "hide_name": 1,
-                    "type": "$_AND_",
-                    "parameters": {},
-                    "attributes": {
-                        "src": "/root/half_adder.v:6.18-6.23"
-                    },
-                    "port_directions": {
-                        "A": "input",
-                        "B": "input",
-                        "Y": "output"
-                    },
-                    "connections": {
-                        "A": [
-                            2
-                        ],
-                        "B": [
-                            3
-                        ],
-                        "Y": [
-                            5
-                        ]
-                    }
-                },
-                "$auto$simplemap.cc:75:simplemap_bitop$81": {
-                    "hide_name": 1,
-                    "type": "$_XOR_",
-                    "parameters": {},
-                    "attributes": {
-                        "src": "/root/half_adder.v:7.16-7.21"
-                    },
-                    "port_directions": {
-                        "A": "input",
-                        "B": "input",
-                        "Y": "output"
-                    },
-                    "connections": {
-                        "A": [
-                            2
-                        ],
-                        "B": [
-                            3
-                        ],
-                        "Y": [
-                            4
-                        ]
-                    }
-                }
-            },
-            "netnames": {
-                "a": {
-                    "hide_name": 0,
-                    "bits": [
-                        2
-                    ],
-                    "attributes": {
-                        "src": "/root/half_adder.v:2.9-2.10"
-                    }
-                },
-                "b": {
-                    "hide_name": 0,
-                    "bits": [
-                        3
-                    ],
-                    "attributes": {
-                        "src": "/root/half_adder.v:3.9-3.10"
-                    }
-                },
-                "carry": {
-                    "hide_name": 0,
-                    "bits": [
-                        5
-                    ],
-                    "attributes": {
-                        "src": "/root/half_adder.v:4.10-4.15"
-                    }
-                },
-                "sum": {
-                    "hide_name": 0,
-                    "bits": [
-                        4
-                    ],
-                    "attributes": {
-                        "src": "/root/half_adder.v:5.10-5.13"
-                    }
-                }
+            "connections": {
+              "A": [ 2 ],
+              "B": [ 3 ],
+              "Y": [ 7 ]
             }
+          },
+          "$auto$simplemap.cc:75:simplemap_bitop$82": {
+            "hide_name": 1,
+            "type": "$_OR_",
+            "parameters": {
+            },
+            "attributes": {
+              "src": "/root/half_adder.v:7.18-7.27"
+            },
+            "port_directions": {
+              "A": "input",
+              "B": "input",
+              "Y": "output"
+            },
+            "connections": {
+              "A": [ 7 ],
+              "B": [ 4 ],
+              "Y": [ 6 ]
+            }
+          },
+          "$auto$simplemap.cc:75:simplemap_bitop$83": {
+            "hide_name": 1,
+            "type": "$_XOR_",
+            "parameters": {
+            },
+            "attributes": {
+              "src": "/root/half_adder.v:8.16-8.21"
+            },
+            "port_directions": {
+              "A": "input",
+              "B": "input",
+              "Y": "output"
+            },
+            "connections": {
+              "A": [ 2 ],
+              "B": [ 3 ],
+              "Y": [ 5 ]
+            }
+          }
+        },
+        "netnames": {
+          "$and$/root/half_adder.v:7$1_Y": {
+            "hide_name": 1,
+            "bits": [ 7 ],
+            "attributes": {
+              "src": "/root/half_adder.v:7.18-7.23"
+            }
+          },
+          "a": {
+            "hide_name": 0,
+            "bits": [ 2 ],
+            "attributes": {
+              "src": "/root/half_adder.v:2.9-2.10"
+            }
+          },
+          "b": {
+            "hide_name": 0,
+            "bits": [ 3 ],
+            "attributes": {
+              "src": "/root/half_adder.v:3.9-3.10"
+            }
+          },
+          "c": {
+            "hide_name": 0,
+            "bits": [ 4 ],
+            "attributes": {
+              "src": "/root/half_adder.v:4.9-4.10"
+            }
+          },
+          "carry": {
+            "hide_name": 0,
+            "bits": [ 6 ],
+            "attributes": {
+              "src": "/root/half_adder.v:5.10-5.15"
+            }
+          },
+          "sum": {
+            "hide_name": 0,
+            "bits": [ 5 ],
+            "attributes": {
+              "src": "/root/half_adder.v:6.10-6.13"
+            }
+          }
         }
+      }
     }
-}
\ No newline at end of file
+  }
+  
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index a1c4878..09bbb28 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,17 +6,22 @@
 </template>
 
 <script setup>
-import { useI18n } from 'vue-i18n';
 import Render from '@/components/render';
 import RightNav from '@/components/right-nav.vue';
-import { onMounted } from 'vue';
+import { onMounted, watch } from 'vue';
 import { setDefaultCss } from './hook/css';
-import { NetlistRender } from './hook/render';
 
-import * as d3 from 'd3';
-import { globalLookup } from './hook/global';
+import { globalLookup, globalSetting } from './hook/global';
+
+// 监听 globalSetting 并录入 localStorage
+watch(
+    () => globalSetting,
+    () => {
+        localStorage.setItem('setting', JSON.stringify(globalSetting));
+    },
+    { deep: true }
+);
 
-const { t } = useI18n();
 
 onMounted(async () => {
     // 设置 css 宏，纠正样式
@@ -29,7 +34,7 @@ onMounted(async () => {
     const skinManager = globalLookup.skinManager;
 
     skinManager.load(skinBinary);
-    
+
     render.load(netJson);
     const layout = await render.createLayout();
     const svg = await render.render(layout, '#netlist');
diff --git a/src/components/setting/index.vue b/src/components/setting/index.vue
index ce715e5..1a1de52 100644
--- a/src/components/setting/index.vue
+++ b/src/components/setting/index.vue
@@ -48,7 +48,6 @@
                         </span>
                     <el-switch
                         v-model="globalSetting.renderAnimation"
-                        size="large"
                         active-text="ON"
                         inactive-text="OFF"
                     />
@@ -66,7 +65,7 @@ import { useI18n } from 'vue-i18n';
 
 defineComponent({ name: "dide-setting" });
 const { t, locale } = useI18n();
-
+locale.value = globalSetting.language;
 
 watch(
     () => locale.value,
@@ -85,7 +84,7 @@ function confirmLanguageDialog() {
 
 function onlanguagechange(code) {
     const option = languageSetting.options.find(item => item.value === code);
-    currentLanguage.value = option.text;    
+    currentLanguage.value = option.text;
     languageDialogShow.value = true;
 }
 
diff --git a/src/hook/global.js b/src/hook/global.js
index 46f3044..ece5821 100644
--- a/src/hook/global.js
+++ b/src/hook/global.js
@@ -22,20 +22,6 @@ export const globalLookup = {
      */
     netlistRender: new NetlistRender(),
 
-    /**
-     * @type {number}
-     */
-    svgScale: 1,
-
-    /**
-     * @type {number}
-     */
-    svgTranslateX: 0,
-
-    /**
-     * @type {number}
-     */
-    svgTranslateY: 0
 };
 
 function loadSetting() {
diff --git a/src/hook/render/cell.js b/src/hook/render/cell.js
index 6017bb3..d6f099f 100644
--- a/src/hook/render/cell.js
+++ b/src/hook/render/cell.js
@@ -1,13 +1,16 @@
 import * as d3 from 'd3';
 import { globalSetting } from '../global';
+import { NetlistRender } from '.';
 
 export class CellRender {
     /**
      * 
      * @param {d3.Selection} selection 
+     * @param {NetlistRender} rootRender 
      */
-    constructor(selection, cells) {
+    constructor(selection, rootRender) {
         this.parentSelection = selection;
+        this.rootRender = rootRender;
 
         /**
          * @type {BasicD3DataItem[]}
@@ -33,6 +36,7 @@ export class CellRender {
 
     render() {
         const data = this.data;
+        const rootRender = this.rootRender;
 
         let cellSelections = this.parentSelection.selectAll('g')
             .data(data)
@@ -53,19 +57,22 @@ export class CellRender {
                 .duration(1000)
                 .attr('stroke-opacity', 1)
                 .attr('class', 'grab')
-                .on('end', function (data) {
-                    console.log('enter end');
-                    
+                .on('end', function (data) {                    
                     const cellSelection = d3.select(this);
-                    registerDragEvent(cellSelection, data);
+
+
+                    registerDragEvent(cellSelection, data, rootRender);
                 });
         } else {
             cellSelections = cellSelections
                 .attr('class', 'grab')
                 .each(function (data) {
-                    console.log('enter end'); // 在这里执行你需要的逻辑
                     const cellSelection = d3.select(this);
-                    registerDragEvent(cellSelection, data);
+
+                    // 计算最小拓扑图
+                    const mintoGraph = undefined;
+
+                    registerDragEvent(cellSelection, data, rootRender);
                 });
         }
 
@@ -80,14 +87,15 @@ export class CellRender {
  * 需要提取最小拓扑子图，然后重新调整各个区域的尺寸
  * @param {d3.Selection} selection
  * @param {any} data
+ * @param {NetlistRender} rootRender
  */
-export function registerDragEvent(selection, data) {
+export function registerDragEvent(selection, data, rootRender) {
     // 创建拖拽行为
     const drag = d3.drag();
 
-    drag.on('start', event => dragStart(event, selection, data));
-    drag.on('drag', event => dragged(event, selection, data));
-    drag.on('end', event => dragEnd(event, selection, data))
+    drag.on('start', async event => dragStart(event, selection, data));
+    drag.on('drag', async event => dragged(event, selection, data, rootRender));
+    drag.on('end', async event => dragEnd(event, selection, data))
     
     selection.call(drag);
 }
@@ -105,14 +113,20 @@ function dragStart(event, selection, data) {
  * 
  * @param {d3.D3DragEvent} event 
  * @param {d3.Selection} selection 
+ * @param {NetlistRender} rootRender 
  */
-function dragged(event, selection, data) {
+function dragged(event, selection, data, rootRender) {
+    // 当拖动结束时，D3 会根据绑定的数据（data.x 和 data.y）重新渲染元素，导致元素回到初始位置。
+    // 所以需要 手动更新 data.x 和 data.y
     data.x = event.x;
     data.y = event.y;
     
     selection
         .attr('x', event.x)
         .attr('y', event.y);
+    
+    // 根据最小拓扑图，提取出关键点，重新计算布局
+
 }
 
 /**
diff --git a/src/hook/render/index.js b/src/hook/render/index.js
index fbaca85..0acf72f 100644
--- a/src/hook/render/index.js
+++ b/src/hook/render/index.js
@@ -31,11 +31,31 @@ export class NetlistRender {
             edges: []
         };
 
+        /**
+         * @type {import('elkjs').ELK}
+         */
+        this.elk = new ELK();
+
         /**
          * @type {Map<string, Module>}
          */
         this.nameToModule = new Map();
 
+        this.maxX = -1;
+        this.minX = 1e12;
+        this.maxY = -1;
+        this.minY = 1e12;
+
+        /**
+         * @type {number} 一开始绘制完成后整体的横向偏移量（默认一开始从左上角开始画，不居中）
+         */
+        this.startOffsetX = 0;
+
+        /**
+         * @type {number} 一开始绘制完成后整体的纵向偏移量（默认一开始从左上角开始画，不居中）
+         */
+        this.startOffsetY = 0;
+
     }
 
     /**
@@ -48,16 +68,19 @@ export class NetlistRender {
          */
         this.rawNet = rawNet;
 
-        // 转换为 elkjs 格式的 graph
+        // 构造模块树
         for (const [moduleName, rawModule] of Object.entries(rawNet.modules)) {
             const top = parseInt(rawModule.attributes.top);
-            // 一开始只渲染 top 模块
+            // 一开始只渲染 top 模块，或者告诉我当前的 top 是什么
             if (top) {
                 const module = new Module(moduleName, rawModule);
+
+                // 构造符合 elk 格式的节点数据
                 const portNodes = module.makeNetsElkNodes();
                 const cellNodes = module.makeCellsElkNodes();
                 const [constantNodes, connectionEdges] = module.makeConnectionElkNodes();
 
+                // 挂载到渲染图中
                 this.elkGraph.children.push(...portNodes);
                 this.elkGraph.children.push(...cellNodes);
                 this.elkGraph.children.push(...constantNodes);
@@ -73,15 +96,21 @@ export class NetlistRender {
      * @returns {Promise<ElkNode>}
      */
     async createLayout() {
-        const elk = new ELK();
         const graph = this.elkGraph;
-        const layoutGraph = await elk.layout(graph, {
+
+        const start = performance.now();
+        const layoutGraph = await this.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'
             }
         });
+        const timecost = (performance.now() - start).toFixed(3);
+        console.log(
+            `%c 布局计算耗时 ${timecost} ms`,
+            'background-color: #CB81DA; color: white; padding: 3px; border-radius: 3px;'
+        );
 
         return layoutGraph;
     }
@@ -132,6 +161,8 @@ export class NetlistRender {
         // 将分组作为一个后续操作的 parent selection
         const g = svg.append('g');
 
+        console.log(computedLayout);
+
         await this.renderLine(g, computedLayout, ratio);
         await this.renderEntity(g, computedLayout, ratio);
 
@@ -139,7 +170,10 @@ export class NetlistRender {
         this.selection = svg;
 
         // 注册平移和缩放
-        // this.registerRenderTransform(g);
+        this.registerRenderTransform(g);
+
+        // 根据最大最小尺寸微调全局方位
+        this.adjustLocation(g);
         
         return svg;
     }
@@ -164,6 +198,9 @@ export class NetlistRender {
         this.connectionRender = new ConnectionRender(parentSelection);
 
         for (const node of computedLayout.children) {
+            // 只计算形体的，因为 连接点 非常小，几乎不影响布局
+            this.updateMaxMinSize(node.x, node.y, node.width, node.height);
+
             const skin = skinManager.querySkin(node.renderName);
             if (skin) {
                 // 具有 skin 的器件
@@ -223,15 +260,16 @@ export class NetlistRender {
         // 创建缩放行为
         const zoom = d3.zoom()
             // 设置缩放范围（最小缩放比例 0.5，最大缩放比例 5）
-            .scaleExtent([0.5, 5])
+            .scaleExtent([0.1, 10])
             .on("zoom", zoomed);
 
         // 将缩放行为应用到 SVG
         this.selection.call(zoom);
+        this.zoom = zoom;
 
         // 缩放事件处理函数
         function zoomed(event) {
-            const { transform, sourceEvent } = event;            
+            const { transform, sourceEvent } = event;
 
             if (sourceEvent && sourceEvent.type === "wheel") {
                 if (globalSetting.renderAnimation) {
@@ -248,54 +286,64 @@ export class NetlistRender {
                 } else {
                     parentSelection.attr('transform', transform);
                 }
+            } else {
+                // 系统调用的变换，慢一点变换
+                if (globalSetting.renderAnimation) {
+                    parentSelection
+                        .transition()
+                        .duration(1000)
+                        .attr('transform', transform);
+                } else {
+                    parentSelection.attr('transform', transform);
+                }
             }
         }
     }
 
+
+    updateMaxMinSize(x, y, width, height) {
+        let x1 = x;
+        let y1 = y;
+        let x2 = x1 + width;
+        let y2 = y1 + height;
+
+        this.minX = Math.min(this.minX, x1);
+        this.maxX = Math.max(this.maxX, x2);
+        this.minY = Math.min(this.minY, y1);
+        this.maxY = Math.max(this.maxY, y2);
+    }
+    
     /**
-     * @description 从 globalLookup 中更新 svg 的方位
+     * @description 调整位姿
+     * @param {d3.Selection} parentSelection 
      */
-    updateLocationFromGlobal() {
-        // const svg = globalLookup.netlistRender.selection;
-        // if (!svg) {
-        //     return;
+    adjustLocation(parentSelection) {
+        const renderHeight = this.renderHeight;
+        const renderWidth = this.renderWidth;
+        // TODO: 更加智能的方位调整
+        const cx = (this.minX + this.maxX) / 2;
+        const cy = (this.minY + this.maxY) / 2;
+
+        this.startOffsetX = renderWidth / 2 - cx;
+        this.startOffsetY = renderHeight / 2 - cy;
+
+        const transform = d3.zoomIdentity.translate(
+            this.startOffsetX, this.startOffsetY
+        );
+
+        this.selection.call(
+            this.zoom.transform,
+            transform
+        );
+
+        // if (globalSetting.renderAnimation) {
+        //     parentSelection
+        //         .transition()
+        //         .duration(1000)
+        //         .attr('transform', transform);
+        // } else {
+        //     parentSelection.attr('transform', transform);
         // }
-        
-        // svg.attr('transform', `translate(${globalLookup.svgTranslateX}, ${globalLookup.svgTranslateY}) scale(${globalLookup.svgScale})`);    
     }
 
-    /**
-     * @description 渲染 module 中的 port
-     */
-    renderPorts() {
-
-    }
-
-    /**
-     * @description 渲染 module 中的例化模块
-     */
-    renderInstantiations() {
-
-    }
-
-    /**
-     * @description 渲染 module 中的基础器件
-     */
-    renderCells() {
-
-    }
-
-    /**
-     * @description 渲染每一个 例化模块/基础器件 的接入端口
-     */
-    renderConnections() {
-
-    }
-
-    /**
-     * @description 渲染连线
-     */
-    renderWires() {
-
-    }
 }
\ No newline at end of file
diff --git a/src/hook/render/layout.js b/src/hook/render/layout.js
index 3aa740d..c6f8f46 100644
--- a/src/hook/render/layout.js
+++ b/src/hook/render/layout.js
@@ -3,7 +3,7 @@
  */
 
 import { globalLookup } from "../global";
-import { Cell, CELL_LIBS, ModuleTree } from "./yosys";
+import { Cell, ModuleTree } from "./yosys";
 
 export const SKIN_SCALE = 1;
 export const LINE_WIDTH = 2;
@@ -33,16 +33,9 @@ export const ELK_DIRECTION = {
     BOTTOM: 'SOUTH'
 }
 
-/**
- * 
- * @param {Cell} cell 
- */
-function getInstanceSize(cell) {
-    // 根据 port 尺寸来进行计算
-}
 
-function makeEdgeId(fromId, toId) {
-    return 'edge-' + fromId + '-' + toId;
+export function makeEdgeId(fromId, toId) {
+    return fromId + '-' + toId;
 }
 
 export class Module {
@@ -229,8 +222,6 @@ export class Module {
 
         for (const cellName of tree.nameToCell.keys()) {
             const cell = tree.nameToCell.get(cellName);
-            // 当前器件的 ID
-            const cellId = cell.id;
             
             for (const connectionName of cell.nameToConnection.keys()) {
                 const connection = cell.nameToConnection.get(connectionName);
@@ -257,7 +248,7 @@ export class Module {
 
                         // 创建常数到器件的连线
                         const edge = {
-                            id: makeEdgeId(cellId, id),
+                            id: makeEdgeId(cell.id, id),
                             sources: [connection.id],
                             targets: [id]
                         };
@@ -268,11 +259,14 @@ export class Module {
                         // 1. 当前的器件的这个端口和某一个 port 连接
                         // 2. 当前的器件的这个端口和另一个器件的一个端口连接
                         if (tree.wireIdToPort.has(wireId)) {
+
+                            // 当前的器件的这个端口和某一个 port 连接
                             const port = tree.wireIdToPort.get(wireId);
 
                             if (port.direction === 'input') {
                                 const edge = {
-                                    id: makeEdgeId(cellId, port.id),
+                                    // id 遵循 sourcePort-targetPort
+                                    id: makeEdgeId(port.id, cell.id),
                                     source: port.id,
                                     sourcePort: port.id,
                                     target: cell.id,
@@ -282,7 +276,7 @@ export class Module {
                                 edges.push(edge);
                             } else {
                                 const edge = {
-                                    id: makeEdgeId(cellId, port.id),
+                                    id: makeEdgeId(cell.id, port.id),
                                     source: cell.id,
                                     sourcePort: connection.id,
                                     target: port.id,
@@ -292,14 +286,32 @@ export class Module {
                                 edges.push(edge);
                             }
                         } else if (tree.wireIdToConnection.has(wireId)) {
-                            const connection = tree.wireIdToConnection.get(wireId);
-                            const edge = {
-                                id: makeEdgeId(cellId, connection.id),
-                                sources: [cellId],
-                                targets: [connection.id]
-                            };
+                            
+                            // 当前的器件的这个端口和另一个器件的一个端口连接
+                            const conn = tree.wireIdToConnection.get(wireId);
 
-                            edges.push(edge);
+                            if (conn.direction === 'input') {
+                                const edge = {
+                                    // id 遵循 sourcePort-targetPort
+                                    id: makeEdgeId(conn.id, cell.id),
+                                    source: conn.cell.id,
+                                    sourcePort: conn.id,
+                                    target: cell.id,
+                                    targetPort: connection.id
+                                };
+    
+                                edges.push(edge);
+                            } else {
+                                const edge = {
+                                    id: makeEdgeId(cell.id, conn.id),
+                                    source: cell.id,
+                                    sourcePort: connection.id,
+                                    target: conn.id,
+                                    targetPort: conn.cell.id
+                                };
+    
+                                edges.push(edge);
+                            }
                         }
                     }
                 }
diff --git a/src/hook/render/port.js b/src/hook/render/port.js
index 1629146..17974f5 100644
--- a/src/hook/render/port.js
+++ b/src/hook/render/port.js
@@ -47,12 +47,10 @@ export class PortRender {
         
 
         portSelections.append("text")
-            .attr("x", d => d.width / 2) // 文本的 x 坐标（居中）
-            .attr("y", d => d.height / 2) // 文本的 y 坐标（居中）
-            .attr("text-anchor", "middle") // 文本水平居中
-            .attr("dominant-baseline", "middle") // 文本垂直居中
-            .text(d => d.text)      // 设置文本内容
-            .attr("fill", "black"); // 文本颜色
+            .attr("x", d => d.width / 2)
+            .attr("y", d => d.height / 2)
+            .text(d => d.text)
+            .attr('font-size', '12px');
 
         if (globalSetting.renderAnimation) {
             portSelections = portSelections
diff --git a/src/hook/render/yosys.js b/src/hook/render/yosys.js
index 339f75a..5e672f4 100644
--- a/src/hook/render/yosys.js
+++ b/src/hook/render/yosys.js
@@ -1,29 +1,3 @@
-/**
- * @type {Record<string, string>} yosys 器件映射
- * - key: 器件的 type，比如 $_AND_
- * - value: 器件对应的我们内部的名称，用于检索皮肤系统的
- */
-export const CELL_LIBS = {
-    "$_AND_": "and",
-    "$_XOR_": "xor",
-    "$_NOT_": "not",
-    "$_OR_": "or",
-    "$_NAND_": "nand",
-    "$_NOR_": "nor",
-    "$_XNOR_": "xnor",
-    "$_MUX_": "mux",
-    "$_AOI3_": "aoi3",
-    "$_OAI3_": "oai3",
-    "$_AOI4_": "aoi4",
-    "$_OAI4_": "oai4",
-    "$_DFF_P_": "dff_pos",
-    "$_DFF_N_": "dff_neg",
-    "$_SR_NN_": "sr_nn",
-    "$_SR_NP_": "sr_np",
-    "$_SR_PN_": "sr_pn",
-    "$_SR_PP_": "sr_pp"
-};
-
 /**
  * @description 模块树对象，直接作为 treeview 的渲染视图加入运算
  * 相比于 YosysNetModule, ModuleTree 只关心和渲染有关的那部分变量，且不可被序列化
diff --git a/src/hook/wheel-event.js b/src/hook/wheel-event.js
index 5035b35..3d0411a 100644
--- a/src/hook/wheel-event.js
+++ b/src/hook/wheel-event.js
@@ -18,19 +18,11 @@ function windowsKeydown(element, event) {
     if (event.ctrlKey) {
         if (deltaY < 0) {
             // scale up
-            const nextScale = globalLookup.svgScale + 0.1;
-            if (nextScale <= MAX_SCALE) {
-                globalLookup.svgScale = nextScale;
-                globalLookup.netlistRender.updateLocationFromGlobal();
-            }
+
 
         } else if (deltaY > 0) {
             // scale down
-            const nextScale = globalLookup.svgScale - 0.1;
-            if (nextScale >= MIN_SCALE) {
-                globalLookup.svgScale = nextScale;
-                globalLookup.netlistRender.updateLocationFromGlobal();
-            }
+
         }
 
         event.preventDefault();
@@ -39,28 +31,20 @@ function windowsKeydown(element, event) {
     } else if (deltaX !== 0 && deltaY === 0) {
         if (deltaX > 0) {
             // scroll left
-            const translateX = globalLookup.svgTranslateX - 50;
-            globalLookup.svgTranslateX = translateX;
-            globalLookup.netlistRender.updateLocationFromGlobal();
+
         } else {
             // scroll right
-            const translateX = globalLookup.svgTranslateX + 50;
-            globalLookup.svgTranslateX = translateX;
-            globalLookup.netlistRender.updateLocationFromGlobal();
+
         }
 
         event.preventDefault();
     } else if (deltaX === 0 && deltaY !== 0) {
         if (deltaY > 0) {
             // scroll up
-            const translateY = globalLookup.svgTranslateY - 50;
-            globalLookup.svgTranslateY = translateY;
-            globalLookup.netlistRender.updateLocationFromGlobal();
+
         } else {
             // scroll down
-            const translateY = globalLookup.svgTranslateY + 50;
-            globalLookup.svgTranslateY = translateY;
-            globalLookup.netlistRender.updateLocationFromGlobal();
+
         }
 
         event.preventDefault();