Click node and start text editor

I note that to switch between edit mode on two nodes with editable textBlocks requires 3 mouse clicks.

Click one to de-select current node;
Click two to select other node;
Click three to enable text edit on other node.

In the interests of reducing wear on mouse click buttons and user patience, I would like to automate the process to a single click. This is not applicable to every situation but it is appropriate to my use case.

I propose to detect if the first click was over a node and if so select it then find the part under the click point and it that is a textbox I will enable its text editor.

Question: Do I need to do this or is there a handy feature in gojs that would do it for me ?

Question: Can you give me any pointers to examples of finding the node and part under the mouse ?


You can reduce that case to two clicks by setting TextEditingTool.starting = go.TextEditingTool.SingleClick.

Call Diagram.findObjectAt and see if the result is a TextBlock that is editable. Selection of the Node is not required. Start editing a particular TextBlock by setting TextEditingTool.textBlock and then setting Diagram.currentTool.

I’m not sure about the ability to finish the original editing process before starting the next one, so you might need to allow acceptText to finish normally, and then execute the setting of TextEditingTool.textBlock and the setting of Diagram.currentTool to the Diagram.toolManager.textEditingTool after waiting to allow other events to be processed.

Brilliant thanks for that. I’ll let you know how I get on.

I was curious, so I just tried it. I copied the samples/basic.html sample and made only the following change, in the initialization of the Diagram:

"textEditingTool.starting": go.TextEditingTool.SingleClick, "textEditingTool.doMouseDown": function() { if (this.isActive) { this.acceptText(go.TextEditingTool.MouseDown); var tb = this.diagram.findObjectAt(this.diagram.lastInput.documentPoint); if (tb instanceof go.TextBlock && tb.editable) { var tool = this; setTimeout(function() { tool.textBlock = tb; tool.diagram.currentTool = tool; }, 1); } } }
At first I tried it with the setTimeout, and it worked. Then I commented out the use of setTimeout, and it still worked. I suggest keeping the use of the setTimeout.

I’m pleased that I actually gave some good advice, for once.


Good and useful advice indeed.

There is a working example here in case of use to others