Create a node on double click

92 Views Asked by At

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 !

0

There are 0 best solutions below