HudCanvas: handle select-nothing

This commit is contained in:
Rob Watson 2021-12-12 11:04:23 +01:00
parent 50e68f4792
commit 545ac72faa
3 changed files with 24 additions and 4 deletions

View File

@ -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);
};

View File

@ -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}

View File

@ -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}