Rects Implemented

src/App.js

@@ -11,7 +11,9 @@ let lastPositions = []
 let strokeWidth = 5
 let lastMouse = 0
 let eraserColor = "rgb(255, 255, 255)"
-let lastStrokeWidthPencil = 5, lastStrokeWidthEraser = 5
+let lastStrokeWidthPencil = 5, lastStrokeWidthEraser = 5, lastStrokeWidthRect = 5
+
+let formAnchor = null;
 
 export default function App() {
 
@@ -22,7 +24,11 @@ export default function App() {
         downLink = document.createElement("a")
         downLink.className = "no-display"
 
+
+        window.scrollTo((5000 / window.innerWidth) * 500, (3000 / window.innerHeight) * 300)
+
         setInterval(() => {
+            if(selectedTool === "pencil" || selectedTool === "eraser") {
                 if (lastPositions.length >= 2) {
                     let point1 = lastPositions.shift()
                     let point2 = lastPositions[lastPositions.length - 1]
@@ -41,6 +47,7 @@ export default function App() {
                     context.arc(point.x, point.y, strokeWidth, 0, 2 * Math.PI, false)
                     context.fill()
                 }
+            }
         }, 1)
 
     }, [])
@@ -52,6 +59,12 @@ export default function App() {
     const [menuBarShown, setMenuBarShown] = useState(true)
     const [selectedTool, setSelectedTool] = useState("pencil")
 
+    const [displayRectHint, setDisplayRectHint] = useState(false)
+    const [rectHintX, setRectHintX] = useState(0)
+    const [rectHintY, setRectHintY] = useState(0)
+    const [rectHintWidth, setRectHintWidth] = useState(0)
+    const [rectHintHeight, setRectHintHeight] = useState(0)
+
     class Position {
         constructor(x, y) {
             this.x = x
@@ -61,14 +74,14 @@ export default function App() {
 
     function clearScreen(color) {
         context.fillStyle = color
-        context.fillRect(0, 0, window.innerWidth, window.innerHeight)
+        context.fillRect(0, 0, 5000, 3000)
         eraserColor = color
     }
 
-    function handleMouseDownCanvas(e)
+    function handleMouseDownCanvas(e) {
-    {
         mouseDownCanvas = true
-        context.fillStyle = selectedTool === "pencil" ? colorValue : eraserColor
+        context.fillStyle = selectedTool !== "eraser" ? colorValue : eraserColor
+        if(selectedTool === "pencil" || selectedTool === "eraser") {
             context.beginPath()
             context.arc(e.pageX, e.pageY, strokeWidthSliderValue, 0, 2 * Math.PI, false)
             context.fill()
@@ -76,22 +89,67 @@ export default function App() {
             lastMouse = Date.now()
             lastPositions.push(new Position(e.pageX, e.pageY))
         }
+        else if(selectedTool === "rect")
+        {
+            formAnchor = new Position(e.pageX, e.pageY)
+            setRectHintX(e.pageX)
+            setRectHintY(e.pageY)
+            setRectHintWidth(0)
+            setRectHintHeight(0)
+            setDisplayRectHint(true)
+        }
+    }
 
-    function handleMouseMove(event) {
+    function handleMouseUpCanvas(e)
-        let mouseX = event.pageX
+    {
-        let mouseY = event.pageY
+        mouseDownCanvas = false
+
+        if(selectedTool === "rect") {
+            context.strokeStyle = colorValue
+            context.beginPath()
+            context.rect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y)
+            context.lineWidth = strokeWidthSliderValue
+            context.stroke()
+
+            setDisplayRectHint(false)
+        }
+    }
+
+    function handleMouseMove(e) {
+        let mouseX = e.pageX
+        let mouseY = e.pageY
 
         if (mouseDownMenuBar) {
 
             setMenuBarLeft(mouseX - mouseMenuBarOffsetX)
             setMenuBarTop(mouseY - mouseMenuBarOffsetY)
         } else if (mouseDownCanvas) {
-            context.fillStyle = selectedTool === "pencil" ? colorValue : eraserColor
+            if(selectedTool === "pencil" || selectedTool === "eraser") {
+                context.fillStyle = selectedTool !== "eraser" ? colorValue : eraserColor
 
                 lastPositions.push(new Position(mouseX, mouseY))
 
                 lastMouse = Date.now()
             }
+            else if(selectedTool === "rect") {
+                if(e.pageX >= formAnchor.x) {
+                    setRectHintX(formAnchor.x)
+                    setRectHintWidth(e.pageX - formAnchor.x)
+                }
+                else {
+                    setRectHintX(e.pageX)
+                    setRectHintWidth(formAnchor.x - e.pageX)
+                }
+                if(e.pageY >= formAnchor.y) {
+                    setRectHintY(formAnchor.y)
+                    setRectHintHeight(e.pageY - rectHintY)
+                }
+                else {
+                    setRectHintY(e.pageY)
+                    setRectHintHeight(formAnchor.y - e.pageY)
+                }
+            }
+        }
     }
 
     function onExportButtonClick(e) {
@@ -103,16 +161,17 @@ export default function App() {
         downLink.click()
     }
 
-    function handleToolChange(e)
+    function handleToolChange(e) {
-    {
         setSelectedTool(e.target.value)
         if (e.target.value === "pencil") {
             setStrokeWidthSliderValue(lastStrokeWidthPencil)
             strokeWidth = lastStrokeWidthPencil
-        }
+        } else if (e.target.value === "eraser") {
-        else if(e.target.value === "eraser") {
             setStrokeWidthSliderValue(lastStrokeWidthEraser)
             strokeWidth = lastStrokeWidthEraser
+        } else if (e.target.value === "rect") {
+            setStrokeWidthSliderValue(lastStrokeWidthRect)
+            strokeWidth = lastStrokeWidthRect
         }
     }
 
@@ -120,19 +179,33 @@ export default function App() {
 
         <div onMouseMove={e => handleMouseMove(e)} style={{overflow: "unset"}}>
             <canvas id="canvas" style={{backgroundColor: "rgb(255, 255, 255)"}}
-                    width={window.innerWidth}
+                    width={5000}
-                    height={window.innerHeight}
+                    height={3000}
                     onMouseDown={e => {
                         handleMouseDownCanvas(e)
                     }}
                     onMouseUp={e => {
-                        mouseDownCanvas = false
+                        handleMouseUpCanvas(e)
                     }}
             >
             </canvas>
 
-            <div id="menubar" style={{
+            <div id={"recthint"} style={{
+                display: displayRectHint ? "block" : "none",
                 position: "absolute",
+                background: "rgba(0, 0, 0, 0)",
+                border: strokeWidthSliderValue + "px solid " + colorValue,
+                left: rectHintX,
+                top: rectHintY,
+                width: rectHintWidth,
+                height: rectHintHeight,
+                pointerEvents: "none"
+            }}>
+
+            </div>
+
+            <div id="menubar" style={{
+                position: "fixed",
                 backgroundColor: "white",
                 borderRadius: 15,
                 boxShadow: "0 0 5px gray",
@@ -194,28 +267,61 @@ export default function App() {
                                 flexDirection: "row",
                             }}>
 
-                                <div style={{display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-end", gap: 10}}>
+                                <div style={{
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "center",
+                                    justifyContent: "flex-end",
+                                    gap: 10
+                                }}>
                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                          className="bi bi-pencil-fill" viewBox="0 0 16 16">
                                         <path
                                             d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
                                     </svg>
-                                    <input type={"radio"} name={"tool"} value={"pencil"} style={{width: 20, height: 20, pointerEvents: "auto"}}
+                                    <input type={"radio"} name={"tool"} value={"pencil"}
+                                           style={{width: 20, height: 20, pointerEvents: "auto"}}
                                            checked={selectedTool === "pencil"} onChange={e => {
                                         handleToolChange(e)
                                     }}/>
                                 </div>
-                                <div style={{display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-end", gap: 10}}>
+                                <div style={{
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "center",
+                                    justifyContent: "flex-end",
+                                    gap: 10
+                                }}>
                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                          className="bi bi-eraser-fill" viewBox="0 0 16 16">
                                         <path
                                             d="M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828l6.879-6.879zm.66 11.34L3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293l.16-.16z"/>
                                     </svg>
-                                    <input type={"radio"} value={"eraser"} name={"tool"} style={{width: 20, height: 20, pointerEvents: "auto"}}
+                                    <input type={"radio"} value={"eraser"} name={"tool"}
+                                           style={{width: 20, height: 20, pointerEvents: "auto"}}
                                            checked={selectedTool === "eraser"} onChange={e => {
                                         handleToolChange(e)
                                     }}/>
                                 </div>
+
+                                <div style={{
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "center",
+                                    justifyContent: "flex-end",
+                                    gap: 10
+                                }}>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                                         className="bi bi-square" viewBox="0 0 16 16">
+                                        <path
+                                            d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
+                                    </svg>
+                                    <input type={"radio"} value={"rect"} name={"tool"}
+                                           style={{width: 20, height: 20, pointerEvents: "auto"}}
+                                           checked={selectedTool === "rect"} onChange={e => {
+                                        handleToolChange(e)
+                                    }}/>
+                                </div>
                             </div>
 
                             <input type={"range"} min={1} max={20} value={strokeWidthSliderValue} onChange={e => {
@@ -223,9 +329,10 @@ export default function App() {
                                 strokeWidth = e.currentTarget.value
                                 if (selectedTool === "pencil") {
                                     lastStrokeWidthPencil = strokeWidth
-                                }
+                                } else if (selectedTool === "eraser") {
-                                else if(selectedTool === "eraser") {
                                     lastStrokeWidthEraser = strokeWidth;
+                                } else if (selectedTool === "rect") {
+                                    lastStrokeWidthRect = strokeWidth;
                                 }
 
                             }} style={{pointerEvents: "auto"}}/>

src/index.css

@@ -5,7 +5,6 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  overflow: hidden;
   background-color: rgb(255, 255, 255);
 }