修复垂直线条的渲染错误

This commit is contained in:
锦恢 2025-01-07 21:12:38 +08:00
parent ab5fe740fd
commit 867a02fa3c
7 changed files with 1511 additions and 9 deletions

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="117" height="70" viewBox="0 0 117 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(1 1)">
<rect width="115" height="68" />
<path id="OR" d="M26.1949 0C44.4999 0.559998 60.8351 12.25 68.1068 30C60.8351 47.75 44.4999 59.44 26.1949 60C26.1949 60 0 60 0 60C11.2324 41.44 11.2324 18.56 0 0C0 0 26.1949 0 26.1949 0Z" fill="#279BB0" fill-rule="evenodd" stroke-width="2" stroke="#000000" transform="translate(25.68 8)" />
<path id="OR" d="M27.0538 0C45.9589 0.559998 62.8297 12.25 70.3398 30C62.8297 47.75 45.9589 59.44 27.0538 60C27.0538 60 0 60 0 60C11.6006 41.44 11.6006 18.56 0 0C0 0 27.0538 0 27.0538 0Z" fill="#279BB0" fill-rule="evenodd" stroke-width="2" stroke="#000000" transform="translate(21.214 4)" />
<path id="OR" d="M27.9126 0C47.4179 0.559998 64.8243 12.25 72.5728 30C64.8243 47.75 47.4179 59.44 27.9126 60C27.9126 60 0 60 0 60C11.9689 41.44 11.9689 18.56 0 0C0 0 27.9126 0 27.9126 0Z" fill="#279BB0" fill-rule="evenodd" stroke-width="2" stroke="#000000" transform="translate(16.748 0)" />
<path d="M13.3242 14.3438Q13.3242 17.2852 11.6895 18.9492Q10.0547 20.6133 7.10156 20.6133Q4.24219 20.6133 2.625 18.9258Q1.00781 17.2383 1.00781 14.3438Q1.00781 11.4023 2.63086 9.76172Q4.25391 8.1211 7.17188 8.12109Q10.1836 8.1211 11.7539 9.7207Q13.3242 11.3203 13.3242 14.3438ZM10.5 14.3438Q10.5 10.1133 7.23047 10.1133Q3.83203 10.1133 3.83203 14.3438Q3.83203 16.418 4.66406 17.5195Q5.49609 18.6211 7.07813 18.6211Q10.5 18.6211 10.5 14.3438ZM21.668 10.3594Q20.3555 10.3594 19.5703 11.5137Q18.7852 12.668 18.7852 14.625L18.7852 20.3789L16.0898 20.3789L16.0898 11.332Q16.0898 9.43359 16.0078 8.36719L18.5742 8.36719Q18.6914 9.77344 18.6914 11.0859L18.7383 11.0859Q19.3008 9.42188 20.0391 8.77148Q20.7773 8.1211 21.9844 8.12109Q22.5352 8.1211 22.8984 8.27344L22.8984 10.4883Q22.3008 10.3594 21.668 10.3594Z" transform="translate(42 17)" fill="#010101" />
<path id="Y" d="M0 0L25.6796 0" fill="none" stroke-width="2" stroke="#000000" stroke-linecap="square" transform="translate(89.32 29)" />
<path id="A" d="M0 0L25.6796 0" fill="none" stroke-width="2" stroke="#000000" stroke-linecap="square" transform="translate(0 29)" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

1473
public/HDU1.json Normal file

File diff suppressed because it is too large Load Diff

Binary file not shown.

View File

@ -15,7 +15,7 @@
<script>
window.readNetFile = async () => {
const inputVcdFile = 'full_adder.json';
const inputVcdFile = 'HDU1.json';
const skin = 'dide.skin';
const r1 = await fetch(inputVcdFile);
const r2 = await fetch(skin);
@ -23,7 +23,7 @@
const skinBinary = await r2.arrayBuffer();
return [ netJson, skinBinary ];
}
window.moduleName = 'full_adder';
window.moduleName = 'HDU1';
</script>
</head>

View File

@ -32,9 +32,11 @@ export class ConnectionRender {
const marginParamter = getMarginParamter(port);
const marginOffset = port.direction === 'input' ? marginParamter.leftMargin: - marginParamter.rightMargin;
const xoffset = port.y === 0 ? 1 : 0;
this.data.push({
id: port.id,
x: port.x + node.x + marginOffset,
x: port.x + node.x + marginOffset + xoffset,
y: port.y + node.y + 0.5, // 0.5 是为了线宽
width: port.width,
height: port.height,

View File

@ -31,7 +31,10 @@ export class InstantiationRender {
* @param {import('../jsdoc').ElkNode} node
*/
addAsD3DataItem(node) {
const nodeModule = this.rootRender.nameToModule.get(node.renderName);
console.log(node);
const nodeModule = this.rootRender.nameToModule.get(node.renderName);
const view = nodeModule.view;
const textPadding = 5;
const portnames = [];

View File

@ -45,6 +45,7 @@ export class WireRender {
const linePaths = [];
const beginPoint = points.at(0);
const beginTwoPoint = points.at(1);
const endPoint = points.at(-1);
const lastTwoPoint = points.at(-2);
@ -53,9 +54,19 @@ export class WireRender {
const sourceMargin = getMarginParamter(sourcePort);
const targetMargin = getMarginParamter(targetPort);
beginPoint.x -= sourceMargin.rightMargin;
const direction = judgeDirection(endPoint, lastTwoPoint);
// 判断开头
const beginDirection = judgeDirection(beginPoint, beginTwoPoint);
if (beginDirection === 'up' || beginDirection === 'down') {
// TODO: 提前在布局算法中进行调整
beginPoint.x += targetMargin.leftMargin + 1;
beginTwoPoint.x += targetMargin.leftMargin + 1;
} else {
beginPoint.x -= sourceMargin.rightMargin;
}
// 判断结尾
const endDirection = judgeDirection(endPoint, lastTwoPoint);
// 特殊情况: targetPort 为 undefined
if (targetPort === undefined) {
const port = id2port.get(edge.orginalTarget);
@ -63,7 +74,7 @@ export class WireRender {
endPoint.x -= LAYOUT_CONSTANT.INSTANCE_RIGHT_MARGIN;
} else {
// 判断当前的方向
if (direction === 'up' || direction === 'down') {
if (endDirection === 'up' || endDirection === 'down') {
lastTwoPoint.x += targetMargin.leftMargin + 1;
endPoint.x += targetMargin.leftMargin + 1;
} else {
@ -81,7 +92,7 @@ export class WireRender {
const lineSvg = linePaths.join(' ');
const arrowLocation = getArrowLocation(endPoint, direction, this.arrowWidth, this.arrowHeight);
const arrowLocation = getArrowLocation(endPoint, endDirection, this.arrowWidth, this.arrowHeight);
this.data.push({
id: this.idCounter,
@ -89,7 +100,7 @@ export class WireRender {
endPoint: points.at(-1),
width: width,
arrow: {
icon: direction + '-arrow',
icon: endDirection + '-arrow',
x: arrowLocation.x,
y: arrowLocation.y,
width: this.arrowWidth,
@ -208,6 +219,7 @@ export class WireRender {
})
.each(function (data) {
const selection = d3.select(this);
// const manager = _this.createDataManager(selection, data);
});