Introduce 'Download Image'

desktop/app.js

@@ -7,7 +7,7 @@ window.addEventListener('load', () => {
   // between the node backend and the web process
   const {
     ipc, editorConfig, sharedStorage, _showSaveDialog, _showExportDialog,
-    _updateWindowUrl, windowId
+    _updateWindowUrl, _downloadAsset, windowId
   } = window
   const { darPath, readOnly } = editorConfig
 
@@ -24,7 +24,12 @@ window.addEventListener('load', () => {
       console.error('Could not load DAR:', err)
     } else {
       _updateWindowTitle()
-      SmartFigureEditor.mount({ archive }, window.document.body, { inplace: true })
+      SmartFigureEditor.mount({
+        archive,
+        handleDownloadAsset: (asset) => {
+          return _downloadAsset(archive, asset)
+        }
+      }, window.document.body, { inplace: true })
     }
   })
 

desktop/preload.js

@@ -2,6 +2,7 @@
 // instead we have to provide/wrap anything needed from the node environment
 const { ipcRenderer, remote, shell } = require('electron')
 const url = require('url')
+const fse = require('fs-extra')
 const path = require('path')
 const fileFilters = require('./_fileFilters')
 
@@ -48,6 +49,24 @@ window._updateWindowUrl = function (newArchivePath) {
   window.history.replaceState({}, 'After Save As', newUrl)
 }
 
+window._downloadAsset = function (archive, asset, cb) {
+  const filename = path.basename(archive.getFilename(asset.id))
+  remote.dialog.showSaveDialog(
+    browserWindow,
+    {
+      defaultPath: filename,
+      title: 'Save asset as...',
+      buttonLabel: 'Save',
+      properties: ['openFile', 'createDirectory']
+    }
+  ).then(async (result) => {
+    if (result.canceled) return
+    const buffer = await archive.getBlob(asset.id)
+    const filePath = result.filePath
+    return fse.outputFile(filePath, buffer)
+  })
+}
+
 const browserWindow = remote.getCurrentWindow()
 window.windowId = remote.getCurrentWindow().id
 window.sharedStorage = browserWindow.sharedStorage

src/SmartFigureConfiguration.js

@@ -7,23 +7,24 @@ import {
   AddAuthorCommand, InsertAuthorCommand, EditAuthorCommand,
   AddAffiliationCommand, InsertAffiliationCommand, EditAffiliationCommand,
   AddReferenceCommand, CreateCitationCommand, EditCitationCommand, CitationComponent,
-  RemoveInlineNodeCommand
+  RemoveInlineNodeCommand, JumpToItemCommand
 } from 'substance'
 
 import SmartFigureLoader from './model/SmartFigureLoader'
 import SmartFigureComponent from './components/SmartFigureComponent'
+import ContextualDropdownMenu from './components/ContextualDropdownMenu'
+
 import InsertPanelCommand from './commands/InsertPanelCommand'
 import ReplacePanelImageCommand from './commands/ReplacePanelImageCommand'
 import RenamePanelImageCommand from './commands/RenamePanelImageCommand'
+import DownloadPanelImageCommand from './commands/DownloadPanelImageCommand'
 import AddFileCommand from './commands/AddFileCommand'
 import RenameFileCommand from './commands/RenameFileCommand'
 import AddResourceCommand from './commands/AddResourceCommand'
 import AddKeywordGroupCommand from './commands/AddKeywordGroupCommand'
 import EditKeywordGroupCommand from './commands/EditKeywordGroupCommand'
 import AttachFileCommand from './commands/AttachFileCommand'
 import AttachResourceCommand from './commands/AttachResourceCommand'
-import ContextualDropdownMenu from './components/ContextualDropdownMenu'
-import JumpToItemCommand from 'substance/commons/JumpToItemCommand'
 
 const {
   ParagraphConverter, BoldConverter, ItalicConverter,
@@ -101,6 +102,7 @@ export default class SmartFigureConfiguration extends Configurator {
     config.addCommand('remove-panel', RemoveItemCommand, { type: 'panel' })
     config.addCommand('rename-panel-image', RenamePanelImageCommand)
     config.addCommand('replace-panel-image', ReplacePanelImageCommand)
+    config.addCommand('download-panel-image', DownloadPanelImageCommand)
     config.addCommand('move-panel-up', MoveItemCommand, { type: 'panel', direction: 'up' })
     config.addCommand('move-panel-down', MoveItemCommand, { type: 'panel', direction: 'down' })
 
@@ -217,6 +219,7 @@ export default class SmartFigureConfiguration extends Configurator {
         { command: 'remove-panel', label: 'Remove Panel' },
         { command: 'rename-panel-image', label: 'Rename Image' },
         { command: 'replace-panel-image', label: 'Replace Image' },
+        { command: 'download-panel-image', label: 'Download Image' },
         { command: 'move-panel-up', label: 'Move Panel Up' },
         { command: 'move-panel-down', label: 'Move Panel Down' },
         { command: 'add-keyword-group', label: 'Add Keyword Group' },

src/commands/DownloadPanelImageCommand.js

@@ -0,0 +1,8 @@
+import RenamePanelImageCommand from './RenamePanelImageCommand'
+
+export default class DownloadPanelImageCommand extends RenamePanelImageCommand {
+  execute (params, context) {
+    const { asset } = params.commandState
+    context.app.send('downloadAsset', asset)
+  }
+}

src/components/SmartFigureEditor.js

@@ -24,7 +24,8 @@ export default class SmartFigureEditor extends AbstractEditor {
       requestPopover: this._requestPopover,
       releasePopover: this._releasePopover,
       closePopover: this._closePopover,
-      requestFileSelect: this._openFileSelect
+      requestFileSelect: this._openFileSelect,
+      downloadAsset: this._downloadAsset
     })
   }
 
@@ -34,6 +35,7 @@ export default class SmartFigureEditor extends AbstractEditor {
     const globalEventHandler = new GlobalEventHandler()
     this._globalEventHandler = globalEventHandler
     this.context.globalEventHandler = globalEventHandler
+    this.context.app = this
   }
 
   didMount () {
@@ -152,6 +154,12 @@ export default class SmartFigureEditor extends AbstractEditor {
     return fileSelect.selectFiles()
   }
 
+  _downloadAsset (asset) {
+    if (this.props.handleDownloadAsset) {
+      return this.props.handleDownloadAsset(asset)
+    }
+  }
+
   // TODO: ATM we show the contextmenu for the last selected item
   // which is a bit off when right-clicking somewhere else, i.e. not on a selectable
   _onContextMenu (event) {