Merge pull request #1055 from GNS3/Fill-node-width-and-height-with-correct-values

Fill node width and height with correct values

src/app/cartography/widgets/node.ts

@@ -92,15 +92,11 @@ export class NodeWidget implements Widget {
       })
       .attr('xnode:href', (n: MapNode) => n.symbolUrl)
       .attr('width', (n: MapNode) => {
-        if (n.nodeType === 'cloud' || n.nodeType === 'nat') return 120;
         if (!n.width) return 60;
-        if (n.width > 64) return 64;
         return n.width;
       })
       .attr('height', (n: MapNode) => {
-        if (n.nodeType === 'cloud' || n.nodeType === 'nat') return 60;
         if (!n.height) return 60;
-        if (n.height > 64) return 64;
         return n.height;
       })
       .attr('x', (n: MapNode) => {

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

@@ -134,6 +134,9 @@
         <mat-checkbox [ngModel]="project.snap_to_grid" (change)="toggleSnapToGrid($event.checked)">
           Snap to grid
         </mat-checkbox><br />
+        <mat-checkbox [ngModel]="symbolScaling" (change)="toggleSymbolScaling($event.checked)">
+          Scale symbols
+        </mat-checkbox><br />
       </div>
     </mat-menu>
   </div>

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

@@ -73,6 +73,7 @@ import { Title } from '@angular/platform-browser';
 import { NewTemplateDialogComponent } from './new-template-dialog/new-template-dialog.component';
 import { NodeConsoleService } from '../../services/nodeConsole.service';
 import * as Mousetrap from 'mousetrap';
+import { SymbolService } from '../../services/symbol.service';
 
 
 @Component({
@@ -98,6 +99,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public layersVisibility: boolean = false;
   public gridVisibility: boolean = false;
   public toolbarVisibility: boolean = true;
+  public symbolScaling: boolean = true;
 
   tools = {
     selection: true,
@@ -165,6 +167,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private themeService: ThemeService,
     private title: Title,
     private nodeConsoleService: NodeConsoleService,
+    private symbolService: SymbolService,
     private cd: ChangeDetectorRef
   ) {}
 
@@ -195,6 +198,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.cd.detectChanges();
 
     this.settings = this.settingsService.getAll();
+    this.symbolScaling = this.mapSettingsService.getSymbolScaling();
     this.isTopologySummaryVisible = this.mapSettingsService.isTopologySummaryVisible;
     this.isConsoleVisible = this.mapSettingsService.isLogConsoleVisible;
     this.mapSettingsService.logConsoleSubject.subscribe(value => this.isConsoleVisible = value);
@@ -220,11 +224,18 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.projectMapSubscription.add(
       this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
         if (!this.server) return;
-        nodes.forEach((node: Node) => {
+        nodes.forEach(async (node: Node) => {
           node.symbol_url = `${this.server.protocol}//${this.server.host}:${this.server.port}/v2/symbols/${node.symbol}/raw`;
+
+          if (node.width == 0 && node.height == 0) {
+            let symbolDimensions = await this.symbolService.getDimensions(this.server, node.symbol).toPromise();
+            node.width = symbolDimensions.width;
+            node.height = symbolDimensions.height;
+          }
         });
 
         this.nodes = nodes;
+        if (this.mapSettingsService.getSymbolScaling()) this.applyScalingOfNodeSymbols();
         this.mapChangeDetectorRef.detectChanges();
       })
     );
@@ -249,6 +260,20 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
             message: message
         });
     }));
+
+    this.projectMapSubscription.add(this.mapSettingsService.symbolScalingSubject.subscribe((value) => {
+        if (value) this.applyScalingOfNodeSymbols();
+    }));
+  }
+
+  applyScalingOfNodeSymbols() {
+    this.nodesDataSource.getItems().forEach((node) => {
+      if (node.height > this.symbolService.getMaximumSymbolSize()) {
+        let newDimensions = this.symbolService.scaleDimensionsForNode(node);
+        node.width = newDimensions.width;
+        node.height = newDimensions.height;
+      }
+    });
   }
 
   getData() {
@@ -693,6 +718,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     return this.inReadOnlyMode;
   }
 
+  public toggleSymbolScaling(value: boolean) {
+    this.symbolScaling = value;
+    this.mapSettingsService.setSymbolScaling(value);
+  }
+
   public toggleMovingMode() {
     this.tools.moving = !this.tools.moving;
     this.movingEventSource.movingModeState.emit(this.tools.moving);

src/app/services/mapsettings.service.ts

@@ -1,10 +1,12 @@
 import { Injectable, EventEmitter } from "@angular/core";
-import { Subject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
 
 @Injectable({
     providedIn: 'root'
 })
 export class MapSettingsService {
+    public symbolScalingSubject : Subject<boolean> = new Subject<boolean>();
+    
     public isScrollDisabled = new Subject<boolean>();
     public isMapLocked = new Subject<boolean>();
     public isTopologySummaryVisible: boolean = true;
@@ -19,6 +21,26 @@ export class MapSettingsService {
     constructor() {
         this.isLayerNumberVisible = localStorage.getItem('layersVisibility') === 'true' ? true : false;
         if (localStorage.getItem('integrateLinkLabelsToLinks')) this.integrateLinkLabelsToLinks = localStorage.getItem('integrateLinkLabelsToLinks') === 'true' ? true : false;
+        
+        let isSymbolScalingEnabled = true;
+        if (localStorage.getItem('symbolScaling')) {
+            isSymbolScalingEnabled = localStorage.getItem('symbolScaling') === 'true' ? true : false;
+        } else {
+            localStorage.setItem('symbolScaling', 'true');
+        }
+    }
+
+    public getSymbolScaling() : boolean {
+        return localStorage.getItem('symbolScaling') === 'true' ? true : false;
+    }
+
+    public setSymbolScaling(value: boolean) {
+        if (value) {
+            localStorage.setItem('symbolScaling', 'true');
+        } else {
+            localStorage.setItem('symbolScaling', 'false');
+        }
+        this.symbolScalingSubject.next(value);
     }
 
     changeMapLockValue(value: boolean) {

src/app/services/symbol.service.ts

@@ -5,6 +5,7 @@ import { Symbol } from '../models/symbol';
 import { Server } from '../models/server';
 import { HttpServer } from './http-server.service';
 import { shareReplay } from 'rxjs/operators';
+import { Node } from '../cartography/models/node';
 
 const CACHE_SIZE = 1;
 
@@ -12,13 +13,31 @@ const CACHE_SIZE = 1;
 export class SymbolService {
   public symbols: BehaviorSubject<Symbol[]> = new BehaviorSubject<Symbol[]>([]);
   private cache: Observable<Symbol[]>;
+  private maximumSymbolSize: number = 80;
 
   constructor(private httpServer: HttpServer) {}
 
+  getMaximumSymbolSize() {
+    return this.maximumSymbolSize;
+  }
+
   get(symbol_id: string): Symbol {
     return this.symbols.getValue().find((symbol: Symbol) => symbol.symbol_id === symbol_id);
   }
 
+  getDimensions(server: Server, symbol_id: string): Observable<SymbolDimension> {
+    const encoded_uri = encodeURI(symbol_id);
+    return this.httpServer.get(server, `/symbols/${encoded_uri}/dimensions`);
+  }
+
+  scaleDimensionsForNode(node: Node): SymbolDimension {
+    let scale = node.width > node.height ? this.maximumSymbolSize/node.width : this.maximumSymbolSize/node.height;
+    return {
+      width: node.width * scale,
+      height: node.height * scale
+    }
+  }
+
   getByFilename(symbol_filename: string) {
     return this.symbols.getValue().find((symbol: Symbol) => symbol.filename === symbol_filename);
   }
@@ -47,3 +66,8 @@ export class SymbolService {
     return this.httpServer.getText(server, `/symbols/${encoded_uri}/raw`);
   }
 }
+
+class SymbolDimension {
+  width: number;
+  height: number
+}