|
|
@@ -377,12 +377,28 @@ export function useCanvasLogic(connections, externalControllerRef, nodes = []) {
|
|
|
// 端口垂直居中 = node.y + headerHeight + executionHeight / 2
|
|
|
portCenterY = node.y + headerHeight + executionHeight / 2;
|
|
|
|
|
|
+ // 箭头是 CSS border 三角形：border-width: 6px 0 6px 10px
|
|
|
+ // 箭头宽度10px，高度12px，箭头中心在宽度的中点（5px）
|
|
|
+ const arrowWidth = 10;
|
|
|
+ const arrowHalfWidth = arrowWidth / 2; // 5px
|
|
|
+
|
|
|
if (isInput) {
|
|
|
- // 执行输入端口：在节点左侧
|
|
|
- portCenterX = node.x + 8; // padding: 0 8px
|
|
|
+ // 执行输入端口箭头：
|
|
|
+ // 执行区域 padding: 0 8px，端口从 node.x + 8 开始
|
|
|
+ // 箭头有 margin-left: 5%（约9px，按180px宽度算）
|
|
|
+ // 箭头中心 ≈ node.x + 8 + 9 + 5 = node.x + 22
|
|
|
+ // 简化：箭头中心约在 node.x + 8 + arrowHalfWidth + 一些margin
|
|
|
+ portCenterX = node.x + 8 + arrowHalfWidth + 8; // 加上margin估算
|
|
|
} else {
|
|
|
- // 执行输出端口：在节点右侧
|
|
|
- portCenterX = node.x + nodeDims.width - 8;
|
|
|
+ // 执行输出端口箭头：
|
|
|
+ // 执行区域 padding: 0 8px，端口容器在右侧（margin-left: auto）
|
|
|
+ // 箭头有 margin-right: -8px，箭头向右伸出到节点边缘外
|
|
|
+ // 端口容器右边缘在 node.x + width - 8（padding）
|
|
|
+ // 箭头因为 margin-right: -8px 向右伸出8px
|
|
|
+ // 箭头宽度10px，箭头尖端在 node.x + width - 8 + 8 + 10 = node.x + width + 10
|
|
|
+ // 箭头中心（几何中心）在箭头尖端左边 5px 处
|
|
|
+ // 箭头中心 = node.x + width + 10 - 5 = node.x + width + 5
|
|
|
+ portCenterX = node.x + nodeDims.width + arrowHalfWidth;
|
|
|
}
|
|
|
} else {
|
|
|
// 数据端口：在参数区域内
|
