Hello,
I’m trying to achieve this result:
I’m using the Links to Links Sample as base, but all “Link Label Nodes” are getting centered to the “Main Link”:
Is it possible to get the “Link Label Nodes” in different positions? How could it be done?
Thanks!
If I were you, I would not use label nodes, but instead treat the horizontal line as if it were a long thin node. Take a look at the BarLink class defined in:
Grafcet Diagrams or
Network Configuration
Note that the two BarLink classes are not quite the same, since the determination of when to have links be routed in a certain way is controlled by the Node category. You can copy either class and adapt it to fit your app’s needs.
Hi Walter,
I’m developing a genogram graph and using the Genogram Sample as reference, which defines a class called GenogramLayout, that is prepared to deal with Label Nodes for arranging the layout.
If I treat the horizontal line as if it were a long thin node, the GenogramLayout will not work as expected.
Is it possible to have this behavior by modifying the GenogramLayout?
What would be quicker to do, change the Label Nodes approach and modify the GenogramLayout, or continue with the Label Nodes ?
Oh, sorry, I didn’t recognize what you were trying to do. (And you didn’t say.)
You might be interested in this sample: Genogram
Hi Walter, thank you, for this Twins Example, I will need it.
But, about my question, I decided continue using label nodes to keep the GenogramLayout class. Now I can reproduce what I wanted by mannualy defining the Spots everytime a new child (new link) is created. Using this function:
private rearrangeChildrenLinks(marriageNodeKey: any) {
var marriageNode: go.Node = this._diagram.findNodeForKey(marriageNodeKey);
var childrenLinks = marriageNode.findLinksConnected();
var childrenTotal = childrenLinks.count;
if (childrenTotal <= 1) {
return;
}
var spaceBetween = 0.8 / childrenTotal;
while (childrenLinks.next()) {
var childLink = childrenLinks.value;
var m = this._diagram.model;
var data = childLink.data;
var distanceBetween = spaceBetween * (childrenLinks.key + 1);
m.setDataProperty(data, 'fromSpot', new go.Spot(distanceBetween, 1));
}
}
This is the current result:
The problem now is, how to get the links to be a vertical line without the curves pointed above?
Here is my Diagram config:
var $ = this._$;
this._diagram = $(go.Diagram, this._canvasID, {
'initialAutoScale': go.Diagram.Uniform,
'initialContentAlignment': go.Spot.Center,
'allowDrop': true,
'LinkDrawn': this.createNewLink.bind(this),
'layout': $(GenogramLayout, {
'direction': 90,
'columnSpacing': 10,
'setsPortSpots': false,
'layerSpacing': 60
})
});
Here is my Label Node template:
public createMarriageNodeTemplate() {
var $ = this._$;
var nodeTemplate = $("Node", { height: 0, width: 0, fromEndSegmentLength: 1 },
$(go.Panel, 'Auto', {'isPanelMain': true},
$(go.Shape, {
"fill": "red"
}))
)
;
return nodeTemplate;
}
And here is the Link Template used to link child with the marriage node:
public createParentalLinkTemplate(): any {
var $ = this._$;
var parentalLink = $(go.Link,
{
'layerName': 'Background',
'selectable': true,
'fromSpot': go.Spot.Bottom,
'toSpot': go.Spot.Top
},
new go.Binding("fromSpot", "fromSpot"),
$(go.Shape, {
'strokeWidth': 2
},
new go.Binding("strokeDashArray", "isDashed", function(isDashed) {return (isDashed) ? [6,2] : null})
)
);
return parentalLink;
}
I need it to looks like it:
Are these information enough ? Thank you.
In your marked-up screenshot, it is impossible for there to be a vertical line connecting “Kelly” with the horizontal line connecting “Marcos Antonio” and “Bruna”.
How would you want that link to be routed instead?
The BarLink class I mentioned earlier would do what I think you would want. You would have a “BarNode” as the only link label node on the marriage link between “Marcos Antonio” and “Bruna”. And you would not need to compute or maintain on the link data the “fromSpot” property.
Thank you Walter. I’m now using the BarLink class as you said and almost got the desired result:
Every time a new child is included I’m increasing the distance between the parents, this way the Marriage Link width is also increased.
//count the childs to increase distance between parents
var childrenCount = labnode.findLinksConnected().count;
var distanceBetweenParents = (childrenCount === 0 ? 1 : childrenCount) * 30;
var distance = v.x + spouseA.actualBounds.width + distanceBetweenParents;
//labnode.width = need it to be equal to the labnode.labeledLink width;
spouseA.position = new go.Point(v.x, v.y);
spouseB.position = new go.Point(distance, v.y);
But I can’t find a way to increase the Link Label Node width. I’m thinking if both “Marriage Link” and “Link Label Node” has the same width, they would be large enough to avoid the child links of sharing the same spot on the Link Label Node.
How can I get the Marriage Link width and set it in the Link Label Node width?
If you are using the Genogram sample code as your starting point, you can call findMarriage to find a marriage link between the nodes corresponding to the keys for two persons.
Assuming you will only have one label Node on a marriage Link, link.labelNodes.first() will return the marriage label Node. Assuming it’s non-null, you can then set its width to the distance between the two parents.
Thank you Walter, I can get the Marriage Link width using this code:
labnode.width = lablink.routeBounds.width;//get the Marriage Link width and set in the labnode.width so they can have the same width
I’ve got the desired result:
Hello,
I want multiple links to links in different position.I m refering “Links to Links Sample” and always “Link Label Nodes” are getting centered at center of link.
i want this 
i have refer your function rearrangeChildrenLinks()…bt from where you have called… could you plz tell me some details and guid me…
I have used Layered layout.