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 (
- +
) diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js index 0151651..de0ccfb 100644 --- a/frontend/pages/_app.js +++ b/frontend/pages/_app.js @@ -1,5 +1,5 @@ import '../styles/globals.css' -import { createStore, applyMiddleware } from 'redux'; +import { createStore } from 'redux'; import { rootReducer } from '../store/reducers'; import { Provider } from 'react-redux'; import { composeWithDevTools } from 'redux-devtools-extension'; diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css index e30faad..cc04b3b 100644 --- a/frontend/styles/globals.css +++ b/frontend/styles/globals.css @@ -1,5 +1,9 @@ html, body { + position: fixed; + height: 100%; + overflow: hidden; + width: 100%; padding: 0; margin: 0; font-size: 18px;