From 0dde6233b130601d55d785f8164e0771e91ec77e Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 13 May 2021 13:39:20 +0300
Subject: [PATCH] Improve dashboard image dialog - ability to set crop
 rectangle for dashboard screenshot

---
 .../dashboard-image-dialog.component.html     | 30 ++++++++++--
 .../dashboard-image-dialog.component.scss     |  5 ++
 .../dashboard-image-dialog.component.ts       | 46 ++++++++++++++++++-
 3 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
index f37e2991f3..12d044f36b 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
@@ -28,10 +28,32 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content style="position: relative;">
-    <fieldset [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="16px">
-      <div class="tb-image-preview-container">
-        <div *ngIf="!safeImageUrl; else elseBlock">{{ 'dashboard.no-image' | translate }}</div>
-        <ng-template #elseBlock><img class="tb-image-preview" [src]="safeImageUrl" /></ng-template>
+    <fieldset [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px">
+      <div [formGroup]="dashboardRectFormGroup" fxLayout="column" fxLayoutGap="8px" fxLayoutAlign="center center">
+        <mat-form-field class="rect-field">
+          <mat-label>Top %</mat-label>
+          <input matInput formControlName="top" type="number" step="1" min="0" max="100">
+        </mat-form-field>
+        <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="center center">
+          <mat-form-field  class="rect-field">
+            <mat-label>Left %</mat-label>
+            <input matInput formControlName="left" type="number" step="1" min="0" max="100">
+          </mat-form-field>
+          <div class="tb-image-preview-container">
+            <div *ngIf="!safeImageUrl; else elseBlock">{{ 'dashboard.no-image' | translate }}</div>
+            <ng-template #elseBlock><img class="tb-image-preview" [src]="safeImageUrl" /></ng-template>
+          </div>
+          <mat-form-field class="rect-field">
+            <mat-label>Right %</mat-label>
+            <input matInput formControlName="right" type="number" step="1" min="0" max="100">
+          </mat-form-field>
+        </div>
+        <mat-form-field class="rect-field">
+          <mat-label>Bottom %</mat-label>
+          <input matInput formControlName="bottom" type="number" step="1" min="0" max="100">
+        </mat-form-field>
+      </div>
+      <div [formGroup]="dashboardRectFormGroup" fxFlex fxLayout="row" fxLayoutGap="8px">
       </div>
       <button mat-raised-button color="accent"
               type="button"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.scss
index 7960026d56..85f20ad3c9 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.scss
@@ -17,6 +17,11 @@
 $previewSize: 300px !default;
 
 :host {
+
+  mat-form-field.rect-field {
+    max-width: 60px;
+  }
+
   .tb-image-preview {
     width: auto;
     max-width: $previewSize - 2;
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.ts
index 3586f781d5..0bc0206740 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.ts
@@ -18,7 +18,7 @@ import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { DashboardId } from '@shared/models/id/dashboard-id';
@@ -27,6 +27,7 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import html2canvas from 'html2canvas';
 import { map, share } from 'rxjs/operators';
 import { BehaviorSubject, from } from 'rxjs';
+import { isNumber } from '@core/utils';
 
 export interface DashboardImageDialogData {
   dashboardId: DashboardId;
@@ -55,6 +56,7 @@ export class DashboardImageDialogComponent extends DialogComponent<DashboardImag
   safeImageUrl?: SafeUrl;
   dashboardElement: HTMLElement;
 
+  dashboardRectFormGroup: FormGroup;
   dashboardImageFormGroup: FormGroup;
 
   constructor(protected store: Store<AppState>,
@@ -69,6 +71,14 @@ export class DashboardImageDialogComponent extends DialogComponent<DashboardImag
     this.dashboardId = this.data.dashboardId;
     this.updateImage(this.data.currentImage);
     this.dashboardElement = this.data.dashboardElement;
+    const clientRect = this.dashboardElement.getBoundingClientRect();
+
+    this.dashboardRectFormGroup = this.fb.group({
+      left: [0, [Validators.min(0), Validators.max(100)]],
+      top: [0, [Validators.min(0), Validators.max(100)]],
+      right: [100, [Validators.min(0), Validators.max(100)]],
+      bottom: [100, [Validators.min(0), Validators.max(100)]]
+    });
 
     this.dashboardImageFormGroup = this.fb.group({
       dashboardImage: [this.data.currentImage]
@@ -81,13 +91,45 @@ export class DashboardImageDialogComponent extends DialogComponent<DashboardImag
     );
   }
 
+  private convertUserPercent(percent: any, defaultValue: number): number {
+    let result: number;
+    if (isNumber(percent)) {
+      result = Math.max(0, Math.min(100, percent)) / 100;
+    } else {
+      result = defaultValue;
+    }
+    return result;
+  }
+
   takeScreenShot() {
     this.takingScreenshotSubject.next(true);
+    const rect = this.dashboardElement.getBoundingClientRect();
+
+    const leftVal = this.convertUserPercent(this.dashboardRectFormGroup.get('left').value, 0);
+    const topVal = this.convertUserPercent(this.dashboardRectFormGroup.get('top').value, 0);
+    const rightVal = this.convertUserPercent(this.dashboardRectFormGroup.get('right').value, 100);
+    const bottomVal = this.convertUserPercent(this.dashboardRectFormGroup.get('bottom').value, 100);
+
+    const left = leftVal * rect.width;
+    const top = topVal * rect.height;
+    const right = rightVal * rect.width;
+    const bottom = bottomVal * rect.height;
+
+    const x = rect.left + left;
+    const y = rect.top + top;
+    let width = right - left;
+    let height = bottom - top;
+    width = Math.max(1, width);
+    height = Math.max(1, height);
     from(html2canvas(this.dashboardElement, {
       logging: false,
       useCORS: true,
       foreignObjectRendering: false,
-      scale: 512 / this.dashboardElement.clientWidth
+      scale: 512 / width,
+      x,
+      y,
+      width,
+      height
     })).pipe(
       map(canvas => canvas.toDataURL())).subscribe(
       (image) => {