实现连接点的箭头
This commit is contained in:
parent
3e2c7e3ae0
commit
033182d8af
@ -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);
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@ -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
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user