Merge branch 'master' into Fit-in-view-option

src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.html

@@ -1,4 +1,4 @@
-<button mat-menu-item (click)="editStyle()">
+<button mat-menu-item *ngIf="!isImageDrawing" (click)="editStyle()">
   <mat-icon>style</mat-icon>
   <span>Edit style</span>
 </button>

src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts

@@ -1,22 +1,26 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { Drawing } from '../../../../../cartography/models/drawing';
 import { Server } from '../../../../../models/server';
 import { MatDialog } from '@angular/material';
 import { Project } from '../../../../../models/project';
 import { StyleEditorDialogComponent } from '../../../drawings-editors/style-editor/style-editor.component';
+import { ImageElement } from '../../../../../cartography/models/drawings/image-element';
 
 @Component({
   selector: 'app-edit-style-action',
   templateUrl: './edit-style-action.component.html'
 })
-export class EditStyleActionComponent implements OnInit {
+export class EditStyleActionComponent implements OnChanges {
   @Input() server: Server;
   @Input() project: Project;
   @Input() drawing: Drawing;
+  isImageDrawing: boolean = false;
 
   constructor(private dialog: MatDialog) {}
 
-  ngOnInit() {}
+  ngOnChanges() {
+    this.isImageDrawing = this.drawing.element instanceof ImageElement;
+  }
 
   editStyle() {
     const dialogRef = this.dialog.open(StyleEditorDialogComponent, {

src/app/components/project-map/log-console/log-console.component.html

@@ -1,9 +1,15 @@
-<div class="consoleWrapper">
+<div 
+    class="consoleWrapper"
+    [ngStyle]="style" 
+    mwlResizable
+    [validateResize]="validate"
+    [resizeEdges]="{ right: true, left: true, bottom: true, top: true }"
+    [enableGhostResize]="true"
+    (resizeEnd)="onResizeEnd($event)">
     <div class="consoleHeader">
         <div class="consoleFiltering">
-            <div class="consoleName">Console</div>
             <button class="filterButton" [matMenuTriggerFor]="filterMenu">
-                <mat-icon>keyboard_arrow_down</mat-icon>
+                Apply filter
             </button>
             <mat-menu #filterMenu="matMenu" xPosition="after">
                 <button (click)="applyFilter('all')" mat-menu-item>all</button>
@@ -20,7 +26,7 @@
         </div>
     </div>
 
-    <div #console class="console">
+    <div #console class="console" [ngStyle]="styleInside">
         <span class="console-item" *ngFor="let event of filteredEvents">
             {{event.message}} <br/>
         </span>

src/app/components/project-map/log-console/log-console.component.scss

@@ -15,6 +15,11 @@
     background: #263238;
     color: white;
     border: none;
+    margin-top: 0px;
+    outline: none;
+    color: #dbd5d5;
+    font-weight: bold;
+    padding: 0px;
 }
 
 .consoleFiltering {

src/app/components/project-map/log-console/log-console.component.ts

@@ -12,6 +12,7 @@ import { Port } from '../../../models/port';
 import { LogEventsDataSource } from './log-events-datasource';
 import { HttpServer } from '../../../services/http-server.service';
 import { LogEvent } from '../../../models/logEvent';
+import { ResizeEvent } from 'angular-resizable-element';
 
 
 @Component({
@@ -44,6 +45,9 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
     private regexShow: RegExp = /^show (.*?)$/;
     private regexConsole: RegExp = /^console (.*?)$/;
 
+    public style: object = {};
+    public styleInside: object = { height: `120px` };
+
     constructor(
         private projectWebServiceHandler: ProjectWebServiceHandler,
         private nodeService: NodeService,
@@ -124,6 +128,33 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
         this.infoSubscription.unsubscribe();
     }
 
+    validate(event: ResizeEvent): boolean {
+        if (
+            event.rectangle.width &&
+            event.rectangle.height &&
+            (event.rectangle.width < 600 ||
+            event.rectangle.height < 180)
+        ) {
+            return false;
+        }
+        return true;
+    }
+
+    onResizeEnd(event: ResizeEvent): void {
+        this.style = {
+            position: 'fixed',
+            left: `${event.rectangle.left}px`,
+            top: `${event.rectangle.top}px`,
+            width: `${event.rectangle.width}px`,
+            height: `${event.rectangle.height}px`
+        };
+
+        this.styleInside = {
+            height: `${event.rectangle.height - 60}px`,
+            width: `${event.rectangle.width}px`
+        };
+    }
+
     applyFilter(filter: string) {
         this.selectedFilter = filter;
         this.filteredEvents = this.getFilteredEvents();

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

@@ -94,6 +94,9 @@
           <mat-checkbox [ngModel]="notificationsVisibility" (change)="toggleNotifications($event.checked)">
             Show notifications
           </mat-checkbox>
+          <mat-checkbox [ngModel]="layersVisibility" (change)="toggleLayers($event.checked)">
+            Show layers
+          </mat-checkbox>
         </div>
       </mat-menu>
 

src/app/components/project-map/project-map.component.ts

@@ -79,10 +79,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public server: Server;
   public ws: WebSocket;
   public isProjectMapMenuVisible: boolean = false;
-  public isConsoleVisible: boolean = false;
-  public isTopologySummaryVisible: boolean = false;
+  public isConsoleVisible: boolean = true;
+  public isTopologySummaryVisible: boolean = true;
   public isInterfaceLabelVisible: boolean = false;
   public notificationsVisibility: boolean = false;
+  public layersVisibility: boolean = false;
 
   tools = {
     selection: true,
@@ -238,6 +239,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     }));
 
     this.notificationsVisibility = localStorage.getItem('notificationsVisibility') === 'true' ? true : false;
+    this.layersVisibility = localStorage.getItem('layersVisibility') === 'true' ? true : false;
     this.addKeyboardListeners();
   }
 
@@ -618,6 +620,17 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     }
   }
 
+  public toggleLayers(visible: boolean) {
+    this.layersVisibility = visible;
+    this.mapSettingsService.toggleLayers(visible);
+    if (this.layersVisibility) {
+      localStorage.setItem('layersVisibility', 'true');
+    } else {
+      localStorage.removeItem('layersVisibility')
+    }
+    this.mapChild.applyMapSettingsChanges();
+  }
+
   private showMessage(msg) {
     if (this.notificationsVisibility) {
       if (msg.type === 'error') this.toasterService.error(msg.message);