pan/zoom support for svg tree

Author: bbonf

frontend/angular.json

@@ -47,7 +47,7 @@
                         ],
                         "scripts": [],
                         "server": "src/main.server.ts",
-                        "prerender": true,
+                        "prerender": false,
                         "ssr": false,
                         "baseHref": "/"
                     },

frontend/package.json

@@ -37,6 +37,7 @@
     "colors": "^1.4.0",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
+    "svg-pan-zoom": "bumbu/svg-pan-zoom",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.1"
   },
@@ -57,4 +58,4 @@
     "ng-extract-i18n-merge": "^2.12.0",
     "typescript": "~5.8.3"
   }
-}
+}

frontend/src/app/annotate/annotate.component.ts

@@ -50,7 +50,6 @@ export class AnnotateComponent implements OnInit {
     }
 
     startParse() {
-        // hardcoded data for now
         let input: ParseInput = {
             premises: this.problem?.problem?.premises!,
             hypothesis: this.problem?.problem?.hypothesis!,

frontend/src/app/annotate/parse-tree/parse-svg.component.svg

@@ -1,8 +1,9 @@
-import { Component, ChangeDetectorRef, Input} from '@angular/core';
+import { Component, ChangeDetectorRef, ElementRef, Input, ViewChild, afterNextRender} from '@angular/core';
 import { CommonModule } from "@angular/common";
 import { Subject } from "rxjs";
 import { Dimensions } from '@/types';
 import { ParseTree } from './parse-tree.component';
+import svgPanZoom from 'svg-pan-zoom';
 
 @Component({
     selector: "la-parse-svg",
@@ -11,11 +12,17 @@ import { ParseTree } from './parse-tree.component';
     templateUrl: "./parse-svg.component.svg",
 })
 export class ParseSVG {
+    @ViewChild('svg')
+    svg?: ElementRef<SVGSVGElement>;
 
     treeDimensions$ = new Subject<Dimensions>();
     treeDimensions: Dimensions = {width:0, height: 0};
 
-    constructor(private cdref: ChangeDetectorRef) {}
+    constructor(private cdref: ChangeDetectorRef) {
+        afterNextRender(() => {
+            svgPanZoom(this.svg!.nativeElement);
+        });
+    }
 
     onTreeSize(size: Dimensions) {
         this.treeDimensions = size;

frontend/src/app/annotate/parse-tree/parse-svg.component.ts

@@ -6764,6 +6764,10 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svg-pan-zoom@bumbu/svg-pan-zoom:
+  version "3.6.2"
+  resolved "https://codeload.github.com/bumbu/svg-pan-zoom/tar.gz/aaa68d186abab5d782191b66d2582592fe5d3c13"
+
 symbol-observable@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"