Deleted node overlapping with other nodes

GoJS
1

I have a note node that can be attached to another node. The note node serves as an annotation or comment that can be linked to the main node, providing additional information or context. The note node itself is made from a TextBlock, which allows for editable text content. The note node can be attached to the other nodes as a decorator, enabling users to visually connect notes to their corresponding nodes within the diagram.

The problem I am running into is textEdited isn’t being triggered when I click the tab key, so I added an event listener to my custom text editing tool. When tab is clicked, it updates the note’s text, which fixed my problem, but now when I successfully delete the note node (when the text block has an empty string), the note node “appears” to be there, layered on top of the attached node. Not until I click into the diagram does it go away. I think it’s happening because the text block is still in editing state, but when I try to do doDeactivate(), it does fixes my problem, but then the graph doesn’t respond to anything - can’t selected diagram, can’t click another node, etc. Would you agree it’s happening because the text block is still in editing state? Is there another way to get out of the editing state?

Once deleted:
note-node-bug

After clicking into diagram (desired outcome):
note-node-bug-after

2

How is your custom HTML text editor implemented? Are you calling acceptText on receiving a Tab input?

A reimplementation of the default text editor is available here: https://gojs.net/latest/extensions/TextEditor.js

3

I’m curious why you didn’t get a TextBlock.textEdited event call even before you implemented your own text editor.

4

This is how my event listener looks like:
textArea.addEventListener(‘keydown’, (event: KeyboardEvent) => {
if (event.key === ‘Tab’) {
event.preventDefault();
if (textBlock.diagram) {
textBlock.diagram.commit((diagram: any) => {
const node = textBlock.part?.data;
Utilities.updateProperty(‘text’, textArea.value, node, diagram);
}, Transactions.UPDATE_NOTE);
}
}
});
};

I haven’t tried acceptText yet. I’ll give it a try

5

I tried to look into that and I think because the diagram is wrapped in React components when tabing out of the note node it focuses on an outside component and the focus stays in the textBock in the graph?

6

I simply added this to the TextBlock declaration in the gojs-react-basic sample, and it worked as I would have expected.

textEdited: (tb: go.TextBlock) => alert(tb.text)