Overview: render viewport on first render

This commit is contained in:
Rob Watson 2021-11-17 20:17:26 +01:00
parent 542080e400
commit b864835f40
2 changed files with 4 additions and 6 deletions

View File

@ -150,6 +150,7 @@ function App(): JSX.Element {
offsetPixels={offsetPixels} offsetPixels={offsetPixels}
height={80} height={80}
position={position} position={position}
selection={viewport}
onSelectionStart={(x1: number) => { onSelectionStart={(x1: number) => {
console.log('onSelectionStart', x1); console.log('onSelectionStart', x1);
}} }}

View File

@ -12,6 +12,7 @@ interface Props {
height: number; height: number;
offsetPixels: number; offsetPixels: number;
position: number; position: number;
selection: Frames;
onSelectionStart: (x1: number) => void; onSelectionStart: (x1: number) => void;
onSelectionChange: (selection: Frames) => void; onSelectionChange: (selection: Frames) => void;
} }
@ -33,13 +34,13 @@ export const Overview: React.FC<Props> = ({
height, height,
offsetPixels, offsetPixels,
position, position,
selection,
onSelectionStart, onSelectionStart,
onSelectionChange, onSelectionChange,
}: Props) => { }: Props) => {
const hudCanvasRef = useRef<HTMLCanvasElement>(null); const hudCanvasRef = useRef<HTMLCanvasElement>(null);
const [peaks, setPeaks] = useState<Observable<number[]>>(from([])); const [peaks, setPeaks] = useState<Observable<number[]>>(from([]));
const [mode, setMode] = useState(Mode.Normal); const [mode, setMode] = useState(Mode.Normal);
const [selection, setSelection] = useState({ ...emptySelection });
const [newSelection, setNewSelection] = useState({ ...emptySelection }); const [newSelection, setNewSelection] = useState({ ...emptySelection });
const [dragStart, setDragStart] = useState(0); const [dragStart, setDragStart] = useState(0);
@ -142,10 +143,6 @@ export const Overview: React.FC<Props> = ({
onSelectionStart(newSelection.start); onSelectionStart(newSelection.start);
}, [newSelection]); }, [newSelection]);
useEffect(() => {
onSelectionChange({ ...selection });
}, [selection]);
// handlers // handlers
const handleMouseDown = (evt: MouseEvent<HTMLCanvasElement>) => { const handleMouseDown = (evt: MouseEvent<HTMLCanvasElement>) => {
@ -207,7 +204,7 @@ export const Overview: React.FC<Props> = ({
} }
setMode(Mode.Normal); setMode(Mode.Normal);
setSelection(newSelection); onSelectionChange({ ...newSelection });
}; };
// render component // render component