anvlkv
February 24, 2017, 1:26pm
#1
Hello,
How would you make a link adornment that outlines link and it’s label?
By default link looks like this:
The closest I came to is:
selectionAdornmentTemplate: $(go.Adornment, 'Auto', $(go.Shape, {
fill: null,
stroke: 'dodgerblue',
strokeWidth: 3
}, new go.Binding('geometry', '', (data, part) => {
let diagram = part.diagram;
let geometry;
if (diagram && diagram.selection) {
diagram.selection.each((selection) => {
if (selection.data === data) {
geometry = selection.geometry.copy();
selection.elements.each((el) => {
combineFigures(el, geometry);
})
}
})
}
return geometry;
})
))
And
function combineFigures(el, geometry) {
if (el.geometry) {
el.geometry.figures.each((fig) => {
geometry.add(fig)
})
}
else if (el.panel) {
combineFigures(el.panel, geometry);
}
}
But it seems that link label is passes by and I got almost same arrow.
walter
February 24, 2017, 2:18pm
#2
The Adornment will always be of Panel.type “Link”, so that you can arrange labels in it just as with the labels on the Link itself.
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" }),
$(go.Panel, "Auto",
$(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
$(go.TextBlock, { margin: 3 },
new go.Binding("text", "to", function(t) { return t[0]; }))
),
{
selectionAdornmentTemplate:
$(go.Adornment, "Link",
$(go.Shape, { isPanelMain: true, stroke: "dodgerblue", strokeWidth: 2 }),
$(go.Panel, "Auto",
$(go.Shape, "RoundedRectangle", { fill: "lightgray", stroke: "dodgerblue", strokeWidth: 2 }),
$(go.TextBlock, { margin: 3, stroke: "dodgerblue" },
new go.Binding("text", "to", function(t) { return t[0]; }))
)
)
}
);
Results:
anvlkv
February 24, 2017, 3:58pm
#3
So I have to duplicate everything that determines width and position of my label in adornment template? Label is editable so I have to move editor to the adornment as well.
I thought, Isn’t it possible to combine objects?
walter
February 24, 2017, 4:04pm
#4
In that case, why use a Part.selectionAdornmentTemplate at all? Set Part.selectionAdorned to false and change the appearance of the objects in the Link when it Part.isSelected .
You can do that either with a Binding like:
new go.Binding(...someProperty..., "isSelected",
function(sel) { return sel ? valueWhenSelected : normalValue; })
.ofObject()
or with a Part.selectionChanged event handler.