Actions for group of niodes added

src/app/app.module.ts

@@ -246,6 +246,8 @@ import { ResizableModule } from 'angular-resizable-element';
 import { DragAndDropModule } from 'angular-draggable-droppable';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
+import { AlignHorizontallyActionComponent } from './components/project-map/context-menu/actions/align-horizontally/align-horizontally.component';
+import { AlignVerticallyActionComponent } from './components/project-map/context-menu/actions/align_vertically/align-vertically.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -414,7 +416,9 @@ if (environment.production) {
     LockActionComponent,
     NavigationDialogComponent,
     ScreenshotDialogComponent,
-    PageNotFoundComponent
+    PageNotFoundComponent,
+    AlignHorizontallyActionComponent,
+    AlignVerticallyActionComponent
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="alignHorizontally()">
+    <mat-icon>more_horiz</mat-icon>
+    <span>Align horizontally</span>
+</button>

src/app/components/project-map/context-menu/actions/align-horizontally/align-horizontally.component.ts

@@ -0,0 +1,36 @@
+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';
+
+@Component({
+  selector: 'app-align-horizontally-action',
+  templateUrl: './align-horizontally.component.html'
+})
+export class AlignHorizontallyActionComponent implements OnInit {
+  @Input() server: Server;
+  @Input() nodes: Node[];
+
+  constructor(
+    private nodesDataSource: NodesDataSource,
+    private nodeService: NodeService
+  ) {}
+
+  ngOnInit() {}
+
+  alignHorizontally() {
+    let averageY: number = 0;
+    this.nodes.forEach((node) => {
+        averageY += node.y;
+    });
+    averageY = averageY/this.nodes.length;
+    
+    this.nodes.forEach((node) => {
+        node.y = averageY;
+        this.nodesDataSource.update(node);
+
+        this.nodeService.update(this.server, node).subscribe((node: Node) => {});
+    });
+  }
+}

src/app/components/project-map/context-menu/actions/align_vertically/align-vertically.component.html

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="alignVertically()">
+    <mat-icon>more_vert</mat-icon>
+    <span>Align vertically</span>
+</button>

src/app/components/project-map/context-menu/actions/align_vertically/align-vertically.component.ts

@@ -0,0 +1,36 @@
+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';
+
+@Component({
+  selector: 'app-align-vertically-action',
+  templateUrl: './align-vertically.component.html'
+})
+export class AlignVerticallyActionComponent implements OnInit {
+  @Input() server: Server;
+  @Input() nodes: Node[];
+
+  constructor(
+    private nodesDataSource: NodesDataSource,
+    private nodeService: NodeService
+  ) {}
+
+  ngOnInit() {}
+
+  alignVertically() {
+    let averageX: number = 0;
+    this.nodes.forEach((node) => {
+        averageX += node.x;
+    });
+    averageX = averageX/this.nodes.length;
+    
+    this.nodes.forEach((node) => {
+        node.x = averageX;
+        this.nodesDataSource.update(node);
+
+        this.nodeService.update(this.server, node).subscribe((node: Node) => {});
+    });
+  }
+}

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

@@ -9,9 +9,9 @@
       [server]="server"
       [node]="nodes[0]"
     ></app-config-node-action>
-    <app-start-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-start-node-action>
+    <app-start-node-action *ngIf="nodes.length" [server]="server" [nodes]="nodes"></app-start-node-action>
-    <app-suspend-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-suspend-node-action>
+    <app-suspend-node-action *ngIf="nodes.length" [server]="server" [nodes]="nodes"></app-suspend-node-action>
-    <app-stop-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-stop-node-action>
+    <app-stop-node-action *ngIf="nodes.length" [server]="server" [nodes]="nodes"></app-stop-node-action>
     <app-reload-node-action
       *ngIf="nodes.length" [server]="server" [nodes]="nodes"
     ></app-reload-node-action>
@@ -68,19 +68,19 @@
       [node]="nodes[0]"
     ></app-import-config-action> -->
     <app-move-layer-up-action
-      *ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length) && labels.length===0"
+      *ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length)"
       [server]="server"
       [nodes]="nodes"
       [drawings]="drawings"
     ></app-move-layer-up-action>
     <app-move-layer-down-action
-      *ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length) && labels.length===0"
+      *ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length)"
       [server]="server"
       [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"
+      *ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length)"
       [server]="server"
       [nodes]="nodes"
       [drawings]="drawings"
@@ -134,5 +134,15 @@
       [drawings]="drawings"
       [links]="links"
     ></app-delete-action>
+    <app-align-horizontally-action
+      *ngIf="!projectService.isReadOnly(project) && nodes.length>1"
+      [server]="server"
+      [nodes]="nodes"
+    ></app-align-horizontally-action>
+    <app-align-vertically-action
+      *ngIf="!projectService.isReadOnly(project) && nodes.length>1"
+      [server]="server"
+      [nodes]="nodes"
+    ></app-align-vertically-action>
   </mat-menu>
 </div>