244 bug viewport not centering on bounding box when reloadingopening …

…netzgrafik (#250) * - When the application changes the project or the variant the viewbox will be adjusted on the bounding box. * - When the application changes the project or the variant the viewbox will be adjusted on the bounding box. * - test fixed * - removed unused import * console.log("moveNetzgrafikEditorViewFocalPoint", null); -> fixed
SchweizerischeBundesbahnen · Aug 20, 2024 · 9e5e2fd · 9e5e2fd
1 parent 3496d0a
commit 9e5e2fd
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 47 deletions.
diff --git a/src/app/services/data/node.service.ts b/src/app/services/data/node.service.ts
@@ -1243,6 +1243,32 @@ export class NodeService implements OnDestroy {
     return nodeLabels;
   }
 
+  getNetzgrafikBoundingBox() {
+    let minX;
+    let maxX;
+    let minY;
+    let maxY;
+    this.nodesStore.nodes.forEach((n) => {
+      minX =
+        minX === undefined
+          ? n.getPositionX()
+          : Math.min(minX, n.getPositionX());
+      maxX =
+        maxX === undefined
+          ? n.getPositionX() + n.getNodeWidth()
+          : Math.max(maxX, n.getPositionX() + n.getNodeWidth());
+      minY =
+        minY === undefined
+          ? n.getPositionY()
+          : Math.min(minY, n.getPositionY());
+      maxY =
+        maxY === undefined
+          ? n.getPositionY() + n.getNodeHeight()
+          : Math.max(maxY, n.getPositionY() + n.getNodeHeight());
+    });
+    return {minCoordX: minX, minCoordY: minY, maxCoordX: maxX, maxCoordY: maxY};
+  }
+
   private deleteNodeWithoutUpdate(nodeId: number) {
     const node = this.getNodeFromId(nodeId);
     const connectedTrainrunSections = node.getConnectedTrainrunSections();

diff --git a/src/app/services/data/version-control.service.ts b/src/app/services/data/version-control.service.ts
@@ -1,4 +1,4 @@
-import {HostListener, Injectable, OnDestroy} from "@angular/core";
+import {Injectable, OnDestroy} from "@angular/core";
 import {
   VariantControllerBackendService,
   VariantDto,
@@ -27,6 +27,9 @@ export class VersionControlService implements OnDestroy {
 
   private readonly destroyed = new Subject<void>();
 
+  private previousVariantDto: VariantDto = undefined;
+  private variantChanged = false;
+
   constructor(
     private readonly variantsBackendService: VariantControllerBackendService,
     private readonly versionsBackendService: VersionControllerBackendService,
@@ -37,14 +40,14 @@ export class VersionControlService implements OnDestroy {
   ) {
     if (!environment.disableBackend) {
       autoSaveService.autosaveTrigger$
-      .pipe(
-        takeUntil(this.destroyed),
-        filter(() => this.variant.isWritable),
-      )
-      .subscribe(() => {
-        logService.debug("auto saving changes");
-        this.createSnapshot();
-      });
+        .pipe(
+          takeUntil(this.destroyed),
+          filter(() => this.variant.isWritable),
+        )
+        .subscribe(() => {
+          logService.debug("auto saving changes");
+          this.createSnapshot();
+        });
     }
   }
 
@@ -62,6 +65,7 @@ export class VersionControlService implements OnDestroy {
       .getVariant(variantId)
       .pipe(takeUntil(this.destroyed))
       .subscribe((variant) => {
+        this.updateVarianteChangedInfo(variant);
         this.variantSubject.next(variant);
         if (loadModel) {
           this.loadModel(variant.latestVersion);
@@ -178,4 +182,24 @@ export class VersionControlService implements OnDestroy {
       .deleteVariant(this.variant.id)
       .pipe(map(() => null));
   }
+
+  getAndClearVarianteChangedSignal(): boolean {
+    const retVal = this.variantChanged;
+    this.variantChanged = false;
+    return retVal;
+  }
+
+  private updateVarianteChangedInfo(variant: VariantDto) {
+    if (variant === null) {
+      return;
+    }
+    if (this.previousVariantDto === undefined) {
+      this.previousVariantDto = variant;
+      this.variantChanged = true;
+      return;
+    }
+    this.variantChanged = this.previousVariantDto.projectId !== variant.projectId &&
+      this.previousVariantDto.id !== variant.id;
+    this.previousVariantDto = variant;
+  }
 }
diff --git a/src/app/services/ui/ui.interaction.service.ts b/src/app/services/ui/ui.interaction.service.ts
@@ -355,6 +355,14 @@ export class UiInteractionService implements OnDestroy {
     this.moveNetzgrafikEditorViewFocalPointSubject.next(center);
   }
 
+  viewportCenteringOnNodesBoundingBox() {
+    const bb = this.nodeService.getNetzgrafikBoundingBox();
+    const center = new Vec2D(
+      (bb.minCoordX + bb.maxCoordX) / 2.0,
+      (bb.minCoordY + bb.maxCoordY) / 2.0
+    );
+    this.moveNetzgrafikEditorFocalViewPoint(center);
+  }
   showOrCloseFilter(type: FilterWindowType) {
     if (this.isFilterWindowType(type)) {
       this.closeFilter();

diff --git a/src/app/view/editor-main-view/data-views/d3.utils.spec.ts b/src/app/view/editor-main-view/data-views/d3.utils.spec.ts
@@ -151,7 +151,8 @@ describe("3d.Utils.tests", () => {
       copyService,
       logService,
       viewportCullSerivce,
-      levelOfDetailService
+      levelOfDetailService,
+      undefined
     );
 
     new EditorView(

diff --git a/src/app/view/editor-main-view/data-views/data.view.spec.ts b/src/app/view/editor-main-view/data-views/data.view.spec.ts
@@ -156,7 +156,8 @@ describe("Editor-DataView", () => {
       copyService,
       logService,
       viewportCullSerivce,
-      levelOfDetailService
+      levelOfDetailService,
+      undefined
     );
 
     new EditorView(

diff --git a/src/app/view/editor-main-view/data-views/nodes.view.spec.ts b/src/app/view/editor-main-view/data-views/nodes.view.spec.ts
@@ -150,7 +150,8 @@ describe("Nodes-View", () => {
       copyService,
       logService,
       viewportCullSerivce,
-      levelOfDetailService
+      levelOfDetailService,
+      undefined
     );
 
     new EditorView(

diff --git a/src/app/view/editor-main-view/data-views/notes.view.spec.ts b/src/app/view/editor-main-view/data-views/notes.view.spec.ts
@@ -150,7 +150,8 @@ describe("Notes-View", () => {
       copyService,
       logService,
       viewportCullSerivce,
-      levelOfDetailService
+      levelOfDetailService,
+      undefined
     );
 
     new EditorView(

diff --git a/src/app/view/editor-main-view/data-views/trainrunsections.view.spec.ts b/src/app/view/editor-main-view/data-views/trainrunsections.view.spec.ts
@@ -155,7 +155,8 @@ describe("TrainrunSection-View", () => {
       copyService,
       logService,
       viewportCullSerivce,
-      levelOfDetailService
+      levelOfDetailService,
+      undefined
     );
 
     new EditorView(

diff --git a/src/app/view/editor-main-view/data-views/transitions.view.spec.ts b/src/app/view/editor-main-view/data-views/transitions.view.spec.ts
@@ -150,7 +150,8 @@ describe("Transitions-View", () => {
       copyService,
       logService,
       viewportCullSerivce,
-      levelOfDetailService
+      levelOfDetailService,
+      undefined
     );
 
 

diff --git a/src/app/view/editor-main-view/editor-main-view.component.ts b/src/app/view/editor-main-view/editor-main-view.component.ts
@@ -43,6 +43,7 @@ import {TravelTimeCreationEstimatorType} from "../themes/editor-trainrun-travelt
 import {Port} from "../../models/port.model";
 import {LevelOfDetailService} from "../../services/ui/level.of.detail.service";
 import {ViewportCullService} from "../../services/ui/viewport.cull.service";
+import {VersionControlService} from "../../services/data/version-control.service";
 
 @Component({
   selector: "sbb-editor-main-view",
@@ -76,7 +77,7 @@ export class EditorMainViewComponent implements AfterViewInit, OnDestroy {
     private logService: LogService,
     private viewportCullSerivce: ViewportCullService,
     private levelOfDetailService: LevelOfDetailService,
-
+    private versionControlService: VersionControlService,
   ) {
     this.editorView = new EditorView(
       this,
@@ -594,6 +595,12 @@ export class EditorMainViewComponent implements AfterViewInit, OnDestroy {
     });
   }
 
+  private handleVariantChanged() {
+    if (this.versionControlService?.getAndClearVarianteChangedSignal()) {
+      this.uiInteractionService.viewportCenteringOnNodesBoundingBox();
+    }
+  }
+
   private subscribeViewToServices() {
     this.nodeService.nodes
       .pipe(takeUntil(this.destroyed))
@@ -631,5 +638,11 @@ export class EditorMainViewComponent implements AfterViewInit, OnDestroy {
         this.editorView.notesView.displayNotes(updatedNotes);
         this.editorView.postDisplayRendering();
       });
+
+    this.nodeService.nodes
+      .pipe(takeUntil(this.destroyed))
+      .subscribe(() => {
+        this.handleVariantChanged();
+      });
   }
 }
diff --git a/src/app/view/editor-tools-view-component/editor-tools-view.component.ts b/src/app/view/editor-tools-view-component/editor-tools-view.component.ts
@@ -79,6 +79,7 @@ export class EditorToolsViewComponent {
         this.uiInteractionService.closePerlenkette();
         this.nodeService.unselectAllNodes();
         this.dataService.loadNetzgrafikDto(netzgrafikDto);
+        this.uiInteractionService.viewportCenteringOnNodesBoundingBox();
       }
     };
     reader.readAsText(file);
@@ -298,7 +299,7 @@ export class EditorToolsViewComponent {
       htmlElementToExport = document.getElementById("graphContainer");
       console.log("Try -2- (graphContainer): ", htmlElementToExport !== null);
 
-      const boundingBox = this.getNetzgrafikBoundingBox();
+      const boundingBox = this.nodeService.getNetzgrafikBoundingBox();
       param = {
         encoderOptions: 1.0,
         scale: 2.0,
@@ -348,32 +349,6 @@ export class EditorToolsViewComponent {
     };
   }
 
-  private getNetzgrafikBoundingBox() {
-    let minX;
-    let maxX;
-    let minY;
-    let maxY;
-    this.nodeService.nodesStore.nodes.forEach((n) => {
-      minX =
-        minX === undefined
-          ? n.getPositionX()
-          : Math.min(minX, n.getPositionX());
-      maxX =
-        maxX === undefined
-          ? n.getPositionX() + n.getNodeWidth()
-          : Math.max(maxX, n.getPositionX() + n.getNodeWidth());
-      minY =
-        minY === undefined
-          ? n.getPositionY()
-          : Math.min(minY, n.getPositionY());
-      maxY =
-        maxY === undefined
-          ? n.getPositionY() + n.getNodeHeight()
-          : Math.max(maxY, n.getPositionY() + n.getNodeHeight());
-    });
-    return {minCoordX: minX, minCoordY: minY, maxCoordX: maxX, maxCoordY: maxY};
-  }
-
   private convertToZuglaufCSV(): string {
     const separator = ";";
     const comma = ",";

diff --git a/src/app/view/util/svg.mouse.controller.ts b/src/app/view/util/svg.mouse.controller.ts
@@ -168,6 +168,9 @@ export class SVGMouseController {
   }
 
   moveNetzgrafikEditorViewFocalPoint(center: Vec2D) {
+    if (this.viewboxProperties === undefined) {
+      return;
+    }
     this.viewboxProperties.panZoomLeft =
       center.getX() - this.viewboxProperties.panZoomWidth / 2.0;
     this.viewboxProperties.panZoomTop =
@@ -365,9 +368,9 @@ export class SVGMouseController {
   private updateZoomCenter(zoomCenter: Vec2D) {
     const oldZoomCenter = new Vec2D(
       this.viewboxProperties.panZoomLeft +
-        zoomCenter.getX() * this.viewboxProperties.panZoomWidth,
+      zoomCenter.getX() * this.viewboxProperties.panZoomWidth,
       this.viewboxProperties.panZoomTop +
-        zoomCenter.getY() * this.viewboxProperties.panZoomHeight,
+      zoomCenter.getY() * this.viewboxProperties.panZoomHeight,
     );
 
     const zoomFactor = 100.0 / this.viewboxProperties.zoomFactor;
@@ -386,9 +389,9 @@ export class SVGMouseController {
 
     const newZoomCenter = new Vec2D(
       this.viewboxProperties.panZoomLeft +
-        zoomCenter.getX() * this.viewboxProperties.panZoomWidth,
+      zoomCenter.getX() * this.viewboxProperties.panZoomWidth,
       this.viewboxProperties.panZoomTop +
-        zoomCenter.getY() * this.viewboxProperties.panZoomHeight,
+      zoomCenter.getY() * this.viewboxProperties.panZoomHeight,
     );
 
     this.viewboxProperties.panZoomLeft -=