Node Label

Default that the node is comprised of images and text labels. The text label is the name property of node. Line feed is allowed. Relevant styles of label can be set to change fond size, color and background effect of text label

Text style

Example, set the style of text label to realize gradient background and bubble effect

var nodeWithLabel = graph.createNode("Node with \nLabel", -120, -110);
nodeWithLabel.setStyle(Q.Styles.LABEL_OFFSET_Y, -10);
nodeWithLabel.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_TOP);
nodeWithLabel.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_BOTTOM);
nodeWithLabel.setStyle(Q.Styles.LABEL_BORDER, 1);
nodeWithLabel.setStyle(Q.Styles.LABEL_POINTER, true);
nodeWithLabel.setStyle(Q.Styles.LABEL_PADDING, new Q.Insets(2, 5));
nodeWithLabel.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT, Q.Gradient.LINEAR_GRADIENT_VERTICAL);

Operation effect:

Several text label

Realize several text label by adding child components. Each text label can be placed at different positions, and set with different styles and information

Example

Adds one descriptive text label for the node, and place it after the node

var graph = new Q.Graph('canvas');
function createTextWithDescription(text, description, x, y){
    var text = graph.createText(text, x, y);
    text.setStyle(Q.Styles.LABEL_BACKGROUND_COLOR, "#2898E0");
    text.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT, new Q.Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, ['#00d4f9', '#1ea6e6'], null, Math.PI/2));
    text.setStyle(Q.Styles.LABEL_COLOR, "#FFF");
    text.setStyle(Q.Styles.LABEL_BORDER, 0.5);
    text.setStyle(Q.Styles.LABEL_PADDING, 4);
    text.setStyle(Q.Styles.LABEL_BORDER_STYLE, "#1D4876");
    text.setStyle(Q.Styles.LABEL_RADIUS, 0);
    text.setStyle(Q.Styles.LABEL_SIZE, new Q.Size(60, 25));
    text.setStyle(Q.Styles.SELECTION_COLOR, "#0F0");
    var label1 = new Q.LabelUI();
    label1.border = 0.5;
    label1.borderColor = "#DDD";
    label1.borderRadius = 0;
    label1.size = new Q.Size(150, 25);
    label1.padding = 4;
    label1.alignPosition = Q.Position.LEFT_MIDDLE;
    label1.position = Q.Position.RIGHT_MIDDLE;
    label1.anchorPosition = Q.Position.LEFT_MIDDLE;
    text.addUI(label1, [{
        bindingProperty : "data",
        property : "description",
        propertyType : Q.Consts.PROPERTY_TYPE_CLIENT
    }]);
    text.set("description", description);
    return text;
}
var text = createTextWithDescription("TEXT", "描述");
var a = graph.createNode("HELLO", -100, -50);
graph.createEdge(a, text);

Operation effect