Merge pull request #242 from mgreminger/saving-improvements

feat: reusing file name when saving
mgreminger · Feb 27, 2024 · 3cfe00b · 3cfe00b
2 parents 95fc1a9 + 36f65cc
commit 3cfe00b
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # ![EngineeringPaper.xyz](https://user-images.githubusercontent.com/6439649/212795699-7cc908e1-00a4-44ed-a034-695f056ee84a.png)
 
-EngineeringPaper.xyz is a web app for engineering calculations that handles unit conversion/checking automatically and also supports plotting, solving systems of equations, and documenting your calculations (see the [official blog](https://blog.engineeringpaper.xyz) for many examples). It's easy to share your calculations by creating a [shareable link](https://engineeringpaper.xyz/oMbWLXMZ6ChQ3g3ZxRbJQD) that anyone can open and build off of. Additionaly, you can save and open your files locally if you prefer not to save to the cloud. EngineeringPaper.xzy runs on Mac, Windows, Linux, and ChromeOS and works on all of the major browsers. Additionally, EngineeringPaper.xyz is designed to run well on Android and iOS devices. [Launch EngineeringPaper.xyz](https://EngineeringPaper.xyz) in your browser to try it out.
+EngineeringPaper.xyz is a web app for engineering calculations that handles unit conversion/checking automatically and also supports plotting, solving systems of equations, and documenting your calculations (see the [official blog](https://blog.engineeringpaper.xyz) for many examples). It's easy to share your calculations by creating a [shareable link](https://engineeringpaper.xyz/oMbWLXMZ6ChQ3g3ZxRbJQD) that anyone can open and build off of. Additionaly, you can save and open your files locally if you prefer not to save to the cloud. EngineeringPaper.xyz runs on Mac, Windows, Linux, and ChromeOS and works on all of the major browsers. Additionally, EngineeringPaper.xyz is designed to run well on Android and iOS devices. [Launch EngineeringPaper.xyz](https://EngineeringPaper.xyz) in your browser to try it out.
 
 ![platforms_cropped](https://user-images.githubusercontent.com/6439649/212774749-caab6190-7a45-4f04-a31c-ffdb6b6e4b96.png)
 

diff --git a/src/App.svelte b/src/App.svelte
@@ -16,7 +16,7 @@
   import { getDefaultBaseUnits, isDefaultConfig } from "./sheet/Sheet";
   import type { Statement } from "./parser/types";
   import type { SystemDefinition } from "./cells/SystemCell";
-  import { isVisible, versionToDateString, debounce, saveFileBlob } from "./utility";
+  import { isVisible, versionToDateString, debounce, saveFileBlob, sleep } from "./utility";
   import type { ModalInfo, RecentSheets, RecentSheetUrl, RecentSheetFile, StatementsAndSystems } from "./types";
   import type { Results } from "./resultTypes";
   import { getHash, API_GET_PATH, API_SAVE_PATH } from "./database/utility";
@@ -90,7 +90,7 @@
 
   const apiUrl = window.location.origin;
 
-  const currentVersion = 20240120;
+  const currentVersion = 20240226;
   const tutorialHash = "fFjTsnFoSQMLwcvteVoNtL";
 
   const termsVersion = 20240110;
@@ -1531,49 +1531,60 @@ Please include a link to this sheet in the email to assist in debugging the prob
 
     if (window.showSaveFilePicker) {
       // browser supports file system access API, so show user a file picker
+      let fileSaved = false;
       let saveFileHandle: FileSystemFileHandle;
-      
-      try {
-        const currentFileHandle = getFileHandleFromKey(window.history.state?.fileKey);
 
-        const options: SaveFilePickerOptions = {
-          types: fileTypes
+      // use current file handle if user has already saved this sheet
+      const currentFileHandle = getFileHandleFromKey(window.history.state?.fileKey);
+      if (currentFileHandle && window.history.state?.fileKey ===  currentFileHandle.name + $title + $sheetId) {
+        modalInfo = {state: "saving", modalOpen: true, heading: "Saving File"};
+        try {
+          const writable = await currentFileHandle.createWritable();
+          await writable.write(fileData);
+          await writable.close();
+
+          await sleep(250); // prevent save modal from flashing too quickly
+
+          saveFileHandle = currentFileHandle;
+          fileSaved = true;
+        } catch(e) {
+          // save using existing handle unsuccessful, will proceed to using the save dialog
+          modalInfo.modalOpen = false;
         }
+      }
 
-        if (currentFileHandle) {
-          // @ts-ignore
-          options.id = "epxyz";
-          // @ts-ignore
-          options.startIn = currentFileHandle;
-          options.suggestedName = currentFileHandle.name;
-        } else {
+      if (!fileSaved) {
+        const options: SaveFilePickerOptions = {
+          types: fileTypes,
           // @ts-ignore
-          options.id = "epxyz";
-          options.suggestedName = `${$title}.epxyz`;
+          id: "epxyz",
+          suggestedName: `${$title}.epxyz`
         }
         
-        saveFileHandle = await window.showSaveFilePicker(options);
-      } catch(e) {
-        // user cancelled the save operation
-        console.log('Save cancelled.');
-        return;
-      }
+        try {
+          saveFileHandle = await window.showSaveFilePicker(options);
+        } catch(e) {
+          // user cancelled the save operation
+          console.log('Save cancelled.');
+          return;
+        }
 
-      modalInfo = {state: "saving", modalOpen: true, heading: "Saving File"};
-      try {
-        const writable = await saveFileHandle.createWritable();
-        await writable.write(fileData);
-        await writable.close();
-      } catch(e) {
-        //save failed
-        modalInfo = {
-          state: "error",
-          error: `<p>Error saving sheet: ${saveFileHandle.name} </p><br>
-                  <p>${e}</p`,
-          modalOpen: true,
-          heading: "Saving Sheet"
-        };
-        return;
+        modalInfo = {state: "saving", modalOpen: true, heading: "Saving File"};
+        try {
+          const writable = await saveFileHandle.createWritable();
+          await writable.write(fileData);
+          await writable.close();
+        } catch(e) {
+          //save failed
+          modalInfo = {
+            state: "error",
+            error: `<p>Error saving sheet: ${saveFileHandle.name} </p><br>
+                    <p>${e}</p`,
+            modalOpen: true,
+            heading: "Saving Sheet"
+          };
+          return;
+        }
       }
 
       modalInfo.modalOpen = false;
@@ -1586,6 +1597,9 @@ Please include a link to this sheet in the email to assist in debugging the prob
       // browser does not support file system access API, file will be downloaded with default name
       saveFileBlob(fileData, `${$title}.epxyz`);
     }
+
+    $unsavedChange = false;
+    $autosaveNeeded = false;
   }
 
 

diff --git a/src/DownloadDocumentModal.svelte b/src/DownloadDocumentModal.svelte
@@ -52,7 +52,7 @@
       required={true}
       bind:selected={docType}
     >
-      <RadioButton labelText="Native EngineeringPaper.xyz .epxzy Sheet File (no data leaves your computer)" value="epxyz" />
+      <RadioButton labelText="Native EngineeringPaper.xyz .epxyz Sheet File (no data leaves your computer)" value="epxyz" />
       <RadioButton labelText="Markdown File (no data leaves your computer)" value="md" />
       <RadioButton labelText="Microsoft Word .docx File (processed on the EngineeringPaper.xyz server, no data is retained on the server)" value="docx" />
       <RadioButton labelText="PDF File (processed on the EngineeringPaper.xyz server, no data is retained on the server)" value="pdf" />

diff --git a/src/Updates.svelte b/src/Updates.svelte
@@ -16,6 +16,25 @@
   }
 </style>
 
+<em>February 26, 2024</em>
+<h4>File Saving Improvements</h4>
+<p>
+   When using Chrome, or a Chrome based browser such as Edge, the file saving experience has been
+   improved. Hitting {modifier}-S on the keyboard will prompt you to choose the file name and location
+   for the first save. For future saves, the file will be automatically replaced when you hit
+   {modifier}-S. If you would like to save the file as a different name, simply change the sheet title
+   and you'll be prompted to choose a new file name the next time you hit {modifier}-S. Another 
+   option to save as a different file name without changing the sheet title is to disable the file
+   saving permission using the browser's address bar. These options are covered in this 
+   <a href="https://youtu.be/bxAitVcI_Pg?si=XDM1Qk79EE-hPpq6" target="_blank">
+   EngineeringPaper.xyz File Management Tutorial Video</a>. Unfortunately, Firefox and 
+   Safari don't currently support the 
+   <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_API" target="_blank">
+   File System Access API</a> required to enable these advanced file management features. 
+</p>
+
+<br>
+
 <em>January 20, 2024</em>
 <h4>LaTeX Export</h4>
 <p>

diff --git a/src/utility.ts b/src/utility.ts
@@ -90,6 +90,11 @@ export function debounce(func: Function, timeout = 300){
 }
 
 
+export function sleep(timeout: number) {
+  return new Promise((resolve) => setTimeout(resolve, timeout));
+}
+
+
 export function getBlankMatrixLatex(numRows: number, numColumns: number): string {
   let blankMatrixLatex = "\\begin{bmatrix} ";