Is it possible to specify distance between lines when they are in vertical position.
Currently, line labels overlaps.
I’m using the following settings:
routing: go.Routing.AvoidsNodes,
toEndSegmentLength: 25,
fromEndSegmentLength: 25,
toShortLength: 5,
fromShortLength: 0,
curve: go.Curve.JumpOver,
If your fromSpot and toSpot weren’t “…Side” Spots, I believe you would see the effect that you want, where the routing of duplicate links would automatically take the label’s breadth into account. (In this case that would mean the label’s unrotated height.)
But since you presumably want your link routes to be spread out at each port, you do want to continue to use “…Side” Spots. I suppose you could try something like:
class CustomLink extends go.Link {
computeMidOrthoPosition(fromX, fromY, toX, toY, vertical) {
let c = this.computeCurviness();
if (vertical) {
return (fromY + toY) / 2 + c;
} else {
return (fromX + toX) / 2 + c;
}
}
}
myDiagram.linkTemplate =
new CustomLink({
routing: go.Routing.AvoidsNodes,
corner: 10,
})
.add(
new go.Shape(),
new go.Shape({ toArrow: "OpenTriangle" }),
new go.TextBlock({
segmentOrientation: go.Orientation.Along,
background: "whitesmoke"
})
.bind("text")
);
That doesn’t seem to work with the initial routing, but it works with subsequent ones.
@walter thank you,
it does solve the problem when all connections are between 2 nodes. 👍
Is there a way to solve a similar problem when node has many incoming connections from different steps, as in example below.
Are you using the AvoidsLinksRouter extension? If so, with what properties?
@walter no, I don’t use AvoidsLinksRouter
I tried to recreate this with the code that you provided in another thread. Here’s what I got:
The lines are a bit close together. They could default to be farther apart, and that is parameterized internally, but there’s no access to those parameters in v3.0. Maybe we could add such (undocumented?) functionality in v3.1.
Here’s the code:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
<script src="https://cdn.jsdelivr.net/npm/gojs/release/go-debug.js"></script>
<script id="code">
// Initialize the diagram
const $ = go.GraphObject.make
const diagram =
$(go.Diagram, "myDiagramDiv", {
"undoManager.isEnabled": true,
model: new go.GraphLinksModel({
linkKeyProperty: "key",
}),
"animationManager.isEnabled": false,
})
// Create a selection adornment template for links
const selectionTemplate = $(go.Adornment, "Link",
$(go.Shape, { isPanelMain: true, stroke: "#00A9C9", strokeWidth: 3 }),
$(go.Shape, { toArrow: "Standard", stroke: null, fill: "#00A9C9" }),
)
// Define the node template
diagram.nodeTemplate = $(go.Node, "Auto", {
width: 120, height: 60,
locationSpot: go.Spot.Center,
fromSpot: go.Spot.NotLeftSide, toSpot: go.Spot.NotRightSide
},
new go.Binding("location", "loc", go.Point.parse),
new go.Binding("height", "h"),
$(go.Shape, "RoundedRectangle", { fill: "#EFEFEF", stroke: "#333333", strokeWidth: 1.5 },
new go.Binding("figure")),
$(go.TextBlock, { margin: 8, font: "bold 12px sans-serif", stroke: "#333333", editable: true },
new go.Binding("text"),
),
)
// Define the link template with all the specified settings
const interactive = true
diagram.linkTemplate =
$(go.Link, {
zOrder: -5,
selectionAdorned: true,
adjusting: go.LinkAdjusting.None,
toEndSegmentLength: 25,
fromEndSegmentLength: 25,
toShortLength: 5,
fromShortLength: 0,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
shadowOffset: new go.Point(2, 2),
shadowBlur: 10,
selectionAdornmentTemplate: selectionTemplate,
//isActionable: interactive,
routing: go.Routing.AvoidsNodes,
curve: go.Curve.JumpOver,
corner: 20,
},
$(go.Shape, { strokeWidth: 2, stroke: "#555" }),
$(go.Shape, { toArrow: "Standard", stroke: null, fill: "#555" }),
$(go.Panel, "Auto", {
cursor: "pointer",
alignment: go.Spot.Center,
alignmentFocus: go.Spot.Center,
segmentFraction: 0.5,
segmentOrientation: go.Orientation.Upright,
background: "white",
},
$(go.Shape, "RoundedRectangle", {
fill: "#FFFFFF",
stroke: "#555555",
strokeWidth: 1,
}),
$(go.TextBlock, {
font: "10pt sans-serif",
stroke: "#333333",
editable: true,
textAlign: "center",
wrap: go.TextBlock.WrapFit,
},
new go.Binding("text", "text"),
),
),
)
// Create the model data
const nodeDataArray = [
{ key: 1, text: "Node 1", loc: "100 100" },
{ key: 2, text: "Node 2", loc: "300 100", h: 100, figure: "Diamond" },
{ key: 3, text: "Node 3", loc: "500 100", h: 100, figure: "Diamond" },
{ key: 4, text: "Node 4", loc: "700 100" },
{ key: 5, text: "Node 5", loc: "900 100" },
{ key: 6, text: "Node 6", loc: "1100 100" },
{ key: 7, text: "Node 7", loc: "1300 100" },
{ key: 8, text: "Node 8", loc: "1500 100" },
{ key: 9, text: "Node 9", loc: "1700 100" },
]
const linkDataArray = [
{ from: 1, to: 2, text: "label" },
{ from: 2, to: 3, text: "label" },
{ from: 3, to: 4, text: "label" },
{ from: 4, to: 5, text: "label" },
{ from: 5, to: 6, text: "label" },
{ from: 6, to: 7, text: "label" },
{ from: 7, to: 8, text: "label" },
{ from: 8, to: 9, text: "label" },
{ from: 3, to: 1, text: "label" },
{ from: 4, to: 1, text: "label" },
{ from: 5, to: 1, text: "label" },
{ from: 6, to: 1, text: "label" },
{ from: 7, to: 1, text: "label" },
{ from: 8, to: 1, text: "label" },
{ from: 9, to: 1, text: "label" },
]
// Initialize the model
diagram.model = new go.GraphLinksModel({
nodeDataArray: nodeDataArray,
linkDataArray: linkDataArray,
linkKeyProperty: "key",
})
</script>
</body>
</html>
@walter it would be great if we could control distance between links it in v.3.1.