TextBlock properties are not working

GoJS
1

Hi,
I am using a textblock in an “Auto” panel by specifying specific properties to that textBlock. Most of these properties are not working. Below is the textBlock I defined

                 $(go.Panel, "Auto", {
                      fromSpot: go.Spot.Right,
                      toSpot: go.Spot.Left,
                      fromLinkable: true,
                      toLinkable: true,
                      portId: "textBox"
                    },
                    $(go.Shape, "Rectangle", {
                            desiredSize: new go.Size(120,25),
                            stroke: "gray",
                            strokeWidth: 1,
                            fill: 'white'
                        }),
                    $(go.TextBlock,{
                        alignment: go.Spot.Center,
                        textAlign: "center",
                        width: 85,
                        height: 25,
                        stroke: 'blue',
                        wrap: go.TextBlock.WrapFit,
                        editable: true
                     }))

On click of textBlock to edit, The text area height and width are not taken as given. Also textAlign is not working.
Can you please let me know why it is so and help me if I am missing anything.

2

What’s the problem? It seems to work as expected, as far as I can tell.

Regarding each of the TextBlock properties that you have set:

  • alignment probably does not matter because the TextBlock is the only non-main element in the “Auto” Panel.
  • textAlign is working to center-align the text within each line
  • width and height are indeed 85x25, just tall enough for a couple lines
  • stroke results in blue text
  • wrap seems to wrap text OK
  • editable, yes the user can edit the text
3

No, on click of the textblock to edit(in edit mode) it is not taking the properties.

constantTextBlockBug.png1415×179 19.2 KB

Please, help me to figure out the issue.

4

The text editor that is used for entering text is independent of the TextBlock that renders text. You can customize the text editor as much as you like – I suggest that you start with the implementation that we provide, which is given in http://gojs.net/latest/extensions/TextEditor.js and used in HTMLInfo Text Editor.

There are other useful text editors in the extensions directory as well as in the samples directory.

5

Okay, thank you Walter. I will try that and get back if I face any issue.

6

Hi,
I have used the extension TextEditor.js with the latest gojs version(1.7.7), adding the line

diagram.toolManager.textEditingTool.defaultTextEditor = window.TextEditor;

But still any height given less than ‘125px’ to the textBlock is not being taken by it.
I inspected the height of the textblock in the debugger and figured out this issue.
For heights greater than ‘125px’, it is working as expected.
I found the same issue even without using any custom editor.
Was the textBlock given any min height kind of thing? Can you help me to fix this issue.

7

I would inspect that textarea element in the debugger and see why it has that height, if it was determined by some CSS rule.

8

Hi Walter,
Did you check this?
One more thing I need your help regarding textBlock. Can I implement auto-fill a set of suggested values for a textBlock?

9

To check what? I was politely suggesting what you could do to debug that, although now upon re-reading this topic, I’m not sure that that would help.

Text Editing Examples demonstrates two kinds of custom editors, using a drop-down list or a list of radio buttons.

Note how they use the TextBlock.choices property, an Array of strings, that can be set or data bound.

10

Okay Walter, Thanks for the suggestion. I’ll make use of that TextBlock.choices property.
But regarding the height issue, I have shown the template how I constructed the TextBlock and the properties I gave to it.
With and without using the custom textEditor, I had the same problem. By the CSS rule override you mean, the properties I defined to the textBlock or the customTextEditor?

11

The template defines the visual tree for each node automatically created for model data objects. Your code did not show how the TextEditingTool would create an HTML textarea for in-place editing of a particular TextBlock.

The behavior of the text editor is completely separate from the implementation of the textblock. Although the editor is certainly affected by the textblock’s properties.

12

I am using the same TextEditor given by you.
In that, the textarea height is calculated from the textBlock height as:

var textheight = (textBlock.naturalBounds.height * textscale) + 2;

As per my understanding, this calculated height will be taken by the text area during initialization for in-place editing of a TextBlock and so, the textarea should also take almost the same height what we give to the TextBlock.

If this is not the actual way how the textarea height is decided, Please suggest me where I need to set that height.

13

In that situation, what are the textblock’s naturalBounds?

I am still confused whether the problem originates with a TextBlock that is too tall or an HTML textarea that is too tall.