diff --git a/README.md b/README.md index 0c465e8..cc01d14 100644 --- a/README.md +++ b/README.md @@ -32,17 +32,13 @@ Online whiteboard app that makes drawing, collaboration and sharing easy. ## How to use -### [DESKTOP]: +### [DESKTOP, MOBILE]: -- Click and **move** mouse for drawing picture +- Click (tap) and **move** mouse for drawing picture - Choose brush color and width on toolbar block - Click **Clear** button to delete all pictures from board - Click **Share** button to generate link that you can share to friends and draw pictures together -### [MOBILE]: - -**WILL BE SOON, FUTURE FEATURE** - ## About the project. ### Frontend @@ -66,7 +62,7 @@ Online whiteboard app that makes drawing, collaboration and sharing easy. ### DevOps -- I used Docker to build a microservice application +- I used `Docker` to build a microservice application - List of microservices you can see in file `docker-compose.yml` ## Project setup diff --git a/frontend/components/Board.js b/frontend/components/Board.js index 65ee028..bce03ac 100644 --- a/frontend/components/Board.js +++ b/frontend/components/Board.js @@ -12,6 +12,7 @@ export const Board = props => { const canvas_ref = useRef(null); function createNewPicEvent(e) { + // put to store empty array as "width.color": [..., []] for adding new points in future props.createNewPic({ width: currentBrushWidth, @@ -19,13 +20,13 @@ export const Board = props => { }) } - function addPointToLastPicEvent(e) { - if (e.buttons !== 1) return; - + function addPointToLastPicEvent(e) { + if (e.buttons !== 1 && e.touches === undefined) return; + // put to store one point as "width.color": [[...], [..., {x, y}]] props.addPointToLastPic({ - x: e.clientX - e.target.offsetLeft, - y: e.clientY - e.target.offsetTop + x: (e.type == 'mousemove') ? (e.clientX - e.target.offsetLeft) : (e.touches[0].clientX - e.target.offsetLeft), + y: (e.type == 'mousemove') ? (e.clientY - e.target.offsetTop) : (e.touches[0].clientY - e.target.offsetTop), }, { width: currentBrushWidth, color: currentBrushColor, @@ -35,8 +36,6 @@ export const Board = props => { function saveLastPic(e) { if (!props.websocket || !props.url) return; - console.log('event mouseup') - let key = __transformBrushToKey({ width: currentBrushWidth, color: currentBrushColor @@ -44,8 +43,6 @@ export const Board = props => { let lastPic = store_points[key][ store_points[key].length - 1 ] - console.log(lastPic) - fetchApi('/board', 'PUT', { board_url: props.url, data_delta: JSON.stringify(lastPic), @@ -115,7 +112,7 @@ export const Board = props => { return (