updating

src/App.vue

@@ -20,6 +20,7 @@
 
   </div>
 
+  <!-- Show spash screen if not ready -->
   <Splash v-else />
   
 </template>
@@ -34,35 +35,30 @@ export default defineComponent({
   components: { Splash },
 
   setup() {
-    const { invoke } = useIpc();
+
+    // Show spash screen til true.
     const ready = ref(false);
-    const { saveMessages } = useMessages();
+
+    const { invoke } = useIpc();
+
+    // Post navbar action to backend.
+    const callNavbar = (action: string) => {
+      console.log("Calling navbar")
+      invoke('nav-bar', action);
+    }
+
+    const onWindowReady = (_event: any, payload: any) => {
+      ready.value = true;
+    }
 
     onMounted(() => {
-        window.ipcRenderer.on('window-ready', (_event, payload: {message: boolean}) => {
+        window.ipcRenderer.on("window-ready", onWindowReady);
-            ready.value = payload.message;
-        })
     });
 
     onUnmounted(() => {
-        window.ipcRenderer.removeAllListeners('window-ready')
+        window.ipcRenderer.removeAllListeners("window-ready")
     })
 
-    const saveWindowState = async () => {
-      await invoke('window-save', "");
-    }
-
-    const callNavbar = async (action: string) => {
-
-      // save messages before closing.
-      if (action === 'close') {
-        saveMessages();
-        await saveWindowState();
-      }
-
-      invoke('nav-bar', action);
-    }
-
     return {
         callNavbar,
         ready
@@ -77,7 +73,7 @@ export default defineComponent({
 html, body {
   margin: 0;
   padding: 0;
-  background-color: #EBEBEB;
+  // Background color set in window.ts
 }
 
 #app {

src/background/init.ts

@@ -9,7 +9,7 @@ import { stopStream } from './audio';
 let winActive: boolean;
 
 backgroundMitt.on('window-active', (state: boolean) => {
-    winActive =  state;
+    winActive = state;
 });
 
 export function initApp(dev: boolean): void {

src/background/session.ts

@@ -59,7 +59,6 @@ const handleAuthMessage = (message: string) => {
 }
 
 const handleProfileMessage = (message: Profile) => {
-    console.log("Updating profile...")
     backgroundMitt.emit('ipc-renderer', {
         endpoint: 'update-profile',
         message: message
@@ -86,7 +85,6 @@ const handleStandardMessage = (m: StandardMessage) => {
 }
 
 const handleAnnotationMessage = (message: Annotation) => {
-    console.log("Annotation message")
     backgroundMitt.emit('ipc-renderer', {
         endpoint: 'annotate-message',
         message: message 

src/background/window.ts

@@ -14,16 +14,17 @@ interface IpcRendererPayload {
 
 let win: BrowserWindow | null;
 
-// Util function to handle window close & minimize.
+// Called when a NavBar button is pressed.
-const navBarHandler = (_event, action: string): void => {
+const onNavBar = (_event: any, action: string): void => {
-    switch(action) {
+  console.log("onNavBar")
-        case 'close':
+  if (win) {
-            if (win) win.close();
+    if (action === "close") {
-        break;
+      saveWindowState()
-        case 'min':
+      win.close()
-            if (win) win.minimize();
+    } else {
-        break;
+      win.minimize()
     }
+  }
 }
 
 // Util function to render message on ipc-renderer event.
@@ -35,34 +36,42 @@ const renderMessage = (payload: IpcRendererPayload): void => {
     }
 }
 
-const onWindowSave = (_event, _s: string) => {
+// Write a json with position and size of window.
+const saveWindowState = () => {
     if (win) {
        const bounds = win.getBounds();
-       const state = JSON.stringify({w: bounds.width, h: bounds.height});
+       const position = win.getPosition();
 
-       fs.writeFile('windowstate.json', state, (err: Error) => {
+       const state = JSON.stringify(
+         {
+           w: bounds.width, 
+           h: bounds.height,
+           x: position[0],
+           y: position[1]
+         }
+       );
+
+       fs.writeFile('windowState.json', state, (err) => {
           if (err) throw err;      
           return;
        }); 
     }    
-
 }
 
 // Do this on window mount.
-const windowMount = (): void => {
+const onWindowMount = (): void => {
     backgroundMitt.emit('window-active', true);
+
     // handle win nav-bar event.
     ipcMain.removeHandler('nav-bar'); // avoid setting duplicate handlers
-    ipcMain.handle('nav-bar', navBarHandler);
+    ipcMain.handle('nav-bar', onNavBar);
-
+    
-    ipcMain.removeHandler('window-save'); // avoid setting duplicate handlers
+    // Gateway for messages to the frontend.
-    ipcMain.handle('window-save', onWindowSave);
-    // render messages through ipc-renderer.
     backgroundMitt.on('ipc-renderer', renderMessage);
 }
 
-// do this on window dismount.
+// Do this on window dismount (close).
-const windowDismount = (): void => {
+const onWindowDismount = (): void => {
     win = null;
     backgroundMitt.emit('window-active', false);
 }
@@ -74,49 +83,48 @@ export async function createWindow(): Promise<void> {
     // avoid creating duplicate windows.
     if (win) resolve();
 
-    // read windowState from json.
+    // Load the saved window state.
-    const rawData = fs.readFileSync('windowState.json');
+    const state = JSON.parse(fs.readFileSync('windowState.json').toString());
-    const windowState = JSON.parse(rawData);
 
+    // Define the browser window.
     win = new BrowserWindow({
-      width: windowState.w,
+      width: state.w,
-      height: windowState.h,
+      height: state.h,
+      x: state.x,
+      y: state.y,
       resizable: true,
       backgroundColor: '#EBEBEB',
       frame: false,
       minWidth: 350,
       minHeight: 500,
       webPreferences: {
-        // Use pluginOptions.nodeIntegration, leave this alone
+        nodeIntegration: (process.env.ELECTRON_NODE_INTEGRATION as unknown) as boolean, preload: path.join(__dirname, "preload.js")
-        // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
-        nodeIntegration: (process.env
-          .ELECTRON_NODE_INTEGRATION as unknown) as boolean,
-        preload: path.join(__dirname, "preload.js")
       }
     });
 
-
+    // Load the URL.
     if (process.env.WEBPACK_DEV_SERVER_URL) {
-      // Load the url of the dev server if in development mode
+      win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string); // dev
-      win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string);
+    } 
-    } else {
+
+    else {
       createProtocol("app");
-      // Load the index.html when not in development
+      win.loadURL("app://./index.html"); // prod
-      win.loadURL("app://./index.html");
     }
 
     // Handle window close.
-    win.on("closed", windowDismount);
+    win.on("closed", onWindowDismount);
 
     win.once('ready-to-show', () => {
       if (win) win.show()
     })
 
     win.webContents.on('did-finish-load', () => {
-        if (win) win.webContents.send('window-ready', {
+      if (win) win.webContents.send('window-ready', {
-            message: true
+          message: true
-        });
+      });
-      windowMount();
+
+      onWindowMount();
       resolve();
     });
 

src/components/inputItem/inputItem.vue

@@ -41,11 +41,23 @@ export default defineComponent({
 
     // Mark input item with user's initials.
     const initials = ref("")
-    initials.value = "IN";
 
-    // Initial position.
+    // ---Set xStart and yStart------------------------------------
-    const xStart = 15;
+    const cordsStr = window.localStorage.getItem("input_cords")
-    const yStart = window.innerHeight - 200;
+
+    let cords = {x: 15, y: window.innerHeight - 200} // default values
+
+    if (cordsStr) {
+      console.log("found archived cords!")
+      cords = JSON.parse(cordsStr)
+    }
+
+    const xStart = cords.x;
+    const yStart = cords.y;
+
+    console.log(`xStart: ${xStart}`)
+    console.log(`yStart: ${yStart}`)
+    // ------------------------------------------------------------
 
     // Calculate position of inputItem on drag.
     const { elementX, elementY } = draggify("inputItem", xStart, yStart, 15);
@@ -63,6 +75,17 @@ export default defineComponent({
       window.ipcRenderer.on("update-profile", onUpdateProfile);
     }) 
 
+    const savePosition = () => {
+      const cords = JSON.stringify(
+        {
+          x: elementX.value, 
+          y: elementY.value
+        }
+      )
+      window.localStorage.setItem("input_cords", cords)
+      console.log(`Start saved: ${cords}`)
+    }
+
     onUnmounted(() => {
       window.ipcRenderer.removeAllListeners("update-profile");
     })

src/views/messenger.vue

@@ -32,7 +32,12 @@ export default defineComponent({
     const { emitter } = useMitt();
 
     // Handle messages in view.
-    const { messages, addMessage, updateMessage } = useMessages();
+    const { 
+      messages, 
+      addMessage, 
+      updateMessage,
+      saveMessages
+    } = useMessages();
 
     // Alter existing message.
     const onAnnotateMessage = (_event: any, payload: any) => {

windowState.json

@@ -1 +1 @@
-{"w":352,"h":500}
+{"w":688,"h":536,"x":1478,"y":513}