make bridge between electron vue app

package.json

@@ -21,10 +21,12 @@
     "@fortawesome/fontawesome-free": "^5.15.3",
     "core-js": "^3.6.5",
     "electron": "^12.0.7",
+    "fs": "0.0.1-security",
     "html2canvas": "^1.0.0-rc.7",
     "jquery": "^3.6.0",
     "jquery.nicescroll": "github:tolc/jquery.nicescroll#master",
     "material-icons": "^0.6.3",
+    "path": "^0.12.7",
     "semantic-ui-css": "^2.4.1",
     "vazir-font": "^28.0.0",
     "vue": "^2.6.11",

src/assets/js/winVars.js

@@ -8,11 +8,15 @@ window.appData = {
         textColor: '',
         bgColor: '',
     },
-    pages: [
-
-    ]
+    pages: []
 };
 
+window.project = {
+    'folder': '',
+    'file': '',
+    isSave: false,
+}
+
 window.colors = [
     {
         name: 'Pink',

src/background.js

@@ -3,6 +3,10 @@
 import { app, protocol, BrowserWindow } from 'electron'
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
 import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
+import path from 'path'
+const ipc = require('electron').ipcMain
+const dialog = require('electron').dialog
+
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 // Scheme must be registered before the app is ready
@@ -11,6 +15,7 @@ protocol.registerSchemesAsPrivileged([
 ])
 
 async function createWindow() {
+
   // Create the browser window.
   const win = new BrowserWindow({
     width: 800,
@@ -19,7 +24,11 @@ async function createWindow() {
 
       // Use pluginOptions.nodeIntegration, leave this alone
       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
+      // nodeIntegration: true,
+      // enableRemoteModule: true,
+      // contextIsolation: false ,
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
+      preload: path.join(__dirname, 'preload.js')
     }
   })
   win.removeMenu();
@@ -64,6 +73,7 @@ app.on('ready', async () => {
     }
   }
   createWindow()
+
 })
 
 // Exit cleanly on request from parent process in development mode.
@@ -80,3 +90,11 @@ if (isDevelopment) {
     })
   }
 }
+
+ipc.on('open-file-dialog', function (event) {
+  dialog.showOpenDialog({
+    properties: ['openFile', 'openDirectory']
+  }, function (files) {
+    if (files) event.sender.send('selected-directory', files)
+  })
+})

src/components/elements/AppMenuElement.vue

@@ -1,34 +1,50 @@
 <template>
   <div>
     <div class="ui menu inverted">
-      <div class="header item">
+      <div class="header item" @click="saveAs">
         Anbuias
       </div>
       <div class="ui dropdown item">
         Project
         <i class="dropdown icon"></i>
         <div class="menu">
+          <a class="item"><i class="add icon"></i> New project</a>
           <router-link to="/project" class="item"><i class="setting icon"></i> Project info</router-link>
-          <a class="item"><i class="globe icon"></i> Choose Language</a>
-          <a class="item"><i class="settings icon"></i> Account Settings</a>
+          <a class="item" @click="save"><i class="save icon"></i> Save project</a>
+          <a class="item" @click="saveAs"><i class="save icon outline"></i>  Save project as</a>
         </div>
       </div>
-      <a class="item">
-        Jobs
-      </a>
-      <a class="item">
-        Locations
-      </a>
+<!--      <a class="item"> -->
+<!--        Jobs-->
+<!--      </a>-->
+<!--      <a class="item">-->
+<!--        Locations-->
+<!--      </a>-->
     </div>
   </div>
 </template>
 
 <script>
+/*eslint-disable */
+/*eslint-enable */
 export default {
   name: "AppMenuElement",
   mounted() {
     var $ = window.jQuery;
     $('.ui.dropdown').dropdown();
+  },methods:{
+    save:function () {
+      if (window.project.file == ''){
+        this.saveAs();
+        return false;
+      }
+    },
+    saveAs:function () {
+      window.api.receive("selected-directory", (data) => {
+        console.log(`Received ${data} from main process`);
+      });
+      window.api.send("open-file-dialog",'openFile');
+    }
   }
 }
 </script>

src/components/pages/MainAppPage.vue

@@ -85,6 +85,8 @@ import page from '../elements/PageElement';
 import property from '../elements/PropertyElement';
 import compo from '../elements/ComponentElement';
 import appMenu from '../elements/AppMenuElement';
+// const {remote} = require("electron");
+
 
 export default {
   name: "MainAppPage",
@@ -111,12 +113,10 @@ export default {
       /*eslint-enable */
     } catch (e) {
       //
-      console.log(e.message);
+      // window.ipcRenderer.send('open-save-chart-dialog');
+
     }
   },methods:{
-    getcomponent (x) {
-      return () => import(`../flutter/${component}`);
-    }
   }
 }
 </script>

src/main.js

@@ -10,6 +10,7 @@ Vue.config.productionTip = false;
 require('@/assets/js/winVars.js');
 
 
+
 new Vue({
   router,
   render: h => h(App),

src/preload.js

@@ -0,0 +1,35 @@
+// const { remote } = require('electron');
+// console.log(remote);
+// let currWindow = remote.BrowserWindow.getFocusedWindow();
+//
+// console.log(remote);
+// window.closeCurrentWindow = function(){
+//     currWindow.close();
+// }
+
+const {
+    contextBridge,
+    ipcRenderer
+} = require("electron");
+// Expose protected methods that allow the renderer process to use
+// the ipcRenderer without exposing the entire object
+contextBridge.exposeInMainWorld(
+    "api", {
+        send: (channel, data) => {
+            console.log(channel,data);
+            // whitelist channels
+            console.log(ipcRenderer);
+            let validChannels = ["toMain",'open-file-dialog'];
+            if (validChannels.includes(channel)) {
+                ipcRenderer.send(channel, data);
+            }
+        },
+        receive: (channel, func) => {
+            let validChannels = ["fromMain"];
+            if (validChannels.includes(channel)) {
+                // Deliberately strip event as it includes `sender`
+                ipcRenderer.on(channel, (event, ...args) => func(...args));
+            }
+        }
+    }
+);

vue.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    pluginOptions: {
+        electronBuilder: {
+            preload: './src/preload.js',
+            // Or, for multiple preload files:
+            // preload: { preload: 'src/preload.js', otherPreload: 'src/preload2.js' }
+        }
+    }
+};