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;
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 (

View File

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

View File

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