Hi All,
I have implemented the functionality to hide the label text of a link/node/group if the user enters nothing, so that the text does not overlap the link with a different colour box.
So if the user deletes all the text and the link background does not match the line colour you get this:
It uses the bindings to decide whether or not to show the label if the label is blank.
It doesn’t work 100% with the undo/redo functions when adding a new part from a toolbox, but it is a start. I will investigate further when I get the chance.
Is this correct use of the bindings? Am I am doing anything fundamentally wrong with this?
If you have any suggestions, please let me know otherwise I hope you can use this idea!
Thanks.
Jonathan
// Notes:
// diagram is the go.Diagram object
// chkToggleLabels is a checkbox that toggles all labels on the diagram.
// $ is the jQuery object.
// textValue is the value of the text label.
// data is the node/link/group data object. It has a text and labelVisible Property
function setNameFromData (textValue, data) {
var labelToggle = $("#chkToggleLabels").prop(“checked”);
var part = diagram.findPartForData(data);
if (part != null) {
if (textValue === "") {
data.text = ""; // tweak because the updateTargetBindings does not seem to work on individual properties properly.
data.labelVisible = false;
part.updateTargetBindings();
}
else {
data.labelVisible = labelToggle;
}
}
return textValue;
};
// visible is the true/false value for the visibility
// data is the node/link/group data object. It has a text and labelVisible Property
function setLabelVisbilityFromData(visible, data) {
var labelToggle = $("#chkToggleLabels").prop(“checked”);
if (data.text === “” || data.text === undefined) {
labelToggle = false;
}
return labelToggle;
};
// visible is the true/false value for the visibility
// editor is the text editor on the label
function setLabelVisbilityFromEditor(visible, editor) {
var data = editor.part.data;
var labelToggle = $("#chkToggleLabels").prop(“checked”);
if (data.text === “” || data.text === undefined) {
labelToggle = false;
}
return labelToggle;
};
// and the bindings on the text box
new go.Binding(“text”, “text”).makeTwoWay(setNameFromData),
new go.Binding(“visible”, “labelVisible”, setLabelVisbilityFromEditor).makeTwoWay(setLabelVisbilityFromData))