Node context menu, ref. #5

src/app/app.module.ts

@@ -41,6 +41,7 @@ import { MapComponent } from './cartography/map/map.component';
 import { CreateSnapshotDialogComponent, ProjectMapComponent } from './project-map/project-map.component';
 import { ServersComponent, AddServerDialogComponent } from './servers/servers.component';
 import { ContextMenuComponent } from './shared/context-menu/context-menu.component';
+import { NodeContextMenuComponent } from './shared/node-context-menu/node-context-menu.component';
 
 
 @NgModule({
@@ -55,6 +56,7 @@ import { ContextMenuComponent } from './shared/context-menu/context-menu.compone
     DefaultLayoutComponent,
     ProgressDialogComponent,
     ContextMenuComponent,
+    NodeContextMenuComponent,
   ],
   imports: [
     NgbModule.forRoot(),

src/app/cartography/map/map.component.html

@@ -1,15 +1,3 @@
 <svg preserveAspectRatio="none"></svg>
 
-<div class="context-menu" [style.left]="contextMenuLeft" [style.top]="contextMenuTop">
+<app-node-context-menu></app-node-context-menu>
-  <span [matMenuTriggerFor]="contextMenu"></span>
-  <mat-menu #contextMenu="matMenu">
-    <button mat-menu-item>
-      <mat-icon>play_arrow</mat-icon>
-      <span>Start</span>
-    </button>
-    <button mat-menu-item>
-      <mat-icon>stop</mat-icon>
-      <span>Stop</span>
-    </button>
-  </mat-menu>
-</div>

src/app/cartography/map/map.component.scss

@@ -1,7 +1,3 @@
 svg {
   display: block;
 }
-
-.context-menu {
-  position: absolute;
-}

src/app/cartography/map/map.component.ts

@@ -1,6 +1,5 @@
 import {
-  ChangeDetectorRef,
+  Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChange,
-  Component, ElementRef, Input, NgZone, OnChanges, OnDestroy, OnInit, SimpleChange,
   ViewChild
 } from '@angular/core';
 import { D3, D3Service } from 'd3-ng2-service';
@@ -12,17 +11,9 @@ import { GraphLayout } from "../shared/widgets/graph.widget";
 import { Context } from "../../map/models/context";
 import { Size } from "../shared/models/size.model";
 import { Drawing } from "../shared/models/drawing.model";
-import {MatMenuTrigger} from "@angular/material";
-import {NodeOnContextMenuListener} from "../shared/widgets/nodes.widget";
-import {DomSanitizer} from "@angular/platform-browser";
 
-class NodeOnContextMenu implements NodeOnContextMenuListener {
+import {NodeContextMenuComponent} from "../../shared/node-context-menu/node-context-menu.component";
-  constructor(private component: MapComponent) {}
 
-  onContextMenu() {
-    this.component.contextMenu.openMenu();
-  }
-}
 
 @Component({
   selector: 'app-map',
@@ -37,7 +28,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() height = 600;
   @Input() windowFullSize = true;
 
-  @ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;
+  @ViewChild(NodeContextMenuComponent) nodeContextMenu: NodeContextMenuComponent;
 
   private d3: D3;
   private parentNativeElement: any;
@@ -46,19 +37,12 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
   private graphLayout: GraphLayout;
   private graphContext: Context;
 
-  public contextMenuTop;
-  public contextMenuLeft;
 
   constructor(protected element: ElementRef,
-              protected d3Service: D3Service,
+              protected d3Service: D3Service
-              protected sanitizer: DomSanitizer,
-              protected changeDetector: ChangeDetectorRef
               ) {
     this.d3 = d3Service.getD3();
     this.parentNativeElement = element.nativeElement;
-
-    this.contextMenuLeft = this.sanitizer.bypassSecurityTrustStyle("0");
-    this.contextMenuTop = this.sanitizer.bypassSecurityTrustStyle("0");
   }
 
   ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
@@ -109,14 +93,9 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
 
       this.graphLayout = new GraphLayout();
       this.graphLayout.draw(this.svg, this.graphContext);
-      // this.graphLayout.getNodesWidget().setOnContextMenuListener(new NodeOnContextMenu(self));
+
       this.graphLayout.getNodesWidget().setOnContextMenuCallback((event: any) => {
-
+        this.nodeContextMenu.open(event.clientY, event.clientX);
-        this.contextMenuLeft = this.sanitizer.bypassSecurityTrustStyle(event.clientX + "px");
-        this.contextMenuTop = this.sanitizer.bypassSecurityTrustStyle(event.clientY + "px");
-        this.changeDetector.detectChanges();
-
-        this.contextMenu.openMenu();
       });
     }
   }

src/app/shared/node-context-menu/node-context-menu.component.html

@@ -0,0 +1,13 @@
+<div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition">
+  <span [matMenuTriggerFor]="contextMenu"></span>
+  <mat-menu #contextMenu="matMenu">
+    <button mat-menu-item>
+      <mat-icon>play_arrow</mat-icon>
+      <span>Start</span>
+    </button>
+    <button mat-menu-item>
+      <mat-icon>stop</mat-icon>
+      <span>Stop</span>
+    </button>
+  </mat-menu>
+</div>

src/app/shared/node-context-menu/node-context-menu.component.scss

@@ -0,0 +1,3 @@
+.context-menu {
+  position: absolute;
+}

src/app/shared/node-context-menu/node-context-menu.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NodeContextMenuComponent } from './node-context-menu.component';
+
+describe('NodeContextMenuComponent', () => {
+  let component: NodeContextMenuComponent;
+  let fixture: ComponentFixture<NodeContextMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NodeContextMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NodeContextMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/node-context-menu/node-context-menu.component.ts

@@ -0,0 +1,34 @@
+import {ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core';
+import {MatMenuTrigger} from "@angular/material";
+import {DomSanitizer} from "@angular/platform-browser";
+
+
+@Component({
+  selector: 'app-node-context-menu',
+  templateUrl: './node-context-menu.component.html',
+  styleUrls: ['./node-context-menu.component.scss']
+})
+export class NodeContextMenuComponent implements OnInit {
+  @ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;
+
+  private topPosition;
+  private leftPosition;
+
+  constructor(protected sanitizer: DomSanitizer, protected changeDetector: ChangeDetectorRef) {}
+
+  ngOnInit() {
+    this.setPosition(0, 0);
+  }
+
+  public setPosition(top: number, left: number) {
+    this.topPosition = this.sanitizer.bypassSecurityTrustStyle(top + "px");
+    this.leftPosition = this.sanitizer.bypassSecurityTrustStyle(left + "px");
+    this.changeDetector.detectChanges();
+  }
+
+  public open(top: number, left: number) {
+    this.setPosition(top, left);
+    this.contextMenu.openMenu();
+  }
+
+}