jonas/DrawingApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Forms

Browse Source
This commit is contained in:
brausjonas
2023-07-06 22:54:41 +02:00
parent 5a32fa8999
commit 9ecb6fe2d1
1 changed files with 118 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+118 -46
View File
@@ -11,7 +11,7 @@ let lastPositions = []
let strokeWidth = 5 let strokeWidth = 5
let lastMouse = 0 let lastMouse = 0
let eraserColor = "rgb(255, 255, 255)" 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; let formAnchor = null;
@@ -28,7 +28,7 @@ export default function App() {
window.scrollTo((5000 / window.innerWidth) * 500, (3000 / window.innerHeight) * 300) window.scrollTo((5000 / window.innerWidth) * 500, (3000 / window.innerHeight) * 300)
setInterval(() => { setInterval(() => {
if(selectedTool === "pencil" || selectedTool === "eraser") { if (selectedTool === "pencil" || selectedTool === "eraser") {
if (lastPositions.length >= 2) { if (lastPositions.length >= 2) {
let point1 = lastPositions.shift() let point1 = lastPositions.shift()
let point2 = lastPositions[lastPositions.length - 1] let point2 = lastPositions[lastPositions.length - 1]
@@ -59,11 +59,13 @@ export default function App() {
const [menuBarShown, setMenuBarShown] = useState(true) const [menuBarShown, setMenuBarShown] = useState(true)
const [selectedTool, setSelectedTool] = useState("pencil") 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 { class Position {
constructor(x, y) { constructor(x, y) {
@@ -81,38 +83,60 @@ export default function App() {
function handleMouseDownCanvas(e) { function handleMouseDownCanvas(e) {
mouseDownCanvas = true mouseDownCanvas = true
context.fillStyle = selectedTool !== "eraser" ? colorValue : eraserColor context.fillStyle = selectedTool !== "eraser" ? colorValue : eraserColor
if(selectedTool === "pencil" || selectedTool === "eraser") { if (selectedTool === "pencil" || selectedTool === "eraser") {
context.beginPath() context.beginPath()
context.arc(e.pageX, e.pageY, strokeWidthSliderValue, 0, 2 * Math.PI, false) context.arc(e.pageX, e.pageY, strokeWidthSliderValue, 0, 2 * Math.PI, false)
context.fill() context.fill()
lastMouse = Date.now() lastMouse = Date.now()
lastPositions.push(new Position(e.pageX, e.pageY)) lastPositions.push(new Position(e.pageX, e.pageY))
} } else if (selectedTool === "rect" || selectedTool === "circle" || selectedTool === "selector") {
else if(selectedTool === "rect") if (selectedTool === "circle") {
{ setHintRadius(10000000)
} else {
setHintRadius(0)
}
if(selectedTool === "selector") {
setHintBorder("dashed")
}
else{
setHintBorder("solid")
}
formAnchor = new Position(e.pageX, e.pageY) 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 mouseDownCanvas = false
if(selectedTool === "rect") { if (selectedTool === "rect") {
context.strokeStyle = colorValue context.strokeStyle = colorValue
context.beginPath() context.beginPath()
context.rect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y) context.rect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y)
context.lineWidth = strokeWidthSliderValue context.lineWidth = strokeWidthSliderValue
context.stroke() 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) { function handleMouseMove(e) {
@@ -124,29 +148,32 @@ export default function App() {
setMenuBarLeft(mouseX - mouseMenuBarOffsetX) setMenuBarLeft(mouseX - mouseMenuBarOffsetX)
setMenuBarTop(mouseY - mouseMenuBarOffsetY) setMenuBarTop(mouseY - mouseMenuBarOffsetY)
} else if (mouseDownCanvas) { } else if (mouseDownCanvas) {
if(selectedTool === "pencil" || selectedTool === "eraser") { if (selectedTool === "pencil" || selectedTool === "eraser") {
context.fillStyle = selectedTool !== "eraser" ? colorValue : eraserColor context.fillStyle = selectedTool !== "eraser" ? colorValue : eraserColor
lastPositions.push(new Position(mouseX, mouseY)) lastPositions.push(new Position(mouseX, mouseY))
lastMouse = Date.now() lastMouse = Date.now()
} } else if (selectedTool === "rect" || selectedTool === "circle" || selectedTool === "selector") {
else if(selectedTool === "rect") {
if(e.pageX >= formAnchor.x) { if (e.pageX >= formAnchor.x) {
setRectHintX(formAnchor.x) setHintX(formAnchor.x)
setRectHintWidth(e.pageX - formAnchor.x) setHintWidth(e.pageX - formAnchor.x)
} else {
setHintX(e.pageX)
setHintWidth(formAnchor.x - e.pageX)
} }
else { if (e.pageY >= formAnchor.y) {
setRectHintX(e.pageX) setHintY(formAnchor.y)
setRectHintWidth(formAnchor.x - e.pageX) setHintHeight(e.pageY - hintY)
}
if(e.pageY >= formAnchor.y) { } else {
setRectHintY(formAnchor.y) setHintY(e.pageY)
setRectHintHeight(e.pageY - rectHintY) setHintHeight(formAnchor.y - e.pageY)
}
else {
setRectHintY(e.pageY)
setRectHintHeight(formAnchor.y - e.pageY)
} }
} }
} }
@@ -172,6 +199,9 @@ export default function App() {
} else if (e.target.value === "rect") { } else if (e.target.value === "rect") {
setStrokeWidthSliderValue(lastStrokeWidthRect) setStrokeWidthSliderValue(lastStrokeWidthRect)
strokeWidth = lastStrokeWidthRect strokeWidth = lastStrokeWidthRect
} else if (e.target.value === "circle") {
setStrokeWidthSliderValue(lastStrokeWidthCircle)
strokeWidth = lastStrokeWidthCircle
} }
} }
@@ -191,15 +221,16 @@ export default function App() {
</canvas> </canvas>
<div id={"recthint"} style={{ <div id={"recthint"} style={{
display: displayRectHint ? "block" : "none", display: displayHint ? "block" : "none",
position: "absolute", position: "absolute",
background: "rgba(0, 0, 0, 0)", 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> </div>
@@ -304,6 +335,26 @@ export default function App() {
}}/> }}/>
</div> </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={{ <div style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
@@ -322,6 +373,25 @@ export default function App() {
handleToolChange(e) handleToolChange(e)
}}/> }}/>
</div> </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> </div>
<input type={"range"} min={1} max={20} value={strokeWidthSliderValue} onChange={e => { <input type={"range"} min={1} max={20} value={strokeWidthSliderValue} onChange={e => {
@@ -333,10 +403,12 @@ export default function App() {
lastStrokeWidthEraser = strokeWidth; lastStrokeWidthEraser = strokeWidth;
} else if (selectedTool === "rect") { } else if (selectedTool === "rect") {
lastStrokeWidthRect = strokeWidth; 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> </div>
{/*Color Selector*/} {/*Color Selector*/}