Project Names

src/App.js

@@ -15,6 +15,7 @@ export default function App() {
     const [loadIn, setLoadIn] = useState(null)
     const [loadInId, setLoadInId] = useState(-1)
     const [shouldUpdate, setShouldUpdate] = useState(false)
+    const [nameCurrent, setNameCurrent] = useState("")
 
     useEffect(() => {
 
@@ -28,7 +29,7 @@ export default function App() {
         setShowDrawing("block")
     }
 
-    function onLoadIn(save, id) {
+    function onLoadIn(save, id, name) {
         let image = new Image()
         image.onload = () => {
             setWidthDrawing(image.width)
@@ -37,6 +38,7 @@ export default function App() {
             setShowForm("none")
             setShowDrawing("block")
             setLoadInId(id)
+            setNameCurrent(name)
             setShouldUpdate(!shouldUpdate)
         }
         image.src = save
@@ -49,7 +51,7 @@ export default function App() {
     return (
         <div>
             <StartForm onOpenButtonClick={onOpenButtonClick} onLoadIn={onLoadIn} show={showForm} onCreateCanvas={onCreateCanvas}/>
-            <Drawing shouldUpdate={shouldUpdate} loadInId={loadInId} loadIn={loadIn} show={showDrawing}
+            <Drawing name={nameCurrent} shouldUpdate={shouldUpdate} loadInId={loadInId} loadIn={loadIn} show={showDrawing}
                      width={widthDrawing} height={heightDrawing}/>
             <input onChange={() => {
                 let file = fileInput.files[0]
@@ -65,6 +67,7 @@ export default function App() {
                         setShowForm("none")
                         setShowDrawing("block")
                         setShouldUpdate(!shouldUpdate)
+                        setNameCurrent(file.name)
                     }
                     image.src = e.target.result
                 }

src/Drawing.js

@@ -51,6 +51,10 @@ export default function Drawing(p) {
         hintCanvas = document.getElementById("hintCanvas")
         hintContext = hintCanvas.getContext("2d")
 
+        if(p.name !== "") {
+            setNameInput(p.name)
+        }
+
         if (p.loadIn !== null) {
             console.log("test")
             let image = new Image()
@@ -97,6 +101,7 @@ export default function Drawing(p) {
     const [textInputX, setTextInputX] = useState(0)
     const [textInputY, setTextInputY] = useState(0)
     const [showTextInput, setShowTextInput] = useState(false)
+    const [nameInput, setNameInput] = useState("")
 
 
     class Position {
@@ -272,7 +277,12 @@ export default function Drawing(p) {
         let image = new Image()
         image.src = "data:image/png;base64," + img
         downLink.href = img
-        downLink.download = "export.png"
+        if(nameInput !== "") {
+            downLink.download = nameInput + ".png"
+        }
+        else {
+            downLink.download = "export.png"
+        }
         downLink.click()
     }
 
@@ -281,13 +291,15 @@ export default function Drawing(p) {
         let blob = new Blob([img], {type: "text/plain"})
         var url = URL.createObjectURL(blob)
         downLink.href = url
-        downLink.download = "save.redraw"
+        if(nameInput !== "") {
+            downLink.download = nameInput + ".redraw"
+        }
+        else {
+            downLink.download = "save.redraw"
+        }
         downLink.click()
     }
 
-    function onOpenButtonClick() {
-        fileInput.click()
-    }
 
     function handleToolChange(e) {
         setShowTextInput(false)
@@ -405,6 +417,18 @@ export default function Drawing(p) {
                                 d="M2 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                         </svg>
                     </div>
+
+
+                    <input type={"text"} placeholder={"Enter Name"} style={{
+                        borderWidth: 0,
+                        boxShadow: "0 0 5px gray",
+                        borderRadius: 15,
+                        padding: 10,
+                        pointerEvents: "auto"
+                    }} value={nameInput} onChange={e => {
+                        setNameInput(e.currentTarget.value)
+                    }}/>
+
                     <div style={{
                         display: menuBarShown ? "flex" : "none",
                         justifyContent: "center",
@@ -684,14 +708,14 @@ export default function Drawing(p) {
                                         if (arrString !== null) {
                                             let json = JSON.parse(arrString)
                                             if (p.loadInId === -1) {
-                                                json.arr.push(new Save(save))
+                                                json.arr.push(new Save(save, nameInput))
                                                 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)
+                                                        json.arr[i] = new Save(save, nameInput)
                                                         localStorage.setItem("save", JSON.stringify(json))
                                                         break
                                                     }
@@ -699,7 +723,7 @@ export default function Drawing(p) {
                                             }
                                         } else {
                                             let json = {
-                                                arr: [new Save(save)]
+                                                arr: [new Save(save, nameInput)]
                                             }
                                             localStorage.setItem("save", JSON.stringify(json))
                                         }

src/Save.js

@@ -1,9 +1,14 @@
 export class Save {
-    constructor(content) {
+    constructor(content, name) {
         let localID = localStorage.getItem("id")
         this.id = 0
         let now = new Date()
-        this.name = now.getFullYear() + "." + (now.getMonth() + 1)+ "." + now.getDate() + "-" + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds()
+        if(name === "") {
+            this.name = now.getFullYear() + "." + (now.getMonth() + 1) + "." + now.getDate() + "-" + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds()
+        }
+        else {
+            this.name = name
+        }
         if(localID !== null) {
             this.id = parseInt(localID) + 1
             localStorage.setItem("id", this.id)

src/StartForm.js

@@ -119,7 +119,7 @@ export default function StartForm(p) {
                             minWidth: 80,
                         }} onClick={(f) => {
                             if(f.target === f.currentTarget) {
-                                p.onLoadIn(e.content, e.id)
+                                p.onLoadIn(e.content, e.id, e.name)
                             }
                         }}><p style={{userSelect: "none", pointerEvents: "none"}}>{e.name}</p>
                         <button style={{