Hiding a label when the text is empty

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))

You just want to hide the label on the link when the data.text value is an empty string or undefined, right?

I don’t think you need a “labelVisible” property. Something like this should do:

myDiagram.linkTemplate = $(go.Link, . . ., $(go.Shape, . . .), // the link shape $(go.Panel, go.Panel.Auto, // the label, consisting of a Panel with a Shape surrounding a TextBlock { visible: false }, // note: default is false -- not visible! new go.Binding("visible", "text", function(s) { if (s) return true; else return false; }), $(go.Shape, { fill: "khaki" }), // the label's background $(go.TextBlock, { margin: 3, background: "white" }, new go.Binding("text", "text")))); // get the text string from the linkdata.text property
This way the link label, a Panel, is not visible unless it is successfully data bound to a non-empty string.