实现连接点的箭头

public/netlist.css

@@ -22,6 +22,8 @@
     --port-color: rgb(70, 70, 222);
     --port-fill-color: rgba(70, 70, 222, 0.25);
 
+    --line-arrow-opacity: 1;
+
     /* css 动画属性 */
     --animation-7s: .7s cubic-bezier(0.23,1,0.32,1);
     --animation-5s: .5s cubic-bezier(0.23,1,0.32,1);

src/components/setting/index.vue

@@ -62,6 +62,7 @@
                         {{ t('render-arrow') }}
                     </span>
                     <el-switch
+                        @change="onRenderArrowChange"
                         v-model="globalSetting.renderArrow"
                         active-text="ON"
                         inactive-text="OFF"
@@ -171,10 +172,18 @@ function onlanguagechange(code) {
     languageDialogShow.value = true;
 }
 
+function onRenderArrowChange() {
+    const rootStyles = getComputedStyle(document.documentElement);
+    if (globalSetting.renderArrow) {
+        document.documentElement.style.setProperty(`--line-arrow-opacity`, '1');
+    } else {
+        document.documentElement.style.setProperty(`--line-arrow-opacity`, '0');
+    }
+}
+
 onMounted(() => {
     colorManager.initColor();
-})
+});
-
 
 </script>
 

src/hook/render/wire.js

@@ -3,7 +3,8 @@
 import * as d3 from 'd3';
 import { globalSetting } from '../global';
 import { NetlistRender } from '.';
-import { LINE_WIDTH } from './layout';
+import { LAYOUT_CONSTANT, LINE_WIDTH } from './layout';
+import { svgResource } from '../skin/draw';
 
 export class WireRender {
     /**
@@ -25,6 +26,9 @@ export class WireRender {
          * @type {Map<string, BasicD3ManagmentItem[]>}
          */
         this.id2manager = rootRender.id2manager;
+
+        this.arrowHeight = 12;
+        this.arrowWidth = 12;
     }
 
     /**
@@ -44,8 +48,25 @@ export class WireRender {
 
         const lineSvg = linePaths.join(' ');
 
+        // 判断当前的朝向
+        const endPoint = points.at(-1);
+        const direction = endPoint.x > points.at(-2).x ? 'right' : 'left';
+        const arrowX = direction === 'right' ? endPoint.x - LAYOUT_CONSTANT.CELL_PORT_WIDTH - this.arrowWidth:
+                                               endPoint.x + LAYOUT_CONSTANT.CELL_PORT_WIDTH
+        
+        const arrowY = endPoint.y - this.arrowHeight / 2;
+        
+
         this.data.push({
             svg: lineSvg,
+            endPoint: points.at(-1),
+            arrow: {
+                icon: direction + '-arrow',
+                x: arrowX,
+                y: arrowY,
+                width: this.arrowWidth,
+                height: this.arrowHeight
+            },
             active: false
         });
     }
@@ -55,8 +76,10 @@ export class WireRender {
         const id2manager = this.id2manager;
         const _this = this;
 
+        const arrowHeight = 12;
+        const arrowWidth = 12;
+
 
-        // 一个 g.lines 管理一个线段
         let lineSelections = this.selection.selectAll('path.lines')
             .data(data)
             .enter()
@@ -66,6 +89,25 @@ export class WireRender {
             .attr("fill", "none")
             .attr('stroke', 'var(--wire-color)');
         
+        let arrowSelections = this.selection.selectAll('svg.line-arrow')
+            .data(data)
+            .enter()
+            .append(data => {
+                const arrowInfo = data.arrow;
+
+                // 获取箭头 svg
+                const element = svgResource.get(arrowInfo.icon);
+
+                element.setAttribute('x', arrowInfo.x);
+                element.setAttribute('y', arrowInfo.y);
+                element.setAttribute('width', arrowInfo.width);
+                element.setAttribute('height', arrowInfo.height);
+                element.setAttribute('opacity', 'var(--line-arrow-opacity)');
+                
+                return element;
+            });
+
+        arrowSelections.raise();
 
         const id2animation = new Map();
 
@@ -125,31 +167,6 @@ export class WireRender {
             selection.attr('stroke', 'var(--wire-color)');
         });
 
-        // linesContainer.each(function(lines) {
-        //     // 为每一个线段分别创建对应的对象
-        //     const lineSelection = d3.select(this)
-        //         .selectAll('.line')
-        //         .data(lines)
-        //         .enter()
-        //         .append('line')
-        //         .attr('x1', data => data.x1)
-        //         .attr('y1', data => data.y1)
-        //         .attr('x2', data => data.x2)
-        //         .attr('y2', data => data.y2)
-        //         .attr('stroke', 'var(--wire-color)');
-
-        //     lineSelection.on('mouseenter', function(_, data) {
-        //         console.log('enter enter');
-        //     });
-
-        //     lineSelection.on('mouseleave', function(_, data) {
-        //         console.log('enter leave');
-        //     });
-
-        //     lineSelection.on('click', function(_, data) {
-        //         console.log('click');
-        //     });
-        // });
         
         if (globalSetting.renderAnimation) {
             lineSelections = lineSelections

src/hook/skin/draw.js

@@ -4,6 +4,14 @@ export const DIDE_DRAW_SVG_STRINGS = [
     {
         name: 'full-screen',
         source: '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735474395064" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3925" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0.042667 749.792759v164.515811A110.075414 110.075414 0 0 0 109.691431 1023.957335h164.515812a54.867047 54.867047 0 1 0 0-109.648765H109.691431V749.792759a54.867047 54.867047 0 1 0-109.648764 0zM329.07429 54.867047A54.867047 54.867047 0 0 0 274.207243 0H109.691431A110.075414 110.075414 0 0 0 0.042667 109.648765v164.515811a54.867047 54.867047 0 1 0 109.648764 0V109.648765h164.515812a54.867047 54.867047 0 0 0 54.867047-54.781718z m365.894088 0c0 30.292071 24.574976 54.781717 54.867047 54.781718h164.515812v164.515811a54.867047 54.867047 0 0 0 109.648765 0V109.648765A110.075414 110.075414 0 0 0 914.351237 0H749.835425a54.867047 54.867047 0 0 0-54.867047 54.867047z m0 914.223241c0 30.292071 24.574976 54.867047 54.867047 54.867047h164.515812A110.075414 110.075414 0 0 0 1024.000002 914.30857V749.792759a54.867047 54.867047 0 1 0-109.648765 0v164.515811H749.835425a54.867047 54.867047 0 0 0-54.867047 54.781718z" fill="#000000" p-id="3926"></path><path d="M512.021334 261.36511A250.698888 250.698888 0 1 0 729.612268 387.397192a50.08858 50.08858 0 1 0-87.036374 49.83259A150.436398 150.436398 0 1 1 512.021334 361.542269a50.173909 50.173909 0 0 0 0-100.262489z" fill="#000000" p-id="3927"></path></svg>'
+    },
+    {
+        name: 'right-arrow',
+        source: '<svg t="1735491528131" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2578" width="200" height="200"><path d="M192.3 834.2L192.3 191.8c0-83.4 115-125.2 182.2-66.2l360.2 315.90000001c44.8 39.3 44.8 103.7 0 143l-360.2 315.89999999c-67.20000001 59-182.2 17.2-182.2-66.2z" p-id="2579" fill="#000000"></path></svg>'
+    },
+    {
+        name: 'left-arrow',
+        source: '<svg t="1735492154881" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2580" width="200" height="200"><path d="M831.7 189.8L831.7 832.2c0 83.4-115 125.2-182.2 66.2l-360.2-315.90000001c-44.8-39.3-44.8-103.7 0-143l360.2-315.89999999c67.20000001-59 182.2-17.2 182.2 66.2z" p-id="2581" fill="#000000"></path></svg>'
     }
 ];
 

vue.config.js

@@ -1,4 +1,22 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+    transpileDependencies: true,
+    chainWebpack: (config) => {
+        config.plugin('define').tap((definitions) => {
+            Object.assign(definitions[0], {
+                __VUE_OPTIONS_API__: 'true',
+                __VUE_PROD_DEVTOOLS__: 'false',
+                __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
+            })
+            return definitions;
+        })
+    },
+    publicPath: './',
+    configureWebpack: {
+        devtool: false,
+    },
+    devServer: {
+        hot: false,
+        liveReload: false
+    }
 })