From 02e614de426d707521f10d19f06a32ab00500f3f Mon Sep 17 00:00:00 2001 From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com> Date: Fri, 9 Apr 2021 13:53:27 +0200 Subject: [PATCH 1/2] Fix for symbol service --- src/app/cartography/widgets/node.ts | 4 --- .../project-map/project-map.component.html | 3 ++ .../project-map/project-map.component.ts | 32 ++++++++++++++++++- src/app/services/mapsettings.service.ts | 24 +++++++++++++- src/app/services/symbol.service.ts | 24 ++++++++++++++ 5 files changed, 81 insertions(+), 6 deletions(-) diff --git a/src/app/cartography/widgets/node.ts b/src/app/cartography/widgets/node.ts index 27d798d4..52aee990 100644 --- a/src/app/cartography/widgets/node.ts +++ b/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) => { diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index 66d2c379..ce700c32 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -134,6 +134,9 @@ Snap to grid
+ + Scale symbols +
diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index 12c9e5a7..bb8b37b0 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/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.width > this.symbolService.getMaximumSymbolSize() || node.height > this.symbolService.getMaximumSymbolSize()) && !(node.node_type === 'cloud' || node.node_type === 'nat')) { + 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); diff --git a/src/app/services/mapsettings.service.ts b/src/app/services/mapsettings.service.ts index ee6cf7f3..a54700c5 100644 --- a/src/app/services/mapsettings.service.ts +++ b/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 = new Subject(); + public isScrollDisabled = new Subject(); public isMapLocked = new Subject(); 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) { diff --git a/src/app/services/symbol.service.ts b/src/app/services/symbol.service.ts index b5476d6b..9727544e 100644 --- a/src/app/services/symbol.service.ts +++ b/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 = new BehaviorSubject([]); private cache: Observable; + 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 { + 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 +} From ee943eacadd13dc54337bbc4a734bc0f64c0c09e Mon Sep 17 00:00:00 2001 From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com> Date: Fri, 9 Apr 2021 14:10:14 +0200 Subject: [PATCH 2/2] Update project-map.component.ts --- src/app/components/project-map/project-map.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index bb8b37b0..547e9a1f 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -268,7 +268,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy { applyScalingOfNodeSymbols() { this.nodesDataSource.getItems().forEach((node) => { - if ((node.width > this.symbolService.getMaximumSymbolSize() || node.height > this.symbolService.getMaximumSymbolSize()) && !(node.node_type === 'cloud' || node.node_type === 'nat')) { + if (node.height > this.symbolService.getMaximumSymbolSize()) { let newDimensions = this.symbolService.scaleDimensionsForNode(node); node.width = newDimensions.width; node.height = newDimensions.height;