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

Save Function

Browse Source
This commit is contained in:
brausjonas
2023-07-07 01:23:51 +02:00
parent 9cc6630a4b
commit 3b8303c4db
1 changed files with 128 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+128 -54
View File
@@ -12,22 +12,24 @@ let lastPositions = []
let strokeWidth = 2 let strokeWidth = 2
let lastMouse = 0 let lastMouse = 0
let eraserColor = "rgb(255, 255, 255)" let eraserColor = "rgb(255, 255, 255)"
let lastStrokeWidthPencil = 2, lastStrokeWidthEraser = 20, lastStrokeWidthRect = 2, lastStrokeWidthCircle = 2, lastStrokeWidthLine = 2 let lastStrokeWidthPencil = 2, lastStrokeWidthEraser = 20, lastStrokeWidthRect = 2, lastStrokeWidthCircle = 2,
lastStrokeWidthLine = 2
let formAnchor = null; let formAnchor = null;
let textInput let textInput
let fileInput
export default function App() { export default function App() {
useLayoutEffect(() => { useLayoutEffect(() => {
window.addEventListener("beforeunload", e => {
e.preventDefault()
e.returnValue = ""
})
canvas = document.getElementById("canvas") canvas = document.getElementById("canvas")
context = canvas.getContext("2d") context = canvas.getContext("2d")
fileInput = document.getElementById("fileInput")
clearScreen("rgb(255, 255, 255)") clearScreen("rgb(255, 255, 255)")
downLink = document.createElement("a") downLink = document.createElement("a")
downLink.className = "no-display" downLink.className = "no-display"
@@ -88,7 +90,7 @@ export default function App() {
} }
function handleMouseDownCanvas(e) { function handleMouseDownCanvas(e) {
if(e.button === 0) { if (e.button === 0) {
mouseDownCanvas = true mouseDownCanvas = true
hintContext.clearRect(0, 0, 5000, 3000) hintContext.clearRect(0, 0, 5000, 3000)
setShowTextInput(false) setShowTextInput(false)
@@ -104,21 +106,21 @@ export default function App() {
formAnchor = new Position(e.pageX, e.pageY) formAnchor = new Position(e.pageX, e.pageY)
} }
if(selectedTool === "text") { if (selectedTool === "text") {
mouseDownCanvas = false mouseDownCanvas = false
setTextInputX(e.pageX + 10) setTextInputX(e.pageX + 10)
setTextInputY(e.pageY + 10) 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)
hintContext.fill() hintContext.fill()
} }
} }
} }
function handleMouseUpCanvas(e) { function handleMouseUpCanvas(e) {
if(e.button === 0) { if (e.button === 0) {
mouseDownCanvas = false mouseDownCanvas = false
if (selectedTool === "rect") { if (selectedTool === "rect") {
@@ -136,11 +138,10 @@ export default function App() {
context.arc(formAnchor.x + radius, formAnchor.y + yRad, Math.abs(radius), 0, 2 * Math.PI, false) context.arc(formAnchor.x + radius, formAnchor.y + yRad, Math.abs(radius), 0, 2 * Math.PI, false)
context.lineWidth = strokeWidthSliderValue context.lineWidth = strokeWidthSliderValue
context.stroke() context.stroke()
} else if(selectedTool === "selector") { } else if (selectedTool === "selector") {
context.fillStyle = eraserColor context.fillStyle = eraserColor
context.fillRect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y) context.fillRect(formAnchor.x, formAnchor.y, e.pageX - formAnchor.x, e.pageY - formAnchor.y)
} } else if (selectedTool === "line") {
else if(selectedTool === "line") {
context.strokeStyle = colorValue context.strokeStyle = colorValue
context.beginPath() context.beginPath()
context.lineWidth = strokeWidthSliderValue context.lineWidth = strokeWidthSliderValue
@@ -150,10 +151,9 @@ export default function App() {
context.moveTo(0, 0) context.moveTo(0, 0)
} }
if(selectedTool !== "text") { if (selectedTool !== "text") {
hintContext.clearRect(0, 0, 5000, 3000) hintContext.clearRect(0, 0, 5000, 3000)
} } else {
else {
textInput.focus() textInput.focus()
} }
} }
@@ -187,30 +187,29 @@ export default function App() {
hintContext.strokeStyle = colorValue hintContext.strokeStyle = colorValue
hintContext.lineWidth = strokeWidthSliderValue hintContext.lineWidth = strokeWidthSliderValue
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)" hintContext.strokeStyle = "rgb(200, 0, 0)"
} } else {
else {
hintContext.setLineDash([]) hintContext.setLineDash([])
} }
hintContext.beginPath() hintContext.beginPath()
if(selectedTool === "rect" || selectedTool === "selector") { if (selectedTool === "rect" || selectedTool === "selector") {
hintContext.rect(formAnchor.x, formAnchor.y, mouseX - formAnchor.x, mouseY - formAnchor.y) hintContext.rect(formAnchor.x, formAnchor.y, mouseX - formAnchor.x, mouseY - formAnchor.y)
hintContext.stroke() hintContext.stroke()
} }
if(selectedTool === "circle") { if (selectedTool === "circle") {
let radius = (mouseX - formAnchor.x) / 2 let radius = (mouseX - formAnchor.x) / 2
let yRad = (mouseY - formAnchor.y) / 2 let yRad = (mouseY - formAnchor.y) / 2
hintContext.arc(formAnchor.x + radius, formAnchor.y + yRad, Math.abs(radius), 0, 2 * Math.PI, false) hintContext.arc(formAnchor.x + radius, formAnchor.y + yRad, Math.abs(radius), 0, 2 * Math.PI, false)
hintContext.stroke() hintContext.stroke()
} }
if(selectedTool === "line") { if (selectedTool === "line") {
hintContext.moveTo(formAnchor.x, formAnchor.y) hintContext.moveTo(formAnchor.x, formAnchor.y)
hintContext.lineTo(mouseX, mouseY) hintContext.lineTo(mouseX, mouseY)
hintContext.stroke() hintContext.stroke()
@@ -228,6 +227,20 @@ export default function App() {
downLink.click() downLink.click()
} }
function onSaveButtonClick()
{
let img = canvas.toDataURL("image/png")
let blob = new Blob([img], {type: "text/plain"})
var url = URL.createObjectURL(blob)
downLink.href = url
downLink.download = "save.redraw"
downLink.click()
}
function onOpenButtonClick() {
fileInput.click()
}
function handleToolChange(e) { function handleToolChange(e) {
setShowTextInput(false) setShowTextInput(false)
hintContext.clearRect(0, 0, 5000, 3000) hintContext.clearRect(0, 0, 5000, 3000)
@@ -244,8 +257,7 @@ export default function App() {
} else if (e.target.value === "circle") { } else if (e.target.value === "circle") {
setStrokeWidthSliderValue(lastStrokeWidthCircle) setStrokeWidthSliderValue(lastStrokeWidthCircle)
strokeWidth = lastStrokeWidthCircle strokeWidth = lastStrokeWidthCircle
} } else if (e.target.value === "line") {
else if (e.target.value === "line") {
setStrokeWidthSliderValue(lastStrokeWidthLine) setStrokeWidthSliderValue(lastStrokeWidthLine)
strokeWidth = lastStrokeWidthLine strokeWidth = lastStrokeWidthLine
} }
@@ -286,7 +298,7 @@ export default function App() {
fontSize: 25, fontSize: 25,
fontFamily: "sans-serif" fontFamily: "sans-serif"
}} onKeyDown={e => { }} onKeyDown={e => {
if(e.key === "Enter") { if (e.key === "Enter") {
mouseDownCanvas = false mouseDownCanvas = false
context.font = "25px sans-serif" context.font = "25px sans-serif"
context.textAlign = "center" context.textAlign = "center"
@@ -507,12 +519,18 @@ export default function App() {
lastStrokeWidthRect = strokeWidth; lastStrokeWidthRect = strokeWidth;
} else if (selectedTool === "circle") { } else if (selectedTool === "circle") {
lastStrokeWidthCircle = strokeWidth lastStrokeWidthCircle = strokeWidth
} else if(selectedTool === "line") { } else if (selectedTool === "line") {
lastStrokeWidthLine = strokeWidth lastStrokeWidthLine = strokeWidth
} }
}} style={{pointerEvents: "auto", display: ((selectedTool === "selector" || selectedTool === "text") ? "none" : "block")}}/> }} style={{
<p style={{userSelect: "none", display: ((selectedTool === "selector" || selectedTool === "text") ? "none" : "block")}}>{strokeWidthSliderValue}</p> pointerEvents: "auto",
display: ((selectedTool === "selector" || selectedTool === "text") ? "none" : "block")
}}/>
<p style={{
userSelect: "none",
display: ((selectedTool === "selector" || selectedTool === "text") ? "none" : "block")
}}>{strokeWidthSliderValue}</p>
</div> </div>
{/*Color Selector*/} {/*Color Selector*/}
@@ -528,34 +546,90 @@ export default function App() {
setColorValue(e.target.value) setColorValue(e.target.value)
}} value={colorValue}/> }} value={colorValue}/>
{/*fill bucket*/} <div style={{
<button style={{ display: "flex",
backgroundColor: "white", flexDirection: "column",
borderWidth: 0, justifyContent: "center",
boxShadow: "0 0 5px gray", alignItems: "center",
padding: 10, gap: 5
marginLeft: 10,
borderRadius: 15,
pointerEvents: "auto"
}} onClick={() => {
clearScreen(colorValue)
}}> }}>
Clear {/*fill bucket*/}
</button> <button style={{
backgroundColor: "white",
borderWidth: 0,
boxShadow: "0 0 5px gray",
padding: 10,
marginLeft: 10,
borderRadius: 15,
width: 60,
pointerEvents: "auto"
}} onClick={() => {
clearScreen(colorValue)
}}>
Clear
</button>
{/*export button*/} {/*open button*/}
<button style={{ <button style={{
padding: 10, padding: 10,
backgroundColor: "white", backgroundColor: "white",
borderRadius: 15, borderRadius: 15,
marginLeft: 10, marginLeft: 10,
boxShadow: "0 0 5px gray", boxShadow: "0 0 5px gray",
borderWidth: 0, borderWidth: 0,
pointerEvents: "auto" width: 60,
}} pointerEvents: "auto"
onClick={onExportButtonClick} }}
>Export onClick={onOpenButtonClick}>
</button> Open
</button>
<input onChange={() => {
let file = fileInput.files[0]
let reader = new FileReader()
reader.onload = e => {
let image = new Image()
image.onload = () => {
context.drawImage(image, 0, 0)
}
image.src = e.target.result
}
reader.readAsText(file)
}} id={"fileInput"} type={"file"} accept={".redraw"} style={{pointerEvents: "auto", display: "none"}}/>
{/*save button*/}
<button style={{
padding: 10,
backgroundColor: "white",
borderRadius: 15,
marginLeft: 10,
boxShadow: "0 0 5px gray",
borderWidth: 0,
width: 60,
pointerEvents: "auto"
}}
onClick={onSaveButtonClick}>
Save
</button>
{/*export button*/}
<button style={{
padding: 10,
backgroundColor: "white",
borderRadius: 15,
marginLeft: 10,
boxShadow: "0 0 5px gray",
borderWidth: 0,
width: 60,
pointerEvents: "auto"
}}
onClick={onExportButtonClick}>
Export
</button>
</div>
</div> </div>
</div> </div>
</div> </div>