Selecting TextBlock in the node

GoJS
1

Hi,

Can we make a TextBlock selectable and also have it highlighted once it is selected? What are my options for the same? I tried searching for it in the API documentation but could not find a reference.

Also, the TextBlock is currently in a Panel which is inside a Node and once I click on TextBlock, I don’t want the panel/Node to be selected. Can we achieve that behavior?

Will really appreciate your help on this.

Thank you,
Pratik

2

You can set Node.selectable to false on your Node template, if you really do not want any node to be selected.

But maybe you want to allow selection but do not want to show that a node is selected – instead, set Node.selectionAdorned to false.

Yet perhaps you want to highlight just the TextBlock when the node is selected. Instead of either of the above settings, set the TextBlock.name to a name of your choosing and set Node.selectionObjectName to that name.

3

Hi Walter,

You are correct. I want to show the TextBlock selection but do not want that node is selected. I tried using the Node.selectionAdorned property and it is working fine as expected but I am not able to highlight/select the TextBlock using the above mentioned properties. Is there any other alternative?

Also, can we add an adornment to TextBlock in order to show it as Selected?

4

The latter question is answered by setting Node.selectionObjectName.

For the former question, I still do not understand what you really want. Do you want the user to be able to select some text, rather than a TextBlock?

If it is a TextBlock, then besides Node.selectionObjectName, you could change the appearance of the TextBlock. Easiest would be to change the TextBlock.background and/or the TextBlock.stroke. Please read GoJS Selection -- Northwoods Software

5

I have somewhat similar problem, where I just want to be able to select the text in the text block. I want the user to be able to select this text and copy it to their clipboard by right-clicking and then copying. I have been unable to find any reference to this after perusing through the documentation for so long.

6

Do you expect the users to have any other interactions with the diagram?

7

No, Just want the user to be able to select and right-click on the text and be able to copy it to the clipboard

8

This is a possibility: SVG drawing context -- Northwoods Software
See the last section on that page.

9

This won’t work, unfortunately, since it disables all diagram interaction as well. So I believe that all nodes and stuff are just svgs, including the text, which is why it is not possible to select it. In this case is there a function which copies a textBlock’s text to the user’s clipboard? I am thinking of adding a small “copy” button at the top-right of each text block, clicking which would copy the text to the clipboard.

10

Yes that should be easy, just use:

navigator.clipboard.writeText( /* text you want copied */);

in a click event. A very basic example:

// copy the Node key to clipboard
function copyText(e, obj) {
  navigator.clipboard.writeText(obj.part.data.key);
}

  // basic template with button and textblock showing Node.key
  myDiagram.nodeTemplate = new go.Node('Vertical')
    .add(
      $("Button",
        { margin: 2,
        click: copyText },
        $(go.TextBlock, "Copy text"))
    )
    .add(
      new go.TextBlock({ margin: 8, font: 'bold 14px sans-serif', stroke: '#333' })
        .bind('text', 'key'
      )
    );

live: https://codepen.io/simonsarris/pen/eYovPN

You may want to design some kind of feedback, like an HTML toast/modal that tells the user they have copied something (and what it is). My example does not do this.