Multiple type of text editing tool for a textblock

GoJS
1

Hello, Walter.

I’d like to make a node to supply multiple TextEditingTool for a TextBlock.

This node works like this.

  • Open “default” TextEditingTool when I double-click the TextBlock or press F2 key.
  • Open “extended” TextEditingTool when I press F1 key.

The default TextEditingTool is gojs default tool you know.

image

And extended tool is fully customized one I implemented, based on what you provided.
It’s a kind of modal dialog type.

image
image.png855×706 21.9 KB

Would you please recommend how I integrate this to gojs?
What is the best way how I do this job.
Does gojs offer this?

2

Well, you could make a custom TextEditingTool, as shown at GoJS HTML Interaction -- Northwoods Software and in various samples.

Or you could implement it without using TextEditingTool at all, just by responding to the F1 key and looking at the selected node (if there is one), displaying your dialog, choosing what text to start editing, and if successful modifying the text of the node.

3

Walter,

Can I use multiple text editor at the same time by changing A custom editing tool and B custom editing tool according to the key pressed?

I specified the ‘textEditor’ value for TextBlock when I define a nodeTemplate.
Can I change ‘textEditior’ according to the key pressed?

Thak you always, walter.

4

I’m not sure it makes sense to have multiple text editors active at the same time, since only one input element may have focus at any one time. But you could certainly have both visible at the same time. That might be confusing for the user, though.

Yes, you could change which text editor that you use at the time a command occurs. But it is more commonplace to have different text editors defined on different TextBlocks, by setting TextBlock.textEditor. The sample Text Editing Examples does that for the fourth TextBlock of the Node.

Implement your F1 key command by overriding CommandHandler.doKeyDown, as shown at GoJS Commands -- Northwoods Software, and calling CommandHandler.editTextBlock with the specific TextBlock to edit.

1 Like
5

Sorry, Walter.

My English was wrong.
I didn’t mean ‘at the same time’ that multiple text editors activated at once.
The users should choice which type of editor he would use each time.

Thank you for your answer.
I’ll study that reference and try it.

6

walter,

How can I add a event listener when text editor lose focus (until the text editing tool abandon its ‘textBlock’)?

I’m trying to solve this issue with a way which I change the text editor type for each edit starting.
So, I had to revert editor type of text block to default for each edit finishing.
How can I do this when text editor lost focus?

Thanks!

7

walter,

I’ve tried to re-implement ‘acceptText()’.

But I found that the tool already doesn’t have ‘textBlock’ at that point.

May I should add event listener for ‘click’ event for canvas?
I think it’s a little risky that I take textblock object through diagram.selection in this listener function.

What would be most nice try to me for this issue.
Please show me the road.

Thank you!

8

At the time that TextEditingTool.doAccept is called, there is definitely still a value for TextEditingTool.textBlock. That property is only set to null in the TextEditingTool.doDeactivate method, which is called only when the tool is stopping.

If you want to do something when your custom text editor loses focus, implement a “blur” listener on it. Element: blur event - Web APIs | MDN