.gitignore

@@ -1,22 +1,215 @@
-lib-cov
-*.seed
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+### Node ###
+# Logs
+logs
 *.log
-*.csv
-*.dat
-*.out
-*.pid
-*.gz
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
+# Runtime data
 pids
-logs
-results
+*.pid
+*.seed
+*.pid.lock
 
-npm-debug.log
-.DS_Store
-node_modules
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
 bower_components
-build
 
-.jshintrc
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
 
-Glyphr_Studio_Autohacked_For_Electron.html
+### Glyphyr ###

CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+## 0.6.0
+
+- Updated Glyphr-Studio to v1.14.0.
+  - Note: This is the final 1.0 version.
+- Updated Electron to v28.2.1.
+  - Dropped support for Windows 7.
+  - Dropped support for macOS 10.14 (Mojave) and below.
+  - Improved support for modern versions of operating systems.
+  - [Disabled browser node integration and enable context isolation](https://www.electronjs.org/docs/latest/tutorial/context-isolation).
+  - [Enabled browser process sandboxing](https://www.electronjs.org/docs/latest/tutorial/sandbox).
+- Added "Save Image As" item to context menu when right clicking canvas.
+- Added arm64 distributions.
+- Added more native menu items.
+- Added window size and positioning persistence.
+- Updated save confirmation dialog to only appear when closing the app with unsaved changes.
+- Removed save popups when saving a pre-existing project.
+- Fixed a bug where save buttons would sometimes save with the wrong file type.
+- Fixed a bug where ⌘/CTRL+O would open a browser tab.
+- Updated all dependencies, including replacing obsolete ones with newer ones.

README.md

@@ -1,22 +1,28 @@
 # Glyphr Studio Desktop
 
-Desktop application for [Glyphr Studio](http://glyphrstudio.com) built in [Electron](https://electron.atom.io/)!
+Desktop application for [Glyphr Studio](http://glyphrstudio.com) built in [Electron](https://www.electronjs.org/)!
 
 ## Download
 
-- [Linux 32-bit](https://github.com/glyphr-studio/Glyphr-Studio-Desktop/releases/download/v0.4.3/Glyphr.Studio-linux-ia32.zip)
-- [Linux 64-bit](https://github.com/glyphr-studio/Glyphr-Studio-Desktop/releases/download/v0.4.3/Glyphr.Studio-linux-x64.zip)
-- [macOS](https://github.com/glyphr-studio/Glyphr-Studio-Desktop/releases/download/v0.4.3/Glyphr.Studio-darwin-x64.zip)
-- [Windows 32-bit](https://github.com/glyphr-studio/Glyphr-Studio-Desktop/releases/download/v0.4.3/Glyphr.Studio-win32-ia32.zip)
-- [Windows 64-bit](https://github.com/glyphr-studio/Glyphr-Studio-Desktop/releases/download/v0.4.3/Glyphr.Studio-win32-x64.zip)
+### macOS
+
+[Download](https://github.com/glyphr-studio/Glyphr-Studio-Desktop/releases/latest) the `.dmg` file.
+
+### Windows 10+
+
+[Download](https://github.com/glyphr-studio/Glyphr-Studio-Desktop/releases/latest) the `.exe` file.
+
+### Linux
+
+[Download](https://github.com/glyphr-studio/Glyphr-Studio-Desktop/releases/latest) the `.AppImage`, `.deb`, or `.snap` file
 
 ## How to run from source
 
 Be sure to have [Node.js](https://nodejs.org) and [git](https://git-scm.com) installed.
 
 Then:
 
-```
+```bash
 git clone https://github.com/glyphr-studio/Glyphr-Studio-Desktop.git
 cd Glyphr-Studio-Desktop
 npm i
@@ -25,33 +31,31 @@ npm start
 
 ## Build
 
-Builds are constructed with [electron-packager](https://github.com/maxogden/electron-packager).
+Builds are constructed with [electron-builder](https://github.com/electron-userland/electron-builder).
 
-Be sure to have [Node.js](https://nodejs.org) and [git](https://git-scm.com) installed.
+Be sure to have [Node.js](https://nodejs.org) and [git](https://git-scm.com) installed. Linux/Mac users who wish to do builds for Windows will need to have [WINE](https://winehq.org) installed. Mac users who wish to do builds for Windows will need to [XQuartz](https://www.xquartz.org) installed in order to run WINE. It is recommended that Mac users install both Wine and XQuartz via [Homebrew](https://brew.sh).
 
 First, be sure to run:
 
-```
+```bash
 git clone https://github.com/glyphr-studio/Glyphr-Studio-Desktop.git
 cd Glyphr-Studio-Desktop
 npm i
 ```
 
 Then:
 
-All Platforms: `npm run package`
-
-64-Bit Platforms Only: `npm run package -- --64`
-
-Linux 32-Bit: `npm run package -- --linux32`
+To build package zips use:
 
-Linux 64-Bit: `npm run package -- --linux`
-
-macOS: `npm run package -- --mac`
+```bash
+npm run pack
+```
 
-Windows 32-Bit: `npm run package -- --win32`
+To build full distributions use:
 
-Windows 64-Bit: `npm run package -- --win`
+```bash
+npm run dist
+```
 
 ## Troubleshooting
 

build.js

@@ -1,32 +1,35 @@
-const fs = require('fs')
+const fs = require('fs-extra')
 
-let glyphrPath = 'node_modules/Glyphr-Studio/dev/Glyphr_Studio.html'
-let glyphrElectron = 'node_modules/Glyphr-Studio/dev/Glyphr_Studio_Electron.html'
-let rendererJs = '<script>require(\'../../../renderer.js\')</script></body>'
-let rendererCss = 'href="Glyphr_Studio.css" />\n<link rel="stylesheet" type="text/css" href="../../../renderer.css" />'
-let html = fs.readFileSync(glyphrPath, 'utf8')
+;(async () => {
+  const glyphrElectron = 'node_modules/Glyphr-Studio/dev/Glyphr_Studio_Electron.html'
+  const rendererJs = '<script type="module" src="../../../renderer.js"></script></body>'
+  const rendererCss = 'href="Glyphr_Studio.css" />\n<link rel="stylesheet" type="text/css" href="../../../renderer.css" />'
+  const html = await fs.readFile('node_modules/Glyphr-Studio/dev/Glyphr_Studio.html', 'utf8')
 
-fs.readFile(glyphrElectron, 'utf8', (err, data) => {
-  if (err) {
-    generateGlyphrElectron()
+  if (!await fs.pathExists(glyphrElectron)) {
+    // generate electron html if it doesn't exist
+    await generateGlyphrElectron()
   } else {
-    data = data
+    // only generate electron html if original has been modified
+    const electronFileData = await fs.readFile(glyphrElectron, 'utf8')
+    const reversedFileData = electronFileData
       .replace(rendererJs, '</body>')
       .replace(rendererCss, 'href="Glyphr_Studio.css" />')
-    if (data !== html) {
-      generateGlyphrElectron()
+
+    if (html !== reversedFileData) {
+      await generateGlyphrElectron()
     }
   }
-})
 
-function generateGlyphrElectron () {
-  let htmlWithRenderer = html
-    // add renderer.js
-    .replace('</body>', rendererJs)
+  async function generateGlyphrElectron () {
+    console.log('Building Glyphr_Studio_Electron.html...')
+    const htmlWithRenderer = html
+      // add renderer.js
+      .replace('</body>', rendererJs)
 
-    // add renderer.css
-    .replace('href="Glyphr_Studio.css" />', rendererCss)
+      // add renderer.css
+      .replace('href="Glyphr_Studio.css" />', rendererCss)
 
-  console.log('Building Glyphr_Studio_Electron.html...')
-  fs.writeFileSync(glyphrElectron, htmlWithRenderer)
-}
+    await fs.outputFile(glyphrElectron, htmlWithRenderer)
+  }
+})()

electron-builder.yml

@@ -0,0 +1,39 @@
+appId: com.glyphrstudio.desktop
+productName: Glyphr Studio
+mac:
+  category: public.app-category.graphics-design
+  target:
+    - target: default
+      arch:
+        - arm64
+        - x64
+dmg:
+  iconSize: 140
+  iconTextSize: 18
+win:
+  verifyUpdateCodeSignature: false
+  artifactName: ${productName} Setup ${version}-${arch}.${ext}
+  target:
+    - target: nsis
+      arch:
+        - arm64
+        - x64
+linux:
+  target:
+    - target: AppImage
+      arch:
+        - arm64
+        - x64
+    - target: deb
+      arch:
+        - arm64
+        - x64
+    - target: snap
+      arch:
+        - arm64
+        - x64
+  synopsis: Glyphr Studio is a free, web based font designer
+  description: Font design has a high barrier of entry. Professional font design programs are very complex, and/or quite expensive. Glyphr Studio is streamlined and made for font design hobbyists... and it's free!
+  category: Graphics
+snap:
+  base: core20

main.js

@@ -1,148 +1,178 @@
 const electron = require('electron')
-const {app, BrowserWindow, Menu} = electron
-const open = require('open')
+const { app, BrowserWindow, ipcMain: ipc, dialog, Menu } = electron
+const contextMenu = require('electron-context-menu')
+const { download } = require('electron-dl')
+const windowStateKeeper = require('electron-window-state')
 const path = require('path')
+const fs = require('fs-extra')
 
-// menu template
-const template = [
-  {
-    label: 'File',
-    submenu: [
-      {
-        label: 'Save',
-        accelerator: 'CmdOrCtrl+S',
-        enabled: false,
-        click () {
-          win.webContents.send('save', '')
-        }
-      },
-      {
-        label: 'Save As',
-        accelerator: 'CmdOrCtrl+Shift+S',
-        enabled: false,
-        click () {
-          win.webContents.send('saveas', '')
-        }
-      }
-    ]
-  },
-  {
-    label: 'Edit',
-    submenu: [
-      { label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:' },
-      { label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:' },
-      { type: 'separator' },
-      { label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:' },
-      { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
-      { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' },
-      { label: 'Select All', accelerator: 'CmdOrCtrl+A', selector: 'selectAll:' }
-    ]
-  },
-  {
-    label: 'View',
-    submenu: [
-      {role: 'resetzoom'},
-      {role: 'zoomin'},
-      {role: 'zoomout'},
-      {type: 'separator'},
-      {role: 'togglefullscreen'}
-    ]
-  },
-  {
-    role: 'window',
-    submenu: [
-      {role: 'minimize'},
-      {role: 'close'}
-    ]
-  },
-  {
-    role: 'help',
-    submenu: [
-      {
-        label: 'Learn More',
-        click () {
-          electron.shell.openExternal('http://glyphrstudio.com')
-        }
-      }
-    ]
+let win
+let menuTemplate
+
+/**
+ * IPC Handlers
+ */
+
+// handle app exit
+ipc.handle('exit', () => {
+  app.exit()
+})
+
+// handle close confirmation dialog
+ipc.handle('confirmClose', async (event, fileName) => {
+  let name = 'your project'
+
+  if (fileName) {
+    name = path.basename(fileName)
   }
-]
-
-if (process.platform === 'darwin') {
-  template.unshift({
-    label: 'Glyphr Studio',
-    submenu: [
-      {role: 'about'},
-      {type: 'separator'},
-      {role: 'services', submenu: []},
-      {type: 'separator'},
-      {role: 'hide'},
-      {role: 'hideothers'},
-      {role: 'unhide'},
-      {type: 'separator'},
-      {role: 'quit'}
-    ]
+
+  const result = await dialog.showMessageBox({
+    type: 'question',
+    title: 'Confirm',
+    buttons: ['Save', 'Cancel', 'Don\'t Save'],
+    message: `Would you like to save the changes you made to ${name} before closing?`
   })
 
-  // Window menu
-  template[3].submenu = [
-    {role: 'close'},
-    {role: 'minimize'},
-    {role: 'zoom'},
-    {type: 'separator'},
-    {role: 'front'}
-  ]
-}
+  return result
+})
 
-let win
+// handle saving canvas as image
+ipc.handle('saveCanvasImage', async (event, data) => {
+  await download(win, data, { saveAs: true })
+})
+
+// handle saving new project with confirmation dialog
+ipc.handle('saveProject', async (event, fname, buffer) => {
+  const { filePath } = await dialog.showSaveDialog({
+    properties: ['openFile'],
+    title: 'Choose where to save project...',
+    defaultPath: process.env.HOME + '/' + fname
+  })
+
+  if (filePath) {
+    await fs.outputFile(filePath, buffer)
+  }
+
+  return filePath
+})
+
+// handle quick overwrite save of project in progress
+ipc.handle('saveProjectOverwrite', async (event, file, buffer) => {
+  await fs.outputFile(file, buffer)
+})
+
+// handle enabling of save menu
+ipc.handle('enableSaveMenu', () => {
+  // overrride some renderer keyboard shortcuts in favor of electron accelerators
+  win.webContents.on('before-input-event', (event, input) => {
+    // save
+    if ((input.control || input.meta) && input.key.toLowerCase() === 's') {
+      event.preventDefault()
+      win.webContents.send('ping', 'save')
+    }
+
+    // save as
+    if ((input.control || input.meta) && input.shift && input.key.toLowerCase() === 's') {
+      event.preventDefault()
+      win.webContents.send('ping', 'saveas')
+    }
+  })
+
+  // menu positioning differs depending on the OS
+  let i = 0
+  if (process.platform === 'darwin') {
+    i = 1
+  }
+
+  // enable save buttons in menu template
+  menuTemplate[i].submenu[0].enabled = true
+  menuTemplate[i].submenu[1].enabled = true
+
+  // rebuild updated menu
+  const menu = Menu.buildFromTemplate(menuTemplate)
+  Menu.setApplicationMenu(menu)
+})
 
 function createWindow () {
+  const mainWindowState = windowStateKeeper({
+    defaultWidth: 1300,
+    defaultHeight: 900
+  })
+
   win = new BrowserWindow({
-    width: 1300,
-    height: 900,
-    minWidth: 1300,
-    minHeight: 900,
-    icon: process.platform === 'linux' && path.join(__dirname, '/images/appicon.png')
+    x: mainWindowState.x,
+    y: mainWindowState.y,
+    width: mainWindowState.width,
+    height: mainWindowState.height,
+    minWidth: 800,
+    minHeight: 640,
+    icon: process.platform === 'linux' && path.join(__dirname, '/build/icon.png'),
+    webPreferences: {
+      preload: path.resolve(app.getAppPath(), 'preload.js'),
+      contextIsolation: true,
+      sandbox: true
+    }
   })
-  win.loadURL(path.join('file://', __dirname, '/node_modules/Glyphr-Studio/dev/Glyphr_Studio_Electron.html'))
 
-  let webContents = win.webContents
+  win.loadFile('node_modules/Glyphr-Studio/dev/Glyphr_Studio_Electron.html')
+
+  // save window position/size across loads
+  mainWindowState.manage(win)
+
+  // create the menubar and get a copy of the template
+  menuTemplate = require('./menu')(win)
+
+  // set up app context menu
+  contextMenu({
+    prepend: (defaultActions, parameters, browserWindow) => [
+      {
+        label: 'Save Image As...',
+        visiable: parameters.mediaType === 'canvas',
+        click: () => {
+          win.webContents.send('ping', 'saveImage')
+        }
+      }
+    ]
+  })
+
+  // configure about app panel
+  app.setAboutPanelOptions({
+    applicationName: app.getName(),
+    applicationVersion: app.getVersion(),
+    website: 'http://glyphrstudio.com/v1'
+  })
+
+  const webContents = win.webContents
 
   // enable for debugging
-  // win.webContents.openDevTools();
+  // win.webContents.openDevTools()
+
+  webContents.on('new-window', async (event, url) => {
+    const open = await import('open')
 
-  webContents.on('new-window', function (event, url) {
     event.preventDefault()
     open(url)
   })
 
-  win.on('closed', function () {
-    win = null
+  // inform renderer of close event
+  win.on('close', event => {
+    event.preventDefault()
+    win.webContents.send('ping', 'confirmClose')
   })
 
-  const menu = Menu.buildFromTemplate(template)
-  Menu.setApplicationMenu(menu)
+  win.on('closed', () => {
+    win = null
+  })
 }
 
 app.on('ready', createWindow)
 
-app.on('window-all-closed', function () {
+app.on('window-all-closed', () => {
   app.quit()
 })
 
-app.on('activate', function () {
+app.on('activate', () => {
   if (win === null) {
     createWindow()
   }
 })
-
-app.on('enableSaveMenu', function () {
-  let i = 0
-  if (process.platform === 'darwin') {
-    i = 1
-  }
-  template[i].submenu[0].enabled = true
-  template[i].submenu[1].enabled = true
-  const menu = Menu.buildFromTemplate(template)
-  Menu.setApplicationMenu(menu)
-})

menu.js

@@ -0,0 +1,134 @@
+const { app, Menu } = require('electron')
+
+const isMac = process.platform === 'darwin'
+
+module.exports = window => {
+  const template = [
+  // { role: 'appMenu' }
+    ...(isMac
+      ? [{
+          label: app.name,
+          submenu: [
+            { role: 'about' },
+            { type: 'separator' },
+            { role: 'services' },
+            { type: 'separator' },
+            { role: 'hide' },
+            { role: 'hideOthers' },
+            { role: 'unhide' },
+            { type: 'separator' },
+            { role: 'quit' }
+          ]
+        }]
+      : []),
+    // { role: 'fileMenu' }
+    {
+      label: 'File',
+      submenu: [
+        {
+          label: 'Save',
+          accelerator: 'CmdOrCtrl+S',
+          enabled: false,
+          click () {
+            window.webContents.send('ping', 'save')
+          }
+        },
+        {
+          label: 'Save As',
+          accelerator: 'CmdOrCtrl+Shift+S',
+          enabled: false,
+          click () {
+            window.webContents.send('ping', 'saveas')
+          }
+        },
+        ...(isMac ? [{ role: 'close' }] : [{ role: 'quit' }])
+      ]
+    },
+    // { role: 'editMenu' }
+    {
+      label: 'Edit',
+      submenu: [
+        { role: 'undo' },
+        { role: 'redo' },
+        { type: 'separator' },
+        { role: 'cut' },
+        { role: 'copy' },
+        { role: 'paste' },
+        ...(isMac
+          ? [
+              { role: 'pasteAndMatchStyle' },
+              { role: 'delete' },
+              { role: 'selectAll' },
+              { type: 'separator' },
+              {
+                label: 'Speech',
+                submenu: [
+                  { role: 'startSpeaking' },
+                  { role: 'stopSpeaking' }
+                ]
+              }
+            ]
+          : [
+              { role: 'delete' },
+              { type: 'separator' },
+              { role: 'selectAll' }
+            ])
+      ]
+    },
+    // { role: 'viewMenu' }
+    {
+      label: 'View',
+      submenu: [
+        { role: 'reload' },
+        { role: 'forceReload' },
+        { role: 'toggleDevTools' },
+        { type: 'separator' },
+        { role: 'resetZoom' },
+        { role: 'zoomIn' },
+        { role: 'zoomOut' },
+        { type: 'separator' },
+        { role: 'togglefullscreen' }
+      ]
+    },
+    // { role: 'windowMenu' }
+    {
+      label: 'Window',
+      submenu: [
+        { role: 'minimize' },
+        { role: 'zoom' },
+        ...(isMac
+          ? [
+              { type: 'separator' },
+              { role: 'front' },
+              { type: 'separator' },
+              { role: 'window' }
+            ]
+          : [
+              { role: 'close' }
+            ])
+      ]
+    },
+    {
+      role: 'help',
+      submenu: [
+        {
+          label: 'Learn More',
+          click: async () => {
+            const { shell } = require('electron')
+            await shell.openExternal('http://glyphrstudio.com/v1')
+          }
+        },
+        ...(!isMac
+          ? [
+              { role: 'about' }
+            ]
+          : [])
+      ]
+    }
+  ]
+
+  const menu = Menu.buildFromTemplate(template)
+  Menu.setApplicationMenu(menu)
+
+  return template
+}

package.json

@@ -1,13 +1,13 @@
 {
   "name": "glyphr-studio-desktop",
   "productName": "Glyphr Studio",
-  "version": "0.4.3",
+  "version": "0.6.0",
   "description": "A desktop client for Glyphr Studio",
   "author": "Glyphr Studio team <mail@glyphrstudio.com>",
   "contributors": [
     "Matt LaGrandeur <mail@glyphrstudio.com>",
     "Mateusz Zawartka <mail@glyphrstudio.com>",
-    "Troy Coutu <autre31415@gmail.com>",
+    "Troy Coutu <troy.d.coutu@gmail.com>",
     "Eric Newport <kethinov@gmail.com>"
   ],
   "license": "GPL-3.0",
@@ -17,31 +17,29 @@
   },
   "main": "main.js",
   "dependencies": {
-    "Glyphr-Studio": "glyphr-studio/Glyphr-Studio-1#v1.10.01",
-    "electron-editor-context-menu": "1.1.1",
-    "open": "0.0.5"
+    "Glyphr-Studio": "glyphr-studio/Glyphr-Studio-1#v1.14.0",
+    "electron-context-menu": "3.6.1",
+    "electron-dl": "3.5.2",
+    "electron-window-state": "5.0.3",
+    "fs-extra": "11.2.0",
+    "open": "10.0.3"
   },
   "devDependencies": {
-    "archiver": "2.1.1",
-    "electron": "1.8.4",
-    "electron-packager": "11.2.0",
-    "husky": "0.14.3",
-    "lint-staged": "7.0.4",
-    "standard": "11.0.1"
+    "electron": "28.2.1",
+    "electron-builder": "24.9.1",
+    "standard": "17.1.0"
   },
   "standard": {
-    "globals": [
-      "Blob",
-      "saveGlyphrProjectFile"
+    "ignore": [
+      "dist",
+      "build"
     ]
   },
   "scripts": {
     "start": "node build.js && electron .",
-    "package": "node build.js && node packager.js",
-    "test": "standard",
-    "precommit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.js": "standard"
+    "pack": "node build.js && electron-builder --dir",
+    "dist": "node build.js && electron-builder -mwl",
+    "lint": "standard --fix",
+    "test": "standard"
   }
 }

preload.js

@@ -0,0 +1,13 @@
+process.once('loaded', () => {
+  const { contextBridge, ipcRenderer: ipc } = require('electron')
+
+  contextBridge.exposeInMainWorld('electron', {
+    confirmClose: async (...params) => await ipc.invoke('confirmClose', ...params),
+    enableSaveMenu: async (...params) => await ipc.invoke('enableSaveMenu', ...params),
+    exitApp: async () => await ipc.invoke('exit'),
+    listen: callback => ipc.on('ping', callback),
+    saveCanvasImage: async (...params) => await ipc.invoke('saveCanvasImage', ...params),
+    saveProject: async (...params) => await ipc.invoke('saveProject', ...params),
+    saveProjectOverwrite: async (...params) => await ipc.invoke('saveProjectOverwrite', ...params)
+  })
+})

renderer.js

@@ -1,49 +1,119 @@
-/* global alert */
-const electron = require('electron')
-const {remote} = electron
-const {dialog} = electron.remote
-const fs = require('fs')
+/* global Blob, saveGlyphrProjectFile, handleDrop, navigate, _UI */
+
+// api provided by preload.js
+const electron = window.electron
 let saveQuit = false
+let editor = false
+let currentProjectPath = ''
+
+// eliminate onbeforeunload trigger to prevent unexpected close behavior
 delete window.onbeforeunload
 
-window.addEventListener('beforeunload', confirmClose)
+// disable dev mode
+_UI.devmode = false
 
-function confirmClose (event) {
+// listen to events fired by the main process
+electron.listen(async (event, message) => {
+  switch (message) {
+    case 'confirmClose': {
+      await confirmClose()
+      break
+    }
+    case 'save': {
+      saveGlyphrProjectFile()
+      break
+    }
+    case 'saveas': {
+      currentProjectPath = ''
+      saveGlyphrProjectFile()
+      break
+    }
+    case 'saveImage': {
+      saveCanvasImage()
+      break
+    }
+  }
+})
+
+/**
+ * Event handler for closing out the app
+ */
+async function confirmClose () {
+  // if no project is open, close immediately
   if (document.getElementById('splashscreenlogo')) {
-    return
+    await electron.exitApp()
   }
 
-  event.returnValue = 'false'
-
-  return new Promise((resolve, reject) => {
-    dialog.showMessageBox({
-      type: 'question',
-      title: 'Confirm',
-      buttons: ['Yes', 'No', 'Cancel'],
-      message: 'Would you like to save before closing?'
-    }, function (response) {
-      if (response === 0) { // yes
-        saveQuit = true
-        saveGlyphrProjectFile()
-      } else if (response === 2) { // cancel
-        return false
-      } else {
-        window.removeEventListener('beforeunload', confirmClose)
-        electron.remote.app.emit('window-all-closed')
-      }
-    })
-  })
+  // close immediately if project has no unsaved changes
+  if (_UI.projectsaved) {
+    await electron.exitApp()
+  }
+
+  // otherwise bring up a save confirmation dialog first
+  const { response } = await electron.confirmClose(currentProjectPath)
+
+  if (response === 0) { // yes
+    saveQuit = true
+    saveGlyphrProjectFile()
+  } else if (response === 1) { // cancel
+    saveQuit = false
+    return false
+  } else { // no
+    await electron.exitApp()
+  }
+}
+
+/**
+ * Handle saving the canvas as an image
+ */
+async function saveCanvasImage () {
+  const canvas = document.querySelector('canvas')
+
+  await electron.saveCanvasImage(canvas.toDataURL())
+}
+
+// store references to some glyphr functions that will be overidden
+const glyphrHandleDrop = handleDrop
+const glyphrNavigate = navigate
+
+// override the glyphr handleDrop event to add desktop specific functionality
+handleDrop = function (evt) { // eslint-disable-line
+  // logic for deriving file data duplicated from original handleDrop
+  let f = evt.dataTransfer || document.getElementById('filechooser')
+  f = f.files[0]
+
+  // store context related to which project file was imported
+  if (f.path.includes('txt')) {
+    currentProjectPath = f.path
+  }
+
+  // call the original function
+  glyphrHandleDrop(evt)
+}
+
+// override the glyphr navigation event and use it to know when a project is open
+navigate = async function (oa) { // eslint-disable-line
+  // call the original function
+  glyphrNavigate(oa)
+
+  // detect if we landed on the project page for the first time
+  if (!editor && _UI.current_page === 'glyph edit') {
+    editor = true
+    await electron.enableSaveMenu()
+  }
 }
 
-saveFile = function (fname, buffer, ftype) { // eslint-disable-line
-  let fblob = new Blob([buffer], {
-    'type': ftype || 'text/plain;charset=utf-8',
-    'endings': 'native'
+// override glyphr saveFile function
+saveFile = async function (fname, buffer, ftype) { // eslint-disable-line
+  const fblob = new Blob([buffer], {
+    type: ftype || 'text/plain;charset=utf-8',
+    endings: 'native'
   })
   let link
   let event
 
-  if (fname.includes('SVG') || ftype === 'font/opentype') {
+  // handle SVG export logic
+  if (fname.includes('SVG')) {
     link = document.createElement('a')
     window.URL = window.URL || window.webkitURL
     link.href = window.URL.createObjectURL(fblob)
@@ -53,75 +123,21 @@ saveFile = function (fname, buffer, ftype) { // eslint-disable-line
     event.initEvent('click', true, false)
     link.dispatchEvent(event)
   } else {
-    if (window.saveFileOverwrite && window.saveFileOverwriteFile) {
-      fs.writeFileSync(window.saveFileOverwriteFile, buffer)
-      alert('Saved to ' + window.saveFileOverwriteFile)
+    // project file export logic
+    if (currentProjectPath) {
+      // overwrite project if saving one in progress
+      await electron.saveProjectOverwrite(currentProjectPath, buffer)
     } else {
-      dialog.showSaveDialog({
-        properties: ['openFile'],
-        title: 'Choose where to save project...',
-        defaultPath: process.env.HOME + '/' + fname
-      }, function (destination) {
-        if (destination !== undefined) {
-          fs.writeFileSync(destination, buffer)
-          window.saveFileOverwriteFile = destination
-        }
-        if (saveQuit) {
-          window.removeEventListener('beforeunload', confirmClose)
-          electron.remote.app.emit('window-all-closed')
-        }
-      })
-    }
-  }
-}
-
-// native save menus
-electron.ipcRenderer.on('save', function (event, message) {
-  saveGlyphrProjectFile(true) // overwrite file if a previously saved file exists
-})
-
-electron.ipcRenderer.on('saveas', function (event, message) {
-  saveGlyphrProjectFile()
-})
-
-// hijack save button event
-document.body.addEventListener('click', function () {
-  // mouseover needed to outpace main project's continual redraw of the button
-  document.getElementById('npSave').addEventListener('mouseover', hijackSaveButton)
-  hijackSaveButton()
-})
+      // spin up save confirmation dialog for saving new project
+      const destination = await electron.saveProject(fname, buffer)
 
-let saveMenuEnabled = false
+      if (destination) {
+        currentProjectPath = destination
+      }
 
-function hijackSaveButton () {
-  // delay to give time for the element to render
-  setTimeout(function () {
-    let button = document.querySelector('[onclick="saveGlyphrProjectFile();"]')
-    if (button) {
-      button.removeAttribute('onclick') // gotta remove the old onclick attribute to prevent the old and new from fighting with each other
-      button.onclick = function () {
-        saveGlyphrProjectFile(true) // overwrite file if one exists
+      if (saveQuit) {
+        await electron.exitApp()
       }
     }
-    if (!saveMenuEnabled && !document.getElementById('splashscreenlogo')) {
-      electron.remote.app.emit('enableSaveMenu')
-      saveMenuEnabled = true
-    }
-  }, 100)
+  }
 }
-
-let buildEditorContextMenu = remote.require('electron-editor-context-menu')
-
-window.addEventListener('contextmenu', function (e) {
-  // Only show the context menu in text editors.
-  if (!e.target.closest('textarea, input, [contenteditable="true"]')) return
-
-  var menu = buildEditorContextMenu()
-
-  // The 'contextmenu' event is emitted after 'selectionchange' has fired but possibly before the
-  // visible selection has changed. Try to wait to show the menu until after that, otherwise the
-  // visible selection will update after the menu dismisses and look weird.
-  setTimeout(function () {
-    menu.popup(remote.getCurrentWindow())
-  }, 30)
-})