Add timeline grabbing interaction (#479)

Author: kyasbal

web/src/app/timeline/components/timeline-frame.component.html

@@ -17,6 +17,7 @@
 <div
   khiCaptureShiftKey
   class="container"
+  [class.is-grabbing-and-moving]="isGrabbingAndMoving()"
   [style.--header-height.px]="HEADER_HEIGHT"
   [style.--gutter-width.px]="GUTTER_WIDTH"
   [style.--index-pane-width.px]="indexAreaWidthPixels()"
@@ -28,6 +29,9 @@
   [style.--viewport-height.px]="viewportHeight()"
   [style.--viewport-width.px]="viewportWidth()"
   (shiftStatusChange)="shiftStatus.set($event)"
+  (mousedown)="handleMouseDown($event)"
+  (mouseup)="handleMouseUp()"
+  (mouseleave)="handleMouseLeave()"
 >
   <div class="virtual-scroll-container" #container>
     <div class="corner">

web/src/app/timeline/components/timeline-frame.component.scss

@@ -102,6 +102,13 @@ $z-index-resizer: 1000;
   grid-template-areas: "fill";
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
+  &.is-grabbing-and-moving {
+    user-select: none;
+    cursor: grab;
+    .virtual-scroll-container .chart {
+      pointer-events: none;
+    }
+  }
 }
 
 .virtual-scroll-container {

web/src/app/timeline/components/timeline-frame.component.ts

@@ -593,6 +593,25 @@ export class TimelineFrameComponent implements AfterViewInit {
     );
   });
 
+  /**
+   * Whether the user is currently grabbing the chart or not.
+   */
+  private readonly isGrabbing = signal(false);
+
+  /**
+   * Whether the user is currently grabbing and moving the chart or not.
+   * This is needed in addition to isGrabbing not to prevent click event by applying pointer-events: none to the chart area just by mouse down event.
+   */
+  protected readonly isGrabbingAndMoving = signal(false);
+
+  /**
+   * The position of the last mouse down event.
+   */
+  private readonly lastMouseDownPosition: { x: number; y: number } = {
+    x: 0,
+    y: 0,
+  };
+
   /**
    * The current action that is being performed.
    * This is defined not to move and scale at the same frame.
@@ -720,6 +739,30 @@ export class TimelineFrameComponent implements AfterViewInit {
     outputRef.emit(e);
   }
 
+  handleMouseDown(e: MouseEvent) {
+    const indexArea = this.indexSplitArea()?.nativeElement;
+    if (!indexArea) {
+      return;
+    }
+    const indexAreaRect = indexArea.getBoundingClientRect();
+    const isChartArea = e.clientX > indexAreaRect.right + this.GUTTER_WIDTH;
+    if (isChartArea) {
+      this.isGrabbing.set(true);
+      this.lastMouseDownPosition.x = e.clientX;
+      this.lastMouseDownPosition.y = e.clientY;
+    }
+  }
+
+  handleMouseUp() {
+    this.isGrabbing.set(false);
+    this.isGrabbingAndMoving.set(false);
+  }
+
+  handleMouseLeave() {
+    this.isGrabbing.set(false);
+    this.isGrabbingAndMoving.set(false);
+  }
+
   ngAfterViewInit(): void {
     // Run outside of Angular zone to avoid unnecessary change detection by size changing or scrolls..
     // Frequent scroll events or resize events can trigger Angular's change detection if processed within the zone, leading to performance issues.
@@ -786,11 +829,30 @@ export class TimelineFrameComponent implements AfterViewInit {
       container.nativeElement.addEventListener('scroll', onContainerScroll, {
         passive: true,
       });
+
       const onScrollEnd = () => {
         this.horizontalScrollSourceOfTruth = 'property';
       };
       container.nativeElement.addEventListener('scrollend', onScrollEnd);
 
+      const onMouseMove = (e: MouseEvent) => {
+        if (!this.isGrabbing()) {
+          return;
+        }
+        const dx = e.clientX - this.lastMouseDownPosition.x;
+        const dy = e.clientY - this.lastMouseDownPosition.y;
+        this.lastMouseDownPosition.x = e.clientX;
+        this.lastMouseDownPosition.y = e.clientY;
+        this.isGrabbingAndMoving.set(true);
+        this.renderingLoopManager.registerOnceBeforeRenderHandler(() => {
+          container.nativeElement.scrollBy({
+            left: -dx,
+            top: -dy,
+          });
+        });
+      };
+      window.addEventListener('mousemove', onMouseMove, { passive: true });
+
       this.destroyRef.onDestroy(() => {
         resizeObserver.disconnect();
         containerResizeObserver.disconnect();
@@ -800,6 +862,7 @@ export class TimelineFrameComponent implements AfterViewInit {
           onContainerScroll,
         );
         container.nativeElement.removeEventListener('scrollend', onScrollEnd);
+        window.removeEventListener('mousemove', onMouseMove);
       });
     });
 

web/src/app/timeline/timeline-smart.component.ts

@@ -229,10 +229,6 @@ export class TimelineSmartComponent {
       if (!timeline) {
         return null;
       }
-      const log = this.selectedLog();
-      if (!log) {
-        return null;
-      }
       const lastClickedTimeMs = this.lastClickedTimeMs();
 
       const maxT = this.HOVER_VIEW_SELECTABLE_RANGE_IN_PX / this.pixelsPerMs();