|
|
|
@ -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) => { |
|
|
|
|
Volodymyr Babak
5 years ago