Scroll proof tableau to root node initially (#79)

Author: jgonggrijp

frontend/src/app/annotate/tableau-svg/tableau-svg.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectorRef, input } from '@angular/core';
+import { Component, ChangeDetectorRef, ElementRef, input } from '@angular/core';
 import { CommonModule } from "@angular/common";
 import { Subject } from "rxjs";
 import { Dimensions } from '@/types';
@@ -16,7 +16,10 @@ export class TableauSVG {
     treeDimensions$ = new Subject<Dimensions>();
     treeDimensions: Dimensions = {width:0, height: 0};
 
-    constructor(private cdref: ChangeDetectorRef) {}
+    constructor(
+        private cdref: ChangeDetectorRef,
+        private element: ElementRef
+    ) {}
 
     onTreeSize(size: Dimensions) {
         this.treeDimensions = size;
@@ -25,6 +28,10 @@ export class TableauSVG {
     ngAfterViewChecked() {
         this.treeDimensions$.next(this.treeDimensions);
         this.cdref.detectChanges();
+        const width = this.treeDimensions.width;
+        if (width) this.element.nativeElement.parentElement.scroll({
+            left: Math.max(0, width / 2 - 500)
+        });
     }
 
     public readonly tree = input.required<any>();