Is it possible to customise annotation text edit

Question

Hi, I'd like to create a more wysiwyg text edit experience

I'd like to be able to change the annotation text on a node as soon as I start typeing (when I have a single node selected). Is it possible to trigger text edit this without double clicking but on a keypress event?
I'd like it to feel like the user is typing into the node. Is it possible to make the annotation edit boy the same size as the shape and transparent?

Here is a video with an example of the kind of thing I am trying to achieve...

I can do it using an HTML node and javascript, but I'd like to get it working for standard nodes/shapes if it is at all possible...

Many thanks!
Geoff

Aravind Ravi · Answer

Hi Geoff, 

Please find the response for queries in the below table 





Is it possible to trigger text edit this without double clicking but on a keypress event? 

When you click on a node, node click event gets triggered. In that event you can able to start edit the text using startTextEdit method without double click on node. Please refer to the below code snippet and sample 





public click(args: IClickEventArgs) { 
    if (args.element instanceof Node) { 
      this.diagram.startTextEdit(args.element); 
    } 
  } 

Sample: https://stackblitz.com/edit/angular-sgxkk2?file=app.component.ts  


Is it possible to make the annotation edit boy the same size as the shape and transparent? 

By default in the diagram, the text edit box gets rendered based on the text bounds. We cannot able to make the text edit box as same size as shape.  

Regards 
Aravind Ravi

Geoff · Answer

Thanks very much Aravind.  Is it possible to not use the default text edit box and implement our own?  Regards, Geoff

Arunkumar Manoharan · Answer

Hi Geoff, We have rendered the
default textbox internally in our source and it is not possible to implement
your own textbox by overriding it but you can customize it. We have created a
sample to customize the textbox.

Code snippet:

public click(args: IClickEventArgs) {
      if (args.element
  instanceof Node) {
       
  this.diagram.startTextEdit(args.element);
        let textArea:
  HTMLTextAreaElement = document.getElementById(this.diagram.element.id +
  '_editBox') as HTMLTextAreaElement;
        textArea.style.border = '2px solid
  red';
        textArea.style.borderRadius = '25px';
      }
    }

Sample: https://stackblitz.com/edit/angular-sgxkk2-p6j24q?file=app.component.tsRegards Arun Kumar.