Update print branch

res/menu/app.en.yml

@@ -27,7 +27,7 @@ en:
           label: 'Open…'
           accelerator: 'CmdOrCtrl+O'
           command: 'app:open-dialog'
-        - &open-new-window
+        - &open-new
           label: 'Open In New Window…'
           accelerator: 'Shift+CmdOrCtrl+O'
           command: 'app:open-new-dialog'
@@ -50,10 +50,16 @@ en:
           command: 'app:consolidate-photo-library'
           condition: 'project'
         - type: 'separator'
-        - label: 'Close'
-          accelerator: 'CmdOrCtrl+W'
-          role: 'close'
-          condition: 'window'
+        - &print
+          label: 'Print'
+          command: 'app:print'
+          accelerator: 'CmdOrCtrl+P'
+          condition: 'project'
+        - type: 'separator'
+        - &close
+          label: 'Close Project'
+          command: 'app:close-project'
+          condition: 'project'
         - type: 'separator'
         - label: 'Quit'
           accelerator: 'CmdOrCtrl+Q'
@@ -119,12 +125,17 @@ en:
       label: 'Window'
       submenu:
         - label: 'Minimize'
-          accelerator: 'CmdOrCtrl+M'
+          accelerator: 'Ctrl+M'
           role: 'minimize'
           condition: 'window'
         - label: 'Move to Center'
           command: 'app:center-window'
           condition: 'window'
+        - type: 'separator'
+        - label: 'Close'
+          accelerator: 'Ctrl+W'
+          role: 'close'
+          condition: 'window'
     - &dev
       label: 'Developer'
       id: 'dev'
@@ -148,8 +159,6 @@ en:
         - type: 'separator'
         - label: 'Rebase Project'
           command: 'app:rebase-project'
-        - label: 'Close Project'
-          command: 'app:close-project'
         - type: 'separator'
         - label: 'Theme'
           id: 'theme'
@@ -237,10 +246,15 @@ en:
         - *new
         - type: 'separator'
         - *open
+        - *open-new
         - *recent
         - type: 'separator'
         - *import
         - *consolidate
+        - type: 'separator'
+        - *print
+        - type: 'separator'
+        - *close
     - label: 'Edit'
       submenu:
         - *undo
@@ -259,19 +273,20 @@ en:
       role: 'window'
       submenu:
         - label: 'Minimize'
-          accelerator: 'CmdOrCtrl+M'
+          accelerator: 'Cmd+M'
           role: 'minimize'
           condition: 'window'
         - label: 'Move to Center'
           command: 'app:center-window'
           condition: 'window'
-        - label: 'Close'
-          accelerator: 'CmdOrCtrl+W'
-          role: 'close'
-          condition: 'window'
         - type: 'separator'
         - label: 'Bring All to Front'
           role: 'front'
+        - type: 'separator'
+        - label: 'Close'
+          accelerator: 'Cmd+W'
+          role: 'close'
+          condition: 'window'
     - *dev
     - label: 'Help'
       role: 'help'

scripts/log-viewer.js

@@ -44,7 +44,8 @@ const symbol = log =>
 const SYMBOL = {
   about: 'α',
   main: 'β',
-  prefs: 'π',
+  prefs: 'σ',
+  print: 'π',
   project: 'ρ',
   wizard: 'φ'
 }

src/browser/tropy.js

@@ -13,6 +13,7 @@ const {
 } = require('electron')
 
 const { fatal, info, logger } = require('../common/log')
+const { once } = require('../common/util')
 const { existsSync: exists } = require('fs')
 const { into, compose, remove, take } = require('transducers.js')
 
@@ -620,6 +621,10 @@ class Tropy extends EventEmitter {
       this.showOpenDialog(null)
     })
 
+    this.on('app:print', () => {
+      this.dispatch(act.item.print(), this.wm.current())
+    })
+
     this.on('app:zoom-in', () => {
       this.state.zoom = this.wm.zoom(this.state.zoom + 0.25)
     })
@@ -674,6 +679,20 @@ class Tropy extends EventEmitter {
       this.emit(cmd, BrowserWindow.fromWebContents(event.sender), ...args)
     })
 
+    ipc.on('print', async (_, items) => {
+      let win = await this.wm.open('print', this.hash)
+      await once(win, 'react:ready')
+      win.show()
+      win.send('print', items)
+      await once(win, 'print:ready')
+
+      info('printing...')
+      win.webContents.print({}, (success) => {
+        info(`print callback: ${success}`)
+        //win.close()
+      })
+    })
+
     ipc.on('error', (event, error) => {
       this.handleUncaughtException(
         error,

src/browser/wm.js

@@ -414,6 +414,10 @@ class WindowManager extends EventEmitter {
       minimizable: false,
       resizable: false
     },
+    print: {
+      width: 600,
+      height: 300
+    },
     project: {
       width: 1280,
       height: 720,

src/common/iiif.js

@@ -1,7 +1,7 @@
 'use strict'
 
 const { URL } = require('url')
-const { rotate } = require('./math')
+const { rotate, isHorizontal } = require('./math')
 
 
 class Rotation {
@@ -44,6 +44,10 @@ class Rotation {
     return `${this.mirror ? symbol : ''}${this.angle}`
   }
 
+  get isHorizontal() {
+    return isHorizontal(this.angle)
+  }
+
   get orientation() {
     switch (this.angle) {
       case 0:

src/components/main.js

@@ -21,6 +21,10 @@ const IntlProvider = connect(state => {
 
 // eslint-disable-next-line react/prefer-stateless-function
 class Main extends React.Component {
+  componentDidMount() {
+    this.props.window.send('react:ready')
+  }
+
   render() {
     return (
       <WindowContext.Provider value={this.props.window}>

src/components/print/container.js

@@ -0,0 +1,45 @@
+'use strict'
+
+const React = require('react')
+const { Item } = require('./item')
+const { WindowContext } = require('../main')
+
+class PrintContainer extends React.Component {
+  state = {
+    items: []
+  }
+
+  componentDidMount() {
+    this.context.on('print', this.onPrint)
+  }
+
+  componentWillUnmount() {
+    this.context.removeListener('print', this.onPrint)
+  }
+
+  componentDidUpdate(_, state) {
+    if (this.state.items !== state.items) {
+      this.context.send('print:ready')
+    }
+  }
+
+  onPrint = (items) => {
+    this.setState({ items })
+  }
+
+  render() {
+    return (
+      this.state.items.map(item =>
+        <Item
+          key={item.id}
+          data={item.data}
+          photos={item.photos}/>)
+    )
+  }
+
+  static contextType = WindowContext
+}
+
+module.exports = {
+  PrintContainer
+}

src/components/print/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+module.exports = {
+  ...require('./container'),
+  ...require('./item'),
+  ...require('./photo')
+}

src/components/print/item.js

@@ -0,0 +1,18 @@
+'use strict'
+
+const React = require('react')
+const { Photo } = require('./photo')
+const { arrayOf, object } = require('prop-types')
+
+const Item = ({ photos }) => (
+  photos.map(photo =>
+    <Photo {...photo} key={photo.id}/>)
+)
+
+Item.propTypes = {
+  photos: arrayOf(object).isRequired
+}
+
+module.exports = {
+  Item
+}

src/components/print/photo.js

@@ -0,0 +1,41 @@
+'use strict'
+
+const React = require('react')
+const cx = require('classnames')
+const { Rotation } = require('../../common/iiif')
+const { bool, number, string } = require('prop-types')
+
+const Photo = ({ angle, height, mirror, orientation, path, width }) => {
+  let rotation = Rotation
+    .fromExifOrientation(orientation)
+    .add({ angle, mirror })
+
+  return (
+    <div className={classes(width < height, rotation.isHorizontal)}>
+      <img
+        className={`iiif rot-${rotation.format('x')}`}
+        src={path}/>
+    </div>
+  )
+}
+
+Photo.propTypes = {
+  angle: number.isRequired,
+  height: number.isRequired,
+  mirror: bool.isRequired,
+  orientation: number.isRequired,
+  path: string.isRequired,
+  width: number.isRequired
+}
+
+const classes = (isPortrait, isHorizontal) => cx(
+  'photo',
+  'page',
+  isPortrait ?
+    (isHorizontal ? 'portrait' : 'landscape') :
+    (isHorizontal ? 'landscape' : 'portrait')
+)
+
+module.exports = {
+  Photo
+}

src/stores/print.js

@@ -0,0 +1,32 @@
+'use strict'
+
+const {
+  applyMiddleware,
+  createStore,
+  combineReducers,
+  compose
+} = require('redux')
+
+const { default: thunk } = require('redux-thunk')
+const { intl } = require('../reducers/intl')
+
+const devtools = (ARGS.dev || ARGS.debug) &&
+  window.__REDUX_DEVTOOLS_EXTENSION__
+
+module.exports = {
+  create(init = {}) {
+    let reducer = combineReducers({
+      intl
+    })
+
+    let middleware = applyMiddleware(
+      thunk
+    )
+
+    if (typeof devtools === 'function') {
+      middleware = compose(middleware, devtools())
+    }
+
+    return createStore(reducer, init, middleware)
+  }
+}

src/stylesheets/components/_print.scss

@@ -0,0 +1,28 @@
+//
+// Print
+// --------------------------------------------------
+
+html,
+body,
+main,
+.page {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+.page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  page-break-after: always;
+}
+
+img {
+  flex: 0 1 auto;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}

src/stylesheets/darwin/print-dark.scss

@@ -1,2 +1,14 @@
+/* stylelint-disable max-empty-lines */
+
+//
+// Print window
+// --------------------------------------------------
+
 $platform: "darwin";
 $theme: "dark";
+
+
+// Components
+// --------------------------------------------------
+
+@import "../components/print";

src/stylesheets/darwin/print-light.scss

@@ -1,2 +1,14 @@
+/* stylelint-disable max-empty-lines */
+
+//
+// Print window
+// --------------------------------------------------
+
 $platform: "darwin";
 $theme: "light";
+
+
+// Components
+// --------------------------------------------------
+
+@import "../components/print";