In our produce we allow to create links between corners.
However, in this case they look not consistent, they are not rounded as the rest of the connection.
Is there a way to fix it?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GoJS v3 - Connected Rectangular Nodes</title>
<meta name="description" content="GoJS diagram with two rectangular nodes connected from top-right to bottom-left">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- GoJS v3 from CDN -->
<script src="https://unpkg.com/gojs@3/release/go.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
#diagramDiv {
width: 800px;
height: 600px;
background-color: white;
border: 2px solid #ccc;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 20px;
}
.info {
background-color: #e7f3ff;
border: 1px solid #b3d9ff;
border-radius: 4px;
padding: 10px;
margin: 20px 0;
font-size: 14px;
}
</style>
</head>
<body>
<h1>GoJS v3 - Flow Diagram Example</h1>
<div class="info">
<strong>Features:</strong>
<ul>
<li>Two rectangular nodes with custom ports</li>
<li>Connection from top-right corner of Node 1 to bottom-left corner of Node 2</li>
<li>Interactive diagram - you can drag nodes around</li>
<li>Built with GoJS v3</li>
</ul>
</div>
<!-- Diagram container -->
<div id="diagramDiv"></div>
<script>
// Initialize the diagram
const $ = go.GraphObject.make;
const diagram = $(go.Diagram, "diagramDiv", {
// Enable undo manager
"undoManager.isEnabled": true,
// Set initial content alignment
initialContentAlignment: go.Spot.Center,
// Disable default layout
layout: $(go.Layout),
// Background color
"grid.visible": true,
"grid.gridCellSize": new go.Size(10, 10)
});
// Define the node template with custom ports
diagram.nodeTemplate =
$(go.Node, "Spot",
{
locationSpot: go.Spot.Center,
selectionAdorned: true,
// Make nodes draggable
movable: true
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// The main shape - rectangle
$(go.Shape, "Rectangle",
{
fill: "lightblue",
stroke: "#4a90e2",
strokeWidth: 2,
width: 120,
height: 80
},
new go.Binding("fill", "color")
),
// Text label
$(go.TextBlock,
{
font: "bold 14px Arial",
stroke: "#333"
},
new go.Binding("text", "text")
),
// Top-right port (for first node)
$(go.Shape, "Circle",
{
width: 10,
height: 10,
fill: "red",
stroke: "darkred",
strokeWidth: 1,
alignment: go.Spot.TopRight,
alignmentFocus: go.Spot.Center,
portId: "topright",
fromSpot: go.Spot.TopRight,
fromLinkable: true,
cursor: "pointer"
},
new go.Binding("visible", "showTopRight")
),
// Bottom-left port (for second node)
$(go.Shape, "Circle",
{
width: 10,
height: 10,
fill: "green",
stroke: "darkgreen",
strokeWidth: 1,
alignment: go.Spot.BottomLeft,
alignmentFocus: go.Spot.Center,
portId: "bottomleft",
toSpot: go.Spot.BottomLeft,
toLinkable: true,
cursor: "pointer"
},
new go.Binding("visible", "showBottomLeft")
)
);
// Define the link template
diagram.linkTemplate =
$(go.Link,
{
routing: go.Routing.AvoidsNodes,
curve: go.Curve.JumpOver,
corner: 5,
toShortLength: 4,
toEndSegmentLength: 30,
fromEndSegmentLength: 30,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true
},
// Link shape
$(go.Shape,
{
isPanelMain: true,
strokeWidth: 3,
stroke: "#4a90e2"
}
),
// Arrowhead
$(go.Shape,
{
toArrow: "Standard",
strokeWidth: 0,
fill: "#4a90e2",
scale: 1.5
}
),
// Link label (optional)
$(go.TextBlock,
{
textAlign: "center",
font: "10pt Arial",
stroke: "#333",
background: "white",
margin: 4
},
new go.Binding("text", "text")
)
);
// Create the model data
const model = new go.GraphLinksModel(
[
// Node data
{
key: 1,
text: "Node 1\n(Source)",
color: "lightblue",
loc: "100 150",
showTopRight: true,
showBottomLeft: false
},
{
key: 2,
text: "Node 2\n(Target)",
color: "lightgreen",
loc: "350 300",
showTopRight: false,
showBottomLeft: true
}
],
[
// Link data - connecting from topright port of node 1 to bottomleft port of node 2
{
from: 1,
to: 2,
fromPort: "topright",
toPort: "bottomleft",
text: "Connection"
}
]
);
// Configure the model to use port properties
model.linkFromPortIdProperty = "fromPort";
model.linkToPortIdProperty = "toPort";
// Assign the model to the diagram
diagram.model = model;
// Add some interaction feedback
diagram.addDiagramListener("ObjectSingleClicked", function(e) {
const part = e.subject.part;
if (part instanceof go.Node) {
console.log("Clicked on node: " + part.data.text);
} else if (part instanceof go.Link) {
console.log("Clicked on link");
}
});
// Log when the diagram is ready
diagram.addDiagramListener("InitialLayoutCompleted", function(e) {
console.log("GoJS v3 diagram initialized successfully!");
console.log("Node 1 has a red port at top-right corner");
console.log("Node 2 has a green port at bottom-left corner");
console.log("They are connected as specified");
});
</script>
</body>
</html>
