I'm trying to create a new node by double clicking on my graph but I don't know how to get coordinate on the double click event
I added a dblclick event. After this double click, I open a DialogService and user can fill useful informations needed to create a new node. When I submit the form, the DialogService disappear and the graph should display with the node at the location I double clicked.
I tried to get the X and Y in my dblclick callback event but I didn't understand how to determinate the value passed to the CSS transform function.
Is it even possible to get coordinate by double clicking on the graph ?
Here is my ngx-graph in the html :
<ngx-graph [links]="edges"
[nodes]="nodes"
[clusters]="groups"
[curve]="curve"
[draggingEnabled]="isDraggingEnabled"
[panningEnabled]="isPanningEnabled"
[enableZoom]="isZoomingEnabled"
[autoCenter]="false"
#graph
(click)="onMapClick($event)"
(dblclick)="addNode($event)">
<ng-template #defsTemplate>
//some templates stuff
</ng-template>
</ngx-graph>
And here is my dblclick function :
public addNode(event) {
const dialogRef = this.dialogService.open({
content: AddNodesComponent
});
const nodeInfo = dialogRef.content.instance as AddNodesComponent;
nodeInfo.nodeNames = this.nodes.map(n => n.label);
nodeInfo.country = this.view.countryID;
nodeInfo.viewId = this.view.id;
dialogRef.result.subscribe((r: { [key: string]: any }) => {
if (r.text === "Save") {
let n = r.node as Node;
n.coordinates = event.offsetY / this.graph.zoomLevel + "," + event.offsetX / this.graph.zoomLevel;
this.nodeService.addNode(n);
}
});
}
Thanks !