diff --git a/src/App.js b/src/App.js index baa4c1b..6bb015d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,9 @@ import Drawing from "./Drawing"; -import {useState} from "react"; +import {useEffect, useState} from "react"; import StartForm from "./StartForm"; +let fileInput + export default function App() { const [showForm, setShowForm] = useState("flex") @@ -14,6 +16,11 @@ export default function App() { const [loadInId, setLoadInId] = useState(-1) const [shouldUpdate, setShouldUpdate] = useState(false) + useEffect(() => { + + fileInput = document.getElementById("fileInput") + }, []) + function onCreateCanvas(inputWidth, inputHeight) { setWidthDrawing(parseInt(inputWidth.value)) setHeightDrawing(parseInt(inputHeight.value)) @@ -35,10 +42,36 @@ export default function App() { image.src = save } - return ( -
- - -
+ function onOpenButtonClick () { + fileInput.click() + } + + return ( +
+ + + { + let file = fileInput.files[0] + + let reader = new FileReader() + reader.onload = e => { + let image = new Image() + image.onload = () => { + setWidthDrawing(image.width) + setHeightDrawing(image.height) + setLoadIn(e.target.result) + setLoadInId(-1) + setShowForm("none") + setShowDrawing("block") + setShouldUpdate(!shouldUpdate) + } + image.src = e.target.result + } + reader.readAsText(file) + + }} id={"fileInput"} type={"file"} accept={".redraw"} + style={{pointerEvents: "auto", display: "none"}}/> +
); } diff --git a/src/Drawing.js b/src/Drawing.js index 00915ec..9ce1d90 100644 --- a/src/Drawing.js +++ b/src/Drawing.js @@ -622,39 +622,6 @@ export default function Drawing(p) { gap: 5 }}> - {/*open button*/} - - { - let file = fileInput.files[0] - - let reader = new FileReader() - reader.onload = e => { - let image = new Image() - image.onload = () => { - context.clearRect(0, 0, p.width, p.height) - 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*/} + + {/*home button*/} + diff --git a/src/StartForm.js b/src/StartForm.js index ed6f389..7f69a23 100644 --- a/src/StartForm.js +++ b/src/StartForm.js @@ -80,6 +80,21 @@ export default function StartForm(p) { + +

Recent: