Readme.md

Author: RugvedB

README.md

@@ -1,70 +1,70 @@
-# Getting Started with Create React App
+<p align="center"
+<img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" width = 200px>
+</p>
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+<h1 align = 'center'> LetsDraw
+</h1>
 
-## Available Scripts
+&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[![](https://img.shields.io/badge/Made_with-ReactJS-blue?style=for-the-badge&logo=react)](https://reactjs.org/docs/getting-started.html)&emsp;[![](https://img.shields.io/badge/IDE-Visual_Studio_Code-blue?style=for-the-badge&logo=visual-studio-code)](https://code.visualstudio.com/ "Visual Studio Code")
 
-In the project directory, you can run:
 
-### `npm start`
+<h2> About </h2>
+<p>
+In this project, basic functionality of simple online whiteboard tool are implemented. In my opinion, this project has by far been the best project to learn javascript.
+</p>
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+-----------------------------------
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+### Demo
 
-### `npm test`
+<p align="center">
+<img src ="./assets/demo.gif" width = 500px>
+</p>
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `npm run build`
+-----------------------------------
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+### 🚀 Features
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+<p align="left">
+   <ul>
+      <li>Draw, drag, resize Rectangle</li>
+      <li>Draw, drag, resize Line</li>
+      <li>Draw, drag Free hand pencil drawing</li>
+      <li>Maintain drawing history with undo-redo feature</li>
+   </ul>
+</p>
 
-### `npm run eject`
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+-----------------------------------
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### :guide_dog: Installation Guide
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+A step by step series of examples that tell you how to get a development env running
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+In your cmd:
 
-## Learn More
+```
+git clone https://github.com/RugvedB/LetsDraw/
+```
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+Then,
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+```
+cd LetsDraw
+npm install
+npm start
+```
 
-### Code Splitting
+You are done with the setup now!
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
 
-### Analyzing the Bundle Size
+### :page_with_curl: Acknowledgements & References
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+- Redhwan Nacef - https://www.youtube.com/c/RedhwanNacef
+- Javascript - https://developer.mozilla.org/en-US/docs/Web/JavaScript
 
-### Making a Progressive Web App
+-----------------------------------
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+<h3 align="center"><b>Developed with :heart: <a href="https://github.com/RugvedB">Rugved</a> </b></h1>

assets/demo.gif

@@ -4,7 +4,8 @@ import { getStroke } from 'perfect-freehand'
 
 const generator = rough.generator()
 
-const elementType = {
+const elementType = { // (tool)
+  selection: "selection", 
   line: "line",
   rectangle: "rectangle",
   pencil: "pencil",
@@ -17,12 +18,13 @@ const positionType = {
   tr: "tr",
   bl: "bl",
   br: "br",
+  start: "start",
+  end: "end"
 }
 
 const actionType = {
   writing: "writing",
   drawing: "drawing",
-  selection: "selection",
   moving: "moving",
   resizing: "resizing",
   deleteIt: "deleteIt"
@@ -71,7 +73,6 @@ const positionWithinElement = (x, y, element) => {
 
   switch(type) {
     case elementType.rectangle:
-      console.log("rectangle for selection")
       const minX = Math.min(x1, x2)
       const maxX = Math.max(x1, x2)
       const minY = Math.min(y1, y2)
@@ -85,10 +86,9 @@ const positionWithinElement = (x, y, element) => {
 
       return topLeft || topRight || bottomLeft || bottomRight || insideRect
     case elementType.line:
-      console.log("line for selection")
       const insideLine = onLine(x1, y1, x2, y2, x, y, 5)
-      const start = nearPoint(x, y, x1, y1, "start")
-      const end = nearPoint(x, y, x2, y2, "end")
+      const start = nearPoint(x, y, x1, y1, positionType.start)
+      const end = nearPoint(x, y, x2, y2, positionType.end)
       return start || end || insideLine
     case elementType.pencil:
       // Pencil drawing is basically group of points. Now there is a straight line between each of these points.
@@ -141,13 +141,13 @@ function adjustElementCoordinates(element){
 
 function cursorForPosition(position){
   switch(position) {
-    case "tl":
-    case "br":
-    case "start":
-    case "end":
+    case positionType.tl:
+    case positionType.br:
+    case positionType.start:
+    case positionType.end:
       return "nwse-resize"
-    case "tr":
-    case "bl":
+    case positionType.tr:
+    case positionType.bl:
       return "nesw-resize"
     default:
       return "move"
@@ -157,15 +157,15 @@ function cursorForPosition(position){
 function resizedCoordinates(clientX, clientY, position, coordinates) {
   const { x1, y1, x2, y2 } = coordinates
   switch(position) {
-    case "tl":
-    case "start":
+    case positionType.tl:
+    case positionType.start:
       return { x1: clientX, y1: clientY, x2, y2 }
-    case "tr":
+    case positionType.tr:
       return { x1, y1: clientY, x2: clientX, y2 }
-    case "bl":
+    case positionType.bl:
       return { x1: clientX, y1, x2, y2: clientY }
-    case "br":
-    case "end":
+    case positionType.br:
+    case positionType.end:
       return { x1, y1, x2: clientX, y2: clientY }
     default:
       return null
@@ -306,12 +306,12 @@ function App() {
 
     const { clientX, clientY } = event
 
-    if(tool === "selection"){
+    if(tool === elementType.selection){
       const element = getElementAtPosition(clientX, clientY, elements)
 
       if(element) {
 
-        if(element.type === "pencil") {
+        if(element.type === elementType.pencil) {
           const xoffsets = element.points.map(point => clientX - point.x)
           const yoffsets = element.points.map(point => clientY - point.y)
           setSelectedElement({...element, xoffsets, yoffsets})
@@ -338,14 +338,12 @@ function App() {
       const id = elements.length
       // First entry will be like element at its place...like a dot
       const element = createElement(id, clientX, clientY, clientX, clientY, tool)
-      console.log("new element created")
-      console.log(element) 
       setElements(prevState => [...prevState, element])
       setAction(tool === elementType.text ? actionType.writing : actionType.drawing)
       setSelectedElement(element)
 
     }
-    else if(tool === "deleteIt"){
+    else if(tool === actionType.deleteIt){
       const element = getElementAtPosition(clientX, clientY, elements)
       if(element){
         setElements(prevState => prevState.filter((ele) => element.id !== ele.id))
@@ -385,7 +383,7 @@ function App() {
   const handleMouseMove = (event) => {
     const { clientX, clientY } = event
 
-    if(tool === actionType.selection){
+    if(tool === elementType.selection){
       const element = getElementAtPosition(clientX, clientY, elements)
       event.target.style.cursor = element ? cursorForPosition(element.position) : "default"
     }