From 8a8fabdee78c4e4ae80e00928ea2f0368e2f1a8b Mon Sep 17 00:00:00 2001
From: ziajka <dominik.ziajka@gmail.com>
Date: Wed, 29 Nov 2017 13:19:53 +0100
Subject: [PATCH] Node context menu, ref. #5

---
 src/app/app.module.ts                         |  2 ++
 src/app/cartography/map/map.component.html    | 14 +-------
 src/app/cartography/map/map.component.scss    |  4 ---
 src/app/cartography/map/map.component.ts      | 33 ++++--------------
 .../node-context-menu.component.html          | 13 +++++++
 .../node-context-menu.component.scss          |  3 ++
 .../node-context-menu.component.spec.ts       | 25 ++++++++++++++
 .../node-context-menu.component.ts            | 34 +++++++++++++++++++
 8 files changed, 84 insertions(+), 44 deletions(-)
 create mode 100644 src/app/shared/node-context-menu/node-context-menu.component.html
 create mode 100644 src/app/shared/node-context-menu/node-context-menu.component.scss
 create mode 100644 src/app/shared/node-context-menu/node-context-menu.component.spec.ts
 create mode 100644 src/app/shared/node-context-menu/node-context-menu.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 79b52ee1..dac7f573 100644
--- a/src/app/app.module.ts
+++ b/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(),
diff --git a/src/app/cartography/map/map.component.html b/src/app/cartography/map/map.component.html
index aaf936ff..0985703a 100644
--- a/src/app/cartography/map/map.component.html
+++ b/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">
-  <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>
+<app-node-context-menu></app-node-context-menu>
diff --git a/src/app/cartography/map/map.component.scss b/src/app/cartography/map/map.component.scss
index 194c56d0..c41075de 100644
--- a/src/app/cartography/map/map.component.scss
+++ b/src/app/cartography/map/map.component.scss
@@ -1,7 +1,3 @@
 svg {
   display: block;
 }
-
-.context-menu {
-  position: absolute;
-}
diff --git a/src/app/cartography/map/map.component.ts b/src/app/cartography/map/map.component.ts
index 988ad28a..6ac75e4c 100644
--- a/src/app/cartography/map/map.component.ts
+++ b/src/app/cartography/map/map.component.ts
@@ -1,6 +1,5 @@
 import {
-  ChangeDetectorRef,
-  Component, ElementRef, Input, NgZone, OnChanges, OnDestroy, OnInit, SimpleChange,
+  Component, ElementRef, Input, 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 {
-  constructor(private component: MapComponent) {}
+import {NodeContextMenuComponent} from "../../shared/node-context-menu/node-context-menu.component";
 
-  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 sanitizer: DomSanitizer,
-              protected changeDetector: ChangeDetectorRef
+              protected d3Service: D3Service
               ) {
     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.contextMenuLeft = this.sanitizer.bypassSecurityTrustStyle(event.clientX + "px");
-        this.contextMenuTop = this.sanitizer.bypassSecurityTrustStyle(event.clientY + "px");
-        this.changeDetector.detectChanges();
-
-        this.contextMenu.openMenu();
+        this.nodeContextMenu.open(event.clientY, event.clientX);
       });
     }
   }
diff --git a/src/app/shared/node-context-menu/node-context-menu.component.html b/src/app/shared/node-context-menu/node-context-menu.component.html
new file mode 100644
index 00000000..41c5c579
--- /dev/null
+++ b/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>
diff --git a/src/app/shared/node-context-menu/node-context-menu.component.scss b/src/app/shared/node-context-menu/node-context-menu.component.scss
new file mode 100644
index 00000000..6101a2b8
--- /dev/null
+++ b/src/app/shared/node-context-menu/node-context-menu.component.scss
@@ -0,0 +1,3 @@
+.context-menu {
+  position: absolute;
+}
diff --git a/src/app/shared/node-context-menu/node-context-menu.component.spec.ts b/src/app/shared/node-context-menu/node-context-menu.component.spec.ts
new file mode 100644
index 00000000..4f423efa
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/shared/node-context-menu/node-context-menu.component.ts b/src/app/shared/node-context-menu/node-context-menu.component.ts
new file mode 100644
index 00000000..c7821712
--- /dev/null
+++ b/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();
+  }
+
+}