[#1168][#1165][#1159] Fit quick image to result window, increase allo…

…wed map zoom lvl, add colors to report legend (#1186) Closes: #1168,#1165,#1159
cyfronet-fid · Apr 28, 2021 · 5d16b06 · 5d16b06
1 parent 02fd31b
commit 5d16b06
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 33 deletions.
diff --git a/s4e-web/.tool-versions b/s4e-web/.tool-versions
@@ -0,0 +1 @@
+nodejs 14.15.5
diff --git a/s4e-web/src/app/views/map-view/sentinel-search/search-results/search-results.component.html b/s4e-web/src/app/views/map-view/sentinel-search/search-results/search-results.component.html
@@ -62,7 +62,7 @@
                   'background': result.image ? 'url(' + result.image + ')' : '',
                   'background-position': 'center center',
                   'background-repeat': 'no-repeat',
-                  'background-size': 'cover'
+                  'background-size': 'contain'
                 }"
                 (click)="showDetails.emit(result)"
               >

diff --git a/s4e-web/src/app/views/map-view/zk/report-modal/report-generator.ts b/s4e-web/src/app/views/map-view/zk/report-modal/report-generator.ts
@@ -14,8 +14,6 @@
  * limitations under the License.
  *
  */
-
-import Canvg from 'canvg';
 import {jsPDF} from 'jspdf';
 import {forkJoin, fromEvent, Observable, of, ReplaySubject} from 'rxjs';
 import {delay, filter, switchMap, take, tap} from 'rxjs/operators';
@@ -276,28 +274,57 @@ class LegendComposer {
     }
   }
 
-  insertLegend(legend: Legend, svgData: string) {
+  async insertLegend(legend: Legend, svg: string) {
     const height = 50;
     const width = 3;
     const margin = 5;
-    const fontSize = 4;
+    const fontSize = 6;
     const yStart = this.currentY + margin;
 
-    this.doc.addSvgAsImage(svgData, this.xStart, yStart, width, height);
-    this.doc.setFont(this.FONT_NAME, 'normal');
-    this.doc.setFontSize(fontSize);
-
-    Object.entries(legend.leftDescription).forEach(([position, value]) => {
-      const positionN = Number(position);
-      this.doc.text(
-        value,
-        this.xStart + width + 1,
-        yStart + height - height * positionN,
-        {maxWidth: this.width, align: 'left', baseline: 'top'}
-      );
+    await this._svgToImgBase64$(svg, width, height).then(imgBase64 => {
+      this.doc.addImage(imgBase64, this.xStart, yStart, width, height);
+      this.doc.setFont(this.FONT_NAME, 'normal');
+      this.doc.setFontSize(fontSize);
+
+      Object.entries(legend.leftDescription).forEach(([position, value]) => {
+        const positionN = Number(position);
+        this.doc.text(
+          value,
+          this.xStart + width + 1,
+          yStart + height - height * positionN,
+          {maxWidth: this.width, align: 'left', baseline: 'top'}
+        );
+      });
+
+      this.advanceY(height + margin);
     });
+  }
 
-    this.advanceY(height + margin);
+  private _svgToImgBase64$(
+    svg: string,
+    width: number,
+    height: number
+  ): Promise<string> {
+    return new Promise((resolve, reject) => {
+      let container = document.createElement('div');
+      container.style.display = 'none';
+      container.innerHTML = svg;
+
+      let canvas = document.createElement('canvas');
+      let context = canvas.getContext('2d');
+
+      const image = new Image();
+      image.onload = () => {
+        canvas.width = (image.width / image.height) * height;
+        canvas.height = (image.height / image.width) * width;
+        context.drawImage(image, 0, 0, canvas.width, canvas.height);
+        resolve(canvas.toDataURL('image/png', 0.92));
+      };
+
+      image.src =
+        'data:image/svg+xml;base64,' +
+        btoa(new XMLSerializer().serializeToString(container.firstElementChild));
+    });
   }
 }
 
@@ -336,18 +363,19 @@ export class ReportGenerator {
       filter(w => !w),
       tap(() => this.working$.next(true)),
       delay(0),
-      tap(() =>
-        this.combineDocument(
-          imageData,
-          imageWidth,
-          imageHeight,
-          caption,
-          notes,
-          productName,
-          sceneDate,
-          pointResolution,
-          legend
-        )
+      tap(
+        async () =>
+          await this.combineDocument(
+            imageData,
+            imageWidth,
+            imageHeight,
+            caption,
+            notes,
+            productName,
+            sceneDate,
+            pointResolution,
+            legend
+          )
       ),
       delay(0),
       tap(() => this.working$.next(false))
@@ -418,7 +446,7 @@ export class ReportGenerator {
    * @return height of the added text box
    */
 
-  private combineDocument(
+  private async combineDocument(
     imageData: string,
     imageWidth: number,
     imageHeight: number,
@@ -498,7 +526,8 @@ export class ReportGenerator {
     composer.insertScale(pxPerMM * pointResolution);
 
     if (legend) {
-      composer.insertLegend(legend, this.svg.legend);
+      console.log(this.svg);
+      await composer.insertLegend(legend, this.svg.legend);
     }
 
     composer.insertTextBox('Szczegóły', {

diff --git a/s4e-web/src/environments/environment.common.ts b/s4e-web/src/environments/environment.common.ts
@@ -3,7 +3,7 @@ export const commonEnvironmentVariables = {
   generalErrorKey: '__general__',
   apiPrefixV1: 'api/v1',
   projection: {toProjection: 'EPSG:3857', coordinates: [19, 52] as [number, number]},
-  maxZoom: 12,
+  maxZoom: 19,
   timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 
   /*