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

Puuuuush

Browse Source
This commit is contained in:
brausjonas
2023-07-07 00:10:25 +02:00
parent f9441c69b4
commit 48f652f1d2
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+16 -10
View File
@@ -1,5 +1,5 @@
import './App.css'; import './App.css';
import {useLayoutEffect, useState} from "react"; import {useLayoutEffect, useRef, useState} from "react";
let mouseDownMenuBar = false let mouseDownMenuBar = false
let mouseDownCanvas = false let mouseDownCanvas = false
@@ -67,6 +67,7 @@ export default function App() {
const [textInputY, setTextInputY] = useState(0) const [textInputY, setTextInputY] = useState(0)
const [showTextInput, setShowTextInput] = useState(false) const [showTextInput, setShowTextInput] = useState(false)
class Position { class Position {
constructor(x, y) { constructor(x, y) {
this.x = x this.x = x
@@ -98,10 +99,9 @@ export default function App() {
} }
if(selectedTool === "text") { if(selectedTool === "text") {
mouseDownCanvas = false mouseDownCanvas = false
setTextInputX(e.pageX) setTextInputX(e.pageX + 10)
setTextInputY(e.pageY) setTextInputY(e.pageY + 10)
setShowTextInput(true) setShowTextInput(true)
hintContext.beginPath() hintContext.beginPath()
hintContext.fillStyle = "black" hintContext.fillStyle = "black"
hintContext.arc(e.pageX, e.pageY, 5, 0, 2*Math.PI, false) hintContext.arc(e.pageX, e.pageY, 5, 0, 2*Math.PI, false)
@@ -141,8 +141,13 @@ export default function App() {
context.moveTo(0, 0) context.moveTo(0, 0)
} }
if(selectedTool !== "text") {
hintContext.clearRect(0, 0, 5000, 3000) hintContext.clearRect(0, 0, 5000, 3000)
} }
else {
textInput.focus()
}
}
function handleMouseMove(e) { function handleMouseMove(e) {
let mouseX = e.pageX let mouseX = e.pageX
@@ -167,6 +172,7 @@ export default function App() {
if(selectedTool === "selector") { if(selectedTool === "selector") {
hintContext.setLineDash([10, 15]) hintContext.setLineDash([10, 15])
hintContext.lineWidth = 3 hintContext.lineWidth = 3
hintContext.strokeStyle = "rgb(200, 0, 0)"
} }
else { else {
hintContext.setLineDash([]) hintContext.setLineDash([])
@@ -252,19 +258,19 @@ export default function App() {
> >
</canvas> </canvas>
<input autoFocus={true} id={"textInput"} type={"text"} style={{ <input autoFocus name={"textInput"} id={"textInput"} type={"text"} style={{
display: (showTextInput ? "block" : "none"), display: (showTextInput ? "block" : "none"),
position: "absolute", position: "absolute",
top: textInputY, top: textInputY,
left: textInputX, left: textInputX,
fontSize: 25, fontSize: 25,
fontFamily: "serif" fontFamily: "sans-serif"
}} onKeyDown={e => { }} onKeyDown={e => {
if(e.key === "Enter") { if(e.key === "Enter") {
mouseDownCanvas = false mouseDownCanvas = false
context.font = "25px serif" context.font = "25px sans-serif"
context.textAlign = "center" context.textAlign = "center"
context.fillText(textInput.value, formAnchor.x, formAnchor.y) context.fillText(textInput.value, formAnchor.x, formAnchor.y + 10)
textInput.value = "" textInput.value = ""
setShowTextInput(false) setShowTextInput(false)
hintContext.clearRect(0, 0, 5000, 3000) hintContext.clearRect(0, 0, 5000, 3000)
@@ -482,8 +488,8 @@ export default function App() {
lastStrokeWidthLine = strokeWidth lastStrokeWidthLine = strokeWidth
} }
}} style={{pointerEvents: "auto", display: (selectedTool === "selector" ? "none" : "block")}}/> }} style={{pointerEvents: "auto", display: ((selectedTool === "selector" || selectedTool === "text") ? "none" : "block")}}/>
<p style={{userSelect: "none", display: (selectedTool === "selector" ? "none" : "block")}}>{strokeWidthSliderValue}</p> <p style={{userSelect: "none", display: ((selectedTool === "selector" || selectedTool === "text") ? "none" : "block")}}>{strokeWidthSliderValue}</p>
</div> </div>
{/*Color Selector*/} {/*Color Selector*/}