Diagram JS2: Doubleclick, contextmenu, userhandle questions

[Laurens Albers]

hi,

1.I have issues getting contextmenu event to work on the nodes in ejs-diagram. Do you have an example to point me in the right direction?     Fixed!

2. I also need the doubleclick event to work on the nodes in the diagram. Is it possible? (I got it working "as documented" in the diagram itself, but that's not what i want ofc) As of this moment it activates the texteditor in the node. Is it also possible to have the text/name/title of the node (annotation) to be static always? I dont want the user to edit the node and/or connector.

3. Do you have any tips/examples on how to prevent userHandles from being generated on "connectors". In my case it needs to be "node exclusive"

Using:

Angular 5, TypeScript, Material, JS2 Syncfusion

thanks!

[Kameshwaran R]

Hi Laurens, 

I also need the doubleclick event to work on the nodes in the diagram. Is it possible? (I got it working "as documented" in the diagram itself, but that's not what i want ofc) As of this moment it activates the texteditor in the node. Is it also possible to have the text/name/title of the node (annotation) to be static always? I dont want the user to edit the node and/or connector.

Yes, Please use double click event. In this event argument, we can get the node id that we have currently double clicked.    public doubleClick(args: Object) {      if (true) {        console.log(args['source'].id);      }    }

3. Do you have any tips/examples on how to prevent userHandles from being generated on "connectors". In my case it needs to be "node exclusive"

Yes, We have option to hide the user handle to specific diagram object. In the below code snippet shown, how to hide the user handle for connector.   [TS]    public selectionChange(args: ISelectionChangeEventArgs) {      if (args.state == 'Changing' && args.type === 'Addition' && args.newValue[0]) {        if (args.newValue[0] instanceof Connector) {          this.diagram.selectedItems.userHandles[0].visible = false;        }        else {          this.diagram.selectedItems.userHandles[0].visible = true;        }        this.diagram.dataBind();      }    }  [Html]  <ejs-diagram #diagram id="diagram" width="100%" height="580px"     [getCustomTool]='getCustomTool'     [nodes]='nodes'     [connectors]='connectors'     [selectedItems]='selectedItems'     [getCustomCursor]='getCursor'      (selectionChange)='selectionChange($event)'     (doubleClick)='doubleClick($event)'     >  </ejs-diagram>`

 

We have attached the sample for the above queries. Please find the attached sample. 

Sample : quickstart1268484174.zip  

Regards, 

Kamesh R.