update

src/App.vue

@@ -1,10 +1,13 @@
 <template>
+    <!-- 渲染区域 -->
+    <Render></Render>
     <!-- 右侧工具合集 -->
     <RightNav></RightNav>
 </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 { setDefaultCss } from './hook/css';
@@ -19,9 +22,10 @@ onMounted(async () => {
     // 初始化载入 netlist 的 json 文件
     const [ netJson ] = await window.readNetFile();
 
-    const render = new NetlistRender(netJson);
-    await render.createLayout();
-    
+    // TODO: 计算得到实际渲染的 size
+    const render = new NetlistRender(netJson, 800, 1000);
+    const layout = await render.createLayout();
+    await render.render(layout);
 });
 
 </script>

src/components/render/index.vue

@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <div id="netlist"></div>
+    </div>
+</template>
+
+<script setup>
+import { defineComponent } from 'vue';
+
+defineComponent({ name: 'netlist-render' });
+
+
+</script>
+
+<style>
+</style>

src/hook/render/index.js

@@ -8,13 +8,18 @@ export class NetlistRender {
     /**
      * 
      * @param {YosysRawNet} rawNet 
+     * @param {number} renderHeight
+     * @param {number} renderWidth
      */
-    constructor(rawNet) {
+    constructor(rawNet, renderHeight, renderWidth) {
         /**
          * @type {YosysRawNet}
          */
         this.rawNet = rawNet;
 
+        this.renderHeight = renderHeight;
+        this.renderWidth = renderWidth;
+
         /**
          * @type {ElkGraph}
          */
@@ -43,9 +48,9 @@ export class NetlistRender {
             // 一开始只渲染 top 模块
             if (top) {
                 const module = new Module(moduleName, rawModule);
-                const portNodes = layout.makeNetsElkNodes();
-                const cellNodes = layout.makeCellsElkNodes();
-                const [constantNodes, connectionEdges] = layout.makeConnectionElkNodes();
+                const portNodes = module.makeNetsElkNodes();
+                const cellNodes = module.makeCellsElkNodes();
+                const [constantNodes, connectionEdges] = module.makeConnectionElkNodes();
 
                 this.elkGraph.children.push(...portNodes);
                 this.elkGraph.children.push(...cellNodes);
@@ -67,6 +72,22 @@ export class NetlistRender {
         const layoutGraph = await elk.layout(graph, {});
         console.log(layoutGraph);
 
-        return layoutGraph
+        return layoutGraph;
+    }
+
+    /**
+     * 
+     * @param {ElkNode} computedLayout 
+     */
+    async render(computedLayout) {
+        const virtualHeight = computedLayout.height;
+        const virtualWidth = computedLayout.width;
+
+        // 根据 height 进行放缩（可以通过设置进行调整）
+        const ratio = this.renderHeight / virtualHeight;
+
+        // 遍历计算布局进行创建
+        
+
     }
 }

src/hook/render/layout.js

@@ -97,7 +97,8 @@ export class Module {
 
             // 创建器件节点的 port, port 和 connection 一一对应
             const ports = [];
-            for (const connectionName of cell.nameToConnection) {
+            
+            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({