hi,
i am facing link overlapping issue when i create a graph structure look like this
Yes, so what is the desired solution? What have you tried?
i have tried this solution but it doesn’t work in with my diagram
You still haven’t said what you want. A sketch would help.
I really recommend that you not use four separate small ports. Just use the default behavior of having the whole Node act as a single port, and set fromSpot and toSpot to go.Spot.AllSides. Or if you want to get a bit more specific in your guidance, those top three "Label"ed Links could have fromSpot be go.Spot.RightSide or go.Spot.LeftRightSides and toSpot be go.Spot.TopSide.
For those bottom two "Label"ed Links, setting fromSpot and toSpot to go.Spot.BottomSide might help.
But all of these more specific suggestions depend on your not using small port elements.
I got the desired layout after removing all four ports and setting fromSpot and toSpot to go.Spot.AllSides .
But when i set fromLinkable: true, toLinkable: true, cursor: “pointer”,portId: “” to make nodes link able , again my diagram links get overlapped
On what did you set those properties? And what is your Diagram.layout?
my diagram layout and its properties
$(go.LayeredDigraphLayout,
{
direction: 90,
isOngoing: false, // sets the postion of the node to current drag pos
layerSpacing: 50,
setsPortSpots: false,
//columnSpacing: 20,
isRouting: true,
isValidLayout: true,
isViewportSized: true,
aggressiveOption: go.LayeredDigraphLayout.AggressiveMore,
cycleRemoveOption: go.LayeredDigraphLayout.CycleDepthFirst,
initializeOption: go.LayeredDigraphLayout.InitDepthFirstOut,
//layeringOption: go.LayeredDigraphLayout.LayerOptimalLinkLength,
packOption: go.LayeredDigraphLayout.PackAll
});
and i am setting these property on nodeTemplate
Ah, good – you are setting LayeredDigraphLayout.setsPortSpots to false. Layouts normally do the link routing, so you need to disable that layout’s routing behavior to respect the wishes of the nodes’ port spots.
So I cannot explain the behavior you are getting. What’s your node template? If you want, you can excise stuff in the body that’s unrelated to this problem.
myDiagram.nodeTemplate =
$(go.Node, “Auto”,
{ layoutConditions: go.Part.LayoutAdded | go.Part.LayoutRemoved, fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides, },
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),
cursor: "pointer", portId: "",
fromLinkable: true,
fromLinkableSelfNode: true,
toLinkable: true,
toLinkableSelfNode: true,
},
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());
}
},
},
new go.Binding("text", "text").makeTwoWay()),
{
toolTip:
$("ToolTip",
new go.Binding("visible", "text", function (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) },
{ // handle mouse enter/leave events to show/hide the ports
mouseEnter: function (e, node) { showSmallPorts(node, true); },
mouseLeave: function (e, node) { showSmallPorts(node, false); },
}
);You have to put port-related properties on the element that is the port, not on unrelated objects. A port object is whatever GraphObject has GraphObject.portId set to a string. By setting portId on the Shape, you’ve made it the port, so all port properties should be set on that Shape.
can you please provide me an example for this
write now i am setting fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides, in go.Node and port info on shape as i share my code
But you’ve changed what is the port – it used to be the Node, but now it’s the Shape.