User Handles in TypeScript

[Martin Pamplin]

I am looking at using the MindMap diagram in a TypeScript environment. I have created user handles when the node is selected, but I cannot get actions associated with these. I've seen two threads on this subject both of which say incidents have been created, but I cannot find the incidents to get the fix.

Do you have any examples of how to do this in TypeScript?

[Ramya Thirugnanam]

Hi Martin,  

 

We have created a typescript sample in which we have rendered a user handles in diagram. When you click on a node, the settings user handles appear at bottomRight position and when you click on it, we have shown the alert in mouse up.  

 

Sample:  http://www.syncfusion.com/downloads/support/directtrac/general/ze/userhandlesample-1560969638  

 

Please find the documentation for user handles as below. 

Link: https://help.syncfusion.com/js/diagram/interaction#user-handles 

 

Regards, 

Ramya T 

[Martin Pamplin]

I have looked at the sample you sent and have a few more questions / observations.

• This is JavaScript not TypeScript. I have seen this code elsewhere.
• It doesn't work, at least not for me. When I select a node the user handles appear and when I click on it the alert message appears. But then wherever I click the alert message appears, I cannot deselect the node I just get the alert message.
• When I try to insert this code into my TypeScript code it tells me that ej.datavisualization.Diagram.ToolBase does not exist.

Do you have a solution written in TypeScript rather that JavaScript posted into a TypeScript file?

[Ramya Thirugnanam]

Hi Martin,  

Sorry for the inconvenience caused. 

 

Query	Response
This is JavaScript not TypeScript. I have seen this code elsewhere.	We have modified the userhandles code to a typescript. Here is a code example.    class Settings extends ej.datavisualization.Diagram.ToolBase {       diagram: any;          singleAction: boolean;       name: string;       cursor: string;       constructor(name:string) {           super();           this.name = name;           this.singleAction = true;           this.cursor = "pointer";       }       mouseup(evt) {           alert("settings tool");           super.mouseup(evt);       }   }
It doesn't work, at least not for me. When I select a node the user handles appear and when I click on it the alert message appears. But then wherever I click the alert message appears, I cannot deselect the node I just get the alert message.	We have resolved an issue in below application.
When I try to insert this code into my TypeScript code it tells me that ej.datavisualization.Diagram.ToolBase does not exist.	·        In our diagram, we use resizeTool, moveTool internally which is derived from ToolBase class. We have not defined this class in ej.web.all.d.ts file.  ·        Similarly, if you need to render userhandles tool, you need to define ToolBase class separately in a file at application level.  ·        In the below sample, we have defined ToolBase class in toolbase.ts file.

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/userhandlemodifiedsample393775205  

 

Regards,  

Ramya T 

[Martin Pamplin]

Thank you, that explains it and works perfectly.

[Ramya Thirugnanam]

Hi Martin,   

 

Thanks for your update. 

 

Regards, 

Ramya T