Forms

src/App.js

@@ -11,7 +11,7 @@ let lastPositions = []
 let strokeWidth = 5
 let lastMouse = 0
 let eraserColor = "rgb(255, 255, 255)"
-let lastStrokeWidthPencil = 5, lastStrokeWidthEraser = 5, lastStrokeWidthRect = 5
+let lastStrokeWidthPencil = 5, lastStrokeWidthEraser = 5, lastStrokeWidthRect = 5, lastStrokeWidthCircle = 5
 
 let formAnchor = null;
 
@@ -59,11 +59,13 @@ export default function App() {
     const [menuBarShown, setMenuBarShown] = useState(true)
     const [selectedTool, setSelectedTool] = useState("pencil")
 
-    const [displayRectHint, setDisplayRectHint] = useState(false)
+    const [displayHint, setDisplayHint] = useState(false)
-    const [rectHintX, setRectHintX] = useState(0)
+    const [hintX, setHintX] = useState(0)
-    const [rectHintY, setRectHintY] = useState(0)
+    const [hintY, setHintY] = useState(0)
-    const [rectHintWidth, setRectHintWidth] = useState(0)
+    const [hintWidth, setHintWidth] = useState(0)
-    const [rectHintHeight, setRectHintHeight] = useState(0)
+    const [hintHeight, setHintHeight] = useState(0)
+    const [hintRadius, setHintRadius] = useState(0)
+    const [hintBorder, setHintBorder] = useState("solid")
 
     class Position {
         constructor(x, y) {
@@ -88,20 +90,30 @@ export default function App() {
 
             lastMouse = Date.now()
             lastPositions.push(new Position(e.pageX, e.pageY))
+        } else if (selectedTool === "rect" || selectedTool === "circle" || selectedTool === "selector") {
+            if (selectedTool === "circle") {
+                setHintRadius(10000000)
+            } else {
+                setHintRadius(0)
             }
-        else if(selectedTool === "rect")
+
-        {
+            if(selectedTool === "selector") {
+                setHintBorder("dashed")
+            }
+            else{
+                setHintBorder("solid")
+            }
+
             formAnchor = new Position(e.pageX, e.pageY)
-            setRectHintX(e.pageX)
+            setHintX(e.pageX)
-            setRectHintY(e.pageY)
+            setHintY(e.pageY)
-            setRectHintWidth(0)
+            setHintWidth(0)
-            setRectHintHeight(0)
+            setHintHeight(0)
-            setDisplayRectHint(true)
+            setDisplayHint(true)
         }
     }
 
-    function handleMouseUpCanvas(e)
+    function handleMouseUpCanvas(e) {
-    {
         mouseDownCanvas = false
 
         if (selectedTool === "rect") {
@@ -111,8 +123,20 @@ export default function App() {
             context.lineWidth = strokeWidthSliderValue
             context.stroke()
 
-            setDisplayRectHint(false)
+        } else if (selectedTool === "circle") {
+            context.strokeStyle = colorValue
+            context.beginPath()
+            let radius = (e.pageX - formAnchor.x) / 2
+            let yRad = (e.pageY - formAnchor.y) / 2
+            context.arc(formAnchor.x + radius, formAnchor.y + yRad, Math.abs(radius), 0, 2 * Math.PI, false)
+            context.lineWidth = strokeWidthSliderValue
+            context.stroke()
+        } else if(selectedTool === "selector") {
+            context.fillStyle = eraserColor
+            context.fillRect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y)
         }
+
+        setDisplayHint(false)
     }
 
     function handleMouseMove(e) {
@@ -130,23 +154,26 @@ export default function App() {
                 lastPositions.push(new Position(mouseX, mouseY))
 
                 lastMouse = Date.now()
-            }
+            } else if (selectedTool === "rect" || selectedTool === "circle" || selectedTool === "selector") {
-            else if(selectedTool === "rect") {
+
                 if (e.pageX >= formAnchor.x) {
-                    setRectHintX(formAnchor.x)
+                    setHintX(formAnchor.x)
-                    setRectHintWidth(e.pageX - formAnchor.x)
+                        setHintWidth(e.pageX - formAnchor.x)
-                }
+
-                else {
+                } else {
-                    setRectHintX(e.pageX)
+                    setHintX(e.pageX)
-                    setRectHintWidth(formAnchor.x - e.pageX)
+                        setHintWidth(formAnchor.x - e.pageX)
+
+
                 }
                 if (e.pageY >= formAnchor.y) {
-                    setRectHintY(formAnchor.y)
+                    setHintY(formAnchor.y)
-                    setRectHintHeight(e.pageY - rectHintY)
+                        setHintHeight(e.pageY - hintY)
-                }
+
-                else {
+                } else {
-                    setRectHintY(e.pageY)
+                    setHintY(e.pageY)
-                    setRectHintHeight(formAnchor.y - e.pageY)
+                        setHintHeight(formAnchor.y - e.pageY)
+
                 }
             }
         }
@@ -172,6 +199,9 @@ export default function App() {
         } else if (e.target.value === "rect") {
             setStrokeWidthSliderValue(lastStrokeWidthRect)
             strokeWidth = lastStrokeWidthRect
+        } else if (e.target.value === "circle") {
+            setStrokeWidthSliderValue(lastStrokeWidthCircle)
+            strokeWidth = lastStrokeWidthCircle
         }
     }
 
@@ -191,15 +221,16 @@ export default function App() {
             </canvas>
 
             <div id={"recthint"} style={{
-                display: displayRectHint ? "block" : "none",
+                display: displayHint ? "block" : "none",
                 position: "absolute",
                 background: "rgba(0, 0, 0, 0)",
-                border: strokeWidthSliderValue + "px solid " + colorValue,
+                border: (selectedTool === "selector" ? 2 : strokeWidthSliderValue) + "px " + hintBorder + " " + colorValue,
-                left: rectHintX,
+                left: hintX,
-                top: rectHintY,
+                top: hintY,
-                width: rectHintWidth,
+                width: hintWidth,
-                height: rectHintHeight,
+                height: hintHeight,
-                pointerEvents: "none"
+                pointerEvents: "none",
+                borderRadius: hintRadius
             }}>
 
             </div>
@@ -304,6 +335,26 @@ export default function App() {
                                     }}/>
                                 </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-circle" viewBox="0 0 16 16">
+                                        <path
+                                            d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                                    </svg>
+                                    <input type={"radio"} value={"circle"} name={"tool"}
+                                           style={{width: 20, height: 20, pointerEvents: "auto"}}
+                                           checked={selectedTool === "circle"} onChange={e => {
+                                        handleToolChange(e)
+                                    }}/>
+                                </div>
+
                                 <div style={{
                                     display: "flex",
                                     flexDirection: "column",
@@ -322,6 +373,25 @@ export default function App() {
                                         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-x-lg" viewBox="0 0 16 16">
+                                        <path
+                                            d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
+                                    </svg>
+                                    <input type={"radio"} value={"selector"} name={"tool"}
+                                           style={{width: 20, height: 20, pointerEvents: "auto"}}
+                                           checked={selectedTool === "selector"} onChange={e => {
+                                        handleToolChange(e)
+                                    }}/>
+                                </div>
                             </div>
 
                             <input type={"range"} min={1} max={20} value={strokeWidthSliderValue} onChange={e => {
@@ -333,10 +403,12 @@ export default function App() {
                                     lastStrokeWidthEraser = strokeWidth;
                                 } else if (selectedTool === "rect") {
                                     lastStrokeWidthRect = strokeWidth;
+                                } else if (selectedTool === "circle") {
+                                    lastStrokeWidthCircle = strokeWidth
                                 }
 
-                            }} style={{pointerEvents: "auto"}}/>
+                            }} style={{pointerEvents: "auto", display: (selectedTool === "selector" ? "none" : "block")}}/>
-                            <p style={{userSelect: "none"}}>{strokeWidthSliderValue}</p>
+                            <p style={{userSelect: "none", display: (selectedTool === "selector" ? "none" : "block")}}>{strokeWidthSliderValue}</p>
                         </div>
 
                         {/*Color Selector*/}