Problem making TextBlock inside a Node resizable

GoJS
#1

So I have the following NodeTemplate here:

        var texttemplate = GO(go.Node, "Horizontal", 
                                                {resizable: true, resizeObjectName: "TEXTBLOCK", selectionObjectName: "TEXTBLOCK"},
                      GO(go.TextBlock,
                                                new go.Binding("text", "text"), 
                                                new go.Binding("font", "fontType"),
                                                    new go.Binding("textAlign", "textAlign"),
                                                    new go.Binding("isUnderline", "underline"),
                                                    new go.Binding("width", "textWidth"),
                                                    new go.Binding("height", "textHeight")
                                                ),
                                                    new go.Binding("location", "shapePosition"),
                                                    new go.Binding("angle", "rotation"),
                                                  new go.Binding("width", "width"), 
                                                  new go.Binding("height", "height"),
                                                    new go.Binding("layerName", "layer")
                                            )

The line resizable:true renders the resizable corners on my Node object, however, the TextBlock contained within the node, does not seem to be resized. Please confer with the screenshot. YOu can see that the TextBlock’s text is cropped where as the Node boundary far exceeds the apparent Text boundary

problem_resiable_text_block.png1080×635 58.7 KB

I was following along with http://gojs.net/latest/intro/tools.html. I think I maybe went wrong with assuming that the resizeObjectName of a TextBlock is "TEXTBLOCK". Ideas?

#2

No GraphObject has a name unless you assign it.

#3

I see!

So now it successfully resized the TextBlock. the only problem is, when I increase the size of the Node by dragging on the resizable edges, the TextBlock increases appropriately, but the parent Node is unaffected. How can I bind the change to the TextBlock size to automatically change the parent Node to the same boundaries of width and height?
Do I need to set selectionObjectName to the name of the containing Node ?
Here is my current template:

var texttemplate = GO(go.Node, "Horizontal", 
                                                {resizable: true, resizeObjectName: "TEXTBLOCK"},
                      GO(go.TextBlock,
                                                    { name: "TEXTBLOCK"},
                                                new go.Binding("text", "text"), 
                                                new go.Binding("font", "fontType"),
                                                    new go.Binding("textAlign", "textAlign"),
                                                    new go.Binding("isUnderline", "underline"),
                                                    new go.Binding("width", "textWidth"),
                                                    new go.Binding("height", "textHeight")
                                                ),
                                                    new go.Binding("location", "shapePosition"),
                                                    new go.Binding("angle", "rotation"),
                                                  new go.Binding("width", "width"), 
                                                  new go.Binding("height", "height"),
                                                    new go.Binding("layerName", "layer")
                                            )
#4

Here we have an image example of how the TextBlock exceeds the bounds of the Node. I tried also making the Node resizable but that doesn’t actually change the behavior of the diagram. I suppose, instead of making the TextBlock resizable, I should make the Node resizable and then manually Bind the TextBlock width and height to the node dimensions. Any ideas how to do that or resources to look at to learn how?

textblock_exceeds_node.png1145×804 53 KB
`

#5

I could add an event listener for "PartResized" and then, within it, grab DiagramEvent().subject

and once I do that, then I can grab the node data for the subject, and set textWidth and textHeight of to be Node.width Node.height, no?

When I try this strategy in the following way:

ticketMasterDiagram.addDiagramListener("PartResized", function(e){
        ticketMasterDiagram.model.setDataProperty(e.subject, "textWidth", e.subject.data.width);
        ticketMasterDiagram.model.setDataProperty(e.subject, "textHeight", e.subject.data.height);
    });

I get the following warning in the JS console:

 `GraphLinksModel.setDataProperty is modifying a GraphObject, "Node#1159", is that really your itnent?`

I think I seem to be grabbing the wrong nodedata because I get the same gojs-debug error even when it is in a transaction. Any ideas. I really appreciate your help!

#6

It’s a bit odd for a “Horizontal” Panel to only have a single element in it (the TextBlock). Unless you actually have more elements in your Node (perhaps you were simplifying for this post), I suggest you remove the “Horizontal” panel type – it defaults to “Position”.

In either case the Node’s size will automatically include its only element. So I don’t see how the Node could be smaller than the resized TextBlock. However the Node doesn’t have any background property set to show any difference in size.

The ResizingTool will set the Part.resizeObject’s GraphObject.desiredSize. That means it’s modifying the TextBlock’s width and height properties. Since you do not have a TwoWay Binding on those two properties (or a single TwoWay Binding on the desiredSize property), any resizing that the user does will be lost, since it will not be reflected in the model data. (Unless you have some other way of capturing that information.)

It doesn’t make sense to have both a data.width and a data.textWidth property. I bet that’s how the Node is not getting bigger, because it got a width from the data, but since you aren’t updating the data.width, the Node’s not changing its width. (Same goes for height.)

So I think you should delete the Bindings for Node.width and Node.height. And you might want to rename textWidth to be width, to simplify.

#7

Great! Thank you Walter. So one last question, what is the minimum amount of Bindings that i can have on the above node template such that the resize of the TextBlock object is saved to source and target?

Currently I have Binding's on width height and desiredSize properties of the TextBlock. But is simply having a Two way binding on width and height sufficient to save changes to the desiredSize property of the parent Node? My reasonoing is thus, since desiredSize changes the width and height of a Node and desiredSize is what is written to when using resizable:true then doesn’t it follow that will cause the width of the target Node to change which, if a two way binding is present, will be propagated to the source?

Thanks!

#8

The minimal or simplest thing to do is what most of the samples do: only have a Binding on the GraphObject that is the Part.resizeObject, which I think is the TextBlock in this case, that looks like:

    new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)

Of course you can choose whatever data property name you like, if you do not want to use “size”.

You would not want to have any Binding on “width” or “height”.