Overnap

Merge branch 'feature/canvas' into feature/room

import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Vector } from './types';
// 참고 : https://basketdeveloper.tistory.com/79
export const Canvas: React.FC = () => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const [mousePosition, setMousePosition] = useState<Vector>({ x:0, y:0 });
const [isPainting, setIsPainting] = useState(false);
const getCoordinates = useCallback((event: MouseEvent): Vector | undefined => {
if (!canvasRef.current) {
return;
} else {
return {
x: event.pageX - canvasRef.current.offsetLeft,
y: event.pageY - canvasRef.current.offsetTop
};
}
}, []);
const drawLine = useCallback((prev: Vector, current: Vector) => {
if (canvasRef.current) {
const context = canvasRef.current!.getContext('2d');
if (context) {
context.strokeStyle = 'black';
context.lineJoin = 'round';
context.lineWidth = 5;
context.beginPath();
context.moveTo(prev.x, prev.y);
context.lineTo(current.x, current.y);
context.closePath();
context.stroke();
}
}
}, []);
const startPaint = useCallback((event: MouseEvent) => {
const coordinates = getCoordinates(event);
if (coordinates) {
setIsPainting(true);
setMousePosition(coordinates);
}
}, []);
const paint = useCallback(
(event: MouseEvent) => {
// 드래그 방지
event.preventDefault();
event.stopPropagation();
if (isPainting) {
const newMousePosition = getCoordinates(event);
if (mousePosition && newMousePosition) {
drawLine(mousePosition, newMousePosition);
setMousePosition(newMousePosition);
}
}
},
[isPainting, mousePosition]
);
const exitPaint = useCallback(() => {
setIsPainting(false);
}, []);
useEffect(() => {
if (canvasRef.current) {
const canvas: HTMLCanvasElement = canvasRef.current;
canvas.addEventListener('mousedown', startPaint);
canvas.addEventListener('mousemove', paint);
canvas.addEventListener('mouseup', exitPaint);
canvas.addEventListener('mouseleave', exitPaint);
return () => {
canvas.removeEventListener('mousedown', startPaint);
canvas.removeEventListener('mousemove', paint);
canvas.removeEventListener('mouseup', exitPaint);
canvas.removeEventListener('mouseleave', exitPaint);
};
}
}, [startPaint, paint, exitPaint]);
return (
<div className='mx-3 px-2 py-1 rounded shadow'>
<canvas ref={canvasRef} width='512' height='384' />
</div>
);
}
\ No newline at end of file
......@@ -23,4 +23,9 @@ export interface UpdateRoomUser {
export interface ChatData {
sender: string;
message: string;
}
\ No newline at end of file
}
export interface Vector {
x: number;
y: number;
}
......
import React, { useContext } from 'react';
import { useLocation } from 'react-router';
import { Main } from '../components/common/Main';
import { Canvas } from '../components/room/Canvas';
import { Chat } from '../components/room/Chat';
import { RoomInfo } from '../components/room/RoomInfo';
import SocketContext from '../contexts/SocketContext';
......@@ -9,7 +10,8 @@ export const Room: React.FC = () => {
return (
<Main>
<RoomInfo />
<div className='w-full'>
<div className='w-full flex'>
<Canvas />
<Chat />
</div>
</Main>
......