How to conditionally display a TextBlock?

GoJS
1

Imagine you have a node with a TextBlock for the “heading”, and then for the case where there is additional info you want to add for the “body text” below the heading, you have a second TextBlock.
For cases where you have no “body text” you want to display, the TextBlock for the “body text” for all purposes needs to be hidden.

How can this be done in GoJS? I am unable to see how this could work. It’s super simple with regular html and javascript, but with GoJS, it is becoming painful to try to find a solution for these types of issues.

2

Just bind the GraphObject.visible property of the object(s) that you want to show or hide. For example, if you automatically want to hide a TextBlock when its text is not present or is an empty string:

$(go.Panel, "Vertical",
    $(go.TextBlock,
        new go.Binding("text", "heading")),
    $(go.TextBlock,
        { visible: false },  // default to not visible, in case there's no data.body property
        new go.Binding("text", "body"),
        new go.Binding("visible", "body", function(t) { return !!t; }))
)

There are several examples of this in the samples.

I think the design is fairly clean and simple.

3

Thanks.
One problem solved, now a new one rearing its head.

I have tried binding with the textAlign and the alignment properties to each text block, as I would like to give the end user the ability to control the text alignment at this individual level.

https://gojs.net/latest/intro/textblocks.html

However, behavior never works exactly the way I want it too.

For example, in one scenario, when the Heading is “wider” (text-wise) than the Body text, then when I align the Body text, it might move left, right, or center, but only within the original constraints of the Heading. (Heading starts out as “My Heading”, then gets edited to “My Custom Heading Description (whatever…)”, and then when I enter body text that on any single line is less in width than the Heading, and try to align it, the alignment does not reach the edges of the Shape.

Both Heading and Body have the ability to be multi-line.

I have tried various combinations other than the one you see here below. All very frustrating, because in normal html and css, this alignment problem would be dead simple to resolve.

	     myDiagram.nodeTemplateMap.add("Step",
                $(go.Node, "Auto", nodeStyle(),
                    {
                        locationSpot: go.Spot.Center
                    },
                    new go.Binding("location", "loc", go.Point.parse),
                    $(go.Shape, "Rectangle",
                        {
                            fill: "yellow",
                            strokeWidth: 2,
                            minSize: new go.Size(100, NaN)
                            //maxSize: new go.Size(400, NaN)
                        },
                        new go.Binding("fill", "outerShapeFill"),
                        new go.Binding("stroke", "outerShapeStrokeColor"),
                        new go.Binding("strokeWidth", "outerShapeStrokeWidth"),
                        new go.Binding("figure", "figure")
                    ),
                    $(go.Panel, "Vertical",
                        $(go.TextBlock,
                            {
                                margin: 10,
                                //editable: false,
                                font: "bold 12pt Roboto, Arial, sans-serif",
                                wrap: go.TextBlock.WrapFit,
                                isMultiline: true,
                                textAlign: "center"
                            },
                            new go.Binding("stroke", "textColor"),
                            new go.Binding("text", "textHeading"),
                            new go.Binding("textAlign", "textHeadingAlign")
                            // if using SINGLE LINE text INPUT instead of TEXTAREA   go.Spot.Center
                            // new go.Binding("alignment", "textHeadingAlign", function (t) { return go.Spot[t]; })
                        ),
                        $(go.TextBlock,
                            {
                                margin: new go.Margin(0, 10, 10, 10),
                                //textAlign: "start",
                                font: "12pt Roboto, Arial, sans-serif",
                                wrap: go.TextBlock.WrapFit,
                                isMultiline: true,
                                textAlign: "center",
                                visible: false
                            },  // default to not visible, in case there's no data.body property
                            new go.Binding("stroke", "textColor"),
                            new go.Binding("text", "textMain"),
                            new go.Binding("textAlign", "textMainAlign"),
                            new go.Binding("visible", "textMain", function (t) { return !!t; })
                        )
                    ),
                    makePort("T", go.Spot.Top, false, true),
                    makePort("L", go.Spot.Left, true, true),
                    makePort("R", go.Spot.Right, true, true),
                    makePort("B", go.Spot.Bottom, true, false)
                )
            );
4

What’s the HTML & CSS you would use? Can you show some examples of what you are trying to achieve with various instances of text lengths?

5

I meant it would be easier in HTML & CSS to achieve the task. In GoJS, I’m wasting tons of time trying to figure out how to do the same task.

So far, so good:
alignment is “center” for the heading and the body.

Let’s align the body text to the “left”.
Ok, looks like it should.

Now let’s align the heading text to the “left”. Nope, doesn’t work. The appearance does not change.

Now let’s put a line break in the heading, and see what happens when we align the heading text to the left. Nope, doesn’t work. It’s like the heading text is stuck or cramped into a tiny box, and aligning it center, right, or left is not respecting the full width of the container.

6

If you want an object, such as a TextBlock, to stretch to the width of the panel, you need to set GraphObject.stretch to go.GraphObject.Horizontal.

Hopefully you’ll be setting the width of the whole Panel, so that there would be a reason for the text to wrap.

I do recommend reading:
https://gojs.net/latest/intro/panels.html
https://gojs.net/latest/intro/tablePanels.html
https://gojs.net/latest/intro/sizing.html

7

Thanks, setting stretch: go.GraphObject.Horizontal in each of the TextBlock sections fixed that issue.