From 37529fb1e9ff63e13c84ec9be79fd59c854267c3 Mon Sep 17 00:00:00 2001 From: brausjonas Date: Fri, 7 Jul 2023 18:36:44 +0200 Subject: [PATCH] Recents --- src/App.js | 22 +++++++++++++++++-- src/Drawing.js | 55 ++++++++++++++++++++++++++++++++---------------- src/StartForm.js | 2 +- 3 files changed, 58 insertions(+), 21 deletions(-) diff --git a/src/App.js b/src/App.js index 9e2558f..baa4c1b 100644 --- a/src/App.js +++ b/src/App.js @@ -10,6 +10,10 @@ export default function App() { const [widthDrawing, setWidthDrawing] = useState(0) const [heightDrawing, setHeightDrawing] = useState(0) + const [loadIn, setLoadIn] = useState(null) + const [loadInId, setLoadInId] = useState(-1) + const [shouldUpdate, setShouldUpdate] = useState(false) + function onCreateCanvas(inputWidth, inputHeight) { setWidthDrawing(parseInt(inputWidth.value)) setHeightDrawing(parseInt(inputHeight.value)) @@ -17,10 +21,24 @@ export default function App() { setShowDrawing("block") } + function onLoadIn(save, id) { + let image = new Image() + image.onload = () => { + setWidthDrawing(image.width) + setHeightDrawing(image.height) + setLoadIn(save) + setShowForm("none") + setShowDrawing("block") + setLoadInId(id) + setShouldUpdate(!shouldUpdate) + } + image.src = save + } + return (
- - + +
); } diff --git a/src/Drawing.js b/src/Drawing.js index 45fd522..7b97c32 100644 --- a/src/Drawing.js +++ b/src/Drawing.js @@ -31,14 +31,14 @@ let moverWidth = 0, moverHeight = 0 export default function Drawing(p) { useEffect(() => { - if(p.show !== "none") { + if (p.show !== "none") { let body = document.querySelector("body") body.style.background = "rgb(200, 200, 200)" } }) - useLayoutEffect(() => { + useEffect(() => { canvas = document.getElementById("canvas") context = canvas.getContext("2d") @@ -52,6 +52,17 @@ export default function Drawing(p) { hintCanvas = document.getElementById("hintCanvas") hintContext = hintCanvas.getContext("2d") + if (p.loadIn !== null) { + console.log("test") + let image = new Image() + image.onload = () => { + console.log("test2") + context.clearRect(0, 0, p.width, p.height) + context.drawImage(image, 0, 0) + } + image.src = p.loadIn + } + setInterval(() => { if (selectedTool === "pencil" || selectedTool === "eraser") { @@ -76,7 +87,7 @@ export default function Drawing(p) { } }, 1) - }, []) + }, [p.shouldUpdate]) const [menuBarLeft, setMenuBarLeft] = useState(50) const [menuBarTop, setMenuBarTop] = useState(50) @@ -98,7 +109,7 @@ export default function Drawing(p) { function handleMouseDownCanvas(e) { if (e.button === 0) { - if(!moverActive) { + if (!moverActive) { mouseDownCanvas = true hintContext.clearRect(0, 0, p.width, p.height) setShowTextInput(false) @@ -124,8 +135,7 @@ export default function Drawing(p) { hintContext.arc(e.pageX, e.pageY, 5, 0, 2 * Math.PI, false) hintContext.fill() } - } - else { + } else { context.clearRect(formAnchor.x, formAnchor.y, moverWidth, moverHeight) context.drawImage(hintCanvas, e.pageX - moverWidth + 3, e.pageY - moverHeight + 3, moverWidth - 6, moverHeight - 6, e.pageX - moverWidth + 3, e.pageY - moverHeight + 3, moverWidth - 6, moverHeight - 6) hintContext.clearRect(0, 0, p.width, p.height) @@ -165,8 +175,7 @@ export default function Drawing(p) { context.lineTo(e.pageX, e.pageY) context.stroke() context.moveTo(0, 0) - } - else if (selectedTool === "mover") { + } else if (selectedTool === "mover") { canvas.style.cursor = "move" moverActive = true moverWidth = e.pageX - formAnchor.x @@ -213,8 +222,7 @@ export default function Drawing(p) { hintContext.setLineDash([10, 15]) hintContext.lineWidth = 3 hintContext.strokeStyle = "rgb(200, 0, 0)" - } - else if(selectedTool === "mover") { + } else if (selectedTool === "mover") { hintContext.setLineDash([10, 15]) hintContext.lineWidth = 3 hintContext.strokeStyle = "rgb(0, 0, 0)" @@ -269,8 +277,7 @@ export default function Drawing(p) { downLink.click() } - function onSaveButtonClick() - { + function onSaveButtonClick() { let img = canvas.toDataURL("image/png") let blob = new Blob([img], {type: "text/plain"}) var url = URL.createObjectURL(blob) @@ -643,7 +650,8 @@ export default function Drawing(p) { } reader.readAsText(file) - }} id={"fileInput"} type={"file"} accept={".redraw"} style={{pointerEvents: "auto", display: "none"}}/> + }} id={"fileInput"} type={"file"} accept={".redraw"} + style={{pointerEvents: "auto", display: "none"}}/> {/*save button*/} @@ -691,12 +699,23 @@ export default function Drawing(p) { onClick={() => { let save = canvas.toDataURL("image/png") let arrString = localStorage.getItem("save") - if(arrString !== null) { + if (arrString !== null) { let json = JSON.parse(arrString) - json.arr.push(new Save(save)) - localStorage.setItem("save", JSON.stringify(json)) - } - else { + if (p.loadInId === -1) { + json.arr.push(new Save(save)) + localStorage.setItem("save", JSON.stringify(json)) + } else { + + for(let i = 0; i < json.arr.length; i++) { + + if(parseInt(json.arr[i].id) === p.loadInId) { + json.arr[i] = new Save(save) + localStorage.setItem("save", JSON.stringify(json)) + break + } + } + } + } else { let json = { arr: [new Save(save)] } diff --git a/src/StartForm.js b/src/StartForm.js index b833825..431e8a7 100644 --- a/src/StartForm.js +++ b/src/StartForm.js @@ -98,7 +98,7 @@ export default function StartForm(p) { alignItems: "center", textAlign: "center" }} onClick={() => { - console.log("test") + p.onLoadIn(e.content, e.id) }}>

{e.name}

))}