Try what I suggested above: set Link.routing to go.Link.AvoidsNodes .
For the nodes, set fromSpot and toSpot to be go.Spot.AllSides .
The links are trying to avoid the groups. Set Group.avoidable to false.
Have updated the codepen, https://codepen.io/KrishNine/pen/OJyvqZo.
- How do I connect to a new port on a node each time I have a new link. Right now I see a single port of connect on a node? For Ex, links between 6-3 and 6-5 should show two connecting ports on 6.
- When I click on a node and drag, the diagram is moving. I tried e.diagram.currentCursor = ‘not-allowed’; but it’s not working. Am I missing something here?
- Ideally I need to place
G1 - Nodes to the center of the group and towards the bottom
G2 - Nodes positioning the nodes automatically
G3 - Nodes vertical and towards the left
G4 - Nodes to the center of the group
Have tried using groupTemplateMap.add (check https://codepen.io/KrishNine/pen/NWGMWGz) for G1, but its positioning the G1 nodes outside the group. Is my approach to the diagram layout/groupTemplate is correct? Please suggest the best approach for my use case.
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
function PositionLayout() {
go.Layout.call(this);
}
go.Diagram.inherit(PositionLayout, go.Layout);
PositionLayout.prototype.doLayout = function(coll) {
var parts = this.collectParts(coll);
this.diagram.commit(function() {
parts.each(function(p) {
if (p instanceof go.Node) {
var x = p.data.x;
var y = p.data.y;
if (!isNaN(x) && !isNaN(y)) p.moveTo(x, y);
}
});
});
}
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
layout: new PositionLayout(),
allowZoom: false,
allowHorizontalScroll: false,
allowVerticalScroll: false,
"linkingTool.direction": go.LinkingTool.ForwardsOnly,
"undoManager.isEnabled": true,
"ModelChanged": function(e) {
if (e.isTransactionFinished) {
document.getElementById("mySavedModel").textContent = myDiagram.model.toJson();
}
}
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ selectable: false },
$(go.Shape,
{
fill: "white", portId: "",
fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides,
fromLinkable: true, toLinkable: true
}),
$(go.TextBlock,
{ margin: 10 },
new go.Binding("text", "key"))
);
myDiagram.groupTemplate =
$(go.Group, "Auto",
{
selectable: false,
avoidable: false,
margin: 5,
desiredSize: new go.Size(200, 200)
},
new go.Binding("desiredSize", "size", go.Size.parse),
new go.Binding("layout", "alignment", function(lay) {
if (lay.equals(go.Spot.Top) || lay.equals(go.Spot.Bottom)) {
return $(go.GridLayout,
{ wrappingWidth: 9999, spacing: new go.Size(20, 20) });
}
if (lay.equals(go.Spot.Left) || lay.equals(go.Spot.Right)) {
return $(go.GridLayout,
{ wrappingColumn: 1, spacing: new go.Size(20, 20) });
}
}),
$(go.Shape, "RoundedRectangle",
{ fill: "transparent", strokeDashArray: [8, 4] },
new go.Binding("stroke", "strokeColor"),
new go.Binding("fill", "fillColor")),
$(go.Placeholder,
{ padding: 10 },
new go.Binding("alignment")),
$(go.TextBlock,
{ alignment: go.Spot.TopLeft, font: "bold 12pt sans-serif" },
new go.Binding("text", "key"))
);
myDiagram.linkTemplate =
$(go.Link,
{
routing: go.Link.AvoidsNodes,
corner: 4, curve: go.Link.JumpOver
},
$(go.Shape), // the path
$(go.Shape, { toArrow: "Standard" }), // the arrowhead
$(go.Shape, // the endpoint
{
segmentIndex: -1,
segmentOffset: new go.Point(4, 0),
width: 8, height: 8,
fill: "gray", strokeWidth: 0
})
);
myDiagram.model = new go.GraphLinksModel([
{ key:"G1", isGroup:true,
x: 0, y: 0, size: "620 200",
alignment: go.Spot.Bottom,
fillColor: "#ffffff", strokeColor: "#cacecd" },
{ key:"G2", isGroup:true,
x: 0, y: 220, size: "400 200",
fillColor: "#f0f3fa", strokeColor: "#57bdeb" },
{ key:"G3", isGroup:true,
x: 420, y: 220, size: "200 200",
alignment: go.Spot.Left,
fillColor: "#f0f3fa", strokeColor: "#57bdeb" },
{ key:"G4", isGroup:true,
x: 0, y: 440, size: "620 200",
fillColor: "#ffffff", strokeColor: "#cacecd" },
{ key: 1, group: "G1"},
{ key: 2, group: "G1"},
{ key: 3, group: "G2"},
{ key: 4, group: "G2"},
{ key: 5, group: "G2"},
{ key: 6, group: "G3"},
{ key: 7, group: "G3"},
{ key: 8, group: "G4"},
{ key: 9, group: "G4"},
],
[
{ from: 3, to: 1 },
{ from: 4, to: 2 },
{ from: 6, to: 3 },
{ from: 6, to: 5 },
{ from: 7, to: 4 },
{ from: 4, to: 8 },
{ from: 5, to: 9 },
]);
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:800px"></div>
<textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
</body>
</html>
produces:
1 Like
Walter, thank so much for your help. You are simply amazing :)
You are welcome. That’s why we aren’t open source.
Make sense.
For Nodes 1 and 2. I am trying use a different node template. Though I am using ‘go.Spot.Bottom’ the link is still randomly placed.
‘’’
var simpleTemplate =
(go.Node, "Auto",
(go.Shape, “Rectangle”,
{ margin: 1, fill: “#c0c0c0”, fromSpot: go.Spot.Bottom, toSpot: go.Spot.Bottom }),
(go.TextBlock,
new go.Binding("text", "title")),
{
toolTip:
(“ToolTip”,
$(go.TextBlock, { margin: 4 },
new go.Binding(“text”, “desc”))
)
},
);
‘’’
All of those from… and to… properties have to go on the GraphObject that is a port. That would be an object with portId set, or else the whole Node if nothing has portId set.
Could you please point me to any example.
https://gojs.net/latest/intro/connectionPoints.html#ToSpotAndFromSpot
You set the fromSpot and toSpot on the Shape. That’s OK if you also set the portId to an empty string. Or you can move those properties to be on the whole Node, which is the default port if you don’t set portId on any object.
How do I increase the spacing between nodes in ‘G2’ or change the layout only for this group?
What have you set Group.layout to? The type of layout determines if and how you can control its behavior.
You haven’t set Group.layout at all. So you get an instance of plain Layout, over which you have no control at all. Use something else. GoJS Layouts -- Northwoods Software
Trying to understand. Right now I am using, layout: new PositionLayout(). Do I need to change this to the required layout? Where to do I change each group layout?
No, your app needs to use a PositionLayout as the Diagram.layout. For the Group.layout, which like all other Group properties you set or bind in the group template, you can use whatever layout you like.
If the size of a group grows, your PositionLayout implementation might need to become smarter in order to produce the overall results that you want.
Got it. Thanks.