From 033182d8af2adf63f76fe7f48abdc4f3648dbdd7 Mon Sep 17 00:00:00 2001 From: Kirigaya <1193466151@qq.com> Date: Mon, 30 Dec 2024 01:19:32 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E8=BF=9E=E6=8E=A5=E7=82=B9?= =?UTF-8?q?=E7=9A=84=E7=AE=AD=E5=A4=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/netlist.css | 2 + src/components/setting/index.vue | 13 +++++- src/hook/render/wire.js | 71 ++++++++++++++++++++------------ src/hook/skin/draw.js | 8 ++++ vue.config.js | 20 ++++++++- 5 files changed, 84 insertions(+), 30 deletions(-) diff --git a/public/netlist.css b/public/netlist.css index 88934aa..8d1198d 100644 --- a/public/netlist.css +++ b/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); diff --git a/src/components/setting/index.vue b/src/components/setting/index.vue index f7fdf19..cd2a5a9 100644 --- a/src/components/setting/index.vue +++ b/src/components/setting/index.vue @@ -62,6 +62,7 @@ {{ t('render-arrow') }} { colorManager.initColor(); -}) - +}); diff --git a/src/hook/render/wire.js b/src/hook/render/wire.js index d8f1c7f..e72e486 100644 --- a/src/hook/render/wire.js +++ b/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} */ 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(); @@ -124,32 +166,7 @@ export class WireRender { const selection = d3.select(this); 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 diff --git a/src/hook/skin/draw.js b/src/hook/skin/draw.js index 9d89e69..1b59e86 100644 --- a/src/hook/skin/draw.js +++ b/src/hook/skin/draw.js @@ -4,6 +4,14 @@ export const DIDE_DRAW_SVG_STRINGS = [ { name: 'full-screen', source: '' + }, + { + name: 'right-arrow', + source: '' + }, + { + name: 'left-arrow', + source: '' } ]; diff --git a/vue.config.js b/vue.config.js index 910e297..5130490 100644 --- a/vue.config.js +++ b/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 + } })