Passing node to context menu

This commit is contained in:
ziajka
2017-11-29 13:29:32 +01:00
parent 0cc7b62526
commit 055dde4ea5
4 changed files with 15 additions and 10 deletions

View File

@ -94,8 +94,8 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
this.graphLayout = new GraphLayout(); this.graphLayout = new GraphLayout();
this.graphLayout.draw(this.svg, this.graphContext); this.graphLayout.draw(this.svg, this.graphContext);
this.graphLayout.getNodesWidget().setOnContextMenuCallback((event: any) => { this.graphLayout.getNodesWidget().setOnContextMenuCallback((event: any, node: Node) => {
this.nodeContextMenu.open(event.clientY, event.clientX); this.nodeContextMenu.open(node, event.clientY, event.clientX);
}); });
} }
} }

View File

@ -9,7 +9,7 @@ export interface NodeOnContextMenuListener {
export class NodesWidget implements Widget { export class NodesWidget implements Widget {
private onContextMenuListener: NodeOnContextMenuListener; private onContextMenuListener: NodeOnContextMenuListener;
private onContextMenuCallback: (event: any) => void; private onContextMenuCallback: (event: any, node: Node) => void;
constructor() {} constructor() {}
@ -17,7 +17,7 @@ export class NodesWidget implements Widget {
this.onContextMenuListener = onContextMenuListener; this.onContextMenuListener = onContextMenuListener;
} }
public setOnContextMenuCallback(onContextMenuCallback: (event: any) => void) { public setOnContextMenuCallback(onContextMenuCallback: (event: any, node: Node) => void) {
this.onContextMenuCallback = onContextMenuCallback; this.onContextMenuCallback = onContextMenuCallback;
} }
@ -50,7 +50,7 @@ export class NodesWidget implements Widget {
.on("contextmenu", function (n: Node, i: number) { .on("contextmenu", function (n: Node, i: number) {
event.preventDefault(); event.preventDefault();
if (self.onContextMenuCallback !== null) { if (self.onContextMenuCallback !== null) {
self.onContextMenuCallback(event); self.onContextMenuCallback(event, n);
} }
}); });

View File

@ -1,11 +1,11 @@
<div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition"> <div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition" *ngIf="node">
<span [matMenuTriggerFor]="contextMenu"></span> <span [matMenuTriggerFor]="contextMenu"></span>
<mat-menu #contextMenu="matMenu"> <mat-menu #contextMenu="matMenu">
<button mat-menu-item> <button mat-menu-item *ngIf="node.status == 'stopped'">
<mat-icon>play_arrow</mat-icon> <mat-icon>play_arrow</mat-icon>
<span>Start</span> <span>Start</span>
</button> </button>
<button mat-menu-item> <button mat-menu-item *ngIf="node.status == 'started'">
<mat-icon>stop</mat-icon> <mat-icon>stop</mat-icon>
<span>Stop</span> <span>Stop</span>
</button> </button>

View File

@ -1,6 +1,7 @@
import {ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core'; import {ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core';
import {MatMenuTrigger} from "@angular/material"; import {MatMenuTrigger} from "@angular/material";
import {DomSanitizer} from "@angular/platform-browser"; import {DomSanitizer} from "@angular/platform-browser";
import {Node} from "../../cartography/shared/models/node.model";
@Component({ @Component({
@ -13,8 +14,11 @@ export class NodeContextMenuComponent implements OnInit {
private topPosition; private topPosition;
private leftPosition; private leftPosition;
private node: Node;
constructor(protected sanitizer: DomSanitizer, protected changeDetector: ChangeDetectorRef) {} constructor(
private sanitizer: DomSanitizer,
private changeDetector: ChangeDetectorRef) {}
ngOnInit() { ngOnInit() {
this.setPosition(0, 0); this.setPosition(0, 0);
@ -26,7 +30,8 @@ export class NodeContextMenuComponent implements OnInit {
this.changeDetector.detectChanges(); this.changeDetector.detectChanges();
} }
public open(top: number, left: number) { public open(node: Node, top: number, left: number) {
this.node = node;
this.setPosition(top, left); this.setPosition(top, left);
this.contextMenu.openMenu(); this.contextMenu.openMenu();
} }