38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import { useEffect } from "react";
|
|
import type { SightingType } from "../types/types";
|
|
import { drawRects } from "../utils/utils";
|
|
|
|
type Mode = 0 | 1 | 2;
|
|
|
|
export function useOverviewOverlay(
|
|
selected: SightingType | null | undefined,
|
|
overlayMode: Mode,
|
|
imgRef: React.RefObject<HTMLImageElement | null>,
|
|
canvasRef: React.RefObject<HTMLCanvasElement | null>
|
|
) {
|
|
useEffect(() => {
|
|
const img = imgRef?.current;
|
|
const cvs = canvasRef?.current;
|
|
if (!img || !cvs) return;
|
|
|
|
const ctx = cvs.getContext("2d");
|
|
if (!ctx) return;
|
|
|
|
// clear
|
|
ctx.clearRect(0, 0, cvs.width, cvs.height);
|
|
|
|
if (!selected || overlayMode === 0) return;
|
|
|
|
if (overlayMode === 1 && selected.overviewPlateRect) {
|
|
drawRects(cvs, img, [selected.overviewPlateRect], "chartreuse");
|
|
} else if (overlayMode === 2) {
|
|
const rects = selected.plateTrack ?? [];
|
|
if (rects.length) drawRects(cvs, img, rects, "yellow");
|
|
if (selected.overviewPlateRect) {
|
|
drawRects(cvs, img, [selected.overviewPlateRect], "chartreuse");
|
|
}
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [selected?.ref, overlayMode, imgRef?.current?.src]);
|
|
}
|