[WIP] experimental zoom on modules diagram

package-lock.json

@@ -15626,6 +15626,11 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svg-pan-zoom": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/svg-pan-zoom/-/svg-pan-zoom-3.6.0.tgz",
+      "integrity": "sha512-ZBEL2z/n/W2fLLFzn3NTQgd+7QEfbrKvKmu29U3qvMflmJgLaWkwKbOzWJYESFidTiGYMHkijAKmY6m64moyYg=="
+    },
     "symbol-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",

package.json

@@ -65,6 +65,7 @@
     "roboto-fontface": "^0.10.0",
     "rxjs": "^6.5.2",
     "screenfull": "^4.2.0",
+    "svg-pan-zoom": "^3.6.0",
     "tslib": "^1.10.0",
     "xlsx": "^0.14.4",
     "zone.js": "~0.9.1"

src/app/components/modules-diagram/modules-diagram.component.html

@@ -4,13 +4,6 @@
         <mat-card-title>
             <h1>{{ uitextTitle }}</h1>
         </mat-card-title>
-
-        <!-- <button type="button" mat-icon-button (click)="storePreferences()" [title]="uitextStorePreferences">
-            <mat-icon>file_download</mat-icon>
-        </button>
-        <button type="button" mat-icon-button (click)="restoreDefaultValues()" [title]="uitextRestoreDefaultValues">
-            <mat-icon>settings_backup_restore</mat-icon>
-        </button> -->
     </mat-card-header>
 
     <mat-card-content>
@@ -19,7 +12,9 @@
 
         <div id="diagram" #diagram></div>
 
-        <a class="show-debug" (click)="showDebug = ! showDebug">debug</a>
+        <a class="show-debug" (click)="initSvgPanZoom()">init zoom </a>
+
+        <a class="show-debug" (click)="showDebug = ! showDebug"> debug</a>
         <div *ngIf="showDebug">
             <pre>{{ graphDef }}</pre>
         </div>

src/app/components/modules-diagram/modules-diagram.component.scss

 #diagram {
     margin-top: 2em;
+    margin-bottom: 2em;
     text-align: center;
 }
 
+/* ::ng-deep #graphDiv {
+    // width: 100%;
+    // min-width: 100%;
+    // min-height: 100%;
+    border: solid green 1px;
+} */
+
 a.show-debug {
     cursor: pointer;
 }

src/app/components/modules-diagram/modules-diagram.component.ts

-import { Component, ViewChild, AfterContentInit, OnInit/* , OnDestroy, NgZone */ } from "@angular/core";
+import {
+    Component,
+    ViewChild,
+    AfterContentInit,
+    OnInit,
+    AfterViewChecked
+} from "@angular/core";
 import { Router } from "@angular/router";
 
 import { I18nService } from "../../services/internationalisation/internationalisation.service";
@@ -9,12 +15,18 @@ import { FormulaireService } from "../../services/formulaire/formulaire.service"
 
 import * as mermaid from "mermaid";
 
+import * as SvgPanZoom from "svg-pan-zoom";
+
 @Component({
     selector: "modules-diagram",
     templateUrl: "./modules-diagram.component.html",
     styleUrls: ["./modules-diagram.component.scss"]
 })
-export class ModulesDiagramComponent extends BaseComponent implements AfterContentInit, OnInit/* , OnDestroy */ {
+export class ModulesDiagramComponent extends BaseComponent implements AfterContentInit, AfterViewChecked, OnInit {
+
+    private svgPanZoom: SvgPanZoom.Instance = null;
+
+    private needsToInitSvgPanZoom = false;
 
     // private readonly externalFunctionName: string = "functionToCallIntoAngular";
 
@@ -62,6 +74,25 @@ export class ModulesDiagramComponent extends BaseComponent implements AfterConte
         return this.intlService.localizeText("INFO_DIAGRAM_DRAWING_ERROR");
     }
 
+    public ngAfterViewChecked() {
+        if (this.needsToInitSvgPanZoom) {
+            this.initSvgPanZoom();
+        }
+    }
+
+    public initSvgPanZoom() {
+        if (this.svgPanZoom) {
+            this.svgPanZoom.destroy();
+        }
+        this.svgPanZoom = SvgPanZoom("#graphDiv", {
+            minZoom: 1,
+            maxZoom: 10,
+            zoomScaleSensitivity: 0.8,
+            contain: true
+        });
+        this.needsToInitSvgPanZoom = false;
+    }
+
     public ngOnInit() {
         // if app is started on this page but session is empty, redirect to home page
         if (! this.hasModules) {
@@ -95,6 +126,14 @@ export class ModulesDiagramComponent extends BaseComponent implements AfterConte
         }
     }
 
+    public resetZoom() {
+        if (this.svgPanZoom) {
+            this.svgPanZoom.resetZoom();
+            // this.svgPanZoom.contain();
+            // this.svgPanZoom.fit();
+        }
+    }
+
     public get hasModules(): boolean {
         return Session.getInstance().getNumberOfNubs() > 0;
     }