From 04b56a51819951d2b8a08eaa1e3e1cf09be80e74 Mon Sep 17 00:00:00 2001 From: Kirigaya <1193466151@qq.com> Date: Mon, 30 Dec 2024 18:37:47 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=84=89=E5=86=B2=E7=89=B9?= =?UTF-8?q?=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/render/index.vue | 2 +- src/hook/algorithm/range-tree.js | 16 +++++ src/hook/render/index.js | 2 + src/hook/render/wire.js | 21 ++++++- src/hook/skin/plusation.js | 101 +++++++++++++++++++++++++++++++ 5 files changed, 139 insertions(+), 3 deletions(-) create mode 100644 src/hook/algorithm/range-tree.js create mode 100644 src/hook/skin/plusation.js diff --git a/src/components/render/index.vue b/src/components/render/index.vue index 84e3816..40a3409 100644 --- a/src/components/render/index.vue +++ b/src/components/render/index.vue @@ -55,7 +55,7 @@ onMounted(async () => { .connection-line { cursor: pointer; - transition: var(--animation-5s); + transition: var(--animation-7s); } \ No newline at end of file diff --git a/src/hook/algorithm/range-tree.js b/src/hook/algorithm/range-tree.js new file mode 100644 index 0000000..0cdcfd7 --- /dev/null +++ b/src/hook/algorithm/range-tree.js @@ -0,0 +1,16 @@ +export class RangeTreeMap { + constructor() { + /** + * + */ + this.horizontal = new Map(); + + /** + * + */ + this.vertical = new Map(); + } + + +} + diff --git a/src/hook/render/index.js b/src/hook/render/index.js index d4e9597..31b4e0f 100644 --- a/src/hook/render/index.js +++ b/src/hook/render/index.js @@ -12,6 +12,7 @@ import { WireRender } from './wire'; import { pinkLog, redLog } from '../utils'; import { treeviewData } from '@/components/treeview/tree'; import { dotConnect } from './yosys'; +import { CrossDotRender } from './cross-dot'; export class NetlistRender { /** @@ -284,6 +285,7 @@ export class NetlistRender { */ async renderLine(parentSelection, computedLayout) { this.wireRender = new WireRender(parentSelection, this); + this.crossDotRender = new CrossDotRender(parentSelection, this); for (const edge of computedLayout.edges) { for (const section of edge.sections || []) { diff --git a/src/hook/render/wire.js b/src/hook/render/wire.js index a479151..287731a 100644 --- a/src/hook/render/wire.js +++ b/src/hook/render/wire.js @@ -27,6 +27,8 @@ export class WireRender { */ this.id2manager = rootRender.id2manager; + this.idCounter = 0; + this.arrowHeight = 12; this.arrowWidth = 12; } @@ -58,6 +60,7 @@ export class WireRender { this.data.push({ + id: this.idCounter, svg: lineSvg, endPoint: points.at(-1), arrow: { @@ -69,6 +72,8 @@ export class WireRender { }, active: false }); + + this.idCounter ++; } render() { @@ -89,6 +94,8 @@ export class WireRender { .attr("fill", "none") .attr('stroke', 'var(--wire-color)'); + const arrows = new Map(); + let arrowSelections = this.selection.selectAll('svg.line-arrow') .data(data) .enter() @@ -105,6 +112,10 @@ export class WireRender { element.setAttribute('opacity', 'var(--line-arrow-opacity)'); return element; + }) + .each(function(data) { + const selection = d3.select(this); + arrows.set(data.id, selection); }); arrowSelections.raise(); @@ -129,7 +140,7 @@ export class WireRender { console.log(pathLength); // 1400 的长度差不多配 3500 ? const duration = pathLength / 14 * 35; - let transition = pivot.transition().duration(duration); + let transition = pivot.transition().duration(3500); transition.attrTween('transform', () => { return t => { const x = cubicBezierAnimation(t, 0, pathLength); @@ -161,14 +172,20 @@ export class WireRender { lineSelections.on('mouseenter', function(_, data) { const selection = d3.select(this); - // 移动到最上层 selection.raise(); selection.attr('stroke', 'var(--wire-active-color)'); + + const arrowSelection = arrows.get(data.id); + arrowSelection.raise(); + arrowSelection.selectAll('path').attr('fill', 'var(--wire-active-color)'); }); lineSelections.on('mouseleave', function(_, data) { const selection = d3.select(this); selection.attr('stroke', 'var(--wire-color)'); + + const arrowSelection = arrows.get(data.id); + arrowSelection.selectAll('path').attr('fill', 'var(--wire-color)'); }); diff --git a/src/hook/skin/plusation.js b/src/hook/skin/plusation.js new file mode 100644 index 0000000..09e003c --- /dev/null +++ b/src/hook/skin/plusation.js @@ -0,0 +1,101 @@ +let PluseIDCount = 0; + +class PulseLine { + constructor() { + // 维护这部分的 id + PluseIDCount++; + this.pluseId = PluseIDCount; + } + + loadData(pathString) { + this.path = pathString + } + + /** + * @param {PulseLineSvgConfig} config + * @returns + */ + svgDoc(config) { + config = config || {}; + const pluseStartColor = config.pluseStartColor || 'white'; + const pluseMiddleColor = config.pluseMiddleColor || '#CB81DA'; + const pluseEndColor = config.pluseEndColor || 'rgb(70, 70, 222)'; + const transform = config.transform || 'translate(0 0)'; + const duration = config.duration || 5000; + + this.duration = duration; + + const gId = 'pluse-g' + this.pluseId; + const pId = 'pluse-p' + this.pluseId; + const mId = 'pluse-m' + this.pluseId; + const uId = 'pluse-u' + this.pluseId; + const pathString = this.path; + + const parser = new DOMParser(); + + const svgString = ` + + + + + + + + + + + + + + + + + + + +`; + + const svgDoc = parser.parseFromString(svgString, 'image/svg+xml'); + return svgDoc; + } + + animation() { + const pId = 'pluse-p' + this.pluseId; + const uId = 'pluse-u' + this.pluseId; + + const pathElement = document.getElementById(pId); + const pluseElement = document.getElementById(uId); + + const pathLength = pathElement.getTotalLength(); + + const keyframes = new KeyframeEffect( + pluseElement, [{ + strokeDasharray: `100 ${pathLength}`, + strokeDashoffset: "100" + }, + { + strokeDasharray: `100 ${pathLength}`, + strokeDashoffset: `-${pathLength - 100}` + } + ], { + duration: this.duration, + iterations: Infinity + } + ); + + const pulsationAnimation = new Animation(keyframes, document.timeline); + return pulsationAnimation; + } +} + +/** + * @typedef PulseLineSvgConfig + * @property {string} pluseStartColor + * @property {string} pluseMiddleColor + * @property {string} pluseEndColor + * @property {string} transform + * @property {number} duration + */ \ No newline at end of file