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;
|
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 (
|
||||||
|
|
|
@ -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 (
|
||||||
|
|
|
@ -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 (
|
||||||
|
|
Loading…
Reference in New Issue