GoJS 端口连接问题：水平线连接限制和解决方案

$(go.Panel, 'Vertical', // 左侧端口 $(go.Panel, 'Spot', $(go.Shape, 'Circle', { width: 8, height: 8, fill: 'blue', portId: 'in', alignment: go.Spot.Left, fromLinkable: true, fromSpot: go.Spot.All, // 允许连接的任何位置 toLinkable: true, toSpot: go.Spot.All // 允许连接的任何位置 }), $(go.Shape, 'LineH', { width: 30, height: 1, stroke: 'black', strokeWidth: 1 }) ), // 右侧端口 $(go.Panel, 'Spot', $(go.Shape, 'Circle', { width: 8, height: 8, fill: 'green', portId: 'out', alignment: go.Spot.Right, fromLinkable: true, fromSpot: go.Spot.All, // 允许连接的任何位置 toLinkable: true, toSpot: go.Spot.All // 允许连接的任何位置 }), $(go.Shape, 'LineH', { width: 30, height: 1, stroke: 'black', strokeWidth: 1 }) ) ) 根据提供的代码，左侧和右侧的端口都已经设置为可连接。但是，它们当前的连接方式是通过水平线连接的。这意味着它们只能与水平线连接，而不能与竖直线连接。\n\n如果您希望左侧和右侧的端口能够连接，并且可以连接水平线和竖直线，您可以尝试更改连接方式。以下是一个示例代码片段，显示了如何设置端口，使其可以连接水平线和竖直线：\n\njavascript\n\$(go.Panel, 'Vertical',\n // 左侧端口\n \$(go.Panel, 'Spot',\n \$(go.Shape, 'Circle', \n { \n width: 8, \n height: 8, \n fill: 'blue', \n portId: 'in', \n alignment: go.Spot.Left, \n fromLinkable: true, \n fromSpot: go.Spot.All, // 允许连接的任何位置\n toLinkable: true, \n toSpot: go.Spot.All // 允许连接的任何位置\n }\n ),\n \$(go.Shape, 'LineH', { width: 30, height: 1, stroke: 'black', strokeWidth: 1 })\n ),\n // 右侧端口\n \$(go.Panel, 'Spot',\n \$(go.Shape, 'Circle', \n { \n width: 8, \n height: 8, \n fill: 'green', \n portId: 'out', \n alignment: go.Spot.Right, \n fromLinkable: true, \n fromSpot: go.Spot.All, // 允许连接的任何位置\n toLinkable: true, \n toSpot: go.Spot.All // 允许连接的任何位置\n }\n ),\n \$(go.Shape, 'LineH', { width: 30, height: 1, stroke: 'black', strokeWidth: 1 })\n )\n)\n\n\n通过将fromSpot和toSpot属性设置为go.Spot.All，您可以允许端口连接到任何位置，包括水平和竖直线。