HudCanvas: handle select-nothing

frontend/src/HudCanvas.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, MouseEvent } from 'react';
+import { useState, useEffect, useRef, useCallback, MouseEvent } from 'react';
 
 interface Styles {
   borderLineWidth: number;
@@ -11,6 +11,7 @@ interface Props {
   width: number;
   height: number;
   zIndex: number;
+  emptySelectionAction: EmptySelectionAction;
   styles: Styles;
   position: number | null;
   selection: Selection;
@@ -32,6 +33,11 @@ enum HoverState {
   OverSelection,
 }
 
+export enum EmptySelectionAction {
+  SelectNothing,
+  SelectPrevious,
+}
+
 export interface Selection {
   start: number;
   end: number;
@@ -43,6 +49,7 @@ export const HudCanvas: React.FC<Props> = ({
   width,
   height,
   zIndex,
+  emptySelectionAction,
   styles: {
     borderLineWidth,
     borderStrokeStyle,
@@ -271,13 +278,24 @@ export const HudCanvas: React.FC<Props> = ({
     setCursor('auto');
 
     if (newSelection.start == newSelection.end) {
-      setNewSelection({ start: 0, end: 0 });
+      handleEmptySelectionAction();
       return;
     }
 
     onSelectionChange({ ...newSelection });
   };
 
+  const handleEmptySelectionAction = useCallback(() => {
+    switch (emptySelectionAction) {
+      case EmptySelectionAction.SelectPrevious:
+        setNewSelection({ ...selection });
+        break;
+      case EmptySelectionAction.SelectNothing:
+        onSelectionChange({ start: 0, end: 0 });
+        break;
+    }
+  }, [selection]);
+
   const handleMouseLeave = (_evt: MouseEvent<HTMLCanvasElement>) => {
     setHoverState(HoverState.Normal);
   };

frontend/src/Overview.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { MediaSet } from './generated/media_set';
 import { Frames, VideoPosition } from './App';
 import { WaveformCanvas } from './WaveformCanvas';
-import { HudCanvas } from './HudCanvas';
+import { HudCanvas, EmptySelectionAction } from './HudCanvas';
 import { Observable } from 'rxjs';
 
 export interface Selection {
@@ -103,6 +103,7 @@ export const Overview: React.FC<Props> = ({
           width={CanvasLogicalWidth}
           height={CanvasLogicalHeight}
           zIndex={1}
+          emptySelectionAction={EmptySelectionAction.SelectPrevious}
           styles={hudStyles}
           position={positionPixels}
           selection={selectedPixels}

frontend/src/Waveform.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState, useCallback } from 'react';
 import { Frames, VideoPosition, newRPC } from './App';
 import { MediaSetServiceClientImpl, MediaSet } from './generated/media_set';
 import { WaveformCanvas } from './WaveformCanvas';
-import { Selection, HudCanvas } from './HudCanvas';
+import { Selection, HudCanvas, EmptySelectionAction } from './HudCanvas';
 import { from, Observable } from 'rxjs';
 import { bufferCount } from 'rxjs/operators';
 
@@ -167,6 +167,7 @@ export const Waveform: React.FC<Props> = ({
           width={CanvasLogicalWidth}
           height={CanvasLogicalHeight}
           zIndex={1}
+          emptySelectionAction={EmptySelectionAction.SelectNothing}
           styles={hudStyles}
           position={positionPixels}
           selection={selectedPixels}