Thank you Walter, It works by setting width for the TextBlocks inside the node. :)
I have another question ;-)
I am trying to change the color of the link (and its arrow) when user clicked on that link.
I follow this example GoJS Highlighting -- Northwoods Software
I change it into link event click instead of node click event on the example. But it does not work.
When I follow exactly example, it works. I don’t know why. Below is my code:
this.myDiagram.linkTemplate =
$(go.Link, {
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpGap,
//corner: 10
click: function (e, node) {
var diagram = node.diagram;
diagram.startTransaction("highlight");
diagram.clearHighlighteds();
node.isHighlighted = true;
diagram.commitTransaction("highlight");
}
},
new go.Binding("points").makeTwoWay(),
// mark each Shape to get the link geometry with isPanelMain: true
$(go.Shape, { strokeWidth: 2 },
//new go.Binding("stroke", "color"),
new go.Binding("strokeDashArray", "hasDash", function (hasDash) { return hasDash ? [2, 4] : []; }),
new go.Binding("stroke", "", function (model) {
return model.isHighlighted ? diagramColor.sandyBrown : model.data.color ? model.data.color : diagramColor.white;
}).ofObject(),
),
$(go.Shape, { visible: false, strokeWidth: 2, stroke: diagramColor.white, toArrow: 'OpenTriangle' },
new go.Binding("visible", "hasToArrow", function (d) { return d; }),
//new go.Binding("stroke", "color"),
new go.Binding("stroke", "", function (model) {
return model.isHighlighted ? diagramColor.sandyBrown : model.data.color ? model.data.color : diagramColor.white;
}).ofObject(),
),
$(go.Shape, { visible: false, strokeWidth: 2, stroke: diagramColor.white, fromArrow: 'BackwardOpenTriangle' },
new go.Binding("visible", "hasFromArrow", function (d) { return d; }),
//new go.Binding("stroke", "color"),
new go.Binding("stroke", "", function (model) {
return model.isHighlighted ? diagramColor.sandyBrown : model.data.color ? model.data.color : diagramColor.white;
}).ofObject(),
),
);
this.myDiagram.click = function (e) {
e.diagram.commit(function (d) { d.clearHighlighteds(); }, "no highlighteds");
};
The thing is only arrow getting change color when I clicked on that link (the link should turn to red as arrow, it changes color but it changes to “blue”, I guess this is default color when link is selected):

Can you please give me a hint?
Thank you alot :)