From 69a16f877aa56eedec4d30ba06473dc5cafa17cc Mon Sep 17 00:00:00 2001
From: Kean Mariotti <keanmariotti@google.com>
Date: Wed, 21 Dec 2022 15:01:47 +0000
Subject: [PATCH 1/2] Rename Angular components internal/wrapped properties

A Christmas present for pablogamito@

Test: npm run build:all && npm run test:all
Change-Id: I64c8a80b02de61874e56ea33eeb99f7a0d4afe9b
---
 .../timeline/timeline.component.spec.ts       | 16 +++++-----
 .../components/timeline/timeline.component.ts | 30 +++++++++----------
 .../components/rects/rects.component.ts       | 26 ++++++++--------
 3 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/tools/winscope-ng/src/app/components/timeline/timeline.component.spec.ts b/tools/winscope-ng/src/app/components/timeline/timeline.component.spec.ts
index 0bc0a5240..3f6b45e64 100644
--- a/tools/winscope-ng/src/app/components/timeline/timeline.component.spec.ts
+++ b/tools/winscope-ng/src/app/components/timeline/timeline.component.spec.ts
@@ -122,22 +122,22 @@ describe("TimelineComponent", () => {
 
   it("processes active trace input and updates selected traces", () => {
     component.activeViewTraceTypes = [TraceType.SURFACE_FLINGER];
-    expect(component.wrappedActiveTrace).toEqual(TraceType.SURFACE_FLINGER);
+    expect(component.internalActiveTrace).toEqual(TraceType.SURFACE_FLINGER);
     expect(component.selectedTraces).toEqual([TraceType.SURFACE_FLINGER]);
 
     component.activeViewTraceTypes = [TraceType.SURFACE_FLINGER];
-    expect(component.wrappedActiveTrace).toEqual(TraceType.SURFACE_FLINGER);
+    expect(component.internalActiveTrace).toEqual(TraceType.SURFACE_FLINGER);
     expect(component.selectedTraces).toEqual([TraceType.SURFACE_FLINGER]);
 
     component.activeViewTraceTypes = [TraceType.TRANSACTIONS];
-    expect(component.wrappedActiveTrace).toEqual(TraceType.TRANSACTIONS);
+    expect(component.internalActiveTrace).toEqual(TraceType.TRANSACTIONS);
     expect(component.selectedTraces).toEqual([
       TraceType.SURFACE_FLINGER,
       TraceType.TRANSACTIONS
     ]);
 
     component.activeViewTraceTypes = [TraceType.WINDOW_MANAGER];
-    expect(component.wrappedActiveTrace).toEqual(TraceType.WINDOW_MANAGER);
+    expect(component.internalActiveTrace).toEqual(TraceType.WINDOW_MANAGER);
     expect(component.selectedTraces).toEqual([
       TraceType.SURFACE_FLINGER,
       TraceType.TRANSACTIONS,
@@ -145,7 +145,7 @@ describe("TimelineComponent", () => {
     ]);
 
     component.activeViewTraceTypes = [TraceType.PROTO_LOG];
-    expect(component.wrappedActiveTrace).toEqual(TraceType.PROTO_LOG);
+    expect(component.internalActiveTrace).toEqual(TraceType.PROTO_LOG);
     expect(component.selectedTraces).toEqual([
       TraceType.TRANSACTIONS,
       TraceType.WINDOW_MANAGER,
@@ -155,15 +155,15 @@ describe("TimelineComponent", () => {
 
   it("handles undefined active trace input", () => {
     component.activeViewTraceTypes = undefined;
-    expect(component.wrappedActiveTrace).toBeUndefined();
+    expect(component.internalActiveTrace).toBeUndefined();
     expect(component.selectedTraces).toEqual([]);
 
     component.activeViewTraceTypes = [TraceType.SURFACE_FLINGER];
-    expect(component.wrappedActiveTrace).toEqual(TraceType.SURFACE_FLINGER);
+    expect(component.internalActiveTrace).toEqual(TraceType.SURFACE_FLINGER);
     expect(component.selectedTraces).toEqual([TraceType.SURFACE_FLINGER]);
 
     component.activeViewTraceTypes = undefined;
-    expect(component.wrappedActiveTrace).toEqual(TraceType.SURFACE_FLINGER);
+    expect(component.internalActiveTrace).toEqual(TraceType.SURFACE_FLINGER);
     expect(component.selectedTraces).toEqual([TraceType.SURFACE_FLINGER]);
   });
 
diff --git a/tools/winscope-ng/src/app/components/timeline/timeline.component.ts b/tools/winscope-ng/src/app/components/timeline/timeline.component.ts
index 64f547710..c0176e881 100644
--- a/tools/winscope-ng/src/app/components/timeline/timeline.component.ts
+++ b/tools/winscope-ng/src/app/components/timeline/timeline.component.ts
@@ -284,10 +284,10 @@ export class TimelineComponent implements TimelineComponentDependencyInversion {
       throw Error("Timeline component doesn't support viewers with dependencies length !== 1");
     }
 
-    this.wrappedActiveTrace = types[0];
+    this.internalActiveTrace = types[0];
 
-    if (!this.selectedTraces.includes(this.wrappedActiveTrace)) {
-      this.selectedTraces.push(this.wrappedActiveTrace);
+    if (!this.selectedTraces.includes(this.internalActiveTrace)) {
+      this.selectedTraces.push(this.internalActiveTrace);
     }
 
     if (this.selectedTraces.length > this.MAX_SELECTED_TRACES) {
@@ -297,7 +297,7 @@ export class TimelineComponent implements TimelineComponentDependencyInversion {
 
     this.selectedTracesFormControl.setValue(this.selectedTraces);
   }
-  public wrappedActiveTrace: TraceType|undefined = undefined;
+  public internalActiveTrace: TraceType|undefined = undefined;
 
   @Input() timelineData!: TimelineData;
   @Input() availableTraces: TraceType[] = [];
@@ -404,7 +404,7 @@ export class TimelineComponent implements TimelineComponentDependencyInversion {
   }
 
   isOptionDisabled(trace: TraceType) {
-    if (this.wrappedActiveTrace === trace) {
+    if (this.internalActiveTrace === trace) {
       return true;
     }
 
@@ -440,33 +440,33 @@ export class TimelineComponent implements TimelineComponentDependencyInversion {
   }
 
   hasPrevEntry(): boolean {
-    if (!this.wrappedActiveTrace ||
-      (this.timelineData.getTimelines().get(this.wrappedActiveTrace)?.length ?? 0) === 0) {
+    if (!this.internalActiveTrace ||
+      (this.timelineData.getTimelines().get(this.internalActiveTrace)?.length ?? 0) === 0) {
       return false;
     }
-    return this.timelineData.getPreviousTimestampFor(this.wrappedActiveTrace) !== undefined;
+    return this.timelineData.getPreviousTimestampFor(this.internalActiveTrace) !== undefined;
   }
 
   hasNextEntry(): boolean {
-    if (!this.wrappedActiveTrace ||
-      (this.timelineData.getTimelines().get(this.wrappedActiveTrace)?.length ?? 0) === 0) {
+    if (!this.internalActiveTrace ||
+      (this.timelineData.getTimelines().get(this.internalActiveTrace)?.length ?? 0) === 0) {
       return false;
     }
-    return this.timelineData.getNextTimestampFor(this.wrappedActiveTrace) !== undefined;
+    return this.timelineData.getNextTimestampFor(this.internalActiveTrace) !== undefined;
   }
 
   moveToPreviousEntry() {
-    if (!this.wrappedActiveTrace) {
+    if (!this.internalActiveTrace) {
       return;
     }
-    this.timelineData.moveToPreviousTimestampFor(this.wrappedActiveTrace);
+    this.timelineData.moveToPreviousTimestampFor(this.internalActiveTrace);
   }
 
   moveToNextEntry() {
-    if (!this.wrappedActiveTrace) {
+    if (!this.internalActiveTrace) {
       return;
     }
-    this.timelineData.moveToNextTimestampFor(this.wrappedActiveTrace);
+    this.timelineData.moveToNextTimestampFor(this.internalActiveTrace);
   }
 
   humanElapsedTimeInputChange(event: Event) {
diff --git a/tools/winscope-ng/src/viewers/components/rects/rects.component.ts b/tools/winscope-ng/src/viewers/components/rects/rects.component.ts
index ffc3adae9..5e8009387 100644
--- a/tools/winscope-ng/src/viewers/components/rects/rects.component.ts
+++ b/tools/winscope-ng/src/viewers/components/rects/rects.component.ts
@@ -99,10 +99,10 @@ import {Mapper3D} from "./mapper3d";
         <div class="canvas-labels">
         </div>
       </div>
-      <div *ngIf="wrappedDisplayIds.length > 1"
+      <div *ngIf="internalDisplayIds.length > 1"
            class="display-button-container">
         <button
-            *ngFor="let displayId of wrappedDisplayIds"
+            *ngFor="let displayId of internalDisplayIds"
             color="primary"
             mat-raised-button
             (click)="onDisplayIdChange(displayId)"
@@ -177,27 +177,27 @@ import {Mapper3D} from "./mapper3d";
 export class RectsComponent implements OnInit, OnDestroy {
   @Input() title = "title";
   @Input() set rects(rects: Rectangle[]) {
-    this.wrappedRects = rects;
+    this.internalRects = rects;
     this.drawScene();
   }
 
   @Input() set displayIds(ids: number[]) {
-    this.wrappedDisplayIds = ids;
-    if (!this.wrappedDisplayIds.includes(this.mapper3d.getCurrentDisplayId())) {
-      this.mapper3d.setCurrentDisplayId(this.wrappedDisplayIds[0]);
+    this.internalDisplayIds = ids;
+    if (!this.internalDisplayIds.includes(this.mapper3d.getCurrentDisplayId())) {
+      this.mapper3d.setCurrentDisplayId(this.internalDisplayIds[0]);
       this.drawScene();
     }
   }
 
   @Input() set highlightedItems(ids: string[]) {
-    this.wrappedHighlightedItems = ids.map(id => Number(id));
-    this.mapper3d.setHighlightedRectIds(this.wrappedHighlightedItems);
+    this.internalHighlightedItems = ids.map(id => Number(id));
+    this.mapper3d.setHighlightedRectIds(this.internalHighlightedItems);
     this.drawScene();
   }
 
-  private wrappedRects: Rectangle[] = [];
-  private wrappedDisplayIds: number[] = [];
-  private wrappedHighlightedItems: number[] = [];
+  private internalRects: Rectangle[] = [];
+  private internalDisplayIds: number[] = [];
+  private internalHighlightedItems: number[] = [];
 
   private mapper3d: Mapper3D;
   private canvas?: Canvas;
@@ -222,7 +222,7 @@ export class RectsComponent implements OnInit, OnDestroy {
     this.canvasLabels = canvasContainer.querySelector(".canvas-labels");
     this.canvas = new Canvas(this.canvasRects, this.canvasLabels!);
 
-    this.mapper3d.setCurrentDisplayId(this.wrappedDisplayIds[0] ?? 0);
+    this.mapper3d.setCurrentDisplayId(this.internalDisplayIds[0] ?? 0);
     this.drawScene();
   }
 
@@ -308,7 +308,7 @@ export class RectsComponent implements OnInit, OnDestroy {
     //  (rotation, spacing, ...) we can just update the camera and/or update the mesh positions.
     //  We'd probably need to get rid of the intermediate layer (Scene3D, Rect3D, ... types) and
     //  work directly with three.js's meshes.
-    this.mapper3d.setRects(this.wrappedRects);
+    this.mapper3d.setRects(this.internalRects);
     this.canvas?.draw(this.mapper3d.computeScene());
   }
 

From a8d7d1e2d134b358f4c759e980e5a78e43f9515e Mon Sep 17 00:00:00 2001
From: Kean Mariotti <keanmariotti@google.com>
Date: Wed, 21 Dec 2022 10:05:02 +0000
Subject: [PATCH 2/2] Support panning in rects view

Implement rects view panning through mouse drag and drop.

Fix: b/258605234
Test: npm run build:all && npm run test:all
Change-Id: I0345e5d10d9076f66a2de36e4914b641aecded91
---
 .../src/viewers/components/rects/canvas.ts    | 15 +++++++----
 .../src/viewers/components/rects/mapper3d.ts  | 22 ++++++++++++++--
 .../components/rects/rects.component.ts       | 25 ++++++++++++++++--
 .../src/viewers/components/rects/types3d.ts   | 26 +++++++++++--------
 4 files changed, 68 insertions(+), 20 deletions(-)

diff --git a/tools/winscope-ng/src/viewers/components/rects/canvas.ts b/tools/winscope-ng/src/viewers/components/rects/canvas.ts
index e312ce1e4..adc7eaefc 100644
--- a/tools/winscope-ng/src/viewers/components/rects/canvas.ts
+++ b/tools/winscope-ng/src/viewers/components/rects/canvas.ts
@@ -16,7 +16,6 @@
 import {Rectangle} from "viewers/common/rectangle";
 import * as THREE from "three";
 import {CSS2DObject, CSS2DRenderer} from "three/examples/jsm/renderers/CSS2DRenderer";
-import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
 import {ViewerEvents} from "viewers/common/viewer_events";
 import {Circle3D, ColorType, Label3D, Point3D, Rect3D, Scene3D, Transform3D} from "./types3d";
 
@@ -58,16 +57,22 @@ export class Canvas {
       widthAspectRatioAdjustFactor = 1;
     }
 
+    const cameraWidth = Canvas.TARGET_SCENE_DIAGONAL * widthAspectRatioAdjustFactor;
+    const cameraHeight = Canvas.TARGET_SCENE_DIAGONAL * heightAspectRatioAdjustFactor;
+
+    const panFactorX = scene.camera.panScreenDistance.dx / this.canvasRects.clientWidth;
+    const panFactorY = scene.camera.panScreenDistance.dy / this.canvasRects.clientHeight;
+
     this.scene = new THREE.Scene();
     const scaleFactor = Canvas.TARGET_SCENE_DIAGONAL / scene.boundingBox.diagonal * scene.camera.zoomFactor;
     this.scene.scale.set(scaleFactor, -scaleFactor, scaleFactor);
-    this.scene.translateX(scaleFactor * -scene.boundingBox.center.x);
-    this.scene.translateY(scaleFactor * scene.boundingBox.center.y);
+    this.scene.translateX(scaleFactor * -scene.boundingBox.center.x + cameraWidth * panFactorX);
+    this.scene.translateY(scaleFactor * scene.boundingBox.center.y - cameraHeight * panFactorY);
     this.scene.translateZ(scaleFactor * -scene.boundingBox.center.z);
 
     this.camera = new THREE.OrthographicCamera(
-      -Canvas.TARGET_SCENE_DIAGONAL / 2 * widthAspectRatioAdjustFactor, Canvas.TARGET_SCENE_DIAGONAL / 2 * widthAspectRatioAdjustFactor,
-      Canvas.TARGET_SCENE_DIAGONAL / 2 * heightAspectRatioAdjustFactor, -Canvas.TARGET_SCENE_DIAGONAL / 2 * heightAspectRatioAdjustFactor,
+      - cameraWidth / 2, cameraWidth / 2,
+      cameraHeight / 2, - cameraHeight / 2,
       0, 100,
     );
 
diff --git a/tools/winscope-ng/src/viewers/components/rects/mapper3d.ts b/tools/winscope-ng/src/viewers/components/rects/mapper3d.ts
index 911f786a0..cf79bed36 100644
--- a/tools/winscope-ng/src/viewers/components/rects/mapper3d.ts
+++ b/tools/winscope-ng/src/viewers/components/rects/mapper3d.ts
@@ -15,7 +15,16 @@
  */
 
 import {Rectangle} from "viewers/common/rectangle";
-import {Box3D, ColorType, Label3D, Point3D, Rect3D, Scene3D, Transform3D} from "./types3d";
+import {
+  Box3D,
+  ColorType,
+  Distance2D,
+  Label3D,
+  Point3D,
+  Rect3D,
+  Scene3D,
+  Transform3D
+} from "./types3d";
 
 class Mapper3D {
   private static readonly CAMERA_ROTATION_FACTOR_INIT = 1;
@@ -34,6 +43,7 @@ class Mapper3D {
   private cameraRotationFactor = Mapper3D.CAMERA_ROTATION_FACTOR_INIT;
   private zSpacingFactor = Mapper3D.Z_SPACING_FACTOR_INIT;
   private zoomFactor = Mapper3D.ZOOM_FACTOR_INIT;
+  private panScreenDistance: Distance2D = new Distance2D(0, 0);
   private showOnlyVisibleMode = false; // by default show all
   private showVirtualMode = false; // by default don't show virtual displays
   private currentDisplayId = 0; // default stack id is usually 0
@@ -72,10 +82,17 @@ class Mapper3D {
     this.zoomFactor = Math.max(this.zoomFactor, Mapper3D.ZOOM_FACTOR_MIN);
   }
 
+  addPanScreenDistance(distance: Distance2D) {
+    this.panScreenDistance.dx += distance.dx;
+    this.panScreenDistance.dy += distance.dy;
+  }
+
   resetCamera() {
     this.cameraRotationFactor = Mapper3D.CAMERA_ROTATION_FACTOR_INIT;
     this.zSpacingFactor = Mapper3D.Z_SPACING_FACTOR_INIT;
     this.zoomFactor = Mapper3D.ZOOM_FACTOR_INIT;
+    this.panScreenDistance.dx = 0;
+    this.panScreenDistance.dy = 0;
   }
 
   getShowOnlyVisibleMode(): boolean {
@@ -112,7 +129,8 @@ class Mapper3D {
       boundingBox: boundingBox,
       camera: {
         rotationFactor: this.cameraRotationFactor,
-        zoomFactor: this.zoomFactor
+        zoomFactor: this.zoomFactor,
+        panScreenDistance: this.panScreenDistance,
       },
       rects: rects3d,
       labels: labels3d
diff --git a/tools/winscope-ng/src/viewers/components/rects/rects.component.ts b/tools/winscope-ng/src/viewers/components/rects/rects.component.ts
index 5e8009387..dc2091c3e 100644
--- a/tools/winscope-ng/src/viewers/components/rects/rects.component.ts
+++ b/tools/winscope-ng/src/viewers/components/rects/rects.component.ts
@@ -13,11 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {Component, Input, OnDestroy, Inject, ElementRef, SimpleChanges, OnInit, HostListener} from "@angular/core";
-import {Rectangle} from "viewers/common/rectangle";
+import {Component, Input, OnDestroy, Inject, ElementRef, OnInit, HostListener} from "@angular/core";
+import {Rectangle, Point} from "viewers/common/rectangle";
 import {Canvas} from "./canvas";
 import {ViewerEvents} from "viewers/common/viewer_events";
 import {Mapper3D} from "./mapper3d";
+import {Distance2D} from "./types3d";
 
 @Component({
   selector: "rects-view",
@@ -204,6 +205,8 @@ export class RectsComponent implements OnInit, OnDestroy {
   private resizeObserver: ResizeObserver;
   private canvasRects?: HTMLCanvasElement;
   private canvasLabels?: HTMLElement;
+  private mouseMoveListener = (event: MouseEvent) => this.onMouseMove(event);
+  private mouseUpListener = (event: MouseEvent) => this.onMouseUp(event);
 
   constructor(
     @Inject(ElementRef) private elementRef: ElementRef,
@@ -222,6 +225,8 @@ export class RectsComponent implements OnInit, OnDestroy {
     this.canvasLabels = canvasContainer.querySelector(".canvas-labels");
     this.canvas = new Canvas(this.canvasRects, this.canvasLabels!);
 
+    this.canvasRects.addEventListener("mousedown", event => this.onCanvasMouseDown(event));
+
     this.mapper3d.setCurrentDisplayId(this.internalDisplayIds[0] ?? 0);
     this.drawScene();
   }
@@ -254,6 +259,22 @@ export class RectsComponent implements OnInit, OnDestroy {
     }
   }
 
+  public onCanvasMouseDown(event: MouseEvent) {
+    document.addEventListener("mousemove", this.mouseMoveListener);
+    document.addEventListener("mouseup", this.mouseUpListener);
+  }
+
+  public onMouseMove(event: MouseEvent) {
+    const distance = new Distance2D(event.movementX, event.movementY);
+    this.mapper3d.addPanScreenDistance(distance);
+    this.drawScene();
+  }
+
+  public onMouseUp(event: MouseEvent) {
+    document.removeEventListener("mousemove", this.mouseMoveListener);
+    document.removeEventListener("mouseup", this.mouseUpListener);
+  }
+
   public onZoomInClick() {
     this.doZoomIn();
   }
diff --git a/tools/winscope-ng/src/viewers/components/rects/types3d.ts b/tools/winscope-ng/src/viewers/components/rects/types3d.ts
index 14cdabd03..284917fb3 100644
--- a/tools/winscope-ng/src/viewers/components/rects/types3d.ts
+++ b/tools/winscope-ng/src/viewers/components/rects/types3d.ts
@@ -14,13 +14,18 @@
  * limitations under the License.
  */
 
-enum ColorType {
+export enum ColorType {
   VISIBLE,
   NOT_VISIBLE,
   HIGHLIGHTED
 }
 
-interface Box3D {
+export class Distance2D{
+  constructor(public dx: number, public dy: number) {
+  }
+}
+
+export interface Box3D {
   width: number,
   height: number,
   depth: number,
@@ -28,7 +33,7 @@ interface Box3D {
   diagonal: number;
 }
 
-interface Rect3D {
+export interface Rect3D {
   id: number;
   center: Point3D;
   width: number;
@@ -39,7 +44,7 @@ interface Rect3D {
   transform: Transform3D;
 }
 
-interface Transform3D {
+export interface Transform3D {
   dsdx: number;
   dsdy: number;
   tx: number;
@@ -48,13 +53,13 @@ interface Transform3D {
   ty: number;
 }
 
-interface Point3D {
+export interface Point3D {
   x: number;
   y: number;
   z: number;
 }
 
-interface Label3D {
+export interface Label3D {
   circle: Circle3D;
   linePoints: Point3D[];
   textCenter: Point3D;
@@ -63,21 +68,20 @@ interface Label3D {
   rectId: number;
 }
 
-interface Circle3D {
+export interface Circle3D {
   radius: number;
   center: Point3D;
 }
 
-interface Scene3D {
+export interface Scene3D {
   boundingBox: Box3D;
   camera: Camera;
   rects: Rect3D[];
   labels: Label3D[];
 }
 
-interface Camera {
+export interface Camera {
   rotationFactor: number;
   zoomFactor: number;
+  panScreenDistance: Distance2D;
 }
-
-export {Box3D, Circle3D, ColorType, Label3D, Point3D, Rect3D, Scene3D, Transform3D};