From ebd2614b84dac6d650ebd4b6ede17eb37fc4e239 Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Fri, 11 Oct 2019 04:02:13 -0700
Subject: [PATCH 1/6] Initial implementation

---
 .../project-map/project-map.component.html    |  4 ++
 .../project-map/project-map.component.ts      | 41 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html
index 4580560d..5b25271d 100644
--- a/src/app/components/project-map/project-map.component.html
+++ b/src/app/components/project-map/project-map.component.html
@@ -46,6 +46,10 @@
           <mat-icon>developer_board</mat-icon>
           <span>Go to servers</span>
         </button>
+        <button mat-menu-item (click)="fitInView()">
+          <mat-icon>fullscreen</mat-icon>
+          <span>Fit in view</span>
+        </button>
         <button mat-menu-item (click)="addNewProject()">
           <mat-icon>add</mat-icon>
           <span>Add new blank project</span>
diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index fbe54469..6953110f 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -53,7 +53,7 @@ import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
 import { ToasterService } from '../../services/toaster.service';
 import { ImportProjectDialogComponent } from '../projects/import-project-dialog/import-project-dialog.component';
-import { MatDialog, MatBottomSheet } from '@angular/material';
+import { MatDialog, MatBottomSheet, mixinColor } from '@angular/material';
 import { AddBlankProjectDialogComponent } from '../projects/add-blank-project-dialog/add-blank-project-dialog.component';
 import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save-project-dialog.component';
 import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
@@ -394,6 +394,45 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     });
   }
 
+  public fitInView() {
+    if ((this.nodes.length === 0) || (this.drawings.length === 0)) { return };
+
+    let minX: number = + this.project.scene_width/2;
+    let minY: number = + this.project.scene_height/2;
+    let maxX: number = - this.project.scene_width/2;
+    let maxY: number = - this.project.scene_width/2;
+
+    this.nodes.forEach((node: Node) => {
+      minX = node.x < minX ? node.x : minX;
+      minY = node.y < minY ? node.y : minY;
+      maxX = node.x > maxX ? node.x : maxX;
+      maxY = node.y > maxY ? node.y : maxY;
+    });
+
+    this.drawings.forEach((drawing: Drawing) => {
+      minX = drawing.x < minX ? drawing.x : minX;
+      minY = drawing.y < minY ? drawing.y : minY;
+      maxX = drawing.x > maxX ? drawing.x : maxX;
+      maxY = drawing.y > maxY ? drawing.y : maxY;
+    });
+
+    let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+    let margin = 0;
+    let widthToSceneWidthRatio = ((maxX-minX) + margin) / windowWidth;
+    let heightToSceneHeightRatio = ((maxY-minY) + margin) / windowHeight;
+
+    let scaleToSet = 1 / Math.max(widthToSceneWidthRatio, heightToSceneHeightRatio);
+    this.mapScaleService.setScale(scaleToSet);
+
+    this.project.scene_width = this.project.scene_width * scaleToSet;
+    this.project.scene_height = this.project.scene_height * scaleToSet;
+
+    let scrollX: number = (minX + maxX)/2 * scaleToSet;
+    let scrollY: number = (minY + maxY)/2 * scaleToSet;
+    window.scrollTo(scrollX, scrollY);
+  }
+
   public centerView() {
     if (this.project) {
       let scrollX: number = (this.project.scene_width - document.documentElement.clientWidth) > 0 ? (this.project.scene_width - document.documentElement.clientWidth)/2 : 0;

From 2981d6eafe7da15f951898487ff1cf663424b8ea Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Fri, 11 Oct 2019 05:55:05 -0700
Subject: [PATCH 2/6] Update project-map.component.ts

---
 .../project-map/project-map.component.ts      | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index 6953110f..cd378cf3 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -395,8 +395,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
   public fitInView() {
-    if ((this.nodes.length === 0) || (this.drawings.length === 0)) { return };
-
+    if ((this.nodes.length === 0) && (this.drawings.length === 0)) { return };
     let minX: number = + this.project.scene_width/2;
     let minY: number = + this.project.scene_height/2;
     let maxX: number = - this.project.scene_width/2;
@@ -416,20 +415,38 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       maxY = drawing.y > maxY ? drawing.y : maxY;
     });
 
+    console.log(maxX);
+    console.log(minX);
+    console.log(maxY);
+    console.log(minY);
+    console.log('-----------------------------');
+
     let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
     let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-    let margin = 0;
-    let widthToSceneWidthRatio = ((maxX-minX) + margin) / windowWidth;
-    let heightToSceneHeightRatio = ((maxY-minY) + margin) / windowHeight;
+    let widthOfAreaToShow = maxX - minX;
+    let heightOfAreaToShow = maxY - minY;
+    let widthToSceneWidthRatio = widthOfAreaToShow / windowWidth;
+    let heightToSceneHeightRatio = heightOfAreaToShow / windowHeight;
 
-    let scaleToSet = 1 / Math.max(widthToSceneWidthRatio, heightToSceneHeightRatio);
-    this.mapScaleService.setScale(scaleToSet);
+    console.log(widthOfAreaToShow);
+    console.log(heightOfAreaToShow);
+    console.log(widthToSceneWidthRatio);
+    console.log(heightToSceneHeightRatio);
+    console.log('-----------------------------');
 
-    this.project.scene_width = this.project.scene_width * scaleToSet;
-    this.project.scene_height = this.project.scene_height * scaleToSet;
+    let scale = 1 / Math.max(widthToSceneWidthRatio, heightToSceneHeightRatio);
+    this.mapScaleService.setScale(scale);
+
+    console.log(scale);
+
+    this.project.scene_width = this.project.scene_width * scale;
+    this.project.scene_height = this.project.scene_height * scale;
+    let scrollX: number = ((minX + maxX)/2 * scale) + this.project.scene_width/2;
+    let scrollY: number = ((minY + maxY)/2 * scale) + this.project.scene_height/2;
+
+    console.log('scrollx ', scrollX);
+    console.log('scrolly ', scrollY);
 
-    let scrollX: number = (minX + maxX)/2 * scaleToSet;
-    let scrollY: number = (minY + maxY)/2 * scaleToSet;
     window.scrollTo(scrollX, scrollY);
   }
 

From b8d607b7c6442f228806de2abe7a1464ecb0f3c9 Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Wed, 16 Oct 2019 05:07:43 -0700
Subject: [PATCH 3/6] Update project-map.component.ts

---
 .../project-map/project-map.component.ts      | 139 +++++++++++++++---
 1 file changed, 116 insertions(+), 23 deletions(-)

diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index cd378cf3..c9c547f3 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -395,26 +395,100 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
   public fitInView() {
+    this.drawings.forEach(drawing => {
+      let splittedSvg = drawing.svg.split("\"");
+      let height: number = parseInt(splittedSvg[1], 10);
+      let width: number =  parseInt(splittedSvg[3], 10);
+
+      drawing.element = {
+        width: width,
+        height: height
+      };
+    });
+
     if ((this.nodes.length === 0) && (this.drawings.length === 0)) { return };
-    let minX: number = + this.project.scene_width/2;
-    let minY: number = + this.project.scene_height/2;
-    let maxX: number = - this.project.scene_width/2;
-    let maxY: number = - this.project.scene_width/2;
+    let minX : number, maxX : number, minY: number, maxY : number;
 
-    this.nodes.forEach((node: Node) => {
-      minX = node.x < minX ? node.x : minX;
-      minY = node.y < minY ? node.y : minY;
-      maxX = node.x > maxX ? node.x : maxX;
-      maxY = node.y > maxY ? node.y : maxY;
+    let borderedNodes: BorderedNode[] = [];
+    this.nodes.forEach(n => {
+      let borderedNode: BorderedNode = new BorderedNode();
+      borderedNode.node = n;
+      borderedNode.top = n.y;
+      borderedNode.left = n.x;
+      borderedNode.bottom =  n.y + n.height;
+      borderedNode.right = n.x + n.width;
+
+      if ((n.y + n.label.y) < borderedNode.top) {
+        borderedNode.top = n.y + n.label.y;
+      };
+
+      if ((n.x + n.label.x) < borderedNode.left) {
+        borderedNode.left = n.x + n.label.x;
+      };
+
+      if ((n.y + n.label.y) > borderedNode.bottom) {
+        borderedNode.bottom = n.y + n.label.y;
+      };
+
+      if ((n.x + n.label.x) > borderedNode.right) {
+        borderedNode.right = n.x + n.label.x;
+      };
+
+      borderedNodes.push(borderedNode);
     });
 
-    this.drawings.forEach((drawing: Drawing) => {
-      minX = drawing.x < minX ? drawing.x : minX;
-      minY = drawing.y < minY ? drawing.y : minY;
-      maxX = drawing.x > maxX ? drawing.x : maxX;
-      maxY = drawing.y > maxY ? drawing.y : maxY;
+    let nodeMinX = borderedNodes.sort((n,m) => n.left - m.left)[0];
+    let nodeMaxX = borderedNodes.sort((n,m) => n.right - m.right)[borderedNodes.length - 1];
+    let nodeMinY = borderedNodes.sort((n,m) => n.top - m.top)[0];
+    let nodeMaxY = borderedNodes.sort((n,m) => n.bottom - m.bottom)[borderedNodes.length - 1];
+
+    let borderedDrawings: BorderedDrawing[] = [];
+    this.drawings.forEach(n => {
+      let borderedDrawing: BorderedDrawing =  new BorderedDrawing();
+      borderedDrawing.drawing = n;
+      borderedDrawing.top = n.y;
+      borderedDrawing.left = n.x;
+      borderedDrawing.bottom =  n.y + n.element.height;
+      borderedDrawing.right = n.x + n.element.width;
+
+      borderedDrawings.push(borderedDrawing);
     });
 
+    let drawingMinX = borderedDrawings.sort((n,m) => n.left - m.left)[0];
+    let drawingMaxX = borderedDrawings.sort((n,m) => n.right - m.right)[borderedDrawings.length - 1];
+    let drawingMinY = borderedDrawings.sort((n,m) => n.top - m.top)[0];
+    let drawingMaxY = borderedDrawings.sort((n,m) => n.bottom - m.bottom)[borderedDrawings.length - 1];
+
+    if (nodeMinX.left < drawingMinX.left) {
+      minX = nodeMinX.left;
+    } else {
+      minX = drawingMinX.left;
+    }
+
+    if (nodeMaxX.right > drawingMaxX.right) {
+      maxX = nodeMaxX.right;
+    } else {
+      maxX = drawingMaxX.right;
+    }
+
+    if (nodeMinY.top < drawingMinY.top) {
+      minY = nodeMinY.top;
+    } else {
+      minY = drawingMinY.top;
+    }
+
+    if (nodeMaxY.bottom > drawingMaxY.bottom) {
+      maxY = nodeMaxY.bottom;
+    } else {
+      maxY = drawingMaxY.bottom;
+    }
+
+    let margin: number = 20;
+    minX = minX - margin;
+    maxX = maxX + margin;
+    minY = minY - margin;
+    maxY = maxY + margin;
+
     console.log(maxX);
     console.log(minX);
     console.log(maxY);
@@ -435,19 +509,22 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     console.log('-----------------------------');
 
     let scale = 1 / Math.max(widthToSceneWidthRatio, heightToSceneHeightRatio);
-    this.mapScaleService.setScale(scale);
 
-    console.log(scale);
+    if (scale !== this.mapScaleService.currentScale) {
+      this.mapScaleService.setScale(scale);
 
-    this.project.scene_width = this.project.scene_width * scale;
-    this.project.scene_height = this.project.scene_height * scale;
-    let scrollX: number = ((minX + maxX)/2 * scale) + this.project.scene_width/2;
-    let scrollY: number = ((minY + maxY)/2 * scale) + this.project.scene_height/2;
+      this.project.scene_width = this.project.scene_width * scale;
+      this.project.scene_height = this.project.scene_height * scale;
+      let scrollX: number = (minX * scale) + this.project.scene_width/2;
+      let scrollY: number = (minY * scale) + this.project.scene_height/2;
 
-    console.log('scrollx ', scrollX);
-    console.log('scrolly ', scrollY);
+      window.scrollTo(scrollX, scrollY);
+    } else {
+      let scrollX: number = (minX * scale) + this.project.scene_width/2;
+      let scrollY: number = (minY * scale) + this.project.scene_height/2;
 
-    window.scrollTo(scrollX, scrollY);
+      window.scrollTo(scrollX, scrollY);
+    }
   }
 
   public centerView() {
@@ -645,3 +722,19 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
   }
 }
+
+export class BorderedNode {
+  top: number;
+  left: number;
+  bottom: number;
+  right: number;
+  node: Node;
+}
+
+export class BorderedDrawing {
+  top: number;
+  left: number;
+  bottom: number;
+  right: number;
+  drawing: Drawing;
+}

From 7576b1c81c5bcdab58b2fa051609ee09381333de Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Wed, 16 Oct 2019 08:19:00 -0700
Subject: [PATCH 4/6] Update project-map.component.ts

---
 .../components/project-map/project-map.component.ts    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index c9c547f3..9220d860 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -517,12 +517,18 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       this.project.scene_height = this.project.scene_height * scale;
       let scrollX: number = (minX * scale) + this.project.scene_width/2;
       let scrollY: number = (minY * scale) + this.project.scene_height/2;
-
+      // console.log(scrollX);
+      // console.log(scrollY);
+      // let scrollY = (this.project.scene_height - windowHeight)/2;
+      // let scrollX = (this.project.scene_width - windowWidth)/2;
       window.scrollTo(scrollX, scrollY);
     } else {
       let scrollX: number = (minX * scale) + this.project.scene_width/2;
       let scrollY: number = (minY * scale) + this.project.scene_height/2;
-
+      // console.log(scrollX);
+      // console.log(scrollY);
+      // let scrollY = (this.project.scene_height - windowHeight)/2;
+      // let scrollX = (this.project.scene_width - windowWidth)/2;
       window.scrollTo(scrollX, scrollY);
     }
   }

From 8e97a71696e05a342ef83bb09f42988cbb2ac1ce Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Fri, 25 Oct 2019 04:22:02 -0700
Subject: [PATCH 5/6] Code cleaned up

---
 .../components/d3-map/d3-map.component.ts     |  3 +-
 .../project-map/project-map.component.ts      | 34 ++++++-------------
 2 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/src/app/cartography/components/d3-map/d3-map.component.ts b/src/app/cartography/components/d3-map/d3-map.component.ts
index 07c2673e..95c188b0 100644
--- a/src/app/cartography/components/d3-map/d3-map.component.ts
+++ b/src/app/cartography/components/d3-map/d3-map.component.ts
@@ -56,7 +56,6 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
 
   private onChangesDetected: Subscription;
   private subscriptions: Subscription[] = [];
-
   private drawLinkTool: boolean;
 
   protected settings = {
@@ -191,6 +190,8 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     this.graphLayout.draw(this.svg, this.context);
     this.textEditor.activateTextEditingForDrawings();
     this.textEditor.activateTextEditingForNodeLabels();
+
+    console.log("DONE!!!")
   }
 
   @HostListener('window:resize', ['$event'])
diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index 86722b89..8ee3658f 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -507,12 +507,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     minY = minY - margin;
     maxY = maxY + margin;
 
-    console.log(maxX);
-    console.log(minX);
-    console.log(maxY);
-    console.log(minY);
-    console.log('-----------------------------');
-
     let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
     let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
     let widthOfAreaToShow = maxX - minX;
@@ -520,33 +514,25 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     let widthToSceneWidthRatio = widthOfAreaToShow / windowWidth;
     let heightToSceneHeightRatio = heightOfAreaToShow / windowHeight;
 
-    console.log(widthOfAreaToShow);
-    console.log(heightOfAreaToShow);
-    console.log(widthToSceneWidthRatio);
-    console.log(heightToSceneHeightRatio);
-    console.log('-----------------------------');
-
     let scale = 1 / Math.max(widthToSceneWidthRatio, heightToSceneHeightRatio);
 
     if (scale !== this.mapScaleService.currentScale) {
       this.mapScaleService.setScale(scale);
-
       this.project.scene_width = this.project.scene_width * scale;
       this.project.scene_height = this.project.scene_height * scale;
-      let scrollX: number = (minX * scale) + this.project.scene_width/2;
-      let scrollY: number = (minY * scale) + this.project.scene_height/2;
-      // console.log(scrollX);
-      // console.log(scrollY);
-      // let scrollY = (this.project.scene_height - windowHeight)/2;
-      // let scrollX = (this.project.scene_width - windowWidth)/2;
-      window.scrollTo(scrollX, scrollY);
+      let scrollX: number = 0;
+      let scrollY: number = 0;
+      if (heightToSceneHeightRatio < widthOfAreaToShow) {
+        scrollX = (minX * scale) - ((windowWidth - widthOfAreaToShow*scale)/2) + this.project.scene_width/2;
+        scrollY = (minY * scale) + this.project.scene_height/2;
+      } else {
+        scrollX = (minX * scale) + this.project.scene_width/2;
+        scrollY = (minY * scale) - ((windowHeight - heightOfAreaToShow*scale)/2) + this.project.scene_height/2;
+      }
+      setTimeout(function(){window.scrollTo(scrollX, scrollY)}, 100);     
     } else {
       let scrollX: number = (minX * scale) + this.project.scene_width/2;
       let scrollY: number = (minY * scale) + this.project.scene_height/2;
-      // console.log(scrollX);
-      // console.log(scrollY);
-      // let scrollY = (this.project.scene_height - windowHeight)/2;
-      // let scrollX = (this.project.scene_width - windowWidth)/2;
       window.scrollTo(scrollX, scrollY);
     }
   }

From 0c788b98986941b19f53943133d2dbe33664804e Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Fri, 25 Oct 2019 05:19:30 -0700
Subject: [PATCH 6/6] Code cleaned up

---
 .../components/d3-map/d3-map.component.ts     |  7 +++--
 .../project-map/project-map.component.ts      | 31 +++++++++++++------
 src/app/services/mapsettings.service.ts       |  3 +-
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/app/cartography/components/d3-map/d3-map.component.ts b/src/app/cartography/components/d3-map/d3-map.component.ts
index 9f799d2e..d0ed257e 100644
--- a/src/app/cartography/components/d3-map/d3-map.component.ts
+++ b/src/app/cartography/components/d3-map/d3-map.component.ts
@@ -33,6 +33,7 @@ import { ToolsService } from '../../../services/tools.service';
 import { TextEditorComponent } from '../text-editor/text-editor.component';
 import { MapScaleService } from '../../../services/mapScale.service';
 import { Project } from '../../../models/project';
+import { MapSettingsService } from '../../../services/mapsettings.service';
 
 @Component({
   selector: 'app-d3-map',
@@ -75,7 +76,8 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     protected movingToolWidget: MovingTool,
     public graphLayout: GraphLayout,
     private toolsService: ToolsService,
-    private mapScaleService: MapScaleService
+    private mapScaleService: MapScaleService,
+    private mapSettingsService: MapSettingsService
   ) {
     this.parentNativeElement = element.nativeElement;
   }
@@ -193,8 +195,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     this.graphLayout.draw(this.svg, this.context);
     this.textEditor.activateTextEditingForDrawings();
     this.textEditor.activateTextEditingForNodeLabels();
-
-    console.log("DONE!!!")
+    this.mapSettingsService.mapRenderedEmitter.emit(true);
   }
 
   @HostListener('window:resize', ['$event'])
diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index 366338ed..b77716c9 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -95,6 +95,9 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
   protected settings: Settings;
   private inReadOnlyMode = false;
+  private scrollX: number = 0;
+  private scrollY: number = 0;
+  private scrollEnabled: boolean = false;
 
   @ViewChild(ContextMenuComponent, {static: false}) contextMenu: ContextMenuComponent;
   @ViewChild(D3MapComponent, {static: false}) mapChild: D3MapComponent;
@@ -200,6 +203,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
     this.subscriptions.push(routeSub);
 
+    this.subscriptions.push(
+      this.mapSettingsService.mapRenderedEmitter.subscribe((value: boolean) => {
+        if (this.scrollEnabled) this.centerCanvas();
+      })
+    );
+
     this.subscriptions.push(
       this.drawingsDataSource.changes.subscribe((drawings: Drawing[]) => {
         this.drawings = drawings;
@@ -522,21 +531,23 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       this.mapScaleService.setScale(scale);
       this.project.scene_width = this.project.scene_width * scale;
       this.project.scene_height = this.project.scene_height * scale;
-      let scrollX: number = 0;
-      let scrollY: number = 0;
       if (heightToSceneHeightRatio < widthOfAreaToShow) {
-        scrollX = (minX * scale) - ((windowWidth - widthOfAreaToShow*scale)/2) + this.project.scene_width/2;
-        scrollY = (minY * scale) + this.project.scene_height/2;
+        this.scrollX = (minX * scale) - ((windowWidth - widthOfAreaToShow*scale)/2) + this.project.scene_width/2;
+        this.scrollY = (minY * scale) + this.project.scene_height/2;
       } else {
-        scrollX = (minX * scale) + this.project.scene_width/2;
-        scrollY = (minY * scale) - ((windowHeight - heightOfAreaToShow*scale)/2) + this.project.scene_height/2;
+        this.scrollX = (minX * scale) + this.project.scene_width/2;
+        this.scrollY = (minY * scale) - ((windowHeight - heightOfAreaToShow*scale)/2) + this.project.scene_height/2;
       }
-      setTimeout(function(){window.scrollTo(scrollX, scrollY)}, 100);     
     } else {
-      let scrollX: number = (minX * scale) + this.project.scene_width/2;
-      let scrollY: number = (minY * scale) + this.project.scene_height/2;
-      window.scrollTo(scrollX, scrollY);
+      this.scrollX = (minX * scale) + this.project.scene_width/2;
+      this.scrollY = (minY * scale) + this.project.scene_height/2;
     }
+    this.scrollEnabled = true;
+  }
+
+  public centerCanvas() {
+    window.scrollTo(this.scrollX, this.scrollY);
+    this.scrollEnabled = false;
   }
 
   public centerView() {
diff --git a/src/app/services/mapsettings.service.ts b/src/app/services/mapsettings.service.ts
index 2c14f21d..ca0f385b 100644
--- a/src/app/services/mapsettings.service.ts
+++ b/src/app/services/mapsettings.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable, EventEmitter } from "@angular/core";
 import { Subject } from 'rxjs';
 
 @Injectable()
@@ -8,6 +8,7 @@ export class MapSettingsService {
     public isLogConsoleVisible: boolean = false;
     public isLayerNumberVisible: boolean = false;
     public interfaceLabels: Map<string, boolean> = new Map<string, boolean>();
+    public mapRenderedEmitter = new EventEmitter<boolean>();
 
     constructor() {
         this.isLayerNumberVisible = localStorage.getItem('layersVisibility') === 'true' ? true : false;