Open chethan1095 opened 2 weeks ago
Hi I have been trying to delete the connected edge between two nodes but using default backspace delete its not working. Hers's the code for the same:-
component.html
` ``` <div class="col-sm-8 drop-zone" [cdkDropListData]="newConfig" cdkDropList (cdkDropListDropped)="drop($event)"> <vflow [nodes]="nodes" *ngIf="nodes.length>0" [edges]="edges" background="ghostwhite" [connection]="connectionSettings" (onConnect)="createEdge($event)" view="auto">
{{ ctx.node.data.ip ? ctx.node.data.ip : ''}}
<ng-template edge let-ctx> <svg:path selectable class="without-tab-index" [attr.d]="ctx.path()" [attr.stroke]="ctx.selected() ? '#0f4c75' : '#bbe1fa'" fill="none" stroke-width="4" tabindex="0" (keydown.backspace)="ctx.selected() && deleteEdge(ctx.edge)" /> </ng-template> </vflow> <span *ngIf="nodes.length == 0">Drag and drop device here</span> </div>`
component.ts
deleteEdge(edge: Edge) { console.log(edge); this.edges = this.edges.filter(e => e.id !== edge.id) }
Hi! I would like to debug this thing, could you please create a stackblitz example for me?
I see the console.log(edge) in deleteEdge() method, does it called?
console.log(edge)
deleteEdge()
No it's not triggering deleteEdge()
Hi I have been trying to delete the connected edge between two nodes but using default backspace delete its not working. Hers's the code for the same:-
` ``` <div class="col-sm-8 drop-zone" [cdkDropListData]="newConfig" cdkDropList (cdkDropListDropped)="drop($event)">
<vflow [nodes]="nodes" *ngIf="nodes.length>0" [edges]="edges" background="ghostwhite" [connection]="connectionSettings" (onConnect)="createEdge($event)" view="auto">
{{ ctx.node.data.ip ? ctx.node.data.ip : ''}}
{{ ctx.node.data.text }} {{ ctx.node.data.text }}deleteEdge(edge: Edge) { console.log(edge); this.edges = this.edges.filter(e => e.id !== edge.id) }