ίʔ
υͷߏ
export default function App() {
// ͻͨ͢Β useState()
const canvasRef = useRef < HTMLCanvasElement > null;
useEffect(() => {
// ॳظඳը࣌ॲཧ
}, []);
useEffect(() => {
// ԻූՃ࣌ͷॲཧ
}, [notes]);
useEffect(() => {
// εΫϩʔϧҐஔมߋ࣌ͷॲཧ
}, [scrollLeft, scrollTop]);
const onDragHorizontalScrollBarKnob = useCallback((ev: React.MouseEvent) => {
// ਫฏεΫϩʔϧόʔυϥοά࣌ͷϋϯυϦϯά
}, [originXY, mediator]);
const onDragVerticalScrollBarKnob = useCallback((ev: React.MouseEvent) => {
// ਨεΫϩʔϧόʔυϥοά࣌ͷϋϯυϦϯά
}, [originXY, mediator]);
const onDragScreen = useCallback((ev: React.MouseEvent) => {
// Canvasυϥοά࣌ͷૢ࡞ʢԻූͷมߋʣ
}, [scrollBarCoord, currentUuid, originXY, notes]);
const onMouseDown = useCallback((ev: React.MouseEvent) => {
// CanvasͰͷmousedownϋϯυϦϯά
}, [
currentUuid,
originXY,
notes,
scrollBarCoord,
isDraggingHorizontalScrollBarKnob,
isDraggingVerticalScrollBarKnob
]);
const onMouseMove = useCallback((ev: React.MouseEvent) => {
// canvasͰͷmousemoveϋϯυϦϯά
}, [
currentUuid,
originXY,
notes,
isDraggingHorizontalScrollBarKnob,
isDraggingVerticalScrollBarKnob
]);
return (
onMouseDown(ev)}
onMouseMove={ev => onMouseMove(ev)}
ref={canvasRef}
width="600"
height="400"
/>
);
}