HudCanvas: draw hover position
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
9ae4335b19
commit
4f443af8fa
|
@ -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 (
|
||||
|
|
|
@ -73,6 +73,7 @@ export const Overview: React.FC<Props> = ({
|
|||
borderStrokeStyle: 'red',
|
||||
positionLineWidth: 4,
|
||||
positionStrokeStyle: 'red',
|
||||
hoverPositionStrokeStyle: 'transparent',
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
@ -120,6 +120,7 @@ export const Waveform: React.FC<Props> = ({
|
|||
borderStrokeStyle: 'transparent',
|
||||
positionLineWidth: 6,
|
||||
positionStrokeStyle: 'red',
|
||||
hoverPositionStrokeStyle: '#666666',
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
Loading…
Reference in New Issue