Fix canvas crashing issue.

Bug: b/238089034
Test: npm run test:all
Change-Id: I5ba4f7e21bc294de9135a7debd150dab19a24c40
This commit is contained in:
Priyanka Patel
2022-09-01 09:29:06 +00:00
parent d4ab0b3a11
commit f392dc6d0d

View File

@@ -13,10 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, Input, OnChanges, OnDestroy, Inject, ElementRef, SimpleChanges } from "@angular/core";
import { Component, Input, OnChanges, OnDestroy, Inject, ElementRef, SimpleChanges, OnInit } from "@angular/core";
import { RectsUtils } from "viewers/components/rects/rects_utils";
import { Point, Rectangle, RectMatrix, RectTransform } from "viewers/viewer_surface_flinger/ui_data";
import { interval, Subscription } from "rxjs";
import { CanvasGraphics } from "viewers/components/rects/canvas_graphics";
import * as THREE from "three";
import { ViewerEvents } from "viewers/common/viewer_events";
@@ -37,15 +36,15 @@ import { ViewerEvents } from "viewers/common/viewer_events";
[disabled]="!visibleView()"
class="rects-checkbox control-item"
[checked]="showVirtualDisplays()"
(change)="canvasGraphics.updateVirtualDisplays($event.checked!)"
(change)="updateVirtualDisplays($event.checked!)"
>Show virtual</mat-checkbox>
<div class="zoom-container control-item">
<button class="zoom-btn" (click)="canvasGraphics.updateZoom(true)">
<button class="zoom-btn" (click)="updateZoom(true)">
<mat-icon aria-hidden="true">
zoom_in
</mat-icon>
</button>
<button class="zoom-btn" (click)="canvasGraphics.updateZoom(false)">
<button class="zoom-btn" (click)="updateZoom(false)">
<mat-icon aria-hidden="true">
zoom_out
</mat-icon>
@@ -62,7 +61,7 @@ import { ViewerEvents } from "viewers/common/viewer_events";
max="4"
aria-label="units"
[value]="xCameraPos()"
(input)="canvasGraphics.updateRotation($event.value!)"
(input)="updateRotation($event.value!)"
></mat-slider>
</div>
<div class="slider" [class.spacing]="true">
@@ -74,7 +73,7 @@ import { ViewerEvents } from "viewers/common/viewer_events";
max="0.4"
aria-label="units"
[value]="getLayerSeparation()"
(input)="canvasGraphics.updateLayerSeparation($event.value!)"
(input)="updateLayerSeparation($event.value!)"
></mat-slider>
</div>
</div>
@@ -119,7 +118,7 @@ import { ViewerEvents } from "viewers/common/viewer_events";
]
})
export class RectsComponent implements OnChanges, OnDestroy {
export class RectsComponent implements OnInit, OnChanges, OnDestroy {
@Input() rects!: Rectangle[];
@Input() displayIds: Array<number> = [];
@Input() highlightedItems: Array<string> = [];
@@ -131,10 +130,8 @@ export class RectsComponent implements OnChanges, OnDestroy {
this.currentDisplayId = this.displayIds[0] ?? 0; //default stack id is usually zero
}
ngOnDestroy() {
if (this.canvasSubscription) {
this.canvasSubscription.unsubscribe();
}
ngOnInit() {
window.addEventListener('resize', () => this.refreshCanvas());
}
ngOnChanges(changes: SimpleChanges) {
@@ -155,14 +152,14 @@ export class RectsComponent implements OnChanges, OnDestroy {
}
});
this.scaleRects();
if (changes["rects"]) {
this.drawRects();
}
} else if (this.canvasSubscription) {
this.canvasSubscription.unsubscribe();
this.drawRects();
}
}
ngOnDestroy() {
window.removeEventListener('resize', () => this.refreshCanvas());
}
onRectClick(event:MouseEvent) {
this.setNormalisedMousePos(event);
const raycaster = new THREE.Raycaster();
@@ -196,15 +193,14 @@ export class RectsComponent implements OnChanges, OnDestroy {
}
drawRects() {
if (this.canvasSubscription) {
this.canvasSubscription.unsubscribe();
}
const canvas = document.getElementById("rects-canvas") as HTMLCanvasElement;
this.canvasGraphics.initialise(canvas);
this.canvasSubscription = this.drawRectsInterval.subscribe(() => {
this.updateVariablesBeforeRefresh();
this.canvasGraphics.refreshCanvas();
});
this.refreshCanvas();
}
refreshCanvas() {
this.updateVariablesBeforeRefresh();
this.canvasGraphics.refreshCanvas();
}
updateVariablesBeforeRefresh() {
@@ -217,6 +213,7 @@ export class RectsComponent implements OnChanges, OnDestroy {
onChangeView(visible: boolean) {
this.canvasGraphics.updateVisibleView(visible);
this.canvasGraphics.clearLabelElements();
this.refreshCanvas();
}
scaleRects() {
@@ -299,6 +296,26 @@ export class RectsComponent implements OnChanges, OnDestroy {
return this.canvasGraphics.getLayerSeparation();
}
updateLayerSeparation(sep: number) {
this.canvasGraphics.updateLayerSeparation(sep);
this.refreshCanvas();
}
updateRotation(rot: number) {
this.canvasGraphics.updateRotation(rot);
this.refreshCanvas();
}
updateZoom(zoom: boolean) {
this.canvasGraphics.updateZoom(zoom);
this.refreshCanvas();
}
updateVirtualDisplays(show: boolean) {
this.canvasGraphics.updateVirtualDisplays(show);
this.refreshCanvas();
}
xCameraPos() {
return this.canvasGraphics.getXCameraPos();
}
@@ -309,15 +326,13 @@ export class RectsComponent implements OnChanges, OnDestroy {
changeDisplayId(displayId: number) {
this.currentDisplayId = displayId;
this.refreshCanvas();
}
canvasGraphics: CanvasGraphics;
private readonly _60fpsInterval = 16.66666666666667;
private drawRectsInterval = interval(this._60fpsInterval);
private boundsWidth = 0;
private boundsHeight = 0;
private displayRects!: Rectangle[];
private canvasSubscription?: Subscription;
private mouse = new THREE.Vector3(0, 0, 0);
private currentDisplayId: number;
}