Merge branch 'master' into Support-for-editing-config-files

src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.html

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="bringToFront()">
+    <mat-icon>vertical_align_top</mat-icon>
+    <span>Bring to front</span>
+</button>

src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.spec.ts

@@ -0,0 +1,66 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BringToFrontActionComponent } from './bring-to-front-action.component';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MockedDrawingService, MockedDrawingsDataSource, MockedNodesDataSource, MockedNodeService } from '../../../project-map.component.spec';
+import { DrawingService } from '../../../../../services/drawing.service';
+import { NodesDataSource } from '../../../../../cartography/datasources/nodes-datasource';
+import { DrawingsDataSource } from '../../../../../cartography/datasources/drawings-datasource';
+import { NodeService } from '../../../../../services/node.service';
+import { Node } from '../../../../../cartography/models/node';
+import { of } from 'rxjs';
+import { ComponentFactoryResolver } from '@angular/core';
+import { Drawing } from '../../../../../cartography/models/drawing';
+
+describe('BringToFrontActionComponent', () => {
+  let component: BringToFrontActionComponent;
+  let fixture: ComponentFixture<BringToFrontActionComponent>;
+  let drawingService = new MockedDrawingService();
+  let drawingsDataSource = new MockedDrawingsDataSource();
+  let nodeService  = new MockedNodeService();
+  let nodesDataSource = new MockedNodesDataSource();
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+        imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
+        providers: [
+            { provide: DrawingService, useValue: drawingService },
+            { provide: DrawingsDataSource, useValue: drawingsDataSource },
+            { provide: NodeService, useValue: nodeService },
+            { provide: NodesDataSource, useValue: nodesDataSource },
+          ],
+        declarations: [BringToFrontActionComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BringToFrontActionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call node service when bring to front action called', () => {
+    spyOn(nodeService, 'update').and.returnValue(of());
+    component.nodes = [{z: 0} as Node];
+    component.drawings = [];
+
+    component.bringToFront();
+
+    expect(nodeService.update).toHaveBeenCalled();
+  });
+
+  it('should call drawing service when bring to front action called', () => {
+    spyOn(drawingService, 'update').and.returnValue(of());
+    component.nodes = [];
+    component.drawings = [{z: 0} as Drawing];
+
+    component.bringToFront();
+
+    expect(drawingService.update).toHaveBeenCalled();
+  });
+});

src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Server } from '../../../../../models/server';
+import { Node } from '../../../../../cartography/models/node';
+import { NodesDataSource } from '../../../../../cartography/datasources/nodes-datasource';
+import { NodeService } from '../../../../../services/node.service';
+import { Drawing } from '../../../../../cartography/models/drawing';
+import { DrawingsDataSource } from '../../../../../cartography/datasources/drawings-datasource';
+import { DrawingService } from '../../../../../services/drawing.service';
+
+@Component({
+  selector: 'app-bring-to-front-action',
+  templateUrl: './bring-to-front-action.component.html'
+})
+export class BringToFrontActionComponent implements OnInit {
+  @Input() server: Server;
+  @Input() nodes: Node[];
+  @Input() drawings: Drawing[];
+
+  constructor(
+    private nodesDataSource: NodesDataSource,
+    private drawingsDataSource: DrawingsDataSource,
+    private nodeService: NodeService,
+    private drawingService: DrawingService
+  ) {}
+
+  ngOnInit() {}
+
+  bringToFront() {
+    this.nodes.forEach((node) => {
+      node.z = 100;
+      this.nodesDataSource.update(node);
+
+      this.nodeService.update(this.server, node).subscribe((node: Node) => {});
+    });
+
+    this.drawings.forEach((drawing) => {
+      drawing.z = 100;
+      this.drawingsDataSource.update(drawing);
+
+      this.drawingService.update(this.server, drawing).subscribe((drawing: Drawing) => {});
+    });
+  }
+}

src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.html

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="showNode()">
+    <mat-icon>info</mat-icon>
+    <span>Show node information</span>
+</button>

src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit, OnChanges } from '@angular/core';
+import { Node } from '../../../../../cartography/models/node';
+import { MatDialog } from '@angular/material';
+import { InfoDialogComponent } from '../../../info-dialog/info-dialog.component';
+import { Server } from '../../../../../models/server';
+
+@Component({
+  selector: 'app-show-node-action',
+  templateUrl: './show-node-action.component.html'
+})
+export class ShowNodeActionComponent {
+  @Input() node: Node;
+  @Input() server: Server
+
+  constructor(private dialog: MatDialog) {}
+
+  showNode() {
+    const dialogRef = this.dialog.open(InfoDialogComponent, {
+        width: '600px',
+        autoFocus: false
+    });
+    let instance = dialogRef.componentInstance;
+    instance.node = this.node;
+    instance.server = this.server;
+  }
+}

src/app/components/project-map/context-menu/context-menu.component.html

@@ -1,6 +1,10 @@
 <div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition">
   <span [matMenuTriggerFor]="contextMenu"></span>
   <mat-menu #contextMenu="matMenu" class="context-menu-items">
+    <app-show-node-action *ngIf="nodes.length===1"
+      [server]="server"
+      [node]="nodes[0]"
+    ></app-show-node-action>
     <app-start-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-start-node-action>
     <app-stop-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-stop-node-action>
     <app-console-device-action
@@ -49,6 +53,12 @@
       [nodes]="nodes"
       [drawings]="drawings"
     ></app-move-layer-down-action>
+    <app-bring-to-front-action
+      *ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length) && labels.length===0"
+      [server]="server"
+      [nodes]="nodes"
+      [drawings]="drawings"
+    ></app-bring-to-front-action>
     <app-start-capture-action
       *ngIf="!projectService.isReadOnly(project) && isBundledServer 
       && drawings.length===0 && nodes.length===0 && links.length===1"

src/app/components/project-map/context-menu/context-menu.component.scss

@@ -1,3 +1,8 @@
 .context-menu {
   position: absolute;
+  min-height: 0px;
+}
+
+.mat-menu-panel ng-trigger ng-trigger-transformMenu ng-tns-c7-5 context-menu-items mat-menu-after mat-menu-below ng-star-inserted mat-elevation-z4 {
+  min-height: 0px!important;
 }