HudCanvas: draw hover position

frontend/src/HudCanvas.tsx

@@ -5,6 +5,7 @@ interface Styles {
   borderStrokeStyle: string;
   positionLineWidth: number;
   positionStrokeStyle: string;
+  hoverPositionStrokeStyle: string;
 }
 
 interface Props {
@@ -53,6 +54,7 @@ export const HudCanvas: React.FC<Props> = ({
     borderStrokeStyle,
     positionLineWidth,
     positionStrokeStyle,
+    hoverPositionStrokeStyle,
   },
   position,
   selection,
@@ -62,6 +64,7 @@ export const HudCanvas: React.FC<Props> = ({
   const [newSelection, setNewSelection] = useState({
     ...emptySelection,
   });
+  const [hoverPosition, setHoverPosition] = useState<number | null>(null);
   const [mode, setMode] = useState(Mode.Normal);
   const [hoverState, setHoverState] = useState(HoverState.Normal);
   const [cursor, setCursor] = useState('cursor-auto');
@@ -126,6 +129,20 @@ export const HudCanvas: React.FC<Props> = ({
       ctx.fill();
       ctx.stroke();
 
+      // draw hover position
+      if (
+        hoverPosition != null &&
+        (hoverPosition < currentSelection.start ||
+          hoverPosition > currentSelection.end)
+      ) {
+        ctx.beginPath();
+        ctx.strokeStyle = hoverPositionStrokeStyle;
+        ctx.lineWidth = 2;
+        ctx.moveTo(hoverPosition, 0);
+        ctx.lineTo(hoverPosition, canvas.height);
+        ctx.stroke();
+      }
+
       // draw position marker
 
       if (position == null) {
@@ -140,7 +157,7 @@ export const HudCanvas: React.FC<Props> = ({
       ctx.lineTo(position, canvas.height);
       ctx.stroke();
     });
-  }, [selection, newSelection, position]);
+  }, [selection, newSelection, position, hoverPosition]);
 
   // handlers
 
@@ -191,7 +208,7 @@ export const HudCanvas: React.FC<Props> = ({
       moveOffsetX.current = x;
     } else if (isHoveringSelection(x)) {
       setMode(Mode.Dragging);
-      setCursor('cursor-pointer');
+      setCursor('cursor-move');
       moveOffsetX.current = x;
     } else {
       setMode(Mode.Selecting);
@@ -203,6 +220,7 @@ export const HudCanvas: React.FC<Props> = ({
 
   const handleMouseMove = (evt: MouseEvent<HTMLCanvasElement>) => {
     const x = getCanvasX(evt);
+    setHoverPosition(x);
 
     switch (mode) {
       case Mode.Normal: {
@@ -214,7 +232,7 @@ export const HudCanvas: React.FC<Props> = ({
           setCursor('cursor-col-resize');
         } else if (isHoveringSelection(x)) {
           setHoverState(HoverState.OverSelection);
-          setCursor('cursor-pointer');
+          setCursor('cursor-move');
         } else {
           setCursor('cursor-auto');
         }
@@ -299,6 +317,7 @@ export const HudCanvas: React.FC<Props> = ({
 
   const handleMouseLeave = (_evt: MouseEvent<HTMLCanvasElement>) => {
     setHoverState(HoverState.Normal);
+    setHoverPosition(0);
   };
 
   return (

frontend/src/Overview.tsx

@@ -73,6 +73,7 @@ export const Overview: React.FC<Props> = ({
     borderStrokeStyle: 'red',
     positionLineWidth: 4,
     positionStrokeStyle: 'red',
+    hoverPositionStrokeStyle: 'transparent',
   };
 
   return (

frontend/src/Waveform.tsx

@@ -120,6 +120,7 @@ export const Waveform: React.FC<Props> = ({
     borderStrokeStyle: 'transparent',
     positionLineWidth: 6,
     positionStrokeStyle: 'red',
+    hoverPositionStrokeStyle: '#666666',
   };
 
   return (