Hi,
I have a button to auto arrange the nodes and link present on diagram.
When user add multiple links between two nodes this happens.
All overlapped links should auto arrange automatically.
But our requirement is like this
Please help me out how this thing can be possible with go js.
Thanks
If you do not have separate small ports on each node, and if you use fromSpot and toSpot of go.Spot.AllSides, you should get the routing you want automaticaly.
https://gojs.net/latest/intro/connectionPoints.html#ToSpotAndFromSpot
You could do LeftSide/RightSide/etc for the port spots too, example:
https://codepen.io/simonsarris/pen/KeEzBb?editors=1010
This cannot guarantee that links will not overlap.
Hi,
Nothing works.
My code is this please let me know if i have written anything wrong.
myDiagram.nodeTemplate =
$(go.Node, “Auto”,
{ layoutConditions: go.Part.LayoutAdded | go.Part.LayoutRemoved, zOrder: 2 },
//{ locationSpot: go.Spot.Center, resizable: false, fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides, minSize: new go.Size(108, 67) },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{ resizable: false, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate, desiredSize: new go.Size(108, 67), minSize: new go.Size(108, 67), maxSize: new go.Size(220, 120) },
new go.Binding("angle").makeTwoWay(),
new go.Binding("position", "position", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
$(go.Shape, "RoundedRectangle",
{
parameter1: 2,
fill: fill, stroke: "orange", strokeWidth: 2,
spot1: new go.Spot(0, 0, 1, 1),
spot2: new go.Spot(1, 1, -1, 0),
minSize: new go.Size(95, 59),
maxSize: new go.Size(220, 120),
},
new go.Binding("figure", "figure").makeTwoWay(),
new go.Binding("fill", "fill").makeTwoWay(),
new go.Binding("stroke", "stroke").makeTwoWay()
),
$(go.Panel, "Vertical",
{ alignment: go.Spot.Top, stretch: go.GraphObject.Horizontal, minSize: new go.Size(108, 67) },
$(go.Panel, "Table",
{ background: "lightblue", stretch: go.GraphObject.Horizontal, width: 15.5, height: 13 },
$(go.Shape, "StopSign", {
alignment: go.Spot.TopLeft, margin: 2,
fill: "red", width: 8, height: 8, stroke: null,
visible: visible
}, new go.Binding("visible", "visible").makeTwoWay())),
$(go.TextBlock,
{
font: "12px Arial, sans-serif", //stroke: lightText,
margin: 4,
stretch: go.GraphObject.Horizontal, textAlign: "center",
height: 38,
maxLines: 3,
// cursor: "move",
verticalAlignment: go.Spot.Center,
editable: true, isMultiline: true, //textValidation: validateText,
textEdited: function (textBlock, previousText, currentText) {
if (previousText != currentText) {
$scope.MBTOperationScope.renameNode(currentText.trim());
}
},
},
//n ew go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding("text", "text").makeTwoWay()),
{
toolTip:
$("ToolTip",
new go.Binding("visible", "text", function (t) {
if (t.trim('') == "Associated FL Name :")
t = '';
return !!t;
}).ofObject("TB"),
$(go.TextBlock,
{ name: "TB", margin: 4, font: "bold 12px Verdana,serif", stroke: "black" },
new go.Binding("text", "", diagramNodeInfo))
)
}),
{ contextMenu: $(go.Adornment) },
makePort("T", go.Spot.Top, true, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, true),
{ // handle mouse enter/leave events to show/hide the ports
mouseEnter: function (e, node) { showSmallPorts(node, true); },
mouseLeave: function (e, node) { showSmallPorts(node, false); },
//mouseDrop: dropOntoNode
}
);It looks like you’re still using ports on each side. You need to just use one port if you want to use Sides spots.
Thanks that works.
Edges overlapping problem resolved.For that i have to commented all makeport function.
And used fromSpot and toSpot of go.Spot.AllSides.
Issue
I can not draw link between nodes.
Requirement
How can i make node border as a port.
Declare the border to be the port by setting its GraphObject.portId property to the empty string. See for example Basic GoJS Sample.
Walter,
By your given link i can add node with another node but view is again getting bad.
All edges are getting overlapped as previous one.
Issue
If i remove all ports and set fromSpot and toSpot to go.Spot.AllSides UI becomes fine.But user can not draw the link from one node to other.
Expected
I want diagram should be clear as previous one and user can also draw as many links he want.
