User Handles in TypeScript

Martin Pamplin

Asked On April 15, 2019 07:57 AM UTC

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?

Reply | Reply with quote

Ramya Thirugnanam [Syncfusion]

Replied On April 16, 2019 06:48 AM UTC

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

Reply | Reply with quote

Martin Pamplin

Replied On April 16, 2019 07:51 AM UTC

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?

Reply | Reply with quote

Ramya Thirugnanam [Syncfusion]

Replied On April 16, 2019 10:31 AM UTC

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

Reply | Reply with quote

Martin Pamplin

Replied On April 16, 2019 02:39 PM UTC

Thank you, that explains it and works perfectly.

Reply | Reply with quote

Ramya Thirugnanam [Syncfusion]

Replied On April 17, 2019 06:02 AM UTC

Hi Martin,

Thanks for your update.

Regards,

Ramya T

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144016	Apr 15,2019 07:57 AM UTC	Apr 17,2019 06:02 AM UTC	jQuery	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US