From 7a6ed915d0cd7911bce6a57c16bad9c9a906de1f Mon Sep 17 00:00:00 2001 From: Kirigaya <1193466151@qq.com> Date: Thu, 2 Jan 2025 05:28:44 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D=E5=A4=9A=E4=B8=AA=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- design/dide/Word/Binary operators/$add.svg | 2 +- out.svg | 460 +++++++++++++++++++++ public/index.html | 4 +- src/hook/render/index.js | 21 +- src/hook/render/layout.js | 2 +- src/hook/render/render-view.js | 8 +- src/hook/render/wire.js | 13 +- src/hook/skin/index.js | 23 +- 8 files changed, 510 insertions(+), 23 deletions(-) create mode 100644 out.svg diff --git a/design/dide/Word/Binary operators/$add.svg b/design/dide/Word/Binary operators/$add.svg index 9457e76..ae13500 100644 --- a/design/dide/Word/Binary operators/$add.svg +++ b/design/dide/Word/Binary operators/$add.svg @@ -5,7 +5,7 @@ - + diff --git a/out.svg b/out.svg new file mode 100644 index 0000000..3cb8bcb --- /dev/null +++ b/out.svg @@ -0,0 +1,460 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + clock + + + + + + data_in + + + + + + up + + + + + + down + + + + + + carry_out + + + + + + borrow_out + + + + + + count_out + + + + + + parity_out + + + + + + 11 + + + + + + 01 + + + + + + 10 + + + + + + 101 + + + + + + + + + + 0 + + + 1 + + + + + + + + 0:8 + + + 9:17 + + + 18:26 + + + 27:35 + + + + + + + + 0 + + + 1 + + + 2 + + + 3 + + + + + + + + 9 + + + 0:8 + + + + + + + + 9 + + + 0:8 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/index.html b/public/index.html index 8760ed8..b8b5b9f 100644 --- a/public/index.html +++ b/public/index.html @@ -15,7 +15,7 @@ diff --git a/src/hook/render/index.js b/src/hook/render/index.js index 7776bd8..a36ba9f 100644 --- a/src/hook/render/index.js +++ b/src/hook/render/index.js @@ -206,11 +206,14 @@ export class NetlistRender { // debug console.log(computedLayout); + // 底层模块 + const topModule = this.nameToModule.get(this.topModuleName); + // 生成连接 - await this.renderLine(g, computedLayout); + await this.renderLine(g, computedLayout, topModule); // 生成实体 - await this.renderEntity(g, computedLayout); + await this.renderEntity(g, computedLayout, topModule); // svg 挂载为全局注册的 selection this.selection = svg; @@ -288,8 +291,9 @@ export class NetlistRender { * @description 绘制连线和交叉点 * @param {d3.Selection} parentSelection * @param {ElkNode} computedLayout + * @param {Module} module */ - async renderLine(parentSelection, computedLayout) { + async renderLine(parentSelection, computedLayout, module) { this.wireRender = new WireRender(parentSelection, this); this.crossDotRender = new CrossDotRender(parentSelection, this); @@ -304,6 +308,7 @@ export class NetlistRender { const rangeTree = new RangeTreeMap(); for (const edge of computedLayout.edges) { + const width = module.id2EdgeCount.get(edge.id); for (const section of edge.sections || []) { const points = []; points.push(section.startPoint); @@ -311,7 +316,7 @@ export class NetlistRender { points.push(point); } points.push(section.endPoint); - this.wireRender.addAsD3DataItems(points, edge, id2port); + this.wireRender.addAsD3DataItems(points, edge, id2port, width); // 加入 range tree 中 for (let i = 0; i < points.length - 1; ++ i) { @@ -585,7 +590,6 @@ export class NetlistRender { elkNode.edges = []; elkNode.layoutOptions = this.defaultLayoutOptions; - // elkNode.children.push(...portNodes); elkNode.children.push(...cellNodes); elkNode.children.push(...constantNodes); @@ -627,8 +631,11 @@ export class NetlistRender { const parentSelection = s.parentSelection; const layout = s.layout; - await this.renderLine(parentSelection, layout); - const { instances } = await this.renderEntity(parentSelection, layout); + const layoutName = layout.renderName || this.topModuleName; + const module = this.nameToModule.get(layoutName); + + await this.renderLine(parentSelection, layout, module); + const { instances } = await this.renderEntity(parentSelection, layout, module); const id2selection = new Map(); instances.each(function(data) { diff --git a/src/hook/render/layout.js b/src/hook/render/layout.js index f395646..0b1e785 100644 --- a/src/hook/render/layout.js +++ b/src/hook/render/layout.js @@ -330,7 +330,7 @@ export class Module { continue; } - if (conn.direction === 'input') { + if (connection.direction === 'output') { const edgeId = makeEdgeId(conn.id, connection.id); if (!id2EdgeCount.has(edgeId)) { id2EdgeCount.set(edgeId, 0); diff --git a/src/hook/render/render-view.js b/src/hook/render/render-view.js index 2d8bdc4..0203377 100644 --- a/src/hook/render/render-view.js +++ b/src/hook/render/render-view.js @@ -6,6 +6,7 @@ import { ConnectionRender } from './connection'; import { CellRender } from './cell'; import { CrossDotRender } from './cross-dot'; import { globalLookup } from '../global'; +import { ConstantRender } from './constant'; export class RenderViewNode { /** @@ -45,10 +46,15 @@ export class RenderViewNode { */ this.portRender = undefined; + /** + * @type {ConstantRender} + */ + this.constantRender = undefined; + /** * @type {Map} */ - this.id2children = new Map; + this.id2children = new Map(); } hasChild(id) { diff --git a/src/hook/render/wire.js b/src/hook/render/wire.js index 9412f3c..514fb5c 100644 --- a/src/hook/render/wire.js +++ b/src/hook/render/wire.js @@ -39,8 +39,9 @@ export class WireRender { * @param {import('../jsdoc').ElkPoint[]} points 长度至少为 2 的数组，代表经历过的点集 * @param {import('../jsdoc').ElkEdge} edge * @param {Map} id2port + * @param {number} width */ - addAsD3DataItems(points, edge, id2port) { + addAsD3DataItems(points, edge, id2port, width) { const linePaths = []; const beginPoint = points.at(0); @@ -86,6 +87,7 @@ export class WireRender { id: this.idCounter, svg: lineSvg, endPoint: points.at(-1), + width: width, arrow: { icon: direction + '-arrow', x: arrowLocation.x, @@ -107,7 +109,6 @@ export class WireRender { const arrowHeight = 12; const arrowWidth = 12; - let lineSelections = this.selection.selectAll('path.lines') .data(data) .enter() @@ -115,8 +116,9 @@ export class WireRender { .attr('d', d => d.svg) .attr('class', 'connection-line') .attr("fill", "none") - .attr('stroke', 'var(--wire-color)'); + .attr('stroke', 'var(--wire-color)') + this.lineSelections = lineSelections; const arrows = new Map(); let arrowSelections = this.selection.selectAll('svg.line-arrow') @@ -201,7 +203,10 @@ export class WireRender { } lineSelections - .attr('stroke-width', LINE_WIDTH) + .attr('stroke-width', d => { + const incrementWidth = globalSetting.boldMultiWidthWire ? 1 : 0; + return d.width > 1 ? LINE_WIDTH + incrementWidth: LINE_WIDTH; + }) .each(function (data) { const selection = d3.select(this); // const manager = _this.createDataManager(selection, data); diff --git a/src/hook/skin/index.js b/src/hook/skin/index.js index 263f9cd..91d6917 100644 --- a/src/hook/skin/index.js +++ b/src/hook/skin/index.js @@ -81,6 +81,9 @@ class SkinMeta { const levelName = path.split('/')[1]; const cssName = levelName2CssName[levelName]; + this.path = path; + this.svgString = svgString; + const color = `var(--${cssName}-color)`; const fillColor = `var(--${cssName}-fill-color)`; @@ -128,9 +131,12 @@ class SkinMeta { return 0; } const transform = pathElement.getAttribute('transform'); - const yOffset = parseFloat(transform.split(' ').at(-1)); - this.portToYOffset.set(portName, yOffset); - return yOffset; + if (transform) { + const yOffset = parseFloat(transform.split(' ').at(-1)); + this.portToYOffset.set(portName, yOffset); + return yOffset; + } + return 0; } /** @@ -147,9 +153,12 @@ class SkinMeta { return 0; } const transform = pathElement.getAttribute('transform'); - const offsetnumber = transform.split('(').at(-1).split(' ').at(0); - const xOffset = parseFloat(offsetnumber); - this.portToXOffset.set(portName, xOffset); - return xOffset; + if (transform) { + const offsetnumber = transform.split('(').at(-1).split(' ').at(0); + const xOffset = parseFloat(offsetnumber); + this.portToXOffset.set(portName, xOffset); + return xOffset; + } + return 0; } } \ No newline at end of file