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
+92 -18
View File
@@ -12,22 +12,24 @@ let lastPositions = []
let strokeWidth = 2
let lastMouse = 0
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 textInput
let fileInput
export default function App() {
useLayoutEffect(() => {
window.addEventListener("beforeunload", e => {
e.preventDefault()
e.returnValue = ""
})
canvas = document.getElementById("canvas")
context = canvas.getContext("2d")
fileInput = document.getElementById("fileInput")
clearScreen("rgb(255, 255, 255)")
downLink = document.createElement("a")
downLink.className = "no-display"
@@ -139,8 +141,7 @@ export default function App() {
} else if (selectedTool === "selector") {
context.fillStyle = eraserColor
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.beginPath()
context.lineWidth = strokeWidthSliderValue
@@ -152,8 +153,7 @@ export default function App() {
if (selectedTool !== "text") {
hintContext.clearRect(0, 0, 5000, 3000)
}
else {
} else {
textInput.focus()
}
}
@@ -191,8 +191,7 @@ export default function App() {
hintContext.setLineDash([10, 15])
hintContext.lineWidth = 3
hintContext.strokeStyle = "rgb(200, 0, 0)"
}
else {
} else {
hintContext.setLineDash([])
}
@@ -228,6 +227,20 @@ export default function App() {
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) {
setShowTextInput(false)
hintContext.clearRect(0, 0, 5000, 3000)
@@ -244,8 +257,7 @@ export default function App() {
} else if (e.target.value === "circle") {
setStrokeWidthSliderValue(lastStrokeWidthCircle)
strokeWidth = lastStrokeWidthCircle
}
else if (e.target.value === "line") {
} else if (e.target.value === "line") {
setStrokeWidthSliderValue(lastStrokeWidthLine)
strokeWidth = lastStrokeWidthLine
}
@@ -511,8 +523,14 @@ export default function App() {
lastStrokeWidthLine = strokeWidth
}
}} style={{pointerEvents: "auto", display: ((selectedTool === "selector" || selectedTool === "text") ? "none" : "block")}}/>
<p style={{userSelect: "none", display: ((selectedTool === "selector" || selectedTool === "text") ? "none" : "block")}}>{strokeWidthSliderValue}</p>
}} style={{
pointerEvents: "auto",
display: ((selectedTool === "selector" || selectedTool === "text") ? "none" : "block")
}}/>
<p style={{
userSelect: "none",
display: ((selectedTool === "selector" || selectedTool === "text") ? "none" : "block")
}}>{strokeWidthSliderValue}</p>
</div>
{/*Color Selector*/}
@@ -528,6 +546,13 @@ export default function App() {
setColorValue(e.target.value)
}} value={colorValue}/>
<div style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
gap: 5
}}>
{/*fill bucket*/}
<button style={{
backgroundColor: "white",
@@ -536,6 +561,7 @@ export default function App() {
padding: 10,
marginLeft: 10,
borderRadius: 15,
width: 60,
pointerEvents: "auto"
}} onClick={() => {
clearScreen(colorValue)
@@ -543,6 +569,52 @@ export default function App() {
Clear
</button>
{/*open button*/}
<button style={{
padding: 10,
backgroundColor: "white",
borderRadius: 15,
marginLeft: 10,
boxShadow: "0 0 5px gray",
borderWidth: 0,
width: 60,
pointerEvents: "auto"
}}
onClick={onOpenButtonClick}>
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,
@@ -551,14 +623,16 @@ export default function App() {
marginLeft: 10,
boxShadow: "0 0 5px gray",
borderWidth: 0,
width: 60,
pointerEvents: "auto"
}}
onClick={onExportButtonClick}
>Export
onClick={onExportButtonClick}>
Export
</button>
</div>
</div>
</div>
</div>
</div>
);