text edit for diagram element

Question

Hi, when I doublie click on the connector I want its information like connecterid, its old annotation and new annotation. Similarly if a node is double click for updating its annotations I want its respective properties but I am getting commonly as below, I want to check if the annotation of connector is being changing or node;'s

please help!

textEdit(args: ITextEditEventArgs) {

console.log(args)

//get a new text and old text

console.log(args.newValue);

console.log(args.oldValue);

}

Shyam G · Answer

Hi Rakhi,  
  
By default, we can get newValue and oldValue properties in the textEdit event arguments. We have planned to include annotation and selected object in the textEdit event arguments. We have logged “Support to add annotation object in the textEdit event arguments” as a usability feature. The patch for this feature is estimated to be available on volume 1, 2020 release which is scheduled to release by the end of March, 2020. You can track the status of the feature from the below link.  
  
Feedback link: https://www.syncfusion.com/feedback/12546/support-to-add-annotation-object-in-the-textedit-event-arguments 

Regards,  
Shyam G

Aravind Ravi · Answer

Hi Rakhi, 
  
We have implemented the feature Support to add annotation object in the textEdit event arguments in our Essential Studio 2020 Volume 1 Release (v18-1-0-42) is rolled out and is available for download under the following link            
Link: https://www.syncfusion.com/forums/152921/essential-studio-2020-volume-1-release-v18-1-0-42-is-available-for-download   
In this feature,  on text edit event args you get the edited annotation properties using annotation args and node or connector using  element args.  Please refer to the code example. 
  
Code example: 
textEdit(args: ITextEditEventArgs) { 
    console.log(args) 
    //gets the annotation properties 
    console.log(args.annotation); 
    // gets node or connector properties in which annotation gets edited 
    console.log(args.element); 
} 
  
Regards 
Aravind Ravi

RakhiS · Answer

Hi, when I doublie click on the connector I want its information like connecterid, its old annotation and new annotation. Similarly if a node is double click for updating its annotations I want its respective properties but I am getting commonly as below, I want to check if the annotation of connector is being changing or node;'s
please help!
textEdit(args: ITextEditEventArgs) {
console.log(args)
//get a new text and old text
console.log(args.newValue);
console.log(args.oldValue);
}

Hi,

I only wanted to know that

1. how to distinguish whether a node is getting edited or a connector,

2. how to get the id of the respected element which is being edited.

because while doing console to args, i am getting

oldValue,newValue,cancel,name of event

if I can get the element (node or connector) and its id, I can do the work using old value and new value. Please help

Aravind Ravi · Answer

Hi Rakhi, 
 
Please find the response for the queries in below table 
 




how to distinguish whether a node is getting edited or a connector, 

If the annotation in node gets edited means then you get the node through element args 
 
  
 
 
If the annotation in connector gets edited means you can get connector through  element args 
 
  
 
Code example: 
textEdit(args: ITextEditEventArgs) {  
    // gets node when it gets edited  
    console.log(args.element);  
} 
 
Simultaneously we cannot able to edit both node and connector annotation. So that we have handle in element args to return which object gets edited. 
 


how to get the id of the respected element which is being edited. 

By using element args you can get the id of the respected element which gets edited. 
 
Code example: 
textEdit(args: ITextEditEventArgs) {  
    // gets element id which gets edited  
    console.log(args.element.id);  
} 
 
 
 
Please upgrade to our latest version 18.1.0.42 to include annotation and selected object in the textEdit event argumentsWe have created a simple stack blitz sample to show how text edit event works. Please find the sample in below link 
 
Sample: https://stackblitz.com/edit/xsbrwn?file=index.ts 
Regards 
Aravind Ravi