Hi,
In mydiagram when i am place my node on some link having label on it my label get hide because i have used zOrder property to set my node on top of links. So I just want to move that label to some other location where node is not overlapping link.
GoJS Link Labels -- Northwoods Software describes how you can control the positioning of a label of a Link. By default a label is positioned at the midpoint, but you can specify the segmentIndex and segmentFraction to shift it one direction or the other.
Hey walter can you let me know how would i find the object details which is hidden by the node as i shown you in the image so that i can set its segmentFraction to move it
At the time of the addition of the new node, which if dragged from another Diagram would best be accomplished in an “ExternalObjectsDropped” DiagramEvent listener, you’ll know the Node.actualBounds. So now you want to find any link labels that intersect with that (or with a slightly inflated Rect if you want to leave some space).
Call Diagram.findObjectsIn to find all such potential Links. Diagram | GoJS API Something like:
var links = myDiagram.findObjectsIn(newNode.actualBounds,
// Navigation function -- only return Links
function(x) { var p = x.part; return (p instanceof go.Link) ? p : null; },
// All Links are OK:
null,
// the links may only partly overlap the given rectangle
true
);
Now iterate over those links and for each one find the label. Presumably you’ve given the label a GraphObject.name, so you can just call Node.findObject with that name.
Then you need to convert the label’s bounds into document coordinates.
Pass that label to this function:
function getDocumentBounds(obj) {
var tl = obj.getDocumentPoint(go.Spot.TopLeft);
var br = obj.getDocumentPoint(go.Spot.BottomRight);
return new go.Rect(tl, br);
}
(In version 2.0 we are introducing a GraphObject.getDocumentBounds method which can be more efficient than the above code. Until then I suggest you make do with it.)
Now see if that Rect intersects with your newNode.actualBounds by calling Rect.intersectsRect. If it does, then you know you’d like to move the label by setting its GraphObject.segmentFraction.
But that last step is the hard part – deciding where to move it to. I don’t have an easy answer for you – you’ll need to figure that out.
Hi walter this is my link Template
myDiagram.linkTemplate =
$(go.Link,
{
routing: go.Link.AvoidsNodes,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
fromLinkable: true,
fromLinkableSelfNode: true,
fromLinkableDuplicates: true,
toLinkable: true,
toLinkableSelfNode: true,
toLinkableDuplicates: true,
zOrder: 1,
selectionAdorned: true,
toShortLength: 2,
},
new go.Binding(“points”).makeTwoWay(),
new go.Binding(“zOrder”),
new go.Binding(“routing”, “routing”),
$(go.Shape, { stroke: “gray”, strokeWidth: 1.5, name: “HIGHLIGHT” }),
$(go.Shape, { fromArrow: “Circle”, fill: “gray”, strokeWidth: 2, stroke: “gray” }),
$(go.Shape, { toArrow: ‘Standard’, fill: “gray”, strokeWidth: 2, stroke: “gray” }),
$(go.Panel, “Auto”,
{ _isLinkLabel: true, cursor: “move” }, // marks this Panel as being a draggable label
$(go.Shape, {
isPanelMain: true,
fill: linkbackground,
stroke: linkstroke,
strokeWidth: 2
},
new go.Binding("stroke", "stroke").makeTwoWay()
),
$(go.Panel, "Table",
{
background: "transparent",
stretch: go.GraphObject.Horizontal,
},
$(go.Shape, "StopSign",
{
alignment: go.Spot.TopLeft, margin: 3,
width: 8, height: 8, fill: "red", visible: visible, stroke: null
},
new go.Binding("visible", "visible").makeTwoWay()), $("Button", {
alignment: go.Spot.Right,
width: 16,
height: 15,
click: add_IP_OP,
visible: false,
cursor: "pointer",
margin: go.Margin.parse("0 2 0 0"),
//margin: new go.Margin(2, 0, 0, 90)
}, new go.Binding("visible", "stroke", function (color) {
}),
$(go.TextBlock, {
text: '',
textAlign: "center",
font: '10px FontAwesome'
})),
new go.Binding('visible', 'text', function (t) { return t.trim() !== '' }),
$(go.TextBlock, "Label", {
width: 60,
height: 16,
name: "linkLabel",
margin: go.Margin.parse("4 15 0 9"), editable: true,
maxLines: 1,
textAlign: "center",
isMultiline: true, // don't allow embedded newlines
//textValidation: validateText,
segmentIndex: 3,
segmentFraction: 0.0,
alignmentFocus: go.Spot.BottomLeft,
},
new go.Binding('visible', 'text', function (t) {
return t.trim() !== ''
}),
new go.Binding("text", "text", function (e) {
if (e != "") {
return e;
}
}).makeTwoWay()),
{ contextMenu: $(go.Adornment) },
new go.Binding("segmentIndex").makeTwoWay(),
new go.Binding("segmentFraction").makeTwoWay()
)
));
and i am not be able to set segmentFraction in this it always come in middle when i set it to 0.2 or.0.8
I can’t really parse your code – there’s too much unrelated stuff there for me to tell what’s where.
You need to make sure any of the segment… properties and alignmentFocus property are on the element which is an immediate child element of the Link. Setting them on any objects that are inside the label, if it’s a Panel, won’t have any effect on the Link’s arrangement of the labels.