取消部分组件的颜色参数化

public/netlist.css

@@ -16,6 +16,7 @@
     --instance-color: #CB81DA;
     --instance-fill-color: rgba(203, 129, 218, 0.1);
     --wire-color: var(--foreground);
+    --cross-dot-color: var(--foreground);
     --port-color: rgb(70, 70, 222);
     --port-fill-color: rgba(70, 70, 222, 0.1);
 

src/components/setting/color.js

@@ -25,6 +25,12 @@ export const colorManager = reactive({
             type: 'instance',
             label: t('common.instance'),
             color: 'white',
+        },
+        {
+            value: 3,
+            type: 'cross-dot',
+            label: t('cross-dot'),
+            color: 'white'
         }
     ],
 

src/hook/render/cross-dot.js

@@ -0,0 +1,101 @@
+import * as d3 from 'd3';
+import { globalSetting } from '../global';
+import { NetlistRender } from '.';
+
+export class CrossDotRender {
+    /**
+     * @param {d3.Selection} selection
+     * @param {NetlistRender} rootRender
+     */
+    constructor(selection, rootRender) {
+        this.parentSelection = selection;
+        this.rootRender = rootRender;
+        
+        /**
+         * @type {BasicD3DataItem[]}
+         */
+        this.data = [];
+
+        /**
+         * @description id 到管理数据项的映射
+         * @type {Map<string, BasicD3ManagmentItem[]>}
+         */
+        this.id2manager = rootRender.id2manager;
+        
+        this.crossId = 0;
+    }
+
+    /**
+     * @description 将 elknode 关于 module connection 的数据添加为 d3 数据项目
+     * @param {ElkPort} cellPort 连接点对象
+     * @param {ElkNode} node 当前的实体（port/例化模块/器件）
+     */
+    addAsD3DataItem(cellPort, node) {
+        this.data.push({
+            id: this.crossId,
+            x: cellPort.x + node.x,
+            y: cellPort.y + node.y + 0.5,       // 0.5 是为了线宽
+            width: cellPort.width,
+            height: cellPort.height,
+            text: '',
+            r: 3.5
+        });
+
+        this.crossId ++;
+    }
+
+    render() {
+        const data = this.data;
+        const id2manager = this.id2manager;
+        const _this = this;
+
+        let connectionSelections = this.parentSelection.selectAll('circle')
+            .data(data)
+            .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', 'var(--cross-dot-color)')
+            .attr('r', d => d.r)
+            .each(function (data) {
+                const selection = d3.select(this);
+                const manager = _this.createDataManager(selection, data);
+            });
+
+        this.selections = connectionSelections;
+        return connectionSelections;
+    }
+
+    /**
+     * 
+     * @param {d3.Selection} selection 
+     * @param {BasicD3DataItem} data 
+     * @returns {BasicD3ManagmentItem}
+     */
+    createDataManager(selection, data) {
+        const id2manager = this.id2manager;
+        // connection 不需要拖拽上下文
+        const managerItem = {
+            data,
+            selection,
+            type: 'connection'
+        };
+
+        if (!id2manager.has(data.id)) {
+            id2manager.set(data.id, []);
+        }
+
+        id2manager.get(data.id).push(managerItem);
+        return managerItem;
+    }
+}

src/hook/render/instantiation.js

@@ -57,7 +57,6 @@ export class InstantiationRender {
             name: node.name,
             width: node.width,
             height: node.height,
-            fill: 'var(--instance-fill-color)',
             text: node.renderName,
             portnames,
             rx: 3,
@@ -202,7 +201,7 @@ export class InstantiationRender {
                 .duration(1000)
                 .attr('fill', d => {
                     const children = d._self.children || [];
-                    return children.length > 0 ? 'rgba(203, 129, 218, 0.1)' : d.fill;
+                    return children.length > 0 ? 'rgba(203, 129, 218, 0.1)' : 'var(--instance-fill-color)';
                 })
                 .attr('stroke', 'var(--instance-color)')
                 .attr('stroke-width', 2);
@@ -211,7 +210,7 @@ export class InstantiationRender {
             instances
                 .attr('fill', d => {
                     const children = d._self.children || [];
-                    return children.length > 0 ? 'rgba(203, 129, 218, 0.1)' : d.fill;
+                    return children.length > 0 ? 'rgba(203, 129, 218, 0.1)' : 'var(--instance-fill-color)';
                 })
                 .attr('stroke', 'var(--instance-color)')
                 .attr('stroke-width', 2)            

src/hook/render/port.js

@@ -36,7 +36,6 @@ export class PortRender {
             y: node.y,
             width: node.width,
             height: node.height,
-            fill: 'var(--port-fill-color)',
             text: node.renderName,
             rx: 3,
             ry: 3
@@ -59,7 +58,7 @@ export class PortRender {
         let ports = portSelections.append('rect')
             .attr('width', data => data.width)
             .attr('height', data => data.height)
-            .attr('fill', d => d.fill);
+            .attr('fill', 'var(--port-fill-color)');
         
         let texts = portSelections.append('text')
             .attr('x', data => data.width / 2)              // 文本的 x 坐标（居中）

src/hook/render/wire.js

@@ -37,8 +37,7 @@ export class WireRender {
                 y1: points[i].y,
                 x2: points[i + 1].x,
                 y2: points[i + 1].y,
-                strokeWidth: 2,
+                strokeWidth: 2
-                color: 'var(--wire-color)'
             });
         }
     }
@@ -56,7 +55,7 @@ export class WireRender {
             .attr('y1', data => data.y1)
             .attr('x2', data => data.x2)
             .attr('y2', data => data.y2)
-            .attr('stroke', data => data.color);
+            .attr('stroke', 'var(--wire-color)');
         
         if (globalSetting.renderAnimation) {
             lineSelections = lineSelections

src/i18n/ar.json

@@ -23,5 +23,6 @@
     "common.line": "خط",
     "common.port": "المنفذ",
     "common.instance": "تجهيز الوحدة",
-    "setting.general-color-setting": "إعدادات الألوان العامة"
+    "setting.general-color-setting": "إعدادات الألوان العامة",
+    "cross-dot": "تقاطع"
 }

src/i18n/de.json

@@ -23,5 +23,6 @@
     "common.line": "Linie",
     "common.port": "Port",
     "common.instance": "Modul instanziieren",
-    "setting.general-color-setting": "Allgemeine Farbeinstellungen"
+    "setting.general-color-setting": "Allgemeine Farbeinstellungen",
+    "cross-dot": "Kreuzung"
 }

src/i18n/en.json

@@ -23,5 +23,6 @@
     "common.line": "line",
     "common.port": "Port",
     "common.instance": "Instantiate module",
-    "setting.general-color-setting": "General Color Settings"
+    "setting.general-color-setting": "General Color Settings",
+    "cross-dot": "Intersection"
 }

src/i18n/fr.json

@@ -23,5 +23,6 @@
     "common.line": "ligne",
     "common.port": "Port",
     "common.instance": "Instancier le module",
-    "setting.general-color-setting": "Paramètres de couleur généraux"
+    "setting.general-color-setting": "Paramètres de couleur généraux",
+    "cross-dot": "Intersection"
 }

src/i18n/ja.json

@@ -23,5 +23,6 @@
     "common.line": "線",
     "common.port": "ポート",
     "common.instance": "モジュールのインスタンス化",
-    "setting.general-color-setting": "一般的な色設定"
+    "setting.general-color-setting": "一般的な色設定",
+    "cross-dot": "交差点"
 }

src/i18n/ko.json

@@ -23,5 +23,6 @@
     "common.line": "선",
     "common.port": "포트",
     "common.instance": "모듈 인스턴스화",
-    "setting.general-color-setting": "일반 색상 설정"
+    "setting.general-color-setting": "일반 색상 설정",
+    "cross-dot": "교차로"
 }

src/i18n/ru.json

@@ -23,5 +23,6 @@
     "common.line": "линия",
     "common.port": "Порт",
     "common.instance": "Создание экземпляра модуля",
-    "setting.general-color-setting": "Общие настройки цвета"
+    "setting.general-color-setting": "Общие настройки цвета",
+    "cross-dot": "Перекресток"
 }

src/i18n/zh-cn.json

@@ -23,5 +23,6 @@
     "common.line": "线",
     "common.port": "端口",
     "common.instance": "例化模块",
-    "setting.general-color-setting": "通用颜色设置"
+    "setting.general-color-setting": "通用颜色设置",
+    "cross-dot": "交叉点"
 }

src/i18n/zh-tw.json

@@ -23,5 +23,6 @@
     "common.line": "線",
     "common.port": "端口",
     "common.instance": "實例化模組",
-    "setting.general-color-setting": "通用顏色設定"
+    "setting.general-color-setting": "通用顏色設定",
+    "cross-dot": "交叉點"
 }