HudCanvas: draw hover position
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Rob Watson 2022-01-17 18:58:50 +01:00
parent 9ae4335b19
commit 4f443af8fa
3 changed files with 24 additions and 3 deletions

View File

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

View File

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

View File

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