Since the port part of the node setting is outside, the connection will be in a certain position from the node, (the port is displayed when the mouse is moved in) Is there any good solution?
At the “from” end, you could set Link.fromShortLength to a small negative number. Have the Links be in a Layer that is behind the Layer holding the Nodes.
At the “to” end, you could set Link.toShortLength, but it’s harder due to the position of the arrowhead.
You might want to consider positioning the ports further inside the node’s shape, rather than straddling it half in, half out.
I have tried both Link.fromShortLength and Link.toShortLength and indeed as you said, there will be other issues, I will consider your suggestion. Thanks!
Excuse me, if I don’t change the location of the port, is there any other solution?
For example, changing the level of the port, without blocking the position of the line link node? or other
So when I set the Link.fromShortLength and Link.toShortLength to be negative half the diameter of each port, I get the following results, where the opacity of the ports are changed for each node as the mouse enters and leaves the node.
Could you please tell me and show me exactly what kind of results you would want instead? Under what conditions do the ports appear and disappear, and how did you want to implement that? Do you mind having the link route be recomputed each time as ports appear and disappear?
Probably like this
the port is displayed when the mouse enters the node, and disappears when the mouse is moved out. Always show when it gets focus
don’t mind calculating routes every time the port disappears and shows
I tried changing the alignmentFocus of the port on mouse out and out, but the line moves with the port position and it doesn’t look good
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<script src="https://unpkg.com/gojs"></script>
<script id="code">
const $ = go.GraphObject.make;
const myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true
});
function makePort(id, spot) {
return $(go.Shape, "Circle",
{
width: 0, height: 0,
fill: "gray",
portId: id,
alignment: spot,
fromSpot: spot, toSpot: spot
});
}
function showPorts(node, show) {
node.padding = show ? 0 : 5.5;
node.ports.each(port => {
port.desiredSize = (show || node.isSelected) ? new go.Size(10, 10) : new go.Size(0, 0);
});
}
myDiagram.nodeTemplate =
$(go.Node,
{ locationSpot: go.Spot.Center, padding: 5.5 },
$(go.Panel, "Spot",
$(go.Panel, "Auto",
$(go.Shape,
{ fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8, editable: true },
new go.Binding("text").makeTwoWay())
),
makePort("T", go.Spot.Top),
makePort("L", go.Spot.Left),
makePort("R", go.Spot.Right),
makePort("B", go.Spot.Bottom)
),
{
selectionChanged: node => {
node.diagram.commit(() => showPorts(node, node.isSelected), null);
},
mouseEnter: (e, node) => {
if (!node.isSelected) {
e.diagram.commit(() => showPorts(node, true), null);
}
},
mouseLeave: (e, node) => {
if (!node.isSelected) {
e.diagram.commit(() => showPorts(node, false), null);
}
},
}
);
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 10 },
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" })
);
myDiagram.model = new go.GraphLinksModel(
{
linkFromPortIdProperty: "fpid",
linkToPortIdProperty: "tpid",
nodeDataArray: [
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
],
linkDataArray: [
{ from: 1, fpid: "R", to: 2, tpid: "L" },
{ from: 1, fpid: "B", to: 3, tpid: "T" },
]
});
</script>
</body>
</html>
Thanks for the example of the reply
When the mouse moves into the node, the port width and height increase, and the arrow end will move a significant distance. Is there any way to eliminate this negative effect?
I thought that was what you were asking for – you wanted the point of the arrowhead to be touching the edge of the port when it is visible, and touching the edge of the rectangle when the port is not visible. That necessarily means that the arrowhead has to move farther away from and closer to the center of the node as the port appears and disappears.
ok，thank you reply~